Html Head Title e Body

I primi quattro elementi che analizzeremo sono <HTML> <HEAD> <TITLE> <BODY>. Si noti che il linguaggio HTML è case insensitive: quindi <HEAD> è equivalente a <HeAd>.

<HTML>: é il primo tag di struttura presente in ogni documento HTML e specifica che il file é realizzato in linguaggio HTML. Tutto il testo e gli altri comandi Html presenti in un documento dovranno trovarsi all'interno dei tag HTML iniziale e finale.

Il secondo elemento, <HEAD>, specifica che le linee comprese fra il punto iniziale e quello finale del tag sono il prologo della parte rimanente del file e non viene visualizzato sullo schermo WWW.

All'interno della parte <HEAD> del documento possono apparire solo alcuni tag; in particolare il titolo <TITLE> del documento.
In visualizzazione il titolo diventa il titolo della finestra e viene registrato nella history .
La funzione principale del titolo è quella di consentire di rintracciare la pagina, quindi il titolo deve essere pensato con cura.

Ecco un tipico esempio di utilizzo del tag <HEAD>:
<HTML>
<HEAD>
<TITLE>Corso: il linguaggio html - i primi quattro elementi </TITLE>
</HEAD>
.........
</HTML>

L'elemento <BODY>contiene la pagina vera e propria così come dovrà essere visualizzata. All'interno di questo elemento verrà posto il testo della pagina, i collegamenti ad altre pagine, ad immagini o ad altri oggetti utili per realizzare l'ipertesto.
<HTML>
<HEAD>
<TITLE>Corso il linguaggio Html - i primi quattro elementi </TITLE>
</HEAD>
<BODY>
......testo, immagini, link, liste ecc.......
</BODY>
</HTML>
Il tag </BODY> prevede alcuni attributi che di seguito andiamo ad analizzare.

Colore del fondo e del testo

Gli attributi di <body>

<body background= bgcolor= text= link= alink= vlink=>

Gli attributi devono essere aggiunti al marcatore <body>.
Usando gli attributi possiamo definire:
che un'immagine faccia da sfondo al documento - background---immagine
che un colore faccia da sfondo al documento - bgcolor --- colore del fondo
che il testo abbia un colore definito - text --- colore del testo
che il link abbia un colore definito -link --- colore del link visitato
che il link visitato abbia un colore definito -vlink --- colore del link visitato
che il link attivo abbia un colore definito -alink --- colore del link attivo

Il seguente attributo si può utilizzare per far sì che una immagine venga a costituire lo sfondo di una pagina:

background="file-grafico"
(es.: <body background="stucco.gif">)

Nel caso in cui l'immagine fosse più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie come mattonelle su una parete.
Allo sfondo di colore uniforme si è sostituita una immagine.

Ovviamente abbiamo precedentemente provveduto a creare, oppure a prelevare da qualche archivio, l'immagine usata per lo sfondo. Quando si ricorre a simili accorgimenti, si consideri che la leggibilità del testo impaginato può diminuire, specie se i colori dell'immagine non contrastano sufficientemente con quelli usati per i caratteri.

In alternativa all'attributo background, si può usare:

bgcolor="#colore RGB"
(es.: <body bgcolor="#FFFFFF">)

che permette di assegnare un colore allo sfondo. Notate che per indicare il colore occorre utilizzare il sistema RGB in notazione esadecimale. RGB sta per Red, Green, Blue, i tre colori fondamentali e che, come è noto, miscelati opportunamente producono tutti i colori dello spettro. Per motivi strettamente informatici, la miscelazione degli indici RGB avviene in notazione numerica esadecimale (una notazione che ha base 16, e utilizza le dieci cifre della notazione decimale più le lettere fino alla F, ovvero: 0 1 2 3 4 5 6 7 8 9 A B C D E F, dove B, ad esempio, vale 11, e F vale 15).

Sembra complicato, ma vediamo come risolvere il problema nella pratica. Immaginiamo di voler ottenere, per il nostro sfondo, un bianco. Tornando indietro con la memoria ai nostri studi scolastici, ricorderemo che il bianco si ottiene con la somma di tutti i colori dell'iride. Nel nostro caso perciò dovremo assegnare ai nostri 3 indici (red, green, blue) il massimo valore, che nella notazione esadecimale si scrive FF, cioè: <body bgcolor="#FFFFFF"> (FF per il rosso, FF per il verde, FF per il blu). Volendo ottenere il nero, ovvero la sottrazione di tutti i colori, assegneremo ai nostri tre indici il valore più basso (zero, 00 in esadecimale), quindi: <body bgcolor="#000000">. Ancora, sapendo che il giallo è ottenuto con la somma di rosso e verde, scriveremo: <body bgcolor="#FFFF00">. Volendo ottenere, infine, un giallo più pallido, aggiungeremo un po' di blu nella nostra tavolozza elettronica, passando da 00 a 77: <body bgcolor="#FFFF77">.

Vi sembra ancora complicato? Niente paura, per fortuna ci sono due scappatoie. La prima consiste nel ricorso a programmi appositamente realizzati, come Color Manipulation Device, o a programmi di grafica come Paint Shop Pro, Corel Photo-Paint o BME (per Macintosh), grazie ai quali è sufficiente un click del mouse sul colore desiderato per vedersi restituire il suo valore numerico. L'altra scappatoia consiste nel ricorso al nome per esteso del colore, secondo questo elenco:

Nome colore Colore
Aqua (Celestino)  
Black  
Blue  
Fuchsia  
Gray  
Green  
Lime (Verde Chiaro)  
Maroon  
Navy (Blu Mare)  
Olive (Verde oliva)  
Purple  
Red  
Silver (Grigio Chiaro)  
Teal  
White  
Yellow  

Es.: <body bgcolor="yellow">. Quest'ultima soluzione è decisamente la più semplice, ma riduce a 16 il numero di colori che possiamo adottare (contro i 16 milioni della notazione esadecimale).

Per definire i colori del text, del link, del vlink, del alink devo procedere esattamente come per il bgcolor

(es.: <body bgcolor="#FFFFFF" text="#000000"
link="#red" alink="#000000" vlink="#navy" >)