Die Befehle im HTML Code, die den Browser anweisen, bestimmte Aktionen durchzuführen oder Text auf eine vordefinierte Art darzustellen, werden „Tags“ genannt.
<Anfangstag> Inhalt </Endtag>
Tags können als Erweiterung auch sogenannte Attribute enthalten. Das sind Werte, die die genauere Anweisungen dazu enthalten, was ein Tag bewirken soll.
<Anfangstag Attribut=“wert“> Inhalt </Endtag>
Die Attribute werden immer in das Anfangstag geschrieben und wirken, wie die Kernfunktion eines Tags, auf den gesamten Inhalt bis zum Endtag. Dazu aber später mehr, jetzt sehen wir uns den eigentlichen Aufbau einer HTML-Datei an.
Das Grundgerüst einer HTML Datei sieht immer gleich aus und dient lediglich der Segmentierung des Codes, der darin geschrieben wird. Es hat also an sich noch keinerlei Auswirkungen auf Aussehen und Funktion der Website.
Kopieren Sie nun folgenden Code in Ihren Editor:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Die erste Zeile, <!DOCTYPE html> definiert die Art der HTML-Datei in der wir uns befinden. In diesem Tutorial beschränken wir uns auf einfache HTML5 Websites, der Doctype wird sich also nicht verändern.
Zwischen <html> und </html> steht der eigentliche Code. Dieser ist dann nochmals in zwei Segmente unterteilt: Dem „Kopf“ zwischen <head> und </head> sowie dem „Körper“ zwischen <body> und </body>.
Der Seitenkopf ist vor Allem reserviert für das Bereitstellen von Hintergrundinformationen an den Browser. Wir werden unserer Seite nun einen Titel hinzufügen, indem wir in den Head-Bereich des Codes folgendes Schreiben:
<title> Mein Seitentitel </title>
Ihr gesamter Code sollte nun also so aussehen:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
</head>
<body>
</body>
</html>
Um sich das Ergebnis Ihrer bisherigen Programmierarbeit anzusehen, speichern Sie die Datei im Editor (Strg+S), rufen das Browserfenster wieder von der Taskleiste auf und aktualisieren die Seite durch Druck auf F5. Das Aktualisieren ist notwendig, da der Browser beim Aufruf einer Website einmalig den HTML-Code aus der Datei lädt und die Darstellung dann speichert bis er angewiesen wird, erneut nachzusehen, ob sich der Code verändert hat.
Beachten Sie bitte, dass die hier genannten Tastenkürzel auf allen Windows Geräten mit den gängigsten Browsern und Editoren funktionieren, es auf Apple Geräten und anderen Betriebssystemen zu Unterscheidungen kommen kann. Wenn die Tastenkombinationen nicht funktionieren, finden Sie im Editor sowie im Browser im Menü die entsprechenden Punkte zum „Speichern“ bzw. „Aktualisieren“.
Im aktualisierten Browserfenster können Sie nun den veränderten Seitentitel (ganz oben in der Fensterleiste oder im Tab) sehen.