Come allineare il testo in HTML
Nel linguaggio HTML l'allineamento del testo può essere ottenuto in diversi modi.
L'attributo Align
Tutti i tag prevedono l'allineamento al centro, a sinistra o a destra tramite l'attributo align. I parametri dell'attributo sono i seguenti:
- Center. È il parametro che consente l'allineamento al centro.
- Right. È il parametro che consente l'allineamento a destra.
- Left. È il parametro che consente l'allineamento a sinista.
L'uso dell'attributo align è molto utile nel tag <p> ( paragrafo ) e nel tag <div> ( divisione ) perché consente di applicare l'allineamento su un intero blocco di testo.
Come centrare un testo
Per centrare il contenuto testuale di un paragrafo <p> scrivo nel seguente modo
<p align=center>Questo paragrafo è al centro della pagina</p>
Il risultato sullo schermo del browser è il seguente:
Questo paragrafo è al centro della pagina
Come allineare a destra un testo
Allo stesso modo posso allineare il testo a destra ( right ) o a sinistra ( left ). Nel seguente esempio allineo a destra ( right ) il testo contenuto in un paragrafo.
<p align=right>Questo è un esempio di paragrafo allineato a destra</p>
Il risultato a video è il seguente:
Questo è un esempio di paragrafo allineato a destra
L'attributo Align si può usare anche sugli altri tag di formattazione
L'attributo Align può essere usato anche negli altri tag di formattazione ( grassetto, corsivo, titolo, ecc. ).
<b align=right>grassetto</b>
<i align=right>corsivo</i>
Ad esempio, per allineare il titolo H1 al centro della pagina posso scrivere nel seguente modo:
<H1 align=center>Il titolo della pagina</H1>
Come allineare una foto al testo
L'attributo Align mi consente anche di allineare un'immagine al testo.
Un esempio pratico
Nel seguente documento è presente il tag di un'immagine e del testo.
<img src="/data/foto.jpg" align=right> Questo è un esempio di allineamento di una foto al testo
Il browser elabora l'attributo align=right sul tag dell'immagine e la allinea a destra rispetto al testo.
Come fare l'allineamento con il CSS
L'allineamento può essere ottenuto anche ricorrendo ai fogli di stile a cascata CSS ( Cascading Style Sheet ).
Un esempio pratico
Per allineare il testo a destra in ogni paragrafo della pagina, apro un foglio di stile e associo al tag <P> la proprietà text-align=right.
<html>
<head>
<style type="text/css">
p { text-align:right }
</style>
</head>
<body>
<p>primo paragrafo</p>
<p>secondo paragrafo</p>
<p>terzo paragrafo</p>
</body>
</html>
Pur non avendo specificato l'attributo align in ogni tag P ( paragrafo ), il foglio di stile CSS impone al browser di allineare il testo a destra.
Il risultato finale sullo schermo è il seguente:
primo paragrafo
secondo paragrafo
terzo paragrafo
In questo modo ho evitato di ripetere per tre volte il codice "align=right" ottenendo comunque lo stesso risultato finale.
