HTML ir dažādi sarakstu veidi. Pirmkārt ir saraksti ar atzīmēm. Šajā saraksta veidā katrs saraksta ieraksts tiek aprīkots ar uzskaitīšanas simbolu, tā saukto Bulli.
Saraksta punkti tiek ievadīti, izmantojot ul-elementu. Katru saraksta ierakstu atzīmē ar li-elementu.
<p>Foruma aktuālās tēmas</p> <ul> <li>CSS netiek turpināts</li> <li>Hollywood stila 40. gadu izstāde</li> <li>izklājlapa CSS</li> <li>PHP savienošana/atvienošana</li> <li>Mans mazais stends - iesācējs lūdz padomu!</li> </ul>
Šeit ir skats uz rezultātu pārlūkprogrammā:
Pirms ikviena raksta tiek ievietota uzskaitīšanas zīme. Kā šis izskatās pēc noklusējuma, nosaka pārlūkprogrammas. Lai gan pastāv atribūti, ar kuriem var ietekmēt sarakstu izskatu, šos vairs nevajadzētu izmantot. Tā vietā nāk spēlē CSS īpašības.
Uzskaitīšanas sarakstus var ienespēt arī vienu otrā. Vispirms aplūkojiet nākamo attēlu:
Šeit skaidri redzams, kas notiek ar šādu iegulto sarakstu.
Tā izskatās sintakse:
<ul>
<li>Vadlīdzekļi
<ul>
<li>2D</li>
<li>3D</li>
<li>Mājaslapa</li>
</ul>
</li>
<li>Videoapmācības
<ul>
<li>3D</li>
<li>Mediju izveide</li>
<li>Mājaslapa</li>
</ul>
</li>
<li>Padomi</li>
<li>Veikali</li>
</ul>
Saraksta ieraksta ietvaros var būt arī citas saraksta veids. Piebildīšu, tas neviļ obligāti ir uzskaitīšanas saraksts. Patiesībā šīs veidnes joprojām vajadzētu ievietot.
<p>Foruma aktuālās tēmas</p> <ul> <li>CSS netiek turpināts <li>Hollywood stila 40. gadu izstāde <li>izklājlapa CSS <li>PHP savienošana/atvienošana <li>Mans mazais stends - iesācējs lūdz padomu! </ul>
Numerētie saraksti
Papildus uzskaitīšanas sarakstiem ir iespējams definēt arī numerētus sarakstus. Šeit atkal attēls, kas parāda, kas īsti ir ar šādiem numerētajiem sarakstiem.
Jaunakajiem ir pievienotas pēc kārtas numurētas zīmes. Numerētie saraksti tiek sākti ar ol-elementu.
Sekojotajā piemērā redzams, kā izmantot šo elementu.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Kā ar uzskaitīšanas sarakstiem, šeit arī katru ierakstu atzīmē ar li-elementu.
Teorētiski uzskaitīšanas sarakstus var ienespēt arī citam.
<ol>
<li>Vadlīdzekļi
<ol>
<li>2D</li>
<li>3D</li>
<li>Mājaslapa</li>
</ol>
</li>
<li>Videoapmācības
<ol>
<li>3D</li>
<li>Mediju izveide</li>
<li>Mājaslapa</li>
</ol>
</li>
<li>Padomi</li>
<li>Veikali</li>
</ol>Pēc tam, rezultāts pārlūkprogrammā ir neapmierinošs.
Šādā veidā nepanāk numerēšanu pēc šāda modeļa:
1. Vadlīdzekļi 2D
1.1 3D
1.2 Mājaslapa
- Videoapmācības 3D
2.1 Mediju izveide
2.2 Mājaslapa - Padomi
- Veikali
Kaut kas tāds ar tīru HTML nav iespējams. Patiesībā šai gaisā jāizmanto CSS, lai saturu automātiski numurētu pēc šāda modeļa.
Definīciju saraksti
Vēl viena sarakstu veids ir t.s. definīciju saraksti. Arī šim vispirms ir piemērs tam, kā šāds saraksts galu gala izskatās pārlūkprogrammā:
Definīciju saraksti ir lietojami galvenokārt ģlabitāmiem. Šeit ir sintakse, kas izvadījusi iepriekš norādīto rezultātu:
<dl>
<dt>AM</dt>
<dd>AM - Gaisa pasts</dd>
<dd>AM - Gaisa maršals</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amštetene</dd>
<dt>AN</dt>
<dd>AN - iepriekš minēts</dd>
<dd>AN - Piekļuves mezgls</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="Fails"> <button type="button" onclick="fnew()">Jauns...</button> <button type="button" onclick="fopen()">Atvērt...</button> <button type="button" onclick="fsave()">Saglabāt</button> <button type="button" onclick="fsaveas()">Saglabāt kā...</button> </menu> </li> <li> <menu label="Rediģēt"> <button type="button" onclick="ecopy()">Kopēt</button> <button type="button" onclick="ecut()">Izgriezt</button> <button type="button" onclick="epaste()">Ielīmēt</button> </menu> </li> <li> <menu label="Palīdzība"> <li><a href="help.html">Palīdzība</a></li> <li><a href="about.html">Par</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.
