W HTML możemy definiować listy uporządkowane, nieuporządkowane i listy definicji:
| <ul> Lista nieuporządkowana: <li>monitor</li> <li>klawiatura</li> <li>drukarka</li> <li>myszka</li> </ul> |
<ol>Lista uporządkowana <li>wędliny</li> <li>chleb</li> <li>masło</li> <li>piwo</li> </ol> |
Lista definicji <dl> <dt>Pierwszy termin</dt> <dd>Definicja pierwszego terminu</dd> <dt>Drugi termin</dt> <dd>Definicja drugiego terminu</dd> <dt>Trzeci termin</dt> <dd>Definicja trzeciego terminu</dd> </dl> |
|
|
Lista definicji
|
Widzimy już czym różnią się poszczególne listy. Nieuporządkowana posiada identyczne wyróżniki dla każdej pozycji listy. Lista uporządkowana posiada numerację a lista definicji posiada składnię "słownikową".
<ul>...</ul> - utworzenie listy nieuporządkowanej
<ol>...</ol> - utworzenie listy uporządkowanej
<dl>...</dl> - utworzenie listy definicji
<li>...</li> - element listy nieuporządkowanej i uporządkowanej
<dt>...</dt> - słowo lub wyrażenie na liście definicji
<dd>...</dd> - objaśnienie słowa lub wyrażenia na liście definicji
Atrybuty dla listy uporządkowanej - definiujemy rodzaj numeracji i początek:
<ol type="{1|A|a|I|i}" start="n">
type - zdeprecjonowany. Definiuje typ wyróżnika
start - zdeprecjonowany. Definiuje początkową literę lub liczbę numeracji
Przykład:
- <ol type="1" start="1"> - cyfry arabskie
- <ol type="A" start="2"> - duże litery
- <ol type="a" start="3"> - małe litery
- <ol type="I" start="4"> - duże liczby rzymskie
- <ol type="i" start="5"> - małe liczby rzymskie
Atrybuty dla listy nieuporządkowanej:
<ul type="{disc|circle|square}">
type - zdeprecjonowany. Definiuje typ wyróżnika.
Przykład:
- <ul type="disc"> - koło (domyślny)
- <ul type="circle"> - okrąg
- <ul type="square"> - kwadrat
Listy można zagnieżdżać:
- Lista sprzętu komputerowego
- monitor
- klawiatura
- myszka
- drukarka
- HP
- Epson
- Canon
- Lexmark
I na koniec przykład strony z nieuporządkowaną listą zakupów, a pod spodem za pomocą listy definicji uściślimy bardziej dosłownie poszczególne pozycje zakupowe
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Tu wpisz swoje imię i nazwisko" />
<meta name="description" content="Co musimy kupić na weekend">
<meta name="keywords" content="zakupy, lista, jedzenie" />
<meta name="Robots" content="index,follow" />
<title>Imię i nazwisko - strona prywatna</title>
<style>
<body style="color:white;background-color:black;">
<ol style="list-style-type: upper-roman;">Lista zakupów na weekend
<li>Masło</li>
<li>Wędliny</li>
<li>Sery</li> <li>Dżem</li> <li>Mięso</li>
<li>Ziemniaki</li>
<li>Zielenina</li>
<h2>Doprecyzowanie zakupów</h2>
<dl>
<dd>2 kostki, 82% tłuszczu</dd>
<dt>Wędliny</dt>
<dd>3 rodzaje wędlin, po 20dkg, pokrojone w plasterki</dd>
<dt>Zielenina</dt>
<dd>1 czerwona kapusta, 1 por, kilo cebuli</dd>
