HTML Grundgerüst
Das Herzstück jeder HTML-Schriftrolle
Nachdem du eine gute halbe Stunde lang über dem Code gebrütet und deine brillanten Gedanken dazu niedergeschrieben hast, was hoffentlich ohne allzu viele Flüche ablief, freue ich mich, dir nun die erleuchtende Weisheit des Dokuments zu enthüllen. Nimm dir Zeit, diese Informationen mit Bedacht zu studieren, denn wie jedes gute Zauberbuch birgt auch dies seine eigenen kleinen Geheimnisse.
HTML Grundgerüst
Die Rollenverteilung im Code-Chaos
HTML-Tags
Das Herzstück jeder HTML-Schriftrolle
Mit den mystischen <…>-Tags öffnest du die magischen Türen für HTML-Elemente, und mit </…> schließt du sie wieder. Zwischen diesen Türen können Texte oder weitere verschachtelte Elemente Platz finden. Die Tags selbst enthalten neben dem Elementnamen auch Attribute. Einige Tags schließen sich sogar von selbst – diese besonders faulen Tags wirst du bald kennenlernen.
<html>...</html>
Attribute
Wenn HTML-Tags anfangen, Eigenheiten zu entwickeln
Manchmal reicht die Grundausstattung eines Elements nicht aus. Um deinen Elementen besondere Eigenschaften zu verleihen, kannst du Attribute hinzufügen. Diese magischen Attribute sind wie zusätzliche Informationen, die dein Element aufwerten. Stell dir vor, dein Element wäre ein Pferd. Mit dem richtigen Attribut, zum Beispiel „Horn“, machst du daraus ein prächtiges Einhorn.
<h1 class="horn">Einhorn</h1>
Dokumententypdeklaration
Der geheime Handschlag der Browserwelt
Dieser unscheinbare Tag am Anfang ist kein gewöhnliches HTML-Tag, sondern die sogenannte Dokumententypdeklaration. Mit höflicher Bestimmtheit weist er den Browser darauf hin, dass es sich hier um ein HTML5-Dokument handelt und wie es angemessen interpretiert werden soll.
<!DOCTYPE html>
Das <html>-Element mit dem lang-Attribut
Damit der Browser nicht rätseln muss, in welcher Sprache er träumt
Das <html>-Element eröffnet das HTML-Dokument und trägt ein magisches Attribut, das die Sprache des Inhalts festlegt. In unserem Fall flüstert lang=“de“ dem Browser zu, dass der Text auf Deutsch verfasst ist.
<html lang="de">
Das <head>-Element
Der Ort, an dem HTML seine Gedanken sortiert
Das <head>-Element ist wie die verborgene Schaltzentrale deines Dokuments – ein geheimer Ort, an dem unsichtbare Kräfte wirken. Hier werden Meta-Informationen gesammelt, die für Suchmaschinen und die makellose Darstellung deiner Seite von entscheidender Bedeutung sind.
<head>...</head>
Das <title>-Element
Der Name über der Tür deines digitalen Zauberwerks
Eingebettet im <html>-Element thront dieser kleine Zauberspruch, der den Titel deiner Internetseite bestimmt. Der Titel erscheint im Browser oben in der Tableiste und macht bei den Suchmaschinen Eindruck. Wähle deinen Titel weise, denn der kleine Drache will schließlich stolz seinen Namen in die Welt hinausposaunen! Ein prägnantes und aussagekräftiges Title-Element (50–60 Zeichen) wirkt wie ein magischer Schlüssel, der dazu beiträgt, dass deine Webseite besser in Suchmaschinen gefunden wird.
<title>...</title>
Das <body>-Element
Hier passiert die Magie – oder das Chaos
Das <body>-Element ist wie das schützende Dach deiner Webseite, unter dem sich alles versammelt, was der Nutzer zu Gesicht bekommt. Hier tummeln sich Überschriften, Texte, Bilder und andere Elemente wie auf einer wilden Party. Gemeinsam erwecken sie deine Seite zum Leben!
<body>...</body>
Das <h1> und <p>-Element
Große Worte, kleine Geschichten – die Kunst des Erzählens in HTML
Das <h1>-Element ist die mächtigste Überschrift auf deiner Seite. „Zauberbuch“ erscheint nun in voller Klarheit, wie eine eindrucksvolle magische Formel. Das <p>-Element sorgt hingegen für den Fließtext, denn hier entfaltet sich der Inhalt deiner Seite und lädt deine Besucher zum Schmökern ein.
<h1></h1> <p></p>In dieser Lektion hast du gelernt…
- Wie HTML-Tags funktionieren und warum sie das Grundgerüst jeder Webseite bilden.
- Wie Attribute HTML-Elemente erweitern, um ihnen spezielle Eigenschaften zu verleihen.
- Warum die Dokumententypdeklaration wichtig ist, damit Browser dein HTML richtig interpretieren.
- Welche Rolle das
<head>-Element spielt, um Meta-Informationen und den Seitentitel zu verwalten. - Wie du mit
<body>,<h1>und<p>Inhalte strukturierst, damit Texte und Überschriften sinnvoll angeordnet sind.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Öffne das Portal
Aufgabe 1: Das Erwecken der Seite
Im Zauberbuch findest du das Pergament des alten Doctype-Zaubers. Um das Portal zu Aetheron zu öffnen, musst du die Formel richtig setzen. Diese Formel ist der Schlüssel, der das Tor in die magische Welt öffnet. Verwende Visual Studio Code, um den Zauberspruch an den Anfang deiner Seite zu schreiben.
Aufgabe 2: Der Zauber der Sprache
Die Sprache der Magie muss klar festgelegt werden, damit alle Wesen im Aetheron-Reich die Worte verstehen können. Setze das lang-Attribut in deinem HTML-Tag, um die Sprache festzulegen. Schreibe lang=“de“, um die Seite auf Deutsch zu setzen, und speichere den Zauber.
Aufgabe 3: Gib der Seite einen Titel
Die Suchmaschinen wollen gerne wissen, um was es sich handelt. Erstelle einen Titel im head-Bereich in dem steht: Die magische Welt von Aetheron.
Aufgabe 4: Der erste Zauberspruch im Körper des Buches
Nun, da die Grundstruktur deiner magischen Schriftrolle steht, füge einen h1-Titel hinzu, der die Kraft deiner Seite darstellt. Verwende eine Überschrift wie „Willkommen in Aetheron“ und darunter einen p-Tag, der einen kurzen Begrüßungstext enthält, z.B. „Du hast das Tor zur magischen Welt betreten.“
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
<!DOCTYPE html>
<html lang="de">
<head>
<title>Die magische Welt von Aetheron</title>
</head>
<body>
<h1>Willkommen in Aetheron</h1>
<p>Du hast das Tor zur magischen Welt betreten.</p>
</body>
</html>