Webdesign 101 » Dynamisk HTML » Introduktion

Introduktion til dynamisk HTML

Dynamisk HTML er det fænomen, at et eller flere HTML-elementer på en webside kan ændres vilkårligt som følge af en hændelse, hvadenten det nu er en hændelse, fremkaldt af brugeren, eller det er noget, websmeden sørger for igennem en eller anden form for tidsstyring.

Det, der ændres på, typisk ved hjælp af JavaScript, er HTML-elementernes egenskaber.

Ethvert HTML-element er født med en række egenskaber. Det er de egenskaber, der tegner elementet, medmindre vi bestemmer noget andet.

Du skal ikke have arbejdet ret længe med CSS - Cascading Stylesheets - før du er fortrolig med, hvorledes du giver f.eks. et HTML-element, som f.eks. nedenstående H1-overskrift, den form, størrelse og farve, du ønsker:

Øvelsesoverskrift

Det, der er karakteristisk for dynamisk HTML er, at vi vilkårligt kan ændre på disse egenskaber:

(Sæt tilbage).

Og er netop disse egenskaber, der gør det muligt at skabe dynamiske effekter på en webside. Et lille trick, det er temmelig let at lave med dynamisk HTML, er f.eks. det, du ser i næste afsnit, hvis du klikker på ordene "Vis Note".

3 komponenter

World Wide Web Consortium (W3C) offentliggjorde i 1998 sin første anbefaling til en standardiseret dokumentobjektmodel (Document Object Model - DOM), en beskrivelse af sammenhængen mellem websidens elementer og deres egenskaber. De nyere browseres DOM ligger i hovedsagen ganske tæt op af W3C's anbefaling. Jeg kalder sådanne browsere W3C- eller DOM-kompatible browsere.

DHTML er ikke nogen standard (Vis note), men er den betegnelse, vi anvender om websider, der udnytter de moderne browseres indbyggede muligheder. Hvad vi kan lave med DHTML er helt afhængigt af, hvorledes browserne tolker HTML 4, JavaScript og ikke mindst stylesheet-standarderne CSS-1 og CSS-2. Med moderne browsere mener jeg Netscape 6 og 7, Microsoft Internet Explorer 5, 5.5 og 6, Mozilla 1, Opera 7 og de mange andre mindre kendte browsere, der findes til alle operativsystemer, og som er programmeret i tiden siden 1998.

Hvorfor DHTML?

Den afgørende fordel ved DHTML er, at du med denne teknik kan lave fabelagtige effekter med meget ringe båndbredde. DHTML kan bruges til animationer, spil, webapplikationer, navigationssystemer, interaktive websider og meget mere. Selvom meget af dette kan også gøres ved hjælp af Java Applets eller Flash Movies, er det ved brug af DHTML ikke nødvendigt at have nogen plugin, og DHTML-effekter fungerer fuldstændigt sømløst integreret i HTML-siden.

De underliggende teknologier, HTML, JavaScript og CSS, er alle standardiserede. Men der er stor forskel på, i hvilket omfang forskellige browsere understøtter disse standarder. Det kan gøre det en lidt indviklet affære at lave dynamisk HTML, der med sikkerhed fungerer i alle moderne browsere.

For at gøre en allerede for lang snak lidt kortere - dette er ikke et kursus i DHTML, men mere nogle tips til, hvordan du kan lave dine egne DHTML-scripts - introducerer jeg i denne sektion nogle principper for, hvordan du kan bære dig ad.

Senest opdateret: 14. februar 2003.

I denne sektion:

Intro til dynamisk HTML
DHTML modulbibliotek ...
Dynamiske menuer ...
DHTML menu halvfabrikata ...
Clip-attributten ...
IE-specifikke filtre ...

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.