Liste HTML

Listele sunt elemente des utilizate in pagini web, atunci can dorim sa enumeram definitii sau referinte iar acestea pot fi listate in liste ordonate.

Listele HTML pot fi: de tip definitie, neordonate, ordonate.

Pentru a incepe, avem nevoie o ethicheta noua, pentru a incepe si a termina o lista intreaga.

Liste HTML de tip definitie

Sunt incluse in marcajele <dl> si </dl>

Termenul definit este inclus intre <dt> si </dt>

Definitia termenului o precizam intre <dd>

Liste HTML neordonate

Sunt incluse intre marcajele <ul> si </ul>

Elementele listei sunt marcate cu <li>

O lista neordonata va crea o lista de elemente. Eticheta de deschidere este <ul>, iar inchiderea etichetei se face cu </ul>. Fiecare element al listei va aparea intre eticheta <li>, urmat de textul propriu zis, urman de eticheta </li>.

Un exemplu de lista cu doua articole:

<ul> 
<li>Primul element</li> 
<li>Al doilea element</li> 
</ul>

Rezultatul acestui exemplu va fi:

Primul element
Al doilea element

Caraterul din fata textului este un atribut special de lista. Tipurile posibile sunt urmatoarele:

disc (default)	Utilizeaza un disc simplu.
cerc	Utilizeaza un cerc.
patrat	Utilizeaza un patrat.

Urmatorul exemplu indica ca lista va folosi patratul:

<ul type="square"> 
<li>Rosu</li> 
<li>Galben</li> 
<li>Albastru</li> 
</ul>

Rezultatul:

Rosu
Galben
Albastru

Liste HTML ordonate

Sunt incluse intre marcajele <ol> si </ol>

Fiecare element al listei este precizat cu <li>

Sa recapitulam listele HTML prin exemple.

Exemplu lista definitie:

<html>
<head>
<title>exemplu liste definitie</title>
</head>
<body>
<h1>9 iunie 2007</h1>
<dl>
<dt>o pagina web contine:
<dd>imagini, sunete, link-uri,bannere publicitare
</dl>
</body>
</html>

Exemplu lista neordonata:

<html>
<head>
<title>exemplu liste neordonate </title>
</head>
<body>
<h1>9 iunie 2007</h1>
<ul>o pagina web contine:
<li>imagini
<li>sunete
<li>link-uri
<li>bannere publicitare
</ul>
</body>
</html>

Exemplu liste ordonate:

<html>
<head>
<title> exemplu liste ordonate </title>
</head>
<body>
<h1>9 iunie 2007</h1>
<ol>o pagina web contine:
<li>imagini
<li>sunete
<li>link-uri
<li>bannere publicitare
</ol>
</body>
</html>

Adauga acesta pagina la: