# HTML/Organizzare il testo

HTML
Copertina Tutti i moduli · Sviluppo
* IntroduzioneHTML/Introduzione
* FondamentiHTML/Fondamenti
* IntestazioneHTML/Intestazione
* Formattare il testoHTML/Formattare il testo
* Organizzare il testoHTML/Organizzare il testo
* LinksHTML/Links
* ImmaginiHTML/Immagini
* TabelleHTML/Tabelle
* SfondoHTML/Sfondo
* MultimediaHTML/Multimedia
* ModuliHTML/Moduli
* FramesHTML/Frames
* EntitàHTML/Entità
* Includere altri linguaggiHTML/Includere altri linguaggi
* VerificatoriHTML/Verificatori
* Evoluzione del markupHTML/Evoluzione del markup
* EserciziHTML/Esercizi
Modifica il sommario

## 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:
Approfondimento

## 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:
Nota

## 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:
Ecco la versione corretta:
Nota

## 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:

## 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:

## 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:

### 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:
È 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:

### 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:

## 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:
Nota

### 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:
Il testo si muoverà all'infinito da sinistra a destra.
Nota