banner www.webdesign-tipp.de


Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap
<<< 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 >>>

Html-Tags - Verwendung von Listen im Webdesign
Listen können sehr gut zur Textstrukturierung der einzelnen Webseiten beitragen. Es gibt dabei verschiedene Varianten von Listen. Ein einfaches oder schlichtes Webdesign kann schon sehr gut durch den Einsatz verschiedener Listen erreicht werden.

Html-Quelltext Bedeutung und Darstellung in der Website
<ul ></ul > unsortierte Liste
<li ></li > Listenpunkt
<ul >
<li >erster Listenpunkt</li >
<li >zweiter Listenpunkt</li >
<li >dritter Listenpunkt</li >
</ul >		 Das ist eine Liste mit Bulletes (Schmuckpunkten)
  • erster Listenpunkt
  • zweiter Listenpunkt
  • dritter Listenpunkt
<ul >
<li >erster Listenpunkt
  <ul >
    <li >zweiter Listenpunkt</li >
    <li >dritter Listenpunkt</li >
  </ul >
</li >
<li >zweiter Listenpunkt erste Liste </li >
</ul >		 Das ist eine verschachtelte unsortierte Liste
Die Listenpunkte der ersten Liste erhalten einen Punkt am Anfang. Die Listenpunkte der zweien Liste (Unterliste) erhalten einen Kreis. Der Einzug erfolgt entsprechend.
  • erster Listenpunkt
    • zweiter Listenpunkt
    • dritter Listenpunkt
  • zweiter Listenpunkt erste Liste
Zur Übersichtlichkeit des Quelltextes kann dieser eingerückt werden - hat keinen Einfluß auf das Aussehen der Webseite
</li > Endtag des Listenpunktes - nicht zwingend aber manche Browser zeigen die Webseite ohne Endtag fehlerhaft an.
<li type="circle" >Ring</li >
  • das ist ein Ring vor dem Text, in einer Unterliste auch ohne circle ein Ring
<li type="square" >Quadrat</li >
  • das ist ein Quadrat vor dem Text
<li type="disk" >Punkt</li >
  • wenn Kreis gefüllt sein soll angeben (in Unterliste)
Das ist eine Liste, nicht eingerückt, mit Absatz
<ul >
<li > <p > Listenpunkt </p > </li >
<li >zweiter Punkt</li >
</ul >		 Das ist eine Liste, nicht eingerückt, mit Absatz

  • Listenpunkt mit Absatz

  • zweiter Punkt
<ol > </ol > sortierte Liste
Liste numerisch aufgelistet
<ol >
<li > Listenpunkt eins </li >
<li > Listenpunkt zwei </li >
</ol >		 Liste numerisch aufgelistet
  1. Listenpunkt eins
  2. Listenpunkt zwei
<ol >
<li type="I" >Das ist römisch untergliedert
 <ol >
 <li type="i" >untergliedert </li >
 </ol >
</li >
</ol >		 statt "i" kann auch z.B. "a" stehen
  1. Das ist römisch untergliedert
    1. untergliedert
<dl > </dl > Liste für Definitionen zur Verwendung als Register oder Inhaltsverzeichnis
<dt > </dt >
hier steht der zu definierende Begriff
<dd > </dd >
hier steht der Inhalt der Definition
Das ist eine Definitionsliste
<dl >
<dt >zu definierender Begriff </dt >
<dd >Inhalt der Definition </dd >
<dd >zweiter Absatz der Definition </dd >
<dt >zweiter zu definierender Begriff </dt >
<dd >Inhalt der zweiten Definition </dd >
</dl > 		Das ist eine Definitionsliste
zu definierender Begriff
Inhalt der Definition
zweiter Absatz der Definition
zweiter zu definierender Begriff
Inhalt der zweiten Definition
<dl compact>
<dt > </dt >
</dl >
Definitionsliste, in engerer Schrift dargestellt (kann auch im ul- oder ol-tag stehen), sollte aber nicht mehr verwendet werden. Stattdessen sollte css zur Anwendung kommen.
Sortierte, unsortierte und Definitionslisten können untereinander verschachtelt werden. Attribute wie type=" " oder compact sind veraltet und sollten besser durch css ersetzt werden.
Mehr Gestaltungsspielraum durch Grafische Aufzählungspunkte
<img src="img/punkt1.gif" > Der Fantasie sind durch den Einsatz von Grafiken auch bei der Gestaltung von Listenpunkten keine Grenzen gesetzt. Einfach in einem Bildbearbeitungsprogramm einen Punkt nach belieben, am besten passend zum gesamten Webdesign gestalten, abspeichern und in die Liste einbinden.
punkt1.gif muß bei dieser Darstellungsweise aber genau an der angegebenen Stelle auf dem PC liegen (relativ zum Dokument).
&#149; • Ascii-code für einen Pukt (Größe ändert sich mit Schriftgröße, kann auch Farbwert haben, ist aber kein Listenpunkt)
<<< 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 >>>
Start | Webdesign | Galerie | Web-Tipp | Html-Tags | CSS | Tutorial | Impressum | Sitemap