I primi passi

per creare una pagina HTML "a mano"
Parte 3

Le liste e i link

Adesso che sapete come impaginare e modificare il testo passiamo alle liste. Quello che cambia dal fare una lista con solo testo a farla utilizzando i tag appositi è l'allineamento del testo che si ottiene andando a capo. Se usate del normale testo, quando andate a capo, la nuova linea inizierà sotto il numero che indica l'elemento, mentre usando i tag appositi, il testo verrà posizionato un po' più a destra, esattamente sotto l'inizio della riga sopra (qualcuno dirà 'E io lo allineo da me' e io allora gli rispondo 'Come dice il mio professore di informatica: "Perché fare qualcosa quando qualcuno l'ha già fatto e per di più funziona bene?"').
Per capirci meglio, ecco un esempio:

Lista fatta "a mano":
1)Io sono la prima riga del primo elemento
Io sono la seconda riga del primo elemento
2)Io sono la prima riga del secondo elemento

E così via... mentre usando i tag appositi il risultato è questo:

Lista fatta con i tag:

1. Io sono la prima riga del primo elemento
   Io sono la seconda riga del primo elemento
   
2. Io sono la prima riga del secondo elemento
   

Dunque, visto il risultato, ecco come si fa a creare una lista. La prima distinzione da fare è se vogliamo ordinare o no la nostra lista, ovvero se vogliamo che gli elementi siano preceduti da numeri oppure se basta un pallino.
Nel primo caso si usa una lista ordinata, nel secondo (ovviamente) una lista non ordinata.
Il primo tipo di lista viene creata con la coppia di tag <ol>...</ol> (OL sta per Ordered List, ovvero lista ordinata), mentre il secondo tipo con <ul>...</ul> (UL sta per Unordered List, ovvero lista non ordinata).
Ma questi sono solo i "contenitori" degli elementi della lista. Quando vogliamo mettere un elemento dobbiamo usare <li> seguito dal testo associato ad esso.
Attenzione: non c'è bisogno di mettere il tag di chiusura di questo elemento (ovvero </li>). Per mettere un nuovo elemento basta scrivere nuovamente <li> (LI sta per List Item, ovvero elemento della lista).
Qui sotto c'è una tabella con degli esempi di liste (a sinistra c'è il codice sorgente e a destra come appare la lista).

Lista ordinata
<ol> <li>Primo elemento <li>Secondo elemento <li>Terzo elemento </ol>	Primo elemento Secondo elemento Terzo elemento

Lista non ordinata
<ul> <li>Primo elemento <li>Secondo elemento <li>Terzo elemento </ul>	Primo elemento Secondo elemento Terzo elemento

Ma la potenzialità delle liste non si ferma qui. Infatti è possibile creare liste annidate molto semplicemente, basta che si usi, come elemento un'altra lista. Ma vedere come si fa è molto più semplice di starlo qui a spiegare, quindi ecco qua il codice necessario:

Lista non ordinata con sotto-lista non ordinata
<ul> <li>Primo elemento <li>  <ul>  <li>Primo elemento della sotto-lista  <li>Secondo elemento della sotto-lista  </ul> <li>Terzo elemento </ul>	Primo elemento Primo elemento della sotto-lista Secondo elemento della sotto-lista Terzo elemento

Lista ordinata con sotto-lista ordinata
<ol> <li>Primo elemento <li>  <ol>  <li>Primo elemento della sotto-lista  <li>Secondo elemento della sotto-lista  </ol> <li>Terzo elemento </ol>	Primo elemento Primo elemento della sotto-lista Secondo elemento della sotto-lista Terzo elemento

Lista non ordinata con sotto-lista ordinata
<ul> <li>Primo elemento <li>  <ol>  <li>Primo elemento della sotto-lista  <li>Secondo elemento della sotto-lista  </ol> <li>Terzo elemento </ul>	Primo elemento Primo elemento della sotto-lista Secondo elemento della sotto-lista Terzo elemento

Lista ordinata con sotto-lista non ordinata
<ol> <li>Primo elemento <li>  <ul>  <li>Primo elemento della sotto-lista  <li>Secondo elemento della sotto-lista  </ul> <li>Terzo elemento </ol>	Primo elemento Primo elemento della sotto-lista Secondo elemento della sotto-lista Terzo elemento

