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: 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: 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`_
Torna all'indice