intro | lezioni | articoli | dizionario | download | e-mail |
Distinguiamo due tipi di elenchi: quelli ordinati da quelli non ordinati.
Iniziamo dai primi, in genere questo tipo di elenchi è impiegato per esprimere una sequenza di operazioni o una classifica.
La sintassi per implementare una lista ordinata è la seguente
<OL>
<LI>elemento 1
<LI>...
<LI>elemento n
</OL>
Analizziamo ora questa serie di tag.
Con <OL> si comunica al browser che ha inizio una lista ordinata: in inglese
ordered list.
Ognuno degli elementi della lista, in inglese listed item, è preceduto dal tag <LI>.
La lista ha termine con il tag di chiusura </OL> con cui si comunica,
appunto, il termine della lista.
Esempio 4.1
<HTML>
<HEAD>
<TITLE>Esempio 4.1</TITLE>
</HEAD>
<BODY>
<P>la classifica dei miei libri preferiti
<OL>
<LI>La famiglia Winshaw - J. Coe
<LI>Se questo è un uomo - P.Levi
<LI>Il piano infinito - I. Allende
<LI>Sotto il culo della rana - T. Fisher
<LI>Avere o essere - E. Fromm
</OL>
</BODY>
</HTML>
Il tag di apertura <OL> supporta l'attributo type il quale risulta molto utile se bisogna interrompere la lista e poi riprenderla procedendo con la numerazione.
L'attributo type="valore" accetta 5 diversi valori corrispondenti a cinque diverse numerazioni:
- 1: numerazione araba (quella predefinita ossia di default)
- i: numerazione romana (lettere minuscole)
- I: numerazione romana (lettere maiuscole)
- a: numerazione letterale (lettere minuscole)
- A: numerazione letterale (lettere maiuscole)
Ora vediamo come funziona questo attributo con un esempio pratico.
Esempio 4.2
<HTML>
<HEAD>
<TITLE>Esempio 4.2</TITLE>
</HEAD>
<BODY>
<OL type=a>
<LI>prendi carta e penna ed elabora una bozza del tuo sito
<LI>sviluppa il listato HTML necessario per creare l'effetto desiderato
<LI>se ti è possibile, testa la tua pagina con diversi browser
</OL><P>Quest'ultimo punto è molto importante. Ricorda che l'HTML è visualizzabile su diverse piataforme senza che vi sia la necessità di un particolare software. Per cui sviluppare un documento HTML correttamente visualizzabile solo con un certo programma significa andare contro la stessa natura dell'HTML, e cosa più importante, ciò significa precludere importanti informazioni a persone potenzialmente interessate.</P>
<OL type=a start=4>
<LI>verificare il funzionamento dei link
<LI>mettere la pagina in rete
</OL></BODY>
</HTML>
Se non avessi inserito l'attributo start nella seconda lista questa sarebbe ripartita dalla lettera a anzichè riprendere dalla lettera d, adottando questo accorgimento faccio capire che si tratta di una prosecuzione della lista precedente.
N.B. Nonostante abbia scelto una numerazione diversa da quella araba, per far proseguire la lista da una posizione diversa dalla prima devo adottare un numero intero come valore dell'attributo start (in questo caso 4 perche intendo riprendere la lista dalla quarta lettera minuscola ossia la d)
Gli elenchi non ordinati presentano nella costruzione la stessa struttura di quelli ordinati, a cambiare sono solo i tag di apertura e di chiusura: in questo caso avremo:
<UL> all'inizio della lista e </UL> alla sua fine. UL sta per Unordered List ossia lista non ordinata.
Il tag di apertura <UL> supporta il tag type attraverso il quale è possibile modificare i punti elenco. Questo attributo accetta uno dei seguenti 3 valori:- disc che riproduce un pallino nero
(il tipo di punto elenco solitamente visualizzato)
- circle che riproduce un pallino vuoto
- square che riproduce un quadrato nero
Un terzo tipo di elenco che rientra nella categoria degli elenchi non ordianti è quello dell'elenco di definizione.
Immagina di avere una lista di termini e di voler dare per ciascuno di essi una definizione (questo tipo di lista è ottimo per creare un glossario). La sintassi è la seguente.<DL>
<DT>termine 1<DD>definizione 1
<DT>termine 2<DD>definizione 2
<DT>termine 3<DD>definizione 3
</DL>
Ecco un possibile impiego di questo tipo di lista:Esempio 4.3
<HTML>
<HEAD>
<TITLE>Esempio 4.3</TITLE>
</HEAD>
<BODY>
<DL>
<DT>banner<DD>un banner è l'equivalente elettronico di un cartellone pubblicitario, si tratta di quei rettangoloni che trovi in parecchie pagine web e che ti invitano a cliccarci di sopra, generalmente per raggiungere il sito dello sponsor.
<DT>newsgroup<DD>in italiano, gruppo di discussione, una sorta di bacheca elettronica dove ogni utente internet può affiggere il proprio messaggio (che dovrebbe essere pertinente con il tema del gruppo)
<DT>attachment<DD>in italiano, allegato, con questo termine ci si riferisce ad un file allegato ad un messaggio di posta elettronica.
</DL></BODY>
</HTML>Anche questa lezione è giunta al termine. Nella prossima apprenderai come inserire le immagini all'interno di un documento HTML.
- disc che riproduce un pallino nero
|
|
