Tag fondamentali dell'HTML

Dopo aver creato la nostra prima pagina web, in cui abbiamo utilizzato i soli tag <h1> (titolo) e <p> (paragrafo), vediamo quali sono gli altri tag fondamentali dell'HTML, per poter creare pagine complete, contenenti tutto quanto si trova tipicamente in una pagina visitabile su Internet.

Titoli

Esistono sei livelli di titoli, rappresentati dai tag <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Eccoli qui di seguito:

Ed ecco il codice HTML corrispondente ai sei titoli precedenti:

<h1>Titolo di livello 1</h1>
<h2>Titolo di livello 2</h2>
<h3>Titolo di livello 3</h3>
<h4>Titolo di livello 4</h4>
<h5>Titolo di livello 5</h5>
<h6>Titolo di livello 6</h6>

Paragrafi di testo

Il testo "normale", cioè quello formattato senza particolare evidenza (come ad esempio quello che stai leggendo ora), potrebbe essere scritto al di fuori di qualunque tag. E' consigliabile, comunque, racchiudere sempre qualunque contenuto all'interno di un tag, in modo tale da renderlo identificabile all'interno dei fogli di stile, dove sarà così possibile definirne la formattazione.

Per il testo contenuto in un normale paragrafo esiste il tag <p> (e il relativo tag di chiusura </p>).

Immagini

Quasi tutte le pagine web contengono immagini. Dal momento che i file HTML possono contenere solo semplice testo, deve esistere un marcatore che rappresenti il collegamento ad un file esterno contenente, appunto, l'immagine. Ecco il tag di cui stiamo parlando:

<img src="logo.jpg" alt="Logo dell'azienda" />

Tra quelli visti finora, questo è il primo tag contenente degli attributi, ossia delle informazioni aggiuntive associate al tag stesso.

Queste informazioni aggiuntive sono contenute nel tag ed hanno la forma:

nome_attributo="valore_attributo"

Nel nostro esempio, quindi, src e alt sono due attributi del tag <img>, ai quali sono stati assegnati rispettivamente i valori "logo.jpg" e "Logo dell'azienda".

Il primo attributo (src) rappresenta il nome del file contenente l'immagine che vogliamo inserire nella pagina (nel caso il file non si trovi nella stessa cartella in cui si trova il file HTML, occorrerà specificarne anche il percorso).

Il secondo attributo (alt) rappresenta un testo descrittivo dell'immagine, che ha una doppia funzione:

• viene visualizzato al posto dell'immagine nel caso non sia possibile caricare il file indicato dall'attributo src;
• può essere letto da sistemi di sintesi vocale per non vedenti (in questo senso migliorando l'accessibilità della pagina).

Il codice precedente inserisce nella pagina l'immagine "logo.jpg", fornendo in alternativa il testo "Logo dell'azienda".

Per fare un esempio concreto, ecco il codice per inserire nella pagina il logo di Google, preso direttamente dalla home page del sito:

<img src="https://www.google.it/images/srpr/logo11w.png" alt="Logo di youtube" />

Ed ecco il codice all'opera:

Link

Gli hyperlink (abbreviato link), o collegamenti ipertestuali, sono il "cuore" del WWW. Il World Wide Web (l'insieme di tutte le pagine web che si trovano su Internet) può essere considerato come un enorme ipertesto navigabile da una pagina all'altra grazie ai link.

Il tag da utilizzare per inserire un link nella pagina è questo:

<a href="http://www.wikipedia.com">Clicca qui per andare all'home page di Wikipedia</a>

Il cui effetto è il seguente:

Come si vede nell'esempio, il tag <a> contiene un attributo dal nome href, al quale viene assegnato come valore l'indirizzo della destinazione del link. Come per l'attributo src del tag <img>, l'indirizzo può essere costituito semplicemente da un nome di file oppure può essere un intero percorso (nell'esempio precedente, l'indirizzo della home page di Wikipedia).

L'elemento "collegamento ipertestuale" (o "link") è quindi costituito da due parti:

• il tag vero e proprio, in cui è specificata la destinazione del link (in gergo si dice anche "la pagina a cui punta il link");
• il contenuto del link, ossia il testo visibile sulla pagina (su cui cliccare per seguire il link): in gergo questo contenuto è detto "àncora".

Avendo già riportato l'esempio di un percorso intero come destinazione del link, facciamo anche l'esempio di un link ad una pagina dello stesso sito, memorizzata in un file contenuto nella stessa cartella della pagina che contiene il link:

<a href="esempi_layout.html">Esempi di layout di pagine web</a>

Il cui effetto è il seguente:

E' ovvio che l'attributo href è obbligatorio: senza una destinazione a cui puntare, il link non avrebbe ragione di esistere.

L'àncora di un link, ossia l'elemento su cui cliccare per spostarsi sulla destinazione del link, può essere costituito da qualunque altro elemento della pagina HTML (basta inserire l'elemento all'interno del tag <a>). In particolare, oltre al testo, elementi molto utilizzati come àncore sono le immagini. Ecco un esempio:

Ed ecco il codice corrispondente:

<a href="http://www.wikipedia.com"><img src="images/images_siti_web/Wikipedia-logo.png" alt="Logo di Wikipedia" /></a>

Elenchi (o liste)

I tag necessari all'inserimento di elenchi sono riportati nel seguente... elenco:

• <ul>: è il tag utilizzato per liste non ordinate, dette anche elenchi puntati ("ul" sta per "unordered list");
• <ol>: è il tag utilizzato per liste ordinate, dette anche elenchi numerati ("ol" sta per "ordered list");
• <li>: è il tag utilizzato per definire ciascun punto dell'elenco (sia per liste ordinate che per liste non ordinate).

Di seguito sono riportati alcuni esempi, con i relativi codici HTML.

Iniziamo con un elenco numerato:

Il cui codice è questo (notare l'uso del tag <ol>, dal momento che si tratta di una lista ordinata):

<p>I siti più visitati al mondo:</p>
<ol>
 <li>google.com</li>
 <li>facebook.com</li>
 <li>youtube.com</li>
 <li>yahoo.com</li>
 <li>baidu.com</li>
</ol>

Anche quello che segue è un elenco numerato, ma utilizza per la numerazione i numeri romani:

Come si sarà notato, ai nomi dei primi due edifici è stato associato un link che rimanda alla pagina di wikipedia con la foto degli edifici stessi. Notare, nel codice che segue, i tag <a> contenuti all'interno dei tag <li>:

<p>Gli edifici più alti del mondo:</p>
<ol class="numeri_romani">
 <li><a href="http://en.wikipedia.org/wiki/File:Burj_Khalifa.jpg">Burj Khalifa<a> (Dubai, Emirati Arabi, 828m)</li>
 <li><a href="http://en.wikipedia.org/wiki/File:Shanghai_Tower_2013-8-3.JPG">Shanghai Tower<a> (Shanghai, Cina, 623m)</li>
 <li>Makkah Royal Clock Tower Hotel (Mecca, Arabia Saudita, 601m)</li>
 <li>One World Trade Center (New York City, Stati Uniti, 541m)</li>
 <li>Taipei 101 (Taipei, Taiwan, 509m)</li>
 <li>Shanghai World Financial Center (Shanghai, Cina, 492m)</li>
 <li>International Commerce Centre (Hong Kong, Hong Kong, 484m)</li>
 <li>Petronas Tower 1 (Kuala Lumpur, Malesia, 452m)</li>
 <li>Petronas Tower 2 (Kuala Lumpur, Malesia, 452m)</li>
 <li>Zifeng Tower (Nanjing, Cina, 450m)</li>
</ol>

Come si vede, il codice è del tutto analogo a quello dell'elenco precedente: il tipo di numerazione non è definito all'interno del codice HTML, bensì nel foglio di stile collegato.

Ora passiamo ad un primo esempio di elenco puntato (lista non ordinata):

Ecco il codice (notare l'uso del tag <ul>, dal momento che si tratta di una lista non ordinata):

<p>Le province del Lazio sono:</p>
<ul>
 <li>Roma</li>
 <li>Viterbo</li>
 <li>Rieti</li>
 <li>Frosinone</li>
 <li>Latina</li>
</ul>

Il prossimo esempio è praticamente identico, tranne per il fatto che ciascun elemento della lista è introdotto da un quadratino invece che da un punto (questa differenza è definita nel foglio di stile, non nel codice HTML):

Ribadiamo ancora una volta che i punti elenco delle liste non ordinate e i caratteri utilizzati per la numerazione delle liste ordinate (numeri arabi, numeri romani, lettere dell'alfabeto, ecc.) sono definiti attraverso i fogli di stile (CSS).