HTML.itHTML.it


 Titoli, paragrafi, blocchi di testo e contenitori


Nulla ci vieta di scrivere direttamente all’interno del tag body, come già abbiamo visto negli esempi precedenti, senza utilizzare nessun tag.

A dire la verità è però più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo. La nostra pagina risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere la formattazione che desideriamo.

Come abbiamo detto dall’inzio, i tag sono infatti dei marcatori che ci permettono di mantenere ordine nella pagina e ottenere il layout che desideriamo.

I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:

Nome tag

Visualizzazione codice

Descrizione

<h1>titolo 1 </h1>

<h2>titolo 2 </h2>

<h3>titolo 3 </h3>

<h4>titolo 4 </h4>

<h5>titolo 5 </h5>

<h6>titolo 6 </h6>

titolo 1

titolo 2

titolo 3

titolo 4

titolo 5
titolo 6

"H" sta per "heading", cioè titolo: le grandezze previste sono sei. Dall’<h1>, che è il più importante, si va via via degradando fino all’ <h6>.


Il tag <hx> (sia esso h1 o h6) risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé. Si tratta dunque di un elemento di blocco.



<p>paragrafo </p>


Esempio:

<p>paragrafo 1</p>

<p>paragrafo 2</p>


paragrafo 1

paragrafo 2

Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura.

<div>Blocco di testo</div>


Esempio:

<div>blocco 1</div>

<div>blocco 2</div>

blocco 1
blocco 2

Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

<span>contenitore</span>


Esempio:

<span>contenitore 1</span>

<span>contenitore 2</span>

<span>contenitore 3</span>




contenitore 1 contenitore 2 contenitore 3

Lo span è un contenitore generico che può essere annidato (ad esempio) all’interno dei DIV.

Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

Avrete modo di utilizzare lo <SPAN> soprattutto quando incomincerete ad usare i fogli di stile.



Le differenze tra <P>, <DIV> e <SPAN> sono quindi che:

  • <P> lascia spazio prima e dopo la propria chiusura

  • <DIV> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo

  • <SPAN> -essendo un elemento inline - non va a capo

Un esempio dovrebbe chiarire il tutto.

Per quel che riguarda il tag heading (<h1>, …, </h6>) è da notare che la grandezza del carattere varia a seconda delle impostazioni che l’utente ha sul proprio computer.

Con Internet Explorer, ad esempio, basta andare in: Visualizza > Carattere

Per vedere il titolo crescere o decrescere.

Allineare il testo

Tutti i "tag-contenitori" che abbiamo appena visto (e molti altri tag di quelli che vedremo) permettono di allineare il testo utilizzando semplicemente l’attributo align.

Se avete seguito finora la presente guida, avrete anche indovinato che l’attributo "align" è disapprovato dal W3C, dal momento che per allineare il testo bisognerebbe invece utilizzare i fogli di stile.

In ogni caso, vediamo come potremmo ad esempio allineare il testo di un paragrafo:

Allineamento

Sintassi

Visualizzazione codice HTML

Testo allineato a sinistra

<p align="left">testo</p>

<p align="left">Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

Testo allineato a destra

<p align="right">testo</p>

<p align="right">Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

Testo giustificato

<p align="justify">testo</p>

<p align="justify">Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>



Andare a capo

Per andare a capo molti webmaster utilizzando l’apertura arbitraria di paragrafi che non contengono nulla e che vengono lasciati aperti. Ad esempio:

<p>

<p>

<p>

Si tratta in buona sostanza di un errore, visto che per andare a capo esiste il tag <br> ("break", cioè "interruzione").

Per andare a capo è quindi sufficiente scrivere un <br>. Per saltare una riga ne occorrono due:

<br><br>

Un altro valido tag per dividere la pagina in parti è il tag <hr> ("horizontal rule"), che serve per tracciare una linea orizzontale. Ecco il tag in azione:


Questo tag ha anche alcuni attributi (deprecati, perché la formattazione andrebbe fatta con i CSS):

L’attributo "noshade" evita di sfumare la linea, "size" indica l’altezza in pixel, "width" è la larghezza in pixel o in percentuale, "align" l’allineamento. Con Internet Explorer si riesce persino a impostare il colore:

<hr noshade size="5" width="50%" align="center" color="red">

Risultato:


    Torna a inizio pagina