html52
Corso html 5, seconda lezione.
Roberto Abutzu su uiciechi.it, 2013-01.

Apriamo il file: index.html con il blocco note, come abbiamo visto nella prima parte. In 
alternativa, selezionare index.html, premere tasto applicazioni, scegliere modifica e premere invio.

Si apre la pagina vuota nel blocco note. All'inizio del file ci mettiamo queste due righe che 
inserisco qui sotto:

!doctype html!-- html 5 --

html lang="it"

Creiamo un po' di righe vuote e andiamo alla fine del file e ci scriviamo:

/html

Salviamo le modifiche e analizziamo queste righe, utilizzandole per spiegare le nozioni principali.

!doctype html!-- html 5 --

html lang="it"

La prima riga è formata dalla doctype e da un commento.

Questa è la doctype e deve essere inserita sempre all'inizio del documento html.

!doctype html

La Doctype, indica ai browser di che tipo di documento si tratta. Con l'html 5, la stringa per il 
DocType è molto ridotta di quelle usate per le versioni precedenti dell'html.

Subito a fianco troviamo questo commento:

!-- html 5 --

Più avanti spiegherò i commenti, per ora sappiate che sono tag che servono al programmatore e che 
vengono ignorate dai browser.

Nella riga sotto troviamo:

html lang="it"

Questa è una tag di apertura, e indica che inseriremo da questo punto del codice html. Questa tag è 
un po' più lunga perché contiene al suo interno un attributo e il suo valore, come vedremo in 
seguito.

E' l'attributo della lingua dei contenuti della pagina, come avrete sicuramente già intuito.

La singola tag sarebbe:

html.

Ho appena detto che è una tag di apertura, quindi, la dobbiamo chiudere. Siccome siamo ad inizio 
pagina, la tag di chiusura sarà a fine documento html. Andiamo in fondo alla pagina premendo 
control più fine e scriviamo:
/html

Come avrete sicuramente notato, praticamente è quasi identica, solo che alla chiusura inseriamo una 
barra dopo il segno di minore.

Spieghiamo come si compone la tag. Innanzitutto la tag indica sempre un elemento html. La tag viene 
inserita sempre tra il maggiore e il minore. Le tag si aprono, e poi si chiudono riscrivendo la 
stessa tag di apertura, con una barra dopo il minore.

Facciamo degli esempi, ma consiglio di leggere per carattere, per apprendere meglio la composizione 
di ogni tag.

Paragrafo:

ptesto del paragrafo/p

Notate che alla fine, prima della lettera p c'è una barra. Quella barra indica la chiusura della 
tag paragrafo. quindi, leggendo riga per riga, avremo:

p

testo paragrafo

/p

Consiglio di disporre sempre le tag in questo modo, soprattutto inizialmente, perché vi rendete 
conto meglio di come si compongono gli elementi di una pagina.

Ecco di seguito altri esempi, quindi, leggeteli sempre per carattere:

h1

livello intestazione 1

/h1

aquesto è un link/a

lielemento di elenco/li

titletitolo della pagina/title

Vedremo successivamente cosa sono queste Tag e come si usano. Ora è importante imparare come 
vengono scritte.

Tag all'inizio tra maggiore e minore, stessa tag alla fine con una barra dopo il minore. Attenzione 
ad essere precisi perché la mancanza di un minore o maggiore, non chiude la tag generando errori.
Quando noi apriamo una Tag, il browser cerca dove la chiudiamo. Se non lo facciamo o sbagliamo a 
chiuderla, quello che viene dopo, può essere considerato appartenente alla tag stessa, o non 
visualizzare correttamente la tag successiva.

Una descrizione grossolana solo per spiegarmi meglio.
In alcuni casi specifici, ne sono pochi, abbiamo le Tag auto chiudenti dove la tag termina con: " /.

Se stiamo leggendo carattere per carattere, abbiamo letto:

virgolette, spazio, barra, maggiore.

Un esempio di questi tag auto chiudenti sono i tag meta che vedremo all'interno della tag head.

Analizziamo ora la seconda riga:

html lang="it"

In questo tag, apriamo la tag html. Potete notare, che non viene chiusa immediatamente con il 
maggiore. Troviamo uno spazio e poi: lang="it".

Lang, è un attributo e indica il tipo di lingua con il quale è stato scritto il documento.

It, indica il valore dell'attributo che è l'italiano.

All'interno delle tag, possiamo quindi trovare degli attributi che aggiungono informazioni alla Tag 
e per ogni attributo, sarà indicato il proprio valore.

Anche se in questo momento vi potrà sembrare un discorso astruso, vi renderete conto più avanti, 
quando il discorso sarà più chiaro. Tenete solo presente questo: Tag-Attributo-Valore. Torniamo al 
documento e alle tag.

Tag commento:

Nella prima riga, troviamo:

!-- html 5 --

Questa tag è composta da Un minore che apre una tag, un punto esclamativo, due trattini, spazio, 
una frase, spazio, due trattini, maggiore.

Questo è un commento e per noi non vedenti è importantissimo e di enorme aiuto. Il commento non ha 
bisogno di essere chiuso da un'altra tag. Ogni volta che vogliamo, possiamo inserire un commento 
mettendoci la frase tra i trattini, che poi ci aiuterà a capire, anche a distanza di tempo, cosa 
abbiamo inserito e magari anche il perché.

Il commento non viene visualizzato nella pagina, ma viene letto solo quando il documento è visibile 
in modalità codice, quindi, quando lo apriamo con il blocco note come visto in precedenza. In 
questo caso, tale commento mi serve per ricordarmi che ho scritto questo documento in html 5 e mi 
servirà successivamente. Poi ne aggiungeremo altri di commenti. Per ora, sappiate che servono solo 
al programmatore, come se fossero dei segnalibri o delle note per identificare le parti della 
pagina con lo stesso nome inserito nei commenti.

Vi rimando alla prossima parte per continuare a imparare i primi elementi di una pagina html.

lezione successiva

lezione precedente

torna all'indice

torna alla home del corso

Per ulteriori spiegazioni, scrivere a:

roberto@evyweb.itroberto@evyweb.it