html53
Corso html 5, terza lezione..

Roberto Abutzu su uiciechi.it, 2013-02.

Terza parte: Prime nozioni: Tag e prima pagina, continuazione.

`**********`

Prime nozioni: Tag e prima pagina, continuazione.

Nota bene, al fine di avere anche la lettura dei segni grafici, come minore, maggiore, eccetera, 
segni che servono a comporre gli elementi html, meglio se mettiamo la punteggiatura su tutto.

La tag head e la tag body.

Un documento Html lo dividiamo in due settori ben distinti: quello che viene visto a video 
dall'utente, e quello che invece non viene visualizzato ma che serve per far funzionare il sito e 
che serve ai motori di ricerca per consentire l'indicizzazione del sito. Per dirlo con parole pi 
semplici, nella tag head, vengono riportate le informazioni che servono al browser per visualizzare 
la pagina e tutte le informazioni per i motori di ricerca.

Nella tag body, vengono inseriti tutti gli elementi della pagina html che verranno visualizzati dal 
browser.

Riapriamo il documento: index.html e posizioniamoci sotto la tag della lingua, in una riga nuova. 
Scriviamo: head

Diamo invio pi volte per creare delle righe vuote. Scriviamo /head e premiamo invio. Scriviamo 
ancora una tag: body.

Diamo invio pi volte per creare delle righe vuote. Scriviamo /body.

Se analizziamo quello che abbiamo scritto, ci rendiamo conto che abbiamo aperto e chiuso la tag 
Head, poi abbiamo aperto e chiuso la tag Body.

Tra l'apertura e la chiusura di ogni singola Tag, abbiamo creato delle righe vuote dove inseriremo 
i contenuti della pagina. Da notare che quando si scrive codice html e si inseriscono delle righe 
vuote, tali righe non hanno nessun valore e il browser le ignora.

Quindi, ora abbiamo:

!doctype html!-- html 5 --

html lang="it"

head

Alcune righe vuote.

/head

body

Alcune righe vuote.

/body

/html

La tag Head e i suoi contenuti.

Qu vedremo come si inseriscono quelle tag che servono al buon funzionamento del sito e ai motori 
di ricerca, ma che sono nascoste a chi lo visita.

Copiamo e inseriamo dentro alla tag head, dove abbiamo lasciato le righe vuote, queste righe:

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. " /

title

Sito di prova in html 5

/title

Queste righe devono essere all'interno della tag Head, quindi, nelle righe vuote tra head e /head.

Ecco una breve descrizione dei meta tag inseriti:

I meta tag, sono divisi in nome="valore", quindi: minore, nome meta, uguale, virgolette, valore, 
virgolette, spazio, barra, maggiore. Nota che il meta tag  auto chiudente, come spiegato in 
precedenza.

meta charset="windows-1252" /

Questo meta, indica la codifica dei caratteri con il quale  stato scritto il sito.

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

Questo meta, indica l'autore del sito o il Cms usato.

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

Questo meta, d una descrizione accurata del sito e viene consigliato di scriverci dentro frasi con 
le parole che volete vengano raccolte dai motori di ricerca. Attenzione a non fare i furbi, 
inserendo termini non conformi ai contenuti del sito, perch i motori di ricerca se ne accorgono ed 
escludono il sito dalle ricerche.

Di meta tag ne esistono molti, ma per il momento fermiamoci qu. Gli altri li vedremo in seguito. 
Inseriremo successivamente altri elementi, dando le spiegazioni del loro significato.

title

Sito di prova in html 5

/title

La tag Title, d il nome alla pagina web. Non  visualizzata nella pagina stessa, ma viene 
riportata nella barra del titolo. Questo titolo deve essere sempre confacente con l'etichetta del 
link che la apre.

Spieghiamo ora gli Attributi e i loro Valori. L'attributo  una caratteristica della Tag o comunque 
aggiunge informazioni alla tag stessa. Il valore  la misura che ha l'attributo. Non  immediato 
comprendere questi significati, ma facciamo esempi banali.

Per esempio, abbiamo un paragrafo, che  la tag. Il font del carattere  l'attributo. Il tipo di 
carattere, Arial,  il valore dell'attributo. Quindi, avremo: paragrafo-font-arial. Che sarebbe: 
Tag-attributo-valore.

Altro esempio, volendo una intestazione rossa, l'intestazione  la Tag. Il colore  l'attributo. 
Rosso  il valore del colore, quindi, dell'attributo.

Spesso ci si confonde tra attributo e il suo valore, quindi, seguiamo questo ragionamento per 
capire e fissare definitivamente il concetto:

1. Faccio una intestazione.

2. Decido che la voglio colorata, e inserisco l'attributo colore.

3. Decido che il colore sar il rosso e lo indico all'attributo dandogli il valore rosso.

Nella tag head, vengono inseriti ulteriori elementi che vedremo in seguito, man mano che 
approfondiremo il discorso. Per il momento vi accenno solo ad alcune tipologie di questi elementi, 
tra quelli pi utilizzati.

Nella head, possiamo inserire i collegamenti, che in pratica sono dei link, ai fogli di stile Css 
che daranno la formattazione al file html. Inoltre  possibile inserire i famosi Java script. 
Questi elementi sono scritti in Java, un linguaggio di programazione vero e proprio, che permette 
di aggiungere ulteriori funzionalit alla pagina web del nostro sito. Questi elementi pi o meno 
complessi e ricchi di funzioni, di solito, li possiamo trovare in internet gratuitamente.

Ecco alcuni esempi, utilizzando il mio sito che  raggiungibile a questo indirizzo: 
http://www.disabilivisivisardegna.it

I pulsanti per l'ingrandimento, aggiungi la pagina ai preferiti, la data e l'ora e, nelle province, 
la tabella del meteo, sono tutti script che troviamo su internet facendo una semplice ricerca con 
il nostro motore di ricerca preferito. Non  necessario conoscere la programmazione Java, quindi, 
come ho fatto io che non conosco questo linguaggio di programmazione, potete usare quelli gi 
pronti e disponibili. Sono molti i siti che ne offrono, ma ne trovate tantissimi sicuramente su: 
http://www.html.it

Si tratta del grande sito di html che consiglio vivamente di visitare. In esso, per chi fosse 
interessato a costruire pagine html, troviamo una miniera inesauribile di elementi e istruzioni 
molto utili. Quando troviamo uno script che ci interessa, di solito  sufficiente copiarlo e 
inserirlo nella head. Ovviamente, seguite sempre le istruzioni  che vengono fornite sulla pagina, 
prima o dopo lo script.

Gli script in circolazione sono migliaia, ma in questo scritto fornir solo quelli fondamentali. La 
cosa importante  sapere come si inseriscono nel documento html, cosa che impareremo piano piano. 
Poi, ognuno di voi inserir nel proprio sito  tutti quelli che gli interessano. Attenzione, e 
vedremo anche questo, certificate sempre le pagine nel validatore w3c ad ogni script che inserite, 
perch, anche html 5  soggetto alla validazione ed essendoci in giro script un p datati e non pi 
validi, bisogna verificarli, prima di pubblicare una pagina nel sito.

Nella head poi  possibile inserire ulteriori tag meta che danno le indicazioni necessarie ai 
motori di ricerca.

Come vi ho gi accennato all'inizio, alcune spiegazioni sono volutamente molto prolisse, ed ho 
deciso cos solo per evitare di trovarsi ad andare avanti e non capire qualche concetto 
fondamentale che non vi farebbe capire quello che viene spiegato pi avanti.

Nella prossima parte, parleremo del tag body e della struttura della pagina. Contemporaneamente 
mander anche le prime indicazioni sui file Css. Tutte le spiegazioni, inviate da me gradualmente, 
presuppongono da parte vostra che non ne facciate solo una raccolta, ma cominciate seriamente ad 
affrontare il discorso, studiando piano piano tutto quello che vi invier, man mano che lo avrete.

Soprattutto in seguito alla differenza tra il codice html e quello dei css, bisogna andarci cauti, 
perch il codice si scrive in maniera diversa e non vorrei generare confusione. Comunque, prima 
inizieremo a dare un minimo di struttura alla home page del  sito, poi penseremo a formattarlo e 
colorarlo con i Css.

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

`***********`

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

