html55
Corso html 5, quinta lezione.
Roberto Abutzu suuiciechi.it, 2013-03.

Quinta parte: Intestazioni e Paragrafi.

Intestazioni.

Come dice la parola stessa, le intestazioni hanno lo scopo di assegnare titoli agli elementi di una 
pagina HTML. Gli elementi che vengono preceduti da una intestazione non sono altri che le varie 
parti in cui suddividiamo la pagina per meglio strutturarla, quindi, iniziamo a prender coscienza 
che le intestazioni non si riferiscono solo al testo della pagina. Un esempio concreto è il menu 
principale che, spesso, viene anticipato da una intestazione che, quasi sempre, ha come etichetta: 
"Menu di navigazione".

utilizzando la lettera "H", per chi non lo sapesse, possiamo scorrere la pagina HTML, saltando su 
tutte le intestazioni programmate sulla pagina. Ovviamente, la lettera H è stata scelta per 
indicare Header, intestazione in Inglese.

Le intestazioni di una pagina, possono essere programmate a più livelli e questi vengono assegnati 
proprio scrivendo il linguaggio HTML. Ma perché ci sono i livelli? E' presto detto. Le intestazioni 
lavorano per priorità, quindi, devono rispettare la struttura della pagina.

Per Esempio, se una sezione contiene altre due sezioni della pagina, avremo una intestazione di 
primo livello e due intestazioni di secondo livello. Inoltre, se una o più sezioni di secondo 
livello contengono delle sottosezioni, avremo anche sezioni di terzo livello, di quarto livello, 
eccetera. Il senso delle intestazioni deve rispettare per ogni sezione l'ordine gerarchico degli 
oggetti di ogni sezione della pagina.

Le intestazioni vanno dal livello 1, massima importanza, al livello 6, importanza più bassa della 
gerarchia. Insomma, più una intestazione ha  il numero grande più il livello è basso, esempio il 
livello 1, è quella di importanza massima nella pagina. Di solito, il livello 1 viene utilizzato 
per il nome del sito o della pagina.

Ma a video, come si differenziano i vari livelli?

E' tutto abbastanza semplice. Man mano che il livello aumenta, la grandezza del carattere viene 
ridotta. Per esempio:

- Livello 1 = 20 px.
- Livello 2 = 15 px.
- Livello 3 = 12 px.
- livello 4 = 10 px.
- Livello 5 = 9 px.
- Livello 6 = 8 px.

Px è la misura in pixel del carattere. Questa è una misura che non si può usare a causa 
dell'accessibilità. Infatti, se si vogliono rispettare i dettami del W3C per l'accessibilità le 
dimensioni dei caratteri devono essere espresse in EM una misura relativa. Basta cercare sul sito 
del W3C ed avremo le indicazioni precise di come si possono formattare le dimensioni dei caratteri 
di una pagina rispettando l'accessibilità.

Queste misure che sono state inserite, sono solo degli esempi messi a caso, quindi, con i fogli di 
stile Css ogni programmatore personalizza le  intestazioni come meglio crede. Quando non vengono 
personalizzate, ci pensano i browser con le loro impostazioni predefinite. Quindi, riassumendo, le 
dimensioni dei caratteri, in una pagina HTML, possono dare più o meno importanza agli elementi.

Possiamo fare un paragone semplicissimo. Immaginiamo il nostro sito, come un libro o un romanzo. 
Avremo il titolo scritto grande. I capitoli dell'indice leggermente più piccoli, il testo vero e 
proprio ancora più piccolo. Visivamente parlando, questo fa comprendere la disposizione delle 
pagine del libro.

Spiegato questo, vediamo come si scrivono le tag delle intestazioni:

``h1`` Intestazione di livello 1 ``/h1``

``h2`` Intestazione di livello 2 ``/h2``

``h3`` Intestazione di livello 3 ``h3``

E Così via fino al livello 6.

Osserviamo la tag, comunque molto semplice, scorrendo per carattere.

``h1`` intestazione ``/h1``

Quindi, i caratteri saranno:

- Per la tag di apertura: il simbolo di minore, h con il numero del livello e il simbolo  di 
maggiore.
- Per la tag di chiusura: il simbolo di minore, una barra (shift più 7), h con il numero del 
livello e il simbolo  di maggiore.
- Il testo che metteremo tra le due tag, sarà impostato come grandezza relativa al livello della 
intestazione.

Con html 5, abbiamo già visto nella lezione precedente, è stata introdotta la tag hgroup. Questa 
tag, può essere utilizzata per raggruppare più livelli di intestazione. Per esempio:

``hgroup``

``h1`` titolo del sito ``/h1``

``h2`` sottotitolo del sito ``/h2``

``h3`` informazioni specifiche sul sito ``/h3``

``/hgroup``

Come avete sicuramente notato, la tag hgroup, come tutte le tag, si apre con il nome della tag 
racchiuso tra minore e maggiore, e si chiude con la tag di chiusura che si differenzia da quella di 
apertura solo per avere davanti al nome il segno di barra (shift più 7).

Spesso, navigando nella pagina con il comando che ci porta sulle intestazioni, il nostro screen 
reader ci vocalizza: "Link, livello di intestazione 1".

Qui è doveroso introdurre un concetto del linguaggio HTML, ma che vedremo nello specifico più 
avanti, le tag, possono essere inserite l'una all'interno dell'altra. E' ovvio che non tutte sono 
compatibili, ma molte lo consentono e tante volte risulta comodo usare strutture nidificate di tag.

Se durante la navigazione facciamo attenzione al titolo del sito, quello di intestazione 1, la 
maggior parte delle volte, è un link che porta alla Home page del sito stesso. Generalmente si usa 
così solo perché i vedenti hanno l'abitudine di cliccare sul titolo per tornare alla home page. Vi 
scrivo di seguito un esempio di link con tag nidificati, ma per il momento non fateci molta 
attenzione. Vedremo successivamente i link in particolare.
Osservate, sempre scorrendo per carattere, come si inseriscono 3 tag, aprendole e chiudendole. 
Utilizzerò le nuove specifiche di html 5 per mettere un livello di intestazione a un link di invio 
posta.

Ecco il codice completo:

``h2`` ``address`` ``a href="roberto@evyweb.it"`` 
scrivimi ``/a`` ``/address`` ``/h2``

Apparentemente sembra complicato, ma ora vediamo una descrizione per capire meglio come si compone 
questa nidificazione:

1. All'inizio e alla fine, apriamo e chiudiamo la tag h2, dando quindi una intestazione a quello 
che inseriamo dentro.

2. All'interno della tag del punto 1, apriamo la tag address e la chiudiamo. Notate che  la tag di 
chiusura di address la collochiamo prima della tag di chiusura dell'intestazione h2.

3. In mezzo alla tag address le tag per il link della mia mail.

Nota bene: address, è una nuova tag di html 5 per identificare o specificare ai browser che si 
tratta di un indirizzo di posta.

La pagina mostrerà al visitatore un link di posta in una intestazione e la sintesi dello 
screen-reader vocalizzerà: Livello di intestazione 2, link di invio posta, scrivimi.

E' stata introdotta questa possibilità di nidificazione delle tag, perché di seguito inizieremo a 
scoprire molte delle tag nidificate tra loro. Vi consiglio di non utilizzare le intestazioni per 
evidenziare qualche porzione di testo che si trova in mezzo ad altro testo. Non sarebbe un errore 
di codice, ma comunque brutto da vedere.

Se si deve o si vuole dare importanza a delle righe specifiche, usiamo il grassetto, il maiuscolo, 
cambiamogli colore, ma non utilizziamo le intestazioni, perché le intestazioni sono i titoli degli 
elementi di una pagina e devono fare solo quello.

Paragrafo.

Abbiamo già visto le tag dei paragrafi, ma rinfreschiamoci la memoria: ``p`` porzione di testo 
``/p``

Gli elementi che compongono questa tag sono:

- tag di apertura: simbolo di minore, lettera p minuscola, simbolo di maggiore.
- tag di chiusura: simbolo di minore, barra (shift più 7), lettera p minuscola, simbolo di maggiore.

Con questa tag, noi diciamo al browser che il testo in essa contenuto è un paragrafo di 
testo,quello che sarà il contenuto scritto della pagina. La tag del paragrafo, possiamo usarla 
sempre, anche per poche parole.

Ecco un esempio utilizzando quello che abbiamo visto fin qui:

``p`` Se volete comunicare con me, usate il link sottostante: ``p`` ``br /``
``h2`` ``address`` ``a href="roberto@evyweb.it"`` 
scrivimi ``/a`` ``/address`` ``/h2``

Vi può sembrare strano che a fine paragrafo è comparsa un'altra tag non indicata:
``br /``

Questa tag, non è altro che una delle tag con unico simbolo, quindi, non ha tag di apertura e tag 
di chiusura, ma è auto-chiudente. E' la tag di  forzatura del ritorno a capo nella pagina. Basta 
inserirla, anche in mezzo al testo, e quello che si trova dopo di essa, nella pagina mostrata a 
schermo nel browser, viene riportato nella riga successiva. Serve soprattutto quando per ragioni 
estetiche forziamo il testo a capo per visualizzare il testo in modo proporzionato sulla pagina.

Inserendone due in questo modo: ``br /`` ``br /``, si crea una riga vuota e poi inizia il testo che 
si trova dopo di esse.

Questa tag non bisogna inserirla necessariamente ogni qualvolta si deve ritornare a capo, 
soprattutto quando termina un paragrafo, a meno che non si voglia creare tra il paragrafo e quello 
che segue una riga vuota. Infatti, il paragrafo, le intestazioni e anche altri elementi, lo fanno 
in automatico. Man mano che andiamo avanti con le spiegazioni, quando incontreremo questi tag 
particolari, vedremo come funzionano e dove inserirli.

Questa tag in particolare serve quando dobbiamo forzare un ritorno a capo o creare righe vuote tra 
elementi della pagina.

adesso un po' di pratica e riapriamo la nostra index.html.

Se avete scritto nella index.html tutto quello indicato sopra in modo giusto, dovreste avere quello 
che vi riporto qui di seguito. Nel caso qualcosa non risulti corretto, selezionate e copiate in una 
nuova index tutte le stringhe. Il mio consiglio spassionato è quello di controllare prima le 
differenze tra quello che avete scritto e quello che trovate di seguito, se non altro, per rendervi 
conto delle differenze. Sicuramente capirete dove avete sbagliato e imparate anche a correggere.

La nostra index:

``!doctype html`` ``!-- html 5 --``

``html lang="it"``

``head``

``meta charset="windows-1252" /``

``meta name="author" content="Roberto " /``

``meta name="description" content="questo sito serve per far apprendere il linguaggio html ai 
disabili visivi e non solo. " /``

``title`` Sito di prova in html 5 ``/title``

``/head``

``body``

``header``

``hgroup``

``h1`` Sito html 5 ``/h1``
``h2`` corso html per non vedenti  e non solo``/h2``

``h3`` Il sito scritto tutto in codice html 5 ``/h3``

``/hgroup``

``nav``

``h1`` Menu di navigazione ``/h1``

``p`` Qui inseriremo il nostro menu principale ``/p``

``/nav``

``/header``

``div id="content"`` ``!-- inizio contenuti --``

``h2`` Html 5 presentazione del corso ``/h2``

``p`` qui inseriremo i contenuti. ``/p``

``/div`` ``!-- chiuso contenuti --``

``footer``

``p`` piè di pagina ``/p``

``small`` Copyright ``/small``

``/footer``

``/body``

``/html``

Utilizzando proprio la nostra index, vi do degli esercizi da fare:

Copiate il file index.html dentro una nuova cartella e aprite il file con il blocco note. Basta 
selezionare il file, premer il tasto applicazioni e dare invio sul comando modifica del menu di 
contesto che si apre.

Quando si fanno queste cose, meglio creare una cartella nuova, per evitare di dover rifare tutto il 
file index.html in caso di errori. In ogni caso, potete sempre recuperare il file dalle stringhe 
sopra, facendo un copia ed incolla.

In questa copia di index.html, aprendola con il blocco note, provate voi ad inserire Intestazioni, 
paragrafi, poi altre intestazioni, magari raggruppate nella tag hgroup, poi dei paragrafi più 
lunghi, tutto come meglio credete, e poi verificare i risultati ottenuti, andando a leggere la 
pagina dando invio sul file index.html, dopo aver chiuso il file in modifica.

In pratica, aprite il file in modifica, eseguite una modifica con blocco note, salvate, chiudete e 
riaprite con Internet Explorer per verificare il risultato. Vi consiglio di eseguire una modifica 
alla volta e verificarne il risultato di volta in volta.

Vi ricordo le tag di apertura e chiusura da utilizzare.

``h1`` intestazione 1 ``/h1``

``h2`` altra intestazione ``/h2``

E così via, almeno fino all'intestazione h4.

Fate più intestazioni e inseritele dentro alla tag: ``hgroup`` intestazioni ``/hgroup``

``p`` tra queste tag scrivete tutto il testo che volete. ``/p``

All'interno della tag Paragrafo, ogni tanto ritornate a capo con la tag: ``br /``

Vi rimando alla prossima parte, Nella quale inizieremo a conoscere le liste, elenchi puntati e 
numerati e inizieremo a capire in modo particolareggiato di cosa è composto un link.

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_