HTML Grundbefehle Zurück
Wie erstelle ich ein HTML Dokument?
Dazu sollte man ein wenig zur Programmiersprache "HTML" wissen.
(Im Grunde sind es "nur" Steuerbefehle für einen Browser, um Ihm zu sagen, wie er die Informationen der angeforderten Seite im Browserfenster darstellen soll...)
Dieses will ich Ihnen hiermit auf dieser Seite ein wenig näherbringen!
Also nochmals, wie erstelle ich ein HTML Dokument:
Des weiteren ist es wichtig, das in den Dateinamen keine
Umlaute wie: ä, ö,
ü, ß und andere Sonderzeichen vorkommen,
denn diese Zeichen "mag" und kennt das Internet zum Teil nicht!
Ganz wichtig, die im Home Verzeichniss eines Webspaces liegende erste Seite
die angezeigt werden soll,
also die Startseite, sollte oder muss index.htm heissen!! (oder auch index.html)
Nun zu den Grundsätzen der HTML Programmierung:
Grundsätzlich: Jeder Befehl beginnt mit <BEFEHL> und endet mit </BEFEHL>!!
(Ausnahme bilden einige "Stand-Alone" Tags...)
HTML Befehle in den eckigen Klammern heissen "TAG´s"
Grundgerüst:
<HTML> Beginn und ende JEDES HTML Dokumentes.
<HEAD> Beginn des "Kopfes" der Seite
<TITLE>Titel der Seite</TITLE> Name/Titel der Seite (Wird bei einzelnen Fenstern angezeigt, nicht aber, wenn die Seite in einem Frame angezeigt wird!)
<META http-equiv="Content-Language" content="de"> META-Informationen für Suchmaschinen oder robots.
</HEAD> Ende des "Kopfes" der Seite
<BODY> "Körper" der Seite, das was der Browser anzeigt.
Hier kommt dann der Inhalt der Seite, also:
Text, Bilder, Links usw.
</BODY> Ende des "Körpers" der Seite
</HTML> Ende der Seite
Das war das Grundgerüst, nun wollen wir die Seite BUNT machen...
Grundsätzliches:
color="#008000">Man kann den Hintergrund einer Seite wie folgt gestalten:
Hintergrund in einer Farbe:
bgcolor="#FF0000"
Der Hintergrund ist dann in einer einzigen Farbe die über den Wert #xxxxxx definiert wird. (Siehe Farbcodes)
Gestaltung der Seite mit einem Hintergrundbild:
background="../samthell.jpg"
Des weiteren kann man den Links in den Seiten Farben zuweisen, oder einfach
die Browsergrundeinstellung so lassen,
wie sie ist, da wir das aber nicht wollen
und dem Besucher UNSERE Seite zeigen wollen, hier die Definitionen für die
"Linkeinfärbung":
Farbe eines Links: link="#008000"
Farbe eines besuchten Links: vlink="#0000FF"
Farbe eines aktiven Links: alink="#FF0000"
Alle diese Tags werden als Parameter in den <BODY> Tag eingebaut.
Das sieht dann so aus:
<body background="hintergrundbildname.jpg" link="#008000" vlink="#0000FF" alink="#FF0000">
Dieses ist der Original Quelltext dieser Seite! (Das Hintergrundbild liegt hierbei im selben Verzeichnis wie die enthaltene HTML Seite!)
Nun wollen wir etwas Text gestalten:
Textformatierung:
Der FONT Befehl:
<FONT face="ARIAL" size="5" color="#FF0000"> So sieht das dann aus!
Erklärung:
FONT öffnet den Befehl zur Textformatierung
FACE="Schrifttyp" definiert den
Schrifttyp, also Arial, Book Antiqua, Courier oder System und wie Sie alle
heissen mögen.
(Wichtig: Ist die gewählte Schriftart auf dem Rechner
der sich die Seite "Ansieht" nicht installiert,
wird die Standartschriftart gewählt! Diese ist im Browser selbst fest zu legen!)
SIZE="5" definiert die Größe der Buchstaben (5= 18 pt)
COLOR="#FF0000" definiert hier z.B. die Farbe "#FF0000" siehe auch die Extraseite "HTML Farben".
ALLE Definitionen innerhalb des FONT-Tags werden durch
</FONT> wieder beendet,
und die Standartschriftart oder eine vorher definierte und nicht beendete Formatierung hat wieder Gültigkeit.
Weitere Textformatierungen:
<CENTER> Ausrichtung einer Zeile in der Mitte der Seite </CENTER>
<B> Steht für BOLD und meint FETT-Schreibart der Buchstaben </B>
<I> Steht für "Italic" und meint kursiv </I>
<U> steht für "Unterstrichen" </U>
<FONT face="ARIAL" size="3" color="#FF0000"><CENTER><B><I><U> Alles zusammen sieht dann so aus! </CENTER></B></I></U></FONT>
Aufzählungen:
mit Ziffern:
Dies ist
eine Aufzählung
Unsortiert:
Dies ist eine
Unsortierte Liste
Erklärung:
Aufzählung/listung mit Ziffern:
<OL> Beginnt die "Ordered List" geordnete Aufzählung.
<LI>Dies ist</LI> Aufzählungseintrag 1
<LI>eine Aufzählung</LI> Aufzählungseintrag 2
</OL> Beendet die "Ordered List" geordnete Aufzählung.
Unsortierte Aufzählung/Auflistung:
<UL> Beginnt die "Unsorted List" ungeordnete Aufzählung.
<LI>Dies ist eine</LI> Aufzählungseintrag 1
<LI>Unsortierte Liste</LI> Aufzählungseintrag 1
</UL> Beendet die "Unsorted List" ungeordnete Aufzählung.
Den TAG
<UL> kann man auch ohne den Folge-TAG <LI> benutzen und somit Texte
nach rechts einrücken.
So realisiere ich die Einrückung unter den
Überschriften!
Der UL Typ kann noch weiter definiert werden, es gibt 3 verschiedene Styles die mir bekannt sind:
Es wird definiert über den Parameter "type=" und dann entsprechend den Namen des gewünschten Punktes.
Der TAG lautet:
<IMG SRC="bildname.jpg" ALT="Info zum Bild">
Ein Bild sollte am besten im selben Verzeichnis liegen wie die Seite, in der es eingebunden ist.
Ansonsten muss man einen kompletten Pfad angeben:
<IMG SRC="http://www.meinedomain.de/verzeichniss/bildname.jpg" ALT="Info zum Bild">
Die Information im "ALT" Parameter erleichtert Suchmaschinen das finden von Bildern und des weiteren kann man Informationen einblenden wie ich es bei meinen Navigationsbuttons auch mache. Einige HTML Lehr-Seiten "befehlen" einem das einfügen der ALTernativ-Information, da es die Seiten für Sehbehinderte attraktiver machen soll. Dieses ist natürlich ein wichtiger Schritt für die Gleichberechtigung im Internet.
Falls ein Bild wegen einer Störung in der Übertragung oder wegen eines
Abbruches des Ladevorgangs nicht richtig zu ende geladen wird,
wird wenigstens
der Alternativ-Text angezeigt.
(Das sehen Sie auch, wenn Sie diese Seite mit einer langsamen Verbindung aufrufen...)
BEISPIEL:
<img border="1" src="connect.gif" width="34" height="34" ALT="Dieses ist eine Symbolgrafik für eine Internetverbindung">
Weitere Erklärung zu den verwendeten TAG´s:
Border="1" Setzt einen Rahmen um die Grafik, soll er weggelassen werden, ist "0" ein zu tragen
src="connect.gif" Einfügebefehl für das Bild connect.gif, welches im selben Verzeichnis liegt wie die Seite, wo es enthalten ist.
width="34" Breite des Bildes in Pixeln, mit dem Verändern der Originalwerte der Bilddatei kann man die Grafik entspr. variieren.
height="34" Höhe des Bildes in Pixeln, mit dem Verändern der Originalwerte der Bilddatei kann man die Grafik entspr. variieren.
Links:
Links sind Verknüpfungen von der Seite zu anderen Seiten
oder Objekten,
wie Bilder Videos, Dokumente oder andere Downloads...
Der Link Tag sieht aus wie folgt:
Link zu einer Internetseite:
<A HREF="http://www.reichmann.it/index.htm" Target="Internetinformationen">Linkverknüfpfter Text</A>
Erklärung:
Der Tag "A" leitet einen Link ein.
HREF="http://www..de/xyz.htm" definiert die Adresse des Ziels des Links.
TARGET="NAME" definiert ob der Link evtl. in einem neuem Fenster
mit dem Titel "NAME" geöffnet wird.
Wird dieser Befehl weg gelassen, wird der Link im Aktuellen Fenster geöffnet.
Die ist ebenfalls der Fall, wenn der Name des Zielfensters identisch ist mit dem des
aktuellen Fensters.
Nach der Eckigen Klammer wir der folgende Text komplett als Link angezeigt, bis der Befehl mit </A> beendet wird.
Das sähe im obigen Beispiel so aus:
Link zu einer E-Mail Adresse:
<a href="mailto:webmaster@photo-reichmann.de">webmaster@photo-reichmann.de</a>
Das sieht dann so aus:
(Ist im Browser KEIN E-Mail Programm eingerichtet, kann es sein, das dann beim klicken gar nichts passiert...
Linkverknüpfte Grafik:
Grafiken können auch mit einem Link belegt werden, um z.B.
ein Banner für
seine Seite werben zu lassen,
oder einen Button der das surfen auf der Seite etwas attraktiver macht....
Hier der Tag:
<A HREF="http://www.reichmann.it/www/html_farbcodes.htm" TARGET="Farben"><IMG SRC="hexfarben.gif" ALT="Hier klicken um die Hexfarbenseite zu öffen!!"></A>
Das sieht dann so aus:
Erklärung:
Der Link Befehl sollte nun klar sein.
Anders ist nur, das hier anstelle eines einfachen Textes ein Bild (Tag <IMG SRC="Bildname.jpg">) eingefügt wurde.
Der weitere "ALT" Tag im IMG Tag ist dafür da,
das anstelle einer Grafik bei fehlen der selbigen durch eine fehlerhafte Übertragung,
oder abbrechen des Laden der Seite ein Text angezeigt wird.
Dieser Text kann auch ganz nützlich sein, wie Sie bei meinen Buttons im unteren Frame sehen.
Dies und das:
*Umlaute werden wie folgt dargestellt:
Ä = Ä a = ä
Ö = Ö ö = ö
Ü = Ü ü = ü
Sonderzeichen
ß = ß
(SZ)
Leerzeichen =
€ = € (Eurozeichen)
" = " (Anführungszeichen)
& = & (UND)
< = < (Eckige
Klammer öffnend)
> = > (Eckige Klammer schliessend)
*Das Internet kennt (noch) keine Umlaute, um diese Fehlerfrei wiedergeben zu können sind diese Schreibweisen notwendig!
Beispiel: Soßenprüfung wird im Quelltext: Soßenprüfung geschrieben!
Hier noch der TAG für die nette Trennlinie: <hr color="#000000" noShade SIZE="1">
Hier ein Beispiel einer Tabelle:
| Leitet eine Spalte ein | Leitet eine weitere Spalte ein |
| noch eine | noch eine |
| Frage | Information |
Tabellen werden mit 3 TAGS definiert:
TABLE, TR und TD:
Die folgenden Tags sind identisch mit obiger Tabelle:
Erklärung
border="5" bestimmt die Dicke der Aussenrand-linien der Tabelle (Normal ist "1")
width="50%" bestimmt die Breite der Tabelle
in Relation zur Bildschirmbreite.
(Die Breite kann definiert werden über Pixelangaben oder Prozentuale Werte)
Dieser Block muss zwischen <HEAD> und </HEAD> stehen.
<STYLE type=text/css>A:link {
TEXT-DECORATION: none
}
BODY {
scrollbar-face-color:#000000;
scrollbar-highlight-color:#FF0000;
scrollbar-3dlight-color:#FF0000;
scrollbar-darkshadow-color:#FF0000;
scrollbar-shadow-color:#FF0000;
scrollbar-arrow-color:#00FF00;
scrollbar-track-color:#696969;
}
</STYLE>
Hier die Erklärung / Anleitung
Man kann fast alle TAGS Miteinander kombinieren,
um gewisse Wirkungen zu erzielen,
hier sollte man etwas experimentieren...!!