Introduzione ad HTML: i tag

L'HTML è il linguaggio fondamentale del Web. Ogni volta che accediamo a un sito, clicchiamo su un link e in generale visualizziamo una "pagina web", il nostro browser scarica un particolare file di testo scritto in codice HTML, lo interpreta e lo visualizza a video.

L'acronimo HTML sta per HyperText Markup Language, ovvero linguaggio di marcatura per ipertesti, che detto così è piuttosto oscuro, ma questa introduzione serve proprio a chiarire cosa sia effettivamente HTML.

Il linguaggio HTML serve per definire la struttura e in certa parte la formattazione delle informazioni delle pagine web.
Immaginate di avere un documento cartaceo e di volerlo "tradurre" per mostrarlo sul web. Tale documento sarà composto da vari elementi, magari un'intestazione in alto, con data e indicazioni sull'autore, un titolo, diversi paragrafi di testo, se è un documento tecnico probabilmente avrà anche delle liste per punti; potrebbe poi essere suddiviso in più sezioni, ognuna con un suo titolo, e via così. Tutti questi elementi che abbiamo menzionato possono essere organizzati in una struttura gerarchica, o ad albero che dir si voglia, del genere:

• Documento
  • Intestazione
    • Data
    • Autore
  • Corpo
    • Titolo
    • Testo introduttivo
    • Sezione 1
    • Sezione 2
    • .. 
  • Piè di pagina 

l'esempio precedente è piuttosto semplificato, ma rende l'idea di come possa essere organizzata la struttura di un documento, in cui ogni elemento è suddiviso in sottoelementi.

Per poter definire i vari elementi della nostra pagina e quindi la struttura della stessa dobbiamo introdurre il concetto di tag e quindi iniziare finalmente a vedere come "scrivere" effettivamente codice HTML.

I Tag HTML

I tag sono particolari sequenze di caratteri che permettono di definire gli elementi delle pagine HTML. Un elemento si definisce nel seguente modo:

non è molto difficile comprendere il significato dei vari termini che compaiono:

- Alla sinistra del contenuto vediamo una serie di termini racchiusi fra parentesi angolari (< e >, che sono anche i segni di minore e maggiore), questo è il tag di apertura.

- nometag è il nome dell'elemento che stiamo andando a definire, le specifiche HTML prevedono una lista di tag piuttosto ampia per poter definire tutta una serie di elementi diversi.
Alcuni esempi sono h1 per definire un titolo, a per definire un link, img per mostrare un'immagine, e tanti altri.

- Un attributo serve a definire una caratteristica particolare dell'elemento. Quasi sempre un attributo ha anche un valore che va indicato tra virgolette dopo il segno di uguale ( = ).

E' possibile indicare anche più di un attributo per lo stesso tag, così com'è possibile non indicarne alcuno. Un esempio di attributo è width, ovvero larghezza, che si può utilizzare con il tag imgper far sì che l'immagine venga ridimensionata alla larghezza che indichiamo noi.

- Dopo il tag di apertura segue il contenuto dell'elemento, che può essere composta da del semplice testo o da altri elementi.

- Infine va messo il tag di chiusura, che è composto semplicemente dal nometag preceduto dalla barra (/) e racchiuso in parentesi angolari.

Piccola nota: le ultime specifiche HTML5 sono piuttosto permissive per quanto riguarda la sintassi, inoltre i vari browser sono abbastanza "intelligenti" da comprendere il codice anche se ci sono alcuni piccoli errori. Ad esempio, non è strettamente necessario mettere i valori degli attributi tra virgolette ( " ), si possono anche omettere, o usare gli apici ( ' ). Suggerisco comunque di attenersi alla sintassi indicata sopra per una questione di pulizia del codice e leggibilità.

Per dare un esempio concreto creiamo un link, che ricordiamo va definito tramite il tag <a>:

<ahref="http://www.webtips.it"target="_blank">link alla home page di Webtips</a>

il risultato del codice è il seguente:

link alla home page di Webtips

Come vedete il browser interpreta il codice visualizzando a video il contenuto, quindi la nostra scritta "link alla home page di Webtips", rendendola cliccabile e facendo sì che a seguito di un click venga aperta una certa pagina. Notare quindi che tutto ciò che nel codice è tra parentesi angolari, i tag di apertura e chiusura, non vengono mostrati a video, ma servono solo al browser per capire come va interpretato il contenuto.

Analizzando l'esempio riportato vediamo che nel nostro tag <a> abbiamo indicato due attributi: href il cui valore è l'indirizzo della pagina che vogliamo sia aperta quando l'utente clicca sul link, e target che indica al browser di aprire la pagina indicata in una nuova scheda il cui nome (non importante ai fini del nostro esempio) è _blank.

Importante da sapere è che alcuni elementi HTML non prevedono alcun contenuto, in questo caso non è necessario mettere tag di apertura e tag di chiusura, ma si utilizza una sintassi abbreviata:

<nometagattributo="valore"/>

in questo caso si indica il nometag, eventuali attributi, e si mette a destra la barra (/). Questo indica che l'elemento inizia e finisce lì e non ha alcun contenuto.
Il caso più frequente di elementi senza contenuto è quello relativo alle immagini (tag img), che si definiscono in modo simile a:

<imgsrc="http://www.webtips.it/sites/default/files/logolight_3.png"/>

il codice riportato mostra il logo di Webtips.

Per chi ha voglia di provare un po' con mano a scrivere del codice HTML eccovi una base semplicissima da cui partire:

<!DOCTYPE html><html><header><metacharset="utf-8"/><title>Pagina di prova HTML</title></header><body><h1>Pagina di prova HTML</h1><p>
 Questa è una pagina di prova per imparare a scrivere codice HTML, così come indicato
 nell'articolo <ahref="http://www.webtips.it/introduzione-ad-html-i-tag">Introduzione ad HTML: i tag</a>.
 </p><h4>Informazioni sull'autore</h4><p><imgsrc="http://www.webtips.it/sites/default/files/styles/thumbnail/public/pictures/picture-5-1376390210.png"align="left"/>
 Questa pagina è stata realizzata da <em>MED</em> di <strong>Webtips.it</strong></p></body></html>

il risultato è visibile in questa pagina.

Per fare qualche prova voi stessi, aprite Blocco Note sul vostro PC, copiate il codice sopra riportato e incollatelo nel vostro documento, salvate il file come prova.html (l'importante è l'estensione .html mi raccomando). Fatto questo fate doppio click sul file appena creato, verrà aperto dal vostro browser predefinito e vedrete il risultato.

Per il momento lasciate perdere tutto ciò che è all'interno dell'elemento header e limitatevi a modificare il codice compreso fra <body> e </body>, provate a cambiare qualche testo, a usare i tag in altri punti, modificate e ricaricate la pagina per vedere quel che succede.

Concludo con una piccola lista di tag semplici con cui potete provare a fare dei test:

• h1, h2, h3, h4, h5, h6 generano dei titoli, da h1 che è "più importante" a h6 che è quello meno importante. (es. <h1>Titolo</h1>)
• strong serve a dare "forza" a una parola o frase nel testo, di solito il browser visualizza in grassetto il contenuto. (es. <strong>testo grassetto</strong>)
• em evidenzia, in modo simile a strong, una parola o frase, in questo caso di default il browser la mostra in corsivo. (es. <strong>testo enfatizzato</strong>)
• img inserisce un'immagine nella pagina, invito a vedere l'esempio riportato in precedenza nell'articolo
• a definisce un link, anche per questo rivedete l'esempio nell'articolo
• p indica un paragrafo di testo
• br manda "a capo" il testo, è un tag vuoto! (es. <br />)

trovate tutta la lista dei tag e ulteriori spiegazioni su ognuno di essi in questa pagina.

Se avete domande riguardanti l'argomento dell'articolo o richieste di spiegazioni o approfondimenti non esitate a scrivermi nei commenti qui di seguito.

Continua verso il prossimo articolo della serie Introduzione ad HTML:
Struttura di una pagina HTML