# distinzione tra outline e layout di una pagina

- L'outline della pagina consiste nella struttura che l'uso dei vari elementi conferisce al contenuto della pagina.
- il layout della pagina consiste nel modo in cui i vari elementi (e quindi il loro contenuto) vengono visualizzati.
- NB: <b> e <i> sono deprecati e non dovrebbero essere usati. Usare invece e <strong> e e <em>, rispettivamente. E vedi il codice di questa pagina.

Ad esempio, per costruire un elenco si può distribuire testo su più righe esprimendo il layout del testo (cioè scrivendo testo su tre righe andando esplicitamente a capo ogni volta)
primo pezzetto;
secondo pezzetto
terzo pezzetto

oppure, per fare invece le cose bene, si può usare un elemento lista <ul>, in cui ogni pezzetto è elencato come sottoelemento <li>

- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;

Con la seconda soluzione si è reso esplicito l'outline del documento: "nel documento c'è un elemento che esprime la struttura di questa parte del documento".

L'elemento strutturale <ul> dice esplicitamente che il suo contenuto ha, nel documento, la funzione di una lista, un elenco di alinee.

Un'applicazione che legge il documento puo' conoscere la funzione di quel brano di documento proprio attraverso la "marcatura" di quel brano e comportarsi di conseguenza.

- Se l'applicazione fosse dedicata alla sua visualizzazione su monitor, seguirebbe certe modalita';
- Se l'applicazione fosse dedicata alla sua visualizzazione del documento su cellulare, avendo saputo che tipo di struttura deve visualizzare potrebbe applicare le sue tecniche appropriate;
- Se l'applicazione fosse dedicata alla lettura vocale del documento potrebbe applicare le sue tecniche appropriate;
- Se l'applicazione stesse cercando dati da immagazzinare in un suo database, saprebbe come individuare le alinee (e che ci sono delle alinee da individuare.

Una elencazione fatta con i <br /> non permetterebbe di capire che si sta trattando di alinee in una lista e non semplici andate a capo ...

# Il layout si puo' dare comunque ...

Il layout puo' essere manipolato dall'autore, attraverso gli strumenti appositi, cioe' definendo le regole di visualizzazione cui l'applicazione che riceve il documento (il browser per noi) dovrebbe attenersi: CSS.

- Quando l'autore del documento dice: "qui voglio una lista" dice che dovra' esserci del contenuto distribuito in forma di lista.
- Se l'autore dice anche "ma io, inoltre, voglio una lista in cui le alinee non sono demarcate da un 'bullet' ..." allora sta accoppiando alla sua intenzione di comporre del testo secondo una struttura (outline), quella di dare una veste grafica particolare a quel testo (layout); a questa seconda intenzione si risponde con strumenti di controllo del layout (css).

E la presentazione puo' essere variata, variando le regole di visualizzazione (css) applicate ai vari elementi, ad esempio

- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;

o

- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;

## discorso analogo per <b> e <i>

si tratta di tag destinati a convogliare aspetti di layout nel documento e come tali in via di scomparsa (cioe' non in XHTML);

- <b>testo in grassetto</b> = testo in grassetto
- <i>testo in italico</i> = testo in grassetto

<strong> e <em> assolvono alla relativa funzione strutturale e son o quelli da usare. Sono per default interpretati dai browser di solito con <b> e <i>

- <strong>testo strong</strong> = testo strong
- <em>testo emphasized</em> = testo emphasized

ma mentre l'outline dei loro contenuti rimane il medesimo (testo fortemente evidenziato e testo evidenziato, il layout puo' essere predisposto coscientememte attraverso lo strumento apposito (css)

- <strong>(small-caps, piu' grande, oblique)</strong> = testo strong con stile modificato
- <em>(bold, un po' piu' grande, small-caps</em> = testo emphasized con stile modificato

(anche <b> e <i> possono subire il medesimo trattamento ma sarebbe un'aggiunta di incoerenza ...)