Definitionsliste

Die Definitionsliste (dl) benötigt drei HTML-Elemente. Sie dient zum Auflisten von Eigenschafts-/Wertepaaren oder Begriffs-/Wertepaaren, also zu Definitionen.

<dl>


<dt>Zur definierender Term (definition term)</dt>


<dd>Seine Definition</dd>


</dl>

Beispiel

Zur definierender Term (definition term, dt)

Seine Definition

Farbe

rot

Material

Plastik

Form

Ellipsoid

Oberfläche

rau

Gewicht

1 kg

Kinofilm

Der Film ist eine Kunstform, die ihren Ausdruck in der Produktion bewegter Bilder mittels Foto-, Kamera- und allenfalls mittels Tontechnik, siehe Stummfilm findet. In der Regel werden die Bilder mit einem Filmprojektor im Dunkeln auf eine Bildwand projiziert oder auf einem Bildschirm erzeugt. Heutzutage handelt es sich bei den Filmen des Kinos und des Fernsehens meist um farbige Bilder, die vertont und musikalisch untermalt sind. Der Film ist unter anderem Gegenstand der Filmwissenschaft und der Filmtheorie. Die technische, kulturelle und künstlerische Entwicklung dieses optischen Mediums von seinen Anfängen Ende des 19. Jahrhunderts bis zur Gegenwart ist unter Filmgeschichte ausführlich dargestellt. (http://de.wikipedia.org/wiki/Film)

 

Nummerierte Liste (ordered list <ol>)

Das ol-Listenelement wird für nummerierte Aufzählungen verwendet. Das start-Attribut setzt den Startpunkt des Zählers. Per Default beginnt der Zähler bei eins.

Beispiel: Die Plätze 1 - 3

1. Müller
2. Meier
3. Mahlstein

Beispiel: Die Plätze 9 - 11

9. Schmidt
10. Schmider
11. Schmalhans

Ungeordnete Liste (unordered list <ul>)

Das ul-Listenelement wird für Spiegelstrich-Aufzählungen verwendet. Der Wert der CSS-Eigenschaft list-style-type bestimmt das Aufzählungzeichen.

Die Teilnehmenden (Aufzählungspunkte)

• Müller
• Meier
• Mahlstein

Die Warteliste 1 (Aufzählungsquadrate)

• Schmidt
• Schmider
• Schmalhans

Die Warteliste 2 (grafische Aufzählungszeichen)

• Franzen
• Fritz
• Fromann

Geschachtelte Listen

Beispiel Menüs

• Datei
  • Öffnen
  • Speichern
  • Speichern unter...
  • Schließen
• Bearbeiten
  • Rückgängig
  • Ausschneiden
  • Kopieren
  • Einfügen
• Ansicht
  • Groß
  • Klein
  • Zoom...

Textblöcke

Einrückungen

Die Hintergrundfarbe zeigt das Verhalten des Elements oder der Stileigenschaft.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Zeilenlänge

• Schriftgröße x 30 ist ein Richtwert für die Zeilenlänge.

Möglich

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Besser (1)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Zeilenabstand

• Die Zeilenhöhe soll größer als Wortabstand sein!
• Mindestens 1,4em line-leight
• Weiße Schrift auf dunklem Grund benötigt größeren Zeilenabstand

Möglich

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Besser (1) + (2)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 

Ausrichtung

• Gleichmäßger Zeilenabstand, der mit den Absatzende-Abständen korrospondiert (Gilt bei Mehrspaltigkeit).

Schriftgröße

• Möglichst traditionelle Schriftgrößenabstufungen benutzen. (Gilt nicht für Smartphones.)

Betonungen

• Wenig Betonungen, bzw. klares Betonungskonzept