DHTML: Dynamische webcodering

• Mei 5, 2024

DHTML staat voor Dynamische HYperText Markup Language en kan worden gedefinieerd als de kunst van het dynamisch maken van HTML-webpagina's door HTML te combineren met Javascript en Cascading Style Sheets (CSS). In tegenstelling tot de andere vier HTML-variaties die in de vorige vier artikelen in deze serie zijn onderzocht, is DHTML geen standaard die wordt gedefinieerd door het W3 Consortium. Het is eerder een "marketingterm die door Netscape en Microsoft werd gebruikt om de nieuwe technologieën te beschrijven die browsers van de 4.x-generatie zouden ondersteunen" (W3 Consortium). HTML 4.0 introduceerde eerst twee belangrijke componenten die inherent zijn aan de structuur van DHTML:

• Cascading Style Sheets (CSS)
• Document Object Modellen (DOM)

Uw code dynamisch maken

CSS biedt stijl- en lay-outmodellen, terwijl DOM modellen voor documentinhoud biedt voor HTML-documenten. JavaScript en VBScript voegen de mogelijkheid toe om scriptcode te schrijven om HTML-elementen te besturen. Samen vormen deze drie componenten samen dynamische HTML-pagina's. Een belangrijk afschrikmiddel is browser incompatibiliteit - Netscape en Microsoft zijn het nog steeds niet eens over wat ze in hun browsers moeten implementeren: het schrijven van DHTML-pagina's die goed werken in beide browsers kan dus lastig zijn. Om het zelf te zien, hebt u online toegang tot Microsoft- en Netscape-standaarden:

• MSDN-bibliotheek bij Microsoft
• Dynamische HTML in Netscape Communicator

"DHTML blinkt uit in het creëren van lage-bandbreedte-effecten die de functionaliteit van een webpagina verbeteren. Het kan worden gebruikt om animaties, games, applicaties te maken, nieuwe manieren te bieden om door websites te navigeren en om lay-outs buiten deze wereld te creëren die eenvoudigweg niet is niet mogelijk met alleen HTML. Hoewel veel van de functies van DHTML kunnen worden gedupliceerd met Flash of Java, biedt DHTML een alternatief dat geen plug-ins vereist en naadloos in een webpagina wordt ingesloten. "(Dan Steinman, 1998).

Om de complexiteit van DHTML te begrijpen, is het nuttig om de componenten nader te onderzoeken.

Cascading Style Sheets

CSS zijn geavanceerde codes die webinhoud scheiden van het webontwerp - de stijl, positionering, kleuren, lettertypen, enzovoort. CSSP of CSS Positionering maakt controle op pixelniveau mogelijk over HTML-elementpositionering. De scheiding van de presentatiestijl van webdocumenten van de inhoud met CSS2 (CSS niveau 2) vereenvoudigt het ontwerpen van websites en het onderhoud van de site. "CSS2 ondersteunt mediaspecifieke stylesheets zodat auteurs de presentatie van hun documenten kunnen aanpassen aan visuele browsers, auditieve apparaten, printers, braille-apparaten, draagbare apparaten, enz. Deze specificatie ondersteunt ook inhoudspositie, downloadbare lettertypen, tabelindeling, functies voor internationalisering, automatische tellers en nummering, en enkele eigenschappen met betrekking tot gebruikersinterface "(W3 Consortium). De W3C biedt een uitstekende tutorial om CSS2 te leren, genaamd, CSS2-specificatie.

JavaScript

JavaScript is een speciale scriptbrowser-gebaseerde taal die wordt gebruikt om HTML-elementen te besturen en functionaliteit toe te voegen aan formulieren, frames, vensters, afbeeldingsrollovers, audio-video-besturingselementen en DHTML te manipuleren. Netscape noemde dit scripting-JavaScript voor het eerst, dus bedacht Microsoft de term JScript voor zijn specifieke merk scripting. Het resultaat? Twee versies van JavaScript die irritant incompatibel kunnen zijn. Ga naar Netscape's voor meer informatie over dit probleem JavaScript Central en die van Microsoft JScript bronpagina. Het geheim van de dynamische effecten van JavaScript-inhoud is het gebruik van laagobjecten. Laagobjecten veranderen de tekst wanneer de muis erover schuift; het laat afbeeldingen of tekst over de webpagina bewegen; het laat ook vervolgkeuzemenu's verschijnen. Laagobjecten zijn gerangschikt in div-tags, met definiërende kenmerken zoals kleur, positie en zichtbaarheid.

Ze samenstellen

DHTML wordt meestal toegepast om drie taken te bereiken:

• Positie of blokken inhoud op de pagina plaatsen en ze verplaatsen
• Stijl modificaties die het uiterlijk van de pagina veranderen
• Evenementafhandeling of gebruikersgebeurtenissen relateren aan wijzigingen in positionering of andere stijlaanpassingen

In nieuwere versies van Internet Explorer en Netscape (versie 5, 6 en hoger) wordt de DOM de voorkeurscode voor de meeste DHTML-codering. Eenmaal onder de knie, kan de DOM webontwerpers helpen bij het manipuleren, toevoegen, verwijderen en bewerken van documentcodering gerelateerd aan alle stijlen, attributen (zoals een href) en elementen (zoals html-tags) op de pagina. Dat betekent dat elke tag en elk kenmerk van een html-document toegankelijk is via de DOM. Momenteel worden de documentobjectniveaus 0 en 1 aanbevolen door W3C. Niveau 2 is ook in de maak, maar is nog niet gepromoot als de standaard voor DHTML-codering.

Een handige groep tutorials is beschikbaar via HTML Goodies, genaamd DHTML en Layer Tutorial.

De links in dit artikel bieden inleidingen en instructies om uw reis te beginnen met het beheersen van deze nieuwste ontwikkeling in HTML-codering.Elke snelle zoekactie op Google zal u veel meer informatie onder de aandacht brengen, direct beschikbaar binnen handbereik. Naarmate browserfabrikanten werken aan hun incompatibiliteit en het gebruik van browsers met een hogere versie meer gemeengoed wordt, wordt DHTML een verplicht onderdeel van de route van elke professionele ontwerper.

HTML Markeer Article Series

DEEL 1: Moet een geloofwaardige ontwerper HTML kennen?
DEEL 2: HTML 3.2 - De geboorte van Wilbur
DEEL 3: HTML 4.0 EN 4.01 - Meer van een goede zaak!
DEEL 4: XHTML: Webcodering voor verfijnd ontwerp
DEEL 5: DHTML: Dynamische webcodering