HTML ja CSS algajatele (Osa 06): Nimekirjad

HTML-s on erinevaid loenditüüpe. Esimene on punktloend. Selles loenditüübis on loendi üksikud sissekanded varustatud punktidega, nn täpid.

<p>Foorumi praegused teemad</p>
<ul>
  <li>CSS ei tööta edasi</li>
  <li>Showroom Hollywoodi 40ndate stiilis</li>
  <li>Kokkuklapitav loend CSS</li>
  <li>PHP ühenda/lahuta</li>
  <li>Minu väike Showroom - algajad soovivad näpunäiteid!</li>
</ul>

Siin on tulemus brauseris:

HTML ja CSS algajatele (Osa 06): Loendid

Iga sissekande ees lisatakse punkt. Kuidas see vaikimisi välja näeb, sõltub brauseritest. Kuigi on olemas atribuudid, mis võimaldavad loendite kuvamist mõjutada, ei ole neid soovitatav enam kasutada. Selle asemel kasutatakse CSS-i omadusi.

Punktloendeid saab tegelikult ka sisestada. Esiteks vaadake järgmist pilti:

Süntaks on järgmine:

<ul>
  <li>Õpetused
    <ul>
      <li>2D</li>
      <li>3D</li>
      <li>Veeb</li>
    </ul>
  </li>
  <li>Videotreeningud
    <ul>
      <li>3D</li>
      <li>Meedia kujundamine</li>
      <li>Veeb</li>
    </ul>
  </li>
  <li>Nõuanded</li>
  <li>Poodid</li>
</ul>

Ühes sissekandes võib olla ka teine loend. See ei pea tingimata olema punktloend. Tegelikult saab lisada ka muid loenditüüpe, mida selles õpetuses veel tutvustatakse.

Loendisüsteemide hulka kuuluvad ka nummerloendid. Ka siin on esmalt pilt, mis näitab, millest nummerloendid koosnevad.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>XML</li>
</ol>

Samuti nagu punktloendite puhul, tähistatakse ka siin üksikud sissekanded li elemendiga.

<ol>
  <li>Õpetused
    <ol>
      <li>2D</li>
      <li>3D</li>
      <li>Veeb</li>
    </ol>
  </li>
  <li>Videotreeringud
    <ol>
      <li>3D</li>
      <li>Meedia kujundamine</li>
      <li>Veeb</li>
    </ol>
  </li>
  <li>Nõuanded</li>
  <li>Poodid</li>
</ol>

Brauseri tulemus on siiski pettumust valmistav.

pärast selline nummerdamine:

HTML ja CSS algajatele (Osa 06): Loendid

1. Õpetused 2D

1.1 3D

1.2 Veeb

Videotreeringud 3D

2.1 Meedia kujundamine

2.2 Veeb
Nõuanded
Poodid

Midagi sellist puhta HTML-iga pole võimalik saavutada. Tegelikult tuleks siin kasutada CSS-i, et sisu automaatselt vastava skeemi järel nummerdada.

Definitsiooniloendid

Veel üks loendivarjant on nn definitsiooniloendid. Sellele võib näidata, kuidas selline loend lõpuks brauseris välja näeb.

<dl>
   <dt>AM</dt>
      <dd>AM - õhupost</dd>
      <dd>AM - õhuväeülem</dd>
      <dd>AM - Amberg</dd>
      <dd>AM - Americium</dd>
      <dd>AM - Amstetten</dd>
   <dt>AN</dt>
      <dd>AN - eespool nimetatud</dd>
      <dd>AN - ligipääsupunkt</dd>
      <dd>AN - Ancona</dd>
</dl>

Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.

Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.

Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.

In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">Uus...</button>
   <button type="button" onclick="fopen()">Ava...</button>
   <button type="button" onclick="fsave()">Salvesta</button>
   <button type="button" onclick="fsaveas()">Salvesta kui...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Kopeeri</button>
   <button type="button" onclick="ecut()">Lõika</button>
   <button type="button" onclick="epaste()">Kleebi</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Abi</a></li>
   <li><a href="about.html">Info</a></li>
  </menu>
 </li>
</menu>

Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.

HTML ja CSS algajatele (Osa 06): Loendid

Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.

Listen gestalten

Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.

HTML & CSS algajatele (Osa 06): Nimekirjad

Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.

<ol type="A">

Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.

HTML ja CSS algajatele (Osa 05): Tekstide kujundamine

HTML ja CSS algajatele (Osa 07): Tabelid (01)