Formattazione

I tag di formattazione permettono di dar forma alla pagina web facendo visualizzare il contenuto nella posizione voluta all'interno della stessa. Abbiamo già visto i tags <center> e <br> che agiscono rispettivamente: il primo posizionando il contenuto all'interno dei tag apertura/chiusura al centro del contesto orizzontalmente; il secondo agendo come carriage return, cioè posiziona il cursore all'inizio di nuova linea e quindi non possiede tag di chiusura. Passiamo al tag che identifica un paragrafo e cioè <p> con il suo corrispettivo di chiusura </p>. Come è facilmente intuibile il contenuto all'interno dei due tags viene visualizzato come un paragrafo, e quindi staccato di una riga dal resto del contenuto. Altro tag di formattazione è <pre> che deriva dalla parola inglese preformed e cioè preformato, il corrispettivo tag di chiusura è ovviamente </pre>. Se avete provato a costruire qualche pagina avrete senz'altro notato che anche se premiamo invio (return) e scriviamo su una nuova riga, il testo viene visualizzato di seguito fino a coprire l'intera ampiezza dello schermo, e solo allora inizia una nuova riga. Con il tag che stiamo esaminando è possibile formattare il testo così come lo digitiamo sulla tastiera compresi tabulazioni e "nuova riga". Ultimo tag di formattazione è <div>, elemento usato come contenitore di altri elementi HTML e che li separa come un unico blocco dal resto del contenuto, allineandolo a destra, al centro o a sinistra in dipendenza dell'attributo align=, che accetta i valori "right", "center", "left". Il corrispettivo tag di chiusura è </div>.

Tabelle

Gli elementi di formattazione che abbiamo visto consentono un certo controllo del layout della pagina, ma non sono sufficientemente potenti per pagine elaborate. Per queste ultime è consigliabile l'uso di tabelle a cui è stata riservata una sezione a se stante. In ogni caso è necessario conoscere i tag di formattazione in quanto utili anche all'interno e in combinazione con le tabelle stesse. Per andare alla sezione sulle tabelle clicca quì.

Intestazione

L'HTML definisce sei livelli di intestazione (heading). Il tag è composto da una "H" seguita dal numero identificativo del livello di intestazione (1-6), es. <H1>...<H6> e i corrispettivi di chiusura </H1>...</H6>. Il risultato è il seguente:

Questo è il primo livello di intestazione

Questo è il secondo livello di intestazione

Questo è il terzo livello di intestazione

Questo è il quarto livello di intestazione

Questo è il quinto livello di intestazione

Questo è il sesto livello di intestazione

Sin dalla versione HTML 3.2 è prevista la possibilità di specificare l'attributo di allineamento "align", per posizionare l'intestazione a sinistra (left), centro (center), o a destra (right).

Dimensione, Colore, Aspetto dei Caratteri

Dopo aver esaminato le intestazioni, è opportuno introdurre il tag che ci permette di definire le caratteristiche del testo visualizzato. Il tag in questione è <font>, per mezzo del quale, attraverso l'impostazione dei suoi attributi, definiamo la dimensione, il colore e l'aspetto del singolo carattere, come dell'intero documento.
La dimensione del carattere è fissata con l'attributo size= che accetta valori, in ordine di dimensioni crescenti, da uno fino a sette. E' possibile definire la dimensione relativa, rispetto alla dimensione di default o contestuale, impostando una o più unità in aumento o diminuzione, specificato rispettivamente dal segno di addizione o sottrazione.
Es. <font size=+1> aumenta di una unità la dimensione del carattere, <font size=-1> invece la diminuisce di una unità.
Il colore di default del testo è nero, ma con l'attributo color= possimo assegnargli il colore che più ci aggrada. Così, se volessimo assegnargli il colore blu, imposteremo il tag in questi termini <font color=blue>, con questo risultato. Un altro modo di impostare il colore è quello di indicarne il suo valore esadecimale preceduto dal simbolo #, così: <font color="#0000ff">.
L'aspetto viene impostato con l'attributo face=, il valore può essere "arial" piuttosto che "verdana" o "bimini", ma lo stile specificato deve essere installato nel computer del visitatore per essere visto.
Es.<font face="verdana">, o <font face="bimini">.
Per concludere con i caratteri, lo stile grassetto viene impostato con i tags <b></b>, quello italico con <i></i>, telescrivente con <tt></tt>, mentre per sottolineare il testo <u></u>.

Barre spaziatrici

Le barre spaziatrici possono essere definite elementi grafici. Un esempio di barra spaziatrice è la linea rossa soprastante che è stata definita esattamente così:
<HR ALIGN="left" color=red width="50%">. I suoi attributi sono "width=", "color=", "align=", "size=". Per mezzo di questi attributi possono essere specificati rispettivamente la larghezza (valore espresso in percentuale od in pixel), il colore, l'allineamento (right, center, left) e lo spessore della barra. I valori predefiniti sono: 100% per l'attributo "width"; grigio per "color"; left per "align"; 1 per lo spessore, "size".

Blocco intestazione "indirizzo"

L'ultimo blocco di intestazione esaminato è quello definito "Indirizzo" (address). Il tag <address> è l'elemento HTML, di solito in cima o al fondo della pagina, in cui si specificano informazioni quali l'indirizzo o la firma dell'autore. La visualizzazione è in carattere italico e può essere tabulato.
esempio: