E-Book Startseite Karteikarten-Programm
0

Aufzählungslisten

Es gibt 3 verschiedene Varianten von HTML-Listen: Aufzählungsliste, Nummernliste und Definitionsliste. Wir beginnen mit der Aufzählungsliste. Für diese Liste brauchen wir ul-Tags und li-Tags. Der ul-Tag markiert die komplette Liste. Die li-Tags sind die einzelnen Aufzählungspunkte. Standardmäßig werden Aufzählungspunkte verwendet. Zusätzlich gibt es ein Attribut, mit der man auch anderes auswählen kann. Das Attribut lautet type und muss im ul-Tag eingebunden werden. Als Inhalt gibt es 3 verschiedene Werte: circle (nicht ausgefüllte Kreise), disc (ausgefüllte Kreise - Standardeinstellung) oder square (Rechtecke / Quadrate). Des Weiteren kann man Aufzählungslisten auch verschachteln. Hier nun 3 Beispiele:

<ul>
  <li>Dies ist ein Aufzählungs-Punkt</li>
  <li>Dies ist ein Aufzählungs-Punkt</li>
  <li>Dies ist ein Aufzählungs-Punkt</li>
</ul>
 
<ul>
  <li>Dies ist ein Aufzählungs-Punkt</li>
  <li>Dies ist ein Aufzählungs-Punkt
    <ul>
      <li>Dies ist ein Unter-Aufzählungspunkt</li>
      <li>Dies ist ein Unter-Aufzählungspunkt</li>
    </ul></li>
  <li>Dies ist ein Aufzählungs-Punkt</li>
</ul>
 
<ul type="square">
  <li>Dies ist ein Aufzählungs-Punkt</li>
  <li>Dies ist ein Aufzählungs-Punkt</li>
  <li>Dies ist ein Aufzählungs-Punkt</li>
</ul>
Anzeigebeispiel
Anzeigebeispiel



Nummernliste

Die 2. Listenart ist die Nummernliste. Die Nummernliste ist genauso aufgebaut wie die Aufzählungsliste. Der Unterschied dabei ist, dass die ul-Tags gegen ol-Tags ersetzt werden müssen. Zusätzlich gibt es bei dieser Art der Liste 2 Formatierungsmöglichkeiten in HTML. Mit dem type-Attribtu können Sie die Nummerierungsart festlegen. Als Wert des Attributs gibt es folgende Möglichkeiten: I (römische Zahlen |, ||, |||, |V, V, ...), i (römische kleine Zahlen i, ii, iii, iv, v, ...), A (lateinische Groß-Buchstaben A, B, C, D, E, ...) oder a (lateinische Klein-Buchstaben a, b, c, d, e, ...). Wenn Sie die normalen Zahlen haben möchten, dann müssen / dürfen Sie die Attribute nicht verwenden. Eine weitere Formatierungsmöglichkeit ist der Startwert der Liste. Mit dem Attribut start und dem Wert 4 würde die Nummerierung bei 4 beginnen.

<ol>
  <li>Dies ist der 1. Nummerierungspunkt-Punkt</li>
  <li>Dies ist der 2. Nummerierungspunkt-Punkt</li>
  <li>Dies ist der 3. Nummerierungspunkt-Punkt</li>
</ol>                                                     
 
<ol type="A">
  <li>Dies ist der Nummerierungspunkt-Punkt A</li>
  <li>Dies ist der Nummerierungspunkt-Punkt B</li>
  <li>Dies ist der Nummerierungspunkt-Punkt C</li>
</ol>
 
<ol start="4">
  <li>Dies ist der 4. Nummerierungspunkt-Punkt</li>
  <li>Dies ist der 5. Nummerierungspunkt-Punkt</li>
  <li>Dies ist der 6. Nummerierungspunkt-Punkt</li>
</ol>
Anzeigebeispiel
Anzeigebeispiel



Definitionslisten

Die 3. Listenart ist die Definitionsliste. Definitionslisten werden oft bzw. eigentlich für Glossare genutzt. Man kann damit z. B. Abkürzung und die dazugehörige ausgeschriebene Text-Version schön darstellen. Für die Definitionslisten benötigen Sie insgesamt 3 zusammenhängende Codes / Tags. Mit den Tags <dl> und </dl> markieren Sie die komplette Liste. Mit dem Tag <dt> und </dt> markieren Sie den "Ausdruck in der Definitionsliste". Mit dem Tag <dd> und </dd> markieren Sie die "Definition der Definitionsliste". Die einzigste Gestaltungsmöglichkeit (mit HTML) ist die "Kompakt-Ansicht". Diesen Vorgang führen Sie mit compact="compact" aus. Diesen Befehl versteht jedoch nicht jeder Browser.

<dl>
  <dt>S</dt>
  <dd>Stuttgart</dd>
  <dt>M</dt>
  <dd>München</dd>
  <dt>B</dt>
  <dd>Berlin</dd>
</dl>
 
<dl compact="compact">
  <dt>S</dt>
  <dd>Stuttgart</dd>
  <dt>M</dt>
  <dd>München</dd>
  <dt>B</dt>
  <dd>Berlin</dd>
</dl>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de