Corso di HTML

Formattazione del testo

 

Abbiamo concluso la prima parte introducendo i tag generali per impostare la pagina HTML, rivediamo brevemente i più frequentemente utilizzati:

<html> </html> Indica al browser l'inizio e la fine della pagina html.

<head> </head> Serve da contenitore per altri tags come <TITLE> e <META>.

<title> </title> Imposta il titolo della pagina che verrà visualizzato nella finestra del browser.

<body background=""> Imposta l'immagine di sfondo.

<body bgcolor=""> Imposta il colore di sfondo.

<body text=""> Imposta il colore del testo.

</body> Chiude il "corpo" del documento.

Se utilizziamo solo questi tag nella nostra pagina HTML, ben presto ci accorgiamo che il testo viene disposto in modo alquanto strano: infatti anche se noi nel codice HTML abbiamo inserito dei ritorni a capo, nella pagina interpretata dal browser tutto viene disposto su lunga riga e il testo torna a capo solo quando viene raggiunto il margine della finestra!

Perché questo? Beh, semplicemente perché il browser utilizza un altro linguaggio! Riuscite ad immaginare quale ?

Battute a parte esistono tag che ci permettono di costruire un layout (visualizzazione) abbastanza preciso del testo, permettendoci anche di utilizzare colori, caratteri in grassetto, sottolineato, titoli e paragrafi.

Iniziamo dal titolo: il tag da utilizzare è H seguito da un indice, da 1 a 6, che ci indica la grandezza del testo in ordine crescente; la sintassi è la seguente:

<Hn [align=left | center | right]> Testo da visualizzare </Hn>

Con la barra verticale or ‘|’ si elencano le possibili scelte per un attributo.

Tip! Per ricordarvi il tag del titolo, ricordate che H è l’abbreviativo inglese di Header che significa Intestazione.

(con Tip! Da ora in poi indicherò un suggerimento, mentre con Att! Un avvertimento)

Come detto H1 produce il titolo più grande e solitamente in grassetto, mentre H6 quello più piccolo.

Att! Vi potreste aspettare che il titolo H6, produca un font di dimensioni maggiori di quello di default, ma purtroppo in molti browser non è così e questo rende un po’ strano l’effetto finale che può essere proprio il contrario di quello desiderato!

L’unica opzione che si può vedere dalla specifica è quella di allineamento, che permette appunto di allineare il testo rispettivamente a sinistra, centro e destra (left, center e right).

All’interno di <Hn>.....</Hn> possono essere utilizzati altri tag per la formattazione fisica del testo (colore, grassetto...), ricordando però che oltre al titolo sulla stessa riga non può andare nulla altro; infatti se si inserisce qualcosa, questo andrà inevitabilmente a capo.

Mi sono permesso di utilizzare un termine nuovo: formattazione fisica, e quindi non posso non menzionare il termine complementare: formattazione logica. Cosa sono? Sono semplicemente un modo di ‘descrivere’ la disposizione degli elementi in una pagina. Gli stili logici permettono di controllare la spaziatura, il grassetto, i rientri e i corsivi, mentre gli stili fisici permettono tutto questo e molte altre cose (ai browser compatibili ovviamente).

Con questi ultimi si ha un controllo maggiore su ogni elemento della pagina, mentre con i primi si è sicuri che sono compatibili con tutti i browser. La differenza è semplicemente questa, ma da oggi in poi non preoccupatevene più, perché ormai praticamente tutti i browser supportano i tag fisici.

Altro modo di formattare il testo è quello di suddividerlo in paragrafi con <P>, la specifica è la seguente:

<P [align=left | center | right]> Testo del paragrafo </P>

Qui align indica come al solito l’allineamento del testo del paragrafo, faccio notare che il tag di chiusura non è obbligatorio.

Il testo va subito a capo dopo <P> con un interlinea di una riga e mezza dall’ultimo elemento presente sulla pagina.

Altro modo di portare il testo a capo è tramite il tag di break <BR>, e a differenza di <P> lascia una solo interlinea tra due testi successivi in modo da dare più l’idea di un corpo di testo unico, ma lo vedremo nella prossima puntata.

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet