HTML/Organizzare il testo

Titoli

I titoli sono molto utili nelle pagine per dare maggior visibilità a un elemento che, solitamente, racchiude ciò che sarà possibile leggere nei paragrafi che seguono. Vi sono 6 livelli di titoli, il primo è quello più grande e man mano che si va verso il sesto il titolo risulterà più piccolo.

I titoli sono automaticamente visualizzati dall'interprete in grassetto e lasciano prima e dopo di sé, un margine considerevole (in modo che risulti più leggibile). La sintassi per definire un titolo è la seguente: <h1>Inseriamo il titolo del paragrafo</h1>.
Al posto del numero uno ovviamente si possono inserire i numeri: 2,3,4,5,6 a seconda della grandezza che si desidera visualizzare.

Paragrafi

Vi sono essenzialmente tre tag che svolgono la funzione di suddivisione del testo: <p>, <div> e <span>. Le differenze tra questi tag sono minime ma abbastanza determinati, nel contesto della pagina, per ciò che verrà visualizzato dal browser.

Tag	Significato
`<p>`	Elemento block, di default ha dei margini superiori e inferiori che lo separano dal resto dei contenuti.
`<div>`	Elemento block. Di default il testo non ha margini.
`<span>`	Elemento in-line, serve a raggruppare il testo concettualmente

<p> sta per paragraph ed è infatti l'elemento che rappresenta la nostra concezione di paragrafo con dei margini inferiori e superiori.
<div> sta per division e definisce un blocco di testo al suo interno. In realtà il tag <div> è, prima che un separatore di testo, un contenitore di elementi HTML. Il suo utilizzo è spesso associato ai fogli di stile.
<span> fa da contenitore al testo presente al suo interno. La sua utilità è evidente quando si usano i fogli di stile.

Ecco un esempio:

 <body>
  <p>Questo è un paragrafo</p><br>
  <div>A cui seguono due blocchi di testo, questo è il primo.</div><br>
  <div>Questo è il secondo</div><br>
  <span>Questo è un contenitore, niente di più</span>
 </body>

Approfondimento

I tag <p>, <div> e <span> supportano sia l'attributo class sia id, essenziali per l'interazione con i fogli di stile.

Linee divisorie

Per impaginare meglio un testo si potrebbe rendere necessaria una linea che divida ad esempio un articolo dall'altro. Il tag che svolge questa funzione è <hr>. I suoi principali attributi sono:

width che ne indica la larghezza e richiede un valore in pixel o in percentuale,
size che ne regola le dimensioni ed il cui valore viene espresso in pixel (default 2 pixel),
align che ne permette l'allineamento rispettivamente a destra, al centro o a sinistra.

Ecco un esempio:

  <body>
    <h1>Wikibooks</h1>
    <hr width="100%" size="3">ciao</hr>
    <div>Questa è una guida a contenuto aperto</div>
  </body>

Nota

Il tag <hr> non prevede un tag di chiusura

Andare a capo

Il tag che svolge la funzione per andare a capo è <br>. Alcuni webmaster gli preferiscono dei tag <p> senza il tag di chiusura perché sono più veloci da scrivere però così facendo lasciano il paragrafo aperto incorrendo ad un errore sintattico.

Esempio di codice sintatticamente sbagliato:

  <body>
    <h1>Wikibooks</h1>
    <p>
    <p>
    <p>
    <div>Questa è una guida a contenuto aperto</div>
  </body>

Ecco la versione corretta:

  <body>
    <h1>Wikibooks</h1>
    <br>
    <br>
    <br>
    <div>Questa è una guida a contenuto aperto</div>
  </body>

Nota

Il tag <br> non prevede un tag di chiusura

Testo preformattato

Indica del testo che verrà visualizzato così come è scritto all'interno del documento HTML, rispettando rigorosamente gli spazi. Questo tag è molto usato ad esempio nei forum per rappresentare il sorgente delle applicazioni.
La sua sintassi è la seguente:

   <pre>Inserite del testo con diversi spazi di separazione tra le parole e il browser lo riporterà così come l'avete scritto</pre>

Testo informativo

Come le immagini, anche il testo può avere l'attributo title, che permette di visualizzare un testo informativo posizionando il cursore su di esso (il testo a cui si riferisce il commento sarà sottilineato con una serie di piccoli puntini).
La sua sintassi è la seguente:

   <acronym title="testo informativo, visualizzato solo se vi si posiziona sopra il puntatore">Testo</acronym>

Elenchi

Per definire un elenco o lista nell'HTML abbiamo a disposizione diversi tag che ci permettono di creare tre tipi di elenchi: elenco ordinato, elenco non ordinato e, infine, elenco di definizione.

Elenchi ordinati

Gli elenchi ordinati vengono definiti attraverso il tag <ol> che sta per Ordered List. Gli elementi dell'elenco, devono essere inclusi all'interno dei tag <li></li> ossia List Item. Ogni elemento verrà automaticamente preceduto da un numero.
È utile l'uso dell'attributo start, il quale specifica il numero da cui partirà la numerazione dell'elenco.

Esempio di elenco ordinato:

 <body>
 <ol>
   <li>1° Elemento in ordine numerico</li>
   <li>2° Elemento in ordine numerico</li>
   <li>3° Elemento in ordine numerico</li>
 </ol>
 </body>

Elenchi non ordinati

Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono definiti attraverso il tag <ul> che sta per Unordered List. Gli elementi dell'elenco, devono sempre essere inclusi all'interno dei tag <li></li>.

Esempio di elenco non ordinato:

 <body>
 <ul>
   <li>Elemento uno</li>
   <li>Elemento due</li>
   <li>Elemento tre</li>
 </ul>
 </body>

È possibile anche cambiare l'immagine del pallino attraverso l'attributo type i cui possibili valori sono:

circle: visualizzarà un pallino vuoto dentro (bianco al suo interno).
disc: visualizzerà un pallino pieno (nero al suo interno) è il valore di default.
square: visualizzerà un quadratino pieno (nero al suo interno).

I browser che non supportano questo attributo lo ignoreranno.

Esempio di elenchi con diversi stili:

 <body>
   <ul type="disc">
      <li>Elemento con pallino</li>
      <li>Elemento con pallino 2</li>
   </ul>
   <ul type="circle">
      <li>Elemento con pallino vuoto</li>
      <li>Elemento con pallino vuoto due</li>
    </ul>
    <ul type="square">
      <li>Elemento con quadratino pieno</li>
      <li>Elemento con quadratino pieno 2</li>
    </ul>
 </body>

Elenchi di definizioni

Gli elenchi di definizioni sono degli elenchi un po' particolari che prevedono due parti:

Un elemento di testo
Una spiegazione dell'elemento

Questa caratteristica renderà questo tipo di elenchi utili per piccoli glossari, o anche per la gestione delle FAQ sul proprio sito.

Per poterle usare sono necessari tre tag: <dl>, Definition List; <dt>, Definition Term; e <dd>, Definition Defined. Il primo tag serve per contenere l'elenco ed indicare di che tipo è, in questo caso di definizione. Il secondo tag serve per specificare la parola che verrà spiegata o meglio definita. Il terzo tag serve per contenere la spiegazione che verrà rientrata rispetto alla parola da definire.

Vediamo un esempio che chiarirà meglio le idee:

 <body>
  <dl>
    <dt>Wikibooks</dt>
      <dd>Stiamo sviluppando e distribuendo libri di testo, 
   manuali e altri testi   educativi, tutti gratis e a contenuto aperto.</dd>
    <dt>Wikipedia</dt> 
      <dd>Wikipedia è un'enciclopedia libera</dd>
  </dl>
 </body>

Testo dinamico

Testo lampeggiante

Un modo molto semplice per far apparire e scomparire rapidamente il testo, ottenendo un lampeggiamento, è l'uso del tag <blink>.

Ecco un esempio:

 <body>
   <blink>Testo lampeggiante</blink>
 </body>

Nota

Il tag <blink> non rientra nelle specifiche del W3C, pertanto ve ne sconsigliamo l'uso

Testo scorrevole

Per inserire un testo scorrevole è necessario far uso del tag <marquee> i cui principali attributi sono direction, i cui valori possono essere left e right; height e width, i cui valori possono essere espressi o in pixel o in percentuale e determinano l'area di sfondo su cui si muoverà il testo; loop, il cui valore può essere un numero e determina quante volte dovrà essere visualizzata la scritta (-1 o infinite per far sì che venga mostrata all'infinito).

Ecco un esempio:

 <body>
   <marquee direction="left" width="100%" height="10%" loop="-1">Testo scorrevole</marquee>
 </body>

Il testo si muoverà all'infinito da sinistra a destra.

Nota

Il tag <marquee> è proprietario di Microsoft, non rientra quindi nelle specifiche del W3C, pertanto ve ne sconsigliamo l'uso