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 nieuporządkowana:
  • monitor
  • klawiatura
  • drukarka
  • myszka
    Lista uporządkowana
  1. wędliny
  2. chleb
  3. masło
  4. piwo
Lista definicji
Pierwszy termin
Definicja pierwszego terminu
Drugi termin
Definicja drugiego terminu
Trzeci termin
Definicja trzeciego terminu

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:

  1. <ol type="1" start="1"> - cyfry arabskie
  1. <ol type="A" start="2"> - duże litery
  1. <ol type="a" start="3"> - małe litery
  1. <ol type="I" start="4"> - duże liczby rzymskie
  1. <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
  1. monitor
  2. klawiatura
  3. myszka
  4. drukarka
    1. HP
    2. Epson
    3. Canon
    4. 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="pl" xml:lang="pl" dir="ltr">
<base href="http://moja-domena.pl" />
<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>
h1 {text-decoration: underline;color:#ffcc00;letter-spacing:10px;}
</style>
</head>
<body style="color:white;background-color:black;">
<h2>Moje zakupy</h2>
<ol style="list-style-type: upper-roman;">Lista zakupów na weekend
<li>Chleb</li>
<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>
</ol>
<h2>Doprecyzowanie zakupów</h2>
<dl>
<dt>Masło</dt>
<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>
</dl>
</body>
</html>

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×