Questo è un linguaggio che permette di attribuire maggiore dinamicità alle pagine web: la “D” iniziale sta per Dynamic HTML a sottolineare che DHTML non è solo un linguaggio puramente descrittivo (così come HTML) ma la visione di un web maggiormente “interattivo”.
Con DHTML è possibile modificare ogni elemento che compone le nostre pagine web, introducendo effetti speciali, animazioni e la gestione di ogni singola immagine.
Durante la vostra “navigazione” in Rete vi sarete certamente imbattuti in menù animati (spesso menù a cascata che si aprono non appena si sposta il puntatore del mouse sopra di essi): spesso è proprio DHTML che ne consente la visualizzazione.
DHTML si avvale di un insieme di tecnologie. Per raggiungere lo scopo di attribuire maggiore dinamicità alle pagine web, questo linguaggio ricorre infatti all’utilizzo di tre componenti tecnici: i linguaggi di script come JavaScript (ma anche il VBScript di Microsoft), i fogli di stile (CSS, Cascading Style Sheets) - già illustrati nella quarta lezione del nostro corso - ed infine, ovviamente, HTML.
Il punto debole di DHTML è, però, la compatibilità tra browser. Sia Netscape che Microsoft hanno da sempre cercato di imporre la loro visione: talvolta può accadere, quindi, che una pagina dinamica DHTML sia visualizzata correttamente con Internet Explorer ma non con Netscape (o viceversa).
E’ quindi necessario assicurarsi di produrre pagine DHTML che siano perfettamente compatibili con tutti i browser Internet (che siano, cioè, cross-browser): qualora non si provvedesse ad effettuare gli opportuni controlli, si rischierebbe di perdere numerosi visitatori infastiditi dall’impossibilità di visualizzare correttamente il vostro sito. Qualora non si riuscisse a rendere cross-browser la propria pagina DHTML, si può pensare di creare due differenti versioni del sito Internet: una, per esempio, destinata agli utilizzatori di Internet Explorer, l’altra agli utenti di Netscape.
Va tenuto comunque presente che il DHTML è supportato solo a partire dalla versione 4 di Internet Explorer e Netscape: se prevedete di servirvi di DHTML nelle vostre pagine web, è bene indicare i requisiti minimi per una corretta visualizzazione del sito.
Il DHTML si basa sulla struttura DOM (Document Object Model): si tratta di un modello che considera qualsiasi documento (pagina web) come un oggetto. Ciò significa che ogni documento viene suddiviso in elementi più semplici sui quali è possibile operare secondo le specifiche della programmazione orientata agli oggetti.
Qualunque oggetto che fa parte di una pagina web definito con le classiche tag HTML - per esempio una qualsiasi immagine <IMG> o un link <A> (àncora di collegamento, anchor) - è accessibile da DHTML servendosi proprio della struttura DOM e di un linguaggio di scripting come JavaScript. Il DOM agisce, quindi, da interfaccia tra il documento HTML ed il linguaggio di scripting (i.e. JavaScript): esso interpreta, infatti, ogni elemento costitutivo della pagina web ed offre i metodi per accedervi.
Per modificare un elemento presente nella vostra pagina web, è sufficiente attribuirgli un nome. Ad esempio:
<img src=”pcopen.gif” id=”logopcopen”>
In questo caso abbiamo assegnato all’immagine pcopen.gif, inserita nel codice della pagina web mediante l’apposito tag <IMG>, il nome logopcopen: tale identificativo ci servirà, in seguito, per modificare le proprietà dell’immagine.
In alternativa, è possibile utilizzare anche il modello strutturale: se l’immagine da modificare è la terza che compare nella nostra pagina web, si potrà usare il codice seguente:
document.images[3]
Il codice indica che stiamo facendo riferimento alla terza immagine della “collezione” images, contenuta nell’oggetto document (la pagina web).
DHTML consente di spostare gli elementi costitutivi di una pagina web senza la necessità di dover ricaricare la stessa. A tal proposito, è suggerito l’utilizzo dei tag <DIV> e <SPAN>, caratteristici dei fogli di stile in quanto sono pienamente supportati sia da Internet Explorer che da Netscape.
Utilizzando <DIV> e <SPAN> avrete la possibilità, servendovi di DHTML, di spostare “al volo” qualsiasi blocco che costituisca la vostra pagina (colonne, paragrafi, riquadri di testo,…) senza ricorrere all’impiego di tabelle nidificate.
DHTML permetterà di agire sulle dimensioni e sulla posizione di ciascun blocco <DIV> e <SPAN> offrendovi un metodo più semplice e veloce per creare il layout delle vostre pagine web. L’uso dei fogli di stile consentirà, poi, di intervenire sulla scelta dei caratteri (stile, dimensioni,…), sulla formattazione dei collegamenti ipertestuali, sull’impostazione dei margini e così via.
Un esempio concreto: creare un menù a tendina con DHTML
Cimentiamoci subito su di un esempio pratico: proviamo a creare un menù “a tendina” per la nostra pagina web: non appena il puntatore del mouse verrà posizionato su una voce del menù, dovranno esserne immediatamente visualizzate le relative voci.
Prima di tutto creiamo il codice base della nostra pagina
HTML:
<HTML>
<HEAD>
<TITLE>PC Open - Un menù a tendina con DHTML</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<CENTER><IMG SRC="logo_PCOPEN.gif">
<BR><BR>
</CENTER>
</BODY>
</HTML>
Definiamo, quindi, tra le tag <HEAD> e </HEAD> (intestazione della pagina HTML), servendoci di un foglio di stile, quali debbano essere le caratteristiche dei collegamenti ipertestuali (tag <A>, anchor) presenti nella pagina web:
<STYLE>
A:Hover {color:red; text-decoration:none; font-weight:bold }
A {color:black; text-decoration:none; font-size: 10pt; font-family: Tahoma,Verdana,Arial }
</STYLE>
Il codice JavaScript evidenziato nell’immagine a lato, va inserito sempre nell’intestazione della pagina e consente di stabilire, in primo luogo, quale browser Internet si sta utilizzando. Come già anticipato in precedenza, Internet Explorer e Netscape utilizzano diverse sintassi per interagire con i layer ossia i livelli definiti con DHTML (i blocchi delimitati con <DIV> e <SPAN>). Lo script permette di individuare la versione del browser in uso ed usare document.layers[layerid] nel caso di Netscape, document.all[layerid] nel caso di Internet Explorer.

Nel corpo della pagina HTML (<BODY></BODY>), abbiamo inserito una serie di livelli <DIV>. A ciascun blocco <DIV> è stato assegnato un nome identificativo. Si è poi fatto uso delle funzioni apri_tendina e chiudi_tendina, opportunamente invocate dagli eventi Onmouseover e Onmouseout per visualizzare o nascondere, all’occorrenza, le tendine dei vari menù dinamici, a seconda della posizione del puntatore del mouse.
Il codice della pagina HTML è consultabile facendo riferimento al file 10_dhtml.html contenuto nel CD ROM.
titolo
**

Per approfondire ulteriormente, potete fare riferimento ai siti web seguenti:
http://www.dynamicdrive.com/ (in inglese)
http://www.risorse.net/dhtml/archivio.asp (in italiano)
http://www.html.it/dhtml/ (in italiano)
Ciascuno dei siti web indicati contiene una vastissima raccolta di esempi DHTML da utilizzare liberamente all’interno delle vostre pagine web. Per ciascun esempio in DHTML è possibile visualizzarne un’anteprima online.
|