Wikibooks

Websiteentwicklung: XHTML: Aufzählungen

In XHTML gibt es auch die Möglichkeit, Aufzählungen aller Art zu erzeugen. Dazu stehen drei verschiedene Arten von Aufzählungstypen zur Verfügung. Einmal gibt es die sogenannte 'ungeordnete Liste' (englisch: 'unordered list'). Damit wird eine Aufzählung bezeichnet, bei der die Reihenfolge, in der die Aufzählungspunkte angegeben sind, inhaltlich keine Rolle spielt. Beispielsweise kann mit diesen Typ eine Zutatenliste erzeugt werden.

Dann gibt es eine 'geordnete Liste' (englisch: 'ordered list'). Wie der Name schon sagt, ist die Reihenfolge, in der die Aufzählungspunkte angegeben sind, inhaltlich relevant. Um im Bild zu bleiben, könnte die Kochanleitung für ein Gericht mit einer solchen Liste ausgezeichnet werden.

Der dritte Typ der Aufzählungen ist eine sogenannte 'Definitionsliste' (englisch: 'definition list'). Eine Definitionsliste wird verwendet, wenn eine Zuordnung zwischen einem Wort oder einem Satz und einer Beschreibung umgesetzt werden soll. Hier speziell könnten mit einer Definitionsliste Kochbegriffe wie 'ablöschen' oder 'dünsten' erklärt werden.

Die drei Listentypen können miteinander kombiniert/verschachtelt werden.

XHTML stellt also nur sehr grundlegende Strukturen für Listen bereit und geht nicht näher auf die inhaltliche Bedeutung von Listen ein, die stark unterschiedlich sein können, was konventionell über die Darstellung oder durch Überschriften geregelt wird. Eine weitere Differenzierung, um was für eine Art von Liste es sich inhaltlich handelt, kann der Autor also mit XHTML allein nicht vornehmen. Bei Verwendung von XHTML+RDFa kann er aber natürlich Metainformation darüber liefern, welche inhaltliche Funktion die jeweilige Liste speziell hat, indem auf eine entsprechende Definition verwiesen wird.

Ungeordnete Liste ul

Bearbeiten

Eine ungeordnete Liste wird mit dem Element ul erstellt. ul kann notiert werden, wo Blockelemente notiert werden dürfen. Dieses Element darf nur die Elemente li enthalten, (wobei li für englisch 'list item' steht). Innerhalb vom li kann laufender Inhalt stehen. Im Sinne einer guten Struktur sollten aber entweder nur Blockelemente oder Text mit Phrasenelementen verwendet werden. Eine Mischung ist inhaltlich schlecht. ul muß mindestens ein Element li enthalten.

In den älteren Sprachversionen hat ul auch noch Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.

Beispiel: 

<ul>
    <li>1l Milch</li>
    <li>300g Butter</li>
    <li>2 Esslöffel Zucker</li>
</ul>

Dies wird zum Beispiel wie folgt dargestellt:

  • 1l Milch
  • 300g Butter
  • 2 Esslöffel Zucker

Soll ein Punkt weiter untergliedert werden, so wird verschachtelt. Das heißt, es muß in dem Listenpunkt li, der untergliedert wird, wieder das Element ul mit li darin verwendet werden. Im folgenden Beispiel wird die Milch weiter untergliedert. Weil ul ein Blockelement ist, wird im Sinne einer guten Struktur auch die Milch als Oberbegriff in ein Blockelement gesteckt. Allerdings soll die Milch nicht gegenüber den weiteren Listenpunkten gleicher Stufe hervorgehoben werden, weswegen das generische Blockelement div verwendet wird. 

<ul>
    <li>
       <div>1l Milch</div>
       <ul>
        <li>0,5l Kuhmilch</li>
        <li>0,5l Ziegenmilch</li>
       </ul>
    </li>
    <li>300g Butter</li>
    <li>2 Esslöffel Zucker</li>
</ul>

Dies wird zum Beispiel wie folgt dargestellt:

  • 1l Milch
    • 0,5l Kuhmilch
    • 0,5l Ziegenmilch
  • 300g Butter
  • 2 Esslöffel Zucker

Geordnete Liste ol

Bearbeiten

Geordnete Listen sind numerierte Listen und werden in XHTML mit dem Element ol ausgezeichnet. ol kann notiert werden, wo Blockelemente notiert werden dürfen. Wie ul benutzt dieser Listentyp auch das li-Element für seine Aufzählungspunkte. ol muß mindestens ein Element li enthalten.

In den älteren Sprachversionen hat ol auch noch Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.

Beispiel: 

<ol>
    <li>Milch in einer Schüssel schlagen</li>
    <li>Butter mit der Milch zusammenmischen</li>
    <li>Zucker hinzugeben</li>
</ol>

Diese fiktive Kochanleitung wird zum Beispiel wie folgt dargestellt:

  1. Milch in einer Schüssel schlagen
  2. Butter mit der Milch zusammenmischen
  3. Zucker hinzugeben

Definitionsliste dl

Bearbeiten

Für die Definitionsliste gibt es in XHTML besondere Elemente, die Elemente der geordneten und ungeordneten Listen können nicht verwendet werden. Eine Definitionsliste wird mit dem Element dl ausgezeichnet. dl kann notiert werden, wo Blockelemente notiert werden dürfen. Dieses Element kann nur die beiden Elemente dt (von 'definition term') und dd (von 'definition description') enthalten. Mit dem dt-Element zeichnet man den Begriff aus, den man mit dem dd-Element beschreiben möchte. Der Inhalt von dt ist Text, gegebenenfalls mit Phrasenelementen. Der Inhalt von dd ist laufender Inhalt, im Sinne einer guten Struktur entscheidet man sich allerdings, ob man nur Blockelemente verwendet oder nur Text und Phrasenelemente.

dl muß mindestens ein Element dt oder dd enthalten. In der Regel ist es sinnvoll, dass mindestens von beidem eines vorhanden ist. Zudem wird im Regelfalle ein dt vor dem zugehörigen dd notiert. Es können auch jeweils mehrere dt oder dd aufeinander folgen, wenn mehrere Begriffe mit der gleichen Definition versehen werden sollen oder es umgekehrt mehrere alternative Erklärungen für einen Begriff gibt.

Ob die Reihenfolge der Listenpunkte eine Rolle spielt, einmal abgesehen davon, dass zumeist auf dt dd folgt und dann die nächste Gruppe dt und dd, ist nicht weiter festgelegt und kann von Einzelfall zu Einzelfall verschieden sein.

Beispiel: 

<dl>
    <dt>ablöschen</dt>
    <dd>Hier wird ...</dd>
    <dt>dünsten</dt>
    <dd>Hierbei wird ...</dd>
</dl>

Diese wird zum Beispiel wie folgt dargestellt:

ablöschen
Hier wird ...
dünsten
Hierbei wird ...

In den älteren Sprachversionen hat dl auch noch Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.

Aufgabe 8

Bearbeiten
  1. Erstellen Sie eine neue Seite. Nennen Sie sie "aufgabe_8".
  2. Erstellen Sie das Grundgerüst der Seite.
  3. Die Seite soll den Titel "Aufzählungen" bekommen.
  4. Fügen Sie in der ersten Überschriftsebene "Wikipedia" ein.
  5. Fügen Sie in der zweiten Überschriftsebene "Wikipedia wurden folgende Preise und Auszeichnungen verliehen" ein.
  6. Erstellen Sie nun eine ungeordnete Liste folgender Art: Für vier Jahreszahlen sollen Informationen eingefügt werden. Die Jahreszahlen 2004, 2005, 2006 und 2008 sollen in der dritten Überschriftsebene dargestellt werden.
    1. Das Jahr 2004 soll zwei Punkte bekommen. Im ersten Punkt soll folgendes stehen: "Goldene Nica in der Kategorie „Digital Communities“ des Prix Ars Electronica". Im zweiten Punkt: "Webby Award in der Kategorie „Community“".
    2. Das Jahr 2005 soll einen Punkt bekommen und mit der Information "Grimme Online Award" gefüllt werden.
    3. Das Jahr 2006 enthält zwei Punkte: "LeadAward als „Webleader des Jahres“" sowie "OnlineStar in der Kategorie „News“".
    4. Das letzte Jahr enthält einen Punkt mit der Information: "Quadriga-Preis des Berliner Vereins Werkstatt Deutschland für „Eine Mission der Aufklärung“"
  7. Fügen Sie in der zweiten Überschriftsebene "Grundsätze" ein.
  8. Erzeugen Sie einen Absatz, dann fügen Sie "Vier Grundsätze sind den Angaben des Projekts zufolge unumstößlich und können auch nach Diskussionen nicht geändert werden:" ein.
  9. Erstellen Sie eine geordnete Liste, die vier Datensätze bekommen soll.
    1. "Wikipedia ist eine Enzyklopädie."
    2. "Beiträge sind so zu verfassen, dass sie dem Grundsatz des neutralen Standpunkts entsprechen."
    3. "Geltendes Recht – insbesondere das Urheberrecht – ist strikt zu beachten."
    4. "Andere Benutzer sind zu respektieren und die Wikiquette einzuhalten."
  10. Fügen Sie in der zweiten Überschriftsebene "Grundbegriffe" ein.
  11. Erstellen Sie eine Definitionsliste, die folgende drei Begriffe erklären soll: Enzyklopädie, Nachschlagewerk, Fachlexikon.
    1. Fügen Sie unter Enzyklopädie folgendes ein: "Eine Enzyklopädie ist eine bestimmte Art von Nachschlagewerk.". Erzeugen Sie einen Zeilenumbruch. Fügen Sie anschließend "Der Begriff „Enzyklopädie“ soll auf Ausführlichkeit oder eine große Themenbreite hinweisen, wie beispielsweise bei einem Menschen, dem enzyklopädisches Wissen nachgesagt wird." ein und erzeugen Sie wieder einen Zeilenumbruch, bevor Sie zum Schluss folgendes eingeben: "Andererseits verweist die Bezeichnung darauf, dass nicht das gesamte Wissen, sondern nur eine Zusammenfassung dargestellt wird."
    2. Fügen Sie unter Nachschlagewerk folgendes ein: "Ein Nachschlagewerk ist ein Buch oder ähnliches Werk, das schnellen Zugang zu Wissen liefert."
    3. Fügen sie unter Fachlexikon folgendes ein: "Ein Fachlexikon ist ein meist alphabetisch geordnetes Nachschlagewerk, in dem das Wissen eines begrenzten Fachgebiets beschrieben wird und zwar im Gegensatz zu Enzyklopädien normalerweise ohne den Anspruch erschöpfender Darstellung."

Lösung

Abgerufen von „https://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_XHTML:_Aufzählungen&oldid=789484“