Usare i tag HTML nativi per gestire la visualizzazione del testo all'interno della pagina
Nelle lezioni precedenti abbiamo visto come progettare e realizzare un sito statico e come strutturare pagine modello da utilizzare come elemento standard per conferire una certa omogeneità di layout e di navigazione. Adesso è arrivato il momento di versare il contenuto, cominciando dal testo che costituisce di gran lunga l'elemento più comune di un sito e di conseguenza prevede anche la più grande varietà di tag, ciascuno con funzioni specifiche.
La gestione del testo solleva una questione che avevamo già anticipato all'inizio del corso, vale a dire la differenza tra marcatori strutturali e marcatori stilistici. Di fatti, HTML nasce in origine come linguaggio strutturale. I suoi tag servono a indicare il ruolo che un determinato componente svolge all'interno della pagina e non il modo in cui questo debba essere rappresentato. Spetta al browser decidere in che modo visualizzarlo, basandosi sulle caratteristiche del computer e sulle eventuali preferenze indicate dall'utente. Tuttavia, l'impiego dei soli tag strutturali codificati nelle prime due versioni di HTML produceva pagine esteticamente orribili, del tutto inadatte alle esigenze della nuova forma di editoria che si stava sviluppando sul Web.
Prendiamo l'esempio della marcatore <h#> che identifica un titolo (heading) e al quale si possono associare fino a sei livelli consecutivi così da determinare una struttura gerarchica di titoli e sotto-titoli: <h1></h1> seguito da <h2></h2> eccetera. Benché offra un sistema pratico per strutturare documenti di tipo scientifico, produce una visualizzazione del tutto sproporzionata rispetto al testo normale, identificato dal tag <p>, decisamente brutta a vedersi. Inoltre né <h#> né <p> consentono di variare il tipo di font utilizzato nella pagina e il relativo colore, e ben sappiamo che testi uniformemente neri e tutti Times Roman non facilitano il riconoscimento e la lettura "tipografica" di una pagina editoriale. Anzi, Times Roman è nato per funzionare bene sulla carta, mentre rende male sullo schermo. Esistono invece font concepiti espressamente per il Web che sono ormai riconosciuti da tutti i browser e che facilitano la lettura a video, un esempio in tal senso il Verdana, evoluzione telematica dello storico Helvetica.
Tag e attributi deprecati
L'esigenza di fornire elementi per il controllo della visualizzazione a video del testo ha portato all'inserimento nel linguaggio HTML di marcatori e attributi con funzioni unicamente stilistiche, come ad esempio la coppia di tag <font></font> che determina il tipo, la dimensione e il colore della font attribuita al brano di testo che racchiude. È proprio grazie a questi tag "irregolari" che sono potuti nascere i primi siti editoriali e i grandi portali, ma il loro impiego indiscriminato ha portato a pagine complesse da gestire, alterando la "purezza" originale di HTML. Con la versione 4 di questo linguaggio il W3C (World Wide Web Consortium – http://www.w3c.org) ha cercato di riportare ordine mantenendo compatibilità con i precedenti tag stilistici, ma offrendo un'alternativa attraverso l'impiego di uno strumento aggiuntivo: i fogli di stile in cascata (Cascading Style Sheets).
Purtroppo, come ben sappiamo, i produttori di browser non sempre dedicano la massima priorità all'adeguamento nei confronti degli standard e perciò a tutt'oggi il supporto per i fogli di stile non è completo, tuttavia è già possibile rimpiazzare il tag <font> quasi ovunque e la specifica 4.01 ci aiuta a trovare la giusta transizione per arrivare a tale risultato, identificando attributi e tag deprecati e indicando come e dove sostituirli. Naturalmente non è obbligatorio sposare i fogli di stile e ci sono ancora molti siti in circolazione che impiegano liberamente il tag <font> e molti altri artifici deprecati. Funzionano e continueranno a funzionare anche in futuro, ma limitano moltissimo l'evoluzione verso lo standard XML (Extensible Markup Language) che impone il massimo rigore nella separazione tra informazioni di struttura e informazioni stilistiche.
Di fatto, scoprirete che l'impiego dei fogli di stile offre soluzioni più eleganti e più gestibili rispetto ai corrispettivi tag stilistici del vecchio HTML 3.2, ma bisogna conoscerne le sfumature e sapere come farli convivere al fine di garantire la massima compatibilità con i vari tipi di browser in circolazione.
|