Baue deine Seite

Jetzt bist du an der Reihe. Der Editor ist leer, und du schreibst die ganze Seite selbst, auch die Teile, die der Editor bisher im Hintergrund für dich ergänzt hat.

Die Anweisungen sind eine Checkliste von allem, was deine Seite enthalten muss, und sie werden von oben nach unten geprüft: Bei jedem Klick auf „Ausführen“ stoppen die Prüfungen beim ersten Punkt, der noch nicht erledigt ist. Du kannst deinen Code also jederzeit ausführen, um zu sehen, welcher Punkt als Nächstes kommt. Die Prüfungen betrachten nur den Aufbau der Seite, nie den Text.

Das Grundgerüst. Beginne mit den Teilen, die du aus den ersten Lektionen kennst:

• die Dokumenttyp-Deklaration <!DOCTYPE html> ganz am Anfang,
• das Element html mit dem Attribut lang, das Browsern, Screenreadern und Suchmaschinen sagt, in welcher Sprache die Seite geschrieben ist,
• das Element head mit der Zeichenkodierung <meta charset="utf-8">, dank der Buchstaben wie ä oder ß richtig angezeigt werden, und mit dem Seitentitel (title), den du in der Vorschau nicht siehst, den der Browser aber im Tab anzeigt,
• das Element body mit dem sichtbaren Inhalt der Seite.

Das Layout. Teile den Body in drei Bereiche: einen header mit der Hauptüberschrift, main für den Hauptinhalt und einen footer unten, zum Beispiel mit dem Namen des Autors. Vergiss das Einrücken nicht: Drücke die Tab-Taste, um jedes verschachtelte Element eine Ebene weiter einzurücken als sein übergeordnetes Element, damit du auf einen Blick siehst, was in was steckt.

Der Inhalt. Schreibe in main, worum es bei deinem Thema geht, warum du es magst oder was daran interessant ist. Füge eine Liste hinzu und hebe die wichtigen Wörter hervor. Damit die Seite leicht zu lesen ist, kannst du den Inhalt mit Überschriften zweiter Ebene (h2) oder in section-Elemente gliedern.

Das Bild. Du kannst unser Bild mit Katzen verwenden, /learn/html/cats.webp, oder ein beliebiges Bild aus dem Internet: Klicke es mit der rechten Maustaste an, kopiere die Bildadresse und füge sie in das Attribut src ein. Wenn das Bild nicht erscheint, probiere ein anderes. Und vergiss das Attribut alt nicht, das das Bild für Menschen beschreibt, die es nicht sehen können.

Der Link. Er soll auf eine Webseite zeigen, auf der Besucher mehr über dein Thema erfahren, zum Beispiel Wikipedia. Besucher möchten wahrscheinlich zu deiner Seite zurückkehren, also lass den Link in einem neuen Tab öffnen.

Die Tabelle. Überlege dir etwas, das in Zeilen und Spalten passt, etwa einen Stundenplan, einen Vergleich oder deine Bestleistungen. Die erste Zeile enthält die Spaltenüberschriften (th), die anderen Zeilen die Daten (td). Mach dir keine Sorgen, wenn die Tabelle keine Rahmen hat: Wie die Seite aussieht, ist die Aufgabe von CSS.

Das Formular. Zum Beispiel eine Frage an die Besucher oder eine Umfrage. Jedes Eingabefeld braucht eine Beschreibung in einem label, dessen Attribut for denselben Wert hat wie die id des Eingabefelds:

<label for="spitzname">Dein Spitzname</label>
<input type="text" name="spitzname" id="spitzname">

Um etwas mit den Daten aus einem Formular zu machen, bräuchtest du ein Programm auf einem Server, und unsere Seite hat keines. Mit den Daten passiert also noch nichts, und die Attribute action und method kannst du diesmal weglassen.

Tipp: Dein Code wird nicht gespeichert, wenn du diese Übung verlässt. Wenn alles geprüft ist, kopiere ihn (Strg+A und Strg+C, auf dem Mac Cmd+A und Cmd+C): In der nächsten Übung zeigen wir dir, wie du die Seite auf deinem Computer speicherst.