Definitionsliste über <dl>
, <dt>
und <dd>
Auflistungen von Definitionen treten meistens in Glossaren auf – sprich Begriffe und deren Erklärungen. Für Definitionslisten werden nun 3 verschiedene HTML-TAGs benötigt.
<dl>
Englisch für „definition list“ – Definitionsliste
<dt>
Englisch „definition term“ – Definitionsbegriff
<dd>
Englisch „definition description“ – Definitionsbeschreibung
Der HTML-Befehl, der die komplette Auflistung umschließt, ist der HTML-TAG <dl>
.
Beispielaufbau:
<dl>
<dt>Definitionsbegriff 1</dt>
<dd>Definitionsbeschreibung 1</dd>
<dt>Definitionsbegriff 2</dt>
<dd>Definitionsbeschreibung 2</dd>
</dl>
Design der Definitionsliste
Die Definitionsbeschreibung <dd>
wird standardmäßig ein wenig eingerückt angezeigt. Dies sieht oft nicht besonders schön aus. Aber zum jetzigen Zeitpunkt ist das nicht wichtig. Das Design der Definitionslisten können wir später über CSS nach Belieben gestalten. Die Weite der Einrückung oder die Tatsache, dass die Definitionsbeschreibung <dd>
links neben dem Definitionsbegriff <dt>
steht und der Definitionsbegriff z. B. orange und fett hervorgehoben ist, wird in CSS definiert. Alles, was Design ist, wird im modernen Erstellen von Websites von CSS übernommen.
Aufgabe Definitionsliste
Erstellen Sie nun ein kleines Glossar über die Begriffe „Hund“, „Katze“ und „Maus“. Die Erklärungen müssen weder biologisch korrekt noch sonderlich ausführlich sein. Wichtig ist primär, dass der erstellte HTML-Code valide ist.
Lösung Übung
Aufgabenlösung Definitionslisten
Kleines nicht sehr ernst gemeintes Glossar über die Begriffe „Hund“, „Katze“ und „Maus“ – Hauptsache der HTML-Aufbau ist richtig!
<dl>
<dt>Hund</dt>
<dd>macht wau und mag Katzen</dd>
<dt>Katze</dt>
<dd>macht miau und mag Maus</dd>
<dt>Maus</dt>
<dd>mag keine Katzen</dd>
</dl>
Und im Browser kommt es dann wie folgt heraus:
Hund
macht wau und mag Katzen
Katze
macht miau und mag Maus
Maus
mag keine Katzen
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details