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.
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.
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.
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.