HTML Basis Aufbau
Bevor wir zum Layout kommen, schauen wir uns an, wie eine HTML-Seite aussehen muss, damit der Browser (Chrome, Firefox usw.) diese akzeptiert. Bisher haben wir mit ein paar HTML-Elementen rumgespielt.
Jetzt wollen wir den grundsätzlichen Aufbau eines HTML-Dokumentes kennenlernen. Den müssen wir erstellen, wenn der Browser unsere Seite darstellen soll. Der Browser benötigt dafür ein paar HTML-Elemente, welche ich dir gleich erkläre.
HTML-Dokument - Aufbau
Der grundsätzliche HTML-Aufbau sieht so aus:
<!DOCTYPE html>
<html>
<head>
<!-- Nicht sichtbare Elemente: Das "Gehirn" der Webseite -->
</head>
<body>
<!-- Inhaltselemente: Der sichtbare Körper der Webseite -->
</body>
</html>
!DOCTYPE
Das erste Element ist das <!DOCTYPE html> Element. Damit weiß der Browser, dass er HTML erkennen muss.
HTML
Das <html>-Element, mit Anfang und Ende, zeigt an von wo bis wo HTML zu finden ist. Alles innerhalb des <html>-Elements ist im Browser relevant für die darzustellende Webseite. Außerhalb dieses Elements solltest du kein HTML verwenden.
HEAD
Das <head>-Element beinhaltet alle relevanten Informationen über die Webseite, die nicht sichtbar sind. Es ist der Kopf der Webseite, welcher das Gehirn beinhaltet. Was in den Kopf reingeschrieben wird lernst du später noch.
BODY
Das <body>-Element ist dann für den Inhalt zuständig. Also der Körper der Webseite mit allem was man sehen und nicht sehen kann. Dort kannst du alle Elemente hineinsetzen, die du in den letzten Modulen erlernt hast.
Jetzt gibt es keine Übung für dich, sondern ein Geschenk. Ich habe eine fertige HTML-Seite mit der Grundstruktur für dich erstellt. Mit dieser Datei kannst du später ein neues Webseiten-Projekt anfangen, ohne dass Du dir die Struktur merken musst.