HTML: Aufbau und Elemente

IT 11.7 – Webdesign · Einheit 2 · Café-Projekt Schritt 2

Lernziele

Du kannst Texte mit Überschriften, Absätzen, Hervorhebungen und Listen sinnvoll gliedern.
Du kannst Links mit absoluten und relativen Pfaden setzen.
Du kannst Bilder einbinden und passende Alternativtexte formulieren.
Du kannst eine Seite mit header, nav, main und footer gliedern und Block- und Inline-Elemente unterscheiden.

Rückblick

1. Wer ist beim Aufruf einer Webseite der Client, wer der Server?

Der Browser ist der Client, er fragt an. Der Webserver ist der Server, er liefert die Dateien.

2. Was gehört in den head, was in den body?

Im head stehen Angaben über die Seite (Zeichensatz, Titel). Im body steht alles, was man sieht.

3. Was ist an <p>Das ist <b>wichtig</p></b> falsch?

Die Verschachtelung. Was zuletzt geöffnet wurde, wird zuerst geschlossen: <p>Das ist <b>wichtig</b></p>.

Ein Text ohne Ordnung

Die Schülervertretung schickt dir den Text für die Startseite des Cafés, einfach als Fließtext:

Schülercafé Pause Willkommen bei uns! Wir sind ein Projekt der Schülervertretung. Öffnungszeiten Montag bis Donnerstag: 1. und 2. große Pause Freitag: nur 1. große Pause Unser Angebot Getränke, belegte Brötchen und Gebäck. Mehr auf unserer Speisekarte. Kontakt: Schülervertretung, Raum 012

Würdest du so auf einer Webseite lesen wollen? Wie erkennt ein Browser, eine Suchmaschine oder eine Vorlesehilfe, was davon eine Überschrift, eine Liste oder ein Link sein soll?

Erkunden: Elemente ausprobieren

Bevor du weiterliest: Bearbeite die Erkundung. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung: Was bewirkt welches Element? mittel

Im Spielplatz steht der Text des Cafés, schon mit einigen Elementen ausgezeichnet. Probiere aus und beobachte die Vorschau.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Ersetze <ul> und </ul> durch <ol> und </ol>. Beschreibe den Unterschied.

b) Mache aus einem <h2> ein <h3>, dann ein <h6>. Stelle eine Vermutung auf, wofür die Zahl steht.

c) Ersetze <strong> und </strong> durch <em> und </em>. Beschreibe den Unterschied.

d) Das Bild wird im Spielplatz nicht gefunden. Beschreibe, was stattdessen erscheint. Erläutere, wozu das Attribut alt dient.

Tipp 1

Zu d): Stell dir vor, jemand kann nicht sehen und lässt sich die Seite vorlesen. Was würde die Vorlesehilfe beim Bild sagen?

Lösung

Überschriften, Absätze, Hervorhebungen

Überschriften <h1> bis <h6> bilden die Gliederung der Seite, wie in einem Inhaltsverzeichnis. Jede Seite hat genau eine <h1>. Ebenen werden nicht übersprungen: Nach einer <h2> folgt eine <h2> oder <h3>, keine <h4>.
Ein Absatz steht in <p>. Einen Zeilenumbruch innerhalb eines Absatzes erzwingt <br>, zum Beispiel in einer Adresse.
Hervorhebungen: <strong> für besonders wichtigen Text, <em> für betonten Text.

Listen

Liste	Wofür?	Beispiel
`<ul>` (unordered list)	Reihenfolge egal	Zutaten, Angebote
`<ol>` (ordered list)	Reihenfolge wichtig	Arbeitsschritte, Platzierungen

Jeder Eintrag steht in einem <li> (list item). Listen lassen sich verschachteln: Ein <li> kann selbst wieder eine Liste enthalten.

Links

Ein Link verweist auf eine andere Seite oder Datei:

<a href="speisekarte.html">Zur Speisekarte</a>

Das Attribut href (hypertext reference) enthält das Ziel, der Inhalt des Elements ist der Linktext. Der Linktext soll verraten, wohin der Link führt. „Hier klicken“ ist deshalb ein schlechter Linktext.

Art	Beispiel	Bedeutung
absolut	`https://cafe.example/speisekarte.html`	vollständige Adresse, auch zu anderen Webseiten
relativ	`speisekarte.html`	Datei im selben Ordner wie die aktuelle Seite
relativ, Unterordner	`bilder/cafe.svg`	Datei im Unterordner `bilder`
relativ, eine Ebene höher	`../index.html`	Datei im Ordner über dem aktuellen
Sprung auf der Seite	`#oeffnungszeiten`	Stelle mit `id="oeffnungszeiten"` auf derselben Seite

Für die eigenen Seiten nimmt man relative Pfade. Dann funktionieren die Links auf deinem Rechner und später auf dem Webserver gleichermaßen.

Bilder

<img src="bilder/cafe.svg" alt="Eine dampfende Tasse Kakao neben einer Brezel" width="400" height="260">

src (source) gibt an, wo das Bild liegt, wie bei Links absolut oder relativ.
alt ist der Alternativtext. Er beschreibt, was auf dem Bild wichtig ist, in einem kurzen Satz. Ist ein Bild reine Verzierung, schreibt man alt="". Dann wird es beim Vorlesen übersprungen.
width und height geben die Größe in Pixeln an. Der Browser kann dann schon Platz freihalten, bevor das Bild geladen ist.
<img> hat kein Endtag.

Bilder fremder Seiten darf man nicht einfach übernehmen. Sie sind meist urheberrechtlich geschützt. Nimm eigene Bilder oder Bilder mit freier Lizenz und gib die Quelle an.

Die Seite gliedern

Damit Browser, Suchmaschinen und Vorlesehilfen den Aufbau einer Seite erkennen, gibt es Gliederungselemente. Sie sehen ohne CSS nicht anders aus als normaler Text, sagen aber, welche Rolle ein Bereich hat:

Element	Rolle
`<header>`	Kopfbereich, zum Beispiel mit Name und Logo
`<nav>`	Navigation: die Links zu den anderen Seiten
`<main>`	der Hauptinhalt; nur einmal pro Seite
`<section>`	ein Abschnitt mit eigener Überschrift
`<article>`	ein in sich geschlossener Beitrag, zum Beispiel eine Neuigkeit
`<footer>`	Fußbereich, zum Beispiel mit Kontakt und Impressum

Für Bereiche ohne besondere Bedeutung gibt es <div> (ein Block) und <span> (ein Stück Text). Beide braucht man später, um etwas mit CSS zu gestalten.

Block und Inline: Manche Elemente beginnen immer in einer neuen Zeile und nehmen die ganze Breite ein (Block-Elemente: h1, p, ul, div, section). Andere stehen im Textfluss (Inline-Elemente: a, strong, em, span, img).

Café-Projekt: Schritt 2

Café-Projekt, Schritt 2: Die Startseite mittel

Baue die Startseite des Cafés in deiner Datei index.html aus.

Lege im Ordner schuelercafe einen Unterordner bilder an. Lade das Bild des Cafés herunter und speichere es dort als cafe.svg. (Es ist selbst gezeichnet und darf frei verwendet werden.)
Gliedere den body in header, nav, main und footer.
header: die Überschrift Schülercafé „Pause“.
nav: eine Liste mit drei Links: Startseite (index.html), Speisekarte (speisekarte.html), Bestellen (bestellen.html). Die beiden letzten Seiten baust du in Einheit 3.
main: drei section mit eigener h2: „Über uns“ (ein Absatz), „Öffnungszeiten“ (Liste), „Unser Angebot“ (Absatz mit dem Bild und einem sinnvollen Alternativtext).
footer: „Ein Projekt der Schülervertretung · Raum 012“.

Prüfe am Ende: genau eine h1, keine übersprungene Überschriftenebene, alle Endtags vorhanden, sauber eingerückt.

Tipp 1

Die Navigation ist eine Liste von Links: <ul>, darin <li>, darin <a>.

Stand nach Schritt 2

Aufgaben

Aufgabe 1: Ein Rezept auszeichnen leicht

Zeichne das Rezept im Spielplatz mit passenden Elementen aus. Lass dann prüfen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 2: Code lesen mittel

Skizziere, wie der Browser diesen Ausschnitt darstellt. Kennzeichne in deiner Skizze Überschriften, Listen und Links.

<h1>Projektwoche</h1>
<p>Anmeldung bis <strong>Freitag</strong> im <a href="sekretariat.html">Sekretariat</a>.</p>
<h2>Angebote</h2>
<ol>
  <li>Robotik
    <ul>
      <li>Raum 104</li>
      <li>max. 12 Plätze</li>
    </ul>
  </li>
  <li>Theater</li>
</ol>

Tipp 1

Die innere Liste steckt im ersten Eintrag der äußeren Liste. Wie wird sie eingerückt, und welche Art von Markierung hat sie?

Lösung

Aufgabe 3: Gute Alternativtexte mittel

Beurteile die Alternativtexte und schlage, wo nötig, bessere vor.

Auf der Seite eines Sportvereins: Foto der Mannschaft nach dem Pokalsieg, alt="Bild".
Auf der Seite einer Bäckerei: kleines Schmuckornament zwischen zwei Absätzen, alt="Ornament grafik verschnörkelt braun".
In einem Online-Shop: Foto eines roten Rucksacks, alt="Roter Rucksack mit zwei Seitentaschen, Vorderansicht".
Ein Bild, das als Link zur Startseite dient (Logo), alt="logo.png".

Tipp 1

Frag dich: Was müsste jemand wissen, der das Bild nicht sieht? Und: Was soll passieren, wenn das Bild nur Verzierung ist?

Lösung

Aufgabe 4: Relative Pfade mittel

Ein Sportverein hat diese Ordner:

verein/
├── index.html
├── kontakt.html
├── bilder/
│   └── halle.jpg
└── mannschaften/
    ├── jugend.html
    └── senioren.html

Gib jeweils den relativen Pfad an:

a) von index.html zu kontakt.html

b) von index.html zum Bild halle.jpg

c) von jugend.html zu senioren.html

d) von jugend.html zurück zu index.html

e) von jugend.html zum Bild halle.jpg

Tipp 1

Geh von dem Ordner aus, in dem die Datei mit dem Link liegt. .. heißt: eine Ebene nach oben.

Lösung

Aufgabe 5: Eine Seite gliedern schwer

Eine Jugendherberge hat eine Startseite mit: Name und Logo, Links zu „Zimmer“, „Preise“, „Anfahrt“, einem Begrüßungstext, drei Neuigkeiten (je mit Überschrift, Datum und Text), einem Abschnitt „Ausstattung“ mit einer Liste und ganz unten Adresse und Impressum.

Entwirf das HTML-Gerüst dieser Seite mit passenden Gliederungselementen und Überschriften. Inhalte darfst du durch … abkürzen. Begründe die Wahl von article für die Neuigkeiten.

Tipp 1

Zuerst die großen Bereiche: Kopf, Navigation, Hauptinhalt, Fuß. Dann den Hauptinhalt in Abschnitte teilen.

Tipp 2

Welche Überschrift bekommt der Abschnitt mit den Neuigkeiten, welche jede einzelne Neuigkeit?

Lösung (Beispiel)

Zusatzaufgabe: Sprungmarken und Bildunterschriften schwer Zusatz

a) Ergänze deine Café-Startseite um ein kleines Inhaltsverzeichnis am Anfang von main, dessen Links auf die drei Abschnitte springen.

b) Recherchiere die Elemente <figure> und <figcaption> und setze sie für das Café-Bild ein.

Lösung (Beispiel)

Zusammenfassung

Überschriften h1 bis h6 gliedern die Seite: genau eine h1, keine Ebene überspringen. Absätze in p, Hervorhebungen mit strong und em.
Listen: ul (Reihenfolge egal) oder ol (Reihenfolge wichtig), Einträge in li.
Links <a href="…"> mit aussagekräftigem Linktext. Für eigene Seiten relative Pfade, immer mit /.
Bilder <img src="…" alt="…">: Der Alternativtext beschreibt, was wichtig ist. Verzierungen bekommen alt="".
Gliederung: header, nav, main, section, article, footer. Ohne besondere Bedeutung: div und span.
Block-Elemente beginnen in einer neuen Zeile, Inline-Elemente stehen im Textfluss.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Texte mit Überschriften, Absätzen, Hervorhebungen und Listen gliedern? → Erkundung, Überschriften, Listen, Aufgabe 1, Aufgabe 2
Kannst du Links mit absoluten und relativen Pfaden setzen? → Links, Aufgabe 4
Kannst du Bilder einbinden und gute Alternativtexte formulieren? → Bilder, Aufgabe 3
Kannst du eine Seite gliedern und Block- und Inline-Elemente unterscheiden? → Die Seite gliedern, Café-Projekt, Aufgabe 5

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Überschrift (h1–h6)	Titel eines Abschnitts; die Zahl gibt die Ebene an
Absatz (p)	zusammenhängender Textblock
strong / em	besonders wichtiger / betonter Text
ul / ol / li	ungeordnete Liste / geordnete Liste / Listeneintrag
Link (a, href)	Verweis auf eine andere Seite oder Datei; `href` ist das Ziel
absoluter Pfad	vollständige Adresse mit Protokoll und Name des Servers
relativer Pfad	Weg vom aktuellen Ordner aus, zum Beispiel `bilder/cafe.svg`
Alternativtext (alt)	kurzer Text, der ein Bild ersetzt, wenn man es nicht sieht
header, nav, main, footer	Kopf, Navigation, Hauptinhalt, Fuß einer Seite
section / article	Abschnitt mit Überschrift / in sich geschlossener Beitrag
div / span	Block / Textstück ohne besondere Bedeutung
Block- / Inline-Element	beginnt in neuer Zeile / steht im Textfluss

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign (Stand November 2022).
HTML nach dem HTML Living Standard (WHATWG). Hinweise zu Alternativtexten nach den Web Content Accessibility Guidelines (WCAG 2.2) des W3C.
Texte, Beispiele, Aufgaben, Code-Beispiele und das Café-Bild sind selbst erstellt.