Text, Listen, Bilder

Attribute: Zusatzinfos im Tag

Bisher kamen deine Tags ohne Zusatzangaben aus: <h1>, <p>. Manchmal braucht ein Tag aber mehr Information — wohin ein Link führt zum Beispiel, oder woher ein Bild kommt. Dafür gibt es Attribute:

<p title="Wird beim Draufzeigen angezeigt">Fahr mit der Maus über mich</p>

Ein Attribut steht im öffnenden Tag, nach einem Leerzeichen, als name="wert" — der Wert immer in Anführungszeichen. Ein Tag kann mehrere Attribute haben, dann stehen sie einfach nacheinander.

Ein Attribut ausprobieren

Listen

Für Aufzählungen gibt es zwei Umgebungen — je nachdem, ob die Reihenfolge etwas bedeutet:

<ul>
  <li>Milch</li>
  <li>Eier</li>
  <li>Mehl</li>
</ul>

<ol>
  <li>Wasser aufsetzen</li>
  <li>Nudeln hineingeben</li>
  <li>Zehn Minuten kochen</li>
</ol>

<ul> (unordered list) zeichnet den Browser mit Punkten aus — die Reihenfolge ist egal, wie bei einer Einkaufsliste. <ol> (ordered list) nummeriert automatisch — nimm es, wenn die Reihenfolge zählt, wie bei einer Anleitung. In beiden steckt jeder Eintrag in einem eigenen <li> (list item).

Beide Listenarten

<h2>Einkaufsliste</h2>
<ul>
<li>Milch</li>
<li>Eier</li>
<li>Mehl</li>
</ul>

<h2>Und so geht's</h2>
<ol>
<li>Wasser aufsetzen</li>
<li>Nudeln hineingeben</li>
<li>Zehn Minuten kochen</li>
</ol>

Erst überlegen

Du zeigst die Platzierung eines Wettbewerbs: 1. Platz, 2. Platz, 3. Platz. ul oder ol?

Links

Ein Link braucht das Attribut href (hypertext reference) — es sagt, wohin der Klick führt:

<a href="https://de.wikipedia.org">Zu Wikipedia</a>

Zwischen <a href="..."> und </a> steht der klickbare Text. Ohne href ist <a> nur ein Tag ohne Wirkung — kein Link, nirgendwohin.

Ein Link

<p>Schau dir <a href="https://de.wikipedia.org">Wikipedia</a> an.</p>

Bilder

Ein Bild bindest du mit <img> ein — zwei Attribute gehören immer dazu:

<img src="https://placehold.co/300x180" alt="Ein Platzhalterbild, 300 mal 180 Pixel">

src (source) sagt, woher das Bild kommt — eine Adresse, genau wie bei href. alt (alternative text) ist der Text, der erscheint, wenn das Bild nicht lädt — und der, den Sehbehinderte über eine VorleseSoftware hören. Kein Bild ohne sinnvolles alt.

Ein Bild einbinden

<h2>Mein Bild</h2>
<img src="https://placehold.co/300x180" alt="Ein Platzhalterbild, 300 mal 180 Pixel">
<p>Text unter dem Bild.</p>

Erst überlegen

Warum braucht ein Bild ein alt, obwohl man es doch sowieso sieht?

Deine Seite wächst weiter

Deine Seite: Liste, Link und Bild

Erweitere die Seite, die du in Kapitel 1 begonnen hast — passend zu deiner gewählten Projektart:

Steckbrief: eine Liste deiner Interessen, ein Bild von dir oder einem Hobby, ein Link zu einer Seite, die dazu passt.
Verein oder Band: eine Liste kommender Termine, ein Bild, ein Link zur Homepage eines Vorbilds.
Rezepte: die Zutaten als ul, die Schritte als ol, ein Bild vom fertigen Gericht.
Shop: eine Liste der Produkte, ein Bild, ein Link zu einem echten Shop, an dem du dich orientierst.
Beauty & Style: eine Liste an Produkten oder Tipps, ein Vorher-Nachher-Bild, ein Link zu einer Inspirationsseite.

Nimm für Bilder ruhig https://placehold.co/ — echte eigene Bilder kommen später, wenn deine Seite in VS Code umzieht.

Liste, Link und Bild

Was noch fehlt

Deine Seite hat jetzt alle wichtigen Inhalte — aber sie sieht noch genauso aus wie jede andere unformatierte HTML-Seite: schwarze Schrift, blaue Links, keine Farben, keine eigene Schriftart. Das ändert sich mit dem nächsten Kapitel: CSS, die Sprache fürs Aussehen.

Sitzt das?

1 / 4

Wo steht ein Attribut?