</html>
Beginnen wir damit, nur zu sagen: es handelt sich tatsächlich um eine HTML-Datei. Das hat zwar schon der Datei- Name angedeutet. Aber der Browser glaubt es noch nicht, bis er es lesen kann: <html>
Hier sehen wir auf der Website noch nichts. Aber wir sehen, dass fast jeder HTML-Tag einmal ohne Schrägstrich und danach mit Schrägstrich vor dem Befehl dargestellt ist. Der selbe Befehl mit Schrägstrich bedeutet das Ende des Bereiches, auf den sich der Befehl bezieht.
Der Dateiname der ersten oder evtl. einzigen Datei auf einer Domain sollte immer "index.htm" oder "index.html" heißen. Dann reicht die Eingabe des Domainnamens (z.B. www.ulrichsommer.net), um diese Datei aufzurufen.
<head>
<title>Homepage
</title>
</head>
<body>
</body>
</html>
Jezt wird der Homepage ein <head>-Bereich hinzugefügt, der keine Inhalte erhält, die im Browserfenster angezeigt werden, sondern der z.B. den Text enthält, der mit dem <title>-Tag in der Titelleiste des Browsers gezeigt wird. Ferner sind in <meta>-Tags Informationen enthalten, die den Suchmaschinen zur Referenzierung dienen
Erst im <body>-Bereich kommen die Inhalte, die im Browserfenster gezeigt werden. Damit steht das Grundgerüst einer Homepage.
<head>
<title>Homepage
</title>
</head>
<body>
<font face="arial,sans-serif">
<h1>Überschrift</h1>
<p>Fließtext</p>
</font>
</body>
</html>
Der <h1>-Tag definiert die Überschrift in größter Schriftgröße ("Header 1"). <h2> definiert Überschriften eine Nummer kleiner, <h3> noch kleiner, usw.
Der <p>-Tag definiert Fließtext in einem Absatz ("Paragraph").
Der Tag <font face="..."> definiert die Schriftart.
Die komische Zeichenfolge Ü stellt im Browser ein Ü dar. Dies ist leider notwendig, weil die deutschen Zeichensätze nicht in aller Welt auf die selbe Weise dargestellt werden, sondern z.B. in einem englischen Zeichensatz völlig andere Symbole darstellen. Durch die Umschreibung werden sie in aller Welt gleich dargestellt. Neben einer Vielzahl von Sonderzeichen sind die wichtigsten deutschen Sonderzeichen und Umlaute leicht zu merken:
| Ü = Ü | ü = ü | ä = ä |
| ö = ö | ß = ß | " = " |
| > = > | < = < | & = & |
Überschrift
Fließtext
<head>
<title>Homepage
</title>
</head>
<body
bgcolor="#aaaaaa"
text="#770077"
link="#0000CC"
vlink="#000066"
alink="#000000">
<h1>Überschrift</h1>
<p>Fließtext</p>
</body>
</html>
Im <body>-Tag wird
durch den Subtag "background=" ein Hintergrundbild definiert.
Durch den Subtag"text=" wird die Textfarbe definiert.
Durch den Subtag "link="wird die Farbe für Links definiert.
Durch den Subtag "alink="wird die die Farbe für aktive Links definiert.
Durch den Subtag "vlink=" wird die Farbe für bereits besuchte Links und
durch den Subtag "bgcolor=" wird die Hintergrundfarbe für die gesamte Seite definiert.
Die Farben werden im hexadezimalen Zahlensystem definiert. Gezählt wird von 0-f (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f).
Dabei definieren die ersten beiden Stellen den Wert für Rot, die dritte und vierte Stelle definiert den Wert für Grün und die letzten beiden Stellen definieren den Wert für Blau. Hier einige Beispiele:
| #ff0000 | #00ff00 | #0000ff | |||
| #ffff00 | #ff00ff | #00ffff | |||
| #000000 | #888888 | #ffffff |
Überschrift
Fließtext
www.ulrichsommer.net
</a>
<a href="mailto:nobody@x-online.de">
nobody@x-online.de
</a>
Im folgenden lassen wir das restliche html-Grundgerüst weg, da die neu dargestellten Tags alle innerhalb des <body>- Tags eingefügt werden.
Der <a>- Tag erzeugt einen Link. "a" steht für Anchor (Anker). Der Subtag "href=" gibt an, dass der Anker ein Link ist, der auf eine andere Webadresse verweist. Die Adresse wird entweder als komplette "URL" mit "http://www." angegeben ("www." reicht nicht) oder als relativer Link, wenn die Datei auf der selben Domain liegt. Wenn sie im selben Verzeichnis liegt, wird nur der Dateiname benötigt. Das Argument eines Subtags, welches nach dem "="-Zeichen folgt, in diesem Fall die Adresse des Links, muss immer in Anführungszeichen gestellt werden.
Für einen Link auf eine Mailadresse muss lediglich das "mailto:" mit Doppelpunkt vor die Adresse eingefügt werden. Bei einem Klick auf diesen Link öffnet dann automatisch ein Mailfenster mit der betreffenden Adresse.
nobody@x-online.de
width="100" height="100">
Der <img>-Tag fügt ein Bild ein. Natürlich ist es schwer, ein Bild in eine ASCII Datei direkt einzufügen. Deshalb wird eine externe Bilddatei eingebunden. Die Adresse des Bildes wird nach den selben Regeln, wie bei dem Link in den Subtag "src=" angegeben. Sie kann auch auf einer anderen Domain liegen. Die Subtags "width=" und "height=" geben die Größe des Bildes in Pixeln an. Damit wird der Platz für das Bild bereits im Browser reservieirt, wenn das Bild noch nicht geladen ist.
<tr>
<td>Feld 1 in Zeile 1</td>
<td>Feld 2 in Zeile 1</td>
</tr>
<tr>
<td>Feld 1 in Zeile 2</td>
<td>Feld 2 in Zeile 2</td>
</tr>
</table>
Der <table>- Tag erzeugt eine Tabelle. Der Subtag border="1" legt die Breite des Randes um die Zellen fest. Ist er 0, ist die Tabelle nicht direkt als solche an den Linien erkennbar. Der Subtag width="100%" besagt, dass die Tabelle 100% der zur Verfügung stehenden Breite, in diesem Fall die Breite des Tabellenfensters ausnützt. Wenn die Breite ohne "%" angegeben wird, ist sie in Pixeln angegeben.
Der <tr>-Tag definiert eine Zeile. Der <td>-Tag ein Feld innerhalb der Zeile. Der Subtag "width=" kann auch hier angewendet werden.
| Feld 1 in Zeile 1 | Feld 2 in Zeile 1 |
| Feld 1 in Zeile 2 | Feld 2 in Zeile 2 |