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: