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
