LOGIN
Una pagina web è composta da tanti e diversi elementi che restituiscono i siti che ogni giorno consultiamo navigando in Internet. Quando si decide di crearne una è importante avere ben chiaro quali sono gli elementi essenziali e come funzionano. Spesso si sente parlare di codice HTML, cioè il linguaggio di markup che descrive la modalità di impaginazione o visualizzazione grafica di tutti i contenuti della pagina web: dal testo fino a quelli multimediali, come foto e video. C’è poi il DOM, acronimo di Document Object Model, che invece è lo standard ufficiale del World Wide Web Consortium (W3C) con cui i documenti HTML, XHTML e XML vengono rappresentati. Conoscere HTML e DOM è il primo passo da compiere per avvicinarsi allo sviluppo di un sito web. Ecco cosa sono e quali sono le differenze.
Lato server e lato client: cosa sono
Prima di entrare nel vivo di HTML e DOM, per comprenderne le differenze è necessario conoscere la differenza tra lato server e lato client dello scripting di una pagina web. Con lato server si intende l’utilizzo di script su un server web, che alla richiesta di ogni client al sito web producono una risposta personalizzata. Lo scripting lato server comprende numerosi linguaggi di programmazione, come PHP e Python. Con lato client, invece, si intende l’invio di uno scheletro HMTL vuoto o molto leggero da parte del web server al client.
In sintesi, un sistema con scripting lato server genera un codice HTML completo direttamente nel web server, mentre da lato client si avrà un codice HTML parziale che verrà poi completato dal client.
Questo scheletro HTML che ha dei richiami ad alcuni file JavaScript verrà poi riempito dalla Java Virtual Machine del browser, mostrando una pagina web completa. Per farlo, viene modificato il DOM della pagina e vengono aggiunti tutti gli elementi che sono previsti nell’HTML, come testi, immagini, meta tag e altro. Il client svolge quindi il lavoro di creazione della pagina web.
Codice HTML, cos’è e a cosa serve
L’HyperText Markup Language, o HTML, è un linguaggio di markup che nasce per la formattazione e impaginazione dei documenti ipertestuali nel web. Fin dalla nascita del World Wide Web (WWW), l’HTML ha ricoperto un ruolo fondamentale per lo sviluppo delle pagine web, venendo poi affiancato negli anni dal CSS e da linguaggi complessi come lo Javascript.
Al contrario del Java, l’HTML non è un vero e proprio linguaggio di programmazione, quindi impararlo è meno complicato e non richiede una logica da programmatori.
Per vedere come è fatto l’HTML è sufficiente aprire una comune pagina web in un browser, fare clic con il tasto destro del mouse e selezionare la voce “Visualizza sorgente pagina”. Si aprirà una schermata che permette di visualizzare il sorgente HTML della pagina. Questo codice è sempre visibile perché costituisce il “lato client” di un’applicazione web.
Cos’è il DOM e a cosa serve
Il Document Object Model, o DOM, è invece un’API di programmazione per documenti HTML e XML, che definisce la struttura logica dei documenti e il modo in cui è accessibile e può venire manipolato. Utilizzando il DOM i programmatori possono creare documenti, navigare nella struttura, aggiungere o rimuovere elementi e contenuti. Il DOM quindi è una rappresentazione orientata agli oggetti della pagina web, che può essere modificata con un linguaggio di scripting, come ad esempio JavaScript. Per questo motivo, il DOM è lo standard che è stato scelto dal consorzio del web W3C per la rappresentazione dei documenti HTML.
HTML e DOM: le differenze
Arriviamo così alle differenze tra HTML e DOM, che a volte potrebbero rivelarsi minime. Se prendiamo ad esempio un classico sito WordPress, che viene generato lato server, le differenze tra codice HTML e DOM saranno minime e dipendono da eventuali richiami a file JavaScript presenti nella pagina web. Quando invece ci troviamo davanti a un sito web sviluppato lato client, le differenze tra HTML e DOM saranno decisamente marcate, proprio perché la struttura DOM verrà successivamente riempita dal browser con l’HTML mancante. Proprio per la sua natura di struttura gerarchica della pagina web, il DOM è uno scheletro HTML in grado di correggere eventuali errori nel codice scritto, come ad esempio la mancanza di tag.
Questo fa sì che il DOM è un HTML sempre valido, un modello che può essere modificato da Javascript e che include anche elementi nascosti.
Per vedere la differenza, sarà sufficiente aprire una pagina web nel proprio browser e fare “Visualizza sorgente pagina”, usando il clic destro del mouse oppure la combinazione di tasti “CTRL+U”. Questa funzione permette di visualizzare solo il codice grezzo HTML, quindi se ci sono dei contenuti JavaScript non verranno visualizzati. Per poter vedere gli altri elementi, occorre visualizzare il DOM, facendo clic col pulsante destro nel browser aperto e selezionando la voce Ispeziona. Usando questa funzione, sarà possibile vedere tutti gli elementi della pagina web.
