Corso HTML e CSS (Lezione 8)

Impariamo a costruire un sito Web

Lezione 8: I tag del <body> : Tag per le liste

I tag che abbiamo incluso nel raggruppamento per le liste sono:

<ul> Definisce una lista non ordinata
<ol> Definisce una lista ordinata
<li> Definisce un elemento di una lista (<ul>)
<dir> Deprecated. Veniva usato per liste tipo directory. Usare <ul>
<dl> Definisce una lista di elementi con relativa definizione
<dt> Definisce un elemento della definition list <dl>
<dd> Definisce la descrizione di un elemento della definition list
<menu> Deprecated. Definiva una lista di elementi di menu. Usare <ul>

Come sempre non analizzeremo i tag deprecati in quanto sostituiti da altro tag e quindi non più accettati nelle ultime versioni di XHTML.

Vediamo quindi in dettaglio gli altri.

 

1) <ul> … </ul>

Questo tag viene usato per definire una lista di elementi non ordinata. Da usare per esempio per definire la lista di elementi di un menu a cascata. La lista può essere puntata con i bullets o senza. Lo stile e le caratteristiche grafiche della lista saranno definiti con i CSS che vedremo in seguito.

Gli attributi per questo tag sono quelli standard cioè:

Attributo Valore Descrizione Obblig./Facolt.
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
dir ltr
rtl
Specifica la direzione del testo (ltr o rtl) Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
lang language- code Specifica un codice linguaggio per il testo associato all’immagine. Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
title testo Titolo dato all’immagine che comparirà quando si porterà il mouse sull’immagine stessa. Facoltativo
xml:lang language- code Specifica un codice linguaggio per il testo associato all’immagine in un documento XHTML. Facoltativo

Vale la pena sottolineare che anche in questo caso molti attributi sono superflui. Ci riferiamo in particolare aquelli relativi alla lingua (lang e xml:lang) e a dir.

Un esempio lo proponiamo dopo la descrizione del tag <li> al prossimo punto.

 

2) <li> … </li>

Questo tag si usa per definire un elemento della lista definita col tag <ul>. Si useranno quindi tanti <li> … </li> annidati all’interno di una coppia di tag <ul> … </ul>. Se la lista è a più livelli (pensiamo ai livelli di un menu) si potranno annidare più liste <ul> … </ul> coi loro elementi.

Dall’esempio che segue l’uso risulterà chiaro. Se scriviamo:

	<ul>
		<li><a href="#">Home</a> </li>
		<li><a href="#">Utilities</a>
			<ul>
				<li><a href="#">Sicurezza</a></li>
				<li><a href="#">Internet</a></li>
				<li><a href="#">Networking</a></li>
				<li><a href="#">System Utilities</a></li>
			</ul>
		</li>
                <li><a href="Wallpapers.php">Wallpapers</a>
			<ul>
				<li><a href="#">Animali;</a></li>
				<li><a href="#">Arte;</a></li>
				<li><a href="#">Astratti;</a></li>
				<li><a href="#">Astri;</a></li>
				<li><a href="#">Auto;</a></li>
				<li><a href="#">Cartoons;</a></li>
				<li><a href="#">Cibo;</a></li>
			</ul>
               </li>
	</ul>

il browser mostrerà:

3) <ol> … </ol>

Questi tag includono una lista ordinata, a differenza dei tag <ul> .. </ul> che definiscono una lista non ordinata. A parte questa differenza il comportamento di questi tag è del tutto analogo.
Anche in questo caso gli elementi della lista sono definiti col tag <li>.
L’ordinamento può essere sia numerico, sia alfabetico. Gli attributi che può avere il tag <ol> sono gli stessi visti per <ul>.
 
Vediamo un esempio. Scriviamo:

	<ol>
		<li><a href="#">Home</a> </li>
		<li><a href="#">Utilities</a>    
			<ol>
				<li><a href="#">Sicurezza</a></li>
				<li><a href="#">Internet</a></li>
				<li><a href="#">Networking</a></li>
				<li><a href="#">System Utilities</a></li>
			</ol>       
		</li>
        <li><a href="Wallpapers.php">Wallpapers</a>   
			<ol style="list-style-type:lower-alpha">
				<li><a href="#">Animali;</a></li>
				<li><a href="#">Arte;</a></li>
				<li><a href="#">Astratti;</a></li>
				<li><a href="#">Astri;</a></li>
				<li><a href="#">Auto;</a></li>
				<li><a href="#">Cartoons;</a></li>
				<li><a href="#">Cibo;</a></li>
			</ol>       
        </li>    
	</ol>

e a video il browser mostrerà:

 

Come si vede le liste riportano per default una numerazione. Per mostrare un ordinamento alfabetico abbiamo inserito la definizione ‘style=”list-style-type: lower-alpha;‘ che fa parte degli elementi di stile che affronteremo contestualmente ai fogli CSS.

 
4) <dl></dl>
<dt></dt>
<dd></dd>

Il tag <dl> (definition list) con tag di chiusura </dl>, viene usato per creare una lista di definizioni. Va usato insieme ai tag <dt> che definisce il singolo elemento della lista e <dd> che ne da la definizione.
 
Come sempre chiariamo con un esempio. Scriviamo:

<dl>
	<dt>HTML</dt>
		<dd>Hyper Text Markup Language</dd>
	<dt>CSS</dt>
		<dd>Cascading Style Sheets</dd>
	<dt>URL</dt>
		<dd>Uniform Resource Locator</dd>
</dl>

e a video il browser mostrerà:

HTML
Hyper Text Markup Language
CSS
Cascading Style Sheets
URL
Uniform Resource Locator

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.