HTML:ssä on erilaisia listatyyppejä. Ensisijaisesti ovat luettelolistat. Tässä listatyyppissä yksittäiset listamerkinnät varustetaan luettelomerkillä, kutsutaan luotoluetteloksi.
Luettelolistat aloitetaan ul-elementillä. Yksittäiset listamerkinnät merkitään li-elementillä.
<p>Aktuellit aiheet foorumista</p> <ul> <li>CSS ei jatka suorittamista</li> <li>Showroom Hollywood-tyyli 40-luvulta</li> <li>Näyttöluettelo CSS</li> <li>PHP yhteys/katkaisu</li> <li>Pieni showroom - Aloittelija pyytää vinkkejä!</li> </ul>
Tässä on katsaus lopputulokseen selaimessa:
Ennen jokaista viestiä lisätään luettelomerkintä. Miltä se oletusarvoisesti näyttää, selaimet päättävät. Vaikka on olemassa attribuutteja, jotka voivat vaikuttaa luettelon ulkoasuun, niitä ei enää tulisi käyttää. Sen sijaan CSS-ominaisuudet tulevat peliin.
Luettelolistat voidaan myös upottaa toisiinsa. Katso ensin seuraavaa kuvaa:
Tästä käy selväksi, miksi tällainen upotus on hyödyllistä.
Syntax on seuraavanlainen:
<ul>
<li>Ohjeistot
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Video-oppaat
<ul>
<li>3D</li>
<li>Mediatuotanto</li>
<li>Web</li>
</ul>
</li>
<li>Vinkit</li>
<li>Kaupat</li>
</ul>
Yhden listamerkinnän sisällä voi olla toinen lista. Tämä lista ei välttämättä ole luettelolista. Itse asiassa myös muita listatyyppejä – joita tässä opetusohjelmassa esitellään – voi lisätä.
Muuten HTML5:ssä sulkevaa </li> ei välttämättä tarvita. Paremman luettavuuden vuoksi suosittelen kuitenkin aina sulkemaan sen. Syntaktisesti oikein voisi kuitenkin olla jotain tällaista:
<p>Aktuellit aiheet foorumista</p> <ul> <li>CSS ei jatka suorittamista <li>Showroom Hollywood-tyyli 40-luvulta <li>Näyttöluettelo CSS <li>PHP yhteys/katkaisu <li>Pieni showroom - Aloittelija pyytää vinkkejä! </ul>
Numeroituja listoja
Aufzählungslisten lisäksi voi määritellä numeroituja listoja. Tässäkin aluksi kuva siitä, mitä lopulta on numeroitujen listojen kanssa.
Listamerkintöjen edessä on siis peräkkäisiä numeroita. Numeroituja listoja aloitetaan ol-elementillä.
Seuraava esimerkki näyttää, miten tätä elementtiä käytetään.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Samoin kuin luetteloluetteloissa, yksittäiset merkinnät on merkitty li-elementillä.
Teoriassa myös luetteloluetteloita voi upottaa.
<ol>
<li>Ohjeistot
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Video-oppaat
<ol>
<li>3D</li>
<li>Mediatuotanto</li>
<li>Web</li>
</ol>
</li>
<li>Vinkit</li>
<li>Kaupat</li>
</ol>Kuitenkin selaimen tulos on lannistava.
Tämän seurauksena tällaisen järjestelmän numerointi ei toteudu:
1. Ohjeistot 2D
1.1 3D
1.2 Web
- Video-oppaat 3D
2.1 Mediatuotanto
2.2 Web - Vinkit
- Kaupat
Tällaista ei ole mahdollista pelkällä HTML:llä. Itse asiassa tätä varten on käytettävä CSS:ää, jotta sisällöt numeroidaan automaattisesti tällaisen järjestelmän mukaisesti.
Sanalistoja
Yksi lisälistojen variantti on niin kutsutut sanalistat. Myös tähän ensin esimerkki siitä, millaiselta tällainen lista näyttää lopulta selaimessa:
Pääasiallinen käyttötarkoitus sanalistoissa ovat sanastot. Tässä syntaksi, joka johti aiemmin nähtyyn tulostukseen:
<dl>
<dt>AM</dt>
<dd>AM - ilmaposti</dd>
<dd>AM - ilmamarsalkka</dd>
<dd>AM - Amberg</dd>
<dd>AM - amerikium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - yllä mainittu</dd>
<dd>AN - päätepiste</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="Tiedosto"> <button type="button" onclick="fnew()">Uusi...</button> <button type="button" onclick="fopen()">Avaa...</button> <button type="button" onclick="fsave()">Tallenna</button> <button type="button" onclick="fsaveas()">Tallenna nimellä...</button> </menu> </li> <li> <menu label="Muokkaa"> <button type="button" onclick="ecopy()">Kopioi</button> <button type="button" onclick="ecut()">Leikkaa</button> <button type="button" onclick="epaste()">Liitä</button> </menu> </li> <li> <menu label="Ohje"> <li><a href="help.html">Ohje</a></li> <li><a href="about.html">Tietoja</a></li> </menu> </li> </menu>
Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.
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.
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.