Semplice no? L'ultima cosa che rimane da dire è che tramite l'uso di un attributo dei fogli di stile (vedi la pagina dei fogli di stile per maggiori informazioni), si possono cambiare i numeri e i pallini che denotano gli elementi, da quelli standard a forme geometriche diverse, numeri romani, lettere e persino immagini create da voi!
Vi consiglio, però, per prima cosa di imparare bene a usare le liste e solo dopo passare a queste "finezze" che introducono altri concetti.

Mi sembra che per quanto riguarda le liste siamo a posto, quindi passiamo a uno dei cardini di tutto internet: il link.
Come fare senza i link? Mettersi lì a digitare tutti gli indirizzi a mano non è poi così simpatico!.
Ecco allora che introduciamo i link.
In poche parole un link è denotato dalla coppia di tag <a>...</a>, il suo attributo fondamentale è href=" ", dove, dentro gli apici, bisogna mettere l'indirizzo della pagina a cui il link è associato. Infine il testo che si trova tra il tag di apertura e il tag di chiusura di un link, è quello che verrà mostrato sullo schermo.
Un esempio pratico di link è il seguente:

<a href="http://web.tiscali.it/alexmfm">The Shiny Side of the Moon</a>

il cui risultato è il link qui sotto:

The Shiny Side of the Moon

Un ulteriore attributo (molto importante se si linkano siti esterni dall'interno di un nostro frame) è target=" ", dove dentro gli apici si possono avere questi valori:

_self	Fa comparire la nuova pagina nella stessa pagina o nel frame in cui avete cliccato il link
_blank	Fa comparire la nuova pagina in una nuova finestra
_parent	Fa comparire la pagina nella finestra padre di quella in cui si trova il link
_top	Fa comparire la pagina nella finestra in primo piano eliminando, se ci sono, anche i frame.

Per esperienza personale, vi posso dire che i più usati sono _self e _blank, il secondo in modo speciale nel caso in cui da un frame i debba caricare un sito esterno. Anzi fate proprio attenzione a questo: i siti esterni al vostro devono essere aperti su di una finestra nuova (non è una regola dell'HTML ma una del buonsenso e del rispetto verso gli altri).
Oltre a queste parole riservate, si può usare un nome qualsiasi al posto di questi valori. Se lo fate, si aprirà una nuova finestra che avrà il nome che avete specificato. Questo è utile sia per far funzionare correttamete i frame (spiegherò come creare dei frame in una delle prossime lezioni) che per usare correttamente una finestra supplementare (l'ho spesimentato e funziona molto bene).

Inoltre c'è la possibilità di linkare una parte specifica di un documento, in modo che al clic cul link si viene portati, ad esempio, a metà della pagina che si sta vedendo. Per fare questo si deve usare sempre il tag <a> (questa volta non va chiuso, serve solo da àncora per il link) e si usa il solo attributo name=" ". Il nome dentro le virgolette deve essere preceduto dal cancelletto #. Per richiamare quella parte specifica basta creare un link e usare come indirizzo lo stesso nome usato dentro name (cancelletto compreso) se si è nella stessa pagina, oppure mettere l'url completo, seguito dal cancelletto e dal nome nel caso ci si riferisca ad una pagina differente.
Ecco una serie di esempi, con spiegazioni su cosa significano:

<a href="http://web.tiscali.it/alexmfm">	Link semplice che rimanda alla pagina specificata dentro href. Per default, se non è specificato diversamente, la nuova pagina verrà aperta nella stessa pagina o frame dove si trova il link che la richiama.
<a href="http://web.tiscali.it/alexmfm" target="_blank">	Apre una nuova finestra e ci carica la pagina specificata in href
<a href="http://web.tiscali.it/alexmfm" target="pagina1">	Apre una nuova finestra chiamata pagina1 e ci carica la pagina specificata in href. Se una finestra con quel nome è già aperta, usa quella per caricarci la pagina.
<a name="#pippo">	Crea un'ancora (tipo un segnalibro) di nome pippo nella pagina. Se si usa <a href="#pippo"> si viene portati direttamente nella parte del documento dove c'è il tag qui accanto.

Come ultima cosa, c'è da dire che se linkate un file che si trova nella stessa cartella, non è necessario specificare tutto l'url, ma basta il nome del file. Inoltre ricordate che possono essere link anche le immagini (quando avrete imparato queste cose e passerete ai fogli di stile e al Javascript, vedrete che ci sono altri oggetti che possono diventare link, ma non è questo il momento di parlarne.)

Prossima pagina

Indice Webdesign