Il linguaggio HTML5

HTML è l'acronimo di Hyper Text Markup Language. Un file html è un documento di testo, contenente parole chiave, che forniscono le caratteristiche del loro contenuto al browser che le deve visualizzare (dimensione carattere, colore carattere, strutture tabelle, ecc.). L'estensione dei file scritti in html può essere : .html oppure .htm.

Il linguaggio HTML è stato ratificato e definito dal W3C (World Wide Web Consortium, www.w3c.org). Questo è l'organismo che definisce gli standard di questo linguaggio a livello mondiale.

Le parole chiave vengono racchiuse tra parentesi angolari < … > e si chiamano tag. Nella maggior parte dei casi c'è un tag di apertura start-tag ed uno di chiusura end-tag. Sono uguali ma end-tag ha una slash prima della parola chiave, esempio : <div> ……. </div>

Quando c'è solo lo start-tag si può scrivere, come richiesto da Xhtml, la slash alla fine del tag, esempio : <br> oppure <br /> (vanno bene entrambi).

All'interno dello start-tag, posso inserire degli attributi :

<p color=”red”> … testo del paragrafo … </p>

il testo del paragrafo viene scritto di colore rosso.

Il linguaggio non è case sensitive, ma per ottenere la validazione, bisogna scrivere i tag in minuscolo.

La struttura di una pagina web è contraddistinta da tante parti contenute all'interno dei marcatori e questi contenitori sono detti elementi. Quindi le pagine web sono formate da tanti contenitori anche annidati l'uno dentro l'altro.

<!DOCTYPE html>

<html>

<head>

<title>esempio</title>

<head>

<body>

<h1>ESEMPIO</h1>

<p>Questa è un paragrafo</p>

</body>

</html>

La struttura ad albero della pagina ha come rami i tag contenitori e le estremità sono i testi, le immagini, etc.

schema struttura albero

l'albero assomiglia al modo con cui il browser memorizza la pagina DOM (Document Object Model). Gli elementi si dividono in :

Block (elementi blocco) : sono elementi contenitore di cui posso specificare le dimensioni, ogni blocco al termine provoca l'andata a capo (<div>, <p>, <section> <table> e altri.

Inline (elementi in linea) : elementi che non vanno a capo e possono essere integrati nel testo (link, immagini, <span>, <strong>, ecc.).

Liste : liste ordinate (numeri, lettere, ecc.) e non ordinate (punti, quadratini, cerchietti, ecc.).

mediante l'istruzione display:valore; di CSS3 è possibile modificare le caratteristiche degli elementi in base alle nostre esigenze. I possibili valori sono :

block : l'elemento , anche se non è un contenitore blocco, lo diventa e può ricevere una dimensione, margin, padding, position e altre caratteristiche dei box che vedremo più avanti.
Inline : l'elemento assume le caratteristiche inline, quindi non va a capo e non può ricevere una dimensione o altri attributi dei box.
Inline-block : l'elemento può assumere alcune caratteristiche dei blocchi (larghezza, altezza, margin, padding, ecc.), ma come gli elementi inline non va a capo.
None : permetta a CSS3 di non mostrare l'elemento, come se non esistesse.

Per esempio un elenco, per natura sono inseriti in verticale, per scriverli in orizzontali, cioè non andare a capo si potrebbe scrivere :

file html5 :

</ul>

file CSS3 :

ul#menu li

{

display:inline;

}

visualizzerò

voce1 voce2 voce3 voce4 voce5

mentre se non avessi modificato il codice html5 mediante CSS3 avrei visualizzato

voce1

voce2

voce3

voce4

voce5

Bibliografia

INFORMATICA PER L'AZIENDA (ed. blu) casa ed. HOEPLI autori P. Camagni e R. Nikolassy