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.
(Magari diamo un'occhiata al codice di questa pagina per vedere qualcosa di deprecated).
Ad esempio, per costruire un elenco si può distribuire testo su piu` righe esprimendo il layout del testo (cioe` scrivendo testo su tre righe andando esplicitamente a capo ogni volta)
--- primo pezzetto;
--- secondo pezzetto
--- terzo pezzetto
oppure si puo` usare un elemento lista <ul>, in cui ogni pezzetto e` elencato come sottoelemento <li>
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
Con la seconda soluzione si e` reso esplicito l'outline del documento:
"abbiamo espresso un elenco di elementi con la struttura semantica elenco prevista dal linguaggio (x)html."
In altre parole,
- nella parte precedente (nel riquadro verde) l'elenco era dato "implicitamente" forzando la visualizzazione del testo su piu` righe.
- Qui sopra, invece, l'elemento strutturale <ul> dice esplicitamente che il suo contenuto ha, nel documento, la funzione di una lista, costruita e presentata come un elenco di alinee.
Un'applicazione che dovesse presentare il documento (ad esempio il browser) potrebbe 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 visualizzazione su monitor, seguirebbe certe modalita`;
- Se l'applicazione fosse dedicata alla 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 per la lettura di un elenco;
- Se l'applicazione stesse cercando dati da immagazzinare in un suo database, saprebbe come individuare le alinee (e saprebbe che ci sono delle alinee da individuare).
Invece, l'elenco nel riquadro verde non suggerirebbe nessun ruolo all'applicazione, che quindi potrebbe solo presentarlo in modo generico.
Un'elencazione fatta con i <br /> non permetterebbe di capire che si sta trattando di alinee in una lista e non semploci andate a capo ...
Il layout si puo` dare comunque ...
Il layout puo` essere manipolato dall'autore del documento web, attraverso gli strumenti appositi, cioe` definendo le regole di visualizzazione cui l'applicazione che riceve il documento (il browser per noi) dovrebbe attenersi:
questo si fa usando 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).
E la presentazione puo` essere variata, variando le regole di visualizzazione (css) applicate ai vari elementi
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
- primo pezzetto;
- secondo pezzetto;
- terzo pezzetto;
- esercizio: come far apparire il testo allineato all'icona?
discorso analogo per <b> e <i>
si tratta di tag destinati a convogliare aspetti di layout nel documento.
Erano concepibili quando HTML cercava di includee sia aspetti presentazionali che strutturali.
In XHTML pero`, vogliamo solo gli aspetti strutturali e quindi questi tag non trovano cittadinanza.
Si dice "deprecated" ...
(questi elementi vengono riconosciuti e presentati comunque, ma in una modaita` "quirks", cioe` un meccanismo di valutazione di riserva, gestito dal browser (se e` gestito) per mantenere la funzionalita` di documenti di una certa eta`).
- <b>testo in grassetto</b> = testo in grassetto
- <i>testo in italico</i> = testo in grassetto
- questi elementi vengono interpretati solo cosi`: grassetto e italico.
<strong> e <em> assolvono alla relativa funzione strutturale e sono 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
- questi elementi, invece, servono a dare una semantica particolare al contenuto testuale che marcano. E, mentre la loro interpretazione di default e` ancora grassetto e itaico, la loro presentzione puo` essere modificata dall'autore del documento web, mediante css: le regole css possono quindi istruire il browser per presentare diversamente il contenuto testuale fortemente evidenziato, o solo enfatizzato, in modi scelti dall'autore (ad esempio in rosso l'uno, e in blu l'altro, con font diverse, dimensioni diverse, etc...
- a titolo di esempio, qui sotto gli stili di presentazione dei due elementi sono ridefiniti inline (ma le regole inline possono ovviamente essere definite negli altri due modi che conosciamo ...)
- <strong>testo strong, stile modificato</strong> reso come
testo
strong con stile modificato
(vedi il codice di questa pagina ...)
- <em>testo emphasized, stile modificato</em> reso come testo emphasized con stile modificato
(vedi il codice di questa pagina ...)