HTML

HTML is de taal waarmee je documenten (ofwel homepages of webpagina's) maakt, die bekeken kunnen worden op het World Wide Web. HTML staat voor HyperText Markup Language: Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname. Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

HTML-code is opgebouwd uit elementen en attributen. In deze introductie in HTML wordt eerst ingegaan op de begrippen elementen en attributen. Daarna wordt toegelicht hoe een HTML-document met een aantal basismogelijkheden wordt opgebouwd. Vervolgens wordt een overzicht gegeven van de extra mogelijkheden waarvan je gebruik kunt maken. Het onderdeel besluit met informatie over het maken en controleren van HTML-documenten.

Elementen en attributen
Elementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer beindigt. Zowel de activering (ook wel start tag genoemd) als de beindiging (end tag) beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De activering en de beindiging zijn hetzelfde, met uitzondering van de slash (/) voor de naam van het element in de beindiging. Tussen de activering en beindiging staat de inhoud, waarop het element betrekking heeft. Als voorbeeld de opbouw van een paragraaf met behulp van het P element. <P>Deze tekst vormt een paragraaf.</P> Een aantal elementen heeft geen inhoud. Voor deze lege elementen is het gebruik van de beindiging verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden: <HR> Van sommige elementen mag de beindiging worden weggelaten en in een heel enkel geval ook de activering. Voor de eenduidigheid wordt echter geadviseerd van deze mogelijkheid geen gebruik te maken. De naam van een element is altijd hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters worden geschreven.

Attributen zijn nadere specificaties van een element. Ze worden opgenomen in de activering van het element, voor het >-teken. Indien meerdere attributen aan het element worden toegevoegd, worden deze gescheiden door een spatie. In veel gevallen moet voor een attribuut een waarde worden opgegeven. Als voorbeeld wordt aan het eerder genoemde P element het ALIGN attribuut toegevoegd. <P ALIGN="right">Deze paragraaf wordt rechts uitgelijnd.</P>

Ook aan lege elementen kunnen attributen worden toegevoegd. In het volgende voorbeeld gebeurt dat voor het HR element met de attributen SIZE en NOSHADE, waarbij NOSHADE een voorbeeld is van een attribuut dat geen waarde kent. <HR SIZE="5" NOSHADE> De naam van een attribuut is ook altijd hoofdletterongevoelig. Meestal geldt hetzelfde voor de waarde, maar er zijn enkele uitzonderingen. De waarde van een attribuut wordt geplaatst tussen dubbele of enkele aanhalingstekens. Wanneer de waarde alleen bestaat uit letters (A-Z of a-z), cijfers (0-9), verbindingsstreepjes (-) en punten (.), zijn aanhalingstekens niet strikt noodzakelijk. Vanwege de uniformiteit wordt echter geadviseerd ook in die gevallen aanhalingstekens te gebruiken. In deze handleiding wordt de HTML-code, net als in de voorbeelden hiervoor, weergegeven in een lettertype met een vaste letterafstand. De namen van elementen en attributen worden altijd in hoofdletters weergegeven, de waarden (tenzij anders vereist) altijd in kleine letters.

Opbouw HTML-document
Een HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan bijvoorbeeld instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden. In de head van elk document moet in ieder geval het TITLE element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in de titelbalk van het venster. Een uitgebreide beschrijving van de in de head op te nemen informatie is te vinden in het onderdeel Structuur document. De body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Met de genoemde elementen heeft het HTML-document de volgende opbouw: <HTML> <HEAD> <TITLE>Dit is mijn eerste homepage</TITLE> </HEAD> <BODY> </BODY> </HTML> Binnen het BODY element kun je ondermeer koppen, paragrafen, horizontale lijnen, afbeeldingen en hyperlinks opnemen. Koppen maak je met het Hx element. De "x" vervang je door een getal tussen 1 en 6. Hoe lager het getal, hoe groter de kop. Voor de belangrijkste kop gebruik je dus H1: <H1>De belangrijkste kop</H1>

Gewone tekst neem je op met het P element. Voor een horizontale lijn gebruik je het HR element. Voorbeeld van deze elementen zijn hiervoor reeds gegeven. De elementen Hx, P en HR zijn elementen, die ervoor bedoeld zijn de inhoud van een document op een voor een bezoeker begrijpelijke wijze te structureren. Dit soort elementen wordt altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en vaak ook door een blanco regel. Als je een afbeelding wilt opnemen, maak je gebruik van het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je als alternatief een omschrijving op, voor als de browser geen afbeeldingen weergeeft. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. Een uitgebreide beschrijving is te vinden in het onderdeel Afbeeldingen en image maps. <P><IMG SRC="gezicht.gif" WIDTH="105" HEIGHT="125" ALT="Gezicht"></P> Een hyperlink is een verbinding met een ander document, of een ander type bestand. Je maakt een hyperlink met het A element. Het HREF attribuut definieert op welke locatie het document of bestand zich bevindt. Een hyperlink naar een document in dezelfde directory op dezelfde server ziet er als volgt uit: <P>Een <A HREF="hyperlinks.html">hyperlink</A> is ...</P> Een hyperlink naar een site op een andere server heeft bijvoorbeeld de volgende opbouw: <P>Bezoek de <A HREF="http://www.handleidinghtml.nl">Handleiding HTML</A></P> Met de attributen van het BODY element kun je de basisweergave van een document bepalen. Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker. Het BACKGROUND attribuut tenslotte kun je gebruiken om aangeven, dat een afbeelding als achtergrond voor het document gebruikt moet worden. <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" ALINK="#FF0000"> </BODY> Plaatselijk kun je de weergave van stukjes tekst binnen bijvoorbeeld een kop of paragraaf bepalen met de elementen voor tekstopmaak, zoals B voor vet en I voor cursief. Ze worden beschreven in het onderdeel Weergave tekst. <P>Tekst kun je ook in <B>vet</B> of <I>cursief</I> weergeven.</P> In de tekst van een HTML-document mag je een aantal (speciale) tekens niet zomaar gebruiken. Dat geldt bijvoorbeeld voor accenten en trema's, maar ook voor tekens die in HTML een speciale betekenis hebben zoals het begin (<) of het eind (>) van de activering of beindiging van een element, de ampersand (&) en dubbele aanhalingstekens ("). In plaats van deze tekens moet speciale code gebruikt worden. Ter illustratie voor enkele tekens de code: - &eacute; - &agrave;

 - &iuml; " - &quot; Voor een uitgebreid overzicht zie het onderdeel Speciale karakters.

Extra mogelijkheden
Hiervoor is ingegaan op een aantal basismogelijkheden bij het maken van HTML-documenten. HTML biedt daarnaast nog veel extra mogelijkheden en in deze handleiding komen die uitgebreid aan de orde. In het onderdeel Structureren van tekst wordt, behalve op de al eerder genoemde paragrafen, koppen en horizontale lijnen, onder meer ingegaan op de witruimte in een document, het inspringen en centreren van blokken tekst, het plaatsen van tekst in kolommen, het afbreken en het plaatsen van tekst in een vaste opmaak. Lijsten kun je gebruiken om informatie in een document puntsgewijs weergeven. Tabellen zijn er voor het ordenen van informatie in een document. Daarnaast worden tabellen ook veel gebruikt om de lay-out van een document te bepalen (in het bijzonder het in horizontale richting op de gewenste plaats zetten van tekst en andere inhoud). Met formulieren kun je de bezoeker van je pagina's de mogelijkheid te bieden tot bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enqute, het beantwoorden van vragen en het plaatsen van bestellingen. Door te werken met frames kun je het venster van de browser onderverdelen in meerdere subvensters en in elk een document kunt openen. Vaak wordt dat gedaan om een deel van het venster steeds zichtbaar te houden (bijvoorbeeld een titelbalk of een inhoudsopgave) en in een ander deel door opeenvolgende documenten heen te kunnen lopen. Een bijzondere vorm is het inline frame, een venster in je document waar je doorheen kijkt naar een ander document. Een bijzonder gebruik van afbeeldingen betreft image maps, ook wel aanklikbare afbeeldingen genoemd. Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in verschillende gebieden, waarbij aan elk gebied een hyperlink kan worden gekoppeld. Als je in zo'n gebied in de afbeelding klikt met de muis, spring je naar de in de hyperlink gedefinieerde bestemming. Naast afbeeldingen kun je in een document ook andere objecten opnemen. Bekende voorbeelden zijn Java applets en geluidsfragmenten. Scripts kun je gebruiken om extra mogelijkheden aan HTML-documenten toe te voegen. Bekende voorbeelden zijn het openen van nieuwe browservensters, het vervangen van meerdere frames tegelijkertijd en berichten in de statusbalk van de browser. Naast een algemene beschrijving van het gebruik van scripts, worden in deze handleiding ook een beperkt aantal voorbeelden van de meest gebruikte scripttaal JavaScript gegeven. Een groot aantal mogelijkheden voor de opmaak van HTML-documenten heb je, als je gebruik maakt van stylesheets. Deze handleiding bevat een uitgebreide beschrijving van de taal die je daarbij gebruikt: Cascading Style Sheets (CSS). In het onderdeel Stylesheets wordt ingegaan op de verschillende manieren, waarop je stylesheets aan HTML kunt koppelen.

HTML-document maken en controleren

HTML-documenten zijn zogenaamde ASCII-bestanden. Dat wil zeggen dat je ze kunt maken met een gewone tekst-editor, zoals Kladblok (Notepad) van Windows. Handiger is het echter gebruik te maken van een speciale HTML-editor. Een beschrijving van enkele van dat soort editors is opgenomen in het onderdeel Hulpmiddelen. De formele extensie van de bestandsnaam van een HTML-document is "html". Omdat een extensie uit slechts 3 posities mag bestaan bij op DOS/Windows 3.x gebaseerde systemen, is in het verleden de gewoonte ontstaan om "htm" als extensie te gebruiken. Aangezien deze systemen niet of nauwelijks meer voorkomen, is er weinig reden meer om niet gewoon "html" aan te houden. Voordat je anderen in de gelegenheid stelt je HTML-documenten te bekijken, moet je controleren of ze geen fouten bevatten. Daarbij gaat het niet alleen om de spelling, maar ook om de HTML-code en de hyperlinks. Het is belangrijk dat je de HTML-code op de juiste manier gebruikt. Je verkleint daarmee de kans dat de browser van een bezoeker de documenten niet correct kan weergeven. Voor de controle van de HTML-code kun je gebruik maken van de HTML Validation Service van het W3C (World Wide Web Consortium), of van de WDG HTML Validator. Deze online validators maken gebruik van officile door het W3C voor de verschillende HTML-versies opgestelde "document type definitions" (DTD; zie ook de beschrijving van de DOCTYPE-declaratie). Wanneer je de HTML-documenten liever offline wilt controleren, dan kun je gebruik maken van een daarvoor bedoeld programma. Naast de controle met behulp van een validator, is het ook goed je documenten te bekijken met verschillende browsers. Je komt er dan onder meer achter of een browser een afwijkende weergave heeft, of fouten bevat waarmee je rekening moet houden. Voor een bezoeker van je pagina's is het tenslotte wel zo plezierig als de hyperlinks kloppen. Je zult ze dus regelmatig moeten controleren. Dat kun je zelf stuk voor stuk doen, maar als je veel links hebt dan kun je beter kiezen voor een meer geautomatiseerde oplossing. Bestaat je website uit een beperkt aantal pagina's, dan kun je gebruik maken van een online linkchecker. Wil je een groot aantal pagina's tegelijk controleren, dan is een daarvoor bedoeld programma handiger.

Introductie structuur document

Een HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie over het document, de body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Een HTML-document heeft de volgende opbouw: <HTML> <HEAD> .. informatie over het document .. </HEAD> <BODY> .. inhoud document .. </BODY> </HTML> Wanneer met frames wordt gewerkt, is er in het document waarin de frames worden gedefinieerd niet echt sprake van een body. Het BODY element wordt in dat geval niet opgenomen en in plaats ervan worden de elementen FRAMESET en FRAME gebruikt. Helemaal aan het begin van het document kan een DOCTYPE (document type) declaratie worden opgenomen, waarmee wordt aangegeven welke HTML-versie gebruikt is bij het maken van het document.

Zowel in de head als in de body van een document kan tekst als commentaar opgenomen worden, waardoor het niet door de browser wordt weergegeven.

De head
In de head van een document wordt informatie opgenomen, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden, of bijvoorbeeld gericht zijn op zoekmachines. In de head van elk document moet een titel worden vastgelegd met het TITLE element. Deze titel is te zien in de titelbalk van het documentvenster en wordt daarnaast door zoekmachines gebruikt bij de weergave van zoekresultaten. Een korte beschrijving van het document, sleutelwoorden en andere informatie, welke zoekmachines gebruiken bij de indexering van een document, worden opgenomen met het META element, waaraan de attributen NAME en CONTENT worden toegevoegd. Daarnaast kan ook het LINK element met de attributen REL en HREF een functie hebben in het vastleggen van informatie ten behoeve van zoekmachines. Informatie, op basis waarvan de browser na een bepaalde tijd het document zonder tussenkomst van de gebruiker ververst of vervangt, wordt opgenomen met het META element waaraan het HTTP-EQUIV attribuut is toegevoegd. Dit automatische verversen of vervangen heet de Client Pull methode. Een basisadres voor het openen van hyperlinks in het document en een basisframe worden vastgelegd met het BASE element. Een beschrijving is opgenomen in het onderdeel Hyperlinks. Informatie betreffende het gebruik van stijlen wordt vastgelegd met de elementen LINK en STYLE. Het LINK element geeft een relatie aan met een extern stijlblad, het STYLE element definieert een stijlblok in het document zelf. De koppeling van stijlen aan HTML wordt beschreven in het onderdeel Stylesheets. Het SCRIPT element kan worden gebruikt om een script te definiren, dat automatisch of als resultaat van een actie van de gebruiker wordt uitgevoerd. Een toelichting is opgenomen in het onderdeel Scripts. Tenslotte kan in de head informatie opgenomen worden om ervoor te zorgen dat browsers die dat ondersteunen in de adresbalk een eigen afbeelding weergeven (een zo genoemde shortcut icon).

De body
In de body van een document wordt de inhoud opgenomen, welke in het documentvenster te zien is. Bij deze inhoud kan het gaan om tekst, maar bijvoorbeeld ook om afbeeldingen. Er is een groot aantal mogelijkheden beschikbaar voor de wijze waarop de inhoud gestructureerd en gepresenteerd kan worden: Met de attributen van het BODY element wordt de basisweergave van het document bepaald: de kleur van de achtergrond, de tekst en de hyperlinks en of een achtergrondafbeelding gebruikt moet worden. Voor het BODY element kunnen daarnaast stijlen gedefinieerd worden, welke gelden voor het gehele document. De elementen voor het Structuren van tekst worden gebruikt voor het indelen van tekst in blokken, al dan niet met een bepaalde opmaak, het afbreken van regels en het maken van koppen en lijnen. Met de elementen voor Weergave inline tekst kan bepaald worden hoe de tekst op een regel moet worden weergegeven: in welke lettergrootte en -kleur, met welk lettertype en bijvoorbeeld vet, cursief, of met een vaste letterafstand.

In de vorm van Hyperlinks en Image maps wordt een verbinding gelegd naar bijvoorbeeld andere documenten. De inhoud kan opgenomen worden in Lijsten, Tabellen en Formulieren. Stylesheets kunnen gebruikt worden om de opmaak gedetailleerd vast te leggen.

DOCTYPE-declaratie
Helemaal aan het begin van een document wordt de DOCTYPE-declaratie (document type) opgenomen. Deze is ervoor bedoeld aan te geven aan welke HTML-versie het document voldoet. De DOCTYPE-declaratie verwijst naar een document type definition (DTD). HTML 4.01, de laatste (als revisie van HTML 4.0) vastgestelde HTML-aanbeveling, kent drie verschillende DTD's. Het onderscheid tussen de DTD's zit in de elementen en attributen die ze ondersteunen. De basis DTD is HTML 4.01 Strict. Deze bevat alle elementen en attributen, met uitzondering van die welke het label afgekeurd hebben gekregen en die welke betrekking hebben op frames. Afgekeurd zijn elementen en attributen, die deel uitmaken van HTML 3.2, maar waarvoor er in HTML 4 een alternatief is (via bijvoorbeeld stylesheets). Omdat de alternatieven op dit moment slechts door een beperkt aantal browsers ondersteund worden, is het gebruik van de afgekeurde elementen en attributen nog steeds toegestaan. De tweede DTD, HTML 4.01 Transitional, bevat daarom alle elementen uit HTML 4.01 Strict plus de afgekeurde elementen en attributen. In de derde DTD, HTML 4.01 Frameset, zijn tenslotte alle elementen en attributen uit HTML 4.01 Transitional opgenomen, plus die welke betrekking hebben op frames. De DOCTYPE-declaraties voor de DTD's van HTML 4.01 zijn hierna te zien. Een overzicht waarin ook de DOCTYPE-declaraties voor de andere HTML-versies zijn opgenomen, wordt gegeven bij de beschrijving van !DOCTYPE. DOCTYPE-declaratie HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> DOCTYPE-declaratie HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPE-declaratie HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Het gebruik van n van bovenstaande DOCTYPE-declaraties en vooral het voldoen aan de bijbehorende specificatie wordt aanbevolen. Met het voldoen aan een specificatie verklein je de kans dat de browser van een bezoeker de documenten niet correct kan weergeven. Het opnemen van de DOCTYPE-declaratie is in ieder geval van belang als je een document wilt controleren op het gebruik van de juiste HTML-code. De validator weet dan op basis van welke HTMLversie de controle moet plaatsvinden. De meeste oudere browsers maken geen gebruik van de DOCTYPE-declaratie. Nieuwere browsers als Microsoft Internet Explorer 6.0 voor Windows en Microsoft Internet Explorer 5.0 voor Macintosh, Mozilla, Netscape Navigator 6.0 en hoger en Opera 7.0 en hoger gebruiken de DOCTYPE-declaratie om te bepalen hoe een document moet worden weergegeven. Onderscheid wordt daarbij gemaakt tussen twee manieren van weergeven: de "quirks" of "compatibility" (uitwisselbaarheids-) modus en de

"standards" modus. De reden voor de introductie van deze zogenaamde "DOCTYPE switch" (verwisseling) is het feit dat oudere browsers nogal wat fouten kennen in de wijze waarop ze met HTML en CSS omgaan. Het gaat dan bijvoorbeeld om het erven van stijlen in tabellen en het berekenen van de breedte en hoogte van elementen. Ook accepteren oudere browsers allerlei fouten die ontwikkelaars van webpagina's maken in hun HTML- en CSS-code. Bijvoorbeeld het onjuist opnemen van waarden, zoals eenheden voor lengte (13 px in plaats van 13px), of RGB-kleuren (FF0000 in plaats van #FF0000). Nieuwere browsers proberen zich meer en meer aan de officile standaarden te houden. Dat leidt er onder meer toe dat speciale constructies, die webontwikkelaars bedacht hebben als oplossing voor de problemen in oudere browsers, opeens tot een andere weergave leiden in de nieuwere browsers. Bij de weergave overeenkomstig de standaarden hoort ook, dat fouten in de code niet meer geaccepteerd worden. Dat kan er toe leiden dat stijlen soms helemaal genegeerd worden. De DOCTYPE-verwisseling moet hiervoor een oplossing voor bieden. In de quirks modus wordt de weergave van het document door oudere browsers nagebootst, dus inclusief alle fouten. In de standards modus wordt het document weergegeven volgens de laatste standaarden op het gebied van HTML (versie 4) en CSS (versie 2). Bij het bepalen van de weergave-modus speelt bij de meeste browsers niet alleen de gebruikte DOCTYPE-declaratie een rol, maar ook of daarin de URI van de document type definition is opgenomen. In het volgende overzicht is voor de verschillende DOCTYPE-declaraties aangegeven of de weergave al dan niet in de standards modus is. Dat is gedaan voor Microsoft Internet Explorer (6.0 voor Windows en 5.0 voor Macintosh), Netscape Navigator (6.0 en hoger), Mozilla en Firefox en Opera (7) Weergave in standards modus IE6 IE5 NN6+ OP7+ Windows Mac MOZ FF nee nee nee nee nee nee nee nee nee nee nee nee ja ja nee ja nee nee nee nee ja ja nee ja ja ja ja ja ja ja ja ja nee nee nee nee ja ja ja ja nee nee nee nee ja ja ja ja ja ja ja ja ja ja ja ja nee nee nee nee ja ja nee ja

DOCTYPE-declaratie

HTML 2.0 HTML 3.2 HTML 4.0 Frameset zonder URI HTML 4.0 Frameset met URI HTML 4.0 Transitional zonder URI HTML 4.0 Transitional met URI HTML 4.0 Strict zonder URI HTML 4.0 Strict met URI HTML 4.01 Frameset zonder URI HTML 4.01 Frameset met URI HTML 4.01 Transitional zonder URI HTML 4.01 Transitional met URI HTML 4.01 Strict zonder URI HTML 4.01 Strict met URI geen DOCTYPE-declaratie onbekende DOCTYPE-declaratie

Bij de keuze van een DOCTYPE-declaratie voor een document is het allereerst natuurlijk van belang vast te stellen aan welke standaard wordt voldaan. Ook is het zaak ervoor te zorgen dat je geen fouten in de HTML- en CSS-code hebt gemaakt. Om dat te controleren kun je gebruik maken van een validator (zie de buttons onder aan elke pagina in de Handleiding HTML). Tenslotte bekijk je de HTMLdocumenten in een browser die de DOCTYPE-verwisseling ondersteunt zowel in de standards als de quirks modus (daarvoor moet je dus echt de DOCTYPE-declaratie verwisselen). Gebruik je constructies waardoor de documenten er verschillend uitzien in de standards en de quirks modus en wil je dat de weergave in oudere en nieuwere browsers hetzelfde is, dan kun je het beste kiezen voor de quirks modus. Dat doe je door bijvoorbeeld de DOCTYPE-declaratie voor HTML 4.01 Transitional op te nemen zonder de URI van de document type definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Titel document
Met het TITLE element wordt een titel voor het document vastgelegd. Deze titel wordt niet weergegeven in het documentvenster, maar in de titelbalk van het venster. Daarnaast wordt de titel door zoekmachines geplaatst als kopje boven een zoekresultaat en gebruiken browsers hem als iemand de pagina toevoegt aan de bookmarks (bij Netscape Navigator), de favorieten (bij Microsoft Internet Explorer) of de hotlist (bij Opera). Elk document moet een TITLE element bevatten. Het is verstandig een titel te gebruiken, die duidelijk maakt waar het document over gaat en op basis waarvan bijvoorbeeld gebruikers van een zoekmachine kunnen beslissen, of het bekijken van het document zinvol is. Het TITLE element wordt bijvoorbeeld als volgt gebruikt: <HEAD> <TITLE>Handleiding HTML - De Nederlandse informatiebron op het gebied van HTML en CSS</TITLE> </HEAD>

Commentaar
In het HTML-document kan commentaar worden opgenomen: tekst die door de browser niet wordt weergegeven, maar wel zichtbaar is als iemand de source (bron) van het document bekijkt. Het commentaar kan zowel in de head van het document, als in de body geplaatst worden. In de head kun je er bijvoorbeeld informatie over het copyright mee opnemen: <!-Handleiding HTML Copyright 1995-2006 Hans de Jong Gehele of gedeeltelijke overname, plaatsing op andere sites, verveelvoudiging op welke andere wijze ook en/of commercieel gebruik van deze handleiding alleen na toestemming van de auteur. -->

Basisweergave document
De attributen van het BODY element kun je gebruiken als je wilt dat het document anders wordt weergegeven dan met de standaardkleuren van de browser. Je kunt een achtergrondafbeelding definiren, een achtergrondkleur en kleuren voor de tekst en de hyperlinks. De opgegeven kleuren voor de tekst en de hyperlinks gelden voor het hele document. Wanneer je tekst plaatselijk in een andere kleur wilt weergeven, dan moet je gebruik maken van het FONT element (zie het onderdeel Weergave tekst). In het volgende voorbeeld zijn geen attributen aan het BODY element toegevoegd. <BODY> </BODY> Hiernaast zie je wat de basisweergave van de browser is. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Met het BACKGROUND attribuut kun je aangeven, welke afbeelding als achtergrond voor het document gebruikt moet worden. Algemeen ondersteunde formaten van afbeeldingen zijn GIF en JPG. Een nieuw formaat, dat nog slechts beperkt wordt ondersteund, is PNG. Het is verstandig een niet al te groot bestand te kiezen en daardoor de downloadtijd zoveel mogelijk te beperken. Door de browser wordt de afbeelding zo vaak gedupliceerd dat de hele achtergrond ermee bedekt is. <BODY BACKGROUND="watermerk.gif"> </BODY> In een nieuw venster kun je het resultaat bekijken. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker. <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FF00" VLINK="#FFFF00" ALINK="#FF0000"> </BODY> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

De attributen BACKGROUND en BGCOLOR kun je ook gecombineerd gebruiken. De achtergrondkleur wordt weergegeven zolang de achtergrondafbeelding nog niet is geladen, als een afbeelding met een transparante achtergrond wordt toegepast, of als de afbeelding niet gevonden wordt. Het is verstandig altijd de attributen BGCOLOR en/of BACKGROUND in combinatie te gebruiken met de attributen TEXT, LINK, VLINK en ALINK, zodat je niet het risico loopt dat de standaardkleuren van de browser voor tekst en hyperlinks wegvallen in de achtergrond. De Microsoft Internet Explorer specifieke attributen LEFTMARGIN, TOPMARGIN, RIGHTMARGIN en BOTTOMMARGIN en de Netscape Navigator specifieke attributen MARGINHEIGHT en MARGINWIDTH van het BODY element kun je gebruiken om de afstand in pixels tussen de inhoud van het document en de randen van het venster of frame vast te leggen. Omdat deze attributen geen deel

uitmaken van HTML 4.0, de meeste slechts ondersteund worden door de versies 4.0 en hoger van de genoemde browsers en er een goed alternatief is in de vorm van stylesheets, wordt het gebruik afgeraden. Een voorbeeld van het gebruik van de margin eigenschappen in een stijl wordt hierna gegeven.

Met behulp van stylesheets kunnen voor het BODY element stijlen gedefinieerd worden. Deze stijlen kunnen een vergelijkbaar resultaat opleveren als via de attributen van het BODY element, maar daarnaast ook op andere punten de weergave van het document benvloeden. In het volgende voorbeeld is met het STYLE attribuut een inline stijl voor het BODY element gespecificeerd. De eigenschappen font-family en font-size zijn gebruikt om het lettertype en de lettergrootte van de tekst in het document vast te leggen. Met de eigenschappen color en background zijn de kleur van de tekst, de achtergrondkleur en de achtergrondafbeelding gedefinieerd. De margin eigenschap zorgt ervoor dat ruimte wordt vrijgehouden tussen de inhoud van het document en de rand van het venster. <BODY STYLE="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: red; background: #FFFFCC url(watermerk.gif); margin: 20px"> </BODY> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Zie ook de toelichting op het gebruik van stijlen in hyperlinks.

De browser plaatst standaard de inhoud van een document zo'n 4 5 pixels uit de rand van het venster of frame. Soms is het handig om de inhoud direct tegen de randen te plaatsen. Bijvoorbeeld als je gebruik maakt van frames zonder randen, of van inline frames. Voor Microsoft Internet Explorer, Netscape Navigator 6.0 en hoger, Mozilla en Firefox kun je dat regelen door voor het BODY element de margin eigenschap op te nemen met de waarde "0". Om ook in Opera het bedoelde effect te bereiken, moet je bovendien de padding eigenschap op te nemen met de waarde "0". Dit werkt wanneer voor het document een DOCTYPE-declaratie is opgenomen, die ervoor zorgt dat het document wordt weergegeven in de quirks modus (waarbij rekening gehouden wordt met fouten in oudere browsers). Als het document in de nieuwste browsers echter wordt weergegeven in de standards modus, dan houdt de browser de normale bovenmarge aan voor het P element en staat de tekst dus niet tegen de bovenrand. Je kunt dit oplossen door voor het eerste P element de margin-top eigenschap op te nemen met de waarde "0". <BODY BGCOLOR="#FFFFCC" TEXT="#000000" STYLE="margin: 0px; padding: 0px;"> <P STYLE="margin-top: 0px;">Voor het document ... linker bovenhoek.</P> </BODY> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je gebruik maakt van tabellen, moet je er rekening mee houden dat stijlen gedefinieerd voor het BODY element niet in elke browser gerfd worden in een tabel. Dat geldt in Netscape Navigator 4 voor alle eigenschappen en in Microsoft Internet Explorer 4 t/m 5.5 voor een deel van de eigenschappen. Om een stijl ook voor de inhoud van de cellen van een tabel te laten gelden, kun je deze het beste ook definiren voor de elementen TH en TD. Zie ook het onderdeel CSS en browsers.

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Introductie structureren van tekst

Tekst in een HTML-document kan op verschillende manieren gestructureerd worden. De meest algemene vorm is het indelen van tekst in paragrafen. Hiervoor kan gebruik gemaakt worden van het P element. Daarnaast zijn er elementen, welke gebruikt kunnen worden, als een specifieke betekenis van een blok tekst benadrukt moet worden. Het BLOCKQUOTE element is bedoeld voor tekst welke wordt geciteerd en geeft deze ingesprongen weer. In het ADDRESS kunnen adresgegevens van de auteur worden opgenomen, welke cursief worden weergegeven. Soms hebben elementen meer betrekking op de weergave van blokken tekst. Dat geldt bijvoorbeeld voor het CENTER element, waarmee een deel van de inhoud van een document gecentreerd kan worden. Een ander voorbeeld is het Netscape specifieke MULTICOL element, dat gebruikt kan worden voor het weergeven van tekst in meerdere kolommen naast elkaar. Voor de tekst ingesloten door de genoemde elementen wordt bij de weergave door de browser automatisch aan het einde van een regel een overgang naar een volgende regel ingevoegd. Overgangen naar een nieuwe regel in de bron van het document worden evenwel genegeerd. Het BR element kan gebruikt worden om een overgang naar een nieuwe regel te forceren. Het PRE element kan toegepast worden, wanneer tekst door de browser moet worden weergegeven in vaste opmaak, dat wil zeggen zoals deze staat in de bron van het document. Aan het begin van een document, of bijvoorbeeld tussen de verschillende paragrafen, kunnen koppen geplaatst worden met het Hx element. Dit element is beschikbaar in zes verschillende groottes (H1 .. H6). Als scheiding tussen blokken tekst en/of andere inhoud van een document kunnen horizontale lijnen geplaatst worden met het HR element. Bij de elementen P, BLOCKQUOTE, ADDRESS, CENTER, MULTICOL, Hx en HR gaat het om zogenaamde elementen op blokniveau. Deze elementen worden altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en soms ook door een blanco regel. Voor de opmaak van stukjes tekst binnen een element op blokniveau zijn inline elementen beschikbaar. Deze worden beschreven in het onderdeel Weergave tekst. Achtergrondinformatie over de indeling van elementen en de wijze waarop ze hun plek vinden in het venster van de browser, wordt gegeven in het onderdeel CSS en elementen. De elementen DEL en INS kunnen gebruikt worden om revisie-informatie in een document vast te leggen. Het INS element bevat de inhoud welke is toegevoegd, het DEL element inhoud welke is

verwijderd. Deze elementen kunnen als element op blokniveau, maar ook als inline element gebruikt worden. Een toelichting wordt gegeven in het onderdeel Weergave tekst. Hierna wordt eerst ingegaan op de wijze waarop HTML met de witruimte in een document omgaat.

Witruimte
Een blok tekst wordt door de browser standaard aan de linkerzijde van bijvoorbeeld een venster of een frame uitgelijnd. Als de tekst langer is dan op n regel past, wordt aan de rechterzijde automatisch een overgang naar een nieuwe regel toegevoegd. De witruimte die je opneemt in de bron van het HTMLdocument wordt niet zomaar door de browser weergegeven. Als voorbeeld een document met de volgende opbouw: Overgangen naar een nieuwe regel in de bron van het document worden genegeerd en meerdere achter elkaar worden samengevoegd tot n spatie. Dit wordt door de browser als volgt weergegeven: Overgangen naar een nieuwe regel in de bron van het document worden genegeerd en meerdere spaties achter elkaar worden samengevoegd tot n spatie. Wanneer je de overgang naar een nieuwe regel wilt forceren, dan moet je gebruik maken van het BR element (zie Overgang nieuwe regel). Als je de tekst wilt weergegeven zoals in de bron van het document, dan kun je het PRE element gebruiken (zie Vaste opmaak). Meerdere spaties achter elkaar kun je maken met het speciale teken "&nbsp;" (non-breaking space), zoals in het volgende voorbeeld. Meerdere &nbsp;&nbsp;&nbsp; spaties maak je ... Meerdere spaties maak je met het non-breaking space teken.

spaties

Paragrafen
Voor gewone tekst in een document wordt het P element gebruikt. De door het P element ingesloten tekst wordt in het algemeen voorafgegaan en gevolgd door een witruimte, vaak ter grootte van ongeveer n blanco regel. Indien het element gevolgd wordt door een tweede P element, of een ander element op blokniveau (bijvoorbeeld BLOCKQUOTE, PRE en Hx), dan schuiven de witruimtes in elkaar en resteert tussen de blokken tekst slechts n blanco regel. <P>Dit is de eerste paragraaf</P><P>Dit is de tweede paragraaf</P> Dit is de eerste paragraaf Dit is de tweede paragraaf

Met het ALIGN attribuut kun je bepalen hoe de ingesloten tekst moet worden uitgelijnd. <P ALIGN="right">Deze tekst ... uitgelijnd.</P> Deze tekst is aan de rechterzijde van het venster of frame uitgelijnd.

Voor het P element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het P element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de opmaak van het blok tekst bepaald: de uitlijning met de textalign eigenschap, de regelhoogte met de line-height eigenschap, het lettertype met de font-family eigenschap, de lettergrootte met de font-size eigenschap en de kleur van de tekst met de color eigenschap. <P STYLE="text-align: justify; line-height: 20px; font-family: Arial, sans-serif; font-size: 13px; color: #FF0000">De opmaak ... beschreven.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Vervolg: Inspringen

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Inspringen
In HTML zijn er geen elementen, welke er specifiek voor bedoeld zijn om tekst te laten inspringen. Toch zijn er wel mogelijkheden om het gewenste effect te bereiken. Wanneer je alleen de eerste regel van een paragraaf een stukje wilt laten inspringen, dan kun je gebruik maken van het speciale teken "&nbsp;" (non-breaking space). Je plaatst dit speciale teken eenvoudig een aantal keren aan het begin van de paragraaf. <P>&nbsp;&nbsp;&nbsp;&nbsp; Doordat ... stukje in.</P> Doordat gebruik gemaakt is van "&nbsp;" begint de eerste regel van deze paragraaf niet langs de linker kantlijn, maar springt hij een stukje in.

Het inspringen van de eerste regel van een paragraaf kun je ook bereiken met behulp van stylesheets. Je gebruikt daarvoor de text-indent eigenschap. Wanneer het inspringen slechts op n paragraaf betrekking heeft, kun je met het STYLE attribuut een inline stijl definiren: <P STYLE="text-indent: 15px">De tekst op ... van een stijl.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je de eerste regel van elke paragraaf wilt laten inspringen, kun je de stijl beter in een stijlblok of extern stijlblad opnemen: P { text-indent: 15px }

Het BLOCKQUOTE element is er voor bedoeld om aan te geven, dat het bij de ingesloten tekst gaat om een citaat. Vrijwel alle browsers doen dit door de tekst zowel links als rechts te laten inspringen. Vanwege deze manier van weergeven wordt het BLOCKQUOTE element in de praktijk regelmatig gebruikt, als een blok tekst moet inspringen. <BLOCKQUOTE>Dit blok ... rechts.</BLOCKQUOTE> Dit blok tekst is ingesloten door het BLOCKQUOTE element en springt daardoor als geheel in, meestal zowel links als rechts. Op dezelfde wijze als bij paragrafen kun je de opmaak van de tekst bepalen, door het koppelen van een stijl aan het BLOCKQUOTE element. Als alternatief voor het oneigenlijke gebruik van het BLOCKQUOTE element, wordt vaak gebruik gemaakt van een tabel. Je kunt dan zelf bepalen aan welke kant en hoeveel er wordt ingesprongen. Wil je bijvoorbeeld alleen aan de linkerkant inspringen, dan maak je een tabel met n rij en twee kolommen. Het WIDTH attribuut van het TD element waarmee je de eerste cel definieert, bepaalt de mate van inspringen. De tekst plaats je in de tweede cel. <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"> <TR> <TD WIDTH="25"></TD> <TD VALIGN="top">In dit ... eerste cel.<BR></TD> </TR> </TABLE> In dit voorbeeld wordt een tabel gebruikt om een blok tekst te laten inspringen. De mate van inspringen wordt bepaald door de breedte van de eerste cel. Een oplossing die door alle gangbare browsers ondersteund wordt, is die waarbij gebruikt gemaakt wordt van stylesheets. Je doet dat met de eigenschappen voor de margin. In het volgende voorbeeld is de margin-left eigenschap gebruikt om een P element links te laten inspringen. <P STYLE="margin-left: 15px">Voor dit P element ... inspringt.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Centreren
De inhoud van een HTML-document kan op verschillende manieren in het venster gecentreerd worden. Wanneer het om tekst gaat welke deel uitmaakt van het P element, kan gebruik gemaakt worden van het ALIGN attribuut met de waarde "center". <P ALIGN="center">Deze tekst is gecentreerd en wordt<BR> geplaatst over twee regels.</P> Deze tekst is gecentreerd en wordt geplaatst over twee regels.

Voor het centreren kan ook gebruik gemaakt worden van het CENTER element. <CENTER>Deze tekst is gecentreerd.</CENTER> Deze tekst is gecentreerd.

Het CENTER element wordt behalve voor tekst ook vaak gebruik voor andere inhoud. Bijvoorbeeld om een afbeelding te centreren. In HTML 4.0 heeft het CENTER element het label afgekeurd gekregen en in plaats ervan wordt aanbevolen het DIV element met het attribuut ALIGN="center" te gebruiken. <DIV ALIGN="center">Deze tekst is gecentreerd.</DIV> Deze tekst is gecentreerd.

Overigens heeft ook het ALIGN attribuut van de elementen P en DIV in HTML 4.0 het label afgekeurd gekregen. De achtergrond hiervan is, dat de opmaak van een document in de toekomst zoveel mogelijk geregeld moet worden met behulp van stylesheets. Ter illustratie wordt in het volgende voorbeeld tekst gecentreerd met het STYLE attribuut en de text-align eigenschap. <P STYLE="text-align: center;">Als de ... gecentreerd.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

De elementen CENTER en DIV worden voorafgegaan en gevolgd door de overgang naar een nieuwe regel, maar een blanco regel, zoals bij het P element, wordt echter niet toegevoegd.

Wanneer je een blok tekst een bepaalde breedte wilt geven en als geheel wilt centreren, dan kun je het beste gebruik maken van stylesheets. In het volgende voorbeeld is voor een P element met de width eigenschap een breedte gedefinieerd. Om het P element te centreren, moet je de eigenschappen margin-left en margin-right beide opnemen met de waarde auto. Deze oplossing wordt ondersteund door Mozilla, Firefox, Netscape Navigator 6.0 en hoger en Opera 4.0 en hoger. Het P element is ook gecentreerd in Microsoft Internet Explorer 6.0, maar alleen als een DOCTYPE-declaratie is gebruikt, die ervoor zorgt dat het document wordt weergegeven in de standards modus. Wanneer het P element wordt weergegeven door Microsoft Internet Explorer 6.0 in de quirks modus, of door Microsoft Internet Explorer 5.5 of lager, dan wordt het P element niet gecentreerd maar links in het venster of frame geplaatst. Je kunt het P element toch centreren, door een fout in deze browsers met betrekking tot de text-align eigenschap te benutten. Volgens de regels mag een browser de text-align eigenschap alleen gebruiken om de inline inhoud van een element op blokniveau uit te lijnen. Microsoft Internet Explorer (met uitzondering van versie 6.0 in de standards modus) doet het met alle ingesloten elementen op blokniveau. In deze browser kun je het P element dus centreren, als je het plaatst in een DIV element, waarvoor text-align: center geldt. Wanneer je beide oplossingen combineert, dan is het P element in vrijwel alle browsers gecentreerd (Microsoft Internet Explorer vanaf versie 5.0, Netscape Navigator vanaf versie 6.0, Mozilla, Firefox en Opera vanaf versie 4.0). <DIV STYLE="text-align: center;"><P STYLE="width: 120px; margin-left: auto; margin-right: auto; text-align: left;">Dit P element ... van een stijl.</P></DIV> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je ook de inhoud van het P element wilt centreren, dan wijzig de waarde van de text-align eigenschap voor dit element van left in center. <DIV STYLE="text-align: center;"><P STYLE="width: 120px; margin-left: auto; margin-right: auto; text-align: center;">...</P></DIV>

Kolommen
Tabellen worden veel gebruikt bij het structureren van de inhoud van HTML-documenten. Je kunt tabellen bijvoorbeeld gebruiken als je tekst in kolommen wilt plaatsen. In het volgende voorbeeld is een eenvoudige tabel gebruikt met drie kolommen, waarvan de middelste bedoeld is om de breedte tussen de tekstkolommen vast te leggen. <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"> <TR> <TD WIDTH="270" VALIGN="top">In dit ... ondersteunen.</BR></TD> <TD WIDTH="15"></TD> <TD WIDTH="270" VALIGN="top">De tekst ... houden.</BR></TD> </TR> </TABLE>

In dit voorbeeld wordt de tekst met behulp van een tabel in twee kolommen geplaatst. Voordeel van deze methode is dat de meeste browsers tegenwoordig tabellen ondersteunen.

De tekst wordt niet automatisch over de kolommen verdeeld. Als je kolommen van ongeveer gelijke lengte wilt, moet je de verdeling, elke keer als je de inhoud aanpast, zelf in de gaten houden.

Alleen door Netscape Navigator 3.0 en 4.x wordt het MULTICOL element ondersteund, waarmee je de inhoud van een document over meerdere kolommen kunt verdelen. In vergelijking met het werken met tabellen vraagt de methode met het MULTICOL element minder HTML-code. Een voordeel is verder dat de tekst automatisch over de kolommen wordt verdeeld. Groot nadeel is evenwel dat het MULTICOL element slechts door een enkele browser wordt ondersteund en geen deel uitmaakt van HTML 4.0. Je kunt er dus beter maar geen gebruik van maken.

Adresgegevens
Het ADDRESS element wordt gebruikt om aan het begin of het eind van een document een auteursnaam, een (e-mail of website) adres, of een onderschrift weer te geven. De ingesloten tekst wordt in het algemeen cursief weergegeven. <ADDRESS>Naam<BR> E-mail: gebruiker@provider.nl</ADDRESS> De browser geeft dit weer als: Naam E-mail: gebruiker@provider.nl

Op dezelfde wijze als bij paragrafen kun je de opmaak van de adresgegevens bepalen, door het koppelen van een stijl aan het ADDRESS element.

Overgang nieuwe regel

De browser negeert overgangen naar een nieuwe regel, die je hebt opgenomen in de bron van het document. Wanneer je in een blok tekst ingesloten door bijvoorbeeld de elementen P, BLOCKQUOTE en ADDRESS toch een overgang naar een nieuwe regel wilt forceren, dan moet je gebruik maken van het BR element. <P>Deze tekst is ingesloten door het P element. Met het BR element<BR>ga je naar een nieuwe regel. Met twee BR elementen<BR><BR>krijg je een blanco regel tussen de tekst.</P> De browser geeft dit zo weer: Deze tekst is ingesloten door het P element. Met het BR element ga je naar een nieuwe regel. Met twee BR elementen krijg je een blanco regel tussen de tekst. Aan het BR element kun je het CLEAR attribuut toevoegen. Je geeft daarmee aan dat de tekst na het BR element pas geplaatst moet worden op de eerstvolgende regel met een vrije kantlijn aan de linkerzijde, de rechterzijde of aan beide zijden. Het gebruik van het CLEAR attribuut is vooral handig bij elementen, welke met het ALIGN attribuut zwevend zijn gemaakt, bijvoorbeeld afbeeldingen, tabellen of inline frames.

De browser voegt aan het eind van een regel automatisch een overgang naar een nieuwe regel in. Soms wordt daardoor een stuk tekst over twee regels verdeeld, terwijl je die liever op n regel bij elkaar wilt houden. In het onderdeel Tekst bij elkaar houden vind je beschreven hoe je kunt voorkomen, dat ongewenste overgangen naar een nieuwe regel ontstaan.

Vaste opmaak
Met behulp van het PRE element kan tekst in een vaste opmaak worden opgenomen, zonder dat de browser daar iets aan mag veranderen. Voor de door het PRE element ingesloten tekst gebruikt de browser een lettertype met een vaste letterafstand. Spaties en een overgang naar een nieuwe regel worden weergegeven, zoals deze in de bron van het document zijn opgenomen. Het PRE element kan daarmee ook gebruikt worden om meerdere blanco regels achter elkaar vast te leggen. In het volgende voorbeeld wordt een blok tekst in tabelvorm ingesloten door het PRE element. In de bron van het document ziet het er zo uit: <PRE> kleur 1 kleur 2 </PRE>

zwart rood

25 40

De browser geeft dit weer met: kleur 1 kleur 2 zwart rood 25 40

Als je het PRE element gebruikt, moet je ervoor zorgen dat je het aantal karakters op een regel beperkt houdt. Doe je dat niet, dan loopt de tekst het venster uit en moet de lezer horizontaal gaan scrollen.

Voor het PRE element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het PRE element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de extra opmaak van het blok tekst bepaald: de lettergrootte met de font-size eigenschap, het lettertype met de font-family eigenschap en de kleur van de tekst met de color eigenschap. <PRE STYLE="font-size: 16px; font-family: sans-serif; color: #FF0000;"> kleur 1 zwart 25 kleur 2 rood 40 </PRE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Koppen

Het Hx element wordt gebruikt om een kop (header) te definiren, welke bijvoorbeeld aan het begin van een document, of tussen de paragrafen geplaatst kan worden. Er zijn zes verschillende niveaus voor de koppen. Het niveau wordt gekozen door voor de "x" in Hx een getal in te vullen tussen 1 en 6. <Hx>Dit is Header Hx</Hx> Door voor x achtereenvolgens 1, 2, 3, 4, 5 en 6 in te vullen zie je:

Dit is header H1

Dit is header H2
Dit is header H3

Dit is header H4
Dit is header H5
Dit is header H6
Het ALIGN attribuut kan gebruikt worden om de horizontale uitlijning van de kop te specificeren. <H3 ALIGN="center">Deze kop is gecentreerd</H3>

Deze kop is gecentreerd

Voor het Hx element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het Hx element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de opmaak van de kop bepaald: het lettertype met de fontfamily eigenschap, de kleur van de tekst met de color eigenschap, de achtergrondkleur met de background-color eigenschap en de horizontale uitlijning met de text-align eigenschap. <H2 STYLE="font-size: 40px; font-family: sans-serif; color: #FFFFFF; background: #336699; text-align: center;">Handleiding HTML</H2> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Horizontale lijnen
Horizontale lijnen maak je met het HR element. <HR>

Standaard wordt de lijn over de gehele beschikbare breedte geplaatst. Met het WIDTH attribuut kun je zelf de breedte bepalen in pixels, of als percentage van de beschikbare breedte. Als de lijn niet de volledige breedte heeft, kun je met het ALIGN attribuut de horizontale uitlijning vastleggen. <HR WIDTH="50%" ALIGN="right">

De dikte van de lijn bepaal je met het SIZE attribuut. Het NOSHADE attribuut geeft aan dat de lijn niet in 3-D, maar vlak moet worden weergegeven. <HR SIZE="5" NOSHADE>

Met het door Internet Explorer, Netscape Navigator 7.2, Mozilla 1.5 en hoger en Firefox ondersteunde COLOR attribuut kan de kleur van de lijn worden vastgelegd. Dit attribuut maakt echter geen deel uit van een HTML-specificatie.

Voor het HR element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. Als het om de kleur en de hoogte van de lijn gaat, hebben de verschillende browsers echter niet gekozen voor een uniforme oplossing. Daardoor is het nodig meerdere eigenschappen te combineren. De volgende oplossing, waarin gebruik gemaakt wordt van de stijleigenschappen border, color, backgroundcolor, width en height leidt tot vrijwel hetzelfde resultaat in Microsoft Internet Explorer 4.0 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 4.0 en hoger. Voor een lijn in kleur in de standaard hoogte gebruik je de volgende code: <HR STYLE="width: 75%; height: 2px; color: #336699; background-color: #336699; border: solid #336699 0px;"> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wil je de lijn een andere hoogte geven dan wijzig je de waarde van de height eigenschap. Bijvoorbeeld in 5 pixels:

<HR STYLE="width: 75%; height: 5px; color: #336699; background-color: #336699; border: solid #336699 0px;"> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Introductie weergave tekst

Voor het bepalen van de weergave van inline tekst (de tekst ergens op een regel, welke onderdeel is van een element op blokniveau, zoals P of TABLE) zijn verschillende soorten elementen beschikbaar. De fysieke tekstopmaak-elementen gebruik je als je wilt vastleggen hoe de tekst moet worden weergegeven. Bijvoorbeeld vet (B), cursief (I), onderstreept (U) en met een vaste letterafstand (TT). De elementen BIG en SMALL kunnen gebruikt worden om de tekst groter of kleiner dan de standaard lettergrootte weer te geven. Met de elementen SUB en SUP wordt de tekst in subscript (iets onder de regel) of in superscript (iets boven de regel) geplaatst. Bij de logische tekstopmaak-elementen wordt niet de exacte weergave vastgelegd, maar meer het type tekst. De browser (of als die mogelijkheid er is, de gebruiker via de instellingen van de browser) bepaalt hoe de ingesloten tekst wordt weergegeven. Voorbeelden zijn met nadruk (EM), met extra nadruk (STRONG) en als computercode (CODE). Omdat veel auteurs zelf de controle over de weergave van hun documenten wensen te hebben, wordt van de logische tekstopmaak-elementen tegenwoordig slechts beperkt gebruik gemaakt. Met de elementen FONT en BASEFONT kun je de grootte, de kleur en het lettertype van de tekst bepalen. Bij het FONT element gaat het om de ingesloten tekst. Het BASEFONT element wordt direct na de activering van het BODY element geplaatst en definieert een basislettertype voor alle tekst in het document. Uitgebreide mogelijkheden bij het opmaken van tekst heb je, als je stijlen definieert met behulp van stylesheets. Een aantal elementen die betrekking hebben op de weergave van tekst, zijn nieuw in HTML 4.0: De elementen ABBR en ACRONYM pas je toe bij afkortingen. De browser kan de lange vorm van de afkorting dan bijvoorbeeld als tooltip weergeven. De elementen DEL en INS worden gebruikt om revisie-informatie van een document vast te leggen. Het INS element bevat de inhoud welke is toegevoegd, het DEL element inhoud welke is verwijderd. Het Q element kan gebruikt worden voor geciteerde tekst. De browser zou deze tussen aanhalingstekens moeten plaatsen. Hoewel HTML 4.0 daarvoor geen elementen kent, zijn er toch mogelijkheden voor woordafbreken en het bij elkaar houden van tekst.

Fysieke tekstopmaak-elementen

De volgende elementen worden gerekend tot de fysieke tekstopmaak-elementen: B, I, S, STRIKE, TT, U, BIG, SMALL, SUB en SUP. Je gebruikt ze, als je de weergave van de tekst wilt vastleggen. Dit is <B>vet</B> Dit is <I>cursief</I> Dit is <S>doorgestreept</S> Ook dit is <STRIKE>doorgestreept</STRIKE> Deze tekst heeft een <TT>vaste letterafstand</TT> Dit is <U>onderstreept</U> Dit is <BIG>groot</BIG> Dit is <SMALL>klein</SMALL> Dit is <SUB>subscript</SUB> Dit is <SUP>superscript</SUP> Dit is vet Dit is cursief Dit is doorgestreept Ook dit is doorgestreept Deze tekst heeft een vaste letterafstand Dit is onderstreept Dit is groot Dit is klein Dit is subscript Dit is superscript

Tot de fysieke tekstopmaak-elementen kan ook het door Netscape Navigator gentroduceerde BLINK element gerekend worden, waarmee tekst knipperend kan worden weergegeven. Omdat het element geen deel uitmaakt van HTML 4.0 en knipperende tekst bovendien door veel gebruikers als hinderlijk wordt ervaren, wordt geadviseerd geen gebruik van dit element te maken.

De verschillende fysieke tekstopmaak-elementen kunnen ook gecombineerd gebruikt worden. Dit is <B><TT>vet en typemachine tekst</TT></B> en <U><I>onderstreept en cursief</I></U>. In de browser zie je: Dit is vet en typemachine tekst en onderstreept en cursief.

Logische tekstopmaak-elementen
De volgende elementen worden gerekend tot de logische tekstopmaak-elementen: EM, STRONG, CITE, DFN, CODE, SAMP, KBD en VAR. Je gebruikt ze, als je niet de exacte weergave wilt bepalen, maar vooral wilt aangeven om wat voor soort tekst het gaat. De browser (of als die mogelijkheid er is, de gebruiker via de instellingen van de browser) bepaalt vervolgens hoe de ingesloten tekst wordt weergegeven. Deze tekst heeft <EM>nadruk</EM> Deze tekst heeft <STRONG>extra nadruk</STRONG> Zoals in de <CITE>Handleiding HTML</CITE> te lezen valt ... Deze <DFN>term</DFN> Dit is <CODE>computercode</CODE> Dit is een <SAMP>voorbeeld van de output</SAMP> van een programma Deze <KBD>tekst</KBD> moet de gebruiker vanaf het toetsenbord invoeren Dit is een <VAR>variabele</VAR> Deze tekst heeft nadruk Deze tekst heeft extra nadruk Zoals in de Handleiding HTML te lezen valt ... Deze term wordt gedefinieerd Dit is computercode Dit is een voorbeeld van de output van een programma Deze tekst moet de gebruiker vanaf het toetsenbord invoeren Dit is een variabele

Lettertypen
De grootte van de tekst (meestal korte stukjes, soms zelfs een enkel woord of een enkele letter) kan bepaald worden met behulp van het SIZE attribuut van het FONT element. Als waarde van het SIZE attribuut kan een getal van 1 t/m 7 gebruikt worden om de absolute lettergrootte vast te leggen, of een getal gecombineerd met een "+" of een "-" om de grootte van de letters in ten opzichte van de standaard lettergrootte te bepalen. <P>De absolute lettergrootte is <FONT size="1">SIZE="1"</FONT> <FONT size="2">SIZE="2"</FONT> ..</P> In de browser zie je: De absolute lettergrootte is SIZE="1" SIZE="2" SIZE="3" SIZE="4"

SIZE="5"

SIZE="6" SIZE="7"
<P>De grootte .. lettergrootte: <FONT SIZE="-2">SIZE="-2"</FONT> <FONT SIZE="-1">SIZE="-1"</FONT> ..</P> In de browser zie je: De grootte kan ook opgegeven worden in verhouding tot de standaard lettergrootte: SIZE="-2" SIZE="-1"

SIZE="+1" SIZE="+2"

SIZE="+3" SIZE="+4"

Houd er rekening mee, dat bij sommige browsers de gebruiker de weergave van de, via het SIZE attribuut gedefinieerde, lettergrootte kan uitzetten. Om de structuur van je document helder te houden, kun je voor koppen daarom het beste altijd een Hx element gebruiken.

Het FACE attribuut van het FONT element bepaalt het lettertype dat gebruikt wordt voor de tekst. De waarde van het FACE attribuut is de naam van n lettertype, of meerdere lettertypen gescheiden door een komma. Een tweede lettertype wordt gebruikt, als het eerste niet aanwezig is op het systeem van de gebruiker. Als geen van de opgegeven lettertypen is genstalleerd, wordt het standaard lettertype van de browser gebruikt. <FONT SIZE="5" FACE="Garamond,Times New Roman">Afhankelijk .. van de browser.</FONT>. In de browser zie je:

Afhankelijk van de beschikbaarheid van de opgegeven lettertypen, wordt deze tekst weergegeven in Garamond, Times New Roman, of het standaard lettertype van de browser.

Het COLOR attribuut van het FONT element bepaalt de kleur van de tekst. <FONT SIZE="6" COLOR="#FF0000" FACE="Courier New">Deze tekst wordt weergegeven in rood.</FONT>. In de browser zie je:

Deze tekst wordt weergegeven in rood.

Het spreekt voor zich dat je bij het gebruik van het COLOR attribuut rekening houdt met de achtergrondkleur, welke je via het BGCOLOR attribuut van het BODY element hebt gedefinieerd. Daarmee heb je echter nog niet gewaarborgd dat de weergave in alle gevallen goed is. Veel browsers hebben de mogelijkheid in te stellen dat uitsluitend de door de gebruiker zelf opgegeven kleuren gebruikt mogen worden (dat is bijvoorbeeld van belang als de gebruiker een verminderd gezichtsvermogen heeft). Niet elke browser doet dat echter op een correcte manier. Bij Microsoft Internet Explorer vanaf versie 4.0, Netscape Navigator vanaf versie 6.0, Mozilla, Firefox en Opera vanaf versie 2.1 geldt de keuze van de gebruiker voor alle kleuren. Bij Netscape Navigator t/m versie 4 echter hebben de kleuren van de gebruiker alleen prioriteit over de via het BODY element gedefinieerde kleuren. Een door de auteur via het COLOR attribuut vastgelegde kleur wordt niet gewijzigd in de kleur van de gebruiker. Dat kan als resultaat hebben dat de tekst waarvoor het COLOR attribuut is gebruikt, moeilijk of niet leesbaar wordt. Rechtsboven is de weergave door de browser te zien en linksboven een schermafdruk van de bedoelde weergave. Daaronder de weergave wanneer de browser de gebruikerskleuren moet weergeven. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Weergave met gebruikerskleuren (zwart voor de tekst en wit voor de achtergrond) door Microsoft Internet Explorer 4 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 2.1 en hoger

Weergave met gebruikerskleuren (zwart voor de tekst en wit voor de achtergrond) door Netscape Navigator t/m versie 4 Het gebruik van Netscape Navigator 4 of lager is inmiddels tamelijk beperkt. Wanneer je het desondanks belangrijk vindt dat de weergave ook in deze browser correct is, dan is het verstandig in ieder geval een kleur voor de tekst te kiezen die de minste kans op problemen heeft. Omdat de meeste gebruikers als standaard waarschijnlijk een lichte achtergrond toepassen (wit, licht grijs, geel), zal dat het beste een donkere kleur kunnen zijn.

Het FONT element kan ook gecombineerd gebruikt worden met de fysieke tekstopmaak-elementen, bijvoorbeeld om de tekst vet, cursief of onderstreept weer te geven. <P><FONT SIZE="+1" COLOR="red">De tekst .. kan ook <B>vet</B>, <I>cursief</I> of <U>onderstreept</U> weergegeven worden.</FONT></P> In de browser zie je:

De tekst ingesloten door het FONT element kan ook vet, cursief of onderstreept weergegeven worden.
Het FONT element is een inline element en mag slechts andere inline elementen bevatten (zoals in het voorbeeld hiervoor B, I en U). Het FONT element kan dus niet gebruikt worden om in n keer de kenmerken van de tekst in een heel document of bijvoorbeeld een tabel vast te leggen.

Basislettertype
Het BASEFONT element wordt gebruikt om de standaard lettergrootte, -kleur en -type voor een document vast te leggen. In het volgende voorbeeld zijn de attributen SIZE, COLOR en FACE aan het BASEFONT element toegevoegd. <BASEFONT SIZE="5" COLOR="fuchsia" FACE="Lucida Sans,Arial"> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Wanneer het BASEFONT element is gebruikt, geldt de waarde van het SIZE attribuut als beginwaarde voor de relatieve waarden van het SIZE attribuut van het FONT element. <BASEFONT SIZE="4"> <P>In dit document .. element: <FONT SIZE="-3">SIZE="-3"</FONT> <FONT SIZE="-2">SIZE="-2"</FONT> ... lt;FONT SIZE="+3">SIZE="+3"</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Voor het SIZE attribuut is de ondersteuning niet altijd zoals verwacht. Zo negeren Microsoft Internet Explorer en Netscape Navigator 4 en lager de via het BASEFONT element gedefinieerde grootte in tabellen en houden in plaats daarvan de standaard lettergrootte van de browser aan. Opera houdt in het hele document de standaard lettergrootte van de browser aan. Pas als het SIZE attribuut van het FONT element wordt gebruikt, geldt de waarde van het SIZE attribuut van het BASEFONT element als beginwaarde.

De attributen COLOR en FACE van het BASEFONT element worden alleen door Microsoft Internet Explorer ondersteund. Wanneer je de kleur van alle tekst in een document in n keer wilt vastleggen, dan kun je daarom beter gebruik maken van het TEXT attribuut van het BODY element (zie voor een toelichting het onderdeel Structuur document). Het BASEFONT element wordt helemaal niet (meer) ondersteund door Netscape Navigator 6.0 en hoger, Mozilla en Firefox. Al met al biedt het BASEFONT element weinig garantie dat de weergave in de verschillende browsers is, zoals je wenst. Je kunt er daarom beter voor kiezen, gebruik te maken van stijlen.

Het gebruik van stijlen

Om te komen tot een betere scheiding tussen de structuur van een document en de presentatie ervan, heeft een aantal van de fysieke tekstopmaak-elementen (S, STRIKE en U) en de elementen FONT en BASEFONT in HTML 4.0 het label afgekeurd gekregen. In plaats daarvan is het de bedoeling dat gebruik gemaakt wordt van stijlen. Cascading Style Sheets is de taal, waarmee je stijlen kunt definiren voor HTML-elementen. Er zijn stijleigenschappen, welke hetzelfde effect hebben als de beschreven fysieke tekstopmaak-elementen en de elementen FONT en BASEFONT. Hierna wordt dat in een aantal voorbeelden gedemonstreerd. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd, die bepaalt dat de tekst ingesloten door het STRONG element niet alleen met extra nadruk, maar via de background-color eigenschap ook met een gele achtergrond moet worden weergegeven. Omdat het verstandig is altijd een combinatie van voor- en achtergrondkleur te gebruiken, is bovendien de color eigenschap opgenomen. <P>Met <STRONG STYLE="color: #000000; background-color: #FFFF99">Cascading Style Sheets</STRONG> krijg ...</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In het volgende voorbeeld worden de eigenschappen font-size, color (gecombineerd met backgroundcolor) en font-family gebruikt in plaats van het FONT element met de attributen SIZE, COLOR en FACE. <P STYLE="font-size: 21px; color: #FF0000; background-color: #FFFFFF; font-family: Arial, sans-serif;">Deze opmaak is ...</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In plaats van de fysieke tekstopmaak-elementen B, I, U, TT en BIG kunnen de eigenschappen fontweight, font-style, text-decoration, font-family en font-size gebruikt worden. <P>Dit is <SPAN STYLE="font-weight: bold;">vet</SPAN>, <SPAN STYLE="fontstyle: italic;">cursief</SPAN>, <SPAN STYLE="text-decoration: underline;">onderstreept</SPAN>, <SPAN STYLE="font-family: monospace;">vaste letterafstand</SPAN> en <SPAN STYLE="font-size: large;">groot</SPAN></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer de stijlen betrekking hebben op het hele document of op meerdere documenten, dan ligt het niet voor de hand ze vast te leggen via een inline stijl. Je kunt ze dan beter opnemen in een stijlblok in de head van het document, of in een extern stijlblad. In het volgende voorbeeld is in het stijlblok met de eigenschappen font-family, color en background-color een stijl gedefinieerd voor het BODY element. Daarmee worden het lettertype en de voorgrond- en achtergrondkleur voor het document vastgelegd. Voor het P element is daarnaast de lettergrootte gedefinieerd met de font-size eigenschap. <STYLE TYPE="text/css"> <!-BODY { font-family: Arial, Helvetica, sans-serif; color: #000000; background-color: #FFFF99; } P { font-size: 13px; } --> </STYLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Afkortingen
Nieuwe elementen in HTML 4.0 zijn ABBR en ACRONYM. Ze hebben betrekking op afkortingen. Het TITLE attribuut van deze elementen kan gebruikt worden om de lange vorm van de afkorting vast te leggen, welke browsers kunnen weergeven in de vorm van een tooltip. Daarnaast kan met behulp van stylesheets (CSS 2) aan bijvoorbeeld een spraaksynthesizer aanwijzingen over de uitspraak gegeven worden.

Voor gewone afkortingen (zoals etc., HTML en incl.) wordt ABBR gebruikt. In het speciale geval dat de afkorting een letterwoord is, gevormd is uit n of meer beginletters van een aantal woorden en bovendien zelf een uitspreekbaar woord is, kan ACRONYM toegepast worden. Voorbeelden van letterwoorden (of acroniemen) zijn cara (chronische aspecifieke respiratoire aandoeningen) en radar (radio detection and ranging). Om de bezoeker te wijzen op de extra functionaliteit, plaatsen sommige browsers een onderbroken lijn onder de door de elementen ABBR en ACRONYM ingesloten tekst. Ten behoeve van de weergave in browsers die dat niet doen (bijvoorbeeld Microsoft Internet Explorer), kun je de afkorting met behulp van een stijl afwijkend maken van de gewone tekst. In de volgende voorbeelden is daarvoor een kleur gebruikt. <P>De afkorting <ABBR STYLE="color: #FF0000; background-color: #FFFFFF;" TITLE="HyperText Markup Language">HTML</ABBR> is geen letterwoord.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

<P>De afkorting <ACRONYM STYLE="color: #FF0000; background-color: #FFFFFF;" TITLE="chronische aspecifieke respiratoire aandoeningen">cara</ACRONYM> is een letterwoord.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

In de voorbeelden hiervoor zijn, om de ondersteuning door de browser te kunnen beoordelen, voor de stijl van de elementen ABBR en ACRONYM de vrij algemeen ondersteunde stijleigenschappen color en background-color gebruikt. Je kunt ook een andere wijze van presentatie kiezen. In het volgende voorbeeld wordt de afkorting (met behulp van de border-bottom eigenschap) onderstreept met een lijn met puntjes en (met behulp van de cursor eigenschap) voorzien van een aangepaste muisaanwijzer. <P>Bestanden kun je uploaden met een <ABBR STYLE="border-bottom: dotted 0.05em; cursor: help;" TITLE="File Transfer Protocol">FTP</ABBR>programma.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Revisie-informatie

HTML 4.0 biedt de mogelijkheid om revisie-informatie in een document op te nemen. Dat kan bijvoorbeeld handig zijn als door meerdere mensen gezamenlijk aan het document gewerkt wordt. Het INS element gebruik je om aan te geven dat de ingesloten tekst is toegevoegd, het DEL element om duidelijk te maken dat de ingesloten tekst verwijderd wordt. De browser moet deze elementen op een passende manier weergegeven. De meeste browsers doen dat door toegevoegde tekst onderstreept en te verwijderen tekst doorgestreept weer te geven. <P>... dat de ingesloten tekst is <INS>ingevoegd</INS> of wordt <DEL>verwijderd</DEL>.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De attributen CITE en DATETIME kun je gebruiken om extra informatie op te nemen. Het CITE attribuut verwijst naar een document, waarin de wijzigingen nader worden toegelicht. Met het DATETIME attribuut kan het tijdstip van wijziging worden vastgelegd. <P>... een datum van <INS CITE="http://www.handleidinghtml.nl/revisie.html" DATETIME="2002-0315T14:00:00Z+01:00">toevoegen</INS> of <DEL CITE="http://www.handleidinghtml.nl/revisie.html" DATETIME="2002-0315T14:00:00Z+01:00">verwijderen</DEL> ...</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De attributen CITE en DATETIME worden alleen door Netscape Navigator 6.1 en hoger, Mozilla en Firefox ondersteund. Je kunt in deze browser de informatie bekijken als je met de rechter muisknop op de ingevoegde of verwijderde tekst klikt en kiest voor properties (of eigenschappen). Je krijgt dan het volgende te zien:

Door Microsoft Internet Explorer vanaf versie 4, Mozilla, Netscape Navigator vanaf versie 6.1 en Opera vanaf versie 5 wordt het TITLE attribuut voor de elementen DEL en INS ondersteund, dat extra informatie in de vorm van een tooltip kan weergeven. <P>... bij ingevoegde of <DEL TITLE="Verwijderd na bespreking op 10 november.">te verwijderen</DEL> tekst ...</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Browsers die de elementen INS en DEL niet kennen, geven de inhoud op de gebruikelijke wijze weer. Dus niet onder- of doorgestreept. Het is daarom verstandig deze elementen alleen te gebruiken in situaties, waarvan je weet dat elke browser ze ondersteunt (bijvoorbeeld in een intranet). De elementen INS en DEL kunnen niet alleen als inline element gebruikt worden, maar ook als element op blokniveau. Wanneer ze als inline element worden gebruikt, dan mogen ze geen elementen op blokniveau bevatten.

Citeren
Het BLOCKQUOTE element (dat toegelicht wordt in het onderdeel Structureren van tekst) is bedoeld voor blokken tekst, welke uit een andere bron geciteerd worden. Vrijwel alle browsers doen dit door zo'n blok tekst zowel links als rechts te laten inspringen. Daarnaast wordt de door het BLOCKQUOTE element ingesloten tekst voorafgegaan en gevolgd door een blanco regel. Voor (korte stukjes) inline tekst is nieuw in HTML 4.0 het Q element opgenomen. De door het Q element ingesloten tekst moet door de browser tussen aanhalingstekens worden geplaatst. Bovendien moet de browser het soort aanhalingstekens dat gebruikt wordt, laten afhangen van de via het LANG attribuut gedefinieerde taal. In veel talen is het gebruikelijk een citaat tussen dubbele aanhalingstekens te plaatsen en een citaat binnen een citaat tussen enkele aanhalingstekens. Dit wordt alleen gedaan door Firefox 1.5 en hoger. Netscape Navigator 6.0 en hoger, Mozilla, Firefox 1.0 en Opera 4 en hoger plaatsen een citaat altijd tussen dubbele aanhalingstekens. Microsoft Internet Explorer 4 en hoger geeft nooit aanhalingstekens weer. <P>... bedoeld voor <Q>short quotations ... breaks</Q>.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Het CITE attribuut kan gebruikt worden om te verwijzen naar het document, dat de bron is van het citaat.

<P>... bedoeld voor <Q CITE="http://www.w3.org/TR/html4/struct/text.html#h-9.2.2" LANG="en">short quotations ... breaks</Q>.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Op dit moment wordt dit attribuut alleen door Netscape Navigator 6.1 en hoger, Mozilla en Firefox ondersteund. Je kunt in deze browsers de informatie bekijken als je met de rechter muisknop op het citaat klikt en kiest voor properties (of eigenschappen). Je krijgt dan het volgende te zien:

Woordafbreken
Een browser heeft geen ingebouwd mechanisme om woorden af te breken. Daardoor begint en eindigt een regel standaard altijd met een compleet woord. In de meeste gevallen is dat geen probleem, maar bij lange woorden kan dat leiden tot een minder fraaie weergave. Bij eenzijdig uitgelijnde tekst omdat er aan het eind (of begin) van de regel een grote witruimte ontstaat, bij tweezijdig uitgevulde tekst omdat de ruimte tussen de woorden erg groot wordt. Je kunt dat voorkomen, door in het woord n of meer keer de code voor een zacht koppelteken (soft hyphen) op te nemen. Deze code, &shy; of &173;, zorgt ervoor dat het woord als dat nodig is wordt afgebroken en een afbreekstreepje wordt ingevoegd. <P>... tekstverwerkingsprogramma's ...</P> <P>... tekst&shy;verwerkings&shy;programma's ...</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De code voor het zachte koppelteken wordt correct ondersteund door Microsoft Internet Explorer 5.0 en hoger en door Opera 7.2 en hoger. Netscape Navigator 6 en hoger, Mozilla, Firefox en Opera 4 t/m 7.1 ondersteunen &shy; en &173; helemaal niet en geven de tekst dus weer zoals dat standaard gebeurt. Alleen bij lagere versies van Microsoft Internet Explorer, Netscape Navigator en Opera is de weergave niet correct. Zie voor meer informatie het onderdeel Speciale karakters.

Tekst bij elkaar houden

Soms wil je voorkomen dat er op een bepaalde plaats een overgang is naar een nieuwe regel. Je zou dan gebruik kunnen maken van het NOBR element. De door dit element ingesloten tekst mag door de browser niet worden afgebroken en moet dus op n regel geplaatst worden. In het volgende code wordt het NOBR element gebruikt om te voorkomen dat de omschrijving van een hyperlink wordt afgebroken: <A HREF="http://www.handleidinghtml.nl"><NOBR>Handleiding HTML</NOBR></A> Het NOBR element maakt geen deel uit van een HTML-specificatie. Wanneer je wilt voorkomen dat je documenten foutmeldingen opleveren bij de validatie van de HTML-code, dan kun je dit elementen dus beter niet toepassen. Er zijn echter twee goede alternatieven. Het eerste alternatief voor het NOBR element is het gebruik maken van het speciale teken &nbsp; (nonbreaking space, ofwel niet-afbrekende spatie). Wanneer je dit speciale teken zonder verdere spaties tussen twee woorden plaatst, dan worden deze woorden samen als n woord gezien en wordt er tussenin niet afgebroken. <A HREF="http://www.handleidinghtml.nl">Handleiding HTML</A> <A HREF="http://www.handleidinghtml.nl">Handleiding&nbsp;HTML</A> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Bij het tweede alternatief voor het NOBR element maak je gebruik van stylesheets. Voor het deel van de tekst dat niet afgebroken mag worden, definieer je een stijl met de white-space eigenschap, die je de waarde nowrap geeft. <A HREF="http://www.handleidinghtml.nl">Handleiding HTML</A> <A HREF="http://www.handleidinghtml.nl" STYLE="white-space: nowrap;">Handleiding HTML</A> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Wanneer je gebruik maakt van n van de beschreven mogelijkheden om tekst bij elkaar te houden, is het verstandig dat alleen te doen voor korte stukken tekst. Daarmee voorkom je, dat de bezoeker genoodzaakt wordt de horizontale schuifbalk te moeten gebruiken om alle tekst te kunnen lezen. De mogelijkheid met &nbsp; wordt door alle browsers ondersteund, die met behulp de stijleigenschap white-space alleen door Microsoft Internet Explorer 5.5 en hoger, Netscape Navigator 6 en hoger, Opera 4.0 en hoger en door Mozilla en Firefox.

Een aantal browsers zien woorden met een koppelteken als n woord, dat aan het eind van de regel niet mag worden afgebroken. Microsoft Internet Explorer en Opera 6.0 en hoger breken woorden met een koppelteken die niet geheel op een regel passen, daarentegen na het streepje wel af. Wanneer je dat wilt voorkomen, dan kun je uiteraard gebruik maken van de hiervoor beschreven oplossing om met behulp van een stylesheet tekst bij elkaar te houden. Als alternatief wordt het gewone koppelteken ook wel vervangen door een niet-afbrekend koppelteken (non-breaking hyphen). De code voor dat speciale karakter is in decimale notatie &#8209; en in hexadecimale Unicode notatie &#x2011;. niet-afbrekende niet&#8209;afbrekende niet&#x2011;afbrekende <SPAN STYLE="white-space: nowrap;">niet-afbrekende</SPAN> Rechts is de weergave door de browser te zien en links een schermafdruk van de weergave door Microsoft Internet Explorer 7.0. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De code voor het niet-afbrekende koppelteken wordt alleen ondersteund door Microsoft Internet Explorer 5.5 en hoger, Netscape Navigator 7.0 en hoger, Mozilla, Firefox en Opera 7.2 en hoger. Browsers die &#8209; en &#x2011; niet kennen, geven helemaal geen streepje weer, maar laten in

plaats ervan bijvoorbeeld een vraagteken of een open rechthoek zien. Je moet er verder rekening mee houden, dat het niet alleen af van de browser afhangt of &#8209; en &#x2011; worden weergeven, maar ook van de combinatie browser, systeem en genstalleerde lettertypen (in een testsituatie op een Windows 98SE systeem geeft Opera 7.2 en hoger het niet-afbrekende koppelteken niet weer, terwijl de eerder genoemde versies van Microsoft Internet Explorer, Netscape Navigator, Mozilla en Firefox dat op hetzelfde systeem wel doen). Voorzichtigheid bij het gebruik van het niet-afbrekende koppelteken is dus geboden.

Introductie hyperlinks
Hyperlinks (of hypertext links) zijn een essentieel onderdeel van HTML (Hypertext Markup Language). Ze maken het mogelijk dat je, door een simpele klik van de muis, snel van de ene locatie naar de andere surft. Een nieuwe bestemming kan zich bevinden op een andere plaats in hetzelfde document, maar het kan ook een ander document betreffen. Dat andere document kan zich bevinden op de lokale server, maar ook op een server elders op de wereld. Naast documenten kan het bovendien gaan om andere soorten bestanden, zoals afbeeldingen en geluidsfragmenten, of software die je wilt laten downloaden. Een hyperlink maak je met het A element (Anchor). Met het HREF attribuut definieer je op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. Als je werkt met frames, kun je met het TARGET attribuut aangeven in welk frame een document geopend moet worden. Het TARGET attribuut kun je ook gebruiken als een document in een nieuw venster moet worden geopend. Het NAME attribuut van het A element gebruik je om een (onzichtbaar) anker in een document te plaatsen. Dat anker kun je vervolgens gebruiken als bestemming van een hyperlink. Met het BASE element kun je een basisadres voor de URI's in een document te definiren. De kleur waarmee de hyperlinks worden weergegeven, kun je bepalen met de attributen van het BODY element. Meer mogelijkheden voor de weergave heb je als je stijlen definieert met behulp van stylesheets. Als je het TITLE attribuut opneemt van het A element, kun je de hyperlink voorzien van een korte omschrijving in een tooltip.

Link naar bestand

Een hyperlink maak je met het A element, waaraan je het HREF attribuut toevoegt. Het HREF attribuut geeft aan op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. De waarde van het HREF attribuut is een zogenoemde Uniform Resource Identifier (URI). Een URI is een compacte reeks karakters, waarmee een bron (resource) gedentificeerd kan worden. De aanduiding URI is nieuw in HTML 4.0, daarvoor werd gebruik gemaakt van het begrip URL, Uniform Resource Locator. URL's worden nu gezien als een ondergroep van de meer algemene URI's. Bij een URL wordt een bron (bijvoorbeeld het te openen of te downloaden bestand) gedentificeerd door de wijze waarop je er toegang tot kan krijgen. Het gaat daarbij enerzijds om de methode die je moet gebruiken om er te komen en anderzijds om de locatie waar het zich op het internet bevindt. Bij het maken van een hyperlink naar een bestand zijn de belangrijkste methoden die je kunt gebruiken http (HyperText Transfer Protocol) en ftp (File Transfer Protocol). Voor deze methoden is de opbouw van de URI:

protocol://host/path Het protocol zal meestal http zijn en alleen ftp, als het gevraagde bestand zich op een speciale FTPserver bevindt. Host specificeert het adres van de server, waarop zich het gevraagde bestand bevindt. Het is meestal een domeinnaam, maar mag ook een IP-adres zijn (zie ook de beschrijving van het HREF attribuut). Path geeft aan hoe het gevraagde bestand op de server gevonden kan worden: in welke directory en onder welke bestandsnaam. Het is niet altijd nodig een complete URI te gebruiken. Wanneer je verwijst naar de beginpagina van een site, dan is het voldoende alleen de domeinnaam op te nemen. Meestal wordt dan automatisch een bestand met de naam "index.html" geopend (mits dat bestaat natuurlijk). <A HREF="http://www.handleidinghtml.nl">Handleiding HTML</A> In de browser zie je: Handleiding HTML Verwijs je niet naar de host, maar naar een directory op de server, dan beindig je de URI met een slash: <A HREF="http://www.handleidinghtml.nl/html/">HTML-gedeelte Handleiding HTML</A> In de praktijk wil je vaak een verwijzing naar een specifiek bestand in een bepaalde directory van een server opnemen. Bijvoorbeeld: <A HREF="http://www.handleidinghtml.nl/html/inhoud-html.html">Inhoud HTMLgedeelte</A> Wanneer de link verwijst naar een bestand op de lokale server, is het voldoende om alleen het path op te nemen. Daarbij zijn er de volgende mogelijkheden: staat het bestand in dezelfde directory als het huidige document, dan hoef je slechts de naam van het bestand op te nemen: <A HREF="frames.html">Frames</A>

staat het bestand in een subdirectory van de huidige directory staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een slash en daarna de naam van het bestand: <A HREF="html/frames/frames.html">Frames</A>

bevindt het bestand zich in een hogere directory dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op: <A HREF="../frames.html">Frames</A>

een combinatie van de laatste twee mogelijkheden gebruik je bijvoorbeeld als je moet verwijzen naar een bestand in een directory, die niet in dezelfde lijn ligt: <A HREF="../html/frames/frames.html">Frames</A>

verwijs je niet naar een bestand, maar naar een directory, dan beindig je de URI met een slash: <A HREF="html/">HTML-gedeelte</A>

Onderbreek een hyperlink, ook al is de URI nog zo lang, niet met harde returns (met Enter naar de volgende regel gaan). Zo'n harde return kan door de browser opgevat worden als spatie die ook onderstreept wordt. Bijvoorbeeld: <A HREF="frames.html">Frames </A> wordt door de browser weergegeven als: Frames en niet zoals bedoeld als Frames.

In de voorbeelden hiervoor is steeds een link gemaakt naar een HTML-document. Je kunt echter ook hyperlinks maken naar andere typen bestanden, zoals zip-bestanden, exe-bestanden, afbeeldingen (gif-, jpg- of png-bestanden), multimedia objecten (wav-, mp3-, swf- en mov-bestanden), Worddocumenten (doc-bestanden) en Powerpoint presentaties (ppt-bestanden). Sommige bestanden zal de browser direct openen. Naast HTML-documenten geldt dat bijvoorbeeld voor afbeeldingen. Bij andere soorten bestanden (zip- en exe-bestanden) zal de browser normaal gesproken met een voorstel tot opslaan komen. In de overige gevallen hangt het er vanaf of de bezoeker een plug-in of programma heeft genstalleerd dat iets met het bestand kan. Een Word-document kan bijvoorbeeld met de juiste plug-in direct in de browser geopend worden. Wanneer zo'n plug-in ontbreekt zal de browser voorstellen het doc-bestand te openen in Word zelf. Indien ook Word niet genstalleerd is, rest de browser weinig anders dan te komen met het aanbod het bestand op te slaan. Voor Powerpoint presentaties en multimedia objecten geldt een vergelijkbaar verhaal.

Tussen de activering en de beindiging van het A element in de voorbeelden in dit onderdeel is steeds met tekst een omschrijving geplaatst. Als alternatief voor tekst kun je echter ook een afbeelding gebruiken. Een voorbeeld daarvan wordt in het onderdeel Afbeeldingen gegeven.

Het A element is een inline element en moet dus geplaatst worden binnen een element op blokniveau (bijvoorbeeld P).

Downloaden bestand
Om een bezoeker in de gelegenheid te stellen een bestand te downloaden, hoef je in principe niet meer te doen dan het maken van een gewone hyperlink. Voor een zip-achiefbestand, dat in dezelfde directory op de server staat als het HTML-document, ziet zo'n hyperlink er als volgt uit: <A HREF="bestand.zip">Download bestand</A> Wanneer het te downloaden bestand zich in een andere directory bevindt, dan hanteer je de regels die bij de algemene uitleg van hyperlinks zijn toegelicht. Bijvoorbeeld:

<A HREF="../pub/bestand.zip">Download bestand</A> Als het bestand zich op een FTP-server bevindt, dan heeft de link bijvoorbeeld de volgende opbouw: <A HREF="ftp://ftp.domein.nl/pub/bestand.zip">Download bestand</A> Als je de naam van het bestand weglaat, krijgt de bezoeker een lijst te zien met alle bestanden in de opgegeven directory 'pub' en kan hij of zij zelf n of meer bestanden kiezen om te downloaden. <A HREF="ftp://ftp.domein.nl/pub/">Download bestand(en)</A> In de voorgaande voorbeelden gaat het om een link naar een FTP-server, waar vanaf je anoniem kunt downloaden. Wanneer het noodzakelijk is een link te maken naar een FTP-server waarvoor een gebruikersnaam en een wachtwoord vereist zijn, dan heeft de link de volgende opbouw: <A HREF="ftp://gebruiker:wachtwoord@ftp.domein.nl/pub/">Download bestand(en)</A> Als je niet wilt dat de gebruikersnaam en het wachtwoord bij iedereen bekend worden, is het verstandig een dergelijke link niet zomaar open en bloot op een voor iedereen toegankelijke website te plaatsen.

Als de bezoeker op een hyperlink van een zip-bestand klikt, zal elke browser een venster openen waarin gevraagd wordt of het bestand moet worden opgeslagen of geopend met het bijbehorende programma. Zoals al eerder is aangegeven zal dat echter niet bij alle bestandstypen het geval zijn. HTMLdocumenten en bijvoorbeeld afbeeldingen zal de browser zelf openen, voor andere bestandstypen hangt het af van de op het systeem van de bezoeker genstalleerde plug-ins of programma's. Als auteur kun je niet benvloeden wat de browser met een bepaald type bestand doet. Wil je er zeker van zijn dat de bezoeker het bestand kan opslaan, dan is het de beste oplossing het bestand te verpakken in een zip-archief. Heb je daar geen mogelijkheid voor, of verwacht je dat de bezoeker het zip-bestand niet kan uitpakken, dan rest je weinig anders dan de bezoeker via de tekst van de hyperlink te adviseren de rechter muisknop te gebruiken en te kiezen voor 'Opslaan als'.

Basis-URI
De URI van een hyperlink kan absoluut of relatief zijn. In een absolute URI zijn in ieder geval het te gebruiken protocol en het adres van de server opgenomen, een relatieve URI bevat alleen het path op de server. Wanneer een hyperlink met een relatieve URI geopend moet worden, gebruikt de browser de URI van het huidige document als basisadres en bepaalt daarmee de absolute URI van de link. Is de URI van het huidige document: http://www.handleidinghtml.nl/html/hyperlinks/hyperlinks01.html en is deze hyperlink opgenomen: <A HREF="../frames/frames.html">Frames</A> dan weet de browser dat de absolute URI van de link de volgende is: http://www.handleidinghtml.nl/html/frames/frames.html

Wanneer veel links in een document verwijzen naar dezelfde site of directory, dan kan het handig zijn in

de head van het document het BASE element op te nemen en met het HREF attribuut een basis-URI definiren. Deze basis-URI wordt door de browser als basisadres gebruikt voor de relatieve URI's, in plaats van de URI van het huidige document. De basis-URI moet absoluut zijn en eindigen met een "/". Een voorbeeld van het BASE element is: <BASE HREF="http://www.handleidinghtml.nl/css/"> Staat in het document, dat bovenstaand BASE element bevat, deze hyperlink: <A HREF="inhoud-css.html">Inhoud CSS</A> dan gaat de browser uit van de volgende absolute URI: http://www.handleidinghtml.nl/css/inhoud-css.html Wanneer de basis-URI betrekking heeft op een site op een andere server, kunnen naar bestanden op deze server relatieve URI's opgenomen worden. Verwijzingen naar bestanden op de lokale server mogen in dit geval uiteraard niet meer relatief zijn.

Bestemming binnen document

Soms wil je niet zomaar verwijzen naar een ander document, maar naar een specifieke plaats in een document. Dat kan als je eerst de plaats, waarnaar je wilt verwijzen, markeert met een A element waaraan het NAME attribuut is toegevoegd. Zo'n markering (of anker) ziet er bijvoorbeeld als volgt uit: <A NAME="inhoud"></A> In dit voorbeeld heeft de markering de naam "inhoud". Als je binnen een document een link naar een gemarkeerde plaats wilt maken, gebruik je als URI een hekje (#) gevolgd door de naam van de markering (ofwel de waarde van het NAME attribuut van de markering). Een link naar de markering in het voorbeeld hiervoor ziet er dus als volgt uit: <A HREF="#inhoud">Inhoud Hyperlinks</A> De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks bovenaan deze pagina. Dit soort linken werken overigens niet alleen binnen een document. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document, in dezelfde of een andere directory, of op een andere server. Als waarde van het HREF attribuut neem je in dat geval gewoon de verwijzing naar het betreffende document op (zie het onderdeel Link naar bestand) en zet daar het hekje en de naam van de markering achter. In het volgende voorbeeld verwijst de link naar het document "inhoud-htmlplus.html", dat zich in een hoger gelegen directory bevindt. De plaats van bestemming binnen dat document is aangegeven met een markering die de naam "hyperlinks" heeft. <A HREF="../inhoud-html-plus.html#hyperlinks">Inhoud Hyperlinks</A> De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks in de uitgebreide inhoudsopgave van het HTML-gedeelte van de Handleiding HTML.

Linken naar een plaats binnen een document zorgt ervoor dat de gebruiker niet het hele document hoeft door te scrollen, maar direct naar de gewenste informatie kan springen.

Document openen in frame

Wanneer je een document in een bepaald frame wilt openen, dan moet je het TARGET attribuut aan het A element toevoegen. Bijvoorbeeld: <A HREF="tabellen.html" TARGET="handleiding">Tabellen</A> Een uitgebreide toelichting op het gebruik van het TARGET attribuut is te vinden bij het onderdeel Frames. Als veel documenten geopend moeten worden in hetzelfde frame, kan het handig zijn het BASE element in de head van het document op te nemen en met het TARGET attribuut een basis-frame te definiren. Alle hyperlinks worden dan automatisch in het frame met de via het TARGET attribuut opgegeven naam geopend en alleen aan links die in een ander frame geopend moeten worden moet aan het A element het TARGET attribuut worden toegevoegd. Een voorbeeld van het BASE element is: <BASE TARGET="handleiding"> Volgens de regels moet aan het BASE element altijd het HREF attribuut worden toegevoegd met een absolute URI. Dat is geen probleem als het document online bekeken wordt, maar offline leidt de absolute URI tot de foutmelding dat er geen verbinding is (of de browser gaat automatisch online). Daarom wordt het BASE element vaak alleen met het TARGET attribuut gebruikt.

Document openen in nieuw venster

Soms wil je een document laten openen in een nieuw venster. Bijvoorbeeld omdat je de pagina waarop de hyperlink zich bevindt, beschikbaar wilt houden voor de bezoeker (in deze handleiding gebeurt dat om die reden met hyperlinks naar andere sites). De meest eenvoudige oplossing hiervoor is het toevoegen van het TARGET attribuut aan het A element met de waarde "_blank": <A HREF="http://www.w3.org/TR/html401/" TARGET="_blank">Specificatie HTML 4.01</A> Een voorbeeld van deze oplossing vind je in het onderdeel Frames. Het nieuwe venster is bij deze oplossing voorzien van alle toeters en bellen, zoals scrollbars en menu-, locatie-, knoppen- en statusbalk. Bovendien is het in de standaardgrootte van de browser. Voor een hyperlink naar een externe site zal dat geen probleem zijn (integendeel), maar in andere gevallen is een kleiner en wat kaler venster meer op z'n plaats (in deze handleiding worden veel voorbeelden in kleine zogenaamde pop-up vensters weergegeven). Wanneer je de aankleding en de grootte van het nieuwe venster zelf wilt bepalen, dan kom je er niet met alleen HTML en moet je gebruik maken van JavaScript. Een beschrijving van de mogelijkheden vind je bij de JavaScript voorbeelden.

Keuzelijst met hyperlinks

Wanneer je een groot aantal hyperlinks hebt, kan het gebruiken van een keuzelijst (ook wel dropdown of pulldown menu genoemd) een goed alternatief zijn voor een gewone opsomming.

Om met zo'n keuzelijst te kunnen werken moet je beschikken over een script dat het formulier kan verwerken. Dat kan een script zijn dat op de server draait, maar je kunt ook gebruik maken van een JavaScript dat je opneemt in het document en dat uitgevoerd wordt door de browser van de bezoeker. Server-side scripts voor de verwerking van keuzelijsten worden meestal niet als standaard script door providers ter beschikking gesteld aan hun klanten. Ook zullen providers meestal niet toestaan dat klanten zelf scripts draaien op hun server. Indien je geen eigen server hebt en toch een server-side script wilt gebruiken, dan kun je proberen een andere site te vinden die wel zo'n standaard script aanbiedt. Je kunt daarnaar zoeken bij The CGI Resource Index. Een nadeel van een (client-side) JavaScript is dat de keuzelijst niet werkt, als de browser van de bezoeker JavaScript niet ondersteunt of als de uitvoering van JavaScripts door de bezoeker is uitgezet. Om in alle gevallen een goede oplossing te bieden, kun je ervoor kiezen ook het formulier met de keuzelijst in een JavaScript te plaatsen en als alternatief een opsomming van de hyperlinks binnen een NOSCRIPT element op te nemen. Deze opsomming wordt dan alleen weergegeven als de JavaScripts niet kunnen worden uitgevoerd. Ter illustratie is een voorbeeld van een met JavaScript opgebouwde keuzelijst opgenomen. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Een toelichting op de JavaScripts die de keuzelijst weergeven en verwerken, wordt gegeven bij de JavaScript voorbeelden in deze handleiding. Wanneer de browser geen JavaScript kan of mag uitvoeren, dan kun je de bezoeker in plaats van de keuzelijst een rijtje met gewone hyperlinks bieden. De code hiervoor is: <NOSCRIPT><A HREF="document1.html">Document 1</A> | <A HREF="document2.html">Document 2</A> | <A HREF="document3.html">Document 3</A></NOSCRIPT>

Mailto-links
Met behulp van een mailto-link kun je een bezoeker van je pagina snel een bericht naar je laten sturen. In plaats van een http-URI in de eerdere voorbeelden, gebruik je nu een mailto-URI. Bijvoorbeeld: <A HREF="mailto:gebruiker@provider.nl">Webmaster</A> In de browser zie je: Webmaster. Wanneer je op deze link klikt, dan opent een browser die deze mogelijkheid ondersteunt, het (via de instellingen opgegeven) e-mailprogramma en plaats het e-mailadres is in het To-veld. De meeste browsers en e-mailprogramma's ondersteunen een parameter in een mailto-URI om het onderwerp (subject) van het e-mailbericht vast te leggen: <A HREF="mailto:gebruiker@provider.nl?SUBJECT=Reactie">Webmaster</A>

Bekijk de weergave van de link in de statusbalk van de browser: Reageer per e-mail Recente browsers en e-mailprogramma's ondersteunen vaak ook de mogelijkheid tot het opnemen van parameters om (een deel van) de inhoud van het bericht te bepalen, of een kopie in de vorm van een CC (copy carbon) of een BCC (blind copy carbon) naar een ander e-mailadres te sturen: <A HREF="mailto:gebruiker@provider.nl?CC=een@ander.nl">Webmaster</A> Wanneer je meerdere parameters gebruikt, dan zet je ze eenvoudig aan elkaar met een "&" ertussen: ?SUBJECT=Reactie&CC=een@ander.nl De code van een URI mag niet alle beschikbare tekens mag bevatten. De niet toegestane tekens moet je gecodeerd opnemen (zie de toelichting). Wanneer je een subject of een body voor het bericht wilt opnemen dat bestaat uit meerdere woorden, dan moet je de spaties bijvoorbeeld vervangen door "%20" en de dubbele punt door "%3A". ?BODY=Uw%20reactie%3A Of de hiervoor beschreven parameters goed werken hangt niet alleen af van de browser, maar ook van het gebruikte e-mailprogramma. Wanneer de bezoeker een e-mailprogramma gebruikt dat niet standaard bij de browser hoort, is de kans groter dat een parameter niet of niet goed werkt. Wanneer je de grootste zekerheid wilt hebben dat de mailto-hyperlink goed werkt, dan is het verstandig alleen gebruik te maken van de parameter SUBJECT. Voor CC en BCC in de mailto-hyperlink is er een goed alternatief. Vrijwel alle e-mailprogramma's ondersteunen de mogelijkheid om, gescheiden door een komma, meerdere e-mailadressen op te nemen (sommige e-mailprogramma's ondersteunen ook de puntkomma als scheidingsteken, maar anderen kunnen daar niet mee overweg en geven een foutmelding): <A HREF="mailto:gebruiker@provider.nl,een@ander.nl">Webmaster</A>

Een e-mailadres in een HTML-document wordt tegenwoordig vaker misbruikt dan gebruikt voor het eigenlijke doel, namelijk het reageren op of naar aanleiding van de inhoud van het document. Vooral de verzenders van spam (ongewenste reclame) maken op grote schaal misbruik van de op het web gevonden e-mailadressen. Daarnaast zijn er virussen en wormen die HTML-documenten (onder andere in de cache van de browser) scannen op e-mailadressen en die vervolgens gebruiken om zichzelf te verspreiden. Om het misbruik te voorkomen, is het daarom verstandig je e-mailadres alleen in gecodeerde vorm in de documenten op te nemen. Als voorbeeld van het coderen de mailto-link naar het e-mailadres gebruiker@provider.nl: <A HREF="mailto:gebruiker%40provider%2Enl">Webmaster</A> In de browser zie je: Webmaster Wanneer je in de omschrijving van de mailto-link ook het e-mailadres wilt laten zien, dan moet je deze coderen met de Speciale karakters voor tekst. gebruiker&#64;provider&#46;nl In de browser zie je: gebruiker@provider.nl

Met deze codering is de weergave van de mailto-link in de browser en in de statusbalk hetzelfde als normaal. Ook wordt het e-mailadres bij klikken op de link op de gebruikelijke wijze doorgegeven aan het e-mailprogramma. In het document zelf staat echter niets meer dat de vorm heeft van een e-mailadres. Hoewel de meest gebruikte e-mailprogramma's probleemloos met gecodeerde mailto-hyperlinks overweg kunnen, kan het incidenteel voorkomen dat een programma de gebruikte code voor het apenstaartje en de punt niet begrijpt en deze als gewone karakters interpreteert (dat geldt bijvoorbeeld voor Pegasus Mail). Of het coderen van het e-mailadres misbruik in alle gevallen tegenhoudt, is overigens de vraag. Als je nog meer zekerheid wilt, dan kun je er ook voor kiezen bezoekers te laten reageren via een formulier. Voor het verwerken van de informatie van dat formulier moet je dan uiteraard wel gebruik maken van een script op de server, want als je kiest voor een mailto-formulier haal je je alleen maar meer problemen op de hals.

Karakters in URI's
Een URI mag alleen alfanumerieke karakters (de cijfers 0-9 en de letters a-z en A-Z), de speciale karakters $ - _ . + ! * ' ( ) , en een aantal zogenaamde gereserveerde karakters bevatten. Bij de gereserveerde karakters gaat het om karakters die een bijzondere betekenis hebben bij het definiren van de URI: ; / ? : @ = &. Wil je in een URI de gereserveerde karakters gebruiken op een andere wijze dan waarvoor ze bedoeld zijn, of wil je karakters opnemen die door de browser verkeerd genterpreteerd kunnen worden (een spatie en > < " # % { } | \ ^ ~ [ ] `), dan moet je ze coderen. Meestal gebeurt dat in de vorm van een %-teken gevolgd door een ASCII-waarde in hexadecimale notatie. In sommige gevallen, zoals voor & en ", kan ook een karakter entiteit referentie gebruikt worden (zie het onderdeel Speciale karakters). In het volgende overzicht vind je voor een aantal karakters de code. ; / ? : @ = & spatie %3B %2F %3F %3A %40 %3D %26 of &amp; %20 > < " # % | \ ~ %3E %3C %22 of &quot; %23 %25 %7C %5C %7E

Weergave hyperlinks
De kleur van de hyperlinks in een document bepaal je met de attributen LINK, VLINK en ALINK van het BODY element. Het LINK attribuut bepaalt de kleur van een link die nog niet bezocht is, het VLINK attribuut bepaalt de kleur van een link die al wel bezocht is en het ALINK attribuut bepaalt de kleur van een (actieve) link op het moment dat deze wordt geselecteerd door de gebruiker. De gekozen kleur geldt voor alle linken in een document. Een voorbeeld van de opbouw van het BODY element is: <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FFOOOO" ALINK="#FFOOOO"> Zie ook de toelichting op de attributen van het BODY element in het onderdeel Structuur document.

De weergave van hyperlinks kan niet alleen met het BODY element benvloed worden, maar ook met behulp van een stylesheets. Behalve de kleur zijn er dan ook andere mogelijkheden, zoals het lettertype, de lettergrootte, wel of niet onderstreept en een achtergrondkleur. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd, waarbij gebruikt gemaakt wordt van de stijleigenschappen color, font-family, font-size, text-decoration en background-color. <P>Naar <A HREF="frames.html" STYLE="font-style: italic; text-decoration: none; color: red; background-color: yellow">document 1</A></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je de eigenschap text-decoration: none gebruikt om de hyperlink niet onderstreept weer te geven, is het verstandig er wel voor zorgen dat de bezoeker in de gaten heeft dat het gaat om een link. Voor de weergave van hyperlinks kan ook gebruik gemaakt worden van pseudo-class selectors. Een pseudo-class selector is speciale mogelijkheid om een stijl voor een element te definiren. De vorm van een pseudo-class selector is de naam van het element gevolgd door een dubbele punt en de naam van een pseudo-class. Voor hyperlinks zijn vier pseudo-classes van belang: link (voor links die nog niet bezocht zijn), visited (voor links die al wel bezocht zijn), active (voor links die op het moment bezocht worden) en hover (voor een link waarboven de muisaanwijzer zich bevindt). Stijlregels met pseudoclass selectors worden geplaatst in een stijlblok in de head van een document of in een extern stijlblad. In principe hebben de pseudo-class selectors A:link, A:visited en A:active dezelfde functie als de attributen LINK, VLINK en ALINK van het BODY element: ze bepalen de weergave van alle hyperlinks in een document. Een voorbeeld van het gebruik van pseudo-class selectors is het volgende stijlblok: <STYLE TYPE="text/css"> <!-A:link { color: #0000FF; background-color: #FFFFFF; } A:visited { color: #CC3399; background-color: #FFFFFF; } A:active { color: #FF0000; background-color: #FFFFFF; } --> </STYLE> De A:hover pseudo-class selector biedt een mogelijkheid die je niet met behulp van attributen van het BODY element hebt: het wijzigen van de weergave van de hyperlink als de muisaanwijzer boven de hyperlink komt. Een stijlregel met de A:hover pseudo-class selector kan er als volgt uitzien: A:hover { color: #000000; background-color: #66FFCC; } Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je bepaalde hyperlinks in het document (bijvoorbeeld links andere sites) op een andere manier wilt weergeven dan standaard, dan kun je gebruik maken van een 'echte' class-naam. Je neemt dan

naast de voorgaande algemene stijlregels bijvoorbeeld ook de volgende stijlregel op het stijlblok of stijlblad: A.extern:hover { color: #FFFFFF; background-color: #336699; } Aan het A element waarmee de hyperlink gemaakt wordt moet nu het CLASS attribuut met de waarde extern toegevoegd worden: <P>Naar <A HREF="http://www.w3.org/" CLASS="extern">World Wide Web Consortium</A></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Zie voor meer informatie over pseudo-classes het onderdeel Selectors.

Toelichting in tooltip
Het TITLE attribuut kun je gebruiken, wanneer je een extra toelichting voor de hyperlink wilt opnemen. Die toelichting wordt in de nieuwere versies van de bekende browsers (Microsoft Internet Explorer vanaf versie 4, Netscape Navigator vanaf versie 6, Mozilla, Firefox en Opera vanaf versie 5) weergegeven in de vorm van een zogenaamde tooltip, die verschijnt als de muis boven de hyperlink komt. Een extra toelichting kan handig zijn in een lijst met hyperlinks (bijvoorbeeld in een navigatieframe), waarin de ruimte voor een uitgebreide gewone omschrijving ontbreekt. <P><A HREF="../inhoud-html.html" TITLE="De uitgebreide inhoudsopgave van het HTML-gedeelte van de Handleiding HTML">Inhoudsopgave HTML</A></P> Onder is de weergave door de browser te zien en boven een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Activeren hyperlink
In een document kun je snel van de ene hyperlink naar de andere gaan door gebruik te maken van de tab-toets. Normaal worden de verschillende links afgewerkt in de volgorde, waarin ze in het document staan. Met behulp van het TABINDEX attribuut kan deze volgorde benvloed worden. In het volgende voorbeeld is dat te zien: <P><A HREF="document1.html" TABINDEX="1">Document 1</A> <A HREF="document2.html" TABINDEX="4">Document 2</A>

<A HREF="document3.html" TABINDEX="3">Document 3</A> <A HREF="document4.html" TABINDEX="2">Document 4</A></P> Bekijk in een nieuw venster of de browser het TABINDEX attribuut ondersteunt.

Als je het ACCESSKEY attribuut opneemt, kun je een hyperlink ook rechtstreeks activeren via het toetsenbord. Met het ACCESSKEY attribuut leg je vast welke karakter in een sneltoets voor de hyperlink gebruikt moet worden. Om de hyperlink te activeren moet je in de meeste browsers de Alt-toets (op Windows systemen) of de Ctrl-toets (op Macintosh systemen) indrukken in combinatie met de toets van het aangewezen karakter. Opera hanteert een afwijkende procedure: eerst moet met de toetscombinatie Shift + Esc de werking van het ACCESSKEY attribuut geactiveerd worden, pas daarna kan de toets van het aangewezen karakter worden ingedrukt. In Firefox 2.0 is de toetscombinatie gewijzigd in Shift, Alt en het aangegeven karakter. In Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 7.0 en hoger wordt het gewenste document zoals bedoeld direct geopend. In Microsoft Internet Explorer krijgt de hyperlink slechts de focus en moet je eerst nog op de Enter-toets drukken om het document te openen. <P><A HREF="document1.html" ACCESSKEY="1">Document 1</A> (1)</P> <P><A HREF="document2.html" ACCESSKEY="2">Document 2</A> (2)</P> Bekijk in een nieuw venster of de browser het ACCESSKEY attribuut ondersteunt. Willen bezoekers van deze mogelijkheid gebruik kunnen maken, dan moet je er uiteraard voor zorgen dat ze weten dat er een sneltoets is gedefinieerd. Verder moet je erop letten dat de sneltoets niet al een andere functie in de browser heeft.

Introductie afbeeldingen
Op een HTML-pagina kunnen naast tekst ook afbeeldingen opgenomen worden. Dat gebeurt met behulp van het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je een omschrijving op, welke in plaats van de afbeelding wordt weergegeven in tekst-georinteerde browsers. De attributen WIDTH en HEIGHT gebruik je om de afmetingen van de afbeelding op te geven. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst, welke op de afbeelding volgt, sneller weergegeven. Met het BORDER attribuut bepaal je de dikte van de rand om de afbeelding. Het ALIGN attribuut kun je gebruiken om de afbeelding verticaal of horizontaal uit te lijnen en met de attributen HSPACE en VSPACE creer je ruimte rond de afbeelding. Met het TITLE attribuut kun je tekst opnemen, welke in de nieuwste browsers in een tooltip te zien is als je met de muis boven de afbeelding komt In plaats van het opnemen van veel attributen van het IMG element kun je ook stijlen definiren met behulp van stylesheets. In de voorbeelden hierna wordt deze mogelijkheid toegelicht. Hoewel alle gangbare browsers het gebruik van stijlen ondersteunen, doen ze dit niet altijd zonder problemen. Met name voor Netscape Navigator 4 geldt dat deze grote problemen heeft met stijlen gedefinieerd voor het IMG element en dat de weergave daardoor vaak nogal beroerd is. Geadviseerd wordt daarom je nog niet geheel te verlaten op stijlen en in ieder geval een zodanige constructie te kiezen dat Netscape Navigator 4 de stijlen niet mag weergeven. Zie hiervoor het onderdeel CSS en browsers. Hoewel het gebruik van afbeeldingen een HTML-pagina zeker aantrekkelijker kan maken voor een bezoeker, is het aan te bevelen er voorzichtig mee om te gaan. Veel en vooral grote afbeeldingen vragen een lange downloadtijd en daardoor geduld van de bezoeker. De vraag is of deze dat altijd kan

opbrengen en niet al voortijdig afhaakt. Beperk daarom het aantal afbeeldingen in een document en gebruik bij voorkeur kleine afbeeldingen. Zo nodig kan de bezoeker de mogelijkheid geboden worden een grotere versie te openen, door op de opgenomen kleine afbeelding te klikken. Een bijzonder gebruik van afbeeldingen betreft image maps, ook wel aanklikbare afbeeldingen genoemd. Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in verschillende gebieden, waarbij aan elk gebied een hyperlink kan worden gekoppeld. Als je binnen zo'n gebied in de afbeelding klikt, spring je naar de in de hyperlink gedefinieerde bestemming.

Opnemen afbeelding
Een afbeelding definieer je met het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je een omschrijving op, welke in plaats van de afbeelding wordt weergegeven in tekstgeorinteerde browsers. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst, welke op de afbeelding volgt, eerder weergegeven. In het volgende voorbeeld zijn de genoemde attributen gebruikt. <IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" ALT="Monument Valley">

Soms worden de attributen WIDTH en HEIGHT gebruikt om een afbeelding groter of kleiner weer te geven dan hij eigenlijk is. Voorzichtigheid is echter op z'n plaats, omdat de kwaliteit van de afbeelding er vaak op achteruit gaat (zeker als er tekst in de afbeelding is opgenomen). In het volgende voorbeeld zijn achtereenvolgens het origineel, een verkleining en een vergroting van een afbeelding te zien. <IMG SRC="formaat.gif" ALT="Originele afbeelding" WIDTH="120" HEIGHT="140" BORDER="1"> <IMG SRC="formaat.gif" ALT="De afbeelding verkleind" WIDTH="60" HEIGHT="70" BORDER="1"> <IMG SRC="formaat.gif" ALT="De afbeelding vergroot" WIDTH="240" HEIGHT="280" BORDER="1">

Rand om afbeelding
Het BORDER attribuut gebruik je om de dikte van de rand om de afbeelding op te geven. Bij Microsoft Internet Explorer 1, 2 en 3 werkt dit overigens alleen als de afbeelding in een hyperlink is opgenomen. <IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" BORDER="3" ALT="Foto Monument Valley">

Wanneer je een afbeelding in een hyperlink opneemt, dan plaatsen sommige browsers er automatisch een rand om. Wanneer je dit niet wilt, dan neem je het BORDER attribuut op met de waarde "0". <A HREF="usa3.gif"><IMG SRC="usa2.gif" ALT="Foto Monument Valley" WIDTH="150" HEIGHT="102" BORDER="0" ></A>

Ook met een stijl kun je bepalen of er een rand om de afbeelding geplaatst moet worden en in welke dikte, vorm en kleur. Dat kan met behulp van de eigenschappen voor randen. In het volgende voorbeeld is met een inline stijl vastgelegd dat er een rode rand van 2 pixels om de afbeelding moet staan. <P><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="border: solid 2px red;"></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Om de rand weg te laten bij afbeeldingen die in een hyperlink zijn opgenomen, gebruik je de waarde none voor de border-style eigenschap <A HREF="usa3.gif"><IMG SRC="usa2.gif" ALT="Foto Monument Valley" WIDTH="150" HEIGHT="102" STYLE="border-style: none;"></A>

Verticaal uitlijnen afbeelding

Het IMG element is een zogenaamd inline element. Een afbeelding en de omringende tekst kunnen daardoor samen op n regel voorkomen. De hoogte van deze regel wordt bepaald door het hoogste onderdeel. Vaak zal dat de afbeelding zijn. Standaard wordt de onderkant van de afbeelding op n lijn geplaatst met de onderkant van de tekst. Met het ALIGN attribuut en de waarden "top", "middle" en "bottom" kun je zelf bepalen hoe de afbeelding op de regel in verticale richting uitgelijnd wordt ten opzichte van de tekst. <IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" ALIGN="top">

ALIGN="top"

ALIGN="middle"

ALIGN="bottom"

Met het ALIGN attribuut bepaal je alleen de uitlijning van de afbeelding ten opzichte van de tekst die op dezelfde regel staat. Resterende tekst wordt zoals gebruikelijk op de volgende regel(s) geplaatst.

Als na de afbeelding onvoldoende ruimte is op de regel om alle tekst te plaatsen, dan wordt de resterende tekst zoals gebruikelijk op de volgende regel(s) onder de afbeelding geplaatst. Wanneer je meer regels tekst naast de afbeelding wilt plaatsen, dan moet je met de waarden voor de horizontale uitlijning een zwevende afbeelding maken.

De uitlijning van de afbeelding in verticale richting kun je ook vastleggen door met behulp van de vertical-align eigenschap een stijl te definiren. In het volgende voorbeeld is met een inline stijl vastgelegd dat de bovenkant van de afbeelding uitgelijnd moet worden met de bovenkant van de tekst. <P><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="vertical-align: top;"> top</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Horizontaal uitlijnen afbeelding

Met het ALIGN attribuut en de waarden "left" en "right" kun je de afbeelding links of rechts op de pagina plaatsen en een zo genoemde zwevende afbeelding maken. <IMG SRC="ogen.gif" ALT="Ogen" WIDTH="105" HEIGHT="45" ALIGN="left"> Voor deze afbeelding is het ALIGN attribuut met de waarde "left" gebruikt. Naast de afbeelding worden zoveel regels tekst geplaatst als de hoogte van de afbeelding toelaat. De volgende regels lopen ook onder de afbeelding door. Is de hoeveelheid tekst kleiner dan naast de afbeelding past, dan is het verstandig het BR element met het attribuut CLEAR te gebruiken. Daarmee voorkom je dat een volgende alinea, of afbeelding onbedoeld naast in plaats van onder de afbeelding terecht komt. <IMG SRC="ogen.gif" ALT="Ogen" WIDTH="105" HEIGHT="45" ALIGN="right"> ...<BR CLEAR="all">

Voor deze afbeelding is het ALIGN attribuut met de waarde "right" gebruikt. Via het ALIGN attribuut van het IMG element is het niet mogelijk een afbeelding in het midden van de pagina plaatsen. Daarvoor kan echter het DIV element gebruikt worden met het ALIGN. Van een zwevende afbeelding met meerdere regels tekst ernaast is echter geen sprake meer. <DIV ALIGN="center"><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"></DIV>

De uitlijning van de afbeelding in horizontale richting kun je ook vastleggen door een stijl te definiren. Met de float eigenschap kun je de tekst links of rechts uitlijnen. Net als bij de uitlijning via het ALIGN attribuut worden meerdere regels tekst naast de afbeelding geplaatst. Als er naast de afbeelding voldoende ruimte is, geldt dat ook voor een volgende paragraaf. <P><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="float: left;"> Met een inline stijl is vastgelegd dat de afbeelding links moet worden uitgelijnd.</P> <P>Dit is een volgende paragraaf.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Om te voorkomen dat een volgende paragraaf naast de afbeelding wordt geplaatst, kun je voor het P element een stijl definiren met behulp van de clear eigenschap. <P><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="float: left;"> Met een inline stijl is vastgelegd dat de afbeelding links moet worden uitgelijnd.</P> <P STYLE="clear: left;">Dit is een volgende paragraaf.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wil je de afbeelding centreren, dan kun je voor het element op blokniveau waarin de afbeelding is opgenomen, een stijl definiren met behulp van de text-align eigenschap. <P STYLE="text-align: center;"><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Ruimte rond de afbeelding

De HSPACE attribuut kan gebruikt worden om zowel links als rechts van de afbeelding ruimte te scheppen tot de overige inhoud van het document. Het VSPACE attribuut doet hetzelfde boven en onder de afbeelding. <IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" HSPACE="10">

HSPACE="10"

HSPACE="30"

Het HSPACE attribuut zorgt ervoor dat zowel links als rechts van de afbeelding ruimte ontstaat. Soms wil je echter alleen maar ruimte aan n kant hebben. Bijvoorbeeld als de afbeelding langs de linker kantlijn moet blijven staan, maar wat afstand moet krijgen tot een andere afbeelding rechts ervan. In dat geval kun je beter gebruik maken van het speciale teken "&nbsp;" (non-breaking space). Dit teken wordt door de browser genterpreteerd als karakter en dus niet samengevoegd met de gewone spaties. In het volgende voorbeeld is daardoor het resultaat een vrije ruimte van 4 spaties. <IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"> &nbsp;&nbsp; <IMG ...>

Wanneer je afstand wilt creren tussen een afbeelding en tekst rechts ervan, dan kun je de oplossing met "&nbsp;" alleen gebruiken als alle tekst op dezelfde regel past. Is dat niet het geval, dan kun je als alternatief gebruik maken van een tabel. Je plaatst dan de afbeelding in de ene cel en de tekst in de cel ernaast.

De afstand tussen de afbeelding en de erop volgende inhoud van het document kun je ook vastleggen door met behulp van de eigenschappen voor de margin een stijl te definiren. Deze mogelijkheid geeft je veel meer flexibiliteit, omdat je de afstand per kant van de afbeelding kunt aangeven. In het volgende voorbeeld wordt in n keer de weergave van alle afbeeldingen in een document bepaald, door het opnemen van een stijl voor het IMG element in een stijlblok in de head van het document. Met de margin-right eigenschap wordt vastgelegd dat rechts van elke afbeelding 15 pixels ruimte wordt vrijgehouden. Het stijlblok staat in de head van het document. <STYLE TYPE="text/css"> <!-IMG { margin-right: 15px; } --> </STYLE> In de body van het document is het IMG element opgenomen zonder verdere verwijzing naar de stijlen. <IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"> Bijschrift

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Omschrijving in tooltip
Soms wil je extra informatie een afbeelding geven, die niet zomaar in de gewone tekst past. Je kunt dan gebruik maken van een tooltip, een klein venster dat boven het gewone browservenster wordt weergegeven. Sommige browsers (Microsoft Internet Explorer 3.0 en hoger en Netscape Navigator 4) tonen zo'n tooltip al automatisch en laten daarbij de waarde van het ALT attribuut van het IMG element in het venster zien. Omdat het ALT attribuut daar eigenlijk niet bedoeld is, geven andere browsers de waarde ervan niet in een tooltip weer. In deze browsers kun je evenwel vaak hetzelfde effect bereiken door het toevoegen van het TITLE attribuut aan het IMG element. Het TITLE attribuut is speciaal bedoeld voor de weergave van extra informatie en wordt ondersteund door Microsoft Internet Explorer vanaf versie 4, Netscape Navigator vanaf versie 6, Mozilla, Firefox en Opera vanaf versie 5. Wil je in een zo groot mogelijk aantal browsers de tooltip zien, dan neem je zowel het ALT als het TITLE attribuut op met dezelfde waarde. Het is verder verstandig een waarde te kiezen, die n duidelijk is als alternatief voor de afbeelding (voor als de browser de afbeelding niet kan of mag weergeven) n logisch als extra informatie in de tooltip. Om te zien welk attribuut in de gebruikte browser de weergave van de tooltip bepaalt, hebben de attributen ALT en TITLE in het volgende voorbeeld een verschillende waarde gekregen. <IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" ALT="Foto Monument Valley" TITLE="Monument Valley"> Rechts is de weergave door de browser en daarin kun je controleren of deze het TITLE correct ondersteunt. Links is een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Speciale functie afbeelding

Een afbeelding kun je bijvoorbeeld gebruiken in plaats van een standaard horizontale lijn: <IMG SRC="rainline.gif" ALT="Lijn in regenboogkleuren" WIDTH="580" HEIGHT="5">

Een afbeelding kun je ook gebruiken om een alternatieve lijst te maken, bijvoorbeeld een inhoudsopgave. In zo'n geval heeft een alternatieve omschrijving van de afbeelding weinig nut en kun je maar beter geen waarde voor het ALT attribuut invullen. <IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="lijsten.html">Lijsten</A></BR> <IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="tabellen.html">Tabellen</A></BR> <IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="frames.html">Frames</A> In de browser ziet het als volgt uit: Lijsten Tabellen Frames Bij de nieuwe generatie browsers kan een dergelijke lijst overigens ook met behulp van stylesheets gemaakt worden. Zie een voorbeeld in het onderdeel lijsten.

In het volgende voorbeeld wordt een afbeelding geplaatst in een hyperlink. Door op de afbeelding te klikken, spring je naar de bijbehorende bestemming. <A HREF="http://www.handleidinghtml.nl"><IMG SRC="handleiding-html.gif" ALT="Bezoek de Handleiding HTML" WIDTH="84" HEIGHT="27" ALIGN="bottom"></A>

In de browser zie je: Met het BORDER attribuut van het IMG element kan de rand om de afbeelding in het voorbeeld weggelaten worden. Het is echter verstandig hiermee voorzichtig om te gaan, om te voorkomen dat de bezoeker van de pagina niet in de gaten heeft dat het hier een hyperlink betreft. <A HREF="http://www.handleidinghtml.nl"><IMG SRC="handleiding-html.gif" ALT="Bezoek de Handleiding HTML" WIDTH="84" HEIGHT="27" BORDER="0" ALIGN="bottom"></A>

In de browser zie je: Zorg ervoor dat je de hyperlink niet met harde returns (met Enter naar de volgende regel gaan) onderbreekt. Sommige browsers vatten een harde return op als een spatie en onderstrepen die net als een gewone hyperlink. Je ziet dat als een underscore direct na de afbeelding.

Het plaatsen van de afbeelding in een hyperlink kan ook gebruikt worden om de bezoeker de mogelijkheid te bieden een grotere afbeelding te bekijken. <A HREF="usa3.gif"><IMG SRC="usa2.gif" ALT="Monument Valley" WIDTH="150" HEIGHT="102" BORDER="0" ALIGN="bottom"></A> &nbsp; Klik op de afbeelding om een grotere foto te zien.

Klik op de afbeelding om een grotere foto te zien.

Image maps
Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in gebieden waaraan een hyperlink is gekoppeld. Als je binnen zo'n gebied in de afbeelding klikt, spring je naar de in de hyperlink gedefinieerde bestemming. Van de image maps zijn er twee typen: Server-side image maps, waarvan de werking gecontroleerd wordt door de server. Om van dit soort image maps gebruik te kunnen maken, moet je op de server een cgi-script kunnen activeren. In veel gevallen zal een provider die mogelijkheid niet bieden aan individuele gebruikers. Client-side image maps, waarvan de werking gecontroleerd wordt door de client, ofwel de browser. Alle benodigde informatie in de door de auteur gemaakt documenten wordt direct door de browser genterpreteerd. Als auteur ben je hierdoor niet meer afhankelijk van de aanwezigheid een cgi-script op de server en daardoor veel vrijer in het gebruik van image maps.

In deze handleiding worden alleen de client-side image maps behandeld.

Client-side image maps

Om aan te geven dat het bij een afbeelding gaat om een image map, moet je aan het IMG element naast het SRC attribuut ook het USEMAP attribuut toevoegen. Het USEMAP attribuut specificeert de verwijzing naar een "map", waarin de browser de informatie over de image map kan vinden. Het begin en einde van de "map" zelf wordt gedefinieerd met het MAP element. Het MAP element bevat in ieder geval het NAME attribuut. De waarde van het NAME attribuut moet overeenkomen met de waarde van het USEMAP attribuut van het IMG element. Binnen het MAP element worden n of meer AREA elementen opgenomen. Elk AREA element legt van n aanklikbaar gebied met behulp van de attributen SHAPE, COORDS en HREF respectievelijk de vorm, de cordinaten en de bestemming vast. Door het ALT attribuut te gebruiken en daarin een omschrijving van de bestemming op te nemen, maak je het mogelijk dat ook gebruikers van een tekstgeorinteerde browser de hyperlink kunnen activeren. Wanneer je het NOHREF in plaats van het HREF opneemt, dan geef je aan dat klikken in het betreffende gebied niet tot een actie moet leiden. Met SHAPE attribuut van het AREA element kunnen drie vormen van gebieden worden vastgelegd: een rechthoek, een veelhoek en een cirkel. De wijze waarop je met het COORDS attribuut de cordinaten van een gebied vastlegt, hangt af van de vorm:

rechthoek (rect): de waarde van het COORDS attribuut bevat vier getallen, die van het gebied achtereenvolgens de positie van de linker bovenhoek in horizontale richting, de positie van de linkerbovenhoek in verticale richting, de positie van de rechter benedenhoek in horizontale richting en tenslotte de positie van de rechter benedenhoek in verticale richting vastleggen; veelhoek (poly): de waarde van het COORDS attribuut bevat voor een aantal hoekpunten een cordinatenpaar, waarbij voor elk hoekpunt eerst de positie in horizontale en vervolgens de positie in verticale richting wordt opgenomen; cirkel (circle): het COORDS attribuut bevat 3 getallen, die achtereenvolgens de positie van het middelpunt van de cirkel in horizontale en in verticale richting en de lengte van de straal vastlegt.

In alle gevallen wordt in horizontale richting (x) gemeten vanaf de linkerkant en in verticale richting (y) vanuit de bovenkant van de afbeelding. De afstand is in pixels en om het juiste gebied aan te geven, is het dus noodzakelijk dat je voor de attributen WIDTH en HEIGHT van het IMG element ook een waarde in pixels hebt opgenomen (en geen percentage). Wanneer je van een afbeelding aanklikbare gebieden wilt definiren (bijvoorbeeld afzonderlijke personen op een foto), dan zullen je in de praktijk vaak uitkomen op het gebruik van veelhoeken. In principe kun je van elke veelhoek van een onbeperkt aantal hoekpunten de cordinaten opnemen. Meestal is het echter niet noodzakelijk om de vorm van een gebied heel gedetailleerd vast te leggen. Een veelhoek met 5 6 hoekpunten is over het algemeen voldoende. Bij het bepalen van de cordinaten is het handig gebruik te maken van een image-viewer/editor. Een aanrader is het gratis programma IrfanView. Wanneer je in dit programma op een punt in de afbeelding klikt, kun je links in de titelbalk van het venster de x- en y-positie van het punt aflezen.

Wanneer een browser image maps niet ondersteunt, wordt de afbeelding normaal weergegeven. Klikken op de afbeelding leidt in dat geval uiteraard niet tot het openen van een hyperlink.

Voorbeelden image maps

In het eerste voorbeeld wordt een afbeelding van een knoppenbalk gebruikt als client-side image map. Omdat de "map" in het document zelf is opgenomen, is het voldoende een interne verwijzing op te nemen: "#knoppenbalk". <IMG SRC="knoppenbalk.gif" ALT="Knoppenbalk" WIDTH="390" HEIGHT="24" BORDER="0" USEMAP="#knoppenbalk"> Het MAP element bevat in ieder geval het NAME attribuut. De waarde van het NAME attribuut correspondeert met de waarde van het USEMAP attribuut van het IMG element: "knoppenbalk".

In het MAP element zijn een vijftal AREA elementen opgenomen. Het SHAPE attribuut, waarmee de vorm van het aanklikbare gebied wordt gespecificeerd, heeft in dit voorbeeld in alle gevallen de waarde "rect" (rechthoek). De cordinaten van elk aanklikbaar gebied zijn vastgelegd met het COORDS attribuut. Het ALT attribuut is opgenomen met een omschrijving van de bestemming ten behoeve van het gebruik in tekst-georinteerde browsers. Het ligt voor de hand in de praktijk een wat duidelijkere omschrijving te kiezen dan in dit voorbeeld is gedaan. <MAP NAME="knoppenbalk"> <AREA SHAPE="rect" COORDS="0,0,77,24" HREF="map1a.html" ALT="Mogelijkheid 1"> <AREA SHAPE="rect" COORDS="78,0,155,24" HREF="map1b.html" ALT="Mogelijkheid 2"> <AREA SHAPE="rect" COORDS="156,0,233,24" HREF="map1c.html" ALT="Mogelijkheid 3"> <AREA SHAPE="rect" COORDS="234,0,311,24" HREF="map1d.html" ALT="Mogelijkheid 4"> <AREA SHAPE="rect" COORDS="312,0,390,24" HREF="map1e.html" ALT="Mogelijkheid 5"> </MAP> Als je met de muis van links naar rechts over de knoppenbalk heen gaat, dan zie je in de statusbalk van de browser de URL wijzigen. Klik je op een knop, dan wordt de URL geactiveerd.

In het volgende voorbeeld zijn verschillende waarden gebruikt voor het SHAPE attribuut van het AREA element. In de afbeelding is de vorm van de gebieden heel direct te zien, in de praktijk zal dat vaak niet het geval zijn. Wel is het handig er op te letten, of het voor de bezoeker van je site voldoende duidelijk is waar hij of zij moet klikken om naar een bepaalde bestemming te gaan. In het laatste AREA element is voor de gehele afbeelding het NOHREF attribuut opgegeven. Daarmee wordt vastgelegd dat geen hyperlink is opgenomen voor de gebieden, die niet apart gedefinieerd zijn in deze image map. <IMG SRC="vormen.gif" ALT="Vormen" WIDTH="300" HEIGHT="150" BORDER="1" USEMAP="#vormen1"> <MAP NAME="vormen1"> <AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map2a.html" ALT="Rechthoek"> <AREA SHAPE="circle" COORDS="254,61,33" HREF="map2b.html" ALT="Cirkel"> <AREA SHAPE="poly" COORDS="102,134,120,75,197,84,208,129,164,143" HREF="map2c.html" ALT="Veelhoek"> <AREA SHAPE="rect" COORDS="0,0,300,150" NOHREF ALT="Geen vorm"> </MAP> Als je met de muis over en tussen de figuren beweegt, dan zie je in de statusbalk van de browser de verschillende URL's opkomen en verdwijnen. Klik je op een figuur, dan wordt de bijbehorende URL geactiveerd.

In dezelfde image map wordt nu in het laatste AREA element voor de gehele image map een URL gedefinieerd, die geactiveerd wordt als je klikt op elk deel van de afbeelding dat niet tot de rechthoek, de cirkel, of de veelhoek behoort. <MAP NAME="vormen2"> <AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map3a.html" ALT="Rechthoek"> <AREA SHAPE="circle" COORDS="254,61,33" HREF="map3b.html" ALT="Cirkel"> <AREA SHAPE="poly" COORDS="102,134,120,75,197,84,208,129,164,143" HREF="map3c.html" ALT="Veelhoek"> <AREA SHAPE="rect" COORDS="0,0,300,150" HREF="map3d.html" ALT="Geen vorm"> </MAP>

In Mozilla, Netscape Navigator en Opera wordt hetzelfde effect bereikt als in het laatste AREA element in plaats van SHAPE="rect" COORDS="0,0,300,150" wordt opgenomen SHAPE="default". In Microsoft Internet Explorer werkt deze mogelijkheid echter niet.

Enkele voorbeelden van client-side image maps waarbij gebruik gemaakt wordt van het OBJECT element, worden gegeven in het onderdeel Objecten.

Tooltips voor image maps

Je kunt ervoor kiezen dat een tooltip (een klein venster met extra informatie) wordt weergegeven, als de muisaanwijzer boven een aanklikbaar gebied van een image map komt. Sommige browsers (Microsoft Internet Explorer 5.0 en hoger en Netscape Navigator 4) doen dat al automatisch en laten daarbij de waarde van het ALT attribuut van het AREA element zien. Bij andere browsers (Microsoft Internet Explorer 4.0, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 6.0 en hoger) moet je het daarvoor bedoelde TITLE attribuut opnemen, als je de tooltip wilt zien. Het TITLE attribuut is in tegenstelling tot het ALT attribuut speciaal bedoeld voor het geven van extra informatie. Het wordt ook ondersteund door Microsoft Internet Explorer 5.0 en hoger, alleen niet op de juiste wijze. Het probleem is dat deze browser bij het gecombineerde gebruik van de attributen ALT en TITLE (en dat is nodig, omdat ALT een vereist attribuut is) niet de waarde van het TITLE attribuut als tooltip weergeeft, maar de waarde van het ALT attribuut. In de praktijk is het daarom verstandig voor beide attributen eenzelfde waarde te kiezen, die n duidelijk is als omschrijving van de bestemming van het gebied (voor als de browser de afbeelding niet kan of mag weergeven) n logisch als extra informatie in de tooltip.

In het volgende voorbeeld hebben de attributen ALT en TITLE verschillende waarden en is bovendien de naam van het attribuut erin opgenomen. Je kunt daardoor zien welk attribuut in de gebruikte browser de weergave van de tooltip bepaalt. <IMG SRC="vormen.gif" ALT="Vormen" WIDTH="300" HEIGHT="150" BORDER="1" USEMAP="#vormen"> <MAP NAME="vormen"> <AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map4a.html" ALT="Rechthoek ALT" TITLE="Rechthoek - TITLE"> <AREA SHAPE="circle" COORDS="254,61,33" HREF="map4b.html" ALT="Cirkel ALT" TITLE="Cirkel - TITLE"> <AREA SHAPE="poly" COORDS="102,134,120,75,197,84,208,129,164,143" HREF="map4c.html" ALT="Veelhoek - ALT" TITLE="Veelhoek - TITLE"> </MAP> Onder is de weergave door de browser en daarin kun je controleren of deze het TITLE correct ondersteunt. Boven is een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Introductie lijsten
In HTML-documenten kun je verschillende soorten lijsten toepassen. De meest gebruikte zijn de ongeordende en de geordende lijst, daarnaast zijn er nog de definitielijst, de menulijst en de directorylijst. In een ongeordende lijst zijn de items niet genummerd, maar hebben ze een symbool als markering. In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. De ongeordende lijst wordt gedefinieerd met het element UL (unordered list) en de geordende lijst met het element OL (ordered list). Voor beide lijsten geldt dat een item wordt bepaald met het LI element. Met het TYPE attribuut kan de weergave van de markering vastgelegd worden. Bij de ongeordende lijst kan gekozen worden uit een drietal symbolen (disc, circle en square), bij de geordende lijst uit diverse soorten getallen en letters. Ongeordende en geordende lijsten mogen (ook onderling) genest worden, dat wil zeggen dat binnen een lijst een nieuwe lijst opgenomen mag worden.

Een definitielijst is een lijst, welke bestaat uit termen en bijbehorende beschrijvingen. Het DL element bepaalt het begin en einde van een definitielijst en de elementen DT en DD definiren respectievelijk de term en de beschrijving. De menulijst (gedefinieerd met het MENU element) was oorspronkelijk bedoeld als een ongeordende lijst, waarvan de items niet meer dan n regel zouden beslaan. Bij de directorylijst (gedefinieerd met het DIR element) zou elke item niet meer dan 20 karakters moeten bevatten en zou de lijst weergegeven moeten worden in meerdere kolommen. Omdat alle belangrijke browsers zowel de menulijst als de directorylijst weergeven als de gewone ongeordende lijst, hebben de elementen MENU en DIR hun betekenis verloren. Het gebruik ervan wordt in HTML 4 daarom afgeraden en ze worden in deze handleiding ook niet behandeld. Met behulp van stijlen heb je uitgebreide mogelijkheden om de weergave van een lijst te bepalen.

Ongeordende lijst
In een ongeordende lijst zijn de items niet genummerd, maar hebben ze een symbool als markering. De ongeordende lijst wordt gemaakt met de elementen UL en LI. <UL> <LI>Dit is het eerste item van de ongeordende lijst (indien ... in)</LI> <LI>Dit is het tweede item van de ongeordende lijst</LI> <LI>Dit is het derde item van de ongeordende lijst</LI> </UL> De browser geeft dit zo weer: Dit is het eerste item van de ongeordende lijst (indien de tekst langer is dan op n regel past, springt deze op de volgende regels in) Dit is het tweede item van de ongeordende lijst Dit is het derde item van de ongeordende lijst

Door het TYPE attribuut toe te voegen aan het UL element, kan bepaald worden welk symbool gebruikt wordt als markering voor alle items van de lijst. In het volgende voorbeeld is de waarde "square" gebruikt en zou een vierkant blokje weergegeven moeten worden. <UL TYPE="square"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </UL> De browser geeft dit zo weer: Dit is het eerste item van de lijst Dit is het tweede item van de lijst Dit is het derde item van de lijst

Het TYPE attribuut kan ook aan het LI element toegevoegd worden. Het symbool voor de markering kan daardoor voor elk item afzonderlijk bepaald worden. <UL> <LI TYPE="square">De markering ... zijn</LI> <LI TYPE="circle">De markering ... zijn</LI> <LI TYPE="disc">De markering ... zijn</LI> </UL> De browser geeft dit zo weer: o De markering van dit item zou een vierkant blokje moeten zijn De markering van dit item zou een open rondje moeten zijn De markering van dit item zou een gesloten rondje moeten zijn

Binnen een lijst mag weer een volgende lijst opgenomen worden. <UL TYPE="square"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <UL TYPE="disc"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </UL> </LI> <LI>Dit is het laatste item van de lijst</LI> </UL> De browser geeft dit zo weer: Dit is het eerste item van de lijst Dit is het tweede item van de lijst Dit is het eerste subitem Dit is het tweede subitem Dit is het laatste item van de lijst

Geordende lijst
In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. De geordende lijst wordt gemaakt met de elementen OL en LI. <OL> <LI>Dit is het eerste item van de geordende lijst (indien ... in)</LI> <LI>Dit is het tweede item van de geordende lijst</LI> <LI>Dit is het derde item van de geordende lijst</LI> </OL> De browser geeft dit zo weer: 1. Dit is het eerste item van de geordende lijst (indien de tekst langer is dan op n regel past, springt deze op de volgende regels in) 2. Dit is het tweede item van de geordende lijst 3. Dit is het derde item van de geordende lijst

Door het TYPE attribuut toe te voegen aan het OL element kun je bepalen welke nummering gebruikt moet worden. Mogelijke waarden voor het TYPE attribuut zijn getallen (1), kleine letters (a), hoofdletters (A), kleine romeinse getallen (i) en grote romeinse getallen (I). In het volgende voorbeeld worden kleine letters gebruikt. <OL TYPE="a"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </OL> De browser geeft dit zo weer: a. Dit is het eerste item van de lijst b. Dit is het tweede item van de lijst c. Dit is het derde item van de lijst Met het START attribuut kun je bepalen dat de nummering niet met de eerste waarde (1, a, A, i of I) moet beginnen, maar met een andere waarde. Dat kan nuttig zijn indien je een lijst wilt onderbreken met een paragraaf tekst en daarna de nummering weer wilt doorzetten. De waarde van het START attribuut is altijd een getal, ongeacht welke nummering je gebruikt. <OL TYPE="I" START="3"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </OL> De browser geeft dit zo weer: III. IV. V. Dit is het eerste item van de lijst Dit is het tweede item van de lijst Dit is het derde item van de lijst

Binnen een lijst mag weer een volgende lijst opgenomen worden. Het kan daarbij handig zijn de nummering voor de geneste lijst afwijkend te maken. <OL TYPE="1"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <OL TYPE="a"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </OL> </LI> <LI>Dit is het laatste item van de lijst</LI> </OL> De browser geeft dit zo weer: 1. Dit is het eerste item van de lijst 2. Dit is het tweede item van de lijst a. Dit is het eerste subitem b. Dit is het tweede subitem 3. Dit is het laatste item van de lijst Geordende en ongeordende lijsten mogen ook door elkaar gebruikt worden.

<OL TYPE="1"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <UL TYPE="disc"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </UL> </LI> <LI>Dit is het laatste item van de lijst</LI> </OL> De browser geeft dit zo weer: 1. Dit is het eerste item van de lijst 2. Dit is het tweede item van de lijst Dit is het eerste subitem Dit is het tweede subitem 3. Dit is het laatste item van de lijst

Definitielijst
Een definitielijst is een lijst, welke bestaat uit termen en bijbehorende beschrijvingen. Het DL element bepaalt het begin en einde van een definitielijst en de elementen DT en DD definiren respectievelijk de term en de beschrijving. <DL> <DT>Term <DD>Hier <DT>Term <DD>Hier </DL>

1</DT> staat de definitie van term 1</DD> 2</DT> staat de definitie van term 2</DD>

De browser geeft dit zo weer: Term 1 Hier staat de definitie van term 1 Term 2 Hier staat de definitie van term 2 Indien de termen kort zijn, kan het COMPACT attribuut ervoor zorgen dat term en definitie op dezelfde regel komen te staan. <DL COMPACT> <DT>x1</DT> <DD>Hier staat de definitie van x1</DD> <DT>x2</DT> <DD>Hier staat de definitie van x2</DD> </DL> De browser geeft dit zo weer: x1

Hier staat de definitie van x1 x2 Hier staat de definitie van x2

Het gebruik van stijlen

Voor alle elementen welke gebruikt worden bij het maken van lijsten, kunnen met behulp van stylesheets stijlen gedefinieerd worden. Bij deze stijlen kan het bijvoorbeeld gaan om het lettertype, de grootte, de stijl en de kleur van de tekst en de achtergrond. Daarnaast zijn er een aantal mogelijkheden, die specifiek betrekking hebben op de wijze waarop lijsten worden weergegeven. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd voor het UL element. Met de list-style-type eigenschap is aangegeven welke markering er gebruikt moet worden voor de onderdelen van de lijst. De eigenschappen font-size, font-style, color en background-color zijn gebruikt, om de grootte en de stijl van het lettertype en de voor- en achtergrondkleur vast te leggen. <UL STYLE="list-style-type: square; font-size: 15px; font-style: italic; color: #336699; background-color: #FFFFCC;"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </UL> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Met de list-style-position eigenschap kun je bepalen hoe de markering van een onderdeel van een lijst geplaatst moet worden ten opzichte van de inhoud. In het volgende voorbeeld is voor de eerste lijst geen stijl gedefinieerd. De beginwaarde outside wordt daardoor aangehouden en de markering wordt zoals gebruikelijk buiten de inhoud van een onderdeel van de lijst geplaatst. Voor de tweede lijst geldt de waarde inside. De markering wordt daardoor in het onderdeel van de lijst geschoven. <UL> <LI>Dit is het eerste ... gedefinieerd</LI> <LI>>Dit is het tweede onderdeel van de lijst</LI> </UL> <UL STYLE="list-style-position: inside;>> <LI>Dit is het eerste ... geplaatst</LI> <LI>Dit is het tweede onderdeel van de lijst</LI> </UL> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In plaats van de gebruikelijke mogelijkheden kun je ook een afbeelding als markering toepassen. In het volgende voorbeeld is daarvoor de gecombineerde list-style eigenschap opgenomen met de waarden list-style-image en list-style-type. <UL STYLE="list-style: url(blauwblok.gif) square;> <LI>De waarde url(blauwblok.gif) ... wordt gebruikt.</LI> <LI>De waarde square ... niet ondersteund.</LI> </UL> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je gebruik maakt van een lijst waarvan de onderdelen subonderdelen hebben, dan kun je vastleggen dat voor de subonderdelen een andere markering gebruikt moet worden. <UL> <LI>Dit is <LI>Dit is <LI>Dit is </UL></LI> <LI>Dit is <LI>Dit is <LI>Dit is </UL></LI> </UL>

het eerste item van de lijst<UL> het eerste subitem</LI> het tweede subitem</LI> het tweede item van de lijst<UL> het eerste subitem</LI> het tweede subitem</LI>

In de head van het document is een stijlblok opgenomen, waarin met behulp van een descendent element-selector een stijl is gedefinieerd voor een UL element dat is opgenomen in een UL element. <STYLE TYPE="text/css"> <!-UL { list-style-type: disc; } UL UL { list-style-type: circle; } --> </STYLE Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Standaard wordt er zowel boven als onder de lijst een blanco regel geplaatst en springt de lijst in. Om de lijst direct binnen de tekst te plaatsen, moet je gebruik maken van de verschillende eigenschappen voor de margin. In het volgende voorbeeld zijn de eigenschappen margin-top en margin-bottom zowel gebruikt voor het UL element, als voor de P elementen ervoor en erna. Ze zorgen ervoor dat de blanco regel verdwijnt. <P STYLE="margin-bottom: 0px;">In dit ... gebruikt:</P> <UL STYLE="margin-top: 0px; margin-bottom: 0px; margin-left: 1.2em;"> <LI>margin-top</LI> <LI>margin-bottom.</LI> </UL> <P STYLE="margin-top: 0px;">De lijst ... de tekst.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

De mate van inspringen van de lijst kun je benvloeden, door voor het UL element de margin-left eigenschap op te nemen. Omdat de verschillende browser(versie)s het inspringen niet op dezelfde manier hebben gemplementeerd, moet je bovendien de padding-left opnemen met de waarde "0em". Je krijgt dan in Microsoft Internet Explorer 4.0 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 7.0 en hoger een redelijk vergelijkbaar resultaat.

Als je in het voorgaande voorbeeld de lijst in lijn met de linkerrand van de tekst wilt plaatsen, geef je de margin-left eigenschap de waarde "1.2em". <P STYLE="margin-bottom: 0px;">In dit ... gebruikt:</P> <UL STYLE="margin-top: 0px; margin-bottom: 0px; margin-left: 1.2em; padding-left: 0em;"> <LI>margin-top</LI> <LI>margin-bottom</LI> <LI>margin-left</LI> <LI>padding-left.</LI> </UL> <P STYLE="margin-top: 0px;">De lijst ... de tekst.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Meer voorbeelden van het gebruik van stijlen voor lijsten worden gegeven bij de toelichting op de eigenschappen list-style-type, list-style-image, list-style-position en list-style.

Introductie tabellen
Van tabellen wordt in HTML-pagina's op grote schaal gebruik gemaakt. Dit heeft zeker te maken met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan een document. Hoewel in de toekomst deze functie overgenomen moet gaan worden door stylesheets, bieden tabellen op dit moment voor veel browsers nog steeds een belangrijke mogelijkheid voor het in horizontale richting op de gewenste plaats zetten van tekst en andere inhoud van het document. Om die reden wordt ook in deze handleiding intensief van tabellen gebruik gemaakt. Een tabel bevat n of meer rijen en elke rij bevat n of meer cellen. Onder elkaar gelegen cellen vormen een kolom. Het aantal cellen in een rij bepaalt het aantal kolommen. Tabellen worden gemaakt met behulp van de elementen TABLE, CAPTION, TR, TH en TD. Met het TABLE element wordt het begin en einde van een tabel aangegeven. Het ALIGN attribuut bepaalt hoe de tabel uitgelijnd moet worden. Met de attributen BORDER en CELLSPACING van het TABLE element kun je bepalen of wel of geen tabelranden worden weergegeven en indien wel, hoe breed ze moeten zijn. Met het CELLPADDING leg je de afstand tussen de inhoud van een cel en de rand vast. Het CAPTION element plaatst een bijschrift bij de tabel. Een rij wordt gedefinieerd met het TR element en elke cel in een rij met het TH of het TD element. Bij cellen waarvoor het TH element wordt gebruikt, gaat het om header informatie: de titel van een rij of een kolom. Het TD element wordt gebruikt voor cellen die de feitelijke tabelgegevens (data) bevatten. De attributen ALIGN en VALIGN kun je gebruiken om te bepalen hoe de inhoud van de cellen in horizontale of verticale richting uitgelijnd moet worden.

Cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in horizontale richting gebruik je het COLSPAN attribuut van het TH of TD element, voor het samenvoegen in verticale richting het ROWSPAN attribuut. In principe moet elke rij evenveel cellen bevatten (bij samengevoegde cellen wordt van het oorspronkelijke aantal uitgegaan). Indien dat niet het geval is, wordt het aantal kolommen bepaald door de rij met het grootste aantal cellen. Aan rijen met minder cellen worden aan het einde de ontbrekende cellen (zonder inhoud) toegevoegd. Elke cel in een tabel kan een groot aantal andere HTML-elementen bevatten, zoals elementen voor het structureren van tekst, lijsten, afbeeldingen en formulieren. Daarnaast kan een cel ook weer een nieuwe (geneste) tabel bevatten. In HTML 4.0 zijn nieuwe elementen en attributen opgenomen, waarmee je meer mogelijkheden hebt bij het maken van tabellen. Het betreft de elementen THEAD, TFOOT, TBODY, COLGROUP en COL en de attributen FRAME en RULES van het TABLE element. Deze elementen en attributen worden inmiddels door alle actuele browsers ondersteund, maar in oudere versies kan de ondersteuning ontbreken. In het algemeen hoeft dat echter geen reden te zijn deze elementen en attributen niet te gebruiken. De elementen THEAD, TFOOT en TBODY groeperen de rijen van een tabel in rijgroepen, welke respectievelijk een header, een footer en n of meer body secties vormen. De cellen in de rijen die behoren tot de header en de footer bevatten informatie over de kolommen, de cellen in de rijen die behoren tot een body bevatten de tabelgegevens. Elke rijgroep moet minimaal n rij bevatten. Wanneer THEAD, TFOOT en TBODY gebruikt zijn, kan het onderscheid in de tabel tussen de header, de footer en de body sectie(s) geaccentueerd worden door er lijnen tussen te plaatsen met behulp van het RULES attribuut van het TABLE element. Daarnaast heeft de groepering z'n nut als een tabel zich bij het printen over meerdere bladzijden uitstrekt. De browser kan dan de informatie uit de header en footer op elke pagina boven, respectievelijk onder de tabelgegevens plaatsen. Tenslotte moet het groeperen het aan browsers mogelijk maken om in lange tabellen de body sectie van een scrolling mechanisme te voorzien, onafhankelijk van de header en de footer. Wanneer de elementen THEAD, TFOOT en TBODY niet zijn opgenomen, moet de browser ervan uitgaan dat er sprake is van slechts n body en geen header en footer. Aan de elementen THEAD, TFOOT en TBODY kunnen attributen toegevoegd worden, waarmee de uitlijning van de inhoud van de cellen in de betreffende rijgroep in n keer bepaald kan worden. De elementen COLGROUP en COL hebben betrekking op de kolommen in een tabel. Ze worden direct na het TABLE element geplaatst en geven de browser informatie over het aantal kolommen, voordat alle tabelgegevens zijn ontvangen. Het COLGROUP element groepeert n of meer kolommen in een kolomgroep. Een tabel kan n of meer kolomgroepen bevatten, elk vastgelegd met het COLGROUP element. Het onderscheid tussen de kolomgroepen kan onder andere geaccentueerd worden door er lijnen tussen te plaatsen met behulp van het RULES attribuut van het TABLE element. Indien het COLGROUP element niet gebruikt is, moet de browser ervan uitgaan dat er sprake is van n kolomgroep. Aan het COLGROUP element kunnen attributen toegevoegd worden, waarmee de breedte van de kolommen en de uitlijning van de inhoud van de cellen in de betreffende kolomgroep in n keer bepaald kan worden. Ook het COL element kan gebruikt worden om de breedte van een aantal kolommen en de uitlijning van de inhoud van de cellen in deze kolommen in n keer te bepalen. Het COL element kan gebruikt worden binnen het COLGROUP element, maar ook wanneer het niet nodig is om de tabel te verdelen in kolomgroepen. Met de attributen FRAME en RULES van het TABLE element kan bepaald worden welke randen van de tabel weergegeven moeten worden. Het FRAME attribuut heeft betrekking op het kader van de tabel, ofwel de rand aan de buitenzijde, het RULES attribuut controleert de weergave van de lijnen tussen de rijen en kolommen. Tot HTML 4.0 behoren ook enkele attributen, welke vooral gericht zijn op de weergave door niet visuele media zoals spraaksynthesizers en braille-apparaten. Het betreft het SUMMARY attribuut voor het

TABLE element en de (nog niet in deze handleiding beschreven) attributen HEADERS, SCOPE, ABBR en AXIS voor de elementen TH en TD. Voor veel onderdelen van tabellen kan de weergave bepaald worden met behulp van stylesheets. Een uitgebreide toelichting daarop wordt gegeven in het onderdeel CSS en tabellen.

Eenvoudige tabellen
In het volgende voorbeeld wordt een eenvoudige tabel met twee rijen en twee kolommen gemaakt. Het TR element definieert een rij en het TD element definieert de cellen in de rij. De randen van de tabel zijn zichtbaar, omdat voor het TABLE element het BORDER attribuut is opgenomen met een andere waarde dan "0". <TABLE BORDER="1"> <TR> <TD>a1</TD> <TD>a2</TD> </TR> <TR> <TD>b1</TD> <TD>b2</TD> </TR> </TABLE> De browser maakt de cellen net zo breed als nodig is om de inhoud weer te geven: a1 a2 b1 b2

Door in de eerste rij de cellen te definiren met het TH element wordt de tabel voorzien van kolomtitels. <TABLE BORDER="1"> <TR> <TH>Titel 1</TH> <TH>Titel 2</TH> <TH>Titel 3</TH> </TR> <TR> <TD>a1</TD> <TD>a2</TD> <TD>a3</TD> </TR> <TR> <TD>b1</TD> <TD>b2</TD> <TD>b3</TD> </TR> </TABLE> De browser zal deze koptitels in vet weergeven: Titel 1 Titel 2 Titel 3 a1 b1 a2 b2 a3 b3

Met het WIDTH attribuut van het TABLE element wordt de breedte van de tabel gedefinieerd. <TABLE BORDER="1" WIDTH="50%"> <TR> <TD>a1</TD> <TD>a2</TD> </TR> <TR> <TD>b1</TD> <TD>b2</TD> </TR> </TABLE> De browser zal de beschikbare breedte over de kolommen verdelen: a1 b1 a2 b2

De hoogte en breedte van een cel worden bepaald met de attributen WIDTH en het HEIGHT van het TD (of TH) element. <TABLE BORDER="1"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer:

a1

a2

b1

b2

Samenvoegen van cellen

Opeenvolgende cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in verticale richting gebruik je het ROWSPAN attribuut van het TD (of TH) element, voor het samenvoegen in horizontale richting het COLSPAN attribuut. In het volgende voorbeeld wordt de eerste cel in de eerste rij met het ROWSPAN attribuut samengevoegd met de onderliggende cellen in de volgende twee rijen. In de tweede en derde rij hoeven er daardoor slechts twee cellen gedefinieerd te worden. <TABLE BORDER="1" WIDTH="50%"> <TR> <TD ROWSPAN="3" HEIGHT="100">abc1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD>b2</TD><TD>b3</TD> </TR> <TR> <TD>c2</TD><TD>c3</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a2 abc1 b2 c2 a3 b3 c3

In het vorige voorbeeld worden nu de overblijvende cellen in de tweede rij samengevoegd met het COLSPAN attribuut. <TABLE BORDER="1" WIDTH="50%"> <TR> <TD ROWSPAN="3" HEIGHT="100">abc1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD COLSPAN="2">b23</TD> </TR> <TR> <TD>c2</TD> <TD>c3</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a2 abc1 b23 c2 c3 a3

Je kunt de attributen ROWSPAN en COLSPAN ook tegelijkertijd voor een cel gebruiken. <TABLE BORDER="1" WIDTH="50%"> <TR> <TD HEIGHT="30">a1</TD><TD ROWSPAN="2" COLSPAN="2">a2b3</TD> </TR> <TR> <TD HEIGHT="30">b1</TD> </TR> <TR> <TD HEIGHT="30">c1</TD><TD>c2</TD><TD>c3</TD> </TR> </TABLE> De browser voegt de vier cellen rechtsboven in de tabel samen: a1 a2b3 b1 c1 c2 c3

Uitlijnen celinhoud
Met de attributen ALIGN en VALIGN van het TD (of TH) element bepaal je hoe de inhoud van een cel in respectievelijk horizontale en verticale richting moet worden uitgelijnd. De beginwaarde van het ALIGN attribuut is "left" en als je het attribuut niet opneemt, dan wordt de inhoud van de cel links uitgelijnd. De beginwaarde van het VALIGN is "middle" en zonder het attribuut wordt de inhoud van de cel in verticale richting gecentreerd.

In de volgende HTML-code kun je zien welke waarden je moet gebruiken om de celinhoud op de gewenste manier uit te lijnen. De eerste waarde is die voor het ALIGN attribuut, de tweede voor het VALIGN attribuut. Een streepje betekent dat het niet nodig is het attribuut op te nemen. <TABLE BORDER="1"> <TR> <TD VALIGN="top" WIDTH="120" HEIGHT="40">-/top</TD> <TD WIDTH="120">-/-</TD> <TD VALIGN="bottom" WIDTH="120">-/bottom</TD> </TR> <TR> <TD ALIGN="center" VALIGN="top" HEIGHT="40">center/top</TD> <TD ALIGN="center">center/-</TD> <TD ALIGN="center" VALIGN="bottom">center/bottom</TD> </TR> <TR> <TD ALIGN="right" VALIGN="top" HEIGHT="40">right/top</TD> <TD ALIGN="right">right/-</TD> <TD ALIGN="right" VALIGN="bottom">right/bottom</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: -/top center/top right/top -/center/right/-

-/bottom center/bottom right/bottom

De attributen ALIGN en VALIGN kunnen ook aan het TR element toegevoegd worden, om in n keer voor alle cellen in een rij te bepalen hoe de inhoud in respectievelijk horizontale en verticale richting uitgelijnd moet worden. <TABLE BORDER="1"> <TR ALIGN="center"> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR ALIGN="right" VALIGN="top"> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2

Wanneer je de attributen ALIGN en VALIGN attributen voor meerdere elementen gebruikt, dan is het goed eens te kijken naar de voorrangsregels voor het uitlijnen van celinhoud. Het uitlijnen van de celinhoud kun je ook regelen met behulp van stylesheets. Zie hiervoor het onderdeel CSS en tabellen - Uitlijnen celinhoud.

Standaard houdt de browser 1 pixel ruimte vrij tussen de inhoud van de cel en de rand aan de zijde waarlangs de inhoud wordt uitgelijnd, behalve langs de bovenrand waar de tussenruimte 4 pixels is. <TABLE BORDER="1"> <TR> <TD VALIGN="top" WIDTH="120" HEIGHT="70">10 pixels tussen rand en inhoud</TD> <TD ALIGN="right" VALIGN="top" WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="70">b1</TD> <TD VALIGN="bottom">b2</TD> </TR> </TABLE> standaard ruimte tussen rand en inhoud a2

b1 b2 Met behulp van het CELLPADDING attribuut van het TABLE element kun je zelf bepalen welke ruimte moet worden vrijgehouden. De opgegeven afstand geldt als minimum. Als de cel breder en hoger is dan nodig is voor de inhoud en de opgegeven tussenruimte, zal de afstand tot de rand langs sommige zijden groter zijn. Waar dat het geval is, hangt af van de (al dan niet opgegeven) uitlijning van de celinhoud. In het volgende voorbeeld is het CELLPADDING attribuut is opgenomen met de waarde "10". De inhoud van de cellen staat in vergelijking tot de tabel uit het vorige voorbeeld verder van de rand. Omdat de met het WIDTH attribuut vastgelegde breedte betrekking heeft op de inhoud van de cel, is de tabel in het laatste geval aanzienlijk breder. <TABLE BORDER="1" CELLPADDING="10"> <TR> <TD VALIGN="top" WIDTH="120" HEIGHT="70">10 pixels tussen rand en inhoud</TD> <TD ALIGN="right" VALIGN="top" WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="70">b1</TD> <TD VALIGN="bottom">b2</TD> </TR> </TABLE>

10 pixels tussen rand en inhoud

a2

b1 b2 Met het CELLPADDING attribuut van het TABLE element leg je in n keer de afstand tussen de celinhoud en alle vier de randen vast. Met behulp van stylesheets heb je de mogelijkheid de afstand tot elke rand afzonderlijk te bepalen. Zie hiervoor het onderdeel CSS en tabellen - Uitlijnen celinhoud.

Uitlijnen tabel
Standaard wordt een tabel die niet de gehele breedte van het venster of frame beslaat, links uitgelijnd. Door gebruik te maken van het ALIGN attribuut van het TABLE element kun je zelf bepalen op welke wijze de tabel in horizontale richting wordt uitgelijnd. Als je de tabel wilt centreren, dan gebruik je het ALIGN attribuut met de waarde "center". <TABLE BORDER="1" ALIGN="center"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer:

a1

a2

b1

b2

De waarden "left" en "right" zorgen er niet alleen voor dat de tabel links of rechts wordt uitgelijnd, ze hebben ook als resultaat dat de tabel "zwevend" wordt. De inhoud van het document die op de tabel volgt, wordt daardoor niet zoals gebruikelijk onder de tabel geplaatst, maar ernaast. In het volgende voorbeeld is dat te zien voor de waarde "left". <TABLE BORDER="1" ALIGN="left"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR>

</TABLE> <P>Met de waarde ... komt te staan.<BR CLEAR="all"></P> De browser geeft dit voorbeeld zo weer: Met de waarde "left" voor het ALIGN attribuut van het TABLE element maak je een links uitgelijnde "zwevende" tabel. De tekst wordt naast de tabel geplaatst en wanneer de hoeveelheid tekst groter is dan naast de tabel past, dan loopt de tekst onder de tabel door. Het is verstandig direct na de tekst het BR element met het CLEAR attribuut op te nemen. Daarmee voorkom je dat een volgende alinea onbedoeld ook weer naast in plaats van onder de

a1

a2

b1 tabel komt te staan.

b2

De waarde "right" heeft een vergelijkbaar effect. <TABLE BORDER="1" ALIGN="right"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> <P>Als je de waarde ... geplaatst.<BR CLEAR="all"></P> Als je de waarde "right" voor het ALIGN attribuut gebruikt, komt de a1 tabel rechts in het venster te staan en wordt de tekst links naast de tabel geplaatst. b1 a2

b2

Wanneer je de tabel alleen rechts wil uitlijnen en hem niet "zwevend" wilt maken, dan kun je de hele tabel ook in een DIV element plaatsen en hiervoor het ALIGN attribuut gebruiken met de waarde "right". <DIV ALIGN="right"><TABLE BORDER="1"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE></DIV> De browser geeft dit als volgt weer:

a1

a2

b1

b2

Het ALIGN attribuut van het TABLE element heeft in HTML 4.0 het label afgekeurd gekregen en hetzelfde geldt voor het ALIGN attribuut van het DIV element. Als alternatief kun je het uitlijnen van de tabel ook regelen met behulp van stylesheets. Zie hiervoor het onderdeel CSS en tabellen - Uitlijnen tabel.

Bijschrift bij tabel

Het CAPTION element kun je gebruiken als je een tabel wilt voorzien van een bijschrift. Met het ALIGN attribuut kun je bepalen waar het bijschrift moet staan. Het attribuut heeft vier waarden: "top", "bottom", "left" en "right". De beginwaarde is "top" en als je het ALIGN attribuut niet opneemt, wordt het bijschrift midden boven de tabel geplaatst. <TABLE BORDER="1"> <CAPTION>Dit is het bijschrift</CAPTION> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit zo weer: Dit is het bijschrift a1 b1 a2 b2

De waarde "bottom" zorgt ervoor dat het bijschrift midden onder de tabel wordt geplaatst. <TABLE BORDER="1"> <CAPTION ALIGN="bottom">Dit is het bijschrift</CAPTION> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 a2

b1

b2 Dit is het bijschrift

De waarden "left" en "right" worden niet door alle browsers ondersteund en in ieder geval niet op uniforme wijze. Sommige browsers (Internet Explorer en Opera 7.1 en hoger) plaatsen het bijschrift bij deze waarden links of rechts boven de tabel. Andere browsers (Mozilla 1.3 en hoger en Netscape Navigator 7.1 en hoger) plaatsen het bijschrift links of rechts naast de tabel. Het ALIGN attribuut van het CAPTION element heeft in HTML 4.0 het label afgekeurd gekregen. Als alternatief kun je het uitlijnen van de tabel ook regelen met behulp van stylesheets. Zie hiervoor het onderdeel CSS en tabellen - Bijschrift bij tabel.

Tabelranden
De wijze waarop tabelranden worden weergegeven, kun je met twee attributen van het TABLE element benvloeden: BORDER en CELLSPACING. Of er randen worden weergegeven worden, hangt ervan af of het BORDER attribuut is opgenomen voor het TABLE element en zo ja, welke waarde het heeft. Is het attribuut niet opgenomen, of heeft het de waarde "0", dan geeft de browser helemaal geen randen weer. Niet voor de tabel zelf (de buitenranden van de tabel) en ook niet voor de cellen. <TABLE> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2

De keuze voor een tabel zonder randen wordt vooral gemaakt in situaties, waarin de tabel gebruikt wordt als hulpmiddel bij de lay-out van een document. Door het opnemen BORDER attribuut voor het TABLE element met een andere waarde dan "0", kun je de breedte van de buitenranden van de tabel vastleggen. De breedte van de randen van de cel kun je met HTML niet benvloeden. <TABLE BORDER="10"> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR>

<TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2

De breedte van de ruimte tussen de randen van een tabel leg je vast met het CELLSPACING attribuut van het TABLE element. Als je het attribuut niet hebt opgenomen, dan houden de meeste browsers een tussenruimte van 2 pixels aan. <TABLE BORDER="1"> <TR> <TD WIDTH="120" HEIGHT="60" VALIGN="top">standaard tussenruimte</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> standaard tussenruimte b1

a2 b2

Als je het CELLSPACING attribuut opneemt met de waarde "10", dan is de ruimte tussen de randen 10 pixels breed. Omdat de cellen even breed blijven, is de tabel breder dan in het vorige voorbeeld. <TABLE BORDER="1" CELLSPACING="10"> <TR> <TD WIDTH="120" HEIGHT="60" VALIGN="top">rand 10 pixels breed</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> tussenruimte 10 pixels a2 breed b1 b2

Door Microsoft Internet Explorer wordt voor de elementen TABLE, TR, TD en TH een aantal attributen ondersteund, waarmee je de kleur van de randen kunt vastleggen. Het gaat om de attributen BORDERCOLOR, BORDERCOLORLIGHT en BORDERCOLORDARK. Ze worden niet ondersteund door andere browsers en maken bovendien geen deel uit van HTML 4.0. Alle hiervoor beschreven constructies voor de weergave van tabelranden (dus inclusief die welke alleen ondersteund worden door Microsoft Internet Explorer) zijn ook beschikbaar via stylesheets. Een uitgebreide toelichting en allerlei extra mogelijkheden zijn te vinden in het onderdeel CSS en tabellen Tabelranden.

Achtergrond tabel
Het BGCOLOR attribuut van de elementen TABLE, TR, TD en TH kun je gebruiken om een achtergrondkleur vast te leggen voor de gehele tabel, de cellen in rij, of de afzonderlijke cellen. In het volgende voorbeeld is met het BGCOLOR attribuut een achtergrondkleur voor het TABLE element bepaald. Deze achtergrondkleur wordt aangehouden voor de gehele tabel, dat wil zeggen zowel voor de cellen als voor de ruimte tussen de randen. <TABLE BORDER="1" BGCOLOR="#FFFFCC"> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2

Als je het BGCOLOR opneemt voor een TR element, dan kun je een achtergrondkleur voor de cellen in de betreffende rij vastleggen. De ruimte tussen de randen blijft daarbij transparant en in dit geval is daar de achtergrondkleur van het document te zien. <TABLE BORDER="1"> <TR BGCOLOR="#FFCCCC"> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer:

a1 b1

a2 b2

Wanneer je het BGCOLOR attribuut opneemt voor een TD (of TH) element, dan kun je de achtergrondkleur voor een enkele cel vastleggen. <TABLE BORDER="1"> <TR> <TD WIDTH="120" HEIGHT="40" BGCOLOR="#99FFCC">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2

Je kunt het BGCOLOR attribuut ook voor de verschillende elementen tegelijkertijd gebruiken. Welke kleur je te zien krijgt, wordt bepaald door de volgende regel: de achtergrondkleur van de cel heeft een hogere prioriteit dan die van de rij en de achtergrondkleur van de rij heeft een hogere prioriteit dan die van de tabel. <TABLE BORDER="1" BGCOLOR="#FFFFCC"> <TR BGCOLOR="#FFCCCC"> <TD WIDTH="120" HEIGHT="40" BGCOLOR="#99FFCC">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2

Sommige browsers ondersteunen het BGCOLOR attribuut ook voor de elementen waarmee je rijgroepen en kolom(groep)en definieert. HTML 4.0 kent voor deze elementen echter geen BGCOLOR attribuut. Verder ondersteunen veel browser het BACKGROUND attribuut voor de elementen TABLE,

TR, TD en TH. Ze bieden daarmee de mogelijkheid vast te leggen, dat een bepaalde afbeelding als achtergrond moet worden weergegeven. Ook dit is evenwel is strijd met HTML 4.0. Wil je de mogelijkheid hebben een achtergrondkleur of -afbeelding vast te leggen voor alle elementen waaruit de tabel is opgebouwd, dan kun je het beste gebruik maken van stylesheets. Een uitgebreide toelichting wordt gegeven in het onderdeel CSS en tabellen - Achtergrond tabel.

Rijgroepen
Met elementen THEAD, TFOOT en TBODY kun je de rijen van een tabel groeperen in een header, een footer en n of meer body secties. De cellen in de rijen die behoren tot de header en de footer bevatten informatie over de kolom waarvan ze deel uitmaken. Bijvoorbeeld een aanduiding van het soort gegevens een kolom bevat. De cellen in de rijen die behoren tot een body bevatten de feitelijke gegevens. In het volgende voorbeeld zijn THEAD en TBODY gebruikt. Het gebruikte ALIGN attribuut zorgt ervoor dat de inhoud van alle cellen in deze rijgroepen in n keer wordt gecentreerd. Met de volgende tabel wordt dat gedemonstreerd: <TABLE BORDER="1"> <THEAD ALIGN="center"> <TR> <TD WIDTH="70">titel 1</TD><TD WIDTH="70">titel 2</TD> <TD WIDTH="70">titel 3</TD> </TR> </THEAD> <TBODY ALIGN="center"> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD>b1</TD><TD>b2</TD><TD>b3</TD> </TR> </TBODY> </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Gezien het beperkte aantal attributen dat je kunt gebruiken voor de elementen THEAD, TFOOT en TBODY, ligt het voor de hand gebruik te maken van stylesheets bij de opmaak van rijgroepen. In het volgende voorbeeld is dat gedaan voor de achtergrondkleur van de cellen in de header van de tabel (met de background-color eigenschap), voor de kleur van de tekst (met de color eigenschap), voor het gewicht van de letters (met de font-weight eigenschap) en voor de uitlijning van de celinhoud (met de text-align eigenschap). De tabel heeft de volgende opbouw: <TABLE BORDER="1"> <THEAD> <TR>

<TH WIDTH="70">titel 1</TH><TH WIDTH="70">titel 2</TH> <TH WIDTH="70">titel 3</TH> </TR> </THEAD> <TBODY> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD>b1</TD><TD>b2</TD><TD>b3</TD> </TR> </TBODY> </TABLE> In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen: THEAD { text-align: center; background-color: #FFFFCC; font-weight: bold; } TBODY { text-align: center; } Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Uitgebreide informatie over het gebruik van stijlen voor tabellen is te vinden in het onderdeel CSS en tabellen.

Het gebruik van de elementen THEAD, TFOOT en TBODY maakt het mogelijk een tabel in gecomprimeerde vorm weer te geven. Het idee daarbij is dat de header en footer geheel zichtbaar zijn, maar de body van de tabel slechts voor een deel. Met behulp van een verticale schuifbalk kan de bezoeker door de gegevens van de tabel heenlopen. Je maakt een gecomprimeerde tabel door met behulp van een stijl de hoogte van TBODY vast te leggen en te bepalen dat de browser indien nodig een schuifbalk moet weergeven. Deze oplossing wordt op dit moment alleen door Mozilla en Netscape Navigator 6.0 en hoger ondersteund. Microsoft Internet Explorer past de opgegeven hoogte voor TBODY ten onrechte toe op de ingesloten TD elementen. Het resultaat zal daardoor in deze browser juist het tegendeel van een gecomprimeerde tabel zijn. Het volgende voorbeeld moet dan ook vooral als illustratie van toekomstige mogelijkheden worden gezien en het gebruik ervan in de praktijk wordt afgeraden. De tabel heeft de volgende opbouw: <TABLE BORDER="1" WIDTH="240"> <THEAD> <TR> <TD>Dit is de header van de tabel</TD> </TR> </THEAD> <TFOOT> <TR> <TD>Dit is de footer van de tabel</TD>

</TR> </TFOOT> <TBODY> <TR> <TD>Dit is rij 1 van de body van de tabel</TD> </TR> ... <TR> <TD>Dit is rij 15 van de body van de tabel</TD> </TR> </TBODY> </TABLE> In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen: THEAD { color: #000000; background-color: #C0C0C0; font-weight: bold; } TBODY { overflow: auto; height: 130px; } TFOOT { color: #000000; background-color: #C0C0C0; font-style: italic; } Rechts is de weergave door de browser te zien en links een schermafdruk van de weergave door Mozilla 1.4. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Hoewel de elementen THEAD en TBODY door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund worden, kun je ze zonder problemen gebruiken. Een uitzondering geldt de hiervoor beschreven gecomprimeerde tabel. Wanneer het van belang is dat de tabel in alle browsers wordt weergegeven zoals je bedoeld, dan is het verstandig de attributen voor de uitlijning en de achtergrondkleur (ook) te blijven gebruiken voor de elementen TH en TD. Met het gebruiken van TFOOT moet je wat voorzichtiger zijn. Omdat TFOOT vr TBODY geplaatst moet worden, zullen browsers die het element niet kennen, de bijbehorende rijen niet aan het eind van de tabel weergeven maar voor de rijen van TBODY.

Kolomgroepen
Wanneer je de cellen in kolommen van bepaalde kenmerken wilt voorzien, dan kun je gebruik maken van de elementen COL en COLGROUP. Deze elementen doen in principe allebei hetzelfde: het groeperen van de kolommen in een tabel en/of het (met behulp van de verschillende attributen) in n keer geven van de gewenste kenmerken. Het COLGROUP element heeft daarnaast een functie in het structureren van de tabel (zie het onderdeel Kader en lijnen).

In het volgende voorbeeld wordt de weergave bepaald met de attributen van het COLGROUP element. Het ALIGN attribuut bepaalt de uitlijning van de inhoud van de cellen en het WIDTH attribuut bepaalt de breedte van de cellen. De eerste kolomgroep bestaat uit slechts n kolom, voor de volgende kolomgroep is met behulp van het SPAN attribuut de omvang bepaald op twee kolommen. <TABLE BORDER="1"> <COLGROUP ALIGN="left" WIDTH="90"> </COLGROUP> <COLGROUP SPAN="2" ALIGN="center" WIDTH="60"> </COLGROUP> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD>b1</TD><TD>b2</TD><TD>b3</TD> </TR> <TR> <TD>c1</TD><TD>c3</TD><TD>c3</TD> </TR> </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Soms wil je bepaalde kolommen binnen een kolomgroep kenmerken geven, die afwijken van die van de rest van de kolomgroep. In het volgende voorbeeld geldt dat voor de laatste kolom van de tweede kolomgroep. Het COL element moet twee keer gebruikt worden. Voor beide COL elementen is het ALIGN attribuut opgenomen, dat de uitlijning van de tekst vastlegt. Let erop dat het COL element in tegenstelling tot het COLGROUP element geen beindiging kent. <TABLE BORDER="1"> <COLGROUP ALIGN="left" WIDTH="90"> </COLGROUP> <COLGROUP SPAN="2" WIDTH="60"> <COL ALIGN="center"> <COL ALIGN="right"> </COLGROUP> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> ... </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Het aantal attributen dat beschikbaar is voor de opmaak van kolom(groep)en is heel beperkt en bovendien wordt niet elk attribuut door elke browser ondersteund. Eigenlijk moet je ervan uitgaan, dat alleen het (via het WIDTH attribuut) vastleggen van de breedte van de cellen in de kolom(men) door alle actuele browsers wordt ondersteund. Ook met behulp van stylesheets heb je maar een beperkt aantal mogelijkheden de opmaak van de kolommen te benvloeden (zie het onderdeel CSS en tabellen - Kolommen). Daartoe behoren het vastleggen van de breedte en de achtergrond van de cellen in een kolom(groep). <TABLE BORDER="1"> <COLGROUP CLASS="kg1"> </COLGROUP> <COLGROUP SPAN="2" CLASS="kg2"> </COLGROUP> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> ... </TABLE> In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen: .kg1 { width: 90px; background-color: #FFFF99; } .kg2 { width: 60px; background-color: #FFFFCC; } Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Kader en lijnen
Met het BORDER attribuut van het TABLE element kun je bepalen of er wel of geen randen moeten worden weergegeven in de tabel. De gemaakte keuze geldt voor alle randen. Je kunt geen onderscheid maken tussen de verschillende randen en op die manier bijvoorbeeld structuur aanbrengen in de tabel. Sinds de komst van HTML 4.0 beschikken we over twee nieuwe attributen voor het TABLE element, die dat onderscheid wel mogelijk maken. Het RULES attribuut kun je gebruiken, om vast te leggen welke van de lijnen tussen de rijen en kolommen van een tabel de browser moet weergegeven. Met het FRAME attribuut doe je hetzelfde voor de randen van het kader van de tabel (de randen aan de buitenzijde). In het volgende voorbeeld zijn de attributen RULES en FRAME gebruikt om structuur te geven aan de tabel. Het RULES attribuut heeft de waarde "groups". Daardoor zijn alleen de lijnen tussen de rijgroepen en tussen de kolomgroepen zichtbaar. Het FRAME attribuut heeft de waarde "hsides". Dat zorgt ervoor dat alleen de boven- en onderrand zichtbaar zijn. Om ook in browsers die de elementen THEAD, TFOOT, TBODY en COLGROUP niet ondersteunen tot een acceptabele weergave te komen, zijn de attributen voor de uitlijning toegevoegd aan de elementen TD, TH en TR. <TABLE BORDER="1" FRAME="hsides" RULES="groups"> <CAPTION><B>Ondersteuning door browsers</B></CAPTION>

<COLGROUP WIDTH="80"></COLGROUP> <COLGROUP SPAN="3" WIDTH="60"></COLGROUP> <THEAD> <TR VALIGN="top"> <TH ALIGN="left">&nbsp;</TH> <TH>Microsoft Internet Explorer</TH> <TH>Netscape Navigator</TH> <TH>Opera</TH> </TR> </THEAD> <TBODY> <TR> <TH ALIGN="left">COL</TH> <TD ALIGN="center">3.0</TD> <TD ALIGN="center">6.0</TD> <TD ALIGN="center">4.0</TD> </TR> ... </TBODY> <TBODY> <TR> <TH ALIGN="left">FRAME</TH> <TD ALIGN="center">3.0</TD> <TD ALIGN="center">6.0</TD> <TD ALIGN="center">7.1</TD> </TR> ... </TBODY> </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Hoewel de attributen RULES en FRAME niet door oudere browsers ondersteund worden, kun je ze zonder problemen gebruiken. Als alternatief voor de attributen RULES en FRAME kun je ook stylesheets gebruiken voor het geven van structuur aan een tabel. Ter illustratie is hierna een voorbeeld voor de eerder gebruikte tabel opgenomen. Op dit moment is het overigens niet aan te bevelen de gegeven oplossing in de praktijk toe te passen, omdat in de weergave door Microsoft Internet Explorer alle randen ontbreken. Deze browser geeft namelijk alleen randen weer voor de elementen COL, COLGROUP, TBODY, TFOOT en THEAD als het BORDER attribuut is opgenomen voor het TABLE element met een andere waarde dan "0".

Wanneer je dat echter doet, verschijnen in andere browsers randen op plaatsen waar dat juist niet de bedoeling is. In de volgende tabel zijn alle attributen die de opmaak van de tabel bepalen weggelaten. <TABLE> <CAPTION><B>Ondersteuning door browsers</B></CAPTION> <COLGROUP></COLGROUP> <COLGROUP SPAN="3"><COL><COL><COL></COLGROUP> <THEAD> <TR> <TH>&nbsp;</TH> <TH>Microsoft Internet Explorer</TH> <TH>Netscape Navigator</TH> <TH>Opera</TH> </TR> </THEAD> <TBODY> <TR> <TH>COL</TH><TD>3.0</TD><TD>6.0</TD><TD>4.0</TD> </TR> ... </TBODY> <TBODY> <TR> <TH>FRAME</TH><TD>3.0</TD><TD>6.0</TD><TD>7.1</TD> </TR> ... </TBODY> </TABLE> In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen: TABLE .kg1 .kg2 THEAD TBODY { { { { { border-collapse: collapse; } width: 80px; color: #000000; background-color: #F0F0F0; } border-left: 2px solid #C0C0C0; width: 60px; } border-top: 2px solid #C0C0C0; border-bottom: 2px solid #C0C0C0; color: #000000; background-color: #F0F0F0; } border-top: 2px solid #C0C0C0; border-bottom: 2px solid #C0C0C0; } border-left: 1px solid #C0C0C0; } border-top: 1px solid #C0C0C0; } text-align: left; } text-align: center; vertical-align: top; } text-align: center; }

COL { TR { TH { THEAD TH { TD {

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.

Voorrangsregels bij uitlijnen

De uitlijning van de inhoud van een cel kan op verschillende manieren bepaald worden: door het toevoegen van de attributen ALIGN, VALIGN, CHAR en CHAROFF direct aan de elementen voor het definiren van een cel (TD of TH) door de cel de uitlijning te laten erven van de elementen voor het definiren van de rij (TR), kolommen (COL), de kolomgroep (COLGROUP) of de rijgroep (TBODY, TFOOT en THEAD), waartoe de cel behoort via het STYLE attribuut, dat toegevoegd kan worden aan alle elementen, die betrekking hebben op het maken van een tabel via een element dat als inhoud in een cel is opgenomen

Omdat de genoemde mogelijkheden ook gelijktijdig en met een verschillende uitkomst gebruikt kunnen worden, zijn in HTML 4.0 voorrangsregels vastgelegd. Voor de attributen ALIGN, CHAR en CHAROFF, welke betrekking hebben op de horizontale uitlijning van de celinhoud, geldt dat achtereenvolgens voorrang hebben: 1. een attribuut dat is toegevoegd aan een element, dat tot de celinhoud behoort 2. een attribuut dat is toegevoegd aan de elementen TD of TH 3. een attribuut dat is toegevoegd aan het COL element 4. een attribuut dat is toegevoegd aan het COLGROUP element 5. een attribuut dat is toegevoegd aan het TR element 6. een attribuut dat is toegevoegd aan de elementen TBODY, TFOOT of THEAD 7. een attribuut dat is toegevoegd aan het TABLE element 8. de beginwaarde van het attribuut Voor de attributen VALIGN (dat betrekking heeft op de verticale uitlijning van de celinhoud) en STYLE geldt dat achtereenvolgens voorrang hebben: 1. een attribuut dat is toegevoegd aan een element, dat tot de celinhoud behoort 2. een attribuut dat is toegevoegd aan de elementen TD of TH 3. een attribuut dat is toegevoegd aan het TR element 4. een attribuut dat is toegevoegd aan de elementen TBODY, TFOOT of THEAD 5. een attribuut dat is toegevoegd aan het COL element 6. een attribuut dat is toegevoegd aan het COLGROUP element 7. een attribuut dat is toegevoegd aan het TABLE element

8. de beginwaarde van het attribuut Door Microsoft Internet Explorer worden niet de voorrangsregels volgens de specificatie van HTML 4.0 aangehouden, maar wordt uitgegaan van de volgorde waarin de genoemde elementen in het document staan: de uitlijning wordt bepaald door de waarde van het attribuut, dat is toegevoegd aan het laatste element in het document dat betrekking heeft op een cel.

Introductie formulieren
Formulieren (forms) worden gebruikt om de bezoeker van een site de mogelijkheid te bieden informatie in te voeren en te verzenden. Het kan daarbij gaan om bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enqute, het beantwoorden van vragen en het plaatsen van een bestelling. De belangrijkste elementen bij het maken van formulieren zijn FORM, INPUT, SELECT, OPTION en TEXTAREA. Het FORM element definieert het begin en einde van een formulier. Met de attributen METHOD en ACTION wordt bepaald op welke wijze de informatie uit het formulier verzonden moet worden en waarheen. Een formulier bevat naast normale documentinhoud (bijvoorbeeld paragrafen, lijsten en koppen) een aantal onderdelen, welke controls worden genoemd. Het INPUT element wordt onder andere gebruikt voor het maken van de volgende controls: tekstvelden, waarin de gebruiker op n regel tekst kan invoeren (gewone tekst, of een wachtwoord) verborgen informatie, welke voor de gebruiker niet zichtbaar is, maar wel met de overige informatie uit het formulier naar de server gestuurd wordt) keuzerondjes (radio buttons), waarbij de gebruiker n keuze moet maken uit meerdere mogelijkheden aankruisvakjes (checkboxen), waarvan de gebruiker er n of meer kan selecteren bestandsselectie, waarbij de gebruiker bestanden kan selecteren welke met het formulier meegestuurd moeten worden knoppen voor verzenden (submit) en terug naar de beginwaarden van het formulier (reset)

De elementen SELECT en OPTION worden gebruikt voor het maken van de volgende controls: uitschuifkeuzelijst: de gebruiker kiest uit een uitklapbaar menu n of meer mogelijkheden meervoudige keuzelijst: de gebruiker kiest n of meer mogelijkheden uit een lijst, waarin meerdere opties zichtbaar zijn

Het TEXTAREA element wordt gebruikt om het volgende control te maken: tekstvak, waarin de gebruiker over meerdere regels tekst kan invoeren

In het volgende "formulier" zijn een aantal controls te zien.

Tekstveld:

Aankruisvakjes: keuze 1 keuze 2 Keuzerondjes: mee eens niet mee eens Tekstvak: Uitschuifkeuzelijst: Meervoudige keuzelijst: Knoppen:

Aan de meeste van de hiervoor genoemde elementen kunnen de attributen NAME en VALUE toegevoegd worden. Met het NAME attribuut wordt aan een control een naam gegeven, zodat het bij de verwerking van het formulier op de server onderscheiden kan worden van andere controls. Het VALUE attribuut legt vast welke waarde naar de server gestuurd moet worden, als een bepaalde keuze gemaakt wordt. Daarnaast kan het in sommige gevallen gebruikt worden om een beginwaarde te definiren (bij tekstvelden). Nieuwe mogelijkheden bieden de in HTML 4.0 opgenomen elementen FIELDSET, LEGEND, OPTGROUP, LABEL en BUTTON. Deze elementen hebben vooral betrekking op de weergave en toegankelijkheid van formulieren. Het FIELDSET element kan gebruikt worden om een aantal (bijvoorbeeld thematisch gerelateerde) controls van een formulier te groeperen door er een kader om te plaatsen. Met het LEGEND element kan bij dat kader een bijschrift geplaatst worden. Met het OPTGROUP element kunnen keuzemogelijkheden in een keuzelijst gegroepeerd worden. Dit moet voorkomen dat de gebruiker bij een lange lijst in de vele mogelijkheden verdwaalt. Met het LABEL element kan informatie aan een control verbonden worden (bijvoorbeeld een bijschrift), welke het de gebruiker makkelijker moet maken dat control te selecteren. Het BUTTON element kan gebruikt worden om een knop te maken met meer mogelijkheden voor de opmaak dan de knoppen, welke gemaakt worden met het INPUT element. Tot de nieuwe mogelijkheden behoren ook de attributen TABINDEX en ACCESSKEY, welke aan meerdere elementen toegevoegd kunnen worden. Met het TABINDEX attribuut kan de volgorde bepaald worden, waarmee de verschillende controls van een formulier geactiveerd kunnen worden als de gebruiker de tab-toets op het toetsenbord indrukt. Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets aan een element toe te wijzen en daarmee de gebruiker direct vanaf het toetsenbord toegang te geven tot het control, dat door het element in het formulier is geplaatst. De ondersteuning van de genoemde elementen en attributen beperkt zich vooral tot de nieuwste browsers. Hierna wordt eerst ingegaan op het verwerken van de informatie uit een formulier met behulp van een script op de server en op het verzenden van de informatie per e-mail. Daarna worden de hiervoor genoemde controls toegelicht en wordt ingegaan op de mogelijkheden voor groepen en activeren ervan. Verder wordt aandacht besteed aan de opmaak van een formulier en het gebruik van stijlen. Dit onderdeel over formulieren wordt afgesloten met voorbeelden voor een zoekformulier en een vragenformulier.

Verwerken informatie
Als een bezoeker een formulier heeft ingevuld, zal het de bedoeling zijn dat de informatie op de juiste plek terecht komt en/of verwerkt wordt. Dat gebeurt over het algemeen met behulp van scripts, die uitgevoerd worden op de webserver van de provider en daarom server-side scripts genoemd worden (in tegenstelling tot client-side scripts, die door de browser verwerkt worden). Het gaat daarbij om CGIscripts (die vaak geschreven zijn in de scripttaal Perl) of om PHP-scripts. Meestal beschikt een provider over een aantal standaardscripts, waarvoor je gebruiksrechten kunt krijgen. Bijvoorbeeld voor het automatisch als e-mail door sturen van de in het formulier ingevoerde informatie. Minder vaak zal een provider je toestaan ook eigen scripts te draaien. Wanneer je van

formulieren gebruik wilt maken, is het daarom verstandig bij je provider te informeren naar de mogelijkheden. Als alternatief voor scripts van je eigen provider kun je ook terecht bij enkele sites, die gratis standaardscripts aanbieden voor algemeen gebruik. Een voorbeeld daarvan is het form-to-mail script van Freedback.com, dat de informatie uit het formulier op een overzichtelijke manier per e-mail naar je toezendt (zie ook het Voorbeeld vragenformulier). Informatie over andere mogelijkheden voor het gratis verwerken van formulieren vind je onder meer bij The CGI Resource Index. Met de attributen METHOD en ACTION van het FORM geef je aan op welke wijze en waarheen de informatie uit het formulier verzonden moet worden. Het METHOD attribuut kent twee waarden: "get" en "post". Welke waarde moet worden opgenomen, hangt af van het gebruikte script op de server. De waarde van het ACTION attribuut is een URI. Als gebruik gemaakt wordt van een script op de server waarop ook de HTML-documenten staan, dan wordt de bestemming bijvoorbeeld als volgt vastgelegd: <FORM METHOD="get" ACTION="/cgi-bin/mailform"> ... </FORM> of <FORM METHOD="post" ACTION="form2mail.php"> ... </FORM> Als het script op een andere server staat, dan wordt de bestemming door middel van een http-URI vastgelegd. Bijvoorbeeld: <FORM METHOD="get" ACTION="http://cgi18.Freedback.com/mail.pl"> ... </FORM>

Verzenden via mailto

Met behulp van een mailto-URI kan de informatie uit het formulier zonder tussenkomst van een script op de server direct naar een op te geven e-mailadres worden gestuurd. Bijvoorbeeld: <FORM METHOD="post" ACTION="mailto:gebruiker@provider.nl"> ... </FORM> De informatie uit het formulier wordt in het e-mailbericht op een weinig gebruiksvriendelijke wijze weergegeven: als n lange aaneengesloten regel tekst (waarin bepaalde karakters vervangen zijn door code, bijvoorbeeld de spatie door %20; zie ook het overzicht bij Karakters in URI's) of in de vorm van een attachment. Je kunt dat voorkomen door het ENCTYPE attribuut met de waarde "text/plain" aan het FORM element toe te voegen. <FORM METHOD="post" ACTION="mailto:gebruiker@provider.nl" ENCTYPE="text/plain"> ... </FORM>

Net als bij mailto-hyperlinks worden door sommige browsers ook parameters voor de mailto-URI ondersteund, bijvoorbeeld om het onderwerp (subject) van het e-mailbericht vast te leggen: <FORM METHOD="post" ACTION="mailto:gebruiker@provider.nl?SUBJECT=Reactie"> ... </FORM> De mailto-URI wordt ondersteund door alle versies Microsoft Internet Explorer, Netscape Navigator en Opera. De ondersteuning is echter niet altijd compleet en leidt in de praktijk tot veel problemen: Bij vrijwel alle browsers werkt de mailto-URI alleen goed als degene die het formulier invult, het bij de browser behorende e-mailprogramma gebruikt. Bij de standalone versie van Netscape Navigator 4 werkt de mailto-URI in het geheel niet. In Netscape Navigator met versienummer lager dan 7.1 en in Mozilla met versienummer lager dan 1.3 wordt niets verstuurd, maar een nieuw bericht in het e-mailprogramma geopend. De te verzenden informatie uit het formulier staat echter niet in de body van het bericht en kan dus ook niet verzonden worden. Hetzelfde probleem doet zich blijkens allerlei meldingen regelmatig voor met Microsoft Internet Explorer 6. Door geen enkele versie van Opera wordt het ENCTYPE attribuut met de waarde "text/plain" ondersteund. De inhoud van het bericht is daardoor moeilijk leesbaar. De extra parameters voor SUBJECT, CC en BCC worden door geen enkele versie van Opera ondersteund. Doordat ze aan het e-mailadres worden geplakt en dat daarmee geen legaal adres meer is, kan de informatie uit het formulier niet verzonden worden. Meerdere e-mailadressen kunnen niet gebruikt worden. Het standaard scheidingsteken de komma wordt ondersteund door Netscape Navigator en Opera. Door Microsoft Internet Explorer wordt bij de komma als scheidingsteken (zonder dat er een foutmelding wordt gegeven) helemaal niets verstuurd. Als de puntkomma als scheidingsteken wordt gebruikt gaat het goed in Microsoft Internet Explorer, maar geven Netscape Navigator en Opera een foutmelding.

Gezien alle problemen wordt het toepassen van een mailto-URI afgeraden en als alternatief het gebruik van een form-to-mail script geadviseerd (van de eigen provider, of van bijvoorbeeld Freedback.com).

Tekstvelden
Een tekstveld wordt gebruikt om de bezoeker een beperkte hoeveelheid tekst op n regel te laten invoeren. Je maakt het met het INPUT element. In het volgende voorbeeld zijn daaraan de attributen TYPE, NAME, SIZE en MAXLENGTH toegevoegd. Door het TYPE attribuut de waarde "text" te geven, bepaal je dat het om een tekstveld gaat. Het SIZE attribuut definieert de breedte van het tekstveld en het MAXLENGTH attribuut bepaalt hoeveel karakters de gebruiker mag invoeren. <FORM METHOD="post" ACTION="bestemming"> <I>Vul hier je naam in:</I> <INPUT TYPE="text" NAME="naam" SIZE="20" MAXLENGTH="30"> </FORM> Dit wordt door de browser als volgt weergegeven: Vul hier je naam in: In dit voorbeeld mag er meer tekst ingevoerd worden dan past in het tekstveld. De tekst scrollt aan het eind automatisch door. Het is voor de gebruiker overigens wel zo overzichtelijk als de maximale lengte gelijk is aan de breedte van het tekstveld. Met de waarde "password" voor het TYPE attribuut wordt de invoer met asterisken (*) weergegeven.

<FORM METHOD="post" ACTION="bestemming"> <I>Vul hier een wachtwoord van maximaal 8 tekens in:</I> <INPUT TYPE="password" NAME="wachtwoord" SIZE="8" MAXLENGTH="8"> </FORM> Dit wordt door de browser als volgt weergegeven: Vul hier een wachtwoord van maximaal 8 tekens in: Door het TYPE attribuut de waarde "hidden" te geven, kan onzichtbaar voor de bezoeker bepaalde informatie naar de server worden gestuurd. <FORM METHOD="post" ACTION="bestemming"> <I>Verborgen control:</I> <INPUT TYPE="hidden" NAME="recipient" VALUE="gebruiker@provider.nl"> </FORM> Dit wordt door de browser als volgt weergegeven: Verborgen control: Hoewel door de browser niets wordt weergegeven, kan de invoer wel bekeken worden in de bron van het document.

Keuzerondjes
Keuzerondjes (radiobuttons) worden gebruikt wanneer de bezoeker uit meerdere mogelijkheden n keuze moet maken. Je maakt ze met het INPUT element. In het volgende voorbeeld zijn daaraan de attributen TYPE, NAME, VALUE en in n geval CHECKED toegevoegd. Het TYPE attribuut met de waarde "radio" bepaalt dat het om keuzerondjes gaat. Met NAME attribuut gebruik je om aan te geven welke keuzerondjes bij elkaar horen. Het VALUE attribuut definieert welke waarde naar de server gestuurd moet worden als een keuzerondje geselecteerd is. Het CHECKED attribuut zorgt er voor dat een keuzerondje bij openen van het formulier geselecteerd is. <FORM METHOD="post" ACTION="bestemming"> <I>Geef aan welke browser je gebruikt:</I><BR> <BR> <INPUT TYPE="radio" NAME="browser" VALUE="MSIE">Microsoft Internet Explorer<BR> <INPUT TYPE="radio" NAME="browser" VALUE="MOZ" CHECKED>Mozilla<BR> <INPUT TYPE="radio" NAME="browser" VALUE="NN">Netscape Navigator<BR> <INPUT TYPE="radio" NAME="browser" VALUE="OP">Opera <BR> <INPUT TYPE="radio" NAME="browser" VALUE="anders">Andere browser<BR> <BR> <I>De door jou gebruikte browser ondersteunt:</I> <INPUT TYPE="radio" NAME="iframes" VALUE="if" CHECKED>wel inline frames <INPUT TYPE="radio" NAME="iframes" VALUE="nif">geen inline frames </FORM> Dit wordt door de browser als volgt weergegeven: Geef aan welke browser je gebruikt: Microsoft Internet Explorer Mozilla Netscape Navigator

Opera Andere browser De door jou gebruikte browser ondersteunt: wel inline frames geen inline frames

Aankruisvakjes
Aankruisvakjes (checkboxes) worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen. Je maakt ze door het TYPE attribuut met de waarde "checkbox" aan het INPUT element toe te voegen. <FORM METHOD="post" ACTION="bestemming"> <I>Kruis aan welke vruchten je lekker vindt (meerdere antwoorden zijn mogelijk):</I><BR> <BR> <INPUT TYPE="checkbox" NAME="fruit" VALUE="appel">appels <INPUT TYPE="checkbox" NAME="fruit" VALUE="peer">peren <INPUT TYPE="checkbox" NAME="fruit" VALUE="banaan">bananen </FORM> Dit wordt door de browser als volgt weergegeven: Kruis aan welke vruchten je lekker vindt (meerdere antwoorden zijn mogelijk): appels peren bananen Door aan het INPUT element het CHECKED attribuut toe te voegen, wordt een vakje al vooraf aangekruist. De gebruiker kan dit weer ongedaan maken. <INPUT TYPE="checkbox" NAME="fruit" VALUE="appel" CHECKED>appels appels peren bananen Wanneer een vakje is aangekruist, verzendt de browser een combinatie van de waarden van de attributen NAME en VALUE. In het voorgaande voorbeeld is zo'n combinatie bijvoorbeeld: fruit=appel Als het VALUE attribuut niet is opgenomen, dan gebruikt de browser hiervoor de waarde "on". De volgende combinatie wordt in dat geval verzonden: fruit=on Een dergelijke weergave is uiteraard alleen begrijpelijk als slechts n vakje kan worden aangekruist. Wanneer voor meerdere vakjes hetzelfde resultaat wordt verzonden, blijft immers onduidelijk welke nu precies waren aangekruist. Het is daarom belangrijk het VALUE attribuut altijd te gebruiken als meerdere aankruisvakjes onder dezelfde naam gegroepeerd zijn. Wanner je gebruik maakt van een mailto-formulier of de informatie op de server laat verwerken door een CGI-script, dan leveren de hiervoor gegeven voorbeelden met meerdere gegroepeerde aankruisvakjes het gewenste resultaat op. Maak je echter gebruik van een PHP-script, dan moet je er rekening mee houden dat zo'n script bij de gegeven voorbeelden alleen de informatie van het laatste aangekruiste vakje verwerkt. Om ervoor te zorgen dat het script ook de informatie van eerdere aangekruiste vakjes kan verwerken, moet je van de bij elkaar behorende aankruisvakjes een array maken. Dat doe je door

de waarde van het NAME attribuut van het INPUT element te beindigen met blokhaken. Het hiervoor gebruikte formulier ziet er dan als volgt uit: <FORM METHOD="post" ACTION="bestemming"> <I>Kruis aan welke vruchten je lekker vindt (meerdere antwoorden zijn mogelijk):</I><BR> <BR> <INPUT TYPE="checkbox" NAME="fruit[]" VALUE="appel">appels <INPUT TYPE="checkbox" NAME="fruit[]" VALUE="peer">peren <INPUT TYPE="checkbox" NAME="fruit[]" VALUE="banaan">bananen </FORM>

Knoppen
De meest gebruikte knoppen zijn die, welke je maakt met het INPUT element. Door het TYPE attribuut met de waarde "submit" aan het INPUT element toe te voegen, maak je een knop die er voor zorgt dat de informatie van het formulier wordt verzonden. Het TYPE attribuut met de waarde "reset" definieert een knop, waarmee je de beginwaarden van het formulier kunt herstellen. Met het VALUE attribuut bepaal je het opschrift van de knoppen. <FORM METHOD="post" ACTION="bestemming"> <I>Vul hier je naam in:</I> <INPUT TYPE="text" NAME="naam" SIZE="20" MAXLENGTH="30"><BR> <BR> <INPUT TYPE="reset" VALUE="Beginwaarden"> <INPUT TYPE="submit" VALUE="Verzenden"> </FORM> Dit wordt door de browser als volgt weergegeven: Vul hier je naam in:

Druk je op Beginwaarden, dan worden alle selecties ongedaan gemaakt en wordt alle reeds ingevoerde tekst op het formulier verwijderd. Druk je op Verzenden, dan worden de gegevens van het formulier verzonden naar de bestemming gedefinieerd via het ACTION attribuut van het FORM element (in dit voorbeeld werkt dat niet, omdat geen echte URL is opgenomen). Een knop voor verzenden zal in de meeste formulieren nodig zijn. Of een reset-knop nodig is, zal per situatie bekeken moeten worden. Bij kleine formulieren met een enkel tekstveld is er geen enkele noodzaak voor een reset-knop, terwijl het bij uitgebreide formulieren maar de vraag is, of de gebruiker er behoefte aan heeft alle ingevoerde informatie in n keer te kunnen wissen. In ieder geval zal de gebruiker het niet op prijs stellen als alles gewist wordt, doordat hij/zij per ongeluk op de verkeerde knop drukt. Knoppen worden ook vaak gebruikt bij scripts. Klikken op de knop heeft dan niet als resultaat dat informatie naar de server gestuurd wordt, maar dat het script een bepaalde gebeurtenis veroorzaakt.

In plaats van een knop kan ook een afbeelding gebruikt worden om de informatie uit het formulier te verzenden. Je voegt daarvoor aan het INPUT element het TYPE attribuut met de waarde "image" toe en bovendien de attributen SRC en ALT. Het SRC attribuut bepaalt welke afbeelding moet worden opgenomen, het ALT attribuut definieert een alternatieve tekst voor als de browser de afbeelding niet kan of mag worden weergegeven. Omdat niet elke browser met het ALT attribuut overweg kan, is het goed ook de attributen VALUE en NAME op te nemen. Voor het VALUE attribuut kun je dezelfde waarde

als van het ALT attribuut gebruiken. Als waarde voor het NAME attribuut kun je er het beste een kiezen, die uitsluitend letters, cijfers en verbindingsstreepjes bevat. <FORM METHOD="post" ACTION="bestemming"> .. <INPUT TYPE="image" SRC="verzenden.gif" ALT="Klik om de informatie te verzenden" VALUE="Klik om de informatie te verzenden" NAME="Verzenden"> </FORM>

In dit voorbeeld geeft de afbeelding de suggestie van een knop. Het mag echter ook een gewone "platte" afbeelding zijn.

Met het BUTTON element heb je meer mogelijkheden om te bepalen hoe een knop er uitziet. <FORM METHOD="post" ACTION="bestemming"> .. <BUTTON TYPE="reset"><IMG SRC="fout.gif" ..> Beginwaarden</BUTTON> <BUTTON TYPE="submit"><IMG SRC="goed.gif" ..> Verzenden</BUTTON> </FORM> In een browser die het BUTTON element ondersteunt, zie je zowel de afbeelding als de tekst welke de inhoud van het element vormen: Beginwaarden Verzenden

Houd er rekening mee dat browsers die het BUTTON element niet ondersteunen alleen de inhoud weergeven. De gebruiker heeft dan dus geen knop meer om op te drukken en kan de informatie dus niet verzenden. Waarschijnlijk is het beter voorlopig gewoon de standaard knoppen te blijven gebruiken.

Bestanden verzenden
In een formulier kun je de gebruiker de mogelijkheid bieden, om gelijk met de rest van de informatie n of meer bestanden naar de server te sturen. Cruciaal daarbij is dat je de beschikking hebt over een script of programma op de server, dat de informatie uit het formulier kan afhandelen en weet wat er met de verzonden bestanden moet gebeuren: bijvoorbeeld opslaan op de server, per e-mail doorsturen, of er bepaalde gegevens uithalen en die op de een of andere manier verwerken. Heb je niet de beschikking over zo'n script of programma, dan heeft het geen zin de mogelijkheid tot het verzenden van bestanden in je formulier op te nemen. Als je de mogelijkheid wilt bieden bestanden mee te sturen, moet je aan het FORM element in ieder geval het METHOD attribuut met de waarde "post" en het ENCTYPE attribuut met de waarde "multipart/form-data" toevoegen. Met het ACTION attribuut leg je daarnaast vast, welk script of programma op de server de te verzenden informatie moet afhandelen. Het TYPE attribuut van het INPUT element met de waarde "file" zorgt ervoor dat er een tekstveld en een knop in het formulier te zien zijn. Drukken op de knop opent een venster waarin een bestand geselecteerd kan worden, waarna in het tekstveld de naam (inclusief het volledige pad) van het geselecteerde bestand wordt weergegeven. De grootte van het tekstveld bepaal je met het SIZE attribuut. Het is verstandig deze niet te klein te kiezen, omdat anders een groot deel van het pad en de bestandsnaam niet te lezen zijn. Het NAME attribuut gebruik je om het control een naam te geven. Deze naam heeft geen verband met de naam van het bestand, maar dient slechts als informatie voor het script of programma op de server.

<FORM METHOD="post" ACTION="bestemming" ENCTYPE="multipart/form-data"> <INPUT TYPE="file" NAME="upload"> </FORM> De browser geeft dit als volgt weer:

Een browser die de waarde "file" voor het TYPE attribuut van het INPUT element niet ondersteunt, zal de standaardwaarde van het TYPE attribuut ("text") gebruiken en dus alleen een tekstveld weergegeven. Bij Microsoft Internet Explorer, Mozilla en Netscape Navigator heeft de knop het opschrift "Browse ..." en bij Opera 6.0 en hoger "Choose" (of "Bladeren" met een Nederlands taalbestand). Bij lagere versies van Opera moet de bezoeker het met slechts "..." doen. Het opschrift van de knop kan in geen enkele browsers benvloed worden. In Opera kunnen meerdere bestanden geselecteerd worden, in Microsoft Internet Explorer, Mozilla en Netscape Navigator slechts n bestand. Indien het nodig is de gebruiker in alle gevallen de gelegenheid te bieden meerdere bestanden te uploaden, is het daarom aan te bevelen in het formulier meerdere keren het INPUT element met het attribuut TYPE="file" op te nemen. Hoewel er weinig situaties te bedenken zijn waarin het echt nuttig is, kan het in een enkel geval gewenst zijn een beginwaarde voor de bestandsnaam en het pad van het te verzenden bestand vast te leggen. Het VALUE attribuut van het INPUT element kan daarvoor worden gebruikt. Om te voorkomen dat de gebruiker ongemerkt of onbedoeld een bestand verzendt, wordt deze mogelijkheid door de meeste browsers echter niet ondersteund. Opera 3.5 en hoger doet dit wel en heeft het veiligheidsprobleem opgelost, door voor verzenden een bevestiging van de gebruiker te vragen. De afmetingen en de vormgeving van het tekstveld en de knop kunnen in beperkte mate benvloed worden met behulp van stylesheets. De ondersteuning van de diverse mogelijkheden verschilt nogal per browser.

Keuzelijsten
Een uitschuifkeuzelijst neemt in het document slechts beperkte ruimte in, maar kan toch een groot aantal keuzemogelijkheden bevatten. Je maakt een keuzelijst met de elementen SELECT en OPTION. Het SELECT element geeft aan dat het om een keuzelijst gaat, het OPTION attribuut definieert een keuze. <FORM METHOD="post" ACTION="bestemming"> <I>Geef aan welke browser je gebruikt:</I><BR> <BR> <SELECT NAME="browser"> <OPTION>Microsoft Internet Explorer</OPTION> <OPTION>Netscape Navigator</OPTION> <OPTION>Mozilla</OPTION> <OPTION>Firefox</OPTION> <OPTION>Opera</OPTION> <OPTION>Andere browser</OPTION> </SELECT> </FORM> Dit wordt door de browser als volgt weergegeven:

Geef aan welke browser je gebruikt:

Door aan het OPTION element het attribuut VALUE toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden. Het SELECTED attribuut bepaalt welke mogelijkheid door de browser als standaard weergegeven moet worden. Is het SELECTED attribuut niet gebruikt, dan wordt de eerste mogelijkheid weergegeven (zoals in het voorbeeld hiervoor). <OPTION VALUE="FF" SELECTED>Firefox</OPTION>

Als het DISABLED attribuut wordt toegevoegd aan het SELECT element, kan de gebruiker geen keuze selecteren. <SELECT NAME="browser" DISABLED> Het DISABLED attribuut kan ook toegevoegd worden aan een OPTION element. De betreffende keuze kan dan niet geselecteerd worden. <OPTION VALUE="IE" DISABLED>Microsoft Internet Explorer</OPTION> In browsers die het DISABLED attribuut ondersteunen wordt de betreffende keuze meestal in grijs weergegeven.

Een meervoudige keuzelijst brengt meer keuzemogelijkheden in beeld. Met het SIZE attribuut van het SELECT element wordt vastgelegd hoeveel mogelijkheden er in de keuzelijst zichtbaar zijn. Het MULTIPLE attribuut maakt het mogelijk meerdere keuzen tegelijk te selecteren. Door aan het OPTION element het attribuut VALUE toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden. Door aan het OPTION element het attribuut SELECTED toe te voegen, kan bepaald worden welke mogelijkheden al voorgeselecteerd moeten zijn (zoals hiervoor bananen). <FORM METHOD="post" ACTION="bestemming"> <I>Geef aan welke vruchten je lekker vind (gebruik de Control toets om meerdere antwoorden te selecteren):</I><BR> <BR> <SELECT NAME="vruchten" MULTIPLE SIZE="4"> <OPTION VALUE="appels">appels</OPTION> <OPTION VALUE="peren">peren</OPTION> <OPTION VALUE="bananen" SELECTED>bananen</OPTION> <OPTION VALUE="sinaasappels">sinaasappels</OPTION> <OPTION VALUE="bessen">bessen</OPTION> <OPTION VALUE="pruimen">pruimen</OPTION> </SELECT> </FORM> Dit wordt door de browser als volgt weergegeven: Geef aan welke vruchten je lekker vind (gebruik de Control toets om meerdere antwoorden te selecteren):

Ook bij de meervoudige keuzelijst kun je met het DISABLED attribuut bepaalde keuzen uitsluiten. <OPTION VALUE="pr" DISABLED>pruimen</OPTION> In browsers die het DISABLED attribuut ondersteunen wordt de keuze meestal in grijs weergegeven.

Wanner je gebruik maakt van een mailto-formulier of de informatie op de server laat verwerken door een CGI-script, dan leveren de hiervoor gegeven voorbeelden met meervoudige keuzelijsten het gewenste resultaat op. Maak je echter gebruik van een PHP-script, dan moet je er rekening mee houden dat zo'n script bij de gegeven voorbeelden alleen de informatie van de laatste geselecteerde keuzemogelijkheid verwerkt. Om ervoor te zorgen dat het script ook de informatie van eerdere geselecteerde keuzemogelijkheden kan verwerken, moet je van de keuzemogelijkheden een array maken. Dat doe je door de waarde van het NAME attribuut van het SELECT element te beindigen met blokhaken: <SELECT NAME="vruchten[]" MULTIPLE SIZE="4"> ... </SELECT>

Met behulp van het OPTGROUP element kunnen verschillende bij elkaar behorende keuzen worden gegroepeerd. Het gemeenschappelijke kenmerk van een groep keuzemogelijkheden wordt vastgelegd met het LABEL attribuut. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser"> <OPTION VALUE="xx">Kies een browser</OPTION> <OPTGROUP LABEL="Microsoft Internet Explorer"> <OPTION VALUE="ie5">Microsoft Internet Explorer 5</OPTION> ... </OPTGROUP> <OPTGROUP LABEL="Netscape Navigator"> <OPTION VALUE="nn4">Netscape Navigator 4</OPTION> ... </OPTGROUP> <OPTGROUP LABEL="Mozilla"> <OPTION VALUE="moz1">Mozilla 1</OPTION> </OPTGROUP> <OPTGROUP LABEL="Firefox"> <OPTION VALUE="ff1">Firefox 1</OPTION> ... </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION VALUE="op3">Opera 3</OPTION> ... </OPTGROUP> <OPTION VALUE="anders">Andere browser</OPTION> </SELECT> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Hoewel het OPTGROUP element alleen door recente browsers wordt ondersteund (Microsoft Internet Explorer 6.0 en hoger, Netscape Navigator 6.0 en hoger, Firefox, Mozilla en Opera 7.0 en hoger), kun je het zonder problemen toepassen. Browsers die het element niet kennen, geven de keuzelijst op de gebruikelijke wijze weer. Als de keuzemogelijkheden zijn gegroepeerd zoals in het voorbeeld hiervoor, dan ligt het voor de hand ze zelf ook op andere wijze weer te geven. Dus bijvoorbeeld niet voluit "Netscape Navigator 3", maar alleen "3". Dat kan met behulp van het LABEL attribuut van het OPTION element. <OPTGROUP LABEL="Netscape Navigator"> <OPTION LABEL="4" VALUE="nn4">Netscape <OPTION LABEL="6" VALUE="nn6">Netscape <OPTION LABEL="7" VALUE="nn7">Netscape <OPTION LABEL="8" VALUE="nn7">Netscape </OPTGROUP>

Navigator Navigator Navigator Navigator

4</OPTION> 6</OPTION> 7</OPTION> 8</OPTION>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Op dit moment wordt het LABEL attribuut alleen door Microsoft Internet Explorer 7.0 ondersteund.

Naast de hier beschreven toepassing in een formulier, worden keuzelijsten ook vaak in combinatie met JavaScript gebruikt om de bezoeker te laten kiezen uit een lijst met hyperlinks. Hoewel JavaScript in principe buiten het bereik van deze handleiding valt, zijn in een apart document enkele voorbeelden opgenomen.

Tekstvakken
Een tekstvak kan gebruikt worden om de bezoeker een in principe onbeperkte hoeveelheid tekst te laten invoeren. Je maakt een tekstvak met het TEXTAREA element. De attributen ROWS en COLS bepalen de hoogte (het aantal rijen) en breedte (het aantal karakters) van het tekstvak. <FORM METHOD="post" ACTION="bestemming"> <I>In het volgende vak kun je tekst invoeren:</I><BR> <BR> <TEXTAREA NAME="tekstvak" ROWS="4" COLS="50"></TEXTAREA> </FORM> Dit wordt door de browser als volgt weergegeven: In het volgende vak kun je tekst invoeren:

Tussen beide delen van het TEXTAREA element kan ook een standaard tekst geplaatst worden. Dat wordt door de browser zo weergegeven:

In de meeste browsers wordt de tekst in het tekstvak standaard aan de rechterzijde van het tekstvak afgebroken. In Netscape Navigator met versie nummer lager dan 6.0 gebeurt dat niet en loopt de tekst

door buiten de grens van het vak. Je kunt dat voorkomen door gebruik te maken van het WRAP attribuut. <TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" WRAP="soft"> </TEXTAREA> Het WRAP attribuut maakt geen deel uit van HTML 4.

Door het READONLY attribuut toe te voegen aan het TEXTAREA element kan vastgelegd worden dat de vooraf bepaalde inhoud van het tekstvak niet gewijzigd mag worden door degene die het formulier invult. <TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" READONLY> </TEXTAREA>

Met het DISABLED attribuut wordt het tekstvak wel weergegeven, maar is het voor het overige geblokkeerd: het tekstvak kan geen focus krijgen (klikken op het tekstvak heeft geen effect en de vooraf bepaalde inhoud van het tekstvak kan dus niet gewijzigd worden), het tekstvak doet niet mee in de tabvolgorde en de inhoud wordt niet met het formulier verstuurd. Vaak wordt de inhoud van een geblokkeerd tekstvak in grijs weergegeven. <TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" DISABLED> </TEXTAREA>

Een formulier opmaken

De controls in een formulier worden weergegeven als inline elementen. Dat wil zeggen dat ze gewoon op een regel naast of tussen tekst of andere inline inhoud (bijvoorbeeld afbeeldingen) kunnen staan en dat de precieze plek bepaald wordt door die andere inhoud. Het geheel kan daardoor een nogal rommelige indruk geven. Dat is bijvoorbeeld te zien in het volgende formulier: de twee tekstvelden zijn weliswaar even lang, maar de voorafgaande tekst zorgt ervoor dat ze niet netjes onder elkaar staan. <FORM METHOD="post" ACTION="bestemming"> Je naam: <INPUT NAME="name" SIZE="30"><BR> Je e-mailadres: <INPUT NAME="from" SIZE="30"> </FORM> De weergave is als volgt: Je naam: Je e-mailadres: Om wat meer ordening aan te brengen in het formulier kun je gebruik maken van een tabel. Door de tekst en de controls in aparte cellen te plaatsen, worden de tekstvelden netjes onder elkaar uitgelijnd. <FORM METHOD="post" ACTION="bestemming"> <TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0"> <TR> <TD>Je naam:</TD> <TD><INPUT NAME="name" SIZE="30"><BR></TD> </TR> <TR>

<TD>Je e-mailadres:</TD> <TD><INPUT NAME="from" SIZE="30"><BR></TD> </TR> </TABLE> </FORM> In de browser ziet dat er als volgt uit: Je naam: Je e-mailadres: Als je gebruik maakt van een tabel voor de layout van een formulier, dan moet je de activering en de beindiging van het FORM element buiten de tabel te plaatsen. De activering en beindiging van de overige elementen in het formulier (zoals SELECT en TEXTAREA) daarentegen moeten zich juist binnen n cel van de tabel bevinden.

De breedte van een keuzelijst wordt bepaald door de keuzemogelijkheid met de langste omschrijving. Als je meerdere keuzelijsten gebruikt, zal de breedte daarvan dus vrijwel zeker verschillen. Door het toevoegen van een extra keuzemogelijkheid aan alle keuzelijsten met een lange omschrijving kun je ze op eenvoudige wijze even lang maken. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser"> <OPTION VALUE="" SELECTED>------ Maak hier je keuze ------</OPTION> <OPTION VALUE="IE">Microsoft Internet Explorer</OPTION> <OPTION VALUE="NN">Netscape Navigator</OPTION> <OPTION VALUE="MOZ">Mozilla</OPTION> <OPTION VALUE="FF">Firefox</OPTION> <OPTION VALUE="OP">Opera</OPTION> <OPTION VALUE="anders">Andere browser</OPTION> </SELECT> </FORM> Aan de volgende twee keuzelijsten is de extra keuzemogelijkheid niet toegevoegd. Ze zijn daardoor niet even lang:

Met de extra keuzemogelijkheid worden dezelfde keuzelijsten wel even lang:

Als alternatief kun je de breedte van keuzelijsten ook benvloeden door gebruik te maken van stijlen. Die mogelijkheid wordt echter door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund.

Controls groeperen
Een nieuwe mogelijkheid waarmee je de layout van een formulier kunt bepalen, is het groeperen van controls. Je doet dat door met het FIELDSET element een kader te plaatsen om bij elkaar horende controls. Met het LEGEND element kun je daarbij een bijschrift opgeven, dat in het kader geplaatst wordt. In het volgende voorbeeld is dit te zien.

<FORM METHOD="post" ACTION="bestemming"> <FIELDSET> <LEGEND><B>Browser</B></LEGEND> <BR> Geef aan welke browser je gebruikt:<BR> <BR> <INPUT TYPE="radio" NAME="browser" VALUE="IE">Microsoft Internet Explorer ... <BR> Versie: <BR> <INPUT TYPE="text" NAME="versie" SIZE="10"> <BR> </FIELDSET> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Hoewel de elementen FIELDSET en LEGEND niet door oudere browsers worden ondersteund, kun je ze zonder problemen gebruiken. Wel moet je er op letten, dat browsers die het LEGEND element niet kennen het bijschrift als gewone tekst weergeven. Je kunt daarom overwegen de inhoud van het LEGEND element binnen het B element te plaatsen, zodat deze in alle gevallen benadrukt wordt. Daarnaast is het aan te raden de aan het FIELDSET element voorafgaande elementen op blokniveau (bijvoorbeeld P) te sluiten (met </P>) en daarmee te voorkomen, dat het bijschrift op dezelfde regel geplaatst wordt als voorafgaande inhoud.

Controls activeren
Het LABEL element kun je gebruiken om een label aan een control te verbinden. Klik je op het label, dan wordt het control geactiveerd. In het volgende voorbeeld is gebruik gemaakt van een expliciete verbinding met behulp van het FOR attribuut voor het LABEL element. De waarde van het FOR attribuut moet hetzelfde zijn als de waarde van het ID attribuut van het control. <FORM METHOD="post" ACTION="bestemming"> <I>Geef aan welke browser je gebruikt:</I><BR> <BR> <INPUT TYPE="radio" NAME="browser" VALUE="IE" ID="ie"> <LABEL FOR="ie">Microsoft Internet Explorer</LABEL><BR>

... </FORM> In een browser die het LABEL element ondersteunt, kun je hierna ook op het label klikken om het keuzerondje te activeren. Geef aan welke browser je gebruikt: Microsoft Internet Explorer Netscape Navigator Mozilla Firefox Opera Andere browser

Op een formulier kun je snel naar een volgend veld springen door gebruik te maken van de tab-toets. Normaal worden de verschillende controls afgewerkt in de volgorde, waarin ze in het document staan (probeer dit eens uit in het formulier in de introductie van dit onderdeel). Met behulp van het TABINDEX attribuut kan deze volgorde benvloed worden. In het volgende voorbeeld is het TABINDEX attribuut gebruikt voor verschillende controls. <FORM METHOD="post" ACTION="bestemming"> Naam: <INPUT TYPE="text" SIZE="20" TABINDEX="1"><BR> <BR> Mening: <INPUT TYPE="radio" NAME="mening" VALUE="eens" CHECKED TABINDEX="3">eens <INPUT TYPE="radio" NAME="mening" VALUE="oneens" TABINDEX="5">oneens<BR> <BR> Opmerkingen:<BR> <TEXTAREA ROWS="3" COLS="30" NAME="opmerking" TABINDEX="7"></TEXTAREA><BR> <BR> Browser: <SELECT NAME="browser" TABINDEX="2"> <OPTION VALUE="IE">Microsoft Internet Explorer</OPTION> ... </SELECT><BR> <BUTTON TYPE="submit" TABINDEX="6"><IMG SRC="pos.gif" ...>Verzenden</BUTTON> <INPUT TYPE="reset" VALUE="Beginwaarden" TABINDEX="4"> </FORM> Bekijk in een document in een nieuw venster of de browser het TABINDEX attribuut correct ondersteunt.

Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets te definiren, waarmee een control snel vanaf het toetsenbord geactiveerd kan worden. In het eerder gebruikte voorbeeld voor het LABEL element is het ACCESSKEY attribuut aan het LABEL element toegevoegd. Omdat de waarde voor het ID attribuut slechts n keer mag voorkomen in een document, zijn de waarden voor het FOR en ID attribuut wat aangepast. De eerste letter van elk label is gebruikt als sneltoets en overeenkomstig het gebruik bij gewone sneltoetsen onderstreept. Dat is gedaan met behulp van Cascading Style Sheets, zodat in ieder geval een deel van de browsers die het ACCESSKEY attribuut niet kennen, de onderstreping weglaten. <FORM METHOD="post" ACTION="bestemming"> <I>Geef aan welke browser je gebruikt:</I><BR> <BR>

<INPUT TYPE="radio" NAME="browser" VALUE="IE" ID="Bie" ACCESSKEY="i"> <LABEL FOR="Bie">Microsoft <SPAN STYLE="text-decoration: underline">I</SPAN>nternet Explorer</LABEL><BR> ... </FORM> Druk in een browser die het ACCESSKEY attribuut ondersteunt op de sneltoets om de browser te selecteren: in de meeste browsers de Alt-toets (op Windows systemen) of de Ctrl-toets (op Macintosh systemen) plus de toets van de onderstreepte letter. Opera hanteert een afwijkende procedure: eerst moet met de toetscombinatie Shift + Esc de werking van het ACCESSKEY attribuut geactiveerd worden, pas daarna kan de toets van het aangewezen karakter worden ingedrukt. In Firefox 2.0 is de toetscombinatie gewijzigd in Shift, Alt en het aangegeven karakter. Geef aan welke browser je gebruikt: Microsoft Internet Explorer Netscape Navigator Mozilla Firefox Opera Andere browser Hoewel het LABEL element en de attributen TABINDEX en ACCESSKEY niet door oudere browsers ondersteund worden, kun je ze zonder problemen gebruiken. Browsers die ze niet kennen negeren ze eenvoudig.

Het gebruik van stijlen

Voor alle elementen welke gebruikt worden bij het maken van formulieren, kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld is dat gedaan voor het TEXTAREA element. Met behulp van het STYLE attribuut is een inline stijl gedefinieerd voor het lettertype (standaard is dat een lettertype met een vaste lettergrootte) en de kleur van de tekst in het tekstvak. <FORM METHOD="post" ACTION="bestemming"> <TEXTAREA ROWS="6" COLS="40" STYLE="font-size: 16px; font-family: sansserif; width: 250px; color: #0000FF; background: #FFFFFF;">Aan het TEXTAREA ... blauw.</TEXTAREA> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In het volgende voorbeeld zijn met behulp van het STYLE attribuut inline stijlen gedefinieerd voor enkele controls gemaakt met het INPUT element.

<FORM METHOD="post" ACTION="bestemming"> <INPUT TYPE="text" SIZE="36" VALUE="Rode tekst op een gele achtergrond" STYLE="color: red; background: yellow; width: 250px; font-family: serif; font-size: 12pt;"><BR> <BR> <INPUT TYPE="reset" VALUE="Beginwaarden" STYLE="color: #FFFFFF; background: red; font-weight: bold; width: 120px; height: 25px;"> <INPUT TYPE="submit" VALUE="Verzenden" STYLE="color: #FFFFFF; background: green; font-weight: bold; width: 120px; height: 25px;"> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In het volgende voorbeeld zijn met behulp van het STYLE attribuut inline stijlen gedefinieerd voor de elementen SELECT en OPTION. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="abc" STYLE="background: lime; font-size: 21px; font-family: sans-serif; vertical-align: top;"> <OPTION>Dit is keuze 1</OPTION> <OPTION>Dit is keuze 2</OPTION> <OPTION>Dit is keuze 3</OPTION> </SELECT><BR> <BR> <SELECT NAME="def" MULTIPLE SIZE="3" STYLE="background: yellow; font-size: 21px; font-family: serif;"> <OPTION>Dit is keuze 1</OPTION> <OPTION STYLE="background: fuchsia;">Dit is keuze 2</OPTION> <OPTION>Dit is keuze 3</OPTION> <OPTION>Dit is keuze 4</OPTION> <OPTION>Dit is keuze 5</OPTION> </SELECT> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Ook de breedte van controls als tekstvelden, keuzelijsten en tekstvakken kun je bepalen met behulp van een stijl. Door gebruik te maken van deze mogelijkheid kun je de verschillende controls in een formulier bijvoorbeeld even lang maken en ervoor zorgen dat de weergave in de verschillende browsers meer uniform wordt. Het gebruik van stijlen voor het vastleggen van de breedte wordt ondersteund door Microsoft Internet Explorer 4.0 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 5.0 en hoger. Als voorbeeld is het STYLE attribuut aan het SELECT element toegevoegd. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser" STYLE="width: 250px;"> <OPTION VALUE="IE">Microsoft Internet Explorer</OPTION> <OPTION VALUE="NN">Netscape Navigator</OPTION> <OPTION VALUE="MOZ">Mozilla</OPTION> <OPTION VALUE="FF" SELECTED>Firefox</OPTION> <OPTION VALUE="OP">Opera</OPTION> <OPTION VALUE="anders">andere browser</OPTION> </SELECT> </FORM> De eerste keuzelijst is de standaard weergave, in de tweede is de breedte met behulp van een stijl gedefinieerd:

Het groeperen van controls (zie het eerder gebruikte voorbeeld) kun je met behulp van stijlen extra benadrukken. Voor het FIELDSET element zijn hierna onder andere de stijleigenschappen width en border opgenomen, om de breedte van het kader en de dikte en de kleur van de rand te bepalen. Voor het LEGEND element is de kleur en het gewicht van de tekst bepaald met de stijleigenschappen color en font-weight. Voor het DIV element is tenslotte de padding eigenschap opgenomen, om wat afstand te creren tussen de controls en het kader. <FORM METHOD="post" ACTION="bestemming"> <FIELDSET STYLE="width: 250px; border: solid 2px red; font-family: sansserif;"> <LEGEND STYLE="color: red; font-weight: bold;">Browser</LEGEND> <BR> <DIV STYLE="padding: 1em;">Geef aan welke browser je gebruikt:<BR> <BR> <INPUT TYPE="radio" NAME="browser" VALUE="MSIE">Microsoft Internet Explorer <INPUT TYPE="radio" NAME="browser" VALUE="NN">Netscape Navigator <INPUT TYPE="radio" NAME="browser" VALUE="MOZ">Mozilla <INPUT TYPE="radio" NAME="browser" VALUE="FF" CHECKED>Firefox <INPUT TYPE="radio" NAME="browser" VALUE="OP">Opera <INPUT TYPE="radio" NAME="browser" VALUE="anders">andere browser <BR> Versie: <BR> <INPUT TYPE="text" NAME="versie" SIZE="10"> </DIV> </FIELDSET> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Voorbeeld zoekformulier
Hier is een voorbeeld opgenomen van een formulier, dat gebruik maakt van een server welke dient als zoekmachine op het Web. Als je in het formulier n of meer zoektermen opgeeft, krijg je van de zoekmachine een HTML-document terug gestuurd. Daarop staan hyperlinks naar documenten waarin de opgegeven zoektermen voorkomen. Voor het versturen van een zoekopdracht maken we gebruik van de zoekmachine Google. In eerste instantie gaat het om een eenvoudig formulier, dat alleen een veld heeft voor het invoeren van de zoekterm(en). Omdat het script van Google de complete zoekopdracht als onderdeel van de URI verwacht, heeft het METHOD attribuut van het FORM element de waarde "get". Door aan het FORM element ook het TARGET attribuut toe te voegen met de waarde "_blank", is er in dit geval voor gezorgd dat de respons van de zoekmachine wordt weergegeven in een nieuw venster. Als je dat venster sluit, ben je weer terug in dit document. Er wordt gebruikt gemaakt van het INPUT element voor het maken van het tekstveld en de knop voor verzenden. Gezien de eenvoud van het formulier is geen knop opgenomen voor het herstellen van de beginwaarden. De waarden van het NAME attribuut van het tekstveld en de knop zijn niet zelf gekozen, maar gekoppeld aan het script dat de zoekopdracht uitvoert. De waarde van het SIZE attribuut, waarmee de lengte van het tekstveld wordt vastgelegd, is wel zelf bepaald. <P><IMG SRC="google.gif" ALT="Google" WIDTH="75" HEIGHT="32" BORDER="0" ALIGN="right"></P> <H2>Zoeken bij Google</H2> <FORM METHOD="get" ACTION="http://www.google.nl/search" TARGET="_blank"> Voer de zoekterm(en) in en klik op Zoeken:<BR> <BR> <INPUT TYPE="text" NAME="q" SIZE="40"> &nbsp; <INPUT TYPE="submit" NAME="btnG" VALUE="Zoeken"> </FORM> Hieronder wordt het formulier weergegeven. Je kunt de werking uitproberen door in het tekstvak een zoekopdracht in te voeren en vervolgens op de knop Zoeken te klikken.

Zoeken bij Google

Voer de zoekterm(en) in en klik op Zoeken:

Het script waarmee Google werkt, kent een groot aantal extra mogelijkheden. Als voorbeeld worden er een tweetal aan het formulier toegevoegd. Met de eerste kan de bezoeker aangegeven of het hele web doorzocht moet worden, of alleen Nederlandse pagina's. Met de tweede kan worden vastgelegd hoeveel resultaten (hyperlinks) per keer moeten worden weergegeven. Met keuzerondjes wordt bepaald waar moet worden gezocht. De waarden van de attributen NAME en VALUE van het INPUT element zijn gekoppeld aan het script. Met behulp van het CHECKED attribuut is de standaardkeuze vastgelegd. De keuze van het aantal resultaten wordt bepaald met behulp van een keuzelijst. De waarde van het NAME attribuut van het SELECT element is weer gekoppeld aan het script. Bij de waarden van het VALUE attribuut van de OPTION elementen is uitgegaan van de mogelijkheden die Google op de eigen site ook biedt. Het SELECTED attribuut bepaalt welke mogelijkheid de standaard is. <P><IMG SRC="google.gif" ALT="Google" WIDTH="75" HEIGHT="32" BORDER="0" ALIGN="right"></P> <H2>Zoeken bij Google</H2> <FORM METHOD="get" ACTION="http://www.google.nl/search" TARGET="_blank"> Zoek in: <INPUT TYPE="radio" NAME="lr" VALUE="">het web <INPUT TYPE="radio" NAME="lr" VALUE="lang_nl" CHECKED>Nederlandse pagina's <BR> Aantal resultaten per keer: <SELECT NAME="num"> <OPTION VALUE="10">10</OPTION> <OPTION VALUE="20">20</OPTION> <OPTION VALUE="30" SELECTED>30</OPTION> <OPTION VALUE="50">50</OPTION> <OPTION VALUE="100">100</OPTION> </SELECT><BR> <BR> Voer de zoekterm(en) in en klik op Zoeken:<BR> <BR> <INPUT TYPE="text" NAME="q" SIZE="40"> &nbsp; <INPUT TYPE="submit" NAME="btnG" VALUE="Zoeken"> </FORM> Hieronder wordt het formulier weergegeven. Ook nu kun je de werking uitproberen door in het tekstvak een zoekopdracht in te voeren, zo nodig andere keuzemogelijkheden te selecteren en vervolgens op de knop Zoeken te klikken.

Zoeken bij Google

Zoek in: het web Nederlandse pagina's Aantal resultaten per keer: Voer de zoekterm(en) in en klik op Zoeken:

Voorbeeld vragenformulier
Dit is een voorbeeld van een vragenformulier, waarin de volgende controls zijn opgenomen: gewone en verborgen tekstvelden, keuzerondjes, aankruisvakjes, een tekstvak en een knop voor verzenden. Het is de bedoeling dat de in het formulier ingevulde gegevens per e-mail naar een bepaalde bestemming worden gestuurd. Omdat aan het gebruik van mailto-formulieren nogal wat nadelen kleven, is ervoor gekozen de informatie van het formulier te laten verwerken door een script op de server. In dit geval wordt daarbij gebruik gemaakt van de diensten van Freedback.com. Deze zijn gratis, alleen moet je wel accepteren dat er reclame staat op responspagina en in het e-mailbericht. Freedback.com heeft zowel een CGI-script als een PHP-script. Van het CGI-script werd in het verleden standaard gebruik gemaakt. Het heeft als nadeel, dat je e-mailadres (weliswaar niet direct zichtbaar) in het formulier zelf is opgenomen. Wanneer je je nu nieuw aanmeldt, dan krijg je code waarmee je gebruik kunt maken van het PHP-script. In die code is je e-mailadres versleuteld opgenomen, waardoor het niet misbruikt kan worden voor spam en virussen. In het CGI-script zijn de namen van de eerste vijf controls in het voorbeeld gekoppeld aan het script: "to", "subject", "name", "from" en "required_fields". Je vindt de waarden van de eerste vier controls terug in de corresponderende velden in de header van het e-mailbericht ("aan", "onderwerp", "naam afzender" en "e-mailadres afzender". Het vijfde control geeft aan welke velden de bezoeker verplicht moet invullen. De rest van het formulier kun je zelf ontwerpen. De blokhaken aan het eind van de naam van de aankruisvakjes zijn nodig, omdat anders alleen de laatst geselecteerde mogelijkheid in de resultaten wordt vermeld. Om de omvang wat te beperken is in de code van dit voorbeeld de tekst tussen de onderdelen en alle overige HTML-code weggelaten. <FORM METHOD="post" TARGET="_blank" ACTION="http://cgi18.Freedback.com/mail.pl"> <INPUT TYPE="hidden" NAME="to" VALUE="gebruiker@provider.nl"> <INPUT TYPE="hidden" NAME="subject" VALUE="Voorbeeldformulier Handleiding HTML"> <INPUT NAME="name" SIZE="45"> <INPUT NAME="from" SIZE="45"> <INPUT TYPE="hidden" NAME="required_fields" VALUE="name, from"> <INPUT <INPUT <INPUT <INPUT <INPUT <INPUT <INPUT <INPUT TYPE="radio" TYPE="radio" TYPE="radio" TYPE="radio" TYPE="radio" TYPE="radio" TYPE="radio" TYPE="radio" NAME="Inhoud" NAME="Inhoud" NAME="Inhoud" NAME="Inhoud" VALUE="goed" CHECKED> goed VALUE="redelijk"> redelijk VALUE="matig"> matig VALUE="slecht"> slecht VALUE="goed" CHECKED> goed VALUE="redelijk"> redelijk VALUE="matig"> matig VALUE="slecht"> slecht

NAME="Presentatie" NAME="Presentatie" NAME="Presentatie" NAME="Presentatie"

<INPUT TYPE="checkbox" NAME="Betrokken[]" VALUE="prive"> priv

<INPUT TYPE="checkbox" NAME="Betrokken[]" VALUE="beroepsmatig"> beroepsmatig <TEXTAREA NAME="Opmerkingen" ROWS="3" COLS="45"> </TEXTAREA> <INPUT TYPE="reset" VALUE="Beginwaarden"> <INPUT TYPE="submit" VALUE="Verzenden gegevens"> </FORM> Ook in het PHP-script horen de namen van de eerste vijf controls in het voorbeeld bij het script. In dit geval gaat het om: "acctid", "formid", "name" en "email" en "required_vars". De waarden van de controls "acctid" en "formid" krijg je bij aanmelding van Freedback.com en staan respectievelijk voor je emailadres en het onderwerp van het bericht. De waarden van "name", "email" en "required_vars" staan voor respectievelijk de naam van de afzender, het e-mailadres van de afzender en de verplichte velden. De rest van het formulier is hetzelfde als bij het CGI-script. <FORM METHOD="post" TARGET="_blank" ACTION="http://www.freedback.com/mail.php" ENCTYPE="multipart/form-data"> <INPUT TYPE="hidden" NAME="acctid" VALUE="nzk1u5xcjq2311nr"> <INPUT TYPE="hidden" NAME="formid" VALUE="99999"> <INPUT NAME="name" SIZE="45"> <INPUT NAME="email" SIZE="45"> <INPUT TYPE="hidden" NAME="required_vars" VALUE="name, email"> ... </FORM>

Het formulier ziet er als volgt uit:

Voorbeeld vragenformulier
Je naam: Je e-mailadres: Wat vind je van deze handleiding? Inhoud: goed redelijk matig slecht Presentatie: goed redelijk matig slecht Op welke wijze ben je betrokken bij het bouwen/onderhouden van websites? priv en/of beroepsmatig Eventuele opmerkingen:

Let op: de informatie uit dit formulier wordt niet verzonden.

Introductie frames
Met behulp van framing kan een venster onderverdeeld worden in meerdere frames of sub-vensters. In elk frame kan een document geopend worden. De frames werken onafhankelijk van elkaar, een document in het ene frame kan vooral een statische weergave hebben (bijvoorbeeld een titelbalk of een inhoudsopgave), terwijl in een ander frame door opeenvolgende documenten heen gelopen wordt. Vanuit elk document kunnen hyperlinks nieuwe documenten openen in hetzelfde of in een ander frame.

Frames worden gemaakt met de elementen FRAMESET en FRAME. Het FRAMESET element verdeelt een venster in subvensters, in horizontale richting met het COLS attribuut, in verticale richting met het ROWS attribuut. Meestal bevat een FRAMESET element alleen het COLS of alleen het ROWS attribuut, maar het is ook mogelijk beide attributen tegelijk te gebruiken. Het FRAME element definieert een frame. Met het SRC attribuut wordt bepaald welk document in het frame geopend moet worden. De FRAME elementen worden geplaatst binnen het FRAMESET element. In plaats van een FRAME element kan ook een nieuw (genest) FRAMESET element opgenomen, dat op zijn beurt weer een aantal FRAME elementen bevat. De opbouw van een document met frames wordt in dit onderdeel schematisch weergegeven met een aantal afbeeldingen. Daarna wordt het gebruik van frames met voorbeelden nader toegelicht. Door sommige (vooral oudere) browsers worden frames niet ondersteund. Daarnaast is het in enkele browsers mogelijk het gebruik van frames uit te schakelen. Om bezoekers met dergelijke browsers ook toegang tot je site te geven, is het belangrijk in ieder geval een zo genoemde no-frames sectie op te nemen in je document. Dat doe je met het NOFRAMES element. Met het NAME attribuut van het FRAME element geef je aan een frame een naam gegeven. Door in een hyperlink het TARGET attribuut te gebruiken met die naam, geef je aan dat de browser het betreffende document moet openen in dat frame. Daarnaast biedt deze constructie mogelijkheden om meerdere frames tegelijk te vervangen. Standaard worden de randen tussen de frames in de meeste browsers in 3-D uitgevoerd. Met het FRAMEBORDER attribuut kan aangegeven worden dat de randen niet in 3-D randen, maar vlak moeten worden weergegeven. Hoewel geen onderdeel van HTML 4, zijn er ook mogelijkheden om de dikte van frameranden te bepalen. Frames wordt veel gebruikt in combinatie met JavaScript. Mogelijkheden zijn onder meer: het updaten van meerdere frames tegelijk met n muisklik het updaten van een frame bij openen van een document in een ander frame

het openen van een document in het volledige venster in plaats van in een frame van iemand anders het voorkomen dat een document buiten een bepaald frame geopend wordt.

Hoewel JavaScript in principe buiten het bereik van deze handleiding valt, zijn in een apart document enkele voorbeelden opgenomen van de genoemde mogelijkheden.

Een bijzondere vorm van frames zijn inline frames (ook wel floating of zwevende frames). Inline frames worden opgenomen in een normaal document. Je kunt ze beschouwen als een opening in het document, waar doorheen je een ander document ziet. In het document in die opening (of eigenlijk frame) kun je net als bij normale frames klikken op een hyperlink en op die manier een nieuw document openen. Dat openen kan in het inline frame waarin je hebt geklikt, maar ook in een ander (al dan niet inline) frame. Een inline frame wordt gedefinieerd met het IFRAME element.

Opbouw frames
Het gebruiken van frames is niet bijzonder ingewikkeld, mits je maar systematisch te werk gaat. Als eerste bedenk je op welke wijze je het venster wilt indelen. Daarna gaat het erom stapsgewijs vanuit een leeg venster de gewenste indeling op te bouwen. Je doet dat door in eerste instantie het gehele venster en daarna steeds n frame te vervangen door een frameset met daarin het gewenste aantal nieuwe frames. We zullen we dat nu doen voor de hieronder afgebeelde indeling. Omdat het vooral om het principe gaat, worden geen waarden opgenomen voor het ROWS of het COLS attribuut van het FRAMESET element. Bovendien wordt het SRC attribuut van het FRAME element vervangen door een aanduiding van elk frame (bijvoorbeeld A1, B11 of B3).

De eerste stap is het verdelen van het gehele venster ofwel verticaal in rijen, ofwel horizontaal in kolommen. In dit geval moet het venster in twee kolommen verdeeld worden. Dat leidt tot de volgende opbouw: <FRAMESET COLS=" , "> <FRAME A> <FRAME B> </FRAMESET>

De tweede stap is het vervangen van FRAME A door een frameset met twee rijen: <FRAMESET COLS=" , "> <FRAMESET ROWS=" , "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAME B> </FRAMESET>

De derde stap is het vervangen van FRAME B door een frameset, nu met drie rijen: <FRAMESET COLS=" , "> <FRAMESET ROWS=" , "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAMESET ROWS=" , , "> <FRAME B1> <FRAME B2> <FRAME B3> </FRAMESET> </FRAMESET> Tenslotte wordt FRAME B1 vervangen door een frameset met twee kolommen. <FRAMESET COLS=" , "> <FRAMESET ROWS=" , "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAMESET ROWS=" , , "> <FRAMESET COLS=" , "> <FRAME B11> <FRAME B12> </FRAMESET> <FRAME B2> <FRAME B3> </FRAMESET> </FRAMESET>

Voorbeelden frames
Wanneer je het venster van de browser horizontaal wilt verdelen in twee frames, dan moet je aan het FRAMESET element het ROWS attribuut toevoegen. Binnen het FRAMESET element plaats je voor elk frame een FRAME element. Met het SRC attribuut geef je aan welk HTML-document in dat frame geopend moet worden. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME SRC="boven.html"> <FRAME SRC="onder.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. Wanneer je het venster verticaal wilt verdelen in twee frames, dan voeg je in plaats van het ROWS attribuut het COLS attribuut aan het FRAMESET element toe. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="links.html"> <FRAME SRC="rechts.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. Wanneer je een indeling wilt met zowel rijen als kolommen, dan werk je meestal met geneste framesets. Dat wil zeggen dat je een frameset opneemt binnen een ander frameset. In het volgende voorbeeld verdeelt het eerste frameset het venster horizontaal in drie frames. Het bovenste frame is 90 pixels hoog, het onderste frame 150 pixels en het middelste frame krijgt de rest van de beschikbare hoogte. Het middelste frame is vervolgens verticaal verdeeld in drie frames, waarbij het linker frame 50% van de beschikbare breedte heeft, het rechter frame 125 pixels breed is en het middelste frame de resterende breedte krijgt. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="90,*,150"> <FRAME SRC="boven.html"> <FRAMESET COLS="50%,*,125"> <FRAME SRC="links.html"> <FRAME SRC="midden.html"> <FRAME SRC="rechts.html"> </FRAMESET> <FRAME SRC="onder.html"> </FRAMESET> </HTML>

Bekijk het resultaat in een nieuw venster. Wanneer je een symmetrische indeling van de frames wilt, dan kun je ook met n frameset werken en de attributen ROWS en COLS voor het FRAMESET element combineren. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="50%,50%" COLS="25%,75%"> <FRAME SRC="linksboven.html"> <FRAME SRC="rechtsboven.html"> <FRAME SRC="linksonder.html"> <FRAME SRC="rechtsonder.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. Wanneer je de attributen ROWS en COLS niet opneemt voor het FRAMESET element, dan wordt voor elk de beginwaarde 100% aangehouden. Het resultaat hiervan is, dat het frame dan het hele venster vult. Voor deze constructie wordt wel gekozen als het gewenst is dat het adres van het document in het frame niet zichtbaar is in de adresbalk van de browser. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET> <FRAME SRC="volledig.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster.

In de voorgaande voorbeelden is geen gebruik gemaakt van het NORESIZE attribuut. De rand tussen de frames kan daardoor, zoals in de volgende afbeelding te zien is, met de muis verplaatst worden.

Door het NORESIZE attribuut aan het eerste FRAME element toe te voegen, kan dit niet meer. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD>

<FRAMESET ROWS="30%,70%"> <FRAME SRC="links.html" NORESIZE> <FRAME SRC="rechts.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster.

Door de attributen MARGINWIDTH en MARGINHEIGHT aan het FRAME element toe te voegen, kun je aangeven hoe groot de afstand moet zijn tussen de inhoud van een frame en de linker- en rechterrand, respectievelijk de boven- en onderrand van het frame. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="*,60"> <FRAMESET COLS="*,*,*"> <FRAME SRC="links.html"> <FRAME SRC="midden.html" MARGINWIDTH="1" MARGINHEIGHT="1"> <FRAME SRC="rechts.html" MARGINWIDTH="30" MARGINHEIGHT="30"> </FRAMESET> <FRAME SRC="onder.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. Door het SCROLLING attribuut aan het FRAME element toe te voegen, kun je bepalen of wel of geen schuifbalk moet worden weergegeven. In het volgende voorbeeld wordt in de bovenste twee frames hetzelfde document geopend. Aan het bovenste frame is het SCROLLING attribuut toegevoegd met de waarde "no", waardoor er geen schuifbalk wordt weergegeven. Aan het middelste frame is het SCROLLING attribuut niet toegevoegd en de schuifbalk wordt weergegeven, omdat deze nodig is om de volledige inhoud van het document te laten zien. Voor het onderste frame is SCROLLING="yes" opgenomen. Een browser die deze waarde ondersteunt, geeft in dit frame de schuifbalk weer ook al is deze niet nodig. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="60,60,*"> <FRAME SRC="boven.html" SCROLLING="no"> <FRAME SRC="boven.html"> <FRAME SRC="onder.html" SCROLLING="yes"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster.

Browser ondersteunt geen frames

Als bovenstaande voorbeelden worden geopend in een browser die geen frames ondersteunt, dan krijgt de gebruiker een leeg venster te zien. Om dat te voorkomen, moet je het NOFRAMES element opnemen. Je plaatst het vlak voor de beindiging van het buitenste frameset. Binnen het NOFRAMES

element neem je het BODY element op en daar binnen de inhoud die je wilt weergeven. De kleur van de tekst, de hyperlinks en de achtergrond van de inhoud van het NOFRAMES element kun je bepalen, door aan het BODY element de benodigde attributen toe te voegen (TEXT, LINK, VLINK, ALINK, BGCOLOR en BACKGROUND). De door het NOFRAMES element ingesloten inhoud wordt niet weergegeven door een browser die frames ondersteunt en is dus alleen in andere browsers zichtbaar. In het volgende voorbeeld is binnen het NOFRAMES element een korte boodschap aan de gebruiker opgenomen. <FRAMESET> .. <NOFRAMES> <BODY> <P>Om deze pagina te kunnen bekijken, moet je over een browser beschikken die frames ondersteunt, bijvoorbeeld Microsoft Internet Explorer of Netscape Navigator.</P> </BODY> </NOFRAMES> </FRAMESET> De bezoeker met een browser die geen frames ondersteunt, krijgt alleen de tekst te zien die tussen de activering en beindiging van het NOFRAMES element staat. Deze oplossing is niet zo aardig voor de bezoeker, omdat je hem of haar ofwel dwingt een andere browser te gaan gebruiken, ofwel de toegang tot jouw pagina's ontzegt. Beter is het te zorgen voor een goede noframes-versie. In het NOFRAMES element neem je dan een verwijzing naar de noframes-versie op. Bijkomend voordeel is dat je hiermee de kans vergroot dat je pagina's door de verschillende zoekmachines gendexeerd worden. Veel zoekmachines volgen namelijk alleen hyperlinks in het noframes-gedeelte. In het volgende voorbeeld bevat het linkerframe een overzicht met hyperlinks, waarmee je door de site kunt navigeren. Het rechterframe bevat de feitelijke inhoud van de site. In een browser die geen frames ondersteunt, kan de bezoeker in het noframes-gedeelte doorklikken en dan toch de inhoud van het rechter frame bekijken. Je moet er in zo'n geval natuurlijk wel voor zorgen dat de bezoeker ook in de noframes-versie voldoende navigatiemogelijkheden heeft. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET COLS="100,*"> <FRAME SRC="navigatie.html"> <FRAME SRC="begin.html"> <NOFRAMES> <BODY> <P>De browser ondersteunt geen frames, bekijk daarom de versie zonder <A HREF="begin.html">frames<A></P> </BODY> </NOFRAMES> </FRAMESET> </HTML> Bekijk in een nieuw venster wat de bezoeker ziet in een browser met frames ondersteuning en in een browser zonder frames ondersteuning.

Document openen in frame

Speciale aandacht verdient het gebruik van hyperlinks in documenten in frames. Standaard wordt een document geopend in het frame waarin de hyperlink staat. Vaak is dat echter niet gewenst en wil je het document juist in een ander frame openen. In andere gevallen wil je het document helemaal niet in een frame openen, maar juist in het volledige venster van de browser. Het toevoegen van TARGET attribuut aan het element waarmee je de hyperlink maakt (bijvoorbeeld A of AREA) biedt in dit geval uitkomst. Wanneer je als waarde van het TARGET element de naam van een frame opneemt, dan wordt het document in dat frame geopend. De naam van het frame definieer je met behulp van het NAME attribuut van het FRAME element en moet beginnen met een hoofdletter of een kleine letter (A-Z of a-z). Volgens HTML 4.0 is de naam hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven. In de praktijk maken alle belangrijke browsers als het gaat om de naam van een frame wel onderscheid tussen hoofdletters en kleine letters. Je moet er dus voor zorgen dat je zowel in het TARGET attribuut als in het NAME attribuut exact dezelfde naam gebruikt.

In het volgende voorbeeld is aan elk van de frames een naam gegeven met behulp van het NAME attribuut. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="120,*"> <FRAME SRC="navigatie.html" NAME="navigatieframe"> <FRAME SRC="begin.html" NAME="hoofdframe"> </FRAMESET> </HTML> In het documenten in het linker frame zijn de URI's als volgt opgenomen: <A HREF="vb-a.html" TARGET="hoofdframe">voorbeeld a</A> en <A HREF="vb-b.html" TARGET="navigatieframe">voorbeeld b</A> Indien de browser frames ondersteunt, kun je het resultaat bekijken in een nieuw venster.

Naast een zelf bepaalde framenaam kun je in een TARGET attribuut ook gebruik maken van enkele voor-gedefinieerde namen: "_blank", "_parent", "_top" en "_self". In het volgende voorbeeld wordt gebruik gemaakt van de voor-gedefinieerde framenaam "_blank". Het document wordt daardoor geopend in een nieuw browservenster. Hetzelfde gebeurt overigens als je gebruik maakt van een niet gedefinieerde framenaam. <A HREF="vb-c.html" TARGET="_blank">vensternaam _blank</A> <A HREF="vb-c.html" TARGET="zomaar_een_naam">niet gedefinieerde vensternaam</A> Het resultaat zie je in een nieuw venster.

Als je de voor-gedefinieerde framenaam "_parent" gebruikt wordt een hyperlink geopend in de parent

van het huidige frameset. Dat komt er op neer dat het huidige frameset vervangen wordt door het in de link genoemde bestand. TARGET="_parent" Bekijk in een nieuw venster hoe het werkt. Met de voor-gedefinieerde framenaam "_top" wordt een document geopend in het volledige venster van de browser. TARGET="_top"

Indien je veel hyperlinks in een document hebt, dan kan het handig zijn gebruik te maken van het BASE element met daaraan toegevoegd het TARGET attribuut. Je geeft daarmee aan dat alle URI's in het document geopend moeten worden in een frame met de opgegeven naam. In de URI's zelf hoef je dan geen gebruik meer te maken van het TARGET attribuut. Voor uitzonderingen op de regel gebruik je in de URI wel het TARGET attribuut (het TARGET attribuut in de URI gaat boven het TARGET attribuut in het BASE element). Zie ook de beschrijving bij het onderdeel Hyperlinks. In het volgende voorbeeld is in de documenten in het bovenste frame het BASE element opgenomen: <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> <BASE TARGET="onder"> </HEAD> <BODY> .... </BODY> </HTML> In een nieuw venster zie je hoe het werkt. Wanneer het TARGET attribuut van het BASE element verwijst naar een ander frame en je wilt een document openen in het frame waarin de hyperlink staat, dan kun je als waarde van het TARGET element van bijvoorbeeld het A of AREA gebruik maken van de voor-gedefinieerde framenaam "_self".

Meerdere frames tegelijk vervangen

Soms wil je niet alleen de inhoud van n frame vervangen, maar van meerdere frames tegelijkertijd. Dat kan met HTML indien deze frames samen een frameset vormen, dat je als geheel kunt vervangen. Dat is in het volgende voorbeeld het geval met de frames links 1 en rechts 1. Deze frames kunnen dus in n keer vervangen worden door de frames links 2 en rechts 2.

Bekijk in een nieuw venster hoe het werkt.

Als je van plan bent een compleet frameset te vervangen, moet je daar bij de opzet van je site vanaf het begin rekening mee houden. Normaal zou het document waarin de frames uit het voorbeeld worden gedefinieerd, de volgende opbouw hebben: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET ROWS="90,*"> <FRAME SRC="frameboven.html" NAME="boven"> <FRAMESET COLS="120,*"> <FRAME SRC="framelinks.html" NAME="links"> <FRAME SRC="framerechts.html" NAME="rechts"> </FRAMESET> </FRAMESET> </HTML> Om de onderste twee frames tegelijkertijd te kunnen vervangen, moet het tweede frameset opgenomen worden in een apart document. Het eerste document krijgt de volgende opbouw: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET ROWS="90,*"> <FRAME SRC="frameboven.html" NAME="boven"> <FRAME SRC="frameonder1.html" NAME="onder"> </FRAMESET> </HTML> In het document frameonder1.html wordt het frameset gedefinieerd, dat de onderste twee frames bevat: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET COLS="120,*"> <FRAME SRC="framelinks1.html" NAME="links"> <FRAME SRC="framerechts1.html" NAME="rechts"> </FRAMESET> </HTML> Om de onderste twee frames in n keer te vervangen, kun je nu in willekeurig welk frame een hyperlink opnemen met de volgende opbouw: <A HREF="frameonder2.html" TARGET="onder">Vervang de frames</A> Het document frameonder2.html heeft dezelfde opbouw als het document frameonder1.html, alleen verwijst het SRC attribuut van de FRAME elementen naar andere documenten. In de praktijk zullen de te vervangen frames lang niet altijd niet samen n frameset vormen. Dat is bijvoorbeeld het geval in het volgende voorbeeld:

In HTML heb je dan slechts de mogelijkheid het complete venster te wijzigen en in het te openen document alle frames opnieuw te definiren. Dus ook het frame wat helemaal niet vervangen hoeft te worden. Als je vaker meerdere frames tegelijkertijd wilt vervangen, levert de beschreven methode behoorlijk wat werk en extra documenten op. Als alternatief wordt daarom vaak gebruik gemaakt van een oplossing met JavaScript. Daarmee kun je ook eenvoudig frames uit verschillende framesets tegelijk vervangen. Nadeel van het werken met JavaScript is wel, dat het gewenste effect niet bereikt wordt als de bezoeker het gebruik van JavaScript heeft uitgesloten.

Frameranden
Standaard worden frameranden in de meeste browsers weergegeven in 3-D. Met het FRAMEBORDER attribuut van het FRAME element kun je de weergave van de framerand benvloeden. Met de waarde "1" wordt tussen de frames de standaard 3-D rand geplaatst. De waarde "0" zorgt ervoor dat de 3-D rand niet wordt weergegeven. Omdat de ruimte tussen de frames door de meeste browsers daarbij niet geheel of soms helemaal niet wordt weggelaten, is het resultaat een "vlakke" rand. Netscape Navigator 2 en Opera met versienummer lager dan 4 ondersteunen het FRAMEBORDER attribuut niet. In deze browsers wordt de framerand dus altijd in 3-D weergegeven. Opera 6 ondersteunt het FRAMEBORDER ook niet, maar geeft de frameranden altijd vlak weer. De breedte van de framerand is afhankelijk van de browser. HTML 4.0 kent geen mogelijkheid de breedte te benvloeden, maar de browsermakers hebben hiervoor in de loop van de tijd toch enige attributen ontwikkeld. Vrij algemeen ondersteund wordt het BORDER attribuut van het FRAMESET element: door Microsoft Internet Explorer vanaf versie 4, Netscape Navigator vanaf versie 3.0, Mozilla, Firefox en Opera. Het FRAMESPACING van het FRAMESET element attribuut doet in hoofdlijnen hetzelfde als het BORDER attribuut, maar wordt alleen ondersteund door Internet Explorer 3 en hoger en Opera 7.0 en hoger. In het volgende voorbeeld is te zien hoe de browser de verschillende mogelijkheden voor 3-D en vlakke frameranden weergeeft. Voor de mogelijkheid, waarbij het FRAMEBORDER attribuut van het FRAME element de waarde de "0" heeft en de attributen BORDER en FRAMESPACING van het FRAMESET van het FRAMESET element de waarde "10" hebben, is de opbouw als volgt: <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="25,*,25" BORDER="10" FRAMESPACING="10"> <FRAME FRAMEBORDER="0" SRC="boven-onder.html" SCROLLING="no"> <FRAME FRAMEBORDER="0" SRC="midden.html"> <FRAME FRAMEBORDER="0" SRC="boven-onder.html" SCROLLING="no"> </FRAMESET> </HTML> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Wanneer je de breedte van de framerand wilt bepalen, dan is een gegeven waar je rekening mee moet houden, dat de diverse browsers de rand verschillend weergeven ook als je gebruik maakt van hetzelfde attribuut met dezelfde waarde. In de hierna opgenomen tabellen is dat te zien voor de verschillende versies voor Windows van Microsoft Internet Explorer, Netscape Navigator, Mozilla, Firefox en Opera. In de eerste tabel is aan elk FRAME element steeds het attribuut FRAMEBORDER="1" toegevoegd. De rand wordt daardoor in 3-D weergegeven. Aan het FRAMESET element zijn achtereenvolgens geen attribuut (dat is dus de standaard weergave) en, met verschillende waarden, het BORDER attribuut, het FRAMESPACING attribuut en de combinatie van de attributen BORDER en FRAMESPACING toegevoegd. In de tabel is te zien dat een uniforme weergave door de verschillende browser(versies) niet mogelijk is. Bij de standaardweergave begint in de nieuwste browsers (met uitzondering van Opera 6 en 7) weliswaar enige uniformiteit te komen, bij de overige mogelijkheden is dat allerminst het geval. Bij een combinatie van de attributen BORDER en FRAMESPACING komen Microsoft Internet Explorer en Opera 5 op dezelfde breedte uit, Netscape Navigator 6 en 7, Mozilla en Firefox wijken daar echter weer aanzienlijk vanaf. Opera 6 ondersteunt het FRAMEBORDER attribuut van het FRAME element niet en geeft frameranden alleen nog vlak weer. In Opera 7 is de ondersteuning weer hersteld. FRAMEBORDER="1" IE 4 - (standaard) BORDER="0" FRAMESPACING="0" BORDER="0" FRAMESPACING="0" BORDER="10" FRAMESPACING="10" BORDER="10" FRAMESPACING="10" BORDER="x" FRAMESPACING="x" BORDER="x" FRAMESPACING="x" Opmerkingen bij de tabel: de framerand is in 3-D tenzij anders vermeld (v = vlak) de breedte is in pixels in Netscape Navigator 3 en 4 is de breedte van de framerand de waarde van het BORDER attribuut, bij even getallen verhoogd met 2 en bij oneven getallen verhoogd met 3 als het BORDER attribuut een waarde heeft lager dan 3 bij Netscape Navigator 3/4 en lager dan 5 bij Microsoft Internet Explorer, dan is de breedte anders dan volgens de formule bij de waarde x (zie het uitgebreide overzicht) Opera 6 ondersteunt het FRAMEBORDER attribuut niet en geeft frameranden standaard vlak weer, in Opera 7 is de ondersteuning hersteld De attributen BORDER en FRAMESPACING maken geen deel uit van HTML 4 6 4 4 4 10 14 14 x x+4 x+4 5 5.5 6 6 4 4 4 14 14 14 x+4 x+4 x+4 3 4 8 2v 8 2v 12 8 12 x+2 x+3 8 x+2 x+3 NN 6 7 6 0 6 0 10 6 10 x 6 x MOZ FF 1 6 0 6 0 10 6 10 x 6 x 5 6 4 6 4 14 6 14 x+4 6 x+4 OP 6 2v 0 2v 0 10v 2v 10v xv 2v xv 7 2 0 0 0 10 10 10 x x x

In de tweede tabel is aan elk FRAME element steeds het attribuut FRAMEBORDER="0" toegevoegd.

De rand wordt daardoor in het algemeen vlak weergegeven. Uitzonderingen zijn Netscape Navigator 2 en Opera met versienummer lager dan 4, die het FRAMEBORDER attribuut niet kennen en de rand dus in 3-D weergeven. Ook in dit geval zijn aan het FRAMESET element achtereenvolgens geen attribuut (dat is dus de standaard weergave) en, met verschillende waarden, het BORDER attribuut, het FRAMESPACING attribuut en de combinatie van de attributen BORDER en FRAMESPACING toegevoegd. In de tabel is te zien dat nu juist bij de standaardweergave geen sprake is van uniformiteit. Wanneer je gebruik maakt van het BORDER attribuut of de combinatie van de attributen BORDER en FRAMESPACING, dan is de weergave in alle gangbare browsers hetzelfde. FRAMEBORDER="0" IE 4 - (standaard) BORDER="0" FRAMESPACING="0" BORDER="0" FRAMESPACING="0" BORDER="10" FRAMESPACING="10" BORDER="10" FRAMESPACING="10" BORDER="x" FRAMESPACING="x" BORDER="x" FRAMESPACING="x" Opmerkingen bij de tabel: de framerand is vlak tenzij anders vermeld (d = in 3-D) de breedte is in pixels in Netscape Navigator 3/4 is de breedte van de framerand de waarde van het BORDER attribuut, bij oneven getallen verhoogd met 1 als het BORDER attribuut een waarde heeft lager dan 4 bij Microsoft Internet Explorer, dan is de breedte anders dan volgens de formule bij de waarde x (zie het uitgebreide overzicht) De attributen BORDER en FRAMESPACING maken geen deel uit van HTML 4 2 0 0 0 6 10 10 x-4 x x 5 5.5 6 2 0 0 0 10 10 10 x x x 3 4 6 0 6 0 10 6 10 x x+1 6 x x+1 NN 6 7 6 0 6 0 10 6 10 x 6 x MOZ FF 1 6 0 6 0 10 6 10 x 6 x 5 6 2 0 2 0 10 2 10 x 2 x OP 7 2 0 0 0 10 10 10 x x x

Uit de laatste tabel blijkt dat je de waarde van zowel het BORDER als het FRAMESPACING attribuut op "0" moet stellen, om in de verschillende browsers (met uitzondering van Netscape Navigator 2) de frameranden geheel te laten wegvallen. Bij frames waarvan de randen niet meer zichtbaar zijn, kan het soms handig zijn de inhoud van een frame zo dicht mogelijk in de linker bovenhoek te plaatsen. Je doet dat door aan het FRAME element de attributen MARGINWIDTH en het MARGINHEIGHT toe te voegen met de waarde "1". <FRAME FRAMEBORDER="0" SRC="midden.html" MARGINWIDTH="1" MARGINHEIGHT="1"> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Bij de meeste browsers is de minimale afstand tot de bovenrand zo'n 3 4 pixels, in Netscape Navigator 6 echter 16 pixels.

De 3-D frameranden zijn standaard bij alle browsers grijs. De vlakke frameranden hebben bij Netscape Navigator 3 en 4 en bij Microsoft Internet Explorer 3 en 5 en hoger standaard de achtergrondkleur van de browser, zijn bij Internet Explorer 4 en Opera 4 en hoger grijs en bij Netscape Navigator 6.0 en hoger, Mozilla en Firefox wit. HTML 4.0 kent geen mogelijkheid om de kleur van de framerand te benvloeden, maar de browsermakers hebben hiervoor het BORDERCOLOR attribuut van het FRAME element ontwikkeld. De benvloedingsmogelijkheden zijn echter beperkt, omdat het attribuut in de meeste browsers alleen effect heeft op de kleur van de 3-D frameranden. Alleen bij Microsoft Internet Explorer 4 kun je ook de kleur van vlakke randen bepalen. Het BORDERCOLOR attribuut wordt ondersteund door Netscape Navigator 3 en hoger, Mozilla, Firefox en Microsoft Internet Explorer 4 en hoger. Opera ondersteunt het BORDERCOLOR attribuut niet. In het volgende voorbeeld is de weergave te zien van frameranden in kleur. Voor de mogelijkheid, waarbij het FRAMEBORDER attribuut van het FRAME element de waarde de "1" heeft en de attributen BORDER en FRAMESPACING van het FRAMESET element de waarde "10" hebben, is de opbouw als volgt: <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="25,*,25" BORDER="10" FRAMESPACING="10"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder.html" SCROLLING="no"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="midden.html"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder.html" SCROLLING="no"> </FRAMESET> </HTML> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. In het vorige voorbeeld is voor alle frames dezelfde kleur voor de frameranden gedefinieerd. Dat had ook voor elk frame een andere kleur mogen zijn. Waar de frames aan elkaar grenzen moet de browser dan bepalen welke kleur gebruikt wordt. Elke browser hanteert daarvoor een eigen methode, die niet alleen afwijkt van de weergave van andere browsers, maar bovendien nogal eens onverwachte resultaten oplevert. Het gebruik van meerdere kleuren voor de frameranden is daarom niet echt aan te bevelen. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

In Microsoft Internet Explorer 3 en hoger, Netscape Navigator 6 en hoger, Mozilla, Firefox en Opera 4 en hoger kunnen door een gebruiker niet alleen 3-D frameranden verplaatst worden, maar ook "vlakke" frameranden. Wanneer je niet wilt dat dit gebeurt, dan moet je het NORESIZE attribuut aan het FRAME element toevoegen: <FRAME SRC="frame-vb.html" NORESIZE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Inline frames

Een inline frame is een frame dat is opgenomen binnen een document dat wordt weergegeven in een venster of in een ander frame. Je kunt het beschouwen als een opening in het document, waar doorheen je een ander document ziet. Inline frames worden ondersteund door Microsoft Internet Explorer 3.0 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 4.0 en hoger. Een inline frame definieer je met het IFRAME element. In het volgende voorbeeld is met de attributen WIDTH en HEIGHT vastgelegd dat het inline frame 285 pixels breed en 100 pixels hoog moet zijn. Met behulp van het SRC attribuut wordt aangegeven welk document in het frame geopend moet worden. <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100"> </IFRAME> Als alternatief voor browsers die inline frames niet ondersteunen, kun je tussen de activering en de beindiging van het IFRAME element tekst of andere inhoud plaatsen. Je kunt die mogelijkheid bijvoorbeeld gebruiken om het document uit het inline frame te openen in een nieuw venster. <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100">De browser ondersteunt geen inline frames. Bekijk de <A HREF="iframes-vb.html" TARGET="_blank">inhoud</A> in een nieuw venster.</IFRAME> Het resultaat kun je hierna zien als je een browser gebruikt, die het IFRAME element ondersteunt. Andere browsers herkennen het IFRAME element niet en geven alleen de tekst weer, welke geplaatst is tussen de activering en de beindiging van het IFRAME element. De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster. Door het FRAMEBORDER attribuut op te nemen met de waarde "0" kun je de 3-D frameranden weg laten. <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="0"> </IFRAME> De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster. Normaal gesproken zal de browser een verticale en/of een horizontale schuifbalk weergegeven, wanneer de afmetingen van het inline frame te klein zijn om de inhoud van het document (inclusief de marges) geheel weer te geven. In de voorgaande voorbeelden is daarom een verticale schuifbalk te zien. Indien je niet wilt dat schuifbalken worden weergegeven, kun je er voor kiezen deze weg te laten. Je gebruikt daarvoor het SCROLLING attribuut met de waarde "no". Je moet er wel rekening mee houden dat een deel van de inhoud dan misschien niet meer zichtbaar is. <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="0" SCROLLING="no"> </IFRAME> De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster. Ook wanneer het inline frame voldoende groot is om de complete inhoud van het document erin te laten zien, geeft Microsoft Internet Explorer 6 soms zowel een verticale als een horizontale schuifbalk weer. Dat is het geval als het document in het inline frame een DOCTYPE-declaratie heeft, die ervoor zorgt dat de browser het in de zogenaamde standards modus weergeeft. Je kunt dit probleem oplossen door het document in het inline frame een andere DOCTYPE-declaratie te geven. Bijvoorbeeld die van HTML 4.01 Transitional zonder URI. Wanneer je het document in het inline frame dezelfde achtergrondkleur geeft als het document waarin het frame geopend wordt, dan lopen beide documenten in elkaar over.

De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster. Met behulp van de attributen MARGINHEIGHT en MARGINWIDTH kun je de afstand van de inhoud van het document in het inline frame tot de rand bepalen. <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="1" MARGINHEIGHT="15" MARGINWIDTH="30"> </IFRAME> De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster. Wanneer je geen frameranden toepast, wil je de inhoud van het frame misschien zoveel mogelijk in lijn hebben met de inhoud van het document. Je kunt dat doen door de waarde van de attributen MARGINHEIGHT en het MARGINWIDTH zo klein mogelijk te kiezen. Hoewel deze waarde volgens HTML 4.0 minimaal "1" moet zijn, accepteren de verschillende browsers ook "0". <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="0" MARGINHEIGHT="0" MARGINWIDTH="0"> </IFRAME> Om het effect goed te laten zien, is in het voorbeeld een afwijkende achtergrondkleur gebruikt. In de praktijk ligt het echter meer voor de hand de marges juist zo klein mogelijk te maken, als de achtergrondkleuren van het document en het inline frame gelijk zijn. De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster. In Netscape Navigator 6.0 en hoger, Mozilla en Firefox wordt de inhoud alleen in de linker bovenhoek geplaatst als het document een DOCTYPE-declaratie heeft, die ervoor zorgt dat de browser het in de zogenaamde quirks modus weergeeft. In de standards modus wordt het document alleen direct tegen de linkerrand van het inline frame geplaatst. Je kunt dit oplossen door voor het eerste element op blokniveau in het document de margin-top eigenschap op te nemen met de waarde "0" (zie ook het onderdeel Basisweergave document). Wanneer je een andere rand om het inline frame wil dan de standaard 3-D rand, dan moet je gebruik maken van stylesheets. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl vastgelegd voor het IFRAME element. Met de border eigenschap is bepaald dat een blauwe vlakke rand van 1 pixel breed om het inline frame geplaatst moet worden. <IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="0" STYLE="border: 1px solid #336699;"> </IFRAME> De browser ondersteunt geen inline frames. Bekijk de inhoud in een nieuw venster.

In een inline frame kan net als bij gewone frames elk gewenst document geopend worden. Het kan dus een gewoon document zijn met bijvoorbeeld tekst, afbeeldingen en hyperlinks, maar ook een document met gewone frames of weer nieuwe inline frames. In de volgende afbeelding wordt dit gedemonstreerd. Het document in het inline frame bevat 3 frames en het document in het bovenste frame bevat weer een inline frame. Je kunt de weergave door de browser in een nieuw venster bekijken.

Uitlijnen inline frame

Voor het uitlijnen van tekst naast een inline frame kun je gebruik maken van het ALIGN attribuut. Met n van de waarden "top", "middle" of "bottom", wordt de eerste regel op de aangegeven hoogte naast het inline frame geplaatst en komen eventuele volgende regels onder het inline frame te staan. <P><IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="0" ALIGN="middle"><I>Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven.</I><BR></IFRAME> Met het attribuut ALIGN="middle" ...</P> Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven. Met het attribuut ALIGN="middle" wordt eerste regel van deze tekst wordt naast het inline frame geplaatst. Indien meer ruimte nodig is dan op n regel past, loopt de tweede regel onder inline frame verder. Wanneer je het ALIGN attribuut gebruikt met de waarden "left" of "right" wordt het inline frame links of recht in het venster geplaatst en loopt de tekst over de volle hoogte naast het inline frame door. Om er voor te zorgen dat een volgende alinea pas na het inline frame geplaatst wordt, kun je gebruik maken van het CLEAR attribuut in het BR element. <P><IFRAME SRC="iframes-vb.html" WIDTH="285" HEIGHT="100" FRAMEBORDER="0" ALIGN="right"><I>Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven.</I><BR></IFRAME> Met de waarde &quot;right&quot; ...<BR CLEAR="all"></P> Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven. Met de waarde "right" voor het ALIGN attribuut wordt het inline frame rechts in het venster geplaatst en de tekst links ervan uitgelijnd.

Wanneer je wat afstand wilt houden tussen het inline frame en aangrenzende tekst of andere objecten, dan kun voor het IFRAME element een stylesheets definiren en daarin n of meer van de stijleigenschappen voor de margin opnemen. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl vastgelegd.

<P><IFRAME SRC="iframes-vb.html" WIDTH="275" HEIGHT="100" FRAMEBORDER="0" ALIGN="left" STYLE="margin-right: 20px;"> ></IFRAME> Met behulp van de eigenschap ...<BR CLEAR="all"> </P> Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven. Met behulp van de eigenschap margin-right is ervoor gezorgd, dat tussen het inline frame en de tekst rechts ervan ruimte wordt vrijgehouden.

Het ALIGN attribuut kent geen waarde "center". Wanneer je het inline frame horizontaal wilt centreren, kun je het daarom het beste binnen een DIV element met het attribuut ALIGN="center" plaatsen: <DIV ALIGN="center"><IFRAME ...> ... </IFRAME></DIV>

Document openen in inline frame

Op vergelijkbare wijze als bij gewone frames, kunnen documenten geopend worden in inline frames. Daarvoor is het nodig dat aan de inline frames een naam gegeven wordt door middel van het NAME attribuut. In de hyperlinks wordt een inline frame, waarin een document geopend moet worden, aangegeven met behulp van het TARGET attribuut van bijvoorbeeld het A of het AREA element. In het volgende voorbeeld worden enkele mogelijkheden gedemonstreerd. De inline frames in dit voorbeeld zijn als volgt opgebouwd: <P><IFRAME SRC="iframes-links1.html" WIDTH="265" HEIGHT="120" FRAMEBORDER="0" NAME="links"> </IFRAME> &nbsp;&nbsp; <IFRAME SRC="iframesrechts1.html" WIDTH="265" HEIGHT="120" FRAMEBORDER="0" NAME="rechts"> </IFRAME></P> De opbouw van een URI is bijvoorbeeld: <A HREF="iframes-rechts2.html" TARGET="rechts">rechter</A> Bekijk het voorbeeld in een nieuw venster.

Transparante inline frames

Om verschillende redenen kan het wenselijk zijn dat een inline frame transparant is en de achtergrond van het document waarin het is opgenomen doorschijnt. Bijvoorbeeld als gebruik gemaakt wordt van een achtergrondafbeelding, die ook achter het inline frame moet doorlopen. Niet elke browser biedt evenwel de mogelijkheid van transparante inline frames en soms moet je zelfs gebruik maken van mogelijkheden, die browser-specifiek zijn en geen onderdeel zijn van een HTML 4.0. In het volgende overzicht is te zien, welke mogelijkheden de verschillende browsers bieden voor transparante inline frames. In oudere versies van Microsoft Internet Explorer (t/m versie 5.0x), Netscape Navigator (t/m versie 7.0x) en Mozilla (t/m versie 1.0x) en in alle versies van Opera is een inline frame standaard niet transparant en is er ook geen mogelijkheid het wel transparant te maken. In Microsoft Internet Explorer 5.5 en hoger is een inline frame standaard niet transparant, maar kan het door het opnemen van het (niet tot HTML 4.0 behorende) ALLOWTRANSPARENCY attribuut voor het IFRAME element wel transparant gemaakt worden. In Netscape Navigator 7.1 en hoger, Mozilla 1.1 en hoger en Firefox is een inline frame standaard transparant.

Om te komen tot een transparant inline frame, is het niet voldoende als het inline frame zelf transparant is. Een tweede voorwaarde is, dat het document in het inline frame een transparante achtergrond heeft. Bij Netscape Navigator 7.1 en hoger, Mozilla 1.1 en hoger en Firefox is dat standaard het geval, maar voor Microsoft Internet Explorer 5.5 en hoger moet je dat expliciet aangeven. De eenvoudigste manier om dat te doen, is het definiren van een stijl voor het BODY element en daarin de background-color eigenschap met de waarde transparent op te nemen. In het volgende voorbeeld wordt gedemonstreerd hoe je een transparant inline frame maakt. Voor het document dat het inline frame bevat, leg je bijvoorbeeld met behulp van een inline stijl en de background-image eigenschap vast welke achtergrondafbeelding moet worden weergegeven: <BODY STYLE="background-image: url(watermerk.gif);"> ... </BODY> Om het inline frame in Microsoft Internet Explorer 5.5 en hoger transparant te maken, neem je voor het IFRAME element het ALLOWTRANSPARENCY attribuut op. Omdat de standaard 3-D rand van het inline frame niet zo fraai is, laat je deze weg door het FRAMEBORDER attribuut de waarde "0" te geven. Als je het inline frame toch zichtbaar wilt maken, kun je met behulp van de border eigenschap een stijl definiren, die zorgt voor een fraaiere rand. <P><IFRAME SRC="iframes-vb.html" WIDTH="240" HEIGHT="160" FRAMEBORDER="0" STYLE="border: solid 1px #FF0000;" ALLOWTRANSPARENCY> </IFRAME></P> Om de achtergrond van het document in het inline frame transparant te maken, definieer je voor het BODY element een stijl met de background-color eigenschap. <BODY STYLE="background-color: transparent;"> ... </BODY> Onderstaande schermafdruk laat zien hoe het voorbeeld wordt weergegeven door Microsoft Internet Explorer 5.5 en hoger, Netscape Navigator 7.1 en hoger, Mozilla 1.1 en hoger en Firefox.

Bekijk in een nieuw venster of de achtergrondafbeelding ook in de eigen browser doorloopt achter het inline frame. ALLOWTRANSPARENCY is geen door HTML 4.0 toegestaan attribuut voor het IFRAME element. Het gebruik ervan zal daarom een foutmelding opleveren, wanneer je het document laat controleren op fouten in de HTML-code.

Introductie objecten

In een HTML-document kunnen verschillende soorten objecten opgenomen (of ingesloten) worden, bijvoorbeeld afbeeldingen, andere HTML-documenten, Java applets en multimedia objecten als QuickTime filmpjes, Macromedia Flash animaties en geluidsfragmenten. Voor het insluiten van deze objecten worden verschillende elementen gebruikt: Afbeeldingen worden in een document ingesloten met het IMG element. Voor het maken van aanklikbare afbeeldingen (Client-side image maps) zijn de elementen MAP en AREA beschikbaar. De beschrijving is opgenomen in het onderdeel Afbeeldingen. Voor het insluiten van andere HTML-documenten kan gebruik gemaakt worden van inline frames, welke gedefinieerd worden met behulp van het IFRAME element. De beschrijving is opgenomen in het onderdeel Frames. Java applets, kleine programma's geschreven in de programmeertaal Java, worden in een HTML-document ingesloten met het APPLET element. Vaak is het mogelijk de werking van het applet te benvloeden, door voor een aantal parameters op te geven welke waarde gebruikt moet worden. Hiervoor dient het PARAM element. Multimedia objecten kunnen in een HTML-document ingesloten worden met behulp van het EMBED element (geluidsfragmenten in Microsoft Internet Explorer en Opera bovendien met het BGSOUND element).

Voor het insluiten van de verschillende objecten is in HTML 4.0 het OBJECT element gentroduceerd. Dit element moet in de toekomst de eerder genoemde elementen gaan vervangen. Het APPLET element heeft om die reden in HTML 4.0 het label afgekeurd gekregen, terwijl de elementen EMBED en BGSOUND niet eens in de specificatie zijn opgenomen. Het OBJECT element wordt ondersteund door Microsoft Internet Explorer 3.0 en hoger, Mozilla, Netscape Navigator 4.0 en hoger en Opera 4.0 en hoger. Ten behoeve van oudere browsers kan tussen de activering en beindiging van het OBJECT element een alternatieve inhoud opgenomen worden. Deze alternatieve inhoud wordt alleen weergegeven als de browser het OBJECT element niet ondersteunt, of als het object niet kan worden weergegeven. Browsers die het OBJECT element ondersteunen, doen dat overigens niet altijd voor alle typen objecten. Met name in Netscape Navigator 4 is de ondersteuning beperkt. Een veel groter probleem is evenwel dat de ondersteuning lang niet altijd correct is en nogal eens tot problemen in de weergave leidt (vooral de verschillende versies van Microsoft Internet Explorer en de oudere versies van Opera hebben hier last van). Bij multimedia objecten hebben die problemen vaak een relatie met de gebruikte plug-in. Dat is een programma dat ervoor zorgt dat bepaalde typen objecten binnen de browser kunnen worden weergeven. Soms is de weergave in een browser met de ene plug-in prima, terwijl een andere voor grote problemen zorgt. Gezien de hiervoor genoemde problemen met het OBJECT element is de verleiding groot de "oudere" elementen te blijven gebruiken. Voor sommige objecten is dat voorlopig ook de beste oplossing. Bij multimedia objecten is het echter niet mogelijk het OBJECT element links te laten liggen, omdat nieuwere versies van Microsoft Internet Explorer het insluiten ervan met behulp van het EMBED element niet meer ondersteunt. Na een korte toelichting op de begrippen plug-ins en ActiveX controls komen in dit onderdeel van de Handleiding HTML de verschillende objecten aan de orde: afbeeldingen, image maps, HTMLdocumenten, Java applets, QuickTime filmpjes, Macromedia Flash animaties en geluidsfragmenten. Per object wordt ingegaan op de ondersteuning door de verschillende browsers van de beschikbare elementen en wordt geadviseerd welke oplossing het beste gebruikt kan worden. Daarnaast worden voorbeelden gegeven van de verschillende mogelijkheden. Bij de beschrijving van de ondersteuning van het OBJECT element blijft Microsoft Internet Explorer 3 buiten beschouwing. In het algemeen kan gesteld worden dat de weergave van vrijwel alle objecten veel problemen kent, maar dat daar tegenover staat dat vrijwel niemand deze browser nog zal gebruiken.

Je moet er rekening mee houden dat een document waarin de elementen EMBED of BGSOUND zijn opgenomen, niet voldoet aan HTML 4. Bij controle met een validator, zal het document dus niet worden goedgekeurd.

Plug-ins en ActiveX controls

Een plug-in of ActiveX control is een programma dat de functionaliteit van de browser zodanig uitbreidt, dat bepaalde typen multimedia objecten binnen het venster van de browser kunnen worden weergeven. Plug-ins zijn oorspronkelijk ontwikkeld door Netscape, maar worden ook ondersteund door andere browsers zoals Opera en oudere versies van Microsoft Internet Explorer (t/m versie 5.5 Service Pack 1). ActiveX controls zijn speciaal ontwikkeld voor en worden ook alleen ondersteund door Microsoft Internet Explorer. De nieuwste versies van Internet Explorer (5.5 Servicepack 2 en hoger) ondersteunen geen plug-ins meer en kunnen daardoor multimedia objecten alleen weergeven als de juiste ActiveX control is genstalleerd. De plug-in voor de belangrijkste bestandsformaten voor geluidsfragmenten (wav-, au-, aif- of midi-bestanden) is bij Netscape Navigator 3 en 4 LiveAudio. Het bedieningspaneel voor LiveAudio heeft een regelaar voor het geluidsvolume, welke door de gebruiker bediend kan worden. Als afmetingen voor het object moet 144 pixels breed en 60 pixels hoog aangehouden worden. Kies je kleinere waarden, dan valt een deel van het bedieningspaneel weg. LiveAudio plug-in

Bij latere versies van Netscape Navigator 4 wordt als plug-in voor geluidsfragmenten de Beatnik Player meegeleverd. De afmetingen zijn hetzelfde als bij LiveAudio: 144 pixels breed en 60 pixels hoog. De Beatnik Player heeft geen geluidsregelaar. Beatnik Player plug-in

De ActiveX control voor wav-, au- en aif-bestanden in Microsoft Internet Explorer 3 en 4 is ActiveMovie. De gebruiker kan bepalen of het control met of zonder display moet worden weergegeven. Het bedieningspaneel moet het in beide gevallen zonder geluidsregelaar doen en ook via het VOLUME attribuut is de geluidssterkte niet te regelen. In Microsoft Internet Explorer 3 ondersteunt ActiveMovie geen midi-bestanden. Indien ook Netscape Navigator 3.0 of hoger met LiveAudio genstalleerd is, maakt Microsoft Internet Explorer 3 automatisch gebruik van deze plug-in. Als dit niet het geval is, zal een aparte plug-in genstalleerd moeten worden. ActiveMovie in Microsoft Internet Explorer 4 ondersteunt wel midi-bestanden. ActiveMovie control zonder display

ActiveMovie control met display

Latere versies van Microsoft Internet Explorer maken standaard gebruik van de Windows Media Player control. Indien voor de breedte van het object 300 pixels en voor de hoogte 45 pixels aangehouden wordt, is alleen het complete bedieningspaneel te zien. Voor geluidsfragmenten is dat voldoende. Als de hoogte toeneemt krijg je ook (een deel van) het display te zien. Het bedieningspaneel beschikt over een geluidsregelaar. Als je kiest voor een kleinere breedte dan 300 pixels valt de geluidsregelaar weg. Windows Media Player control alleen bedieningspaneel

Windows Media Player control

In Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera zijn standaard geen plug-ins opgenomen. De gebruikers van deze browsers moeten dus zelf de benodigde plug-ins kiezen. De Quicktime Player kan niet alleen QuickTime filmpjes weergeven, maar ook allerlei andere multimedia objecten. Als de QuickTime Player genstalleerd is, gebruiken Netscape Navigator, Mozilla, Firefox en Opera deze bijvoorbeeld vaak voor het afspelen van bepaalde typen geluidsfragmenten. In de nieuwste versies van de QuickTime Player kan de gebruiker instellen welke typen objecten ondersteund moeten worden. Tot voor kort was er alleen een plug-in, de nieuwste versies kennen echter ook een ActiveX control. De afmetingen die je moet aanhouden, hangen af van het object. Voor geluidsfragmenten wordt alleen het bedieningspaneel weergegeven en dat heeft een breedte van 136 pixels en een hoogte van 16 pixels. Omdat je niet weet of de QuickTime plug-in gebruikt wordt, is het verstandig grotere afmetingen aan te houden, bijvoorbeeld die van de LiveAudio en Beatnik Player plug-in. Het bedieningspaneel van de QuickTime plug-in/control beschikt over een geluidsregelaar. QuickTime Player bedieningspaneel

Afbeeldingen
Voor het opnemen van afbeeldingen in een HTML-document, beschikken we al sinds lang over het IMG element. HTML 4.0 biedt de mogelijkheid in plaats daarvan het OBJECT element te gebruiken. Het IMG element wordt door alle gangbare browsers zonder problemen ondersteund voor de verschillende typen afbeeldingen (zoals gif, jpg en png). Wat betreft de ondersteuning van het OBJECT element valt het volgende op te merken: Microsoft Internet Explorer 4.0 en hoger plaatst de afbeelding in een inline frame. De afmetingen hebben betrekking op het inline frame en niet op de afbeelding. Met de originele afmetingen valt daardoor een deel van de afbeelding weg, terwijl bij een vergrote weergave de afbeelding het originele formaat houdt. Microsoft Internet Explorer 5.5 Service Pack 2 en hoger ondersteunt geen Netscape plug-ins meer. Indien afbeeldingen van het type png geassocieerd zijn met bijvoorbeeld de QuickTime player, wordt in plaats van de afbeelding slechts een leeg inline frame weergegeven. Voor Internet Explorer 5.5 Service Pack 1 geldt hetzelfde als voor versie 4.0 t/m 5.5, tenzij de Security update Q321232 van 15 mei 2002 genstalleerd is. In het laatste geval is de werking hetzelfde als bij Internet Explorer 5.5 Service Pack 2. Indien als alternatieve inhoud een tweede OBJECT element is opgenomen, geven de verschillende versies van Microsoft Internet Explorer beide objecten weer in plaats van slechts n. Netscape Navigator 4 ondersteunt geen afbeeldingen via het OBJECT element, behalve als voor de weergave gebruik gemaakt wordt van een plug-in (bijvoorbeeld de QuickTime player voor png-bestanden). In dat geval is echter ook de alternatieve inhoud zichtbaar. In Netscape Navigator 6.0 en hoger, Mozilla en Firefox is de ondersteuning correct. In Opera 4.0 en hoger is de ondersteuning correct. Voor afbeeldingen van het type png geldt dat echter alleen indien deze niet geassocieerd zijn met een ander programma (bijvoorbeeld de QuickTime player). Is dat wel het geval, dan wordt slechts het logo van de plug-in weergegeven. Met uitzondering van Opera 7.0 en hoger ondersteunt geen enkele browser het CODEBASE attribuut in combinatie met het DATA attribuut.

In enkele schermafdrukken is de weergave door Microsoft Internet Explorer van afbeeldingen met behulp van OBJECT element te zien.

normale weergave origineel formaat

origineel formaat in Microsoft Internet Explorer

normale weergave vergroting

vergroting in Microsoft Internet Explorer

Geadviseerd wordt voor het opnemen van afbeeldingen niet het OBJECT element te gebruiken, maar voorlopig trouw te blijven aan het IMG element. Belangrijkste reden is de weergave in Microsoft Internet Explorer. Als je png-bestanden wilt gebruiken, komen daar nog eens problemen in Opera en in de nieuwste versies van Internet Explorer bij (en als auteur kun je nu eenmaal niet bepalen door welk programma of plug-in de afbeelding moet worden weergeven). Een uitgebreide toelichting op het IMG element wordt gegeven in het onderdeel Afbeeldingen. Wanneer je ondanks alle problemen in de weergave toch het OBJECT element wilt gebruiken, dan geef je met het DATA attribuut aan om welke afbeelding het gaat. Omdat de ondersteuning voor het CODEBASE attribuut minimaal is, moet je in het DATA attribuut ook de verwijzing naar een andere directory opnemen. Het TYPE attribuut maakt aan de browser bekend om wat voor type afbeelding het gaat. Bij het type gif is de waarde "image/gif", bij het type png "image/png" en bij het type jpg "image/jpeg". De attributen WIDTH en HEIGHT bepalen de afmetingen van de afbeelding. Met het BORDER attribuut leg je vast of wel of geen rand om de afbeelding moet worden weergegeven. <P><OBJECT DATA="afbeeldingen/gezicht.gif" WIDTH="105" HEIGHT="125" TYPE="image/gif" BORDER="0"> De browser ondersteunt het OBJECT element niet, of kan de afbeelding niet insluiten. </OBJECT></P> Bekijk in een nieuw venster de weergave van de afbeeldingen in de typen gif of png. N.B. Wanneer JavaScript is toegestaan, worden deze voorbeelden geopend in een nieuw venster zonder schuifbalken. Wanneer je gebruik maakt van Microsoft Internet Explorer, kun je dan een illustratie zien van de wijze waarop deze browser het OBJECT element gemplementeerd heeft. Hoewel het nieuwe venster en het object in het document in dat venster (de afbeelding dus) in principe niets met elkaar te maken hebben, zijn ook de schuifbalken verdwenen van het inline frame waarin de afbeelding wordt weergegeven. Wil je zien hoe de weergave van Microsoft Internet Explorer "normaal" is, dan moet je met de muis rechtsklikken op n van bovenstaande hyperlinks en kiezen voor 'Openen in nieuw venster'.

In de voorbeelden hiervoor is een tekst als alternatieve inhoud van het OBJECT element opgenomen, maar het mag ook een ander object zijn. Bijvoorbeeld een gif-bestand voor als de browser geen pngbestanden ondersteunt. De browser mag slechts n van de objecten weergeven: of het object dat opgegeven is via het eerste OBJECT element, of het alternatief. <P><OBJECT DATA="afbeeldingen/gezicht.png" WIDTH="105" HEIGHT="125" TYPE="image/png" BORDER="0"> <OBJECT DATA="afbeeldingen/gezicht.gif" WIDTH="105" HEIGHT="125"

TYPE="image/gif" BORDER="0"> De browser ondersteunt het OBJECT element niet, of kan de afbeelding niet insluiten. </OBJECT> </OBJECT></P> Bekijk in een nieuw venster welk(e) object(en) de browser weergeeft.

Image maps
Een image maps is een afbeelding, waarvan delen aanklikbaar zijn en je leiden naar een volgend document. Een afbeelding wordt een image map, als je aan de elementen IMG of OBJECT het USEMAP attribuut toevoegt en daarnaast met behulp van de elementen MAP en AREA informatie opneemt over welke documenten bij klikken geopend moeten worden. Een image map gemaakt met het IMG element wordt door alle gangbare browsers ondersteund. De ondersteuning van een oplossing met behulp van het OBJECT is veel beperkter: Microsoft Internet Explorer 4.0 en hoger ondersteunt het USEMAP attribuut niet en geeft slechts de afbeelding weer. Netscape Navigator 4 ondersteunt geen image maps via het OBJECT element. In Netscape Navigator 6.0 en hoger, Mozilla en Firefox is de ondersteuning correct. Opera 4 t/m 6 ondersteunt het USEMAP attribuut niet en geeft slechts de afbeelding weer. In Opera 7.0 en hoger is de ondersteuning correct. Voor alle browsers geldt dat de eerder gemaakte opmerkingen ten aanzien van de ondersteuning van afbeeldingen ook voor de image map gelden.

Gezien de beperkte ondersteuning van het USEMAP attribuut en de problemen met de weergave van afbeeldingen in met name Microsoft Internet Explorer is het niet verstandig het OBJECT element voor image maps te gebruiken. De algemeen ondersteunde oplossing met het IMG element wordt beschreven in het onderdeel Afbeeldingen. Hierna worden enkele voorbeelden met het OBJECT element gegeven, welke alleen door Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 7.0 en hoger correct worden ondersteund. Om van een afbeelding een image map te maken, voeg je het USEMAP attribuut aan het OBJECT element toe. De "map" waarin de informatie over de image map staat, kun je op een willekeurige plaats in het HTML-document opnemen. De opbouw is hetzelfde als bij image maps via het IMG element. <P><OBJECT DATA="afbeeldingen/vormen.gif" USEMAP="#vormen" WIDTH="300" HEIGHT="150" TYPE="image/gif" BORDER="1"> De browser ondersteunt het OBJECT element niet, of kan de afbeelding niet insluiten. </OBJECT></P> <MAP NAME="vormen"> <AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map1a.html" ALT="Rechthoek"> <AREA SHAPE="circle" COORDS="254,61,33" HREF="map1b.html" ALT="Cirkel"> <AREA SHAPE="poly" COORDS="100,133,120,75,197,84,208,129,164,143" HREF="map1c.html" ALT="Veelhoek"> <AREA SHAPE="rect" COORDS="0,0,300,150" HREF="object/map1d.html" ALT="Geen vorm"> </MAP> Bekijk in een nieuw venster of de browser deze image map ondersteunt.

Een alternatieve manier om een image map te maken is die waarbij binnen het MAP element niet AREA gebruikt wordt, maar A. Als je de map als alternatieve inhoud van het OBJECT element opneemt, moeten browsers die de image map niet kunnen weergeven, een rijtje hyperlinks laten zien. <P><OBJECT DATA="afbeeldingen/vormen.gif" USEMAP="#vormen" WIDTH="300" HEIGHT="150" TYPE="image/gif" BORDER="1"> <MAP NAME="vormen"> <P><A SHAPE="rect" COORDS="15,15,95,93" HREF="map2a.html">Rechthoek</A> <A SHAPE="circle" COORDS="254,61,33" HREF="map2b.html">Cirkel</A> <A SHAPE="poly" COORDS="100,133,120,75,197,84,208,129,164,143" HREF="map2c.html">Veelhoek</A> <A SHAPE="rect" COORDS="0,0,300,150" HREF="object/map2d.html">Rest afbeelding</A></P> </MAP> </OBJECT></P> Bekijk in een nieuw venster of de browser deze image map ondersteunt. Wanneer je de hyperlinks altijd wilt zien, kun je de map ook buiten het OBJECT element plaatsen. <P><OBJECT DATA="afbeeldingen/vormen.gif" USEMAP="#vormen" WIDTH="300" HEIGHT="150" TYPE="image/gif" BORDER="1"></OBJECT></P> <MAP NAME="vormen"> <P><A SHAPE="rect" COORDS="15,15,95,93" HREF="map3a.html">Rechthoek</A> <A SHAPE="circle" COORDS="254,61,33" HREF="map3b.html">Cirkel</A> <A SHAPE="poly" COORDS="100,133,120,75,197,84,208,129,164,143" HREF="map3c.html">Veelhoek</A> <A SHAPE="rect" COORDS="0,0,300,150" HREF="object/map3d.html">Rest afbeelding</A></P> </MAP> Van de weergave van dit voorbeeld is een schermafdruk gemaakt.

Bekijk in een nieuw venster of de browser het insluiten van HTML-documenten ondersteunt.

HTML-documenten
HTML 4.0 biedt twee mogelijkheden om een HTML-document in een ander HTML-document op te nemen: in een inline frame via het IFRAME element en als object met behulp van het OBJECT element.

Het IFRAME element wordt ondersteund Microsoft Internet Explorer vanaf versie 3.0, Mozilla, Netscape Navigator vanaf versie 6.0 en Opera vanaf versie 6.0. Wat betreft de ondersteuning van het OBJECT element door de verschillende browsers geldt: Microsoft Internet Explorer plaatst een HTML-document altijd in een inline frame, ook als het BORDER attribuut is opgenomen met de waarde "0". Het object wordt niet herkend als de waarde van het NAME attribuut van het OBJECT element gebruikt wordt in het TARGET attribuut in het A element. Het is daardoor niet mogelijk een ingesloten HTML-document te vervangen door een ander document met een hyperlink in het hoofddocument of in een ander frame. Netscape Navigator 4 ondersteunt geen HTML-documenten via het OBJECT element. Netscape Navigator 6.0 en 6.1 ondersteunen geen HTML-documenten via het OBJECT element. In Netscape Navigator 6.2 en hoger, Mozilla en Firefox is de ondersteuning correct. In Opera 4.0 en hoger is de ondersteuning correct. Het BORDER attribuut kun je (met de waarde "0") wel gebruiken om de rand om het object weg te laten, maar niet om de dikte van de rand te bepalen.

Vooral vanwege de beperkte mogelijkheden van het vervangen van ingesloten HTML-documenten in Microsoft Internet Explorer, wordt geadviseerd het IFRAME element te gebruiken. Voor een uitgebreide toelichting op de mogelijkheden van inline frames wordt verwezen naar het onderdeel Frames. Hier wordt slechts een enkel voorbeeld opgenomen. Bij het IFRAME element leg je met het SRC attribuut vast welk document ingesloten moet worden. De attributen WIDTH en HEIGHT bepalen de afmetingen van het inline frame. Het FRAMEBORDER attribuut geeft aan of er wel (de waarde "1") of geen (de waarde "0") rand om het frame geplaatst moet worden. <P><IFRAME SRC="htmldoc01.html" WIDTH="220" HEIGHT="150"> De browser ondersteunt het IFRAME element niet. </IFRAME></P> Als je het OBJECT element gebruikt om een HTML-document in te sluiten, leg je met het DATA attribuut vast om welk document het gaat. De attributen WIDTH, HEIGHT bepalen de afmetingen van het object en het TYPE attribuut maakt aan de browser bekend om wat voor type object het gaat (in dit geval "text/html"). Met het BORDER attribuut leg je de dikte van de rand om het object vast. <P><OBJECT DATA="htmldoc02.html" WIDTH="220" HEIGHT="150" TYPE="text/html"> De browser ondersteunt het OBJECT element niet, of kan het HTML-document niet insluiten. </OBJECT></P> Van deze voorbeelden is een schermafdruk gemaakt, met links de oplossing met het IFRAME element en rechts die met het OBJECT element.

Bekijk in een nieuw venster of de browser het insluiten van HTML-documenten ondersteunt. N.B. Wanneer JavaScript is toegestaan, wordt dit voorbeeld geopend in een nieuw venster zonder schuifbalken. Wanneer je gebruik maakt van Microsoft Internet Explorer, kun je dan een illustratie zien van de wijze waarop deze browser het OBJECT element gemplementeerd heeft. Hoewel het met JavaScript geopende nieuwe venster en het object in het document in dat venster (het HTML-document dus) in principe niets met elkaar te maken hebben, is de verticale schuifbalk voor het OBJECT element (rechts) verdwenen. Een deel van de tekst blijft daardoor onzichtbaar. Bij het inline frame (links) wordt de schuifbalk wel correct weergegeven. Wil je zien hoe de weergave van Microsoft Internet Explorer "normaal" is, dan moet je met de muis rechtsklikken op bovenstaande hyperlink en kiezen voor 'Openen in nieuw venster'. Bij het IFRAME element bepaal je met het FRAMEBORDER attribuut of wel (met de waarde "1") of geen (met de waarde "0") rand om het frame geplaatst moet worden. Bij het OBJECT element plaatst Microsoft Internet Explorer altijd een 3-D rand. Mozilla en Netscape Navigator 6.2 en hoger plaatsen standaard geen rand, maar met het BORDER attribuut kun je aangeven dat je een vlakke rand van een bepaalde dikte wilt. Opera plaatst standaard wel een 3-D rand, maar het BORDER attribuut met de waarde "0" zorgt ervoor dat de rand verdwijnt. Het BORDER attribuut heeft in Opera echter geen invloed op de dikte van de rand.

Wanneer je een HTML-document insluit, dan wil je het misschien ook kunnen vervangen door een ander document. Als je daarvoor een hyperlink in het hoofddocument of in een ander frame wilt gebruiken, dan moet je het NAME attribuut toevoegen aan het IFRAME of het OBJECT element. <P><IFRAME SRC="htmldoc03.html" WIDTH="220" HEIGHT="150" FRAMEBORDER="0" NAME="ifr"> De browser ondersteunt het IFRAME element niet. </IFRAME></P> <P><OBJECT DATA="htmldoc05.html" WIDTH="220" HEIGHT="150" TYPE="text/html" BORDER="0" NAME="obj"> De browser ondersteunt het OBJECT element niet, of kan het HTML-document niet insluiten. </OBJECT></P> De naam die je met het NAME attribuut aan een inline frame of object geeft, kun je gebruiken in het TARGET attribuut van de hyperlink. <A HREF="htmldoc08.html" TARGET="obj">Document 3</A> Als je gebruik maakt van de oplossing met het OBJECT element, kun je in Microsoft Internet Explorer het ingesloten HTML-document alleen vervangen via een hyperlink in het ingesloten document zelf. In Netscape Navigator 6.2 en hoger, Mozilla, Firefox en Opera werkt het ook met een hyperlink in het hoofddocument of in een ander frame. Van de weergave van dit voorbeeld is een schermafdruk gemaakt.

Bekijk in een nieuw venster of de browser een ingesloten document kan vervangen.

Java applets
Een Java applet is een klein programma geschreven in de programmeertaal Java. Een applet kan op allerlei manieren extra functionaliteit op een webpagina bieden, bijvoorbeeld teksteffecten, navigatiemogelijkheden en spelletjes. Een Java applet bestaat uit minimaal n bestand met de extensie ".class". De bestanden die samen het applet vormen kunnen ook opgenomen worden in een archief-bestand. Het standaard archiefformaat voor Java bestanden is "jar" (Java ARchive), maar ook gewone zip-bestanden worden ondersteund, mits de erin opgenomen bestanden niet zijn gecomprimeerd. HTML 4.0 kent twee elementen om een Java applet in een document op te nemen: het tot nu toe algemeen gebruikte APPLET element en het OBJECT element dat in de toekomst het APPLET element moet gaan vervangen. Het APPLET element wordt door alle gangbare zonder problemen ondersteund (mits in de instellingen van de browser de uitvoering van Java is toegestaan). Wat betreft de ondersteuning van het OBJECT element valt het volgende op te merken: In Microsoft Internet Explorer 4.0 en hoger is de ondersteuning correct. Het CODEBASE attribuut wordt echter niet ondersteund en dat betekent dat het applet alleen wordt ingesloten als het zich in dezelfde directory bevindt als het HTML-document. Bovendien wordt het ARCHIVE attribuut niet ondersteund, waardoor het applet niet als archief-bestand kan worden opgenomen. Indien als alternatieve inhoud een tweede OBJECT element is opgenomen, geven de verschillende versies van Microsoft Internet Explorer beide objecten weer in plaats van slechts n. Netscape Navigator 4 geeft het applet zelf goed weer, maar toont in sommige versies ook de alternatieve inhoud. In Netscape Navigator 6.0 en hoger en in Mozilla is de ondersteuning correct. Het is wel noodzakelijk de attributen WIDTH en HEIGHT op te nemen. Het insluiten van Java applets met behulp van het OBJECT element wordt niet ondersteund door Opera 4. In Opera 5.0 en hoger is de ondersteuning correct, alleen moet in Opera 6 het CODETYPE attribuut zijn opgenomen (waarbij het overigens niet uitmaakt wat de waarde van het attribuut is).

Wanneer je accepteert dat het applet niet wordt weergegeven in Netscape Navigator 3 en Opera 4, dan kun je het OBJECT element zonder problemen gebruiken voor Java applets. Je moet dan wel de attributen WIDTH, HEIGHT en CODETYPE opnemen en ervoor zorgen dat het gebruik van de attributen CODEBASE en ARCHIVE niet nodig is.

Wanneer je het APPLET element gebruikt om een Java applet in een document in te sluiten, dan geef je met het CODE attribuut aan om welke applet het gaat. Alleen de bestandsnaam wordt opgenomen, waarbij de extensie (.class) mag worden weggelaten. Het CODEBASE attribuut gebruik je, als het applet zich niet in dezelfde directory als het document bevindt. Het geeft aan waar (in welke subdirectory) het applet gevonden kan worden. De afmetingen van het applet moeten worden vastgelegd met de attributen WIDTH en HEIGHT. Vaak moet voor het applet voor n of meer parameters een waarde opgegeven worden. Dat gebeurt met behulp van het PARAM element. Het NAME attribuut geeft aan om welke parameter het gaat, met het VALUE attribuut wordt de waarde vastgelegd. Of en welke parameters gebruikt kunnen of moeten worden, hangt af van het applet. De PARAM elementen worden geplaatst binnen het APPLET element. Tussen de activering en de beindiging van het APPLET element kan na de benodigde PARAM elementen ook een alternatieve inhoud opgenomen worden, voor als de browser Java niet ondersteunt of de ondersteuning door de bezoeker is uitgezet. In het volgende voorbeeld is met behulp van het IMG element als alternatieve inhoud een bewegende afbeelding (animated gif) opgenomen. <P><APPLET CODE="FunScroll" CODEBASE="applet/" WIDTH="275" HEIGHT="100"> <PARAM NAME="font" VALUE="Helvetica"> <PARAM NAME="size" VALUE="13"> <PARAM NAME="delay" VALUE="80"> <PARAM NAME="bgcolor" VALUE="#336699"> <PARAM NAME="fgcolor" VALUE="#FFFFFF"> <PARAM NAME="frameWidth" VALUE="0"> <PARAM NAME="line0" VALUE="<20><size=36>Handleiding\nHTML<fade>"> <PARAM NAME="line1" VALUE="<30><fade>Een Nederlandse handleiding,\nbij het maken van HTML-pagina's."> <PARAM NAME="line2" VALUE="<20><typed>Met de nieuwste mogelijkheden,\neen groot aantal voorbeelden,\nde ondersteuning door browsers\nen Cascading Style Sheets."> <IMG SRC="applet1.gif" WIDTH="274" HEIGHT="99" ALT="" BORDER="0"> </APPLET></P> Bekijk in een nieuw venster hoe het applet wordt weergegeven. Wanneer de browser Java niet ondersteunt, krijgt de bezoeker de bewegende afbeelding te zien:

Het bestand dat via het CODE attribuut van het APPLET element is gespecificeerd en eventuele andere bestanden, welke deel uitmaken van het applet, kunnen ook opgenomen worden in een archief-bestand. Aan het APPLET element wordt in dat geval het ARCHIVE attribuut toegevoegd , met als waarde de naam van het archief-bestand. Het CODEBASE attribuut wordt aan het APPLET element toegevoegd, als het archief-bestand zich niet in dezelfde directory als het document bevindt. Het archief-bestand is een zip-bestand, maar de erin opgenomen bestanden mogen niet gecomprimeerd zijn. Door het gebruik van een archief-bestand kan de downloadtijd beperkt blijven, omdat alle benodigde bestanden in n keer aangevraagd worden. Als voorbeeld wordt gebruik gemaakt van het iScroll applet.

<P><APPLET CODE="iscroll" CODEBASE="applet-zip/" WIDTH="480" HEIGHT="30" ARCHIVE="iscroll.zip"> <PARAM NAME="Notice" VALUE="Applet by www.CodeBrain.com"> <PARAM NAME="Text" VALUE="Handleiding HTML - een onmisbare hulp op het gebied van HTML en CSS - "> <PARAM NAME="TextColor" VALUE="#FFFFFF"> <PARAM NAME="BackgroundColor" VALUE="#336699"> <PARAM NAME="VerticalBias" VALUE="0"> <PARAM NAME="FontName" VALUE="helvetica"> <PARAM NAME="FontStyle" VALUE="0"> <PARAM NAME="Speed" VALUE="25"> <PARAM NAME="Pause" VALUE="1000"> </APPLET></P> Van de weergave van dit voorbeeld is een schermafdruk gemaakt.

Bekijk in een nieuw venster of het Java applet wordt weergegeven.

Wanneer je het OBJECT element gebruikt om een Java applet in te sluiten, moet je het CLASSID attribuut opnemen om te specificeren om welk object het gaat. De naam van het object wordt daarbij voorafgegaan door de aanduiding dat de gebruikte methode "java" is (en niet bijvoorbeeld "http") en de extensie ".class" wordt nu wel opgenomen. Met het CODETYPE geef je aan om wat voor soort object het gaat. De parameters voor het Java applet worden vastgelegd met behulp van het PARAM element. Het NAME attribuut geeft aan om welke parameter het gaat, met het VALUE attribuut wordt de waarde vastgelegd. Welke parameters gebruikt kunnen of moeten worden, hangt af van het applet. De verschillende PARAM elementen worden geplaatst binnen het OBJECT element, vr een eventuele alternatieve inhoud. <P><OBJECT CLASSID="java:Bounce.class" WIDTH="275" HEIGHT="75" CODETYPE="application/java"> <PARAM NAME="message" VALUE="Handleiding HTML"> De browser ondersteunt het OBJECT element niet, of kan het Java applet niet insluiten.</OBJECT></P> Bekijk in een nieuw venster of het Java applet wordt weergegeven. Wanneer het applet zich niet in dezelfde directory bevindt als het HTML-document, moet je het CODEBASE attribuut opnemen, om aan te geven waar de bestanden zich bevinden. Bijvoorbeeld in de subdirectory "applet": <P><OBJECT CLASSID="java:FunScroll.class" CODEBASE="objecten/" WIDTH="275" HEIGHT="750" CODETYPE="application/java"> <PARAM NAME="font" VALUE="Helvetica"> <PARAM NAME="size" VALUE="13"> <PARAM NAME="delay" VALUE="80"> <PARAM NAME="bgcolor" VALUE="#336699"> <PARAM NAME="fgcolor" VALUE="#FFFFFF"> <PARAM NAME="frameWidth" VALUE="0"> <PARAM NAME="line0" VALUE="<20><size=36>Handleiding\nHTML<fade>"> <PARAM NAME="line1" VALUE="<30><fade>Een Nederlandse handleiding,\nbij het maken van HTML-pagina's."> <PARAM NAME="line2" VALUE="<20><typed>Met de nieuwste mogelijkheden,\neen

groot aantal voorbeelden,\nde ondersteuning door browsers\nen Cascading Style Sheets."> De browser ondersteunt het OBJECT element niet, of kan het Java applet niet insluiten.</OBJECT></P> Bekijk in een nieuw venster of het Java applet wordt weergegeven. Ook bij het OBJECT element kun je het applet in een archief-bestand plaatsen: <P><OBJECT CLASSID="java:iscroll.class" CODEBASE="applet-zip/" WIDTH="480" HEIGHT="20" CODETYPE="application/java" ARCHIVE="iscroll.zip"> <PARAM NAME="Notice" VALUE="Applet by www.CodeBrain.com"> <PARAM NAME="Text" VALUE="Handleiding HTML - een onmisbare hulp op het gebied van HTML en CSS - "> <PARAM NAME="TextColor" VALUE="#FFFFFF"> <PARAM NAME="BackgroundColor" VALUE="#336699"> <PARAM NAME="VerticalBias" VALUE="0"> <PARAM NAME="FontName" VALUE="helvetica"> <PARAM NAME="FontStyle" VALUE="0"> <PARAM NAME="Speed" VALUE="25"> <PARAM NAME="Pause" VALUE="1000"> De browser ondersteunt het OBJECT element niet, of kan het Java applet niet insluiten.</OBJECT></P> Bekijk in een nieuw venster of het Java applet wordt weergegeven. Omdat Microsoft Internet Explorer de attributen CODEBASE en ARCHIVE niet ondersteund, kun je bij gebruik van het OBJECT element het applet het beste in dezelfde directory plaatsen als het HTMLdocument en geen archief-bestand gebruiken. Het in de voorbeelden gebruikte FunScroll applet is ontwikkeld door Jan Andersson, het iScroll applet door CodeBrain.com.

QuickTime filmpjes
Voor het insluiten van QuickTime filmpjes heb je de beschikking over de elementen EMBED en OBJECT. Bij beide elementen kun je gebruik maken van een zogenaamde Netscape plug-in, bij het OBJECT element daarnaast ook van een ActiveX control. Het EMBED element is niet opgenomen in HTML 4.0, het OBJECT element wel. Het insluiten van QuickTime filmpjes met behulp van het EMBED element wordt door alle gangbare browsers ondersteund, behalve door de nieuwste versies van Microsoft Internet Explorer. Omdat Microsoft Internet Explorer 5.5 Service Pack 2 en hoger geen Netscape plug-ins meer ondersteunt, moet nu een oplossing gekozen worden waarbij via het OBJECT element gebruik gemaakt wordt van de QuickTime ActiveX control (het EMBED element kan overigens wel weer gebruikt worden wanneer de QuickTime ActiveX control eenmaal genstalleerd is op het systeem van de bezoeker; als auteur ben je daarvan echter niet op de hoogte). Wat betreft het OBJECT element geldt dat de oplossing met behulp van een ActiveX control alleen ondersteund wordt door alle versies van Microsoft Internet Explorer. Voor de oplossing met de Netscape plug-in geldt het volgende: Microsoft Internet Explorer versie 4.0 t/m 5.5 ondersteunt het object correct, maar in enkele subversies alleen als het TYPE attribuut is opgenomen. Microsoft Internet Explorer 5.5 Service Pack 2 en hoger ondersteunt geen Netscape plug-ins meer. In plaats van de alternatieve inhoud van het OBJECT element, wordt echter een leeg inline frame weergegeven. Voor Internet

Explorer 5.5 Service Pack 1 geldt hetzelfde als voor versie 4.0 t/m 5.5, tenzij de Security update Q321232 van 15 mei 2002 genstalleerd is. In het laatste geval is de werking hetzelfde als bij Internet Explorer 5.5 Service Pack 2. Netscape Navigator 4 geeft het filmpje zelf goed weer, maar toont in sommige versies ook de alternatieve inhoud.. Indien geen afmetingen worden opgegeven, houdt Netscape Navigator 4 50x50 pixels aan. In Netscape Navigator 6.0 en hoger, Mozilla en Firefox is de ondersteuning correct. Indien geen afmetingen worden opgegeven, houdt Netscape Navigator 6 240x200 pixels aan, terwijl in Netscape Navigator 7.0 en hoger, Mozilla en Firefox niets zichtbaar is. Voor Opera 4 t/m 6 geldt dat meestal alleen het logo van de plug-in te zien is. Opera 7 ondersteunt het object correct.

Wanneer je er verzekerd van wilt zijn dat QuickTime filmpjes in alle browsers goed worden weergegeven, dan is er slechts n oplossing: een combinatie van de elementen OBJECT en EMBED. Ten behoeve van Microsoft Internet Explorer geef je met behulp van het OBJECT element aan dat de QuickTime ActiveX control gebruikt moet worden. Als alternatieve inhoud van het OBJECT element neem je EMBED element op, dat ervoor zorgt dat andere browsers de QuickTime plug-in kunnen gebruiken. Je moet bij deze oplossing wel voor lief nemen dat je gebruik maakt van een element, dat niet tot HTML 4.0 behoort.

Bij het OBJECT element legt het CLASSID attribuut vast dat voor de weergave van het object gebruik gemaakt moet worden van de QuickTime ActiveX control. Het CODEBASE attribuut legt vast waar het QuickTime ActiveX control gevonden kan worden. Het TYPE attribuut maakt aan de browser bekend om wat voor type object het gaat. De waarden van deze drie attributen zijn voor alle filmpjes hetzelfde. De attributen WIDTH, HEIGHT bepalen de afmetingen van het object (filmpje en bedieningspaneel). Deze attributen moet je opnemen, omdat sommige browsers anders het object niet of niet volledig weergeven. Het PARAM element gebruik je om aan te geven om welk QuickTime filmpje het gaat. <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="test.mov"> ... </OBJECT></P> Van de weergave van dit voorbeeld is een schermafdruk in Microsoft Internet Explorer gemaakt.

Bekijk in een nieuw venster of het QuickTime filmpje wordt weergegeven. Bij het EMBED element bepaalt het SRC attribuut welk filmpje ingesloten moet worden. Met de attributen WIDTH en HEIGHT worden de afmetingen van het object vastgelegd. Het TYPE attribuut maakt weer aan de browser bekend om wat voor type object het gaat. Het is belangrijk dit attribuut altijd

op te nemen, omdat sommige browsers het object alleen kunnen insluiten als het juiste type is opgegeven. <EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime"></EMBED> Bekijk in een nieuw venster het QuickTime filmpje met behulp van de QuickTime plug-in kan weergeven. Om het QuickTime filmpje door alle browsers te laten weergeven, moet je het EMBED element als alternatieve inhoud van het OBJECT element opnemen: <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="test.mov"> <EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime"></EMBED> </OBJECT></P> Bekijk in een nieuw venster of de browser het QuickTime filmpje kan weergeven. QuickTime filmpjes kunnen alleen worden weergeven als de QuickTime player genstalleerd is. Indien dat niet het geval is, wordt in Microsoft Internet Explorer gevraagd of dat alsnog moet gebeuren. Ten behoeve van browsers die gebruik maken van het EMBED element, kun je het PLUGINSPAGE attribuut opnemen om aan te geven waar de plug-in verkregen kan worden. <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="test.mov"> <EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/"></EMBED> </OBJECT></P>

Voor QuickTime filmpjes bestaan er een aantal mogelijkheden om de weergave te regelen. Voor het OBJECT element doe je dat door het opnemen van extra PARAM elementen, terwijl je aan het EMBED element een aantal plug-in specifieke attributen moet toevoegen. Voor een uitgebreid overzicht van de verschillende mogelijkheden kun je op de site van QuickTime terecht. In het volgende voorbeeld zijn enkele van deze mogelijkheden toegepast. Voor het OBJECT element is met de parameter "autoplay" vastgelegd of het filmpje al dan niet direct bij het openen van het document afgespeeld moet worden en met de parameter "volume" wat het geluidsniveau moet zijn. Om dezelfde mogelijkheden te benutten bij de alternatieve inhoud voeg je aan het EMBED element de attributen AUTOPLAY en VOLUME toe. <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="test.mov"> <PARAM NAME="autoplay" VALUE="false"> <PARAM NAME="volume" VALUE="25"> <EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOPLAY="false" VOLUME="25"></EMBED> </OBJECT></P> Bekijk het QuickTime filmpje in een nieuw venster.

Macromedia Flash animaties

Voor het insluiten van Macromedia Flash animaties heb je de beschikking over de elementen EMBED en OBJECT. Bij beide elementen kun je gebruik maken van een zogenaamde Netscape plug-in, bij het OBJECT element daarnaast ook van een ActiveX control. Het insluiten van Macromedia Flash animaties met behulp van het EMBED element wordt door alle gangbare browsers ondersteund, behalve door de nieuwste versies van Microsoft Internet Explorer. Omdat Microsoft Internet Explorer 5.5 Service Pack 2 en hoger geen Netscape plug-ins meer ondersteunt, moet nu een oplossing gekozen worden waarbij via het OBJECT element gebruik gemaakt wordt van de Macromedia Flash ActiveX control (het EMBED element kan overigens wel weer gebruikt worden wanneer de Macromedia Flash ActiveX control eenmaal genstalleerd is op het systeem van de bezoeker; hoewel de kans daarop groot is, omdat het control meestal gelijk met Microsoft Internet Explorer genstalleerd wordt, kun je er als auteur nooit zeker van zijn). Wat betreft het OBJECT element geldt dat de oplossing met behulp van een ActiveX control alleen ondersteund wordt door alle versies van Microsoft Internet Explorer. Voor de oplossing met de Netscape plug-in geldt het volgende: Microsoft Internet Explorer versie 4.0 t/m 5.5 ondersteunt het object, maar in enkele subversies alleen als het TYPE attribuut is opgenomen, terwijl soms met het TYPE attribuut de plug-in weer niet gevonden wordt. Microsoft Internet Explorer 5.5 Service Pack 2 en hoger ondersteunt geen Netscape plug-ins meer. In plaats van de alternatieve inhoud van het OBJECT element, wordt echter een leeg inline frame weergegeven. Voor Internet Explorer 5.5 Service Pack 1 geldt hetzelfde als voor versie 4.0 t/m 5.5, tenzij de Security update Q321232 van 15 mei 2002 genstalleerd is. In het laatste geval is de werking hetzelfde als bij Internet Explorer 5.5 Service Pack 2. Netscape Navigator 4 geeft de animatie zelf goed weer, maar toont in sommige versies ook de alternatieve inhoud.. Indien geen afmetingen worden opgegeven, houdt Netscape Navigator 4 50x50 pixels aan. In Netscape Navigator 6.0 en hoger, Mozilla en Firefox is de ondersteuning correct. Indien geen afmetingen worden opgegeven, houdt Netscape Navigator 6 240x200 pixels aan, terwijl in Netscape Navigator 7.0 en hoger, Mozilla en Firefox niets zichtbaar is. Opera 4.0 crasht als geprobeerd wordt een Flash object te openen, terwijl er Opera 5 en de eerste versies van Opera 6 niets wordt weergegeven. In Opera 6.05 en hoger is de ondersteuning correct.

Wanneer je er verzekerd van wilt zijn dat Macromedia Flash animaties in alle browsers goed worden weergegeven, dan is er net als bij QuickTime filmpjes slechts n oplossing: een combinatie van de elementen OBJECT en EMBED. Ten behoeve van Microsoft Internet Explorer geef je met behulp van het OBJECT element aan dat de Macromedia Flash ActiveX control gebruikt moet worden. Als alternatieve inhoud van het OBJECT element neem je EMBED element op, dat ervoor zorgt dat andere browsers de Macromedia Flash plug-in kunnen gebruiken. Voor het OBJECT element legt het CLASSID attribuut vast dat voor de weergave van het object gebruik gemaakt moet worden van de Macromedia Flash ActiveX control. Het CODEBASE attribuut legt vast waar het Macromedia Flash ActiveX control gevonden kan worden. Het TYPE attribuut maakt aan de browser bekend om wat voor type object het gaat. De waarden van deze drie attributen zijn voor alle animaties hetzelfde. De attributen WIDTH, HEIGHT bepalen de afmetingen van het object. Deze attributen moet je opnemen, omdat sommige browsers anders het object niet of niet volledig weergeven. Het PARAM element gebruik je om aan te geven om welke Flash animaties het gaat. Als alternatieve inhoud voor het OBJECT element neem je het EMBED element op. Het SRC attribuut bepaalt welke animatie ingesloten moet worden. De betekenis van de attributen WIDTH, HEIGHT en TYPE is hetzelfde als bij het OBJECT element. Het PLUGINSPAGE attribuut gebruik je om aan te geven waar de plug-in verkregen kan worden.

Voor Macromedia Flash animaties bestaan er een aantal mogelijkheden om de weergave te regelen. Voor het OBJECT element doe je dat door het opnemen van extra PARAM elementen, terwijl je aan het EMBED element een aantal plug-in specifieke attributen moet toevoegen. Voor een uitgebreid overzicht van de verschillende mogelijkheden kun je op de site van Macromedia terecht. In het volgende voorbeeld zijn enkele van deze mogelijkheden toegepast. Voor het OBJECT element is met de parameter "play" vastgelegd of de animatie al dan niet direct bij het openen van het document afgespeeld moet worden en met de parameter "loop" of de animatie continue moet blijven doorlopen. De parameter "quality" bepaalt de kwaliteit van de weergave. Om dezelfde mogelijkheden te benutten bij de alternatieve inhoud voeg je aan het EMBED element de attributen PLAY, LOOP en QUALITY toe. <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="128" HEIGHT="96" TYPE="application/x-shockwave-flash" CODEBASE="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0"> <PARAM NAME="movie" VALUE="test.swf"> <PARAM NAME="play" VALUE="true"> <PARAM NAME="loop" VALUE="true"> <PARAM NAME="quality" VALUE="high"> <EMBED SRC="test.swf" WIDTH="128" HEIGHT="96" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" PLAY="true" LOOP="true" QUALITY="high"></EMBED> </OBJECT> Vanwege de lengte is in bovenstaande voorbeeldcode de waarde van het CODEBASE attribuut onderbroken door een harde overgang naar een volgende regel. In werkelijkheid moet je dit uiteraard niet doen. Van de weergave van dit voorbeeld is een schermafdruk gemaakt.

Bekijk in een nieuw venster of de Macromedia Flash animatie wordt weergegeven.

Geluidsfragmenten
Voor het opnemen geluidsfragmenten in een HTML-document wordt tot nu toe in vrijwel alle gevallen gebruik gemaakt van het niet in HTML 4.0 opgenomen EMBED element. HTML 4.0 biedt de mogelijkheid dat ook te doen met behulp van het OBJECT element. Voor de weergave van een geluidsfragment moet de browser beschikken over de juiste plug-in of in het geval van Microsoft Internet Explorer van de juiste ActiveX control. Het insluiten van geluidsfragmenten met behulp van het EMBED element wordt door alle gangbare browsers ondersteund. Alleen de nieuwste versies van Microsoft Internet Explorer kunnen er problemen mee hebben als een plug-in (bijvoorbeeld de QuickTime Media Player) zich geassocieerd heeft met het betreffende type geluidsbestand. Dat wil vooral nogal eens het geval zijn met midi-bestanden. De oorzaak van deze problemen is dat Microsoft Internet Explorer 5.5 Service Pack 2 en hoger geen Netscape plug-ins meer ondersteund. Als alternatief kun je een oplossing kiezen, waarbij door Microsoft Internet Explorer via het OBJECT element gebruik gemaakt wordt van een ActiveX control. Ten behoeve van Opera 4 en 5 is het noodzakelijk dat je aan het EMBED element het TYPE attribuut toevoegt.

Wat betreft het OBJECT element geldt het volgende: Geluidsfragmenten die ingesloten worden via het DATA attribuut en niet geassocieerd zijn met speciale plug-in, worden in veel situaties weergegeven in een externe versie van de Windows Media Player. Indien geluidsfragmenten wel geassocieerd zijn met een plug-in worden ze in Microsoft Internet Explorer versie 4.0 t/m 5.5 meestal correct weergegeven. Microsoft Internet Explorer 5.5 Service Pack 2 en hoger ondersteunt geen Netscape plug-ins meer. In plaats van de alternatieve inhoud van het OBJECT element, wordt echter een leeg inline frame weergegeven. De ondersteuning is wel correct als gebruik gemaakt wordt van een ActiveX control. Voor Internet Explorer 5.5 Service Pack 1 geldt hetzelfde als voor versie 4.0 t/m 5.5, tenzij de Security update Q321232 van 15 mei 2002 genstalleerd is. In het laatste geval is de werking hetzelfde als bij Internet Explorer 5.5 Service Pack 2. De oplossing waarbij via het CLASSID attribuut een ActiveX control wordt gebruikt, wordt door alle versies van Microsoft Internet Explorer correct ondersteund. Netscape Navigator 4 geeft het geluidsfragment zelf goed weer, maar toont ook de alternatieve inhoud. In Netscape Navigator 6.0 en hoger, Mozilla en Firefox is de ondersteuning correct. Indien geen afmetingen worden opgegeven, houdt Netscape Navigator 4 50x50 pixels aan, in Netscape Navigator 6 is dit 240x200 pixels, terwijl in Netscape Navigator 7.0 en hoger, Mozilla en Firefox niets zichtbaar is. Voor Opera 4.0 en hoger geldt dat afhankelijk van de genstalleerde plug-in een geluidsfragment niet ondersteund wordt, de plug-in niet gevonden wordt, of dat alleen het logo van de plug-in te zien is.

Voor geluidsfragmenten is het EMBED element in veel gevallen een goede oplossing. Met name in de nieuwste versies van Microsoft Internet Explorer wordt de (correcte) weergave echter sterk benvloed door de plug-in waarmee ze al dan niet geassocieerd is. Als auteur ben je echter niet op de hoogte op de situatie op het systeem van de bezoeker. Wanneer je wilt dat geluidsfragmenten in alle browsers goed worden weergegeven, kan het daarom verstandig zijn te kiezen voor een combinatie van de elementen OBJECT en EMBED. Ten behoeve van Microsoft Internet Explorer geef je met behulp van het OBJECT element aan dat bijvoorbeeld de Windows Media Player of de QuickTime ActiveX control gebruikt moet worden. Als alternatieve inhoud van het OBJECT element neem je EMBED element op, dat ervoor zorgt dat andere browsers een plug-in kunnen gebruiken. Achtereenvolgens wordt nu ingegaan op de oplossing met een plug-in via het EMBED element, de oplossing met een ActiveX control via het OBJECT element en de combinatie. De oplossing met een plug-in via het OBJECT element blijft, gezien de beperkte en weinig correcte ondersteuning, verder buiten beschouwing.

Van het EMBED element moet altijd SRC opgenomen worden, om te specificeren welk geluidsfragment moet worden afgespeeld. In veel gevallen zijn ook de attributen WIDTH en HEIGHT noodzakelijk, om te voorkomen dat het bedieningspaneel niet of niet volledig te zien is. Neem deze attributen daarom altijd op, ook al werk je zelf met een plug-in waarvoor ze niet nodig zijn. Voor de LiveAudio plug-in zijn de noodzakelijk waarden voor de attributen WIDTH en HEIGHT respectievelijk "144" en "60". Voor de meeste andere plug-ins voldoen deze waarden ook, al is de weergave soms wat minder fraai (bijvoorbeeld bij de Windows Media Player Control). Het TYPE attribuut maakt aan de browser bekend om wat voor type object het gaat. Voor het geval de bezoeker geen geschikte plug-in heeft genstalleerd, kun je aan de browser kenbaar maken waar deze gevonden kan worden. Dat doe je door het PLUGINSPAGE attribuut aan het EMBED element toe te voegen. In dit voorbeeld wordt verwezen naar de QuickTime Player. <EMBED SRC="test.wav" WIDTH="144" HEIGHT="60" TYPE="audio/wav" PLUGINSPAGE="http://www.apple.com/quicktime/download/"></EMBED> <EMBED SRC="test.mid" WIDTH="144" HEIGHT="60" TYPE="audio/midi" PLUGINSPAGE="http://www.apple.com/quicktime/download/"></EMBED> Bekijk in een nieuw venster de weergave van geluidsfragmenten in de typen wav of midi.

Alleen door Microsoft Internet Explorer wordt de oplossing met een ActiveX control ondersteund. Het CLASSID attribuut van het OBJECT element legt vast van welk ActiveX control gebruik gemaakt moet worden. In het volgende voorbeeld is dat de Windows Media Player, maar het had ook de QuickTime Player kunnen zijn. Het CODEBASE attribuut legt vast waar het ActiveX control gevonden kan worden. De attributen WIDTH, HEIGHT bepalen de afmetingen van het object. Het is verstandig deze attributen altijd op te nemen. Het TYPE attribuut maakt aan de browser bekend om wat voor type object het gaat. Het PARAM element gebruik je om aan te geven om welke geluidsfragment het gaat. Bij de Windows Media Player ActiveX control is de naam van de parameter "filename". <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" WIDTH="300" HEIGHT="45" CODEBASE="http://activex.microsoft.com/activex/controls/ mplayer/en/nsmp2inf.cab" TYPE="application/x-oleobject"> <PARAM NAME="filename" VALUE="test.wav"> De browser ondersteunt het OBJECT element niet, of kan het geluidsfragment niet insluiten. </OBJECT> Vanwege de lengte is in bovenstaande voorbeeldcode de waarde van het CODEBASE attribuut onderbroken door een harde overgang naar een volgende regel. In werkelijkheid moet je dit uiteraard niet doen. Voor een geluidsfragment van het type "midi" is de code hetzelfde, met uitzondering uiteraard van de waarde van het VALUE attribuut element van het PARAM element. Bekijk in een nieuw venster de weergave van geluidsfragmenten in de typen wav of midi. Om tot het beste resultaat te komen in de verschillende browsers kun je de hiervoor beschreven oplossingen combineren. <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" WIDTH="300" HEIGHT="45" CODEBASE="http://activex.microsoft.com/activex/controls/ mplayer/en/nsmp2inf.cab" TYPE="application/x-oleobject"> <PARAM NAME="filename" VALUE="test.wav"> <EMBED SRC="test.wav" WIDTH="144" HEIGHT="60" TYPE="audio/wav" PLUGINSPAGE="http://www.apple.com/quicktime/download/"></EMBED> </OBJECT> Ook hier geldt dat vanwege de lengte in bovenstaande voorbeeldcode de waarde van het CODEBASE attribuut is onderbroken door een harde overgang naar een volgende regel. In werkelijkheid moet je dit niet doen. Bekijk in een nieuw venster de weergave van geluidsfragmenten in de typen wav of midi.

Voor geluidsfragmenten bestaan er verschillende mogelijkheden om de weergave te regelen. Bij het OBJECT element doe je dat door het opnemen van extra PARAM elementen, terwijl je aan het EMBED element een aantal plug-in specifieke attributen moet toevoegen. Veel gebruikte mogelijkheden zijn die om te bepalen of geluidsfragment al dan niet direct bij openen van het HTML-document afgespeeld moet worden (de verschillende plug-ins en controls gaan daar niet op uniforme wijze mee om), of dat slechts n keer of doorlopend moet gebeuren en met welk geluidsniveau. In het volgende voorbeeld is vastgelegd dat het geluidsfragment direct bij openen en daarna continue moet worden afgespeeld. Bij het OBJECT element gebruik je daarvoor de parameters "autostart" en "loop". Aan het EMBED element voeg je het LOOP attribuut toe en, omdat je niet weet welke plug-in de gebruiker heeft genstalleerd, de attributen AUTOSTART en AUTOPLAY op te nemen. <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" WIDTH="300" HEIGHT="45" CODEBASE="http://activex.microsoft.com/activex/controls/

mplayer/en/nsmp2inf.cab" TYPE="application/x-oleobject"> <PARAM NAME="filename" VALUE="test.wav"> <PARAM NAME="autostart" VALUE="true"> <PARAM NAME="loop" VALUE="true"> <EMBED SRC="test.wav" WIDTH="144" HEIGHT="60" TYPE="audio/wav" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOSTART="true" AUTOPLAY="true" LOOP="true"></EMBED> </OBJECT> Bekijk het resultaat in een nieuw venster. De hoogte van het geluidsniveau kun je niet benvloeden in de Windows Media Player ActiveX control. Wil je dat toch, dan moet je kiezen voor een andere ActiveX control. In het volgende voorbeeld is dat de QuickTime Player. Bij het OBJECT element gebruik je nu de parameter "volume" en aan het EMBED element voeg je het VOLUME attribuut toe. Het geluidsniveau geef je aan met een getal tussen "0" en "100": hoe hoger het getal, hoe harder. De standaardwaarde is "50". Wees voorzichtig met waarden boven de "50", want niet elke gebruiker zal het op prijs stellen als het geluidsfragment opeens uit de speakers knalt. <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="16" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" TYPE="audio/wav"> <PARAM NAME="src" VALUE="test.wav"> <PARAM NAME="autoplay" VALUE="false"> <PARAM NAME="volume" VALUE="25"> <EMBED SRC="test.wav" WIDTH="144" HEIGHT="60" TYPE="audio/wav" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOSTART="false" AUTOPLAY="false" VOLUME="25"></EMBED> </OBJECT> Bekijk de weergave in een nieuw venster.

Hoewel lang niet alle bezoekers er prijs op zullen stellen, kiezen webauteurs er nogal eens voor geluidsfragmenten op te nemen, welke automatisch en onzichtbaar op de achtergrond worden afgespeeld bij het openen van een HTML-document. Om het object onzichtbaar te maken zet je de waarden van de attributen WIDTH en HEIGHT van zowel het OBJECT als het EMBED element op "0". Voor het automatisch afspelen neem je voor het OBJECT element de parameter "autostart" op en voeg je aan het EMBED element de attributen AUTOSTART en AUTOPLAY toe; steeds met de waarde "true". <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" WIDTH="0" HEIGHT="0" CODEBASE="http://activex.microsoft.com/activex/controls/ mplayer/en/nsmp2inf.cab" TYPE="application/x-oleobject"> <PARAM NAME="filename" VALUE="test.mid"> <PARAM NAME="autostart" VALUE="true"> <PARAM NAME="loop" VALUE="true"> <EMBED SRC="test.mid" WIDTH="0" HEIGHT="0" TYPE="audio/midi" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOSTART="true" AUTOPLAY="true" LOOP="true"></EMBED> </OBJECT> Bekijk de weergave in een nieuw venster.

Introductie scripts

Een script is programmacode, waarmee je extra mogelijkheden aan je HTML-documenten toe kunt voegen. Bekende voorbeelden zijn het openen van nieuwe browservensters, het vervangen van meerdere frames tegelijkertijd en berichten in de statusbalk. In tegenstelling tot gewone programma's of bijvoorbeeld Java applets, is een script niet gecompileerd en moet de code direct door de browser genterpreteerd worden. Het SCRIPT element kan worden gebruikt om een script te definiren. Omdat er meerdere scripttalen bestaan (waarvan JavaScript de bekendste is), moet je de attributen TYPE en LANGUAGE opnemen, om aan de browser kenbaar te maken om welke taal het gaat. Vaak zul je een script direct binnen een document opnemen, maar het is ook mogelijk het in een extern scriptdocument te plaatsen. In dat laatste geval gebruik je het SRC attribuut om aan te geven om welk scriptdocument het gaat. Wanneer je extra informatie aan het script wilt toevoegen, kun je dat doen in de vorm van commentaar. Niet elke browser ondersteunt scripts en niet elke bezoeker heeft de ondersteuning voor scripts ingeschakeld. Als je aan de bezoeker kenbaar maken wat hij/zij mist, neem je met het NOSCRIPT element een no-script sectie op. Bovendien is het verstandig de scriptcode voor deze browsers te verbergen. Scripts kunnen automatisch uitgevoerd worden als de browser ze tegenkomt in het document, maar ook als reactie op een door de gebruiker veroorzaakte gebeurtenis. Bijvoorbeeld het openen of sluiten van een document, het klikken op een hyperlink en muisbewegingen. Je kunt van deze mogelijkheid gebruik maken, door attributen aan elementen toe te voegen, welke reageren op die gebeurtenissen. Hoewel het programmeren van scripts buiten het bestek van de Handleiding HTML valt, zijn hier toch enkele voorbeelden opgenomen. Daarnaast kunnen in het onderdeel JavaScript voorbeelden enkele veel gevraagde toepassingen bekeken worden.

Script binnen document

Het SCRIPT element kun je gebruiken als je een script in het document wilt opnemen, dat door de browser uitgevoerd moet worden. Om aan de browser bekend te maken om welke scripttaal het gaat, bijvoorbeeld JavaScript of VBscript (Visual Basic), moet aan het SCRIPT element minimaal het TYPE attribuut worden toegevoegd. Met dit TYPE attribuut specificeer je het zogenoemde Internet Media (MIME) type van de scripttaal. Voor JavaScript is het MIME type "text/javascript", voor VBScript "text/vbscript". Omdat lang niet alle gangbare browsers het in HTML 4.0 gentroduceerde TYPE attribuut reeds ondersteunen, moet je voorlopig in ieder geval ook het LANGUAGE attribuut opnemen. Als waarden voor het LANGUAGE attribuut kunnen bijvoorbeeld "JavaScript" of "VBScript" gebruikt worden. Netscape Navigator 3 en 4 ondersteunen daarnaast de waarde "JavaScript1.1" en Netscape Navigator 4 bovendien de waarde "JavaScript1.2". Met het gebruik van deze laatste waarden moet voorzichtig omgegaan worden, omdat een browser die de waarde niet kent, het script negeert. Zo voeren Microsoft Internet Explorer 3 en Netscape Navigator 2 het script echter niet uit als de waarden JavaScript1.1 of JavaScript1.2 gebruikt zijn en doet Netscape Navigator 3 dit niet als de waarde JavaScript1.2 gebruikt is. Het SCRIPT element mag meerdere malen in het document voorkomen. Meestal plaats je het in de head, maar soms is het nodig het in de body op te nemen. Het volgende voorbeeld betreft een JavaScript in de body van het document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> document.write("<P STYLE=\"color:red; background-color: white; font-size: 16px;\">Deze browser ondersteunt JavaScript.<\/P>"); </SCRIPT>

De backslash in <\/P> is een zogenaamd escape teken, dat moet worden toegevoegd, omdat de inhoud van het SCRIPT element als beindigd wordt beschouwd na de eerste keer dat de tekens "</" voorkomt. Omdat de tekenreeks van de document.write methode geplaatst is tussen dubbele aanhalingstekens, kunnen deze niet gelijktijdig binnen de tekenreeks zelf gebruikt worden. Daarom is ook voor de aanhalingstekens bij het STYLE attribuut van het P element het escape teken geplaatst. De tekst ingesloten door de haakjes van de document.write methode mag in het document niet onderbroken worden door een harde overgang naar de volgende regel. Op de plaats waar het script in het document staat, geeft een browser die JavaScript ondersteunt het volgende weer:

Deze browser ondersteunt JavaScript.

Verbergen inhoud script

Om te voorkomen dat browsers die het SCRIPT element niet ondersteunen de inhoud ervan (de scriptcode) weergeven als tekst, wordt deze meestal tussen de HTML-code voor commentaar (<!-- -->) geplaatst. De beindiging van het commentaar moet je bij JavaScript door twee slashes (//) en bij VBScript door een enkele quote (') vooraf laten gaan, zodat deze vervolgens binnen het script weer als commentaar wordt gezien (zie bij Commentaar in script). Voor JavaScript wordt de opbouw als volgt: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-... script-code ... //--> </SCRIPT> Voor VBScript is de opbouw de volgende: <SCRIPT TYPE="text/vbscript" LANGUAGE="VBScript"> <!-... script-code ... '--> </SCRIPT>

Commentaar in script
Soms wil je binnen het SCRIPT element commentaar opnemen, bijvoorbeeld om het copyright vermelden, of om de code toe te lichten. Hoe je dat doet, hangt af van de gebruikte scripttaal. Bij JavaScript heb je de volgende mogelijkheden: wanneer je de inhoud van het script hebt verborgen voor browsers die het SCRIPT element niet ondersteunen, kun je direct na de tekens "<!--" commentaar over n regel plaatsen; wanneer je het commentaar elders in het script wilt plaatsen en het op de huidige regel past, plaats je voor het commentaar twee slashes (//); als het commentaar niet op de huidige regel past, kun je van deze mogelijkheid alleen gebruik maken, als je het commentaar in kleinere delen splitst; wanneer het commentaar doorloopt over meerdere regels, laat je het vooraf gaan door een slash gevolgd door een asterisk (/*) en eindigen met een asterisk gevolgd door een slash (*/).

In het volgende voorbeeld zijn voor JavaScript de verschillende mogelijkheden te zien:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- Begin verbergen voor oudere browsers // Dit is commentaar dat op n regel past /* Dit commentaar beslaat meerdere regels */ ... // Einde verbergen voor oudere browsers --> </SCRIPT> In VBScript laat je commentaar per regel voorafgaan door een enkele quote (').

Extern scriptdocument
Netscape Navigator vanaf versie 3.0, Microsoft Internet Explorer vanaf versie 3.0 en Opera vanaf versie 3.0 ondersteunen de mogelijkheid om een extern scriptdocument te gebruiken. Om aan te geven om welk scriptdocument het gaat, voeg je het SRC attribuut aan het SCRIPT element toe. Bijvoorbeeld: <SCRIPT SRC="voorbeeld.js" TYPE="text/javascript" LANGUAGE="JavaScript"></SCRIPT> Het externe scriptdocument bevat uitsluitend de code van het script (dus geen <SCRIPT> </SCRIPT>). Omdat Internet Explorer 3 crasht op externe scripts die proberen in het document te schrijven (via document.write), is aangegeven dat het script in het voorbeeld in deze browser niet uitgevoerd moet worden. if (navigator.userAgent.indexOf("MSIE 3") == -1) { document.write("<P STYLE=\"color:red; background-color: white; font-size: 16px;\">Dit is een voorbeeld van het gebruik van een extern scriptdocument.<\/P>"); } Op de plaats waar het script in het document staat, geeft een browser die externe scripts ondersteunt het volgende weer:

Dit is een voorbeeld van het gebruik van een extern scriptdocument.

Script niet ondersteund

Niet elke browser ondersteunt het gebruik van scripts. Die ondersteuning wordt wel geboden door Netscape Navigator vanaf versie 2.0, Microsoft Internet Explorer vanaf versie 3.0 en Opera vanaf versie 3.0, maar ook dan nog kunnen bezoekers van je pagina's de ondersteuning uitgezet hebben. Dat betekent dat sommige bezoekers van je pagina's een deel van de inhoud niet zien, of van verschillende mogelijkheden geen gebruik kunnen maken. Je kunt ze daarop wijzen door in de body van het document het NOSCRIPT element op te nemen. <NOSCRIPT>Uw browser ondersteunt het gebruik van scripts niet ...</NOSCRIPT> De tekst, die je plaatst tussen de activering en de beindiging van het NOSCRIPT element, wordt niet weergegeven door Netscape Navigator 3.0 en hoger, Microsoft Internet Explorer 3.0 en hoger en Opera 3.0 en hoger. Browsers die het gebruik van scripts niet ondersteunen, geven de inhoud van het

NOSCRIPT element wel weer. Houd er rekening mee dat Netscape Navigator 2.0 wel JavaScript, maar niet het NOSCRIPT element ondersteunt en de inhoud dus ook weergeeft.

Scripts en gebeurtenissen
De eerder gegeven voorbeelden betreffen scripts welke door de browser uitgevoerd worden, als deze de code tegenkomt in het document. Je kunt echter ook scripts opnemen, welke pas uitgevoerd worden, wanneer zich een bepaalde door de gebruiker veroorzaakte gebeurtenis (event) voordoet. Een voorbeeld van zo'n gebeurtenis is het klikken met de muis op een element: de click gebeurtenis. Andere voorbeelden zijn het schuiven van de muis op een element en er weer vanaf: de gebeurtenissen mouseover en mouseout. De koppeling van een gebeurtenis aan een element vindt plaats met een event handler: een attribuut, dat de naam draagt van de gebeurtenis, voorafgegaan door "on". De click gebeurtenis bijvoorbeeld kent als event handler onclick. Een overzicht van de verschillende event handlers is opgenomen in het onderdeel Gebeurtenisattributen. De waarde van het gebeurtenis-attribuut betreft script-code, welke verwerkt moet worden als de event handler de bijbehorende gebeurtenis opmerkt. De activering van een element met een event handler heeft de volgende opbouw: <Element ongebeurtenis="script-code"> Als script-code wordt soms het complete script opgenomen. Vaak echter gaat het bij de script-code alleen om de naam van een functie, al dan niet voorzien van argumenten, en wordt de functie zelf in een apart script beschreven: <Element ongebeurtenis="functie_naam(argumenten)"> In het volgende voorbeeld is het onclick attribuut opgenomen voor het A element, met als waarde een compleet JavaScript om een nieuw venster te openen. Als je met de muis op de hyperlink klikt, treedt de click gebeurtenis op en wordt het script uitgevoerd. <A HREF="script-vb.html" TARGET="voorbeeld" onclick="window.open('scriptvb.html', 'voorbeeld', 'width=280,height=240');return false;">Klik op deze hyperlink</A> Klik op deze hyperlink Aan een A element wordt nu het onmouseover attribuut toegevoegd, met als waarde niet het complete script, maar een functie met als argument een bericht. Als je de muis op de hyperlink schuift, treedt de mouseover gebeurtenis op en wordt de functie BeweegMuisOp geactiveerd. Deze functie zorgt ervoor dat het bericht in de statusbalk verschijnt. <A HREF="js/js-begin" onmouseover="BeweegMuisOp('Volg ... voorbeelden');return true;">Beweeg de muis op de link</A> Beweeg de muis op de link en bekijk het resultaat in de statusbalk. Het script in de head van dit document waarin de functie BeweegMuisOp is gedefinieerd, heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function BeweegMuisOp(txt) { window.status = txt; setTimeout("erase()",3000); } function erase() { window.status=""; } //--> </SCRIPT> Aan een element kun je meerdere gebeurtenissen koppelen. Als voorbeeld is dat gedaan met de hiervoor gebruikte gebeurtenissen click en mouseover: <A HREF="script-vb.html" TARGET="voorbeeld" onclick="window.open('scriptvb.html', 'voorbeeld', 'width=280,height=240');return false;" onmouseover="BeweegMuisOp('Bekijk ... venster');return true;">Klik op deze hyperlink</A> Klik op deze hyperlink Aan een gebeurtenis kun je meerdere acties koppelen. In het volgende voorbeeld van de load gebeurtenis, welke optreedt als een document geopend wordt, worden twee functies geactiveerd. De eerste zorgt ervoor dat er een bericht in de statusbalk wordt weergegeven, de tweede dat gelijktijdig een document in een ander frame geopend wordt. <BODY onload="StatusbalkTekst('Copyright 1995-2006 Hans de Jong.');UpdateNavigatieFrame();"> </BODY> Wanneer je een compleet script als waarde van een gebeurtenis-attribuut opneemt, moet je het META element met de attributen HTTP-EQUIV en CONTENT gebruiken, om aan de browser kenbaar te maken om welke scripttaal het gaat. Je doet dat door bijvoorbeeld de volgende regel in de head van het document te plaatsen: <META HTTP-EQUIV="content-script-type" CONTENT="text/javascript">

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Introductie stylesheets
HTML is in 1990 ontwikkeld om hypertext documenten te maken, welke op verschillende platforms toegankelijk zijn. Het doel was het op een goede manier ontsluiten van informatie. Bij de weergave van de documenten ging het niet om het bieden van een mooie, door de auteur geheel vastgelegde lay-out. Wel zouden de verschillende elementen waaruit HTML is opgebouwd, structuur aan een document moeten geven. Bijvoorbeeld door vast te leggen dat het bij blokken tekst gaat om koppen van verschillend gewicht, om paragrafen, geciteerde tekst en adresgegevens. Of door (met de elementen voor logische tekstopmaak) te bepalen dat tekst met nadruk wordt weergeven (cursief of vet), of als computercode.

In de wetenschappelijke wereld, waarin HTML in eerste instantie vooral werd gebruikt, voldeed de genoemde wijze van presenteren uitstekend. Met de toegenomen verbreding in het gebruik van Internet ontstond bij webauteurs echter de behoefte aan meer mogelijkheden bij de opmaak van documenten. Op deze behoefte is door de ontwikkelaars van browsers (vooral Netscape en Microsoft) ingespeeld door het introduceren van nieuwe elementen en attributen. Bijvoorbeeld de later in HTML opgenomen elementen CENTER en FONT en attributen als SIZE, COLOR, BGCOLOR, FACE en ALIGN, maar ook de browser-specifieke elementen als BLINK, MULTICOL, SPACER en MARQUEE. Webauteurs zelf gebruikten hun creativiteit om met bestaande HTML-elementen meer invloed op de opmaak van hun documenten te krijgen. Voorbeelden zijn: het gebruik van het BLOCKQUOTE element om tekst te laten inspringen het opnemen van transparante "gifjes" om de witruimte te controleren het gebruik van afbeeldingen om tekst op een bepaalde manier weer te geven (in een specifiek lettertype, of in een grootte welke met HTML niet bereikt kan worden) het toepassen van tabellen om tekst en andere inhoud van een document in een vaste lay-out te krijgen (zoals ingesprongen of in kolommen).

De verstrengeling van structuur en presentatie kent niet alleen voordelen. Zeker de browser-specifieke elementen en attributen, maar ook het gebruik van de andere mogelijkheden voor de presentatie hebben vaak tot de gevolg dat een document niet meer in elke browser en op elk platform goed te bekijken is. Als oplossing voor deze problemen zijn stijlen gentroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet zoals oorspronkelijk bedoeld weer zorgen voor de structuur van het document, de presentatie wordt bepaald met behulp van stijlen. Daarbij is het idee dat stijlen niet alleen gebruikt worden als vervanging van huidige opmaakmogelijkheden, maar veel meer gaan bieden. Dat moet dan bovendien op een flexibele en makkelijk beheersbare manier. Stijlen worden gedefinieerd met behulp van speciale talen. De enige taal die door de meest gebruikte actuele browsers ondersteund wordt, is Cascading Style Sheets (CSS). De stijlen die je met CSS kunt definiren, hebben onder andere betrekking op het lettertype en de lettergrootte, de kleur van de tekst en de achtergrond, de horizontale en verticale uitlijning, het inspringen van tekst, de vormgeving van lijsten en tabellen en de plaats van elementen in het venster van de browser. Een uitgebreide beschrijving van de mogelijkheden is te vinden in het CSS-gedeelte van de Handleiding HTML. In dit onderdeel komt vooral aan de orde op welke wijze je stijlen met HTML kunt verbinden. Achtereenvolgens komen aan de orde inline stijlen, het stijlblok en het extern stijlblad. Daarna wordt het gebruik van de attributen CLASS en ID en de elementen DIV en SPAN toegelicht. Tenslotte wordt ingegaan op het gebruik van alternatieve stijlbladen.

Stijlen verbinden met HTML

Stijlen kunnen op verschillende manieren aan de elementen in een HTML-document gekoppeld worden: wanneer een stijl slechts een enkele keer gebruikt wordt in een document, dan kan door het toevoegen van het STYLE attribuut aan een element, een inline stijl worden vastgelegd wanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar slechts binnen n document, dan kunnen de stijlregels met het STYLE element in een ingesloten stijlblok in de head van het document geplaatst worden. Dit maakt het voor de auteur een stuk eenvoudiger wijzigingen aan te brengen in een eenmaal vastgelegde stijl, of nieuwe stijlen te definiren. In plaats van elke keer dat een element in een document gebruikt wordt een inline stijl te moeten wijzigen of toevoegen, hoeft de aanpassing slechts n keer in het stijlblok te worden aangebracht wanneer in meerdere documenten voor n of meer elementen dezelfde stijlregels toegepast moeten worden, dan kunnen deze het beste in een apart document worden opgenomen: een extern stijlblad. In de HTML-documenten volstaat het met behulp van het LINK element een eenvoudige verwijzing naar het stijlblad te maken. Wanneer de auteur iets aan een gebruikte

stijl wil wijzigen, hoeft de wijziging niet in elk document afzonderlijk, maar slechts op n plaats in het stijlblad te worden aangebracht. In een stijlblok of stijlblad kunnen naast stijlen voor bepaalde elementen ook stijlen gedefinieerd worden, welke alleen in specifieke situaties toegepast moeten worden. Het koppelen van zo'n stijl aan een element in het HTML-document vindt plaats via de attributen CLASS en ID van dat element. Niet altijd heeft een stijl betrekking op een element. Soms geldt een stijl voor een groter deel van een document, soms juist voor een kleiner deel. In dat geval kan gebruik gemaakt worden van respectievelijk de elementen DIV en SPAN.

Inline stijlen
Wanneer een stijl slechts een enkele keer in een document wordt toegepast, kun je gebruik maken van een inline stijl. Je doet dat door het STYLE attribuut toe te voegen aan het element, waarvan je de opmaak van de ingesloten inhoud wilt bepalen. Als waarde van het STYLE attribuut neem je de stijldeclaratie op, waarin de gewenste stijl is vastgelegd: <Element STYLE="stijldeclaratie"> In het volgende voorbeeld wordt met een inline stijl vastgelegd, dat de tekst ingesloten door het betreffende H1 element in rood moet worden weergegeven. <H1 STYLE="color: red; background-color: white;"> </H1>

Wanneer in een document gebruik gemaakt wordt van inline stijlen, dan moet aangegeven worden welke style sheet taal gebruikt wordt. Dat doe je door het META element in de head van het document te plaatsen met de attributen HTTP-EQUIV en CONTENT. Voor Cascading Style Sheets neem de volgende code op: <META HTTP-EQUIV="content-style-type" CONTENT="text/css">

Stijlblok
Stijlen welke slechts op n document betrekking hebben, kunnen worden opgenomen in een stijlblok, dat geplaatst wordt in de head van dat document. Hiervoor wordt gebruik gemaakt van het STYLE element. Aan het STYLE element wordt minimaal het TYPE attribuut toegevoegd, dat het Internet Media (MIME) type definieert van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css". Het STYLE element mag een onbeperkt aantal malen opgenomen worden in een document. Een stijlblok heeft de volgende opbouw: <HEAD> <STYLE TYPE="text/css"> stijlregels </STYLE> ... </HEAD> Een browser die het STYLE element niet kent, zou de inhoud moeten negeren. Zeker bij oudere browsers is dat niet het geval en bestaat de kans dat de stijlregels als normale tekst worden weergegeven. Om dat te voorkomen, kunnen bij Cascading Style Sheets de stijlregels binnen de code voor commentaar geplaatst worden.

<STYLE TYPE="text/css"> <!-stijlregels --> </STYLE>

De stijlregels in het stijlblok zijn bij Cascading Style Sheets opgebouwd volgens het selectormechanisme, dat beschreven wordt in het onderdeel Selectors. De selector bepaalt op welk deel van een document de stijl betrekking heeft. Dat kan een element zijn, maar bijvoorbeeld ook een specifiek voorkomen van een element. In het laatste geval kan de stijl aan een element gekoppeld worden via onder meer de attributen CLASS en ID. Een toelichting op het gebruik van deze attributen wordt gegeven in het onderdeel CLASS en ID. In het volgende voorbeeld bevat een stijlblok bevat een viertal stijlregels. In de eerste twee stijlregels is een element de selector (we spreken dan over een element-selector). In de derde stijlregel wordt gebruik gemaakt van een class-naam als selector (een CLASS-selector) en in de laatste regel is een idwaarde de selector (een ID-selector). <STYLE TYPE="text/css"> <!-BODY { font-family: Arial, Helvetica, sans-serif; color: #000000; background-color: #FFFFFF; } H1 { color: #FFFFFF; background-color: #336699; } .code { font-family: "Courier New", Courier, monospace; font-size: larger; } #xyz987 { color: #FF0000; background-color: #FFFFFF; } --> </STYLE>

Aan het STYLE element kan het MEDIA attribuut worden toegevoegd, om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. Als waarden (media beschrijvers) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm), "print" (voor de weergave in pagina-opmaak bij het afdrukken of als printpreview) en "aural" (voor de weergave door een spraaksynthesizer). Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. De standaardwaarde van het MEDIA attribuut is "screen". Dat betekent dat de browser bij het ontbreken van het MEDIA attribuut de stijlen alleen op het scherm moet weergeven. De praktijk is echter dat de meeste browsers de stijlen in dat geval ook weergeven bij het afdrukken (alleen Opera met versienummer 6 en lager doet dit niet). In het volgende voorbeeld zijn in de head van een document twee stijlblokken geplaatst. Voor het eerste stijlblok is het MEDIA attribuut niet opgenomen en dat moet dus gebruikt worden bij de weergave op het scherm. Voor het tweede stijlblok geldt MEDIA="print" en dat moet toegepast worden bij het afdrukken van het document. <STYLE TYPE="text/css"> <!-P { font-style: italic; font-family: serif; } --> </STYLE> <STYLE TYPE="text/css" MEDIA="print"> <!-P { font-style: normal; font-family: sans-serif; } --> </STYLE>

Bekijk in een nieuw venster of de browser het MEDIA attribuut ondersteunt. Wanneer een stijlblok op meerdere apparaten betrekking heeft, dan worden meerdere waarden voor het MEDIA attribuut opgenomen, gescheiden door een komma. <STYLE TYPE="text/css" MEDIA="screen, print"> <!-P { font-family: sans-serif; } --> </STYLE> Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde, worden de in het stijlblok opgenomen stijlen door Netscape Navigator 4 genegeerd.

Cascading Style Sheets biedt de mogelijkheid om met behulp van de @import-regel een extern stijlblad in een stijlblok te importeren. Deze mogelijkheid is daarmee een alternatief voor de constructie waarbij het LINK element een extern stijlblad met een HTML-document verbindt. Het volgende voorbeeld laat de @import-regel zien voor het importeren van een stijlblad dat de naam "basis.css" heeft en zich in een subdirectory met de naam "stijl" bevindt: @import url("stijl/basis.css"); Een stijlblok mag meerdere @import-regels bevatten en daarnaast ook gewone stijlregels. De @importregels moeten echter altijd vr de gewone stijlregels geplaatst worden. Een @import-regel die na een gewone stijlregel is geplaatst, moet door de browser genegeerd worden. Een stijlblok met een @import-regel en een gewone stijlregel ziet er bijvoorbeeld als volgt uit: <STYLE TYPE="text/css"> <!-@import url("stijl/basis.css"); H1 {color: #FFFFFF; background-color: #336699; } --> </STYLE> Gewone stijlregels hebben (als ze betrekking hebben op hetzelfde element) prioriteit boven de stijlregels uit een gemporteerde stijlblad. Indien meerdere stijlbladen gemporteerd worden en in meerdere van deze stijlbladen stijlen betrekking hebben op hetzelfde element, dan wordt de stijl uit het laatste gemporteerde stijlblad aangehouden. Een uitgebreide toelichting over de @import-regel en informatie over de ondersteuning door browsers wordt gegeven in het CSS-gedeelte van deze handleiding. De @import-regel wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4. Het importeren van een extern stijlblad met de @import-regel biedt daarmee een mogelijkheid om de stijlen voor de genoemde browsers te verbergen en op die manier de vele fouten in de weergave van Cascading Style Sheets te voorkomen. Microsoft Internet Explorer t/m versie 5.5 en Opera t/m versie 7.0 negeren het MEDIA attribuut van het STYLE element voor een @import-regel. De stijlen uit een gemporteerd stijlblad worden door deze browsers voor alle apparaten weergegeven. Voor gewone stijlregels in hetzelfde stijlblok wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

Extern stijlblad
Een extern stijlblad is een document, waarin stijlen zijn beschreven waarvan in n of meer HTMLdocumenten gebruik gemaakt kan worden. De verwijzing vanuit een HTML-document naar een stijlblad gebeurt met behulp van het LINK element, dat wordt opgenomen in de head van het document. Aan het LINK element worden in ieder geval de attributen HREF, REL en TYPE toegevoegd. Het HREF attribuut specificeert welk stijlblad geopend moet worden. Bij Cascading Style Sheets gaat het om een bestand, waarvan de bestandsnaam de extensie "css" heeft. Het REL attribuut geeft aan dat het bij het gerelateerde bestand gaat om een stylesheet en heeft dan ook als waarde "stylesheet". Het TYPE attribuut definieert het Internet Media (MIME) type van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css". Het LINK element mag een onbeperkt aantal malen opgenomen worden in een document. In het volgende voorbeeld wordt een extern stijlblad aan een HTML-document gekoppeld. Het stijlblad heeft de naam "basis.css" en bevindt zich in een subdirectory met de naam "stijl". <HEAD> <LINK HREF="stijl/basis.css" REL="stylesheet" TYPE="text/css"> ... </HEAD>

Een stijlblad bevat geen HTML-code, maar uitsluitend stijlregels. Bij Cascading Style Sheets zijn deze stijlregels opgebouwd volgens het selector-mechanisme, dat beschreven wordt in het onderdeel Selectors. De selector bepaalt op welk deel van een document de stijl betrekking heeft. Dat kan een element zijn, maar bijvoorbeeld ook een specifiek voorkomen van een element. In het laatste geval kan de stijl aan een element gekoppeld worden via onder meer de attributen CLASS en ID. Een toelichting op het gebruik van deze attributen wordt gegeven in het onderdeel CLASS en ID. Het volgende voorbeeld van een stijlblad bevat een viertal stijlregels. In de eerste twee stijlregels is een element de selector (we spreken dan over een element-selector). In de derde stijlregel wordt gebruik gemaakt van een class-naam als selector (een CLASS-selector) en in de laatste regel is een id-waarde de selector (een ID-selector). BODY H1 .code #xyz987 { font-family: Arial, Helvetica, sans-serif; color: #000000; background-color: #FFFFFF; } { color: #FFFFFF; background-color: #336699; } { font-family: "Courier New", Courier, monospace; font-size: larger; } { color: #FF0000; background-color: #FFFFFF; }

Het MEDIA attribuut kan aan het LINK element toegevoegd worden, om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. Als waarden (media beschrijvers) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm), "print" (voor de weergave in pagina-opmaak bij het afdrukken of als printpreview) en "aural" (voor de weergave door een spraaksynthesizer). Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. De standaardwaarde van het MEDIA attribuut is "screen". Dat betekent dat de browser bij het ontbreken van het MEDIA attribuut de stijlen alleen op het scherm moet weergeven. De praktijk is echter dat de meeste browsers de stijlen in dat geval ook weergeven bij het afdrukken (alleen Opera met versienummer 6 en lager doet dit niet). In het volgende voorbeeld worden de stijlregels in het stijlblad alleen toegepast bij het afdrukken: <LINK HREF="stijl/afdrukken.css" REL="stylesheet" TYPE="text/css" MEDIA="print">

Wanneer je verschillende stijlbladen hebt voor bijvoorbeeld weergave op het scherm en afdrukken, dan neem je het LINK element eenvoudig meerdere keren op. <LINK HREF="stijl/scherm.css" REL="stylesheet" TYPE="text/css" MEDIA="screen"> <LINK HREF="stijl/afdrukken.css" REL="stylesheet" TYPE="text/css" MEDIA="print"> Wanneer een stijlblad op meerdere apparaten betrekking heeft, dan neem je meerdere waarden voor het MEDIA attribuut op, gescheiden door een komma. <LINK HREF="stijl/basis.css" REL="stylesheet" TYPE="text/css" MEDIA="screen, print"> Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde, worden de in het stijlblad opgenomen stijlen door Netscape Navigator 4 genegeerd.

Cascading Style Sheets biedt de mogelijkheid om in een stijlblad met behulp van de @import-regel een ander extern stijlblad te importeren. Het volgende voorbeeld laat de @import-regel zien voor het importeren van een stijlblad dat de naam "formulier.css" heeft en zich in een subdirectory met de naam "stijl" bevindt: @import url("stijl/formulier.css"); Een stijlblad mag meerdere @import-regels bevatten en daarnaast ook gewone stijlregels. De @importregels moeten echter altijd vr de gewone stijlregels geplaatst worden. Een @import-regel die na een gewone stijlregel is geplaatst, moet door de browser genegeerd worden. Een stijlblad met een @import-regel en een gewone stijlregel ziet er bijvoorbeeld als volgt uit @import url("stijl/formulier.css"); H1 {color: #FFFFFF; background-color: #336699; } Gewone stijlregels hebben (als ze betrekking hebben op hetzelfde element) prioriteit boven de stijlregels uit een gemporteerde stijlblad. Indien meerdere stijlbladen gemporteerd worden en in meerdere van deze stijlbladen stijlen betrekking hebben op hetzelfde element, dan wordt de stijl uit het laatste gemporteerde stijlblad aangehouden. Een uitgebreide toelichting over de @import-regel en informatie over de ondersteuning door browsers wordt gegeven in het CSS-gedeelte van deze handleiding. Microsoft Internet Explorer t/m versie 5.5 en Opera t/m versie 7.0 negeren het MEDIA attribuut van het LINK element voor een @import-regel. De stijlen uit een gemporteerd stijlblad worden door deze browsers voor alle apparaten weergegeven. Voor gewone stijlregels in hetzelfde stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

CLASS en ID
Met behulp van de attributen CLASS en ID kunnen aan bijna elk element in een document stijlen worden toegevoegd, welke met behulp van een CLASS-selector of ID-selector zijn opgenomen in een extern stijlblad of een ingesloten stijlblok.

Het CLASS attribuut wordt toegepast, wanneer een element niet elke keer in dezelfde stijl moet worden uitgevoerd (en dus geen stijl voor het element gedefinieerd kan worden), of als dezelfde stijl voor verschillende elementen gebruikt moet kunnen worden. Het ID attribuut kan alleen toegepast worden indien de waarde ervan slechts n keer in een document wordt gebruikt. Het verbinden van de stijl met een element gebeurt bij gebruik van het CLASS attribuut via een classnaam en in het geval van het ID attribuut via een id-waarde: <Element CLASS="class-naam"> <Element ID="id-waarde"> De stijlregels in een stijlblad of een stijlblok voor een class-naam en een id-waarde hebben de volgende opbouw: .class-naam { stijldeclaratie } #id-waarde { stijldeclaratie }

In het volgende voorbeeld zijn in een stijlblok stijlregels opgenomen voor de class-naam "speciaal" en de id-waarde "xyz987": <STYLE TYPE="text/css"> <!-.speciaal { color: red; background-color: white; } #xyz987 { color: blue; background-color: white; } --> </STYLE> Van elk element, waaraan het CLASS attribuut met de class-naam "speciaal" is toegevoegd, is de kleur van de tekst rood: <H1 CLASS="speciaal"> of <B CLASS="speciaal"> </B> </H1>

Van het enkele voorkomen van het element, waaraan het ID attribuut met de id-waarde "xyz987" is toegevoegd, is de kleur van de tekst blauw: <P ID="xyz987"> </P>

Zie voor meer informatie over de opbouw van CLASS-selectors en ID-selectors het onderdeel Selectors.

DIV en SPAN
De elementen DIV en SPAN kunnen gebruikt worden, wanneer een stijl voor een deel van een document moet worden vastgelegd en dat deel niet tevens door een ander element ingesloten wordt. Het DIV element is een element op blokniveau, dat weer andere elementen op blokniveau mag bevatten. Het wordt vaak gebruikt om een stijl voor een groter deel van een document vast te leggen. Het SPAN element mag alleen inline inhoud en inline elementen bevatten en zal daardoor in het algemeen betrekking hebben op een beperkt deel van een document.

Voor het toevoegen van een stijl aan de elementen DIV en SPAN kan gebruik gemaakt worden van de attributen STYLE, CLASS en ID. In het volgende voorbeeld wordt voor het DIV element een inline stijl gedefinieerd met behulp van het STYLE attribuut. <DIV STYLE="color: red; background-color: white;"> <H2>Dit is H2</H2> <P>Deze tekst is ingesloten door het P element.</P> </DIV> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Voor een deel van de door het P element ingesloten tekst wordt nu een inline stijl gedefinieerd door het STYLE attribuut toe te voegen aan het SPAN element. <DIV STYLE="color: red; background-color: white;"> <H2>Dit is H2</H2> <P>Deze <SPAN STYLE="color: blue; background-color: white;">tekst</SPAN> is ingesloten door het P element.</P> </DIV> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Alternatieve stijlbladen
In de eerder gegeven voorbeelden voor het koppelen van externe stijlbladen aan een document is het TITLE element niet aan het LINK element toegevoegd: <LINK HREF="basis.css" REL="stylesheet" TYPE="text/css"> Naast of in plaats van deze "vaste" stijlbladen (welke in alle gevallen door de browser gebruikt moeten worden) biedt HTML 4.0 de mogelijkheid alternatieve stijlbladen te specificeren. Bijvoorbeeld een stijlblad voor normaal gebruik en een stijlblad met grotere letters voor mensen met een verminderd gezichtsvermogen. Deze alternatieven zouden door de browser aan de gebruiker gepresenteerd moeten worden, waarna deze een keuze kan maken.

Een alternatief stijlblad wordt gedefinieerd door voor het REL attribuut van het LINK element de waarde "alternate stylesheet" op te nemen. Het TITLE element wordt gebruikt om een alternatief stijlblad een naam te geven. Deze naam kan de browser gebruiken bij de presentatie van de alternatieven. <LINK HREF="standaard.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Standaard weergave"> <LINK HREF="groot.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Grote letters"> Een alternatief kan uit meerdere stijlbladen bestaan. Via het TITLE attribuut krijgen deze stijlbladen dezelfde naam. Als het alternatief gekozen wordt, moet de browser alle erbij behorende stijlbladen gelijktijdig gebruiken. Door voor n van de alternatieven als waarde voor het REL attribuut niet "alternate stylesheet" maar gewoon "stylesheet" op te nemen, wordt dat alternatief als voorkeur aangewezen. Deze voorkeur wordt aangehouden indien de gebruiker geen keuze maakt uit de verschillende alternatieven. Het TITLE attribuut moet in dit geval wel gebruikt worden, omdat het stijlblad anders niet als alternatief, maar als "vast" stijlblad gezien wordt. <LINK HREF="standaard.css" REL="stylesheet" TYPE="text/css" TITLE="Standaard weergave"> Ook het META element kan gebruikt worden om aan te geven dat een stijlblad de voorkeur heeft. Als waarde voor het CONTENT attribuut wordt dan de naam van het stijlblad opgenomen: <META HTTP-EQUIV="default-style" CONTENT="Standaard weergave"> Wanneer zowel het LINK element als het META element gebruikt zijn om te definiren welk stijlblad de voorkeur heeft, dan gaat dat via het META element voor. Indien het META element meerdere keren is opgenomen en daarbij voor verschillende stijlbladen is aangegeven dat ze de voorkeur hebben, dan wordt het stijlblad gebruikt dat als laatste in de head van het document staat. Indien twee of meer LINK elementen stijlbladen met voorkeur definiren, dan heeft het stijlblad dat als eerste in de head van het document staat voorrang. De verschillende soorten stijlbladen mogen ook gelijktijdig gebruikt worden: <LINK HREF="basis.css" REL="stylesheet" TYPE="text/css"> <LINK HREF="standaard.css" REL="stylesheet" TYPE="text/css" TITLE="Standaard weergave"> <LINK HREF="groot.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Grote letters"> In bovenstaand voorbeeld wordt het stijlblad "basis.css" altijd gebruikt. Afhankelijk van de keuze van de gebruiker wordt "basis.css" gecombineerd met "standaard.css" of "groot.css". Indien de gebruiker geen keuze maakt, wordt "basis.css" in combinatie met het stijlblad met voorkeur "standaard.css" gebruikt. Het gebruik van alternatieve stijlbladen wordt alleen ondersteund door Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 7.0 en hoger. In deze browsers kan het voorbeeld bekeken worden in een nieuw venster.

Introductie meta-informatie
Met behulp van het META element kun je in de head van een document allerlei zo genoemde metainformatie opnemen. Bij meta-informatie gaat het niet om informatie die als inhoud van het document

wordt weergegeven door de browser. Het is informatie die betrekking heeft op het document zelf en waar de browser soms wel wat mee doet, maar vaak ook helemaal niets. In dit onderdeel wordt toegelicht hoe je meta-informatie kunt gebruiken om: informatie ten behoeve van zoekmachines vast te leggen. Bijvoorbeeld een omschrijving van de inhoud van het document, zoektermen en aanwijzingen voor de zoekrobots. een document na een bepaalde tijd automatisch opnieuw te laten openen, of te laten vervangen door een ander document. Deze methode heet Client Pull. ervoor te zorgen dat browsers die dat ondersteunen in de adresbalk een eigen afbeelding weergeven (een zo genoemde shortcut icon). te voorkomen dat een document wordt opgenomen in de cache van de browser. om ervoor te zorgen dat in Microsoft Internet Explorer 6 de image toolbar wordt geblokkeerd en knoppen en schuifbalken op systemen met Windows XP op de traditionele wijze worden weergegeven.

Elders in de Handleiding HTML wordt besproken wanneer en hoe je meta-informatie moet opnemen met betrekking tot stylesheets, scripts en karakter encodering.

Zoekmachines
Zoekmachines als Google, Altavista, AlltheWeb, Lycos en Ilse struinen regelmatig het Internet af, om zoveel mogelijk documenten in hun index op te nemen. Of ze jouw site daarbij binnen een redelijke tijd tegenkomen, blijft altijd afwachten. Wil je de kans vergroten dat je site in de index wordt opgenomen, dan is het verstandig hem zelf bij de verschillende zoekmachines aan te melden. Als je site eenmaal in de index van een zoekmachine is opgenomen, is het natuurlijk belangrijk dat een bezoeker hem zo hoog mogelijk in de zoekresultaten tegenkomt. Je kunt dat benvloeden door de documenten een goede titel te geven en door het opnemen van een korte omschrijving en relevante sleutelwoorden. Daarnaast helpt het als er vanaf andere sites links naar jouw site staan. Het moet dan overigens wel gaan om sites waarvan de inhoud een relatie heeft met wat jij op je site te bieden hebt. Het opnemen van een titel is om twee redenen belangrijk. Allereerst bepalen zoekmachines mede op basis van de gebruikte woorden in de titel hoe hoog een document in de lijst met zoekresultaten wordt geplaatst. Daarnaast plaatsen zoekmachines de titel van een document als kopje boven een zoekresultaat. Je moet dus zorgen voor een titel die de belangrijkste sleutelwoorden uit het document bevat en bovendien uitnodigend is voor degene die de zoekopdracht heeft gegeven. De titel van een document leg je vast met behulp van het TITLE element dat je plaatst in de head van het document (zie de toelichting). Om de korte omschrijving van de inhoud en de zoektermen voor een document vast te leggen, moet je gebruik maken van het META. Met het NAME attribuut geef je aan om wat voor informatie het gaat en met het LANG attribuut wat de taal ervan is. Het CONTENT attribuut bevat de informatie zelf. Je plaatst het META element in de head van een document. De meeste van de eerder genoemde zoekmachines gebruiken de korte omschrijving op de een of andere wijze bij de weergave van de zoekresultaten. Soms vormt de omschrijving de enige tekst van het zoekresultaat, in andere gevallen wordt ervoor of erna een stukje tekst uit het document geplaatst met daarin de opgegeven zoektermen. Alleen bij Google ontbreekt de korte omschrijving in de meeste gevallen. Door te zorgen voor een goede uitnodigende omschrijving, kun je proberen de gebruikers van de zoekmachine naar jouw site te lokken. Maak niet een te lange omschrijving, want dan loop je kans dat deze halverwege afgekapt wordt. Een aantal karakters van 200-250 wordt wel als maximum genoemd. Probeer de belangrijkste sleutelwoorden in de omschrijving te verwerken. De korte omschrijving leg je vast door aan het NAME attribuut van het META element waarde "description" te geven. Als voorbeeld de beschrijving van deze handleiding:

<META NAME="description" LANG="nl" CONTENT="Handleiding HTML - De Nederlandse informatiebron op het gebied van HTML en CSS. Met de nieuwste mogelijkheden, veel voorbeelden, een uitgebreide uitleg van het gebruik van Cascading Style Sheets en een naslag van HTML-elementen en CSSeigenschappen."> Met het opnemen van sleutelwoorden kun je de lijst met door de zoekmachine gendexeerde woorden uitbreiden, of ervoor zorgen dat bepaalde woorden in het document zelf een zwaarder gewicht krijgen. De ondersteuning van deze mogelijkheid is tegenwoordig echter minimaal. Vanwege het toegenomen misbruik worden de sleutelwoorden door belangrijke zoekmachines als Google, Altavista en AlltheWeb eenvoudig genegeerd. Als je voor de zoekmachines die er nog wel wat mee doen een lijst met sleutelwoorden opneemt, is het verstandig dat in ieder geval op een "nette" manier te doen. Verwacht bijvoorbeeld niet dat je de zoekmachines om de tuin kunt leiden met allerlei trucjes, zoals het een groot aantal keren opnemen van een bepaald woord. Veel zoekmachines hebben dat direct door en zullen je eerder lager dan hoger op het overzicht met zoekresultaten plaatsen. De sleutelwoorden leg je vast door aan het NAME attribuut van het META element de waarde "keywords" te geven. Als voorbeeld de sleutelwoorden die voor de Handleiding HTML zijn opgenomen: <META NAME="keywords" LANG="nl" CONTENT="Handleiding HTML, HTML handleiding, HTML, handleiding, cursus, naslag, tutorial, uitleg, voorbeelden, Nederlands, element, elementen, attribuut, attributen, code, validatie, webpagina, homepage, website, hyperlinks, frames, iframe, inline, frame, formulieren, tabellen, afbeeldingen, achtergrond, background, lichtkrant, geluid, tekens, kleuren, script, scripts, refresh, zoekmachine, meta, metatags, favicon, css, cascading, stylesheets, style, sheets, stijlblad, stijl"> Soms wil je dat een zoekmachine (robot) een document juist niet indexeert, in andere gevallen wil je de zoekmachine er juist toe uitnodigen. De meeste zoekmachines ondersteunen het gebruik van het NAME attribuut van het META element met de waarde "robots". Voor het CONTENT attribuut gebruik je de waarden "noindex" (het document moet niet in de index opgenomen worden) en/of "nofollow" (de links in het document moeten niet gevolgd worden) als je het indexeren wilt beperken. Als je de zoekmachine wilt aanmoedigen tot indexeren gebruik je de waarden "all" (het document moet wel in de index opgenomen worden) en/of "follow" (de links in het document moeten wel gevolgd worden). Als de zoekmachine het document geheel moet negeren, dan neem je de volgende code op: <META NAME="robots" CONTENT="noindex, nofollow"> en als je wilt dat de zoekmachine het document niet gendexeerd, maar wel de links naar andere documenten volgt: <META NAME="robots" CONTENT="noindex, follow"> Door Google wordt standaard een kopie van elk gendexeerd document in de zogenaamde cache opgeslagen. Gebruikers van deze zoekmachine kunnen die kopie (gedurende de periode dat er nog geen nieuwe index is gemaakt) nog steeds bekijken, ook al heb je het document zelf gewijzigd of verwijderd. Wanneer je niet wilt dat dit gebeurt, dan kun je dat aangegeven door voor het CONTENT attribuut de waarde "noarchive" te gebruiken: <META NAME="robots" CONTENT="noarchive"> Veel zoekmachines indexeren alleen documenten die voldoende inhoud bevatten en slaan documenten over waarin uitsluitend frames zijn gedefinieerd. Zorg daarom in dat soort documenten altijd voor een noframes-sectie, waarin je een korte omschrijving geeft van wat je te bieden hebt en waarin je minimaal n hyperlink naar de rest van je site plaatst (uiteraard niet naar een document waarin weer alleen

frames worden gedefinieerd). Neem in pagina's waarin frames zijn gedefinieerd bovendien ook de elementen META (met de omschrijving en de trefwoorden) en TITLE (met de naam van je site) op. Naast het hiervoor beschreven gebruik van het META element voor het opnemen van een korte omschrijving, sleutelwoorden en informatie voor zoekrobots, zijn er nog enkele andere mogelijkheden die betrekking hebben op zoekmachines. Het gaat daarbij om informatie over de auteur en het copyright. Verder kan het LINK element gebruikt worden om aan te geven wat de beginpagina van een verzameling documenten is. Deze mogelijkheden worden echter slechts door gespecialiseerde zoekmachines ondersteund. De algemeen gebruikte zoekmachines negeren de informatie en het opnemen ervan heeft dus in de meeste gevallen geen nut. Voor de volledigheid en omdat wel opnemen geen kwaad kan, worden de genoemde mogelijkheden hier toch kort beschreven. Met de waarde "author" voor het NAME attribuut kun je aangeven wie de auteur is: <META NAME="author" LANG="nl" CONTENT="Hans de Jong"> Met de waarde "copyright" voor het NAME attribuut kun je informatie met betrekking tot het copyright van het document opnemen: <META NAME="copyright" LANG="nl" CONTENT="Copyright 1995-2006 Hans de Jong"> Het LINK element kun je gebruiken om aan de zoekmachines te vertellen wat het eerste document is van een verzameling documenten. Met het REL attribuut leg je vast dat het gaat om een begindocument, met het HREF attribuut waar dat gevonden kan worden. Je plaatst het LINK element in de head van een document. Als voorbeeld een verwijzing naar de beginpagina van de Handleiding HTML: <LINK REL="start" HREF="http://www.handleidinghtml.nl/index.html">

Client Pull
Het META element kan gebruikt worden om een document na een bepaalde tijd dynamisch te laten verversen of vervangen. Deze methode heet Client Pull: de browser opent zelfstandig een gewijzigd of ander document. Om van de Client Pull methode gebruik te kunnen maken, moet je aan het META element het HTTPEQUIV attribuut toevoegen met de waarde "refresh". Via het CONTENT attribuut geef je aan na hoeveel seconden een nieuw document geopend moet worden. Wanneer het huidige document vervangen moet worden door een ander document, moet je de url-parameter aan het CONTENT attribuut toevoegen. In het volgende voorbeeld wordt een document na 3 seconden opnieuw geladen. <HEAD> <META HTTP-EQUIV="refresh" CONTENT="3"> .. </HEAD> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. venster automatisch. Na 15 seconden sluit het

Door ook de url-parameter in het CONTENT attribuut op te nemen, geef je aan dat het huidige document vervangen moet worden door een ander. De url-parameter moet geplaatst worden tussen de aanhalingstekens van het CONTENT attribuut.

<HEAD> <META HTTP-EQUIV="refresh" CONTENT="3; url=document2.html"> .. </HEAD> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Na 15 seconden sluit het venster automatisch. Ook in het tweede document kun je het META element opnemen met de opdracht een nieuw document te openen. Door dat in volgende documenten te herhalen, kun je een presentatie maken. De vervangingstijd kun je laten afhangen van de inhoud van het document. Als het laatste document weer terug verwijst naar een eerder document, ontstaat een loop. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. venster automatisch. Na 15 seconden sluit het

Afbeelding in adresbalk
In Microsoft Internet Explorer vanaf versie 5.0, Netscape Navigator vanaf versie 7.0, Mozilla, Firefox en Opera vanaf versie 7.0 is het mogelijk zelf te bepalen welke afbeelding (shortcut icon of favicon genoemd) er in plaats van het standaard symbool voor de URI in de adresbalk van de browser, of voor de favoriet of bookmark komt te staan.

De meest eenvoudige manier om ervoor te zorgen dat de eigen afbeelding wordt weergegeven, is het plaatsen van een ico-bestand met de naam "favicon.ico" in de hoofddirectory van je website. De afbeelding wordt dan gebruikt voor alle HTML-documenten in deze en onderliggende directories. Wanneer je niet n afbeelding voor alle HTML-documenten wilt gebruiken, of wanneer je verschillende documenten een eigen afbeelding wilt geven, dan kun je beter de alternatieve oplossing met behulp van het LINK element kiezen. Je neemt dan in de head van elk afzonderlijk HTML-document het LINK element op met de waarde "shortcut icon" voor het REL attribuut. Met het HREF attribuut leg je de locatie van de afbeelding vast. De waarde van het HREF attribuut kan eenvoudig de naam van het icobestand zijn (als dat zich in dezelfde directory als het HTML-document bevindt), maar ook een meer uitgebreid adres. Het TYPE attribuut geeft aan om wat voor soort afbeelding het gaat. Voor de Handleiding HTML is de volgende code opgenomen: <LINK REL="shortcut icon" HREF="handleidinghtml.ico" TYPE="image/x-icon"> De afbeelding moet een ico-bestand zijn, dat je met een daarvoor geschikt programma maakt. Een bestaande afbeelding kun je met bijvoorbeeld de gratis image-viewer/editor IrfanView opslaan in het icoformaat. Een nieuwe afbeelding kun je maken met een speciale icon-editor, zoals de gratis IconArt. Het beste kun je als formaat 16x16 pixels aanhouden en kleuren uit het veilig kleurenpalet gebruiken. In oudere versies van Microsoft Internet Explorer wordt de shortcut icon niet altijd weergegeven, ook al heb je het favicon.ico-bestand in de hoofddirectory geplaatst of de code met het LINK element correct opgenomen. Soms helpt het als je de site of pagina toevoegt aan de favorieten/bookmarks. Andere browsers dan Microsoft Internet Explorer ondersteunen ook andere bestandsformaten voor de afbeelding, bijvoorbeeld png, gif en jpg.

Document niet in cache

Door de meeste browsers worden geopende documenten en daarin opgenomen andere bestanden vaak gedurende een bepaalde tijd en tot een bepaalde totale omvang opgeslagen in een directory op de harddisk: de cache. Wanneer hetzelfde document opnieuw geopend moet worden, zal de browser (afhankelijk van de instellingen) eerst controleren of het document misschien gewijzigd is en als dat niet het geval is, het uit de cache halen. Dat zal vaak aanzienlijk sneller zijn dan het opnieuw binnenhalen van het document vanaf het Internet. Soms heb je redenen om te willen voorkomen dat de browser het document in de cache opneemt. In dat geval kun je het META element in de head van het document opnemen en daar het HTTP-EQUIV attribuut aan toevoegen met de door sommige browsers ondersteunde waarde "pragma" en het CONTENT attribuut met de waarde "no-cache": <META HTTP-EQUIV="pragma" CONTENT="no-cache"> Wanneer het document slechts een beperkte houdbaarheid heeft, kun je als waarde voor het HTTPEQUIV attribuut "expires" opnemen en als waarde voor het CONTENT attribuut een datum en tijd. Je laat dan aan de browser weten, dat het document na de vermelde (verval)datum niet meer in de cache geplaatst moet worden. <META HTTP-EQUIV="expires" CONTENT="Tue, 31 Dec 2003 23:00:00 GMT"> Het is overigens onduidelijk hoe ruim de ondersteuning van de genoemde mogelijkheden is.

Diverse meta-informatie
Naast de informatie met betrekking tot zoekmachines, het automatisch vervangen van documenten met behulp van Client Pull, het weergeven van een afbeelding in adresbalk en het voorkomen van opname in de cache, kun je ook nog allerlei andere meta-informatie opnemen. Hier worden daarvan enkele mogelijkheden genoemd, die specifiek op Microsoft Internet Explorer 6 gericht zijn. Het gaat om informatie waarmee je de weergave van de image toolbar kunt blokkeren en informatie waarmee je ervoor kunt zorgen dat de browser op systemen met Windows XP knoppen en schuifbalken op de traditionele wijze weergeeft.

Geen image toolbar in Internet Explorer

Een kenmerk van Microsoft Internet Explorer 6 en hoger is de image toolbar: als je met de muis boven een (wat grotere) afbeelding komt, verschijnt in de linker bovenhoek ervan een knoppenbalk. Die knoppenbalk biedt de gebruiker onder meer de mogelijkheid de afbeelding snel op te slaan, af te drukken, of te versturen per e-mail. Wanneer je niet wilt dat bij de afbeeldingen in jouw HTMLdocumenten ook zo'n knoppenbalk verschijnt, moet je de volgende meta-informatie in de head van de documenten plaatsen: <META HTTP-EQUIV="imagetoolbar" CONTENT="no">

Weergave Internet Explorer 6 op Windows XP

Op een PC met Windows XP wordt de voor het systeem vastgelegde weergave ook aangehouden voor controls als knoppen en schuifbalken van Microsoft Internet Explorer 6 zelf en binnen HTMLdocumenten. Wanneer je wilt dat dit soort controls in plaats van in de XP-stijl op dezelfde wijze als in andere browsers worden weergegeven, dan moet je de volgende meta-informatie in de head van de documenten plaatsen:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="no">

Introductie lichtkranten
Door Microsoft Internet Explorer 2.0 en hoger, Netscape Navigator 7.0 en hoger, Mozilla 1.01 en hoger, Firefox en Opera 7.20 wordt de Scrolling Text Marquee ondersteund, ofwel de lichtkrant met verschuivende tekst.

Je maakt een lichtkrant met behulp van het MARQUEE element. In dit onderdeel worden de basismogelijkheden van lichtkranten en enkele speciale effecten beschreven. Door de wijze waarop een lichtkrant met het MARQUEE element wordt opgebouwd, is de weergave in browsers die het element niet ondersteunen minder gelukkig: de tekst welke de lichtkrant moet weergeven, zie je dan als stilstaande tekst. Vooral als de tekst wat langer is en/of een groter lettertype wordt gebruikt, levert dit een weinig fraai beeld op. Daarom is het vaak beter de lichtkrant voor deze browsers te verbergen. Wanneer je een lichtkrant wilt opnemen welke ook in andere browsers zichtbaar is, dan kun je het beste gebruik maken van een Java applet of een JavaScript. Bij de voorbeelden in het onderdeel Objecten wordt een applet gedemonstreerd, welke ook als lichtkrant toegepast kan worden. Bij de JavaScript voorbeelden is een script voor een lichtkrant opgenomen. Je moet er rekening mee houden dat een document waarin het MARQUEE element is opgenomen, niet voldoet aan HTML 4. Bij controle met een validator, zal het document dus niet worden goedgekeurd.

Basismogelijkheden lichtkrant
Je maakt een lichtkrant met behulp van het MARQUEE element. Omdat in het volgende voorbeeld geen attributen aan het MARQUEE element zijn toegevoegd, gebruikt de lichtkrant de totale beschikbare breedte. <MARQUEE>Dit is een lichtkrant</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. De attributen HEIGHT, WIDTH en BGCOLOR kunnen gebruikt worden om de hoogte, breedte en achtergrondkleur van de lichtkrant te specificeren. Het MARQUEE element heeft geen attributen om de opmaak van de tekst in de lichtkrant te bepalen. Je kunt hiervoor echter gebruik maken van de elementen voor tekstopmaak. In het volgende voorbeeld is het FONT element opgenomen met de attributen SIZE, FACE en COLOR. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#336699"><FONT SIZE="+2" FACE="Arial" COLOR="#FFFFFF">Dit is een lichtkrant</FONT></MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. In de voorbeelden hiervoor is de weergave van de lichtkrant bepaald met alleen HTML. In Netscape Navigator 7.1 en Mozilla 1.3 t/m 1.6 kan dat een probleem opleveren, omdat deze browsers het BGCOLOR attribuut niet ondersteunen. Als alternatief kan de weergave echter ook bepaald worden met

behulp van stylesheets. Alle gangbare browsers kunnen daarmee overweg, met uitzondering van Netscape Navigator 7.0 en Mozilla 1.2/1.3, die de background-color eigenschap niet ondersteunen voor het MARQUEE element. Je kunt dat oplossen door het gebruik van stylesheets te combineren met het BGCOLOR attribuut. In het volgende voorbeeld is gebruik gemaakt van een inline stijl, door het STYLE attribuut aan het MARQUEE element toe te voegen. Met de font-family eigenschap is het lettertype gespecificeerd, met de font-size eigenschap de lettergrootte, met de color eigenschap de kleur van de tekst en met de background-color eigenschap de achtergrondkleur. Het BGCOLOR attribuut heeft dezelfde waarde als de background-color eigenschap. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#336699" STYLE="font-family: sans-serif; font-size: 24px; color: white; background-color: #336699;">De opmaak ... stylesheets.</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Overigens zijn met bovenstaande oplossing alle problemen nog niet voorbij. Netscape Navigator 6.x en Mozilla 1.0 kunnen de lichtkrant weliswaar niet weergeven, maar ze negeren het MARQUEE element ook niet: het wordt beschouwd als element op blokniveau, waarop de opgegeven stijlen gewoon worden toegepast. In deze browsers is het misschien verstandig de lichtkrant maar geheel te verbergen.

Speciale effecten
Met het BEHAVIOR attribuut kun je bepalen hoe de tekst door de lichtkrant moet schuiven. Bij de standaardwaarde "scroll" komt de tekst aan de ene kant op, verschuift naar de andere kant en verdwijnt daar geleidelijk weer. Bij de waarde "slide" komt de tekst aan de ene kant op, verschuift naar de andere kant en blijft daar stilstaan (in Microsoft Internet Explorer 4 werkt de waarde "slide" alleen zoals beschreven is, als ook het LOOP attribuut gebruikt is met de waarde "1"; in andere gevallen verdwijnt de tekst aan het eind in n keer). De waarde "alternate" laat de tekst binnen de lichtkrant heen en weer bewegen. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#FFFFFF" BEHAVIOR="alternate" STYLE="font-family: sans-serif; font-size: 24px; color: #336699; background-color: #FFFFFF;">Dit is alternate</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Met het SCROLLAMOUNT attribuut kan worden vastgelegd hoeveel pixels de tekst bij elke beweging moet verschuiven. Hoe hoger de waarde, hoe sneller de lichtkrant voorbijschuift. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#FFFFFF" SCROLLAMOUNT="5" STYLE="font-family: sans-serif; font-size: 24px; color: #336699; background-color: #FFFFFF;">Met SCROLLAMOUNT=&quot;5&quot; verschuift de tekst weinig</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Met het SCROLLDELAY attribuut kan worden vastgelegd om de hoeveel tijd (uitgedrukt in milliseconden) de tekst een stukje moet verschuiven. Hoe hoger de waarde, hoe langzamer de lichtkrant loopt. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#FFFFFF" SCROLLDELAY="150" STYLE="font-family: sans-serif; font-size: 24px; color: #336699;

background-color: #FFFFFF;">Met SCROLLDELAY=&quot;150&quot; verschuift de tekst langzaam</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Met het DIRECTION attribuut kan worden vastgelegd in welke richting de tekst moet schuiven. Bij de standaardwaarde "left" gaat de tekst van rechts naar links, bij de waarden "right", "up" en "down" respectievelijk van links naar rechts, van beneden naar boven en van boven naar beneden. <MARQUEE HEIGHT="75" WIDTH="560" BGCOLOR="#FFFFFF" DIRECTION="up" SCROLLDELAY="150" STYLE="font-family: sans-serif; font-size: 24px; color: #336699; background-color: #FFFFFF;">Met DIRECTION=&quot;up&quot; verschuift de tekst naar boven</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Verbergen lichtkrant
Omdat de tekst in de lichtkrant als inhoud van het MARQUEE element moet worden opgenomen, wordt deze stilstaand en compleet zichtbaar weergegeven door browsers, die het MARQUEE element niet ondersteunen. Zeker als je het FONT element gebruikt hebt om de grootte en kleur van de tekst te bepalen, is het resultaat vermoedelijk niet wat je wilt. <MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#CCCCCC"><FONT SIZE="+2" FACE="Arial" COLOR="red">Tekst ingesloten ... stilstaande tekst.</FONT></MARQUEE> In een browser die het MARQUEE element niet ondersteunt zie je:

Tekst ingesloten door het MARQUEE element wordt door browsers die het element niet ondersteunen, weergegeven als stilstaande tekst.
Dit effect kun je enigszins beperken door de opmaak van de tekst in de lichtkrant vast te leggen met behulp van het STYLE attribuut. In andere browsers wordt de inhoud van het MARQUEE element dan als standaard tekst weergegeven. <MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#CCCCCC" STYLE="font-family: sans-serif; font-size: 24px; color: red; background-color: #CCCCCC;">Tekst ingesloten ... stilstaande tekst.</MARQUEE> In een browser die het MARQUEE element niet ondersteunt zie je: Tekst ingesloten door het MARQUEE element wordt door browsers die het element niet ondersteunen, weergegeven als stilstaande tekst. Een oplossing voor het geheel verbergen van de inhoud van de lichtkrant in browsers die het MARQUEE element niet ondersteunen, is het gebruiken van een JavaScript. Het principe is eenvoudig: het script test om welke browser het gaat en plaatst de HTML-code voor de lichtkrant alleen als het gaat om in het script aangegeven browsers. Uiteraard wordt de lichtkrant alleen weergegeven als de gebruiker de uitvoering van JavaScript heeft toegestaan.

In het volgende voorbeeld wordt de lichtkrant alleen weergegeven in Microsoft Internet Explorer en in recente versies van Netscape Navigator (7.0 en hoger), Mozilla (1.1 en hoger), Firefox en Opera (7.2 en hoger). In de body van het document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var nuA = navigator.userAgent; var OP = (nuA.indexOf("Opera") != -1); var IE = (nuA.indexOf("MSIE") != -1) && !OP; var begingecko = (nuA).lastIndexOf("Gecko"); var geckodatum = (nuA).substring(begingecko + 6,begingecko + 14); var geckomarquee = (geckodatum >= 20020823) var beginopera = (nuA).lastIndexOf("Opera"); var operahfdversie = (nuA).substring(beginopera + 6,beginopera + 7); var operasubversie = (nuA).substring(beginopera + 8,beginopera + 9); var operaversie = (operahfdversie + operasubversie); var OP72plus = OP && (parseInt(operaversie) >= 72); if (IE || geckomarquee || OP72plus) { document.write('<MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#336699" STYLE="width: 560px; font-family: sans-serif; font-size: 24px; color: white; background-color: #336699;">Deze lichtkrant is opgebouwd met behulp van een JavaScript<\/MARQUEE>') } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter document.write niet onderbroken wordt door een harde overgang naar de volgende regel. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Een fout in Netscape Navigator met versienummer lager dan 7.2 en in Mozilla met versienummer lager dan 1.7 zorgt ervoor dat de opgegeven stijl voor de lettergrootte niet wordt weergegeven in bovenstaande JavaScript oplossing. Meer informatie over het testen op de gebruikte browser is te vinden bij de JavaScript voorbeelden voor Informatie over de browser.

Ontwikkeling HTML
Als onderdeel van het in 1989 door hem gestarte World Wide Web project, heeft Tim Berners-Lee in het najaar van 1990 HTML ontwikkeld. In eerste instantie is het een eenvoudige tekst-georinteerde taal, maar met de toenemende populariteit van het World Wide Web ontstaat al gauw de behoefte aan meer uitgebreide mogelijkheden, zoals het opnemen van afbeeldingen en tabellen. Door de makers van browsers wordt op verschillende manieren op deze behoefte ingespeeld en de noodzaak tot standaardisatie dient zich aan. Het duurt echter nog tot september 1995 voordat als eerste standaard HTML 2.0 door het Internet Engineering Task Force (IETF) wordt vastgesteld. HTML 2.0 bevat alle basismogelijkheden bij het maken van HTML-documenten zoals het structureren van tekst, koppen, hyperlinks, lijsten en tekstopmaak en daarnaast afbeeldingen en formulieren. In maart 1995, dus ruim voor de definitieve vaststelling van HTML 2.0, verschijnt een concept voor HTML 3.0. Nieuwe mogelijkheden in HTML 3.0 zijn onder andere tabellen en tekst, welke naast afbeeldingen uitgelijnd wordt. Een officile standaard is HTML 3.0 nooit geworden: in september 1995 vervalt het concept.

De echte opvolger van HTML 2.0 wordt HTML 3.2, welke in mei 1996 als concept verschijnt en in januari 1997 van het World Wide Web Consortium (W3C) de status van aanbeveling krijgt. Uitbreidingen ten opzichte van HTML 2.0 zijn onder meer: tabellen, image maps, de integratie van Java applets, extra mogelijkheden voor de opmaak van tekst en het uitlijnen van tekst naast afbeeldingen. Bij het verschijnen van HTML 3.2, worden vrijwel al deze mogelijkheden reeds ondersteund door de dan actuele versies van de belangrijkste browsers. De huidige standaard is HTML 4.0, welke in juli 1997 als concept is gepubliceerd en in december 1997 als aanbeveling is vastgesteld. Belangrijke thema's in HTML 4.0 zijn de scheiding tussen structuur en presentatie door het gebruik van stylesheets en een betere toegankelijkheid voor mensen met een handicap. Tot de nieuwe mogelijkheden van HTML 4.0 behoren onder meer frames, het opnemen van objecten, verbeteringen voor tabellen en formulieren en de integratie van stylesheets en scripts. Lang niet alle deze mogelijkheden worden bij verschijnen van HTML 4.0 (correct) ondersteund door de belangrijkste browsers. In enkele overzichten is te zien, welke elementen behoren tot HTML 2.0, HTML 3.2 en HTML 4.0 en welke elementen niet in een HTML-specificatie zijn opgenomen.

HTML 2.0
Specificatie: http://www.w3.org/MarkUp/html-spec/html-spec_toc.html Vastgesteld: 22 september 1995 In HTML 2.0 zijn de volgende elementen opgenomen: A ADDRESS B BASE BLOCKQUOTE BODY BR CITE CODE DD DIR DL DT EM FORM HEAD HR HTML Hx I IMG INPUT ISINDEX KBD LI LINK LISTING MENU META OL OPTION P PLAINTEXT PRE SAMP SELECT STRONG TEXTAREA TITLE TT UL VAR XMP

De elementen LISTING, PLAINTEXT en XMP zijn in HTML 3.2 als verouderd aangemerkt en in HTML 4.0 niet meer opgenomen. Ze worden daarom niet in deze handleiding beschreven.

Vervolg: HTML 3.2

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

HTML 3.2
Specificatie: http://www.w3.org/TR/REC-html32 Vastgesteld: 14 januari 1997 In HTML 3.2 zijn de volgende elementen opgenomen:

A ADDRESS APPLET * AREA * B BASE BASEFONT * BIG * BLOCKQUOTE BODY BR CAPTION * CENTER * CITE CODE DD DFN *

DIR DIV * DL DT EM FONT * FORM HEAD HR HTML Hx I IMG INPUT ISINDEX KBD LI

LINK LISTING MAP * MENU META OL OPTION P PARAM * PLAINTEXT PRE SAMP SCRIPT * SELECT SMALL * STRIKE *

STRONG STYLE * SUB * SUP * TABLE * TD * TEXTAREA TH * TITLE TR * TT U* UL VAR XMP

De met * gemarkeerde elementen zijn nieuw toegevoegd in HTML 3.2. De elementen SCRIPT en STYLE zijn onderdeel van HTML 3.2, maar uitsluitend als reservering voor de toekomstige integratie van scripts en stylesheets. Ze kennen in HTML 3.2 dan ook nog geen attributen. De elementen LISTING, PLAINTEXT en XMP zijn in HTML 3.2 als verouderd aangemerkt en in HTML 4.0 niet meer opgenomen. Ze worden daarom niet in deze handleiding beschreven.

HTML 4.0
Aanbeveling 4.0: http://www.w3.org/TR/1998/REC-html40-19980424/ Vastgesteld: 18 december 1997 Revisie: 24 april 1998 Aanbeveling Revisie 4.01: http://www.w3.org/TR/html401/ Vastgesteld: 24 december 1999 In HTML 4.0 zijn de volgende elementen opgenomen: A ABBR * ACRONYM * ADDRESS APPLET AREA B BASE BASEFONT BDO * BIG BLOCKQUOTE BODY BR BUTTON * CAPTION CENTER CITE CODE COL * DEL * DFN DIR DIV DL DT EM FIELDSET * FONT FORM FRAME * FRAMESET * HEAD HR HTML Hx I IFRAME * IMG INPUT KBD LABEL * LEGEND * LI LINK MAP MENU META NOFRAMES * NOSCRIPT * OBJECT * OL OPTGROUP * OPTION P PARAM PRE Q* S* SAMP SMALL SPAN * STRIKE STRONG STYLE SUB SUP TABLE TBODY * TD TEXTAREA TFOOT * TH THEAD * TITLE TR TT U UL VAR

COLGROUP * DD

INS * ISINDEX

SCRIPT SELECT

De met * gemarkeerde elementen zijn nieuw toegevoegd in HTML 4.0. Een aantal elementen, welke tot HTML 4.0 behoren, heeft het label "afgekeurd" (deprecated) gekregen. Voor een deel betreft het elementen, waarvoor er een alternatief is via stylesheets: BASEFONT, CENTER, FONT, S, STRIKE en U. Daarnaast gaat het om het APPLET element, waarvoor het OBJECT element als vervanging moet gaan dienen. Omdat stylesheets en het OBJECT element niet door alle nog gangbare browsers ondersteund worden en de ondersteuning bovendien niet altijd correct is, blijft het gebruik van deze elementen voorlopig toegestaan. Ook de elementen DIR, ISINDEX en MENU zijn afgekeurd, maar met de kanttekening dat het gebruik wordt afgeraden. Voor DIR en MENU geldt, dat deze elementen door alle gangbare browsers op dezelfde wijze worden weergegeven als UL. In plaats van ISINDEX kan het INPUT element gebruikt worden met het attribuut TYPE="text". Behalve de genoemde elementen heeft ook een aantal attributen het label "afgekeurd" gekregen. Hierbij gaat het vooral om attributen, waarvoor stylesheets als alternatief gelden. Ook deze attributen mogen voorlopig gewoon gebruikt worden. HTML 4.01 is een revisie van HTML 4.0 en bevat een aantal kleine aanpassingen. Daarnaast is voor de elementen IMG en FORM het NAME attribuut toegevoegd, omdat veel browsers het ID attribuut niet en het NAME attribuut wel ondersteunen als identificatiekenmerk voor verwijzingen vanuit scripts.

Overige elementen
Een aantal elementen maakt geen deel uit van een HTML-specificatie, maar wordt wel ondersteund door de bekende browsers. De volgende elementen worden ondersteund door n of meer versies van Microsoft Internet Explorer, Mozilla, Netscape Navigator en Opera: BGSOUND EMBED MARQUEE NOBR NOEMBED WBR

Het volgende element wordt ondersteund door Mozilla, Netscape Navigator en nieuwere versies van Opera: BLINK De volgende elementen worden ondersteund door (oudere versies van) Netscape Navigator: ILAYER KEYGEN LAYER MULTICOL NOLAYER SPACER

Voor de meeste van de genoemde elementen kunnen in de toekomst het OBJECT element (voor EMBED, NOEMBED en BGSOUND) en stylesheets (voor BLINK, ILAYER, LAYER, NOLAYER en SPACER) als vervanging dienen.

Introductie speciale karakters

Bij het maken een HTML-document mag je niet zomaar alle karakters opnemen, die je met allerlei toetscombinaties in bijvoorbeeld je tekstverwerker wel kunt gebruiken. Enerzijds omdat niet elk systeem (DOS/Windows, Macintosh, Linux) deze karakters op dezelfde wijze interpreteert, anderzijds omdat sommige karakters in HTML een speciale betekenis hebben. In principe kun je alle letters, cijfers en tekens die je op een standaard toetsenbord vindt gewoon gebruiken. Een uitzondering vormen de karakters ", &, < en >. In plaats van deze vier karakters en voor alle overige karakters (zoals Griekse letters, mathematische operatoren en allerlei symbolen) moet je speciale code gebruiken. Deze speciale code noemen we karakterreferenties. Om het gebruik van de speciale code te illustreren is een voorbeeld opgenomen, waarbij in de browser (zoals in deze handleiding nogal eens het geval is) HTML-code moet worden weergegeven. Als je in de browser wilt zien: <IMG SRC="handleidinghtml.gif" WIDTH="88" HEIGHT="31" ALT="Logo Handleiding HTML"> dan moet je in het HTML-document het volgende opnemen: &lt;IMG SRC=&quot;handleidinghtml.gif&quot; WIDTH=&quot;88&quot; HEIGHT=&quot;31&quot; ALT=&quot;Logo Handleiding HTML&quot;&gt;

Hierna wordt eerst het begrip karakterreferenties besproken. Vervolgens wordt een overzicht gegeven van de karakterreferenties voor een groot aantal karakters en wordt ingegaan op de ondersteuning door browsers. Speciale aandacht krijgt daarna de euro. Tenslotte wordt ingegaan op karakter encodering en het gebruik van meta-informatie.

Karakterreferenties
Zoals hiervoor aangegeven mag je alleen de meeste letters, cijfers en tekens die je op een standaard toetsenbord vindt, gewoon in een HTML-document opnemen. Voor karakters die je niet zomaar mag opnemen, moet je speciale code gebruiken: de zogenaamde karakterreferenties. Deze zijn er in twee vormen: numerieke karakterreferenties en karakter entiteitsreferenties. Een numerieke karakterreferentie wordt als volgt weergegeven: &#nummer;. In plaats van "nummer" wordt de zogenaamde code positie van het betreffende karakter gebruikt. Code posities zijn numerieke codes, welke voor elk karakter uit een serie karakters (het karakterrepertoire) in een document karakterset zijn vastgelegd. In de meeste voor West Europese talen gebruikte karaktersets heeft bijvoorbeeld het copyrightteken () de code positie 169 en de kleine letter e accent acute () de code positie 233. De numerieke karakterreferentie voor deze karakters zijn dus respectievelijk &#169; en &#233;. Omdat de code posities en daarmee de numerieke karakterreferenties niet zo eenvoudig te onthouden zijn, biedt HTML als alternatief de karakter entiteitsreferenties. Deze karakter entiteitsreferenties gebruiken een symbolische naam voor een karakter. Ze worden als volgt weergegeven: &entiteitsnaam;. Voor het copyrightteken en de kleine letter e accent acute zijn de karakter entiteitsreferenties respectievelijk &copy; en &eacute;.

Overzicht karakters
In HTML 2 is de standaard ISO 8859-1 als document karakterset gedefinieerd. ISO 8859-1 (ook wel Latin-1 genoemd) bevat 256 code-posities (0-255), waarvan 191 posities een zichtbaar karakter betreffen. Bij de overige 65 karakters (de posities 0-31 en 127-159) gaat het om controle tekens, welke een bepaalde actie tot gevolg hebben (bijvoorbeeld een horizontale tab) en in HTML geen betekenis

hebben. De eerste 128 posities van ISO 8859-1 (0-127) komen overeen met het bekende ASCII karakterset. In HTML 4 wordt gebruik gemaakt van het Universele Karakterset (Universal Character Set; UCS), welke gedefinieerd wordt in de internationale standaard ISO 10646. Het Universele Karakterset bevat duizenden karakters, die gebruikt worden in talen over de hele wereld. De code-posities 0-255 komen overeen met die van ISO 8859-1. In plaats van het UCS wordt ook vaak gesproken over Unicode. Dit is feitelijk een aparte standaard, maar wel geheel identiek aan UCS. In het volgende overzicht worden voor de verschillende groepen code-posities uit de ISO 8859-1 en Unicode karaktersets enkele voorbeelden gegeven van de numerieke karakterreferenties en de karakter entiteitsreferenties en is tevens de ondersteuning door browsers vermeld. In aparte documenten is per groep een volledig overzicht opgenomen. code-positie 000-031 code-positie 032-126 Deze posities hebben geen betekenis in HTML. Deze posities bevatten hoofdletters, kleine letters en algemene tekens, die op een standaard toetsenbord te vinden zijn. De meeste hoeven niet gecodeerd te worden en kennen ook geen karakter entiteitsreferenties. Een uitzondering vormen een viertal tekens, die een bijzondere betekenis hebben in HTML en daarom niet ongecodeerd weergegeven mogen worden: " & < > dubbel aanhalingsteken ampersand kleiner dan groter dan &#34; &#38; &#60; &#62; &quot; &amp; &lt; &gt;

Alle posities worden ondersteund door alle versies van Microsoft Internet Explorer, Netscape Navigator en Opera. Een compleet overzicht is opgenomen in een aparte tabel. code-positie 127-159 code-positie 160-191 Deze posities hebben geen betekenis in HTML. Deze posities bevatten speciale symbolen, die alleen gecodeerd weergegeven mogen worden. Enkele voorbeelden: niet afbrekende spatie copyrightteken zacht koppelteken (wordt alleen weergegeven als een woord door afbreken wordt gesplitst) graadteken 2 in superscript 3 in superscript 1 in superscript een kwart een half drie kwart &#160; &#169; &#173; &#176; &#178; &#179; &#185; &#188; &#189; &#190; &nbsp; &copy; &shy; &deg; &sup2; &sup3; &sup1; &frac14; &frac12; &frac34;

De numerieke karakterreferenties worden vrijwel allemaal ondersteund door alle versies van Microsoft Internet Explorer, Netscape Navigator en Opera. De karakter entiteitsreferenties worden in Microsoft Internet Explorer en Netscape Navigator in de meeste gevallen pas

ondersteund vanaf versie 3. Het zachte koppelteken wordt niet door alle browsers (correct) ondersteund. Een compleet overzicht is opgenomen in een aparte tabel. code-positie 192-255 Deze posities bevatten vooral hoofd- en kleine letters met diverse accenten. Enkele voorbeelden: a accent grave a accent acute e accent grave e accent acute e accent circumflex e met umlaut i met umlaut o accent acute o met umlaut u met umlaut teken voor vermenigvuldigen teken voor delen &#224; &#225; &#232; &#233; &#234; &#235; &#239; &#243; &#246; &#252; &#215; &#247; &agrave; &aacute; &egrave; &eacute; &ecirc; &euml; &iuml; &oacute; &ouml; &uuml; &times; &divide;

De numerieke karakterreferenties worden allemaal ondersteund door alle versies van Microsoft Internet Explorer, Netscape Navigator en Opera. Hetzelfde geldt voor de karakter entiteitsreferenties, met uitzondering van de tekens voor vermenigvuldigen en delen, die in Microsoft Internet Explorer en Netscape Navigator pas ondersteund worden vanaf versie 3. Een compleet overzicht is opgenomen in een aparte tabel. overige code-posities De code posities boven 255 zijn in HTML 4 onderverdeeld in de volgende groepen: Latin extended - A en Latin extended - B Greek General punctuation, Currency symbols en Spacing modifier letters Mathematical operators Letterlike symbols, Arrows, Miscellaneous technical, Geometric shapes en Miscellaneous symbols

De ondersteuning door browsers is nogal wisselend en beperkt zich zeker bij Netscape Navigator en Opera vooral tot de laatste versie. Of een bepaald karakter kan worden weergegeven hangt er daarnaast vanaf of de versie van het door de bezoeker gebruikte lettertype het karakter bevat. De ondersteuning voor de afzonderlijke code posities is in het overzicht van de hiervoor genoemde groepen opgenomen.

Euro
Met de invoering van de euro is er vanzelfsprekend ook de wens het euroteken te kunnen gebruiken in HTML-documenten. In het UCS/Unicode karakterset zijn daarvoor de numerieke karakterreferentie &#8364; en de karakter entiteitsreferentie &euro; opgenomen. Het gebruik van deze code kent echter

een aantal problemen. Allereerst moeten de lettertypen op het systeem van de bezoeker het euroteken bevatten. Dat is zeker bij oudere systemen, zoals Windows 95, nog niet het geval. De bezoeker kan daarvoor een update downloaden, maar als website-auteur heb je daar uiteraard geen invloed op. Daarnaast is het zo dat ook oudere browsers de code voor het euroteken niet ondersteunen. Welke (Windows) browsers dat wel doen, kun je in het volgende overzicht zien: &#8364; Microsoft Internet Explorer vanaf versie 4.0 Netscape Navigator vanaf versie 4.0 Opera vanaf versie 4.0 Microsoft Internet Explorer vanaf versie 4.0 Netscape Navigator vanaf versie 4.0 Opera vanaf versie 3.6

&euro;

Browsers die de code voor de numerieke karakterreferentie voor het euroteken niet ondersteunen, geven deze op verschillende manieren weer: in oudere versies van Netscape Navigator zie je een vraagteken, terwijl oudere versies van Microsoft Internet Explorer en Opera het 'niet teken' (codepositie 172: ) laten zien. Browsers die de code voor de karakter entiteitsreferentie niet ondersteunen geven in plaats hiervan voluit '&euro;' weer. Wanneer je wilt dat de weergave in alle browsers zoveel mogelijk hetzelfde is, dan kun je ervoor kiezen de officile afkorting EUR te gebruiken. Als alternatief kun je ook een kleine afbeelding met het euroteken opnemen: . Denk er daarbij aan het attribuut ALT="euro" aan het IMG element toe te voegen. Dan kan ook een bezoeker met een browser die geen afbeeldingen weergeeft, zien waar het om gaat.

Meta-informatie
Bij de beschrijving van karakterreferenties is aangegeven dat voor elk karakter in een karakterset een numerieke code (de code positie) is vastgelegd. Om een HTML-document met de erin opgenomen karakters te kunnen opslaan in een bestand of te kunnen verzenden over internet, moeten de numerieke codes omgezet worden in bytes. De wijze waarop dat gebeurt, wordt bepaald door de gebruikte karakter encodering. Om een HTML-document te kunnen weergeven, moet de browser weten welke karakter encodering van toepassing is. Soms sturen webservers deze informatie mee met het document. Omdat dit niet altijd het geval is, kun je ook zelf in de vorm van meta-informatie in de head van het document de karakter encodering opgeven. Je doet dat met behulp van het META element met de attributen HTTP-EQUIV en CONTENT: <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> De in dit voorbeeld gebruikte waarde van het CONTENT attribuut geeft aan dat de gebruikte karakter encodering ISO-8859-1 is. Deze is vrij algemeen van toepassing voor West Europese talen. Indien je gebruik maakt van andere talen kun je een andere karakter encodering specificeren. Voor Grieks neem je bijvoorbeeld ISO-8859-7 en voor Turks ISO-8859-9.

Introductie kleuren in HTML en CSS

Kleuren kunnen voor meerdere onderdelen van een HTML-document vastgelegd worden, bijvoorbeeld voor:

de achtergrond, de tekst en de hyperlinks van een document via de attributen BGCOLOR, TEXT, LINK, VLINK en ALINK van het BODY element tekst via de elementen FONT en BASEFONT de achtergrond van (delen van) een tabel via het BGCOLOR attribuut van de elementen TABLE, THEAD, TBODY, TFOOT, TR, TD en TH.

Meer mogelijkheden heb je als je gebruik maakt van verschillende stijleigenschappen in Cascading Style Sheets: met de color eigenschap kan de voorgrondkleur van een element worden vastgelegd met de eigenschappen background-color en background kan de achtergrondkleur van een element worden vastgelegd met verschillende eigenschappen voor randen kan de kleur van de rand om een element worden vastgelegd.

Door een kleurenmonitor worden kleuren weergegeven als een bepaalde combinatie van rood, groen en blauw. Daarom ligt het voor de hand ook in HTML en CSS kleuren vast te leggen als een mix van deze basiskleuren. Er zijn verschillende manieren om de intensiteit van elk van de kleuren rood, groen en blauw vast te leggen. Het kan door middel van percentages, numerieke getallen en hexadecimale notatie. Behalve als een RGB-kleur bieden HTML en CSS ook de mogelijkheid een kleur te definiren door middel van een kleurnaam. Een bijzondere vorm hiervan is het gebruik van systeemkleuren. In dit onderdeel worden de verschillende manieren beschreven waarop kleuren gedefinieerd kunnen worden. Vervolgens wordt aangegeven welke van deze manieren gebruikt kunnen worden voor HTML en CSS. Tenslotte wordt ingegaan op het veilig kleurenpalet, dat de kleuren bevat welke door elke browser op elk systeem kunnen worden weergegeven.

RGB-kleuren
De eerste manier om een RGB-kleur te definiren is door de intensiteit van elk van de basiskleuren rood, groen en blauw in een percentage uit te drukken. De waarde van de kleur heeft hierbij de volgende vorm: rgb(rood%,groen%,blauw%) Elke basiskleur heeft een waarde tussen 0% en 100%. Bij 0% ontbreekt een kleur, bij 100% is de intensiteit maximaal. Indien een waarde hoger dan 100% wordt opgenomen, wordt deze terug gebracht tot 100%. Decimale waarden (bijvoorbeeld 45.8%) zijn toegestaan, maar het gebruik ervan wordt afgeraden, omdat een browser die geen decimalen ondersteunt de waarde verkeerd kan interpreteren. Wanneer de intensiteit van de drie basiskleuren gelijk is, wordt als resultaat een grijstint weergegeven. Ter illustratie enkele voorbeelden: rgb(100%,0%,0%): rgb(100%,100%,100%): rgb(0%,0%,0%): rgb(13%,75%,60%): rood wit zwart een zeegroene kleur

Behalve als percentage kan de intensiteit van elk van de basiskleuren rood, groen en blauw ook uitgedrukt worden in een numeriek getal in de range van 0 t/m 255. Daarbij komt 0 overeen met 0% en 255 met 100%. De waarde van de kleur heeft de volgende vorm: rgb(getal_rood,getal_groen,getal_blauw)

Bij het getal 0 ontbreekt een kleur, bij 255 is de intensiteit maximaal. Indien een waarde hoger dan 255 wordt opgenomen, wordt deze terug gebracht tot 255. Decimale waarden zijn niet toegestaan. Als voorbeeld de kleuren die al eerder genoemd zijn: rgb(255,0,0): rgb(255,255,255): rgb(0,0,0): rgb(32,178,154): rood wit zwart een zeegroene kleur

De numerieke getallen kunnen ook in hexadecimale notatie opgenomen worden. Hierbij wordt de intensiteit van elke kleur vastgelegd door middel van een paar van twee karakters uit de range 0 t/m 9 en A t/m F. Hierbij staan de getallen voor zichzelf, A voor 10, B voor 11, C voor 12, D voor 13, E voor 14 en F voor 15. Het verband tussen het numerieke getal en de hexadecimale notatie is als volgt: het eerste karakter geeft aan hoeveel keer het numerieke getal door 16 gedeeld kan worden, het tweede karakter is het restgetal (het numerieke getal minus het eerste karakter maal 16). Als voorbeeld de zeegroene kleur met de numerieke getallen 32, 178 en 154: numeriek 32 = 2 x 16 + 0 = 20 hexadecimaal numeriek 178 = 11 x 16 + 2 = B2 hexadecimaal numeriek 154 = 9 x 16 + 10 = 9A hexadecimaal De vorm waarin de kleur in hexadecimale waarden wordt opgenomen wijkt duidelijk af van die, waarin gebruik gemaakt wordt van percentages of numerieke getallen. In dit geval is het een hekje gevolgd door de drie paren karakters, zonder komma's er tussen en haakjes er omheen: #RRGGBB Ter illustratie weer eerder genoemde kleuren: #FF0000: #FFFFFF: #000000: #20B29A: rood wit zwart een zeegroene kleur

Wanneer in de hexadecimale waarde elk paar bestaat uit twee dezelfde karakters, kan deze waarde ook op een verkorte wijze worden opgenomen: #RGB Als hiervan gebruik gemaakt wordt, zal de browser bij de interpretatie elk karakter dupliceren. Van de eerdere voorbeelden kunnen alleen de eerste drie in verkorte vorm worden opgenomen: #FF0000 #FFFFFF #000000 = = = #F00 #FFF #000

Kleurnamen
De meest eenvoudige manier om een kleur vast te leggen is door middel van een naam, welke veel makkelijker te onthouden is dan een of andere combinatie van cijfers en/of letters. In de specificaties van HTML en CSS is vastgelegd dat je de volgende 16 kleurnamen kunt gebruiken:

white, yellow, fuchsia, red, aqua, lime, blue, black, gray, olive, purple, maroon, teal, green, navy en silver Deze kleuren zijn afkomstig uit het originele palet met 16 Windows VGA-kleuren. Naast de 16 kleurnamen ondersteunen veel browsers nog eens 124 extra namen, zoals MediumSpringGreen, LightGoldenrodYellow, Gainsboro en BurlyWood. Het gebruik van dit soort namen wordt niet aanbevolen. Niet elke naam wordt door elke browser ondersteund en bovendien maken ze geen deel uit van het veilig kleurenpalet. Kleurnamen zijn hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven. In de volgende afbeelding zijn de 16 standaard kleurnamen weergegeven. Tevens zijn daarbij de bijbehorende RGB-waarden vermeld. Te zien is dat in het eerste blok de kleuren steeds de volle intensiteit (100%) hebben en in het tweede blok de halve intensiteit (50%). In het laatste blok zijn de waarden voor rood, groen en blauw per kleur gelijk en dat betekent dat het om grijstinten gaat.

Systeemkleuren
Nieuw in CSS 2 is de mogelijkheid tot het definiren van systeemkleuren. Dat zijn geen vaste kleuren, maar verwijzingen naar de kleuren die gebruikt worden door het systeem, waarop het document wordt weergegeven. Bijvoorbeeld een verwijzing naar de kleur van de titelbalk van het actieve venster (ActiveCaption), of naar de kleur van de tekst in de titelbalk (CaptionText). Het idee achter de mogelijkheid om systeemkleuren te definiren is, dat hiermee de kleuren afgestemd kunnen worden op wat de gebruiker (blijkbaar) plezierig vindt of nodig heeft vanwege een visueel handicap. In de volgende afbeelding is een overzicht van de systeemkleuren voor een standaard Windows 98 systeem te zien. Op een ander systeem dan Windows 98, of als de gebruiker via de voorkeuren andere kleuren heeft gekozen, zullen de weergegeven kleuren van die op de afbeelding afwijken. Klik op de afbeelding voor een toelichting op de systeemkleuren en om te zien of en zo ja, hoe ze door de browser worden weergegeven.

Omdat je als auteur geen invloed hebt op hoe de systeemkleuren worden weergegeven, is het verstandig ze altijd te gebruiken in een combinatie van voor- en achtergrondkleur. Bovendien wordt geadviseerd ze niet door elkaar heen te gebruiken met kleuren die op een andere manier gedefinieerd zijn. De namen van de systeemkleuren zijn hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven. Vanwege de leesbaarheid wordt evenwel geadviseerd de in het overzicht opgenomen schrijfwijze aan te houden.

Kleuren in HTML
In HTML kunnen kleuren gedefinieerd worden door middel van: n van de 16 kleurnamen een RGB-waarde in niet verkorte hexadecimale notatie.

Voorbeelden: <BODY TEXT="black" BGCOLOR="white" LINK="blue" VLINK="red"> </BODY> <BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#0000FF" VLINK="#FF0000"> </BODY> Incidenteel wordt door een browser ook n van de andere besproken mogelijkheden ondersteund. Het gebruik ervan wordt echter afgeraden, omdat het in andere browsers tot ongewenste resultaten zal leiden. Het is belangrijk altijd een voor- n een achtergrondkleur vast te leggen. Daarmee wordt voorkomen een document onleesbaar wordt, bijvoorbeeld doordat de voorgrondkleur van het document te weinig verschilt van de door de bezoeker ingestelde standaard achtergrondkleur van de browser.

Kleuren in CSS
In CSS kunnen kleuren gedefinieerd worden door middel van:

n van de 16 kleurnamen een RGB-waarde in percentages een RGB-waarde in numerieke getallen een RGB-waarde in al dan niet verkorte hexadecimale notatie systeemkleuren.

Voorbeelden: BODY A:link A:visited BODY Ondersteuning: Internet Explorer 3.0: alleen de 16 kleurnamen en RGB-waarden in al dan niet verkorte hexadecimale notatie Internet Explorer 4.0 en hoger: alle mogelijkheden Netscape Navigator 4.x: alle mogelijkheden met uitzondering van systeemkleuren (deze worden echter ten onrechte niet genegeerd, maar in plaats ervan wordt tamelijk willekeurige een andere kleur weergegeven) Netscape Navigator 6.0 en hoger: alle mogelijkheden Mozilla: alle mogelijkheden Firefox: alle mogelijkheden Opera 3.5 t/m 5.0: alle mogelijkheden met uitzondering van systeemkleuren (welke correct genegeerd worden) Opera 5.1 en hoger: alle mogelijkheden. { color: #FFFFFF; background: #000000; } { color: rgb(255,0,0); background: rgb(0,0,0); } { color: rgb(0%,0%,100%); background: rgb(0%,0%,0%); } { color: WindowText; background: Window; }

Gezien de foutieve wijze waarop Netscape Navigator 4 systeemkleuren weergeeft, wordt het gebruik ervan alleen aanbevolen, als gewerkt wordt met browser-specifieke stijlbladen. Net als bij HTML is het van belang altijd zowel de voor- als de achtergrondkleur te vast te leggen.

Veilig kleurenpalet
Als een RGB-kleur gedefinieerd wordt door middel van numerieke getallen, kan voor elk van de kleuren rood, groen en blauw een getal in de range van 0 t/m 255 gebruikt worden. Dat betekent dat er in totaal 256x256x256 = 16.777.216 verschillende combinaties zijn. Of elk van deze ruim 16 miljoen kleuren ook echt op het scherm van de gebruiker te zien zal zijn, hangt af van de mogelijkheden van de monitor. Hoewel de standaard de laatste jaren aanzienlijk verschoven is, zullen veel gebruikers het nog moeten doen met maximaal 65.536 of zelfs maximaal 256 kleuren. Wanneer je uit de beschikbare mogelijkheden een willekeurige kleur kiest, is de kans dus groot dat de browser deze niet kan weergeven. In dat geval zijn er twee mogelijkheden. De eerste is dat de browser uit de beschikbare kleuren er een kiest, die zo dicht mogelijk bij de bedoelde kleur komt. De andere mogelijkheid is dat de browser de kleur probeert te simuleren. Dat kan door pixels te wijzigen in verschillende kleuren, welke gecombineerd de bedoelde kleur benaderen. Dit heet dithering. In beide gevallen zal de weergave anders zijn dan bedoeld, maar met name bij dithering kan het resultaat minder geslaagd zijn. In de volgende afbeeldingen is te zien tot welk resultaat beide mogelijkheden kunnen leiden. In de bovenste rij hebben de afbeeldingen hun originele grootte, in de onderste rij is een deel van de afbeelding uitvergroot om de dithering beter te kunnen zien. Om in de eerste afbeelding de originele kleur te kunnen zien, moet het systeem minstens 65.536 kleuren (hi-color) kunnen weergeven.

originele kleur rgb(255,189,90)

dichtstbijzijnde kleur rgb(255,204,51)

na dithering totaal 4 kleuren

Om te voorkomen dat de browser de gekozen kleur vervangt door de dichtstbijzijnde kleur of simuleert door dithering, kun je het beste gebruik maken van n van de kleuren uit het veilig kleurenpalet. Dat is een set van 216 RGB-kleuren, welke door alle browsers op alle systemen zonder kleurwijziging of dithering kunnen worden weergegeven, ook als het systeem over slechts 256 kleuren beschikt. Op het aantal van 216 RGB-kleuren kom je uit, omdat er van elk van een basiskleuren rood, groen en blauw een gelijk aantal mogelijkheden gebruikt moet kunnen worden en er binnen 256 kleuren dan niet meer dan 6x6x6 = 216 combinaties passen. De resterende 40 kleuren verschillen per systeem. De waarden die binnen het veilig kleurenpalet voor elke basiskleur toegepast mogen worden, zijn gelijkmatig over de beschikbare range verdeeld. Naast 0%, 0 en 00, gaat het daarom om veelvouden van 20%, 51 en 33 voor respectievelijk de weergave in percentages, numerieke getallen en hexadecimale notatie:

percentages: numerieke getallen: hexadecimale notatie:

0% 0 00

20% 51 33

40% 102 66

60% 153 99

80% 100% 204 255 CC FF

In de volgende afbeelding zijn de 216 kleuren van het veilig kleurenpalet te zien.

De RGB-waarden

zijn vermeld in hexadecimale notatie. Als alternatief kun je het palet ook bekijken met RGB-waarden in numerieke getallen.

Introductie Hulpmiddelen
In dit onderdeel is een korte beschrijving opgenomen van programma's, die je kunt gebruiken bij het bouwen van een website. Aan de orde komen: HTML- en CSS-editors: gebruik je om de HTML-documenten en stylesheets te maken. Validators: zijn er om te controleren of de gebruikte code correct is en de documenten aan de officile standaarden voldoen. Linkcheckers: zijn handig om te controleren of alle opgenomen hyperlinks kloppen. Browsers: gebruik je om te zien hoe de HTML-documenten in verschillende situaties worden weergegeven. FTP-programma's: zijn nodig om de HTML-documenten en andere bestanden te uploaden naar de server van je provider. Grafische programma's: gebruik je als je afbeeldingen moet maken of bewerken, of als je met image maps werkt.

Bij de verschillende onderdelen is niet gestreefd naar volledigheid. Uit de veelheid aan (goede) programma's is slechts een zeer beperkte selectie opgenomen en dan veelal nog alleen voor Windowssystemen.

HTML- en CSS-editors
HTML-documenten zijn ASCII-bestanden. Dat wil zeggen dat ze gemaakt kunnen worden met een gewone tekst-editor, zoals Kladblok (Notepad) van Windows. Nadeel van zo'n eenvoudige tekst-editor is dat je de code geheel met de hand moet intypen. Daarom zijn er in de loop van de tijd speciale HTMLeditors ontwikkeld, waarmee je de code kunt invoeren via menu-opties, knoppenbalken en/of de rechter muistoets. Dergelijke editors zijn er inmiddels in een groot aantal, varirend van eenvoudig tot geavanceerd. Voorbeelden van een tekst-georinteerde editors zijn het hier niet beschreven HTML-Kit (dat zowel in een gratis als een betaalversie verkrijgbaar is) als het geavanceerde en hoog gewaardeerde Macromedia HomeSite. Naast de tekst-georinteerde editors zijn er ook WYSIWYG-editors, waarbij WYSIWYG staat voor What You See Is What You Get. Deze editors geven het document weer in een vorm, die een benadering is van hetgeen je in de browser ziet. Omdat de code op de achtergrond verzorgd wordt, hoef je bij het gebruik van dit soort editors maar beperkt kennis van HTML te hebben. Wanneer je slechts incidenteel een HTML-document maakt, kan dat een voordeel zijn. Als je echter regelmatig HTML-documenten produceert, kan het verlies van de controle op de opgenomen code een nadeel zijn. Vooral ook omdat de code bij dit soort editors niet altijd volgens de specificaties is en daardoor tot foutmeldingen bij de validatie leidt. Bekende voorbeelden van WYSIWYG-editors zijn Dreamweaver van Adobe en Expression Web (de vervanger van het vroegere Frontpage) van Microsoft. Een gratis WYSIWYG-editor is het op de Gecko lay-out engine van Mozilla gebaseerde KompoZer. Soms hebben HTML-editors (eenvoudige) mogelijkheden ingebouwd om stylesheets te maken. Wanneer je meer uitgebreide mogelijkheden tot je beschikking wilt hebben, dan kun je kiezen voor een aparte CSS-editor. Een bekend voorbeeld is TopStyle. Hierna worden de tekst-georinteerde HTML-editor Macromedia HomeSite en de CSS-editor TopStyle beschreven.

Macromedia HomeSite
Tot de beste HTML-editors behoort zonder twijfel Macromedia HomeSite. Het biedt veel gebruiksgemak en een groot aantal geavanceerde mogelijkheden. Uitgebreide wizards zijn er voor het maken van frames, tabellen, scripts en stylesheets. Elementen kunnen ingevoegd worden via de rechter muisknop, of met behulp van n van de zelf te configureren knoppenbalken. Door rechts te klikken op de activering van een element en te kiezen voor bewerken, wordt een dialoogvenster geopend waarin ook de nieuwste attributen uit HTML 4.0 zijn opgenomen. De opties Tag Insight en Tag Completion maken het mogelijk tijdens het typen attributen en de beindiging van een element snel toe te voegen. Uitgebreide mogelijkheden zijn er voor zoeken en vervangen. HomeSite bevat een ingebouwde HTMLvalidator voor het controleren van de HTML-code, maar de resultaten van de controle zijn helaas niet altijd correct. Als alternatief kan echter ook de Professional versie van het programma CSE HTML Validator in HomeSite gentegreerd worden. Spellingcontrole is in meerdere talen beschikbaar. Een ingebouwde linkchecker test of de hyperlinks in een enkel document of in een hele site kloppen. HomeSite heeft een eigen ingebouwde browser, maar ondersteunt ook Internet Explorer als interne browser. In het voorjaar van 2009 is de ontwikkeling van Macromedia HomeSite door Adobe stopgezet.

TopStyle
Met de CSS-editor TopStyle kun je stylesheets maken en bewerken. Met behulp van de Style Inspector kun je stijleigenschappen selecteren, voorzien van waarden en toevoegen aan een stijlblad. In een preview venster kun je direct het resultaat zien. Met de Style Checker kun je een style sheet laten controleren en krijg je als resultaat te zien op welke punten het niet voldoet aan de verschillende specificaties. Bovendien wordt per versie van de belangrijkste browsers aangegeven of er problemen in de weergave zijn te verwachten, omdat eigenschappen niet of niet correct ondersteund worden. Het Site Report geeft aan of de relaties tussen de gedefinieerde stijlen en de HTML-documenten kloppen: zijn er stijlen die niet gebruikt worden in de HTML-documenten, of wordt vanuit de HTML-documenten verwezen naar stijlen die niet gedefinieerd zijn. Wanneer je de controle door Topstyle wilt aanvullen met een beoordeling door de online CSS-validator van het W3C, dan kan dat direct vanuit het programma. Meer informatie: TopStyle.

Validators
Om er achter te komen of je de HTML-code correct hebt opgenomen, is het verstandig je HTMLdocumenten altijd voor publicatie te controleren. Je kunt dat doen met een online validator, maar ook een programma voor offline controle gebruiken. Het programma A Real Validator is een echte validator. Dat wil zeggen dat de HTML-code op dezelfde wijze wordt gecontroleerd als een online validator. Dat wordt gedaan door gebruik te maken van officile door het W3C voor de verschillende HTML-versies opgestelde "document type definitions" (DTD; zie ook de beschrijving van de DOCTYPE-declaratie). Voor offline controle kunnen ook CSE HTML Validator en HTML Tidy gebruikt worden. Omdat de controle niet plaatsvindt op basis van een officile DTD, zijn dit soort programma's over het algemeen minder nauwkeurig waar het gaat om het juiste gebruik van de HTML-code. Zo zien ze soms fouten over het hoofd, of komen ze met valse foutmeldingen. Vaak bieden deze programma's echter wel extra mogelijkheden, bijvoorbeeld bij het corrigeren van de gevonden fouten.

A Real Validator
Het al wat oudere shareware programma A Real Validator maakt bij de controle van de HTML-code gebruik van officile door het W3C opgestelde "document type definitions" (t/m HTML 4.01) en levert daardoor zeer betrouwbare resultaten. Het programma is ontwikkeld door de maker van de online validator WDG HTML Validator. Meerdere documenten, al dan niet gedefinieerd in een project, kunnen tegelijkertijd gecontroleerd worden. De foutmeldingen worden op een gebruiksvriendelijke wijze weergegeven, met waar nodig verwijzingen naar toelichting in help-bestanden. Naar wens kunnen nieuwe of eigen DTD's toegevoegd worden. Meer informatie vind je op de site van A Real Validator.

CSE HTML Validator

Een veel gebruikt programma voor offline controle van de HTML-code is het programma CSE HTML Validator. Het programma maakt geen gebruik van door het W3C opgestelde "document type definitions" en de resultaten zijn daardoor een enkele keer wel eens minder nauwkeurig. Van CSE HTML Validator zijn er twee versies: de gratis Lite en de shareware Professional. De Professional versie heeft een meer uitgebreide controle op de HTML-code dan de Lite versie. Daarnaast wordt in de Professional versie aangegeven welke van de gebruikte elementen of attributen geen deel uitmaken van HTML 4.0, browser-specifiek zijn, of niet ondersteund worden door de verschillende browsers. In beide versies wordt binnen het programma een overzicht gegeven van de fouten en andere meldingen. Klik je op een fout of melding, dan spring je in de ingebouwde editor naar de juiste regel in het HTML-document en kun je direct de noodzakelijke wijzigingen aanbrengen. De Professional versie kan gentegreerd worden onder meer met de HTML-editor Macromedia HomeSite. Meer informatie: AI Internet Solutions.

HTML Tidy
Het gratis programma HTML Tidy beschikt niet over een eigen Windows schil en moet in een DOS-box worden uitgevoerd. Het programma controleert op fouten in de HTML-code en schrijft het resultaat weg in een tekstbestand. Indien gewenst kun je de fouten ook direct laten corrigeren, maar je moet er dan wel op bedacht zijn, dat de lay-out van het brondocument ook zal wijzigen. Als alternatief voor het werken in een DOS-box kun je gebruik maken van een HTML-editor, waarin HTML Tidy gentegreerd is. Dat is het geval met Macromedia HomeSite (vanaf versie 4.5), maar bijvoorbeeld ook met de gratis HTML-editors 1st Page 2000 en HTML-Kit. Meer informatie vind je op de site van HTML Tidy.

Linkcheckers
Een controle op de juistheid van de hyperlinks in je HTML-documenten is belangrijk. Niet alleen is het vervelend voor bezoekers als bepaalde hyperlinks niet blijken te werken, het zal bovendien de indruk van je site negatief benvloeden. Zeker als je veel links in je documenten hebt opgenomen, is het gebruik van een linkchecker aan te bevelen. Bijvoorbeeld Xenu's Link Sleuth of HTML Link Validator.

Xenu's Link Sleuth

De gratis linkchecker Xenu's Link Sleuth doet z'n werk goed en snel. De resultaten zijn te zien in het Xenu venster, maar kunnen ook in een uitgebreider rapport door de browser worden weergegeven. Xenu kan geen links binnen documenten controleren. Voor meer informatie: Xenu.

HTML Link Validator

HTML Link Validator is ongeveer even snel als Xenu, maar controleert dan wel gelijk alle links binnen documenten. De resultaten van de controle worden op een overzichtelijke manier binnen het programma weergegeven. Met behulp van een ingebouwde editor kunnen eventuele fouten snel hersteld worden: klik op een foute link in het overzicht en het document wordt op de juiste plaats geopend. Naar wens kunnen bepaalde links of bestandstypen uitgesloten worden van de controle. Het programma kan een uitgebreid rapport in html- of txt-formaat genereren. Wanneer je HTML Link Validator langer wilt gebruiken dan 30 dagen, dan moet je een registratie kopen. Voor meer informatie: HTML Link Validator.

Browsers

Ook browsers zijn een belangrijk hulpmiddel bij het ontwikkelen en onderhouden van een website. Enerzijds omdat je wilt weten hoe de documenten worden weergegeven door de verschillende browser(versie)s en anderzijds om er achter te komen of een browser fouten bevat waar je rekening mee moet houden. Gezien het grote aantal browsers op de markt zul je je enige beperking moeten opleggen. In de hierna opgenomen beschrijving van de Netscape Navigator, Mozilla, Firefox, Microsoft Internet Explorer en Opera wordt aangegeven met welke versies van deze browsers een controle in ieder geval verstandig is.

Netscape Navigator t/m 4.x

Netscape Navigator is vanaf de eerste versie uit najaar 1994 gedurende een aantal jaren de meest gebruikte browser geweest. In Navigator 2 wordt het gebruik van frames, Java applets, ingesloten geluidsfragmenten en JavaScript 1.0 ondersteund. Navigator 3 (medio 1996) kent op het gebied van HTML vooral nieuwe attributen voor bestaande elementen en ondersteunt daarnaast JavaScript 1.1. Netscape Navigator 4 (medio 1997; onderdeel van het pakket met internet programma's Netscape Communicator, maar ook als afzonderlijk programma verkrijgbaar) heeft als belangrijkste nieuwe mogelijkheid het gebruik van layers. Omdat vergelijkbare mogelijkheden bereikt kunnen worden met Cascading Style Sheets (via de eigenschappen voor positioning) worden de elementen LAYER en ILAYER echter niet door het World Wide Web Consortium (W3C) in een HTML-specificatie opgenomen en zullen ze ook niet door andere browsers ondersteund gaan worden. De uitgebreide mogelijkheden uit HTML 4.0 voor tabellen en formulieren worden niet door Navigator 4 ondersteund. Van Cascading Style Sheets ondersteunt Navigator 4 een behoorlijk deel van CSS 1 en een beperkt deel van CSS 2. De ondersteuning kent echter zeer veel fouten. Onhandig is bovendien dat de weergave van CSS geregeld is via JavaScript: zet een gebruiker de ondersteuning voor javaScript uit, dan worden de gedefinieerde stijlen ook niet weergegeven. De later verschenen versies Navigator 4.5 t/m 4.8 kennen geen nieuwe of verbeterde mogelijkheden op het gebied van HTML en CSS. Het gebruik van Netscape Navigator 4 en lager is zo minimaal, dat het niet echt de moeite loont je site ermee te controleren. Gezien de fouten in Netscape Navigator 4 bij de weergave van stylesheets, is het verstandig er dan wel voor te zorgen dat deze browser de stijlen niet kan weergeven. Zie hiervoor het onderdeel Stijlen verbergen.

Netscape Navigator 6 en hoger, Mozilla en Firefox

Begin 1998 besloot Netscape Communications Corporation van Netscape Communicator een zogenaamd open source project te maken en de programmacode vrij te geven. Daardoor kon iedereen bijdragen aan het verbeteren van het programma en dat heeft inmiddels duidelijk zijn vruchten afgeworpen. De lay-out engine, dat deel van de browser dat een HTML-document analyseert en op het scherm weergeeft, is onder de naam Gecko vanaf de grond opnieuw opgebouwd. In eerste instantie lag de cordinatie daarvan bij de onder de vlag van Netscape opererende Mozilla Organization. Nadat eigenaar AOL medio 2003 het besluit nam met de ontwikkeling van browsers te stoppen, zijn de activiteiten voortgezet door de zelfstandige Mozilla Foundation. De eerste preview van een nieuwe browser gebaseerd op de Gecko lay-out engine verscheen in december 1998. Daarna hebben tot mei 2002 een groot aantal testversies van Gecko het licht gezien. Enkele van deze testversies zijn vanaf november 2000 ook officieel uitgebracht in Netscape Navigator 6.0 t/m 6.2 (versienummer 5 is overgeslagen). Na ruim vier jaar ontwikkeling werd Gecko stabiel genoeg geacht om met de eerste versie 1.0 uit te komen. Dat gebeurde in de eigen browser Mozilla, die op 5 juni 2002 verscheen. Sindsdien zijn regelmatig nieuwe versies uitgebracht en eind 2004 is Gecko 1.8 in ontwikkeling. Het doel achter de Gecko lay-out engine is het mogelijk maken van browsers, die zich aan de verschillende webstandaarden houden. De laatste versies ondersteunen HTML 4.0 (vrijwel geheel), XHTML, CSS 1 (geheel), CSS 2 (vrijwel geheel), W3C Document Object Model, XML en JavaScript en doen dat over het algemeen zeer correct. De Gecko lay-out engine wordt inmiddels door een behoorlijk aantal browsers op verschillende platforms (Windows, Linux, Mac OS) gebruikt. Uiteraard door Mozilla dat de versienummering van Gecko volgt, maar ook door Netscape Navigator waarvan sinds medio 2002 de versies 7.0 t/m 7.2 zijn uitgebracht. Bij beide browsers gaat het om een pakket aan internet programma's, dat naast de webbrowser ook een WYSIWYG HTML-editor, een e-mailprogramma en een nieuwslezer bevat. Netscape Navigator (eigenlijk Mozilla in een andere verpakking) bevat daarnaast nog een programma voor instant messaging. Vanaf medio 2002 wordt er naast het pakket Mozilla ook gewerkt aan de ontwikkeling van

afzonderlijke programma's. Bij de webbrowser gebeurde dat aanvankelijk onder de naam Phoenix, maar via een kort leven als Firebird kreeg het programma als definitieve naam Firefox. De eerste officile versie van Firefox is in november 2004 uitgebracht, een jaar later gevolgd door versie 1.5. In augustus 2005 heeft de Mozilla Foundation een aparte dochteronderneming opgezet (Mozilla Corporation), die zich vooral richt op de productontwikkeling en verspreiding van Firefox en het e-mailprogramma Thunderbird. Het complete Mozilla pakket wordt sindsdien onder de naam SeaMonkey door vrijwilligers verder ontwikkeld. De ontwikkeling van Netscape Navigator is in februari 2008 gestopt. In het volgende overzicht zijn voor de verschillende versies van Netscape Navigator, Mozilla en Firefox de datum en het nummer van de Gecko lay-out engine opgenomen. Open het overzicht in een nieuw venster. Veel bestaande HTML-documenten zijn ontwikkeld voor browsers die zich niet goed aan de verschillende webstandaarden houden. In een browser die zich wel aan de webstandaarden houdt, zal de weergave daardoor vaak anders zijn dan de auteur heeft bedoeld. Om de aansluiting met bestaande documenten te houden, gebruikt de Gecko lay-out engine de DOCTYPE-declaratie om te bepalen of een document wel of juist niet volgens de standaarden op het gebied van HTML en CSS moet worden weergegeven. Handig in Firefox is het "tabbed browsing", waarmee je binnen hetzelfde browservenster meerdere documentvensters in tabbladen kunt openen. Daarnaast kan Firefox uitgebreid worden met kleine programma's die extra functionaliteit bieden. Een goed voorbeeld daarvan is de Web Developer extension. Gezien het sterk toegenomen gebruik is het verstandig je site te controleren met de verschillende versies van Firefox. Meer informatie over de genoemde browsers: Firefox en SeaMonkey. Je kunt ook oudere versies downloaden: Netscape Navigator, Mozilla en Firefox.

Microsoft Internet Explorer

Van Microsoft Internet Explorer boden de versies 1 en 2 (respectievelijk augustus en november 1995) zo weinig mogelijkheden, dat ze op geen enkele manier een bedreiging vormden voor de toen meest gebruikte browser Netscape Navigator. Internet Explorer 3 (augustus 1996) daarentegen begint al aardig de competitie met Netscape Navigator 3 aan te kunnen en biedt ondersteuning voor (inline) frames, Java applets, ingesloten geluidsfragmenten en extra opmaak bij tabellen. Op het gebied van scripts worden Visual Basic en de eigen JScript (komt globaal overeen met JavaScript versie 1.0) ondersteund. Van Cascading Style Sheets wordt een deel van CSS 1 ondersteund, maar vaak niet correct. Internet Explorer 4 (oktober 1997) kan zich ruimschoots meten met Netscape Navigator 4 en dat is ook te zien aan het toegenomen gebruik. Van HTML 4.0 wordt een groot deel ondersteund, waaronder de extra mogelijkheden voor formulieren. De implementatie van het OBJECT element kent helaas zoveel fouten, dat het gebruik gedurende lange tijd speciale voorzorgen zal vragen. Van JavaScript wordt versie 1.2 ondersteund. De ondersteuning van Cascading Style Sheets geldt het grootste deel van CSS 1 en een beperkt deel van CSS 2 en is (ondanks de nodige fouten) over het geheel genomen redelijk te noemen. Internet Explorer 5 is in maart 1999 verschenen. De nieuwe mogelijkheden hebben vooral betrekking op DHTML (Dynamic HTML) en XML (Extensible Markup Language). Op het gebied van HTML en CSS is er maar weinig veranderd ten opzichte van versie 4. Dat geldt in belangrijke mate ook voor de in juli 2000 verschenen versie 5.5. Internet Explorer 6.0 (augustus 2001) kent wel weer een aantal verbeteringen en ondersteund nu CSS 1 volledig en wat meer overeenkomstig de verschillende webstandaarden. Omdat veel bestaande documenten afgestemd zijn op niet volgens de webstandaarden werkende browserversies, wordt de DOCTYPE-declaratie gebruikt om te bepalen hoe een document weergegeven moet worden. Voor Internet Explorer 6.0 zijn in de loop van de tijd updates verschenen, die vooral bedoeld waren om allerlei veiligheidslekken te dichten. Van verbeteringen in de weergave is lange tijd echter geen sprake geweest. In oktober 2006 is Internet Explorer 7 verschenen, die vooral op het gebied van CSS de nodige verbeteringen kent. Als laatste van de bekende browsers werkt Internet Explorer met versie 7 nu ook met "tabbed browsing". Internet Explorer 8 is in maart 2009 uitgebracht en kent met name op het gebied

van het naleven van webstandaarden veel verbeteringen. Gezien het gebruik van Internet Explorer is het aan te raden je site te controleren met de versie 6 , 7 en 8. Probleem daarbij is wel dat de verschillende versies niet samen op n Windows systeem kunnen staan en je dus eigenlijk over meerdere machines moet beschikken. Voor meer informatie: Microsoft.

Opera
Opera is na Microsoft Internet Explorer en Mozilla/Firefox de derde browser op de markt. Tot de kenmerken van Opera behoren niet alleen compactheid en snelheid, maar zeker ook de vele opties voor persoonlijke instellingen, zoals lettertype, puntgrootte en kleur van de verschillende koppen en de tekst en wel of geen ondersteuning van frames. Daarnaast het werken met meerdere documentvensters in tabbladen binnen n browservenster, het snelschakelen tussen de instellingen van het document en die van de gebruiker, in- en uitzoomen en afdrukken op een instelbare schaal. Opera 2.1 (december 1996), de eerste versie welke op enigszins ruime schaal gebruikt is, beschikt over de meeste basismogelijkheden van HTML en frames. In versie 3 (december 1997) is de ondersteuning van JavaScript en een aantal plug-ins opgenomen, in versie 3.5 (november 1998) die van Java applets. Opera 3.5 en hoger ondersteunt daarnaast Cascading Style Sheets (CSS 1) en doet dat tamelijk correct. De uitgebreide mogelijkheden uit HTML 4.0 voor tabellen en formulieren worden niet door Opera 3.5 en slechts beperkt door Opera 4, 5 en 6 (achtereenvolgens juni 2000, december 2001 en november 2001) ondersteund. De ondersteuning van CSS 2 is in de loop van de tijd uitgebreid en in versie 6.0 al redelijk compleet. In januari 2003 is Opera 7 uitgebracht met de nieuwe lay-out engine Presto. De ondersteuning van de verschillende webstandaarden is over het geheel genomen zeer compleet en correct: HTML 4.0 (vrijwel geheel), XHTML, CSS 1 (geheel), CSS 2 (vrijwel geheel), W3C Document Object Model, XML en ECMAScript). De DOCTYPE-declaratie wordt gebruikt, om te bepalen of een document volgens de webstandaarden op het gebied van HTML en CSS weergegeven moet worden of juist niet. De laatste stabiele versie van Opera is 10.1. Ook Opera kent sinds versie 9.0 kleine programma's (widgets) die extra functionaliteit bieden. Wanneer je Opera wilt gebruiken voor de controle van je HTML-documenten, dan kun je de laatste versies zonder problemen naast elkaar installeren. In tegenstelling tot bijvoorbeeld Microsoft Internet Explorer en Netscape Navigator is het gebruik van Opera lange tijd niet gratis geweest. Vanaf versie 5.0 was het kopen een registratie niet meer verplicht als je bereid was een reclamebanner te accepteren. Vanaf versie 8.50 kun je Opera gebruiken zonder kosten n zonder reclame. Voor meer informatie: Opera. Er is ook een archief van oudere versies beschikbaar.

FTP-programma's
Een FTP-programma gebruik je om met het File Transfer Protocol bestanden van je PC thuis naar de server van je provider te uploaden, of om bestanden van een server naar je PC thuis te downloaden. Aanbevolen programma's zijn FileZilla en FireFTP.

FileZilla
FileZilla is een FTP-programma dat je zonder kosten kunt gebruiken. Het beschikt over een uitgebreide Site Manager, waarin je de gegevens van de verbindingen kunt opslaan. Een verbinding kun openen je via de Site Manager, maar ook via een snelknop op de knoppenbalk. De directory-structuur van de harddisk wordt weergegeven naast die van de server en bestanden kunnen eenvoudig via drag and drop vanuit een directory op de harddisk naar een directory op de server en omgekeerd gekopieerd worden. Bestanden die je wilt uploaden of downloaden kun je in een queue (wachtrij) zetten en later in n keer laten overzetten. Afgebroken downloads en uploads kunnen worden hervat (handig als er bij het downloaden of uploaden van grote bestanden bijna aan het eind iets misgaat). Meer informatie over FileZilla vind je bij SourceForge.

FireFTP
Wanneer je Firefox als browser gebruikt, dan kun je bestanden up- en downloaden met de add-on FireFTP. Deze add-on biedt in grote lijnen dezelfde mogelijkheden als FileZilla, maar in plaats van als zelfstandig programma wordt hij uitgevoerd in een tabblad in de browser. Je kunt FireFTP downloaden bij Mozilla Firefox Add-ons.

Grafische programma's
Wanneer je afbeeldingen in je website wilt opnemen, dan kan het soms nodig zijn deze eerst te bewerken. En van de programma's waarmee je dat kan doen, is IrfanView.

IrfanView
IrfanView is een gratis programma dat vooral bekend staat als een image-viewer/converter voor een groot aantal bestandsformaten. Behalve bekijken en omzetten van afbeeldingen kun je met IrfanView echter ook allerlei bewerkingen uitvoeren. Bijvoorbeeld het maken van een uitsnijding, het roteren van de afbeelding, het aanbrengen van effecten en het aanpassen van kleurdiepte, helderheid en contrast. Tot de vele andere mogelijkheden van IrfanView behoort onder meer het maken van schermafdrukken. Meer informatie: IrfanView Dit onderdeel van de Handleiding HTML is nadrukkelijk niet bedoeld als instructie in het gebruik van JavaScript. Het bevat slechts een beperkt aantal voorbeelden, die gebruikt kunnen worden bij het maken van een HTML-document. Verwijzingen naar sites met meer voorbeelden en uitleg worden hierna gegeven. De voorbeelden zijn als volgt onderverdeeld: Informatie over de browser Nieuw venster openen Frames Document openen via keuzelijst Tekst in de statusbalk Lichtkrant Datum en tijd gebruiken

Informatie over het opnemen van scripts in HTML-documenten vind je in het onderdeel Scripts.

Informatie elders
Veel JavaScript oplossingen vind je bij: irt.org - JavaScript Frequently Asked Questions

Beschrijvingen van de mogelijkheden van JavaScript: Netscape DevEdge JavaScript Central Microsoft Script Technologies - JScript

Met behulp van JavaScript kun je bepalen welke browser de bezoeker van je pagina gebruikt en op basis daarvan een gebeurtenis laten plaats hebben. Dat kan bijvoorbeeld handig zijn als in je pagina mogelijkheden opgenomen zijn, welke niet door alle browsers ondersteund worden. Met gebeurtenissen, welke afhankelijk zijn van de browser, kun je bijvoorbeeld ook voorkomen dat bezoekers geconfronteerd worden met fouten in hun browser (zie bijvoorbeeld het onderdeel CSS

en browsers). De volgende voorbeelden worden gegeven: Informatie over de browser weergeven Browsertest Document openen afhankelijk van browser Algemeen script voor browsertest

Informatie over de browser weergeven

Met de eigenschappen appName, appVersion, appCodeName en userAgent van het navigator object kan informatie over de gebruikte browser weergegeven worden, uiteraard alleen als de browser JavaScript ondersteund. Voor de browser, waarmee deze pagina bekeken wordt, ziet de informatie er als volgt uit: navigator.appName: Microsoft Internet Explorer

4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; .NET CLR 1.1.4322) navigator.appCodeName: Mozilla navigator.userAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; .NET CLR 1.1.4322)
In de Body van dit document is voor de appName eigenschap het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write(navigator.appName); //--> </SCRIPT> Voor de overige eigenschappen gaat het op een vergelijkbare manier. De informatie, welke gegeven wordt door de verschillende eigenschappen, kun je in een nieuw venster bekijken voor Microsoft Internet Explorer, Mozilla, Firefox, Netscape Navigator en Opera.

navigator.appVersion:

Browsertest
In het volgende voorbeeld wordt getest, of de bezoeker een bepaalde browser gebruikt. Microsoft Internet Explorer 5.x: Microsoft Internet Explorer 7.0: Netscape Navigator 4: nee nee nee Microsoft Internet Explorer 6.0: Microsoft Internet Explorer 8.0: Mozilla 1.x: nee ja nee

Firefox 1.x Firefox 3.x Opera 9.x:

nee nee nee

Firefox 2.0 Opera 8.x: Opera 10.x:

nee nee nee

Het JavaScript dat voor de test gebruikt wordt, heeft de volgende opzet: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var browser = testcode; document.write(browser ? "ja" : "nee"); //--> </SCRIPT> Eerst wordt voor de browser waarop je wilt testen in een variabele vastgelegd aan welke kenmerken deze moet voldoen. Vervolgens schrijft het script 'ja' als het om de betreffende browser gaat en 'nee' als dat niet het geval is. Hierna wordt voor enkele browsers het script toegelicht. Voor andere browsers is de code die je in het script in plaats van het woord testcode invult, te zien in een nieuw venster Voor Microsoft Internet Explorer 6.0, 7.0 en 8.0 test je in navigator.userAgent op "MSIE 6.0", respectievelijk "MSIE 7.0" en "MSIE 8.0". Omdat Opera ook gebruik kan maken van dit kenmerk, moet je een extra test opnemen: in navigator.userAgent mag de tekst "Opera" niet voor komen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Microsoft Internet Explorer 6.0 var IE60 = (navigator.userAgent.indexOf("MSIE 6.0") != -1) && (navigator.userAgent.indexOf("Opera") == -1); document.write(IE60 ? "ja" : "nee"); //--> </SCRIPT> Voor Netscape Navigator 4 test je in navigator.appName op "Netscape" en in navigator.userAgent op "Mozilla/4". Omdat Opera ook gebruik kan maken van deze kenmerken, moet je weer een extra test opnemen: in navigator.userAgent mag de tekst "Opera" niet voor komen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Netscape Navigator 4 var NN4 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/4") != -1) && (navigator.userAgent.indexOf("Opera") == -1); document.write(NN4 ? "ja" : "nee"); //--> </SCRIPT> Voor de browser Mozilla 1 moet in navigator.userAgent "Gecko" wel voorkomen, maar "Netscape" en "Firefox" juist niet. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Mozilla 1 var MOZ1 = (navigator.userAgent.indexOf("Gecko") != -1) && (navigator.userAgent.indexOf("Netscape") == -1) && (navigator.userAgent.indexOf("Firefox") == -1) && (navigator.userAgent.indexOf("rv:1") != -1);

document.write(MOZ1 ? "ja" : "nee"); //--> </SCRIPT> Voor Firefox x.y test je op de aanwezigheid van "Firefox/x.y" in navigator.userAgent, bijvoorbeeld "Firefox/2.0" of "Firefox/3.5". <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Firefox 2.0 var FF20 = (navigator.userAgent.indexOf("Firefox/2.0") != -1); document.write(FF20 ? "ja" : "nee"); //--> </SCRIPT> In Opera 4 en hoger kan de gebruiker instellen als welke browser het programma gedentificeerd moet worden. De waarde van navigator.userAgent heeft daardoor verschillende uitkomsten. Voor Opera 4 t/m 8 moeten we daarom testen op de aanwezigheid van de tekst "Opera x" of de tekst "Opera/x" in navigator.userAgent, waarbij 'x' het versienummer van de browser is. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Opera 8 var OP8 = (navigator.userAgent.indexOf("Opera 8") != -1) || (navigator.userAgent.indexOf("Opera/8") != -1); document.write(OP8 ? "ja" : "nee"); //--> </SCRIPT> Omdat Opera 10 zich ook identificeert als "Opera 9.80" moet de test voor "Opera 9" uitgebreid worden. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Opera 9 var OP9 = ((navigator.userAgent.indexOf("Opera 9") != -1) || (navigator.userAgent.indexOf("Opera/9") != -1)) && (navigator.userAgent.indexOf("Presto") == -1); document.write(OP9 ? "ja" : "nee"); //--> </SCRIPT> Voor Opera 10 moet je testen op de aanwezigheid van "Presto/2.2.15" (Presto is de lay-out engine van Opera) en "Opera 10". <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Opera 10 var OP10 = (navigator.userAgent.indexOf("Presto/2.2.15") != -1) || (navigator.userAgent.indexOf("Opera 10") != -1); document.write(OP10 ? "ja" : "nee"); //--> </SCRIPT>

Document openen afhankelijk van browser

De browsertest kun je bijvoorbeeld gebruiken om te bepalen welk document geopend moet worden.

Dat kan dan een document zijn, wat speciaal is toegesneden op de mogelijkheden van de betreffende browser. In het volgende voorbeeld wordt slechts de naam van de browser vermeld, maar meer voor de hand liggende mogelijkheden zijn bijvoorbeeld het afhankelijk van de browser gebruiken van stylesheets en inline frames. Probeer dit voorbeeld in een nieuw venster. In de head van het document, dat geopend wordt in het nieuwe venster, staat een script waarin achtereenvolgens getest wordt of het gaat om een bepaalde versie van Microsoft Internet Explorer, Mozilla, Firefox, Netscape Navigator, of Opera. Een klein deel van het script wordt hierna weergegeven. het volledige script kun je in een nieuw venster bekijken. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function browsertest() { if (navigator.userAgent.indexOf("MSIE 3") != -1) { window.location.href="e3.html"; } else if (navigator.userAgent.indexOf("MSIE 4") != -1) { window.location.href="e4.html"; } else ..... } //--> </SCRIPT> Zorg er weer voor dat de code tussen de haakjes achter de if-statements niet onderbroken wordt door een harde overgang naar de volgende regel. Het BODY element van het document in het nieuwe venster, is als volgt opgebouwd: <BODY onload="browsertest();"> ... </BODY>

Algemeen script voor browsertest

Wanneer je vaker in een document gebruik maakt van een browsertest, dan is het wellicht handig om het volgende script als eerste in de head van het document te plaatsen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var nuA var M2 var M3 var M4 var OP var OP3 = navigator.userAgent; = (nuA.indexOf("Mozilla/2") != -1); = (nuA.indexOf("Mozilla/3") != -1); = (nuA.indexOf("Mozilla/4") != -1); = (nuA.indexOf("Opera") != -1); = (nuA.indexOf("Opera/3") != -1) && M3;

var OP35 var OP36 var OP4 var OP5 var OP6 var OP7 var OP8 var OP9 var OP10 var var var var var var var var IE IE3 IE4 IE50 IE55 IE60 IE70 IE80

= (nuA.indexOf("Opera/3") != -1) && M4; = (nuA.indexOf("Opera 3") != -1) && M4; = (nuA.indexOf("Opera 4") != -1) || (nuA.indexOf("Opera/4") != -1); = (nuA.indexOf("Opera 5") != -1) || (nuA.indexOf("Opera/5") != -1); = (nuA.indexOf("Opera 6") != -1) || (nuA.indexOf("Opera/6") != -1); = (nuA.indexOf("Opera 7") != -1) || (nuA.indexOf("Opera/7") != -1); = (nuA.indexOf("Opera 8") != -1) || (nuA.indexOf("Opera/8") != -1); = ((nuA.indexOf("Opera 9") != -1) || (nuA.indexOf("Opera/9") != -1)) && (nuA.indexOf("Presto") == -1); = (nuA.indexOf("Presto/2.2.15") != -1) || (nuA.indexOf("Opera 10") != -1); = = = = = = = = (nuA.indexOf("MSIE") != -1) && !OP; (nuA.indexOf("MSIE 3") != -1); (nuA.indexOf("MSIE 4") != -1); (nuA.indexOf("MSIE 5.0") != -1) && !OP; (nuA.indexOf("MSIE 5.5") != -1) && !OP; (nuA.indexOf("MSIE 6.0") != -1) && !OP; (nuA.indexOf("MSIE 7.0") != -1) && !OP; (nuA.indexOf("MSIE 8.0") != -1) && !OP;

var GECKO = (nuA.indexOf("Gecko") != -1); var MOZ = GECKO && (nuA.indexOf("Netscape") == -1) && (nuA.indexOf("Firefox") == -1); var MOZ1 = MOZ && (nuA.indexOf("rv:1") != -1); var var var var var var var var var var var var var var var FF FF10 FF15 FF20 FF30 FF35 FF36 NN NN2 NN3 NN4 NN6 NN7 NN8 NN9 = = = = = = = = = = = = = = = (nuA.indexOf("Firefox") != -1); (nuA.indexOf("Firefox/1.0") != -1); (nuA.indexOf("Firefox/1.5") != -1); (nuA.indexOf("Firefox/2.0") != -1); (nuA.indexOf("Firefox/3.0") != -1); (nuA.indexOf("Firefox/3.5") != -1); (nuA.indexOf("Firefox/3.6") != -1); (navigator.appName == "Netscape") && !OP && !MOZ; NN && M2; NN && M3; NN && M4; (nuA.indexOf("Netscape6") != -1); (nuA.indexOf("Netscape/7") != -1); (nuA.indexOf("Netscape/8") != -1); (nuA.indexOf("Navigator/9") != -1);

//--> </SCRIPT> Omdat bovenstaande code geen onderdeel is van een functie, kunnen de verschillende variabelen (zoals OP35, NN4 en IE50) direct in andere scripts in hetzelfde document gebruikt worden, zonder de testen opnieuw te hoeven uitvoeren. Een volgend script kan er daardoor bijvoorbeeld als volgt uitzien: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!--

function browseralert() { if (IE) { alert("Wel eens een andere browser dan Internet Explorer geprobeerd?"); } else { alert("Goed zo, jij kiest zelf je browser!"); } } //--> </SCRIPT> Je kunt dit script bijvoorbeeld automatisch laten activeren door aan het BODY element in een document het onload attribuut toe te voegen: <BODY onload="browseralert();"> ... </BODY> Hier wordt het script geactiveerd met behulp van een hyperlink. Aan het A element is daarvoor het onclick attribuut toegevoegd: <P>Probeer dit <A HREF="js-voorbeeld.html" TARGET="voorbeeld" onclick="browseralert(); return false;">voorbeeld</A>.</P> Probeer dit voorbeeld.

Aan het algemene browser script kun je ook nog code toevoegen om te testen of de browser minimaal een bepaald versienummer heeft. Voor Microsoft Internet Explorer net Netscape Navigator t/m versie 4 is het versienummer af te leiden uit de waarde van navigator.appVersion. Voor Microsoft Internet Explorer 4 en hoger gebruik je voor de test de volgende code: var IE4plus = IE && (parseInt(navigator.appVersion) >= 4); Wil je testen op Netscape Navigator 3 en hoger dan is de code: var NN3plus = NN && (parseInt(navigator.appVersion) >= 3); Omdat Netscape Navigator 6 en hoger, Mozilla en Firefox gebruik maken van dezelfde lay-out engine Gecko, kun je voor deze browsers n test uitvoeren. Daarbij heb je twee kenmerken in navigator.userAgent tot je beschikking. Het eerste kenmerk is het versienummer van de Gecko engine en begint met "rv:". Dit versienummer komt overeen met het versienummer van Mozilla, maar wijkt af van de versienummers van Netscape Navigator en Firefox. Het tweede kenmerk is de datum waarop de gebruikte Gecko engine is uitgebracht, vastgelegd in het formaat jjjjmmdd. In de volgende weergave van navigator.userAgent is te zien, dat de genoemde kenmerken voor Netscape Navigator 7.1 en Mozilla 1.4 respectievelijk "rv:1.4" en "20030624" (24 juni 2003) zijn: MOZ 1.4 NN 7.1 Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko/20030624 Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko/20030624 Netscape/7.1

We zullen hier de datum gebruiken om te testen om welke versie van de browser het gaat.

Het volgende script gebruik je als je wilt weten of het gaat om Mozilla 1.4 en hoger, Firefox, of Netscape Navigator 7.1 en hoger. var var var var GECKO begingecko geckodatum MOZ14NN71plus = = = = (nuA.indexOf("Gecko") != -1); nuA.lastIndexOf("Gecko"); nuA.substring(begingecko + 6,begingecko + 14); GECKO && (geckodatum >= 20030624)

Een overzicht van versies van de verschillende browsers en de versiedatum van de ervoor gebruikte Gecko lay-out engine, kun je in een nieuw venster bekijken. Ook voor Opera kun je geen gebruik maken van navigator.appVersion om het versienummer te achterhalen. Het versienummer staat nu echter opgenomen in navigator.userAgent. Wanneer het alleen gaat om het hoofdversienummer (bijvoorbeeld versie 4 of hoger), kun je het volgende script gebruiken. var beginopera = (nuA).lastIndexOf("Opera"); var operahfdversie = (nuA).substring(beginopera + 6,beginopera + 7); var OP4plus = OP && (parseInt(operahfdversie) >= 4); Wanneer ook de subversie van belang is (bijvoorbeeld versie 7.2 of hoger), moet je een wat uitgebreider script gebruiken. In de uiteindelijke test laat je de punt tussen hoofd- en subversienummer weg. var var var var var beginopera operahfdversie operasubversie operaversie OP72plus = = = = = (nuA).lastIndexOf("Opera"); (nuA).substring(beginopera + 6,beginopera + 7); (nuA).substring(beginopera + 8,beginopera + 9); (operahfdversie + operasubversie); OP && (parseInt(operaversie) >= 72);

Tenslotte is het soms handig om de werking van een script te laten afhangen van het platform (Windows, Linux, Macintosh) dat de bezoeker gebruikt, bijvoorbeeld wanneer je een style sheet gebruikt met daarin vaste puntgroottes gedefinieerd. Je kunt dan aan het algemene script een platformtest toevoegen. Hierna is dat gedaan voor Firefox 1.5. var WIN = nuA.indexOf("Win") != -1; var MAC = nuA.indexOf("Mac") != -1; var LIN = nuA.indexOf("Lin") != -1; var FF15w var FF15m var FF15l = FF15 && WIN; = FF15 && MAC; = FF15 && LIN;

Een voorbeeld van het gebruik van een algemeen script voor de browsertest, wordt gegeven bij de beschrijving van browser-specifieke stijlbladen.

Soms is het handig om bepaalde informatie niet in het hoofdvenster weer te geven, maar in een (vaak kleiner) nieuw venster. De bezoeker kan dit nieuwe venster openen, door bijvoorbeeld op een knop of een hyperlink te klikken. Het openen van zo'n nieuw venster kun je het beste regelen via een JavaScript, omdat je dan invloed hebt op hoe het nieuwe venster eruitziet. In het JavaScript maak je gebruik van de open-methode, welke de volgende opbouw heeft:

window.open(URL, vensternaam, vensterkenmerken) URL geeft aan welk document in het nieuwe venster geopend moet worden. De vensternaam kan gebruikt worden in het TARGET attribuut van een hyperlink. De vensterkenmerken bepalen het uiterlijk van het venster. Voor alle voorbeelden in dit onderdeel geldt, dat de code tussen de haakjes achter window.open niet onderbroken mag worden door een harde overgang naar de volgende regel. De volgende voorbeelden worden gegeven: Een kaal of een aangekleed venster Nieuw venster via hyperlink Nieuw venster op de voorgrond Nieuw venster sluiten Hyperlinks in nieuw venster

Een kaal of een aangekleed venster

Met behulp van de vensterkenmerken kun je aangeven, hoe een met behulp van JavaScript te openen venster er moet uitzien. De volgende kenmerken kunnen gebruikt worden: width: de breedte van het venster height: de hoogte van het venster menubar: wel of geen menubalk toolbar: wel of geen knoppenbalk location: wel of geen locatiebalk directories: wel of geen directoryknoppen status: wel of geen statusbalk scrollbars: wel of geen schuifbalken resizable: wel of geen mogelijkheid de afmetingen van het venster te wijzigen top: de afstand tussen de bovenrand van het nieuwe venster en de bovenkant van het scherm left: de afstand tussen de linkerrand van het nieuwe venster en de linkerkant van het scherm

Bij de kenmerken "width", "height", "top" en "left" wordt de waarde aangegeven in pixels, bij de overige kenmerken in "yes" of "no". De kenmerken "width" en "height" hebben betrekking op dat deel van het venster, waarin het document wordt weergegeven en zijn dus exclusief de ruimte die bijvoorbeeld menubalken, knoppenbalken en schuifbalken innemen. De kenmerken "top" en "left" worden alleen door Netscape Navigator 4 en Microsoft Internet Explorer 4 ondersteund. Als geen van de kenmerken wordt benoemd in het script, wordt een compleet opgetuigd venster geopend in de standaard grootte. Als slechts enkele opties worden benoemd, zoals "width" en " height", wordt voor de overige opties als waarde "no" aangehouden. In het volgende voorbeeld zijn in het script alleen de kenmerken "width" en " height" benoemd. Er wordt dus een kaal venster weergegeven. Druk op de knop om het venster te bekijken. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!--

function NieuwVensterA() { window.open("voorbeeld-1a.html", "nieuw", "width=300,height=200"); } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter window.open niet onderbreekt door een harde overgang naar de volgende regel. De knop wordt met een formulier gemaakt, dat in de body van het document is opgenomen. Aan het INPUT element is de onclick event handler toegevoegd (zie het onderdeel Scripts), die ervoor zorgt dat het script wordt uitgevoerd als voor de knop de click gebeurtenis optreedt. <FORM ACTION="geen_actie"> <INPUT TYPE="button" VALUE="Open venster" onclick="NieuwVensterA()"> </FORM> Door extra kenmerken toe te voegen, wordt een meer aangekleed venster weergegeven. Klik op de knop om het venster te bekijken. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterB() { window.open("voorbeeld-1b.html", "nieuw", "width=400,height=250,status=yes,toolbar=yes,location=yes"); } //--> </SCRIPT> De opbouw van de knop is hetzelfde als in het eerste voorbeeld, alleen is de naam van de functie veranderd van NieuwVenster A in NieuwVensterB. Met de kenmerken "top" en "left" kan in browsers die dit ondersteunen de positie van het nieuwe venster bepaald worden. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterC() { window.open("voorbeeld-1c.html", "nieuw", "width=300,height=200,top=200,left=50"); } //--> </SCRIPT>

Nieuw venster via hyperlink

In de voorgaande voorbeelden is gebruik gemaakt van een knop om het nieuwe venster te openen. Veel vaker zal echter gebruik gemaakt worden van een hyperlink, zoals in het volgende voorbeeld. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterD() { window.open("voorbeeld-2a.html", "nieuw", "width=300,height=200"); } //--> </SCRIPT> De hyperlink is als volgt opgebouwd: <A HREF="voorbeeld-2a.html" TARGET="nieuw" onclick="NieuwVensterD(); return false;">hyperlink</A> De onclick event handler in de hyperlink, zorgt ervoor dat het script wordt uitgevoerd. De toevoeging "return false" aan de onclick event handler bepaalt, dat niet gelijktijdig de normale actie van de hyperlink moet worden uitgevoerd. In het HREF attribuut wordt ook verwezen naar het document, dat in het nieuwe venster geopend moet worden. Het TARGET attribuut heeft als waarde de naam van het venster, zoals dat in het script is gedefinieerd. Het zorgt ervoor dat browsers die JavaScript niet ondersteunen, niet het huidige venster vervangen, maar toch een nieuw (weliswaar standaard) venster openen. Bovendien wordt door het opnemen van het TARGET attribuut voorkomen, dat in browsers die "return false" niet ondersteunen, gelijktijdig het huidige document wordt vervangen en een nieuw venster wordt geopend. Netscape Navigator 2 ondersteunt bij gebruik van een hyperlink als hiervoor geen kenmerken voor het nieuwe venster, dat daardoor altijd als een volledig nieuw browservenster geopend wordt. Bovendien heeft Netscape Navigator 2 problemen met het openen van nieuwe vensters van een verschillend formaat tijdens n browsersessie: als eenmaal een bepaald formaat venster is geopend, krijgen alle volgende nieuwe vensters dezelfde afmetingen. De voorbeelden hierna kunnen daardoor anders dan bedoeld weergegeven worden. Klik op deze hyperlink om een nieuw venster te openen.

In de eerder gebruikte voorbeelden is in het script opgenomen, welk document geopend moet worden in het nieuwe venster. Als het openen van een nieuw venster vaker in een document voorkomt, is het niet handig elke keer een nieuw script te gebruiken. Je kunt dan beter gebruik maken van een algemener script en het te openen document specificeren in de onclick event handler in de hyperlink. In het volgende voorbeeld maken twee hyperlinks gebruik van hetzelfde script: hyperlink 1 hyperlink 2 In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterE(URL) { window.open(URL, "nieuw", "width=300,height=200"); }

//--> </SCRIPT> De hyperlinks hebben de volgende opbouw: <A HREF="voorbeeld-2b.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2b.html'); return false;">hyperlink 1</A> en <A HREF="voorbeeld-2c.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2c.html'); return false;">hyperlink 2</A>

In plaats van de onclick event handler kan ook gebruik gemaakt worden van de onmouseover event handler. Het nieuwe venster wordt dan geopend als de muisaanwijzer over de hyperlink beweegt. De volgende afbeelding is opgenomen in een hyperlink. Gebruik wordt gemaakt van hetzelfde script als in de voorbeelden hiervoor.

De hyperlink heeft de volgende opbouw: <A HREF="voorbeeld-2d.html" TARGET="nieuw" onmouseover="NieuwVensterE('voorbeeld-2d.html'); return false;"><IMG SRC="handleiding-html.gif" WIDTH="84" HEIGHT="27" BORDER="0" ALT="Handleiding HTML"></A>

Nieuw venster op de voorgrond

Als je in een nieuw venster meerdere keren na elkaar een document wilt openen vanuit het hoofdvenster, dan is het niet nodig dat de bezoeker het nieuwe venster steeds sluit. Door te klikken op een volgende hyperlink, wordt de inhoud van het nieuwe venster automatisch ververst. Probleem is wel dat door het klikken in het hoofdvenster, het nieuwe venster op de achtergrond wordt geplaatst. Vanuit de blik van de bezoeker lijkt het klikken daardoor geen effect te hebben. Je kunt dit echter verhelpen met een JavaScript dat er voor zorgt dat het venster op de voorgrond wordt geplaatst. De eenvoudigste manier zou zijn het toevoegen van de onload event handler met de waarde "self.focus()" aan het BODY element van het in het nieuwe venster te openen document. Omdat Netscape Navigator 2 de focus methode niet kent en een foutmelding geeft, is het echter nodig een tussenstap te maken, waarbij het gebruik van de focus-methode voor deze browser wordt uitgesloten. De focus-methode werkt ook niet in Microsoft Internet Explorer 3 en in Opera, maar dit levert geen foutmelding op. In het volgende voorbeeld, waarin gebruik gemaakt wordt van een eerder beschreven script om het nieuwe venster te openen, kun je bekijken of en hoe het werkt. Klik achtereenvolgens op hyperlink 1, 2 en 3. Het eerste nieuwe venster komt zoals gebruikelijk op de voorgrond, het tweede vind je achter het hoofdvenster en het derde komt als gevolg van de focus-methode weer op de voorgrond. hyperlink 1 hyperlink 2 hyperlink 3

In de head van het document dat je opent met behulp van hyperlink 3 is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var NN2 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/2") != -1); function VensterFocus() { if (!NN2) { self.focus(); } } //--> </SCRIPT> en de activering van het BODY element van dit document heeft de volgende opbouw: <BODY ... onload="VensterFocus()">

Nieuw venster sluiten

Met JavaScript kun je niet alleen een nieuw venster openen, maar je kunt het ook weer sluiten. Het nieuwe venster wordt, op een vergelijkbare wijze als bij eerdere voorbeelden, geopend met een hyperlink. In het document in het nieuwe venster staat in de body een script, dat een hypertext link plaatst. De waarde van het HREF attribuut bevat een JavaScript opdracht, welke ervoor zorgt dat bij klikken het venster wordt gesloten. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write('<A HREF="JavaScript:parent.close()">Sluit</A> dit venster.') //--> </SCRIPT> Voor browsers die JavaScript niet ondersteunen, kun je het NOSCRIPT element opnemen: <NOSCRIPT>Dit is een nieuw venster. Sluit het op de gebruikelijke wijze.</NOSCRIPT>

Wanneer je het nieuwe venster na een bepaalde tijd automatisch wilt laten sluiten, dan moet je het volgende script opnemen in het te openen document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function SluitVenster() { setTimeout("Verwijder()",3000); } function Verwijder() { close();

} //--> </SCRIPT> De in de setTimeOut methode in het script opgenomen waarde geeft aan, na hoeveel milliseconden het venster sluit. Aan het BODY element van het document in het nieuwe venster voeg je onload event handler toe: <BODY onload="SluitVenster();"> ... </BODY> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.

Als je in een document meerdere keren een pop-up venster gebruikt, kun je het sluiten van het nieuwe venster eenvoudiger regelen via het script, waarmee je het opent. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenSluit(URL) { venster = window.open(URL, "nieuw", "width=300,height=200"); setTimeout("venster.close()",3000); } //--> </SCRIPT> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.

Hyperlinks in nieuw venster

Soms wil je in een nieuw venster hyperlinks opnemen, die een document openen in het venster, van waaruit het nieuwe venster geopend is. Je kunt dan gebruik maken van de opener eigenschap, welke ondersteund wordt door Netscape Navigator 3 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger. Door de opener eigenschap bovendien nog eens apart te definiren in het document, van waaruit het nieuwe venster geopend wordt, kan ook Netscape Navigator 2 er gebruik van maken. Omdat Opera 3 niet met het script overweg kan, mag het door deze browser niet worden uitgevoerd. Daarom wordt eerst getest om welke browser gaat. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script in de head van dit document ziet er als volgt uit: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var OP3 = (navigator.userAgent.indexOf("Opera/3") != -1) && (navigator.userAgent.indexOf("Mozilla/3") != -1); var NN2 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/2") != -1);

function Index(URL) { if (OP3) { alert('Deze mogelijkheid wordt niet door Opera 3 ondersteund.'); } else { indexvenster = window.open(URL, "nieuw", "width=300,height=200"); if (NN2) { indexvenster.opener = self; } } } //--> </SCRIPT> De link waarmee je het venster opent, heeft bijvoorbeeld de volgende opbouw: <A HREF="JavaScript:Index('voorbeeld-5a.html')">Inhoudsopgave</A> In het document in het nieuwe venster is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenLink(URL) { window.opener.location.href = URL; } //--> </SCRIPT> Een link in het document in het nieuwe venster heeft de volgende opbouw: <A HREF="JavaScript:OpenLink('js-venster.html#teruglinken')">Hyperlinks in nieuw venster</A> Open de inhoudsopgave en bekijk hoe het voorbeeld werkt in Netscape Navigator 2 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger. Wanneer je het nieuwe venster wilt sluiten, nadat op een hyperlink is geklikt, voeg je aan het script in het nieuwe venster "window.close()" toe. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenLink(URL) { window.opener.location.href = URL; window.close(); } //--> </SCRIPT> Open de inhoudsopgave en bekijk in Netscape Navigator 2 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger hoe het nieuwe venster na het klikken op een hyperlink sluit. Met de hyperlink waarmee je in dit voorbeeld het nieuwe venster opent, kunnen browsers die JavaScript niet ondersteunen, of waarin JavaScript niet is toegestaan, niets beginnen. Daarom is het misschien verstandig een dergelijke link te verbergen voor die browsers. Dat doe je ook weer met JavaScript:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-indexlink = "<A HREF=\"JavaScript:Index('voorbeeld-5b.html')\">" indexlink += "Inhoudsopgave<\/A>" document.write(indexlink); //--> </SCRIPT> JavaScript wordt veel gebruikt in combinatie met documenten met frames. De bekendste toepassing is wel het gelijktijdig vervangen van documenten in meerdere frames. Een andere is het voorkomen dat je eigen site geopend wordt in een frame van iemand anders. In dit onderdeel worden enkele voorbeelden van scripts in combinatie met frames gegeven: Meerdere frames tegelijk updaten Meerdere keren frames tegelijk updaten Ander frame updaten bij openen document Document openen in volledig venster Document niet buiten frames openen

De voorbeelden werken correct in Netscape Navigator 3.0 en hoger en Microsoft Internet Explorer 4.0 en hoger. Met de eerste drie voorbeelden hebben Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 soms problemen (zie de toelichting bij de voorbeelden). Zorg dat je het bekijken van je site niet afhankelijk maakt van JavaScript. Lang niet elke bezoeker zal JavaScript gebruiken en daarom is het belangrijk dat de site ook goed bekeken kan worden zonder het updaten van frames met behulp van JavaScript.

Meerdere frames tegelijk updaten

Met behulp van JavaScript kun je met n klik op een hyperlink twee frames tegelijkertijd updaten. Dat is vooral handig wanneer je niet de inhoud van alle frames van een frameset wilt wijzigen, of wanneer het gaat om frames die niet tot hetzelfde frameset behoren. Bekijk eerst het voorbeeld in een nieuw venster. Uitgangspunt is een document met twee framesets, waarin de frames de namen links, rechtsboven en rechtsonder hebben: <FRAMESET COLS="*,3*"> <FRAME SRC="voorbeeld-1a.html" NAME="links"> <FRAMESET ROWS="*,*"> <FRAME SRC="voorbeeld-1b.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-1c.html" NAME="rechtsonder"> </FRAMESET> </FRAMESET> De hyperlink in het voorbeeld is als volgt opgebouwd: <A HREF="geenscript.html" onclick="FrameUpdate(); return false;">Update twee frames</A> In plaats van "geenscript.html" in het HREF attribuut kun je het beste de URI opnemen van het document, dat je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Zonodig

voeg je dan ook het TARGET attribuut toe. De toevoeging "return false" aan de onlick event handler zorgt ervoor, dat alleen het script wordt uitgevoerd en niet gelijktijdig het in het HREF attribuut opgegeven bestand geopend wordt. In de head van het document waarin de hyperlink is opgenomen, staat het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent.rechtsboven.location.href = "voorbeeld-1d.html"; parent.rechtsonder.location.href = "voorbeeld-1e.html"; } //--> </SCRIPT> In dit script wordt gebruik gemaakt van de eigenschap "location.href", welke bepaalt dat het gaat om de volledige URI van het te openen document. De eigenschap "parent.frame_naam" geeft aan in welk frame het document geopend moet worden. Daarbij verwijst "parent" naar het frameset, waarvan het huidige frame (dat wil zeggen het frame waarin de hyperlink staat) deel uitmaakt. Wanneer het document geopend moet worden in het bovenste frameset in het venster, dan gebruik je "top" in plaats van "parent". Omdat het in het voorbeeld gaat om het bovenste frameset, had de opbouw van het eerste statement in het script er ook als volgt kunnen uitzien: top.rechtsboven.location.href = "voorbeeld-1d.html"; Wanneer je ook het frame waarin de hyperlink staat wilt updaten, dan gebruik je "self" in plaats van "parent.frame_naam_x". Bijvoorbeeld: self.location.href = "bestemming"; In plaats van de naam van het frame kun je ook "frames[y]" gebruiken, waarbij "y" het nummer is van het frame. Bij de telling wordt gestart bij "0" en de volgorde aangehouden, waarin de frames zijn gedefinieerd. In het voorbeeld is "frames[0]" het frame met de naam "links" en zijn de frames "rechtsboven" en "rechtsonder" respectievelijk "frames[1]" en "frames[2]". Het script kun je dus ook als volgt opbouwen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent.frames[1].location.href = "voorbeeld-1d.html"; parent.frames[2].location.href = "voorbeeld-1e.html"; } //--> </SCRIPT> Een script als in het voorbeeld kun je ook gebruiken, wanneer meer dan twee frames tegelijk gewijzigd moeten worden. Voor drie frames bijvoorbeeld is de opbouw van het script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!--

function FrameUpdate() { parent.frame_naam_1.location.href = "bestemming_1"; parent.frame_naam_2.location.href = "bestemming_2"; parent.frame_naam_3.location.href = "bestemming_3"; } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame, waarin het document geopend moet worden en in plaats van "bestemming_y" het pad en de bestandsnaam van het te openen document.

De hier beschreven oplossing voor het updaten van meerdere frames tegelijkertijd werkt probleemloos in Netscape Navigator 3 en hoger en in Microsoft Internet Explorer 4 en hoger. In Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 wordt het script alleen goed uitgevoerd, indien de in een frame te openen documenten steeds in dezelfde directory staan. Nadat via het script eenmaal documenten uit een andere directory geopend zijn, geeft de browser bij het vervolgens openen van documenten uit de eerste of een nog andere directory de foutmelding dat het bestand niet gevonden wordt. Dat gebeurt ook als je in een volgende document hetzelfde script gebruikt. Een oplossing kan zijn als bestemming niet alleen een pad en bestandsnaam op te nemen, maar een complete URI. Bijvoorbeeld: parent.rechtsboven.location.href = "http://www.handleidinghtml.nl/javascript/voorbeeld-1d.html"; Nadeel van een complete URI is dat je de site niet meer offline kunt bekijken. Als je dat toch wilt en het niet mogelijk is alle documenten in dezelfde directory te plaatsen, dan kun je er als alternatief ook voor zorgen dat Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 het script niet uitvoeren. Je doet dat door het script eerst te laten controleren welke browser gebruikt wordt en vervolgens de opdracht alleen te laten uitvoeren wanneer het gaat om Netscape Navigator 3 en hoger of Microsoft Internet Explorer 4 en hoger. Het controleren doe je op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Voor het updaten van twee frames ziet het script er nu als volgt uit: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { if (IE4plus || NN3plus) { parent.rechtsboven.location.href = "voorbeeld-1d.html"; parent.rechtsonder.location.href = "voorbeeld-1e.html"; } } //--> </SCRIPT>

Meerdere keren frames tegelijk updaten

Wanneer je vanuit n document meerdere keren de inhoud van twee frames tegelijkertijd wilt updaten, dan is het handig om de URL's niet in het script te plaatsen, maar in de hyperlinks. Je voorkomt daarmee dat je voor elke link een script moet opnemen.

Bekijk eerst het voorbeeld in een nieuw venster. Uitgangspunt is weer een document met twee framesets, waarin de frames de namen links, rechtsboven en rechtsonder hebben: <FRAMESET COLS="*,3*"> <FRAME SRC="voorbeeld-2a.html" NAME="links"> <FRAMESET ROWS="*,*"> <FRAME SRC="voorbeeld-2b.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-2c.html" NAME="rechtsonder"> </FRAMESET> </FRAMESET> De hyperlinks zijn als volgt opgebouwd: <A HREF="geenscript1.html" onclick="FrameUpdate('voorbeeld-2d.html', 'voorbeeld-2e.html'); return false;">Update twee frames</A> <A HREF="geenscript2.html" onclick="FrameUpdate('voorbeeld-2f.html', 'voorbeeld-2g.html'); return false;">Update de frames opnieuw</A> In plaats van "geenscriptx.htm" in het HREF attribuut kun je het beste de URI's opnemen van de documenten, die je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Zonodig voeg je dan ook het TARGET attribuut toe. De toevoeging "return false" aan de onlick event handler zorgt ervoor, dat alleen het script wordt uitgevoerd en niet gelijktijdig het in het HREF attribuut opgegeven bestand geopend wordt. In de head van het document waarin de hyperlinks staan opgenomen, staat het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2) { parent.rechtsboven.location.href = URL1; parent.rechtsonder.location.href = URL2; } //--> </SCRIPT> Uiteraard kun je ook meer dan twee frames tegelijk updaten. Voor drie frames bijvoorbeeld is de opbouw van het script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2, parent.frame_naam1.location.href parent.frame_naam2.location.href parent.frame_naam3.location.href } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame, waarin het document geopend moet worden. URL3) { = URL1; = URL2; = URL3;

Voor een bijbehorende hyperlink is de opbouw: <A HREF="geenscript.htm" onclick="FrameUpdate('bestemming_1', 'bestemming_2', 'bestemming_3'); return false;">Omschrijving link</A> In plaats van "bestemming_x" neem je het pad en de bestandsnaam op van het te openen document.

Om foutmeldingen te voorkomen wanneer de andere frames niet aanwezig zijn (bijvoorbeeld indien het document waarin de linken staan geopend is in het volledige venster), is het verstandig te laten testen of een frameset bestaat en bijvoorbeeld de naam van n frame overeenkomt. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2) { if ((parent.frames.length > 0) && (parent.frames[1].name == "rechtsboven")) { parent.rechtsboven.location.href = URL1; parent.rechtsonder.location.href = URL2; } } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Ook bij dit voorbeeld speelt dat Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 een foutmelding geven als de in een bepaald frame te openen documenten niet steeds in dezelfde directory staan. Het kan daarom nodig zijn, net als in het vorige voorbeeld, de werking van het script afhankelijk te maken van de gebruikte browser. De browsertest doe je op basis van het algemene script, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het updaten van frames krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2) { if (IE4plus || NN3plus) { if ((parent.frames.length > 0) && (parent.frames[1].name == "rechtsboven")) { parent.rechtsboven.location.href = URL1; parent.rechtsonder.location.href = URL2; } } } } //--> </SCRIPT>

Ander frame updaten bij openen document

Wanneer je bij het openen van een document in een frame altijd gelijk een ander frame uit hetzelfde frameset wilt updaten, moet je in de head van het document het volgende script opnemen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-parent.frame_naam.location.href = "bestemming"; //--> </SCRIPT> In plaats van "frame_naam" neem je de naam op van het frame, dat je wilt updaten en in plaats van "bestemming" het pad en de bestandsnaam van het document, dat in het te updaten frame geopend moet worden: Bekijk het voorbeeld in een nieuw venster. Om foutmeldingen te voorkomen wanneer het andere frame niet aanwezig is (bijvoorbeeld indien het document geopend wordt in het volledige venster), is het verstandig te laten testen of een frameset bestaat en de naam van het frame overeenkomt. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if ((parent.frames.length > 0) && (parent.frames[x].name == "frame_naam")) { parent.frame_naam.location.href = "bestemming"; } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Gezien de problemen die Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3 hebben met het openen van documenten die zich niet steeds in dezelfde directory bevinden (zie een eerder voorbeeld), kan het nodig zijn de werking van het script afhankelijk te maken van de gebruikte browser. De browsertest doe je op basis van het algemene script, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het updaten van een ander frame krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (IE4plus || NN3plus) { if ((parent.frames.length > 0) && (parent.frames[x].name == "frame_naam")) { parent.frame_naam.location.href = "bestemming"; } }

//--> </SCRIPT>

Document openen in volledig venster

Wanneer je zelf in je documenten hyperlinks opneemt, kun je met behulp van het TARGET attribuut aangegeven of het document in een frame (en zo ja welk), in het volledige venster, of in een nieuw venster geopend moet worden. Als iemand anders een link naar een document van jou opneemt, heb je er geen controle over hoe deze geopend worden: in het volledige venster, of in een frameset van die ander. Door een klein JavaScript in de head je document op te nemen, kun je voorkomen dat het document in een frameset van een ander komt. Getest wordt hoeveel frames er zijn in het venster, waarin het document geopend wordt. Als dit aantal ongelijk is aan "0", dan wordt het document in het volledige venster geopend. Bekijk het voorbeeld. In de head van je document plaats je het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top.frames.length != 0) { top.location.href = self.document.location; } //--> </SCRIPT> In het document dat je in het volledige venster laat openen, kun je zelf overigens gewoon weer framesets definiren.

Document niet buiten frames openen

Soms gebruik je documenten, bijvoorbeeld in een navigatieframe, waarvan je niet wilt dat ze geopend worden in een volledig venster. In dat geval kun je het onderstaande script in de head van het document opnemen. In het script wordt getest of het frameset het juiste aantal frames heeft en of het document wel in het juiste frame geopend wordt. Wordt niet aan deze condities voldaan, dan wordt een ander document geopend. Bijvoorbeeld de beginpagina van je site. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top.frames.length != n || (parent.frames[y].name != "framenaam")) { top.location.href = "bestemming"; } //--> </SCRIPT> In plaats van "bestemming" neem je het pad en de bestandsnaam van het als vervanging te openen document op en voor "n" het aantal frames waarmee je werkt. In plaats van "y" neem je het nummer van

het frame (bij de telling wordt gestart bij "0" en de volgorde aangehouden, waarin de frames zijn gedefinieerd) en "framenaam" vervang je door de naam van het frame.

Keuzelijsten worden in combinatie met JavaScript veel gebruikt als alternatief voor een lange opsomming van hyperlinks. Daarbij wordt aan het SELECT element de onchange event handler toegevoegd (zie het onderdeel Scripts). Als de bezoeker een mogelijkheid uit de keuzelijst kiest, treedt de change gebeurtenis op en wordt het bijbehorende script uitgevoerd. De volgende voorbeelden worden gegeven: Document vervangen via keuzelijst Document openen in frame Document openen in nieuw venster

Document vervangen via keuzelijst

Bekijk een voorbeeld in een nieuw venster. In de body van het document staat het volgende formulier: <FORM ACTION="geen_actie" NAME="snelmenu"> <SELECT NAME="documentkeuze" onchange="openURI()"> <OPTION VALUE="geen-url" SELECTED>Kies document</OPTION> <OPTION VALUE="keuze1.html">Document 1</OPTION> <OPTION VALUE="keuze2.html">Document 2</OPTION> <OPTION VALUE="keuze3.html">Document 3</OPTION> </SELECT> </FORM> Als waarde van het VALUE attribuut van het OPTION element is de URI van het te openen document opgenomen. In het voorbeeld is dat een bestand in dezelfde directory als het document, waarin de keuzelijst staat. Het kan echter ook een complete URI zijn: <OPTION VALUE="http://www.handleidinghtml.nl/algemeen/wijzigingen.html">Laatste wijzigingen</OPTION> In de head van het document in het nieuwe venster is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { location.href = control.options[control.selectedIndex].value; } } //--> </SCRIPT>

Om lange statements te voorkomen is in de functie "openURI" eerst de variabele "control" gedefinieerd, waarin is vastgelegd op welk formulier en welk control (formulieronderdeel) de functie betrekking heeft. Hierbij verwijst "snelmenu" naar het juiste formulier in het document en "documentkeuze" verwijst naar de juiste keuzelijst. Vervolgens wordt gecontroleerd of een geldige waarde voor het VALUE attribuut van het OPTION element is geselecteerd. Als dat zo is, wordt de geselecteerde URI gebruikt om het goede document te openen. Omdat de keuzelijst alleen werkt in browsers die JavaScript ondersteunen, is het verstandig ook het formulier op te bouwen met behulp van JavaScript: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var d = document; d.write('<FORM ACTION="geen_actie" NAME="snelmenu">'); d.write('<SELECT NAME="documentkeuze" onchange="openURI()">'); d.write('<OPTION VALUE="geen-url" SELECTED>Kies document<\/OPTION>'); d.write('<OPTION VALUE="keuze1.html">Document 1<\/OPTION>'); d.write('<OPTION VALUE="keuze2.html">Document 2<\/OPTION>'); d.write('<OPTION VALUE="keuze3.html">Document 3<\/OPTION>'); d.write('<\/SELECT>'); d.write('<\/FORM>'); //--> </SCRIPT> Voor een toelichting op het gebruik van de backslash in de beindiging van de verschillende elementen zie het onderdeel Scripts. Omdat niet elke browser JavaScript kan of mag ondersteunen is het goed om ook een alternatief voor de keuzelijst op te nemen. Dat kan met behulp van het NOSCRIPT element en wordt toegelicht in het onderdeel Hyperlinks.

Document openen in frame

Wanneer je werkt met frames, dan kun je de keuzelijst opnemen in een navigatieframe. Bekijk een voorbeeld daarvan in een nieuw venster. Uitgangspunt is een frameset met twee frames, welke de namen boven en onder hebben: <FRAMESET ROWS="*,*"> <FRAME SRC="keuze1.html" NAME="boven"> <FRAME SRC="keuze2.html" NAME="onder"> </FRAMESET> In de head van het document in het bovenste frame is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { parent.onder.location.href = control.options[control.selectedIndex].value; }

} //--> </SCRIPT> In de body van het document staat een formulier met dezelfde opbouw als in het eerste voorbeeld.

Document openen in nieuw venster

Het geselecteerde document kun je ook in een nieuw venster laten openen:

In de head van dit document staat het volgende script. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { URI = control.options[control.selectedIndex].value; window.open(URI, "nieuw", "width=300,height=200"); } } //--> </SCRIPT> Het formulier in de body van dit document heeft weer dezelfde opbouw als in het eerste voorbeeld. Het script werkt goed in de meeste browsers, met uitzondering echter van Netscape Navigator 2. Om de uitvoering van het script door deze browser te voorkomen, kun je daarom het beste eerst testen om welke browser het gaat. Die test kun je doen op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het openen van een document in een nieuw venster krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { if (!NN2) { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { URL = control.options[control.selectedIndex].value; window.open(URL, "nieuw", "width=300,height=200"); } } } //--> </SCRIPT> Ook het opbouwen van het formulier met de keuzelijst kun je voorkomen in Netscape Navigator 2:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (!NN2) { document.write('<FORM>'); ... document.write('<\/FORM>'); } //--> </SCRIPT> Met behulp van JavaScript kun je een tekst laten weergeven in de statusbalk van de browser. Bijvoorbeeld een toelichting op een hyperlink of een copyright-melding bij het openen van een document. Omdat scrollende (bewegende) teksten in de statusbalk bij nogal wat mensen irritatie opwekken, wordt geadviseerd het gebruik ervan te beperken. De volgende voorbeelden worden gegeven: Toelichting bij een hyperlink of afbeelding Tekst in de statusbalk bij openen document Scrollende tekst in statusbalk

Toelichting bij een hyperlink of afbeelding

De tekst in de statusbalk verschijnt als je de muisaanwijzer boven de hyperlink schuift. Hij verdwijnt weer na een in te stellen aantal milliseconden. Beweeg de muisaanwijzer op de hyperlink Doe het ook met deze hyperlink De onmouseover event handler (zie het onderdeel Scripts), die er voor zorgt dat het script wordt aangeroepen, werkt alleen bij hyperlinks. Als je een afbeelding opneemt in een hyperlink, kun je die echter ook van een toelichtend bericht voorzien.

De eerste hyperlink in de body van dit document heeft de volgende opbouw: <A HREF="bestemming" onmouseover="moveover('Deze link is fake');return true;">Beweeg de muisaanwijzer op de link</A> Voor de afbeelding is de opbouw: <A HREF="http://www.handleidinghtml.nl" onmouseover="moveover('Bezoek de Handleiding HTML voor uitgebreide informatie over HTML en CSS'); return true;"><IMG SRC="handleiding-html.gif" WIDTH="84" HEIGHT="27" BORDER="0" ALT="Handleiding HTML"></A> Als waarde van het HREF attribuut gebruik je in plaats van "bestemming" uiteraard een bestaande URI.

Zorg er voor dat in het onmouseover event handler de complete tekst van de boodschap inclusief de aanhalingstekens op dezelfde regel staat en niet onderbroken wordt door een harde overgang naar de volgende regel. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function moveover(txt) { window.status = txt; setTimeout("erase()",3000); } function erase() { window.status=""; } //--> </SCRIPT> De in de setTimeout-methode opgenomen waarde geeft aan, na hoeveel milliseconden de boodschap weer verdwijnt. In Opera 3 en 3.5 werkt onmouseover alleen zolang de muisaanwijzer op de hyperlink staat.

Door Netscape Navigator 3 en hoger en Microsoft Internet Explorer 4 en hoger wordt naast de onmouseover event handler ook de onmouseout event handler ondersteund. Je kunt daarmee het bericht in de statusbalk laten verdwijnen, als de muisaanwijzer weer van de hyperlink af gaat. Gezien het gedrag van Opera 3 en 3.5 bij onmouseover, valt bij deze browsers geen actie te omschrijven bij de onmouseout event handler. Beweeg de muisaanwijzer over de link De hyperlink heeft de volgende opbouw: <A HREF="bestemming" onmouseover="BeweegMuisOp('De muisaanwijzer staat op de link');return true;" onmouseout="BeweegMuisAf();">Beweeg de muis over de link</A> In het script in de head van dit document wordt eerst getest welke browser gebruikt wordt. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus voor het volgende script in het document plaatsen. Als het gaat om Netscape Navigator 2 of Microsoft Internet Explorer 3, dan wordt de setTimeoutmethode toegepast. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function BeweegMuisOp(txt) { if (!NN2 && !IE3) { window.status = txt; setTimeout("BeweegMuisAf()",3000); } else { window.status = txt; } }

function BeweegMuisAf() { window.status=""; } //--> </SCRIPT>

Volgend voorbeeld Met JavaScript kun je een lichtkrant in je document opnemen. Zo'n lichtkrant kan als alternatief dienen voor de lichtkrant die je kunt maken met het MARQUEE element. Overigens is het goed te bedenken dat niet alle bezoekers zitten te wachten op allerlei bewegende onderdelen op je pagina. Enige beperking kan dus geen kwaad.

Standaard lichtkrant
De volgende standaard lichtkrant start bij het openen van het document:

In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var timerID = null; var timerRunning = false; var id,pause=0,position=0; function ticker() { var i,k,msg="Dit is de inhoud van de lichtkrant."; k=(75/msg.length)+1; for(i=0;i<=k;i++) msg+=" "+msg; document.lichtkrant1.veld1.value= msg.substring(position,position+95); if(position++==38) position=0; id=setTimeout("ticker()",1000/10); } function action() { if(!pause) { clearTimeout(id); pause=1; } else { ticker(); pause=0; } } //--> </SCRIPT> Om het tekstveld te verbergen in browsers die JavaScript niet ondersteunen, wordt het formulier geopend met een in de body van het document geplaatst script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write('<DIV ALIGN="center">'); document.write('<FORM NAME="lichtkrant1" ACTION="geen_actie">'); document.write('<INPUT TYPE="text" NAME="veld1" SIZE="50">'); document.write('<\/FORM>'); document.write('<\/DIV>'); ticker() //--> </SCRIPT> Met behulp van JavaScript kunnen allerlei mogelijkheden van datum en tijd in een document worden opgenomen. Veel daarvan vallen buiten het bestek van de Handleiding HTML. Hier worden daarom slechts enkele voorbeelden van de huidige datum en tijd en de laatste wijzigingsdatum gegeven. Bij deze voorbeelden wordt gebruik gemaakt van Date object. Het volgende script, geplaatst in de body van het document, geldt de basis voor de gebruikte voorbeelden. Het geeft de datum en tijd bij openen van het document weer. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-nu = new Date(); document.write(nu); //--> </SCRIPT> De uitkomst van het script is:

Wed Apr 25 11:31:54 UTC+0200 2012

Deze uitkomst zal niet voor elke browser hetzelfde zijn. Bovendien is het niet een erg aantrekkelijke manier om de datum en de tijd weer te geven. Daarom worden in de voorbeelden verschillende methoden van het Date object gebruikt om de weergave te bepalen: getDate, getDay,getMonth, getYear, getHours, getMinutes en getSeconds. De volgende voorbeelden worden gegeven: De huidige datum De laatste wijzigingsdatum van een document De huidige tijd Welkomstbericht afhankelijk van de tijd

De huidige datum
Door gebruik te maken van de methodes getDate, getMonth en getYear worden uit het Date object respectievelijk de dag van de maand, de maand en het jaar gehaald. De huidige datum is:

25-04-2012

In de body van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!--

var var var var var var var

nu = new Date(); dag = nu.getDate(); dag2 = ((dag < 10) ? "0" : "") + dag; maand = nu.getMonth() + 1; maand2 = ((maand < 10) ? "0" : "") + maand; jaar = nu.getYear(); jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

document.write(dag2 + "-" + maand2 + "-" + jaar4); //--> </SCRIPT> Omdat in JavaScript de maand januari correspondeert met "0", wordt getMonth met 1 verhoogd. De variabelen "dag2" en "maand2" zorgen ervoor dat de dag en de maand altijd met twee cijfers worden weergegeven: voor de getallen 1 t/m 9 wordt een "0" geplaatst. De variabele "jaar4" wordt gebruikt om het jaar in 4 cijfers weer te geven. Browsers die de eerste versie van JavaScript gebruiken (Netscape Navigator 2, Internet Explorer 3 en Opera 3) geven het jaar tot 2000 weer in twee cijfers en plaatsen er daarna een "1" voor (het jaar 2001 wordt dus weergeven als 101). Door te testen op kleiner of groter dan 1900 en de waarde zo nodig te verhogen met 1900, wordt het script millennium-proof gemaakt.

Door met arrays te werken kunnen de dag van de week (verkregen via getDay) en de maand (verkregen via getMonth) omgezet worden in tekst. Wanneer je ook de begeleidende tekst in het script opneemt, zien gebruikers van een browser die JavaScript niet ondersteunt, niets.

Het is vandaag woensdag 25 april 2012

Het in de body van dit document gebruikte script heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i]; } var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); var var var var var var nu = new Date(); dagtekst = dagArray[(nu.getDay()+1)]; dag = nu.getDate(); maandtekst = maandArray[(nu.getMonth()+1)]; jaar = nu.getYear(); jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

var datumweergave = "Het is vandaag " + dagtekst + " " + dag + " " + maandtekst + " " + jaar4; document.write(datumweergave);

//--> </SCRIPT> Omdat in JavaScript de dag van de week correspondeert met "0", wordt getDay met 1 verhoogd.

De laatste wijzigingsdatum van een document

Met behulp van de lastModified eigenschap kun je de laatste wijzigingsdatum van een document laten weergegeven. Je gebruikt daarvoor het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write(document.lastModified); //--> </SCRIPT> Als resultaat zie je:

04/25/2012 11:31:54

N.B. Wanneer je een document met dit script offline op je eigen systeem bekijkt, zie je in het algemeen de correcte laatste wijzigingsdatum. Of je de juiste datum ook online te zien krijgt, is afhankelijk van de informatie die de browser van de server ontvangt. Indien de server de LastModified informatie niet in de zogenaamde HTTP-header meestuurt, wordt in plaats van de laatste wijzigingsdatum door Mozilla, Netscape Navigator en Opera de datum 1 januari 1970 (de standaard startdatum van JavaScript) weergegeven en door Microsoft Internet Explorer de huidige datum. Wanneer je wilt weten welke header een server meestuurt, kun je de URL van een document op deze server invoeren in Delorie's HTTP Header Viewer. Ook de laatste wijzigingsdatum kun je op een meer aangename manier weergeven:

Voor het laatst gewijzigd op 25-04-2012

Het script in de body van het document is vergelijkbaar met het gewone datumscript, alleen is de lastModified eigenschap opgenomen als parameter van het Date object. Omdat Netscape Navigator 3 in dit geval een jaar toch in twee cijfers weergeeft, is de code voor de jaarweergave iets aangepast. Om het crashen van Netscape Navigator 2 te voorkomen, wordt het script in deze browser niet uitgevoerd. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus helemaal in het begin van het document plaatsen. Microsoft Internet Explorer 3 en Opera lager dan 3.5 kunnen ook niet met het script overweg en geven de standaarddatum weer. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function DatumWeergave(datum) { var dag = datum.getDate(); var maand = datum.getMonth() + 1; var maand2 = ((maand < 10) ? "0" : "") + maand; var jaar = datum.getYear(); if (jaar < 70) { var jaar4 = (jaar + 2000); } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

} var datumwaarde = dag + "-" + maand2 + "-" + jaar4; return datumwaarde } if (!NN2) { var gewijzigd = new Date(document.lastModified); var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>"; } document.write(wijzigdatum); //--> </SCRIPT> Ook de laatste wijzigingsdatum kun je weer als tekst opnemen. Omdat Netscape Navigator crasht en Microsoft Internet Explorer 3 en Opera 3 niet de correcte datum retourneren, is er in dit voorbeeld voor gekozen de uitkomst door die browsers niet te laten weergeven. Ook in dit geval gebeurt dat op basis van het algemene script voor de browsertest. Door de versies van Netscape Navigator lager dan 4.5 wordt bij de laatste wijzigingsdatum niet de correcte dag van de week wordt geretourneerd. Daarom is deze in dit voorbeeld weggelaten.

Voor het laatst gewijzigd op 25 april 2012

Het in de body van dit document gebruikte script heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); function DatumWeergave(datum) { var weekdag = datum.getDay() + 1; var dag = datum.getDate(); var maand = datum.getMonth() + 1; var jaar = datum.getYear(); if (jaar < 70) { var jaar4 = (jaar + 2000); } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)); } var datumwaarde = dagArray[weekdag] + " " + dag + " " + maandArray[maand] + " " + jaar4; return datumwaarde }

if (!NN2 && !IE3 && !OP3) { var gewijzigd = new Date(document.lastModified); var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>"; document.write(wijzigdatum); } //--> </SCRIPT>

De huidige tijd
Met behulp van de methodes getHours, getMinutes en getSeconds kun je uit het Date object de huidige tijd in respectievelijk uren, minuten en seconden halen. De tijd bij openen van dit document:

11:31:54

Het script in de body van het document heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var var var var var var var nu = new Date(); uren = nu.getHours(); uren2 = ((uren < 10) ? "0" : "") + uren; minuten = nu.getMinutes(); minuten2 = ((minuten < 10) ? ":0" : ":") + minuten; seconden = nu.getSeconds(); seconden2 = ((seconden < 10) ? ":0" : ":") + seconden;

var tijdweergave = uren2 + minuten2 + seconden2 document.write(tijdweergave); //--> </SCRIPT>

Welkomstbericht afhankelijk van de tijd

Door te testen hoe laat het is, kun je een bezoeker met een aan het dagdeel aangepast bericht begroeten.

Goedemorgen, je hebt dit document geopend op woensdag 25 april 2012 om 11:31 uur.
Het in de body van dit document gebruikte script heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i]; } var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); var var var var var var nu = new Date(); dagtekst = dagArray[(nu.getDay()+1)]; dag = nu.getDate(); maandtekst = maandArray[(nu.getMonth()+1)]; jaar = nu.getYear(); jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

var datumweergave = dagtekst + " " + dag + " " + maandtekst + " " + jaar4; var var var var uren = nu.getHours(); uren2 = ((uren < 10) ? "0" : "") + uren; minuten = nu.getMinutes(); minuten2 = ((minuten < 10) ? ":0" : ":") + minuten;

var tijdweergave = uren2 + minuten2 if (nu.getHours() >= 18) var welkom = ("Goedenavond, "); else if (nu.getHours() >= 12) var welkom = ("Goedemiddag, "); else if (nu.getHours() >= 6) var welkom = ("Goedemorgen, "); else var welkom = ("Goedenacht, "); var bericht = welkom + "je hebt dit document geopend op " + datumweergave + " om " + tijdweergave + " uur."; document.write(bericht); //--> </SCRIPT> Dit onderdeel van de Handleiding HTML is nadrukkelijk niet bedoeld als instructie in het gebruik van JavaScript. Het bevat slechts een beperkt aantal voorbeelden, die gebruikt kunnen worden bij het maken van een HTML-document. Verwijzingen naar sites met meer voorbeelden en uitleg worden hierna gegeven. De voorbeelden zijn als volgt onderverdeeld: Informatie over de browser Nieuw venster openen Tekst in de statusbalk

Frames Document openen via keuzelijst

Lichtkrant Datum en tijd gebruiken

Informatie over het opnemen van scripts in HTML-documenten vind je in het onderdeel Scripts.

Informatie elders
Veel JavaScript oplossingen vind je bij: irt.org - JavaScript Frequently Asked Questions

Beschrijvingen van de mogelijkheden van JavaScript: Netscape DevEdge JavaScript Central Microsoft Script Technologies - JScript

Met behulp van JavaScript kun je bepalen welke browser de bezoeker van je pagina gebruikt en op basis daarvan een gebeurtenis laten plaats hebben. Dat kan bijvoorbeeld handig zijn als in je pagina mogelijkheden opgenomen zijn, welke niet door alle browsers ondersteund worden. Met gebeurtenissen, welke afhankelijk zijn van de browser, kun je bijvoorbeeld ook voorkomen dat bezoekers geconfronteerd worden met fouten in hun browser (zie bijvoorbeeld het onderdeel CSS en browsers). De volgende voorbeelden worden gegeven: Informatie over de browser weergeven Browsertest Document openen afhankelijk van browser Algemeen script voor browsertest

Informatie over de browser weergeven

Met de eigenschappen appName, appVersion, appCodeName en userAgent van het navigator object kan informatie over de gebruikte browser weergegeven worden, uiteraard alleen als de browser JavaScript ondersteund. Voor de browser, waarmee deze pagina bekeken wordt, ziet de informatie er als volgt uit: navigator.appName: Microsoft Internet Explorer

4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; .NET CLR 1.1.4322) navigator.appCodeName: Mozilla navigator.userAgent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1; .NET CLR 1.1.4322)

navigator.appVersion:

In de Body van dit document is voor de appName eigenschap het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write(navigator.appName); //--> </SCRIPT> Voor de overige eigenschappen gaat het op een vergelijkbare manier. De informatie, welke gegeven wordt door de verschillende eigenschappen, kun je in een nieuw venster bekijken voor Microsoft Internet Explorer, Mozilla, Firefox, Netscape Navigator en Opera.

Browsertest
In het volgende voorbeeld wordt getest, of de bezoeker een bepaalde browser gebruikt. Microsoft Internet Explorer 5.x: Microsoft Internet Explorer 7.0: Netscape Navigator 4: Firefox 1.x Firefox 3.x Opera 9.x: nee nee nee nee nee nee Microsoft Internet Explorer 6.0: Microsoft Internet Explorer 8.0: Mozilla 1.x: Firefox 2.0 Opera 8.x: Opera 10.x: nee ja nee nee nee nee

Het JavaScript dat voor de test gebruikt wordt, heeft de volgende opzet: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var browser = testcode; document.write(browser ? "ja" : "nee"); //--> </SCRIPT> Eerst wordt voor de browser waarop je wilt testen in een variabele vastgelegd aan welke kenmerken deze moet voldoen. Vervolgens schrijft het script 'ja' als het om de betreffende browser gaat en 'nee' als dat niet het geval is. Hierna wordt voor enkele browsers het script toegelicht. Voor andere browsers is de code die je in het script in plaats van het woord testcode invult, te zien in een nieuw venster Voor Microsoft Internet Explorer 6.0, 7.0 en 8.0 test je in navigator.userAgent op "MSIE 6.0", respectievelijk "MSIE 7.0" en "MSIE 8.0". Omdat Opera ook gebruik kan maken van dit kenmerk, moet je een extra test opnemen: in navigator.userAgent mag de tekst "Opera" niet voor komen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Microsoft Internet Explorer 6.0 var IE60 = (navigator.userAgent.indexOf("MSIE 6.0") != -1) && (navigator.userAgent.indexOf("Opera") == -1); document.write(IE60 ? "ja" : "nee");

//--> </SCRIPT> Voor Netscape Navigator 4 test je in navigator.appName op "Netscape" en in navigator.userAgent op "Mozilla/4". Omdat Opera ook gebruik kan maken van deze kenmerken, moet je weer een extra test opnemen: in navigator.userAgent mag de tekst "Opera" niet voor komen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Netscape Navigator 4 var NN4 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/4") != -1) && (navigator.userAgent.indexOf("Opera") == -1); document.write(NN4 ? "ja" : "nee"); //--> </SCRIPT> Voor de browser Mozilla 1 moet in navigator.userAgent "Gecko" wel voorkomen, maar "Netscape" en "Firefox" juist niet. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Mozilla 1 var MOZ1 = (navigator.userAgent.indexOf("Gecko") != -1) && (navigator.userAgent.indexOf("Netscape") == -1) && (navigator.userAgent.indexOf("Firefox") == -1) && (navigator.userAgent.indexOf("rv:1") != -1); document.write(MOZ1 ? "ja" : "nee"); //--> </SCRIPT> Voor Firefox x.y test je op de aanwezigheid van "Firefox/x.y" in navigator.userAgent, bijvoorbeeld "Firefox/2.0" of "Firefox/3.5". <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Firefox 2.0 var FF20 = (navigator.userAgent.indexOf("Firefox/2.0") != -1); document.write(FF20 ? "ja" : "nee"); //--> </SCRIPT> In Opera 4 en hoger kan de gebruiker instellen als welke browser het programma gedentificeerd moet worden. De waarde van navigator.userAgent heeft daardoor verschillende uitkomsten. Voor Opera 4 t/m 8 moeten we daarom testen op de aanwezigheid van de tekst "Opera x" of de tekst "Opera/x" in navigator.userAgent, waarbij 'x' het versienummer van de browser is. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Opera 8 var OP8 = (navigator.userAgent.indexOf("Opera 8") != -1) || (navigator.userAgent.indexOf("Opera/8") != -1); document.write(OP8 ? "ja" : "nee"); //--> </SCRIPT> Omdat Opera 10 zich ook identificeert als "Opera 9.80" moet de test voor "Opera 9" uitgebreid worden.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Opera 9 var OP9 = ((navigator.userAgent.indexOf("Opera 9") != -1) || (navigator.userAgent.indexOf("Opera/9") != -1)) && (navigator.userAgent.indexOf("Presto") == -1); document.write(OP9 ? "ja" : "nee"); //--> </SCRIPT> Voor Opera 10 moet je testen op de aanwezigheid van "Presto/2.2.15" (Presto is de lay-out engine van Opera) en "Opera 10". <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- test Opera 10 var OP10 = (navigator.userAgent.indexOf("Presto/2.2.15") != -1) || (navigator.userAgent.indexOf("Opera 10") != -1); document.write(OP10 ? "ja" : "nee"); //--> </SCRIPT>

Document openen afhankelijk van browser

De browsertest kun je bijvoorbeeld gebruiken om te bepalen welk document geopend moet worden. Dat kan dan een document zijn, wat speciaal is toegesneden op de mogelijkheden van de betreffende browser. In het volgende voorbeeld wordt slechts de naam van de browser vermeld, maar meer voor de hand liggende mogelijkheden zijn bijvoorbeeld het afhankelijk van de browser gebruiken van stylesheets en inline frames. Probeer dit voorbeeld in een nieuw venster. In de head van het document, dat geopend wordt in het nieuwe venster, staat een script waarin achtereenvolgens getest wordt of het gaat om een bepaalde versie van Microsoft Internet Explorer, Mozilla, Firefox, Netscape Navigator, of Opera. Een klein deel van het script wordt hierna weergegeven. het volledige script kun je in een nieuw venster bekijken. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function browsertest() { if (navigator.userAgent.indexOf("MSIE 3") != -1) { window.location.href="e3.html"; } else if (navigator.userAgent.indexOf("MSIE 4") != -1) { window.location.href="e4.html"; } else ..... } //--> </SCRIPT> Zorg er weer voor dat de code tussen de haakjes achter de if-statements niet onderbroken wordt

door een harde overgang naar de volgende regel. Het BODY element van het document in het nieuwe venster, is als volgt opgebouwd: <BODY onload="browsertest();"> ... </BODY>

Algemeen script voor browsertest

Wanneer je vaker in een document gebruik maakt van een browsertest, dan is het wellicht handig om het volgende script als eerste in de head van het document te plaatsen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var nuA var M2 var M3 var M4 var var var var var OP OP3 OP35 OP36 OP4 = navigator.userAgent; = (nuA.indexOf("Mozilla/2") != -1); = (nuA.indexOf("Mozilla/3") != -1); = (nuA.indexOf("Mozilla/4") != -1); = = = = = = = = = = = = = = = = = = = (nuA.indexOf("Opera") != -1); (nuA.indexOf("Opera/3") != -1) && M3; (nuA.indexOf("Opera/3") != -1) && M4; (nuA.indexOf("Opera 3") != -1) && M4; (nuA.indexOf("Opera 4") != -1) || (nuA.indexOf("Opera/4") != -1); (nuA.indexOf("Opera 5") != -1) || (nuA.indexOf("Opera/5") != -1); (nuA.indexOf("Opera 6") != -1) || (nuA.indexOf("Opera/6") != -1); (nuA.indexOf("Opera 7") != -1) || (nuA.indexOf("Opera/7") != -1); (nuA.indexOf("Opera 8") != -1) || (nuA.indexOf("Opera/8") != -1); ((nuA.indexOf("Opera 9") != -1) || (nuA.indexOf("Opera/9") != -1)) && (nuA.indexOf("Presto") == -1); (nuA.indexOf("Presto/2.2.15") != -1) || (nuA.indexOf("Opera 10") != -1); (nuA.indexOf("MSIE") != -1) && !OP; (nuA.indexOf("MSIE 3") != -1); (nuA.indexOf("MSIE 4") != -1); (nuA.indexOf("MSIE 5.0") != -1) && !OP; (nuA.indexOf("MSIE 5.5") != -1) && !OP; (nuA.indexOf("MSIE 6.0") != -1) && !OP; (nuA.indexOf("MSIE 7.0") != -1) && !OP; (nuA.indexOf("MSIE 8.0") != -1) && !OP;

var OP5 var OP6 var OP7 var OP8 var OP9 var OP10 var var var var var var var var IE IE3 IE4 IE50 IE55 IE60 IE70 IE80

var GECKO = (nuA.indexOf("Gecko") != -1); var MOZ = GECKO && (nuA.indexOf("Netscape") == -1) && (nuA.indexOf("Firefox") == -1); var MOZ1 = MOZ && (nuA.indexOf("rv:1") != -1);

var var var var var var var var var var var var var var var

FF FF10 FF15 FF20 FF30 FF35 FF36 NN NN2 NN3 NN4 NN6 NN7 NN8 NN9

= = = = = = = = = = = = = = =

(nuA.indexOf("Firefox") != -1); (nuA.indexOf("Firefox/1.0") != -1); (nuA.indexOf("Firefox/1.5") != -1); (nuA.indexOf("Firefox/2.0") != -1); (nuA.indexOf("Firefox/3.0") != -1); (nuA.indexOf("Firefox/3.5") != -1); (nuA.indexOf("Firefox/3.6") != -1); (navigator.appName == "Netscape") && !OP && !MOZ; NN && M2; NN && M3; NN && M4; (nuA.indexOf("Netscape6") != -1); (nuA.indexOf("Netscape/7") != -1); (nuA.indexOf("Netscape/8") != -1); (nuA.indexOf("Navigator/9") != -1);

//--> </SCRIPT> Omdat bovenstaande code geen onderdeel is van een functie, kunnen de verschillende variabelen (zoals OP35, NN4 en IE50) direct in andere scripts in hetzelfde document gebruikt worden, zonder de testen opnieuw te hoeven uitvoeren. Een volgend script kan er daardoor bijvoorbeeld als volgt uitzien: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function browseralert() { if (IE) { alert("Wel eens een andere browser dan Internet Explorer geprobeerd?"); } else { alert("Goed zo, jij kiest zelf je browser!"); } } //--> </SCRIPT> Je kunt dit script bijvoorbeeld automatisch laten activeren door aan het BODY element in een document het onload attribuut toe te voegen: <BODY onload="browseralert();"> ... </BODY> Hier wordt het script geactiveerd met behulp van een hyperlink. Aan het A element is daarvoor het onclick attribuut toegevoegd: <P>Probeer dit <A HREF="js-voorbeeld.html" TARGET="voorbeeld" onclick="browseralert(); return false;">voorbeeld</A>.</P> Probeer dit voorbeeld.

Aan het algemene browser script kun je ook nog code toevoegen om te testen of de browser

minimaal een bepaald versienummer heeft. Voor Microsoft Internet Explorer net Netscape Navigator t/m versie 4 is het versienummer af te leiden uit de waarde van navigator.appVersion. Voor Microsoft Internet Explorer 4 en hoger gebruik je voor de test de volgende code: var IE4plus = IE && (parseInt(navigator.appVersion) >= 4); Wil je testen op Netscape Navigator 3 en hoger dan is de code: var NN3plus = NN && (parseInt(navigator.appVersion) >= 3); Omdat Netscape Navigator 6 en hoger, Mozilla en Firefox gebruik maken van dezelfde lay-out engine Gecko, kun je voor deze browsers n test uitvoeren. Daarbij heb je twee kenmerken in navigator.userAgent tot je beschikking. Het eerste kenmerk is het versienummer van de Gecko engine en begint met "rv:". Dit versienummer komt overeen met het versienummer van Mozilla, maar wijkt af van de versienummers van Netscape Navigator en Firefox. Het tweede kenmerk is de datum waarop de gebruikte Gecko engine is uitgebracht, vastgelegd in het formaat jjjjmmdd. In de volgende weergave van navigator.userAgent is te zien, dat de genoemde kenmerken voor Netscape Navigator 7.1 en Mozilla 1.4 respectievelijk "rv:1.4" en "20030624" (24 juni 2003) zijn: MOZ 1.4 NN 7.1 Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko/20030624 Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4) Gecko/20030624 Netscape/7.1

We zullen hier de datum gebruiken om te testen om welke versie van de browser het gaat. Het volgende script gebruik je als je wilt weten of het gaat om Mozilla 1.4 en hoger, Firefox, of Netscape Navigator 7.1 en hoger. var var var var GECKO begingecko geckodatum MOZ14NN71plus = = = = (nuA.indexOf("Gecko") != -1); nuA.lastIndexOf("Gecko"); nuA.substring(begingecko + 6,begingecko + 14); GECKO && (geckodatum >= 20030624)

Een overzicht van versies van de verschillende browsers en de versiedatum van de ervoor gebruikte Gecko lay-out engine, kun je in een nieuw venster bekijken. Ook voor Opera kun je geen gebruik maken van navigator.appVersion om het versienummer te achterhalen. Het versienummer staat nu echter opgenomen in navigator.userAgent. Wanneer het alleen gaat om het hoofdversienummer (bijvoorbeeld versie 4 of hoger), kun je het volgende script gebruiken. var beginopera = (nuA).lastIndexOf("Opera"); var operahfdversie = (nuA).substring(beginopera + 6,beginopera + 7); var OP4plus = OP && (parseInt(operahfdversie) >= 4); Wanneer ook de subversie van belang is (bijvoorbeeld versie 7.2 of hoger), moet je een wat uitgebreider script gebruiken. In de uiteindelijke test laat je de punt tussen hoofd- en subversienummer weg. var beginopera = (nuA).lastIndexOf("Opera"); var operahfdversie = (nuA).substring(beginopera + 6,beginopera + 7); var operasubversie = (nuA).substring(beginopera + 8,beginopera + 9);

var operaversie var OP72plus

= (operahfdversie + operasubversie); = OP && (parseInt(operaversie) >= 72);

Tenslotte is het soms handig om de werking van een script te laten afhangen van het platform (Windows, Linux, Macintosh) dat de bezoeker gebruikt, bijvoorbeeld wanneer je een style sheet gebruikt met daarin vaste puntgroottes gedefinieerd. Je kunt dan aan het algemene script een platformtest toevoegen. Hierna is dat gedaan voor Firefox 1.5. var WIN = nuA.indexOf("Win") != -1; var MAC = nuA.indexOf("Mac") != -1; var LIN = nuA.indexOf("Lin") != -1; var FF15w var FF15m var FF15l = FF15 && WIN; = FF15 && MAC; = FF15 && LIN;

Een voorbeeld van het gebruik van een algemeen script voor de browsertest, wordt gegeven bij de beschrijving van browser-specifieke stijlbladen.

Soms is het handig om bepaalde informatie niet in het hoofdvenster weer te geven, maar in een (vaak kleiner) nieuw venster. De bezoeker kan dit nieuwe venster openen, door bijvoorbeeld op een knop of een hyperlink te klikken. Het openen van zo'n nieuw venster kun je het beste regelen via een JavaScript, omdat je dan invloed hebt op hoe het nieuwe venster eruitziet. In het JavaScript maak je gebruik van de open-methode, welke de volgende opbouw heeft: window.open(URL, vensternaam, vensterkenmerken) URL geeft aan welk document in het nieuwe venster geopend moet worden. De vensternaam kan gebruikt worden in het TARGET attribuut van een hyperlink. De vensterkenmerken bepalen het uiterlijk van het venster. Voor alle voorbeelden in dit onderdeel geldt, dat de code tussen de haakjes achter window.open niet onderbroken mag worden door een harde overgang naar de volgende regel. De volgende voorbeelden worden gegeven: Een kaal of een aangekleed venster Nieuw venster via hyperlink Nieuw venster op de voorgrond Nieuw venster sluiten Hyperlinks in nieuw venster

Een kaal of een aangekleed venster

Met behulp van de vensterkenmerken kun je aangeven, hoe een met behulp van JavaScript te openen venster er moet uitzien. De volgende kenmerken kunnen gebruikt worden: width: de breedte van het venster height: de hoogte van het venster

menubar: wel of geen menubalk toolbar: wel of geen knoppenbalk location: wel of geen locatiebalk directories: wel of geen directoryknoppen status: wel of geen statusbalk scrollbars: wel of geen schuifbalken resizable: wel of geen mogelijkheid de afmetingen van het venster te wijzigen top: de afstand tussen de bovenrand van het nieuwe venster en de bovenkant van het scherm left: de afstand tussen de linkerrand van het nieuwe venster en de linkerkant van het scherm

Bij de kenmerken "width", "height", "top" en "left" wordt de waarde aangegeven in pixels, bij de overige kenmerken in "yes" of "no". De kenmerken "width" en "height" hebben betrekking op dat deel van het venster, waarin het document wordt weergegeven en zijn dus exclusief de ruimte die bijvoorbeeld menubalken, knoppenbalken en schuifbalken innemen. De kenmerken "top" en "left" worden alleen door Netscape Navigator 4 en Microsoft Internet Explorer 4 ondersteund. Als geen van de kenmerken wordt benoemd in het script, wordt een compleet opgetuigd venster geopend in de standaard grootte. Als slechts enkele opties worden benoemd, zoals "width" en " height", wordt voor de overige opties als waarde "no" aangehouden. In het volgende voorbeeld zijn in het script alleen de kenmerken "width" en " height" benoemd. Er wordt dus een kaal venster weergegeven. Druk op de knop om het venster te bekijken. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterA() { window.open("voorbeeld-1a.html", "nieuw", "width=300,height=200"); } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter window.open niet onderbreekt door een harde overgang naar de volgende regel. De knop wordt met een formulier gemaakt, dat in de body van het document is opgenomen. Aan het INPUT element is de onclick event handler toegevoegd (zie het onderdeel Scripts), die ervoor zorgt dat het script wordt uitgevoerd als voor de knop de click gebeurtenis optreedt. <FORM ACTION="geen_actie"> <INPUT TYPE="button" VALUE="Open venster" onclick="NieuwVensterA()"> </FORM> Door extra kenmerken toe te voegen, wordt een meer aangekleed venster weergegeven. Klik op de knop om het venster te bekijken. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterB() { window.open("voorbeeld-1b.html", "nieuw",

"width=400,height=250,status=yes,toolbar=yes,location=yes"); } //--> </SCRIPT> De opbouw van de knop is hetzelfde als in het eerste voorbeeld, alleen is de naam van de functie veranderd van NieuwVenster A in NieuwVensterB. Met de kenmerken "top" en "left" kan in browsers die dit ondersteunen de positie van het nieuwe venster bepaald worden. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterC() { window.open("voorbeeld-1c.html", "nieuw", "width=300,height=200,top=200,left=50"); } //--> </SCRIPT>

Nieuw venster via hyperlink

In de voorgaande voorbeelden is gebruik gemaakt van een knop om het nieuwe venster te openen. Veel vaker zal echter gebruik gemaakt worden van een hyperlink, zoals in het volgende voorbeeld. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterD() { window.open("voorbeeld-2a.html", "nieuw", "width=300,height=200"); } //--> </SCRIPT> De hyperlink is als volgt opgebouwd: <A HREF="voorbeeld-2a.html" TARGET="nieuw" onclick="NieuwVensterD(); return false;">hyperlink</A> De onclick event handler in de hyperlink, zorgt ervoor dat het script wordt uitgevoerd. De toevoeging "return false" aan de onclick event handler bepaalt, dat niet gelijktijdig de normale actie van de hyperlink moet worden uitgevoerd. In het HREF attribuut wordt ook verwezen naar het document, dat in het nieuwe venster geopend moet worden. Het TARGET attribuut heeft als waarde de naam van het venster, zoals dat in het script is gedefinieerd. Het zorgt ervoor dat browsers die JavaScript niet ondersteunen, niet het huidige venster vervangen, maar toch een nieuw (weliswaar standaard) venster openen. Bovendien wordt door het opnemen van het TARGET attribuut voorkomen, dat in browsers die "return false" niet ondersteunen, gelijktijdig het huidige document wordt vervangen en een nieuw venster wordt geopend.

Netscape Navigator 2 ondersteunt bij gebruik van een hyperlink als hiervoor geen kenmerken voor het nieuwe venster, dat daardoor altijd als een volledig nieuw browservenster geopend wordt. Bovendien heeft Netscape Navigator 2 problemen met het openen van nieuwe vensters van een verschillend formaat tijdens n browsersessie: als eenmaal een bepaald formaat venster is geopend, krijgen alle volgende nieuwe vensters dezelfde afmetingen. De voorbeelden hierna kunnen daardoor anders dan bedoeld weergegeven worden. Klik op deze hyperlink om een nieuw venster te openen.

In de eerder gebruikte voorbeelden is in het script opgenomen, welk document geopend moet worden in het nieuwe venster. Als het openen van een nieuw venster vaker in een document voorkomt, is het niet handig elke keer een nieuw script te gebruiken. Je kunt dan beter gebruik maken van een algemener script en het te openen document specificeren in de onclick event handler in de hyperlink. In het volgende voorbeeld maken twee hyperlinks gebruik van hetzelfde script: hyperlink 1 hyperlink 2 In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function NieuwVensterE(URL) { window.open(URL, "nieuw", "width=300,height=200"); } //--> </SCRIPT> De hyperlinks hebben de volgende opbouw: <A HREF="voorbeeld-2b.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2b.html'); return false;">hyperlink 1</A> en <A HREF="voorbeeld-2c.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2c.html'); return false;">hyperlink 2</A>

In plaats van de onclick event handler kan ook gebruik gemaakt worden van de onmouseover event handler. Het nieuwe venster wordt dan geopend als de muisaanwijzer over de hyperlink beweegt. De volgende afbeelding is opgenomen in een hyperlink. Gebruik wordt gemaakt van hetzelfde script als in de voorbeelden hiervoor.

De hyperlink heeft de volgende opbouw: <A HREF="voorbeeld-2d.html" TARGET="nieuw" onmouseover="NieuwVensterE('voorbeeld-2d.html'); return false;"><IMG

SRC="handleiding-html.gif" WIDTH="84" HEIGHT="27" BORDER="0" ALT="Handleiding HTML"></A>

Nieuw venster op de voorgrond

Als je in een nieuw venster meerdere keren na elkaar een document wilt openen vanuit het hoofdvenster, dan is het niet nodig dat de bezoeker het nieuwe venster steeds sluit. Door te klikken op een volgende hyperlink, wordt de inhoud van het nieuwe venster automatisch ververst. Probleem is wel dat door het klikken in het hoofdvenster, het nieuwe venster op de achtergrond wordt geplaatst. Vanuit de blik van de bezoeker lijkt het klikken daardoor geen effect te hebben. Je kunt dit echter verhelpen met een JavaScript dat er voor zorgt dat het venster op de voorgrond wordt geplaatst. De eenvoudigste manier zou zijn het toevoegen van de onload event handler met de waarde "self.focus()" aan het BODY element van het in het nieuwe venster te openen document. Omdat Netscape Navigator 2 de focus methode niet kent en een foutmelding geeft, is het echter nodig een tussenstap te maken, waarbij het gebruik van de focus-methode voor deze browser wordt uitgesloten. De focus-methode werkt ook niet in Microsoft Internet Explorer 3 en in Opera, maar dit levert geen foutmelding op. In het volgende voorbeeld, waarin gebruik gemaakt wordt van een eerder beschreven script om het nieuwe venster te openen, kun je bekijken of en hoe het werkt. Klik achtereenvolgens op hyperlink 1, 2 en 3. Het eerste nieuwe venster komt zoals gebruikelijk op de voorgrond, het tweede vind je achter het hoofdvenster en het derde komt als gevolg van de focus-methode weer op de voorgrond. hyperlink 1 hyperlink 2 hyperlink 3 In de head van het document dat je opent met behulp van hyperlink 3 is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var NN2 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/2") != -1); function VensterFocus() { if (!NN2) { self.focus(); } } //--> </SCRIPT> en de activering van het BODY element van dit document heeft de volgende opbouw: <BODY ... onload="VensterFocus()">

Nieuw venster sluiten

Met JavaScript kun je niet alleen een nieuw venster openen, maar je kunt het ook weer sluiten. Het nieuwe venster wordt, op een vergelijkbare wijze als bij eerdere voorbeelden, geopend met een hyperlink.

In het document in het nieuwe venster staat in de body een script, dat een hypertext link plaatst. De waarde van het HREF attribuut bevat een JavaScript opdracht, welke ervoor zorgt dat bij klikken het venster wordt gesloten. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write('<A HREF="JavaScript:parent.close()">Sluit</A> dit venster.') //--> </SCRIPT> Voor browsers die JavaScript niet ondersteunen, kun je het NOSCRIPT element opnemen: <NOSCRIPT>Dit is een nieuw venster. Sluit het op de gebruikelijke wijze.</NOSCRIPT>

Wanneer je het nieuwe venster na een bepaalde tijd automatisch wilt laten sluiten, dan moet je het volgende script opnemen in het te openen document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function SluitVenster() { setTimeout("Verwijder()",3000); } function Verwijder() { close(); } //--> </SCRIPT> De in de setTimeOut methode in het script opgenomen waarde geeft aan, na hoeveel milliseconden het venster sluit. Aan het BODY element van het document in het nieuwe venster voeg je onload event handler toe: <BODY onload="SluitVenster();"> ... </BODY> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.

Als je in een document meerdere keren een pop-up venster gebruikt, kun je het sluiten van het nieuwe venster eenvoudiger regelen via het script, waarmee je het opent. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenSluit(URL) { venster = window.open(URL, "nieuw", "width=300,height=200"); setTimeout("venster.close()",3000); } //--> </SCRIPT>

Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.

Hyperlinks in nieuw venster

Soms wil je in een nieuw venster hyperlinks opnemen, die een document openen in het venster, van waaruit het nieuwe venster geopend is. Je kunt dan gebruik maken van de opener eigenschap, welke ondersteund wordt door Netscape Navigator 3 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger. Door de opener eigenschap bovendien nog eens apart te definiren in het document, van waaruit het nieuwe venster geopend wordt, kan ook Netscape Navigator 2 er gebruik van maken. Omdat Opera 3 niet met het script overweg kan, mag het door deze browser niet worden uitgevoerd. Daarom wordt eerst getest om welke browser gaat. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script in de head van dit document ziet er als volgt uit: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var OP3 = (navigator.userAgent.indexOf("Opera/3") != -1) && (navigator.userAgent.indexOf("Mozilla/3") != -1); var NN2 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/2") != -1); function Index(URL) { if (OP3) { alert('Deze mogelijkheid wordt niet door Opera 3 ondersteund.'); } else { indexvenster = window.open(URL, "nieuw", "width=300,height=200"); if (NN2) { indexvenster.opener = self; } } } //--> </SCRIPT> De link waarmee je het venster opent, heeft bijvoorbeeld de volgende opbouw: <A HREF="JavaScript:Index('voorbeeld-5a.html')">Inhoudsopgave</A> In het document in het nieuwe venster is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenLink(URL) { window.opener.location.href = URL; } //--> </SCRIPT> Een link in het document in het nieuwe venster heeft de volgende opbouw:

<A HREF="JavaScript:OpenLink('js-venster.html#teruglinken')">Hyperlinks in nieuw venster</A> Open de inhoudsopgave en bekijk hoe het voorbeeld werkt in Netscape Navigator 2 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger. Wanneer je het nieuwe venster wilt sluiten, nadat op een hyperlink is geklikt, voeg je aan het script in het nieuwe venster "window.close()" toe. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenLink(URL) { window.opener.location.href = URL; window.close(); } //--> </SCRIPT> Open de inhoudsopgave en bekijk in Netscape Navigator 2 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger hoe het nieuwe venster na het klikken op een hyperlink sluit. Met de hyperlink waarmee je in dit voorbeeld het nieuwe venster opent, kunnen browsers die JavaScript niet ondersteunen, of waarin JavaScript niet is toegestaan, niets beginnen. Daarom is het misschien verstandig een dergelijke link te verbergen voor die browsers. Dat doe je ook weer met JavaScript: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-indexlink = "<A HREF=\"JavaScript:Index('voorbeeld-5b.html')\">" indexlink += "Inhoudsopgave<\/A>" document.write(indexlink); //--> </SCRIPT> JavaScript wordt veel gebruikt in combinatie met documenten met frames. De bekendste toepassing is wel het gelijktijdig vervangen van documenten in meerdere frames. Een andere is het voorkomen dat je eigen site geopend wordt in een frame van iemand anders. In dit onderdeel worden enkele voorbeelden van scripts in combinatie met frames gegeven: Meerdere frames tegelijk updaten Meerdere keren frames tegelijk updaten Ander frame updaten bij openen document Document openen in volledig venster Document niet buiten frames openen

De voorbeelden werken correct in Netscape Navigator 3.0 en hoger en Microsoft Internet Explorer 4.0 en hoger. Met de eerste drie voorbeelden hebben Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 soms problemen (zie de toelichting bij de voorbeelden). Zorg dat je het bekijken van je site niet afhankelijk maakt van JavaScript. Lang niet elke bezoeker zal JavaScript gebruiken en daarom is het belangrijk dat de site ook goed bekeken kan worden zonder het updaten van frames met behulp van JavaScript.

Meerdere frames tegelijk updaten

Met behulp van JavaScript kun je met n klik op een hyperlink twee frames tegelijkertijd updaten. Dat is vooral handig wanneer je niet de inhoud van alle frames van een frameset wilt wijzigen, of wanneer het gaat om frames die niet tot hetzelfde frameset behoren. Bekijk eerst het voorbeeld in een nieuw venster. Uitgangspunt is een document met twee framesets, waarin de frames de namen links, rechtsboven en rechtsonder hebben: <FRAMESET COLS="*,3*"> <FRAME SRC="voorbeeld-1a.html" NAME="links"> <FRAMESET ROWS="*,*"> <FRAME SRC="voorbeeld-1b.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-1c.html" NAME="rechtsonder"> </FRAMESET> </FRAMESET> De hyperlink in het voorbeeld is als volgt opgebouwd: <A HREF="geenscript.html" onclick="FrameUpdate(); return false;">Update twee frames</A> In plaats van "geenscript.html" in het HREF attribuut kun je het beste de URI opnemen van het document, dat je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Zonodig voeg je dan ook het TARGET attribuut toe. De toevoeging "return false" aan de onlick event handler zorgt ervoor, dat alleen het script wordt uitgevoerd en niet gelijktijdig het in het HREF attribuut opgegeven bestand geopend wordt. In de head van het document waarin de hyperlink is opgenomen, staat het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent.rechtsboven.location.href = "voorbeeld-1d.html"; parent.rechtsonder.location.href = "voorbeeld-1e.html"; } //--> </SCRIPT> In dit script wordt gebruik gemaakt van de eigenschap "location.href", welke bepaalt dat het gaat om de volledige URI van het te openen document. De eigenschap "parent.frame_naam" geeft aan in welk frame het document geopend moet worden. Daarbij verwijst "parent" naar het frameset, waarvan het huidige frame (dat wil zeggen het frame waarin de hyperlink staat) deel uitmaakt. Wanneer het document geopend moet worden in het bovenste frameset in het venster, dan gebruik je "top" in plaats van "parent". Omdat het in het voorbeeld gaat om het bovenste frameset, had de opbouw van het eerste statement in het script er ook als volgt kunnen uitzien: top.rechtsboven.location.href = "voorbeeld-1d.html"; Wanneer je ook het frame waarin de hyperlink staat wilt updaten, dan gebruik je "self" in plaats van "parent.frame_naam_x". Bijvoorbeeld:

self.location.href = "bestemming"; In plaats van de naam van het frame kun je ook "frames[y]" gebruiken, waarbij "y" het nummer is van het frame. Bij de telling wordt gestart bij "0" en de volgorde aangehouden, waarin de frames zijn gedefinieerd. In het voorbeeld is "frames[0]" het frame met de naam "links" en zijn de frames "rechtsboven" en "rechtsonder" respectievelijk "frames[1]" en "frames[2]". Het script kun je dus ook als volgt opbouwen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent.frames[1].location.href = "voorbeeld-1d.html"; parent.frames[2].location.href = "voorbeeld-1e.html"; } //--> </SCRIPT> Een script als in het voorbeeld kun je ook gebruiken, wanneer meer dan twee frames tegelijk gewijzigd moeten worden. Voor drie frames bijvoorbeeld is de opbouw van het script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent.frame_naam_1.location.href = "bestemming_1"; parent.frame_naam_2.location.href = "bestemming_2"; parent.frame_naam_3.location.href = "bestemming_3"; } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame, waarin het document geopend moet worden en in plaats van "bestemming_y" het pad en de bestandsnaam van het te openen document.

De hier beschreven oplossing voor het updaten van meerdere frames tegelijkertijd werkt probleemloos in Netscape Navigator 3 en hoger en in Microsoft Internet Explorer 4 en hoger. In Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 wordt het script alleen goed uitgevoerd, indien de in een frame te openen documenten steeds in dezelfde directory staan. Nadat via het script eenmaal documenten uit een andere directory geopend zijn, geeft de browser bij het vervolgens openen van documenten uit de eerste of een nog andere directory de foutmelding dat het bestand niet gevonden wordt. Dat gebeurt ook als je in een volgende document hetzelfde script gebruikt. Een oplossing kan zijn als bestemming niet alleen een pad en bestandsnaam op te nemen, maar een complete URI. Bijvoorbeeld: parent.rechtsboven.location.href = "http://www.handleidinghtml.nl/javascript/voorbeeld-1d.html"; Nadeel van een complete URI is dat je de site niet meer offline kunt bekijken. Als je dat toch wilt en het niet mogelijk is alle documenten in dezelfde directory te plaatsen, dan kun je er als alternatief ook voor zorgen dat Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 het script niet uitvoeren. Je doet dat door het script eerst te laten controleren welke browser gebruikt wordt en vervolgens de opdracht alleen te laten uitvoeren wanneer het gaat om Netscape Navigator 3 en hoger of Microsoft Internet Explorer 4 en hoger. Het controleren doe je op basis van het algemene script voor de

browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Voor het updaten van twee frames ziet het script er nu als volgt uit: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { if (IE4plus || NN3plus) { parent.rechtsboven.location.href = "voorbeeld-1d.html"; parent.rechtsonder.location.href = "voorbeeld-1e.html"; } } //--> </SCRIPT>

Meerdere keren frames tegelijk updaten

Wanneer je vanuit n document meerdere keren de inhoud van twee frames tegelijkertijd wilt updaten, dan is het handig om de URL's niet in het script te plaatsen, maar in de hyperlinks. Je voorkomt daarmee dat je voor elke link een script moet opnemen. Bekijk eerst het voorbeeld in een nieuw venster. Uitgangspunt is weer een document met twee framesets, waarin de frames de namen links, rechtsboven en rechtsonder hebben: <FRAMESET COLS="*,3*"> <FRAME SRC="voorbeeld-2a.html" NAME="links"> <FRAMESET ROWS="*,*"> <FRAME SRC="voorbeeld-2b.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-2c.html" NAME="rechtsonder"> </FRAMESET> </FRAMESET> De hyperlinks zijn als volgt opgebouwd: <A HREF="geenscript1.html" onclick="FrameUpdate('voorbeeld-2d.html', 'voorbeeld-2e.html'); return false;">Update twee frames</A> <A HREF="geenscript2.html" onclick="FrameUpdate('voorbeeld-2f.html', 'voorbeeld-2g.html'); return false;">Update de frames opnieuw</A> In plaats van "geenscriptx.htm" in het HREF attribuut kun je het beste de URI's opnemen van de documenten, die je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Zonodig voeg je dan ook het TARGET attribuut toe. De toevoeging "return false" aan de onlick event handler zorgt ervoor, dat alleen het script wordt uitgevoerd en niet gelijktijdig het in het HREF attribuut opgegeven bestand geopend wordt. In de head van het document waarin de hyperlinks staan opgenomen, staat het volgende script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2) { parent.rechtsboven.location.href = URL1; parent.rechtsonder.location.href = URL2; } //--> </SCRIPT> Uiteraard kun je ook meer dan twee frames tegelijk updaten. Voor drie frames bijvoorbeeld is de opbouw van het script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2, parent.frame_naam1.location.href parent.frame_naam2.location.href parent.frame_naam3.location.href } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame, waarin het document geopend moet worden. Voor een bijbehorende hyperlink is de opbouw: <A HREF="geenscript.htm" onclick="FrameUpdate('bestemming_1', 'bestemming_2', 'bestemming_3'); return false;">Omschrijving link</A> In plaats van "bestemming_x" neem je het pad en de bestandsnaam op van het te openen document. URL3) { = URL1; = URL2; = URL3;

Om foutmeldingen te voorkomen wanneer de andere frames niet aanwezig zijn (bijvoorbeeld indien het document waarin de linken staan geopend is in het volledige venster), is het verstandig te laten testen of een frameset bestaat en bijvoorbeeld de naam van n frame overeenkomt. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2) { if ((parent.frames.length > 0) && (parent.frames[1].name == "rechtsboven")) { parent.rechtsboven.location.href = URL1; parent.rechtsonder.location.href = URL2; } } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Ook bij dit voorbeeld speelt dat Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 een foutmelding geven als de in een bepaald frame te openen documenten niet steeds in dezelfde directory staan. Het kan daarom nodig zijn, net als in het vorige voorbeeld, de werking van het script afhankelijk te maken van de gebruikte browser. De browsertest doe je op basis van het algemene script, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het updaten van frames krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1, URL2) { if (IE4plus || NN3plus) { if ((parent.frames.length > 0) && (parent.frames[1].name == "rechtsboven")) { parent.rechtsboven.location.href = URL1; parent.rechtsonder.location.href = URL2; } } } } //--> </SCRIPT>

Ander frame updaten bij openen document

Wanneer je bij het openen van een document in een frame altijd gelijk een ander frame uit hetzelfde frameset wilt updaten, moet je in de head van het document het volgende script opnemen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-parent.frame_naam.location.href = "bestemming"; //--> </SCRIPT> In plaats van "frame_naam" neem je de naam op van het frame, dat je wilt updaten en in plaats van "bestemming" het pad en de bestandsnaam van het document, dat in het te updaten frame geopend moet worden: Bekijk het voorbeeld in een nieuw venster. Om foutmeldingen te voorkomen wanneer het andere frame niet aanwezig is (bijvoorbeeld indien het document geopend wordt in het volledige venster), is het verstandig te laten testen of een frameset bestaat en de naam van het frame overeenkomt. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if ((parent.frames.length > 0) && (parent.frames[x].name == "frame_naam")) {

parent.frame_naam.location.href = "bestemming"; } //--> </SCRIPT> Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Gezien de problemen die Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3 hebben met het openen van documenten die zich niet steeds in dezelfde directory bevinden (zie een eerder voorbeeld), kan het nodig zijn de werking van het script afhankelijk te maken van de gebruikte browser. De browsertest doe je op basis van het algemene script, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het updaten van een ander frame krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (IE4plus || NN3plus) { if ((parent.frames.length > 0) && (parent.frames[x].name == "frame_naam")) { parent.frame_naam.location.href = "bestemming"; } } //--> </SCRIPT>

Document openen in volledig venster

Wanneer je zelf in je documenten hyperlinks opneemt, kun je met behulp van het TARGET attribuut aangegeven of het document in een frame (en zo ja welk), in het volledige venster, of in een nieuw venster geopend moet worden. Als iemand anders een link naar een document van jou opneemt, heb je er geen controle over hoe deze geopend worden: in het volledige venster, of in een frameset van die ander. Door een klein JavaScript in de head je document op te nemen, kun je voorkomen dat het document in een frameset van een ander komt. Getest wordt hoeveel frames er zijn in het venster, waarin het document geopend wordt. Als dit aantal ongelijk is aan "0", dan wordt het document in het volledige venster geopend. Bekijk het voorbeeld. In de head van je document plaats je het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top.frames.length != 0) { top.location.href = self.document.location; } //--> </SCRIPT>

In het document dat je in het volledige venster laat openen, kun je zelf overigens gewoon weer framesets definiren.

Document niet buiten frames openen

Soms gebruik je documenten, bijvoorbeeld in een navigatieframe, waarvan je niet wilt dat ze geopend worden in een volledig venster. In dat geval kun je het onderstaande script in de head van het document opnemen. In het script wordt getest of het frameset het juiste aantal frames heeft en of het document wel in het juiste frame geopend wordt. Wordt niet aan deze condities voldaan, dan wordt een ander document geopend. Bijvoorbeeld de beginpagina van je site. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top.frames.length != n || (parent.frames[y].name != "framenaam")) { top.location.href = "bestemming"; } //--> </SCRIPT> In plaats van "bestemming" neem je het pad en de bestandsnaam van het als vervanging te openen document op en voor "n" het aantal frames waarmee je werkt. In plaats van "y" neem je het nummer van het frame (bij de telling wordt gestart bij "0" en de volgorde aangehouden, waarin de frames zijn gedefinieerd) en "framenaam" vervang je door de naam van het frame.

Keuzelijsten worden in combinatie met JavaScript veel gebruikt als alternatief voor een lange opsomming van hyperlinks. Daarbij wordt aan het SELECT element de onchange event handler toegevoegd (zie het onderdeel Scripts). Als de bezoeker een mogelijkheid uit de keuzelijst kiest, treedt de change gebeurtenis op en wordt het bijbehorende script uitgevoerd. De volgende voorbeelden worden gegeven: Document vervangen via keuzelijst Document openen in frame Document openen in nieuw venster

Document vervangen via keuzelijst

Bekijk een voorbeeld in een nieuw venster. In de body van het document staat het volgende formulier: <FORM ACTION="geen_actie" NAME="snelmenu"> <SELECT NAME="documentkeuze" onchange="openURI()"> <OPTION VALUE="geen-url" SELECTED>Kies document</OPTION> <OPTION VALUE="keuze1.html">Document 1</OPTION> <OPTION VALUE="keuze2.html">Document 2</OPTION> <OPTION VALUE="keuze3.html">Document 3</OPTION> </SELECT> </FORM>

Als waarde van het VALUE attribuut van het OPTION element is de URI van het te openen document opgenomen. In het voorbeeld is dat een bestand in dezelfde directory als het document, waarin de keuzelijst staat. Het kan echter ook een complete URI zijn: <OPTION VALUE="http://www.handleidinghtml.nl/algemeen/wijzigingen.html">Laatste wijzigingen</OPTION> In de head van het document in het nieuwe venster is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { location.href = control.options[control.selectedIndex].value; } } //--> </SCRIPT> Om lange statements te voorkomen is in de functie "openURI" eerst de variabele "control" gedefinieerd, waarin is vastgelegd op welk formulier en welk control (formulieronderdeel) de functie betrekking heeft. Hierbij verwijst "snelmenu" naar het juiste formulier in het document en "documentkeuze" verwijst naar de juiste keuzelijst. Vervolgens wordt gecontroleerd of een geldige waarde voor het VALUE attribuut van het OPTION element is geselecteerd. Als dat zo is, wordt de geselecteerde URI gebruikt om het goede document te openen. Omdat de keuzelijst alleen werkt in browsers die JavaScript ondersteunen, is het verstandig ook het formulier op te bouwen met behulp van JavaScript: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var d = document; d.write('<FORM ACTION="geen_actie" NAME="snelmenu">'); d.write('<SELECT NAME="documentkeuze" onchange="openURI()">'); d.write('<OPTION VALUE="geen-url" SELECTED>Kies document<\/OPTION>'); d.write('<OPTION VALUE="keuze1.html">Document 1<\/OPTION>'); d.write('<OPTION VALUE="keuze2.html">Document 2<\/OPTION>'); d.write('<OPTION VALUE="keuze3.html">Document 3<\/OPTION>'); d.write('<\/SELECT>'); d.write('<\/FORM>'); //--> </SCRIPT> Voor een toelichting op het gebruik van de backslash in de beindiging van de verschillende elementen zie het onderdeel Scripts. Omdat niet elke browser JavaScript kan of mag ondersteunen is het goed om ook een alternatief voor de keuzelijst op te nemen. Dat kan met behulp van het NOSCRIPT element en wordt toegelicht in het onderdeel Hyperlinks.

Document openen in frame

Wanneer je werkt met frames, dan kun je de keuzelijst opnemen in een navigatieframe. Bekijk een voorbeeld daarvan in een nieuw venster. Uitgangspunt is een frameset met twee frames, welke de namen boven en onder hebben: <FRAMESET ROWS="*,*"> <FRAME SRC="keuze1.html" NAME="boven"> <FRAME SRC="keuze2.html" NAME="onder"> </FRAMESET> In de head van het document in het bovenste frame is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { parent.onder.location.href = control.options[control.selectedIndex].value; } } //--> </SCRIPT> In de body van het document staat een formulier met dezelfde opbouw als in het eerste voorbeeld.

Document openen in nieuw venster

Het geselecteerde document kun je ook in een nieuw venster laten openen:

In de head van dit document staat het volgende script. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { URI = control.options[control.selectedIndex].value; window.open(URI, "nieuw", "width=300,height=200"); } } //--> </SCRIPT> Het formulier in de body van dit document heeft weer dezelfde opbouw als in het eerste voorbeeld.

Het script werkt goed in de meeste browsers, met uitzondering echter van Netscape Navigator 2. Om de uitvoering van het script door deze browser te voorkomen, kun je daarom het beste eerst testen om welke browser het gaat. Die test kun je doen op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het openen van een document in een nieuw venster krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { if (!NN2) { var control = document.snelmenu.documentkeuze; if (control.options[control.selectedIndex].value != 'geen-url') { URL = control.options[control.selectedIndex].value; window.open(URL, "nieuw", "width=300,height=200"); } } } //--> </SCRIPT> Ook het opbouwen van het formulier met de keuzelijst kun je voorkomen in Netscape Navigator 2: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (!NN2) { document.write('<FORM>'); ... document.write('<\/FORM>'); } //--> </SCRIPT> Met behulp van JavaScript kun je een tekst laten weergeven in de statusbalk van de browser. Bijvoorbeeld een toelichting op een hyperlink of een copyright-melding bij het openen van een document. Omdat scrollende (bewegende) teksten in de statusbalk bij nogal wat mensen irritatie opwekken, wordt geadviseerd het gebruik ervan te beperken. De volgende voorbeelden worden gegeven: Toelichting bij een hyperlink of afbeelding Tekst in de statusbalk bij openen document Scrollende tekst in statusbalk

Toelichting bij een hyperlink of afbeelding

De tekst in de statusbalk verschijnt als je de muisaanwijzer boven de hyperlink schuift. Hij verdwijnt weer na een in te stellen aantal milliseconden.

Beweeg de muisaanwijzer op de hyperlink Doe het ook met deze hyperlink De onmouseover event handler (zie het onderdeel Scripts), die er voor zorgt dat het script wordt aangeroepen, werkt alleen bij hyperlinks. Als je een afbeelding opneemt in een hyperlink, kun je die echter ook van een toelichtend bericht voorzien.

De eerste hyperlink in de body van dit document heeft de volgende opbouw: <A HREF="bestemming" onmouseover="moveover('Deze link is fake');return true;">Beweeg de muisaanwijzer op de link</A> Voor de afbeelding is de opbouw: <A HREF="http://www.handleidinghtml.nl" onmouseover="moveover('Bezoek de Handleiding HTML voor uitgebreide informatie over HTML en CSS'); return true;"><IMG SRC="handleiding-html.gif" WIDTH="84" HEIGHT="27" BORDER="0" ALT="Handleiding HTML"></A> Als waarde van het HREF attribuut gebruik je in plaats van "bestemming" uiteraard een bestaande URI. Zorg er voor dat in het onmouseover event handler de complete tekst van de boodschap inclusief de aanhalingstekens op dezelfde regel staat en niet onderbroken wordt door een harde overgang naar de volgende regel. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function moveover(txt) { window.status = txt; setTimeout("erase()",3000); } function erase() { window.status=""; } //--> </SCRIPT> De in de setTimeout-methode opgenomen waarde geeft aan, na hoeveel milliseconden de boodschap weer verdwijnt. In Opera 3 en 3.5 werkt onmouseover alleen zolang de muisaanwijzer op de hyperlink staat.

Door Netscape Navigator 3 en hoger en Microsoft Internet Explorer 4 en hoger wordt naast de onmouseover event handler ook de onmouseout event handler ondersteund. Je kunt daarmee het bericht in de statusbalk laten verdwijnen, als de muisaanwijzer weer van de hyperlink af gaat. Gezien het gedrag van Opera 3 en 3.5 bij onmouseover, valt bij deze browsers geen actie te omschrijven bij de onmouseout event handler. Beweeg de muisaanwijzer over de link

De hyperlink heeft de volgende opbouw: <A HREF="bestemming" onmouseover="BeweegMuisOp('De muisaanwijzer staat op de link');return true;" onmouseout="BeweegMuisAf();">Beweeg de muis over de link</A> In het script in de head van dit document wordt eerst getest welke browser gebruikt wordt. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus voor het volgende script in het document plaatsen. Als het gaat om Netscape Navigator 2 of Microsoft Internet Explorer 3, dan wordt de setTimeoutmethode toegepast. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function BeweegMuisOp(txt) { if (!NN2 && !IE3) { window.status = txt; setTimeout("BeweegMuisAf()",3000); } else { window.status = txt; } } function BeweegMuisAf() { window.status=""; } //--> </SCRIPT> Met JavaScript kun je een lichtkrant in je document opnemen. Zo'n lichtkrant kan als alternatief dienen voor de lichtkrant die je kunt maken met het MARQUEE element. Overigens is het goed te bedenken dat niet alle bezoekers zitten te wachten op allerlei bewegende onderdelen op je pagina. Enige beperking kan dus geen kwaad.

Standaard lichtkrant
De volgende standaard lichtkrant start bij het openen van het document:

In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var timerID = null; var timerRunning = false; var id,pause=0,position=0; function ticker() { var i,k,msg="Dit is de inhoud van de lichtkrant."; k=(75/msg.length)+1; for(i=0;i<=k;i++) msg+=" "+msg;

document.lichtkrant1.veld1.value= msg.substring(position,position+95); if(position++==38) position=0; id=setTimeout("ticker()",1000/10); } function action() { if(!pause) { clearTimeout(id); pause=1; } else { ticker(); pause=0; } } //--> </SCRIPT> Om het tekstveld te verbergen in browsers die JavaScript niet ondersteunen, wordt het formulier geopend met een in de body van het document geplaatst script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write('<DIV ALIGN="center">'); document.write('<FORM NAME="lichtkrant1" ACTION="geen_actie">'); document.write('<INPUT TYPE="text" NAME="veld1" SIZE="50">'); document.write('<\/FORM>'); document.write('<\/DIV>'); ticker() //--> </SCRIPT> Met behulp van JavaScript kunnen allerlei mogelijkheden van datum en tijd in een document worden opgenomen. Veel daarvan vallen buiten het bestek van de Handleiding HTML. Hier worden daarom slechts enkele voorbeelden van de huidige datum en tijd en de laatste wijzigingsdatum gegeven. Bij deze voorbeelden wordt gebruik gemaakt van Date object. Het volgende script, geplaatst in de body van het document, geldt de basis voor de gebruikte voorbeelden. Het geeft de datum en tijd bij openen van het document weer. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-nu = new Date(); document.write(nu); //--> </SCRIPT> De uitkomst van het script is:

Wed Apr 25 11:35:03 UTC+0200 2012

Deze uitkomst zal niet voor elke browser hetzelfde zijn. Bovendien is het niet een erg aantrekkelijke manier om de datum en de tijd weer te geven. Daarom worden in de voorbeelden verschillende methoden van het Date object gebruikt om de weergave te bepalen: getDate, getDay,getMonth, getYear, getHours, getMinutes en getSeconds. De volgende voorbeelden worden gegeven:

De huidige datum De laatste wijzigingsdatum van een document De huidige tijd Welkomstbericht afhankelijk van de tijd

De huidige datum
Door gebruik te maken van de methodes getDate, getMonth en getYear worden uit het Date object respectievelijk de dag van de maand, de maand en het jaar gehaald. De huidige datum is:

25-04-2012

In de body van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var nu = new Date(); var dag = nu.getDate(); var dag2 = ((dag < 10) ? "0" : "") + dag; var maand = nu.getMonth() + 1; var maand2 = ((maand < 10) ? "0" : "") + maand; var jaar = nu.getYear(); var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)); document.write(dag2 + "-" + maand2 + "-" + jaar4); //--> </SCRIPT> Omdat in JavaScript de maand januari correspondeert met "0", wordt getMonth met 1 verhoogd. De variabelen "dag2" en "maand2" zorgen ervoor dat de dag en de maand altijd met twee cijfers worden weergegeven: voor de getallen 1 t/m 9 wordt een "0" geplaatst. De variabele "jaar4" wordt gebruikt om het jaar in 4 cijfers weer te geven. Browsers die de eerste versie van JavaScript gebruiken (Netscape Navigator 2, Internet Explorer 3 en Opera 3) geven het jaar tot 2000 weer in twee cijfers en plaatsen er daarna een "1" voor (het jaar 2001 wordt dus weergeven als 101). Door te testen op kleiner of groter dan 1900 en de waarde zo nodig te verhogen met 1900, wordt het script millennium-proof gemaakt.

Door met arrays te werken kunnen de dag van de week (verkregen via getDay) en de maand (verkregen via getMonth) omgezet worden in tekst. Wanneer je ook de begeleidende tekst in het script opneemt, zien gebruikers van een browser die JavaScript niet ondersteunt, niets.

Het is vandaag woensdag 25 april 2012

Het in de body van dit document gebruikte script heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++)

this[i+1] = initArray.arguments[i]; } var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); var var var var var var nu = new Date(); dagtekst = dagArray[(nu.getDay()+1)]; dag = nu.getDate(); maandtekst = maandArray[(nu.getMonth()+1)]; jaar = nu.getYear(); jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

var datumweergave = "Het is vandaag " + dagtekst + " " + dag + " " + maandtekst + " " + jaar4; document.write(datumweergave); //--> </SCRIPT> Omdat in JavaScript de dag van de week correspondeert met "0", wordt getDay met 1 verhoogd.

De laatste wijzigingsdatum van een document

Met behulp van de lastModified eigenschap kun je de laatste wijzigingsdatum van een document laten weergegeven. Je gebruikt daarvoor het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.write(document.lastModified); //--> </SCRIPT> Als resultaat zie je:

04/25/2012 11:35:03

N.B. Wanneer je een document met dit script offline op je eigen systeem bekijkt, zie je in het algemeen de correcte laatste wijzigingsdatum. Of je de juiste datum ook online te zien krijgt, is afhankelijk van de informatie die de browser van de server ontvangt. Indien de server de LastModified informatie niet in de zogenaamde HTTP-header meestuurt, wordt in plaats van de laatste wijzigingsdatum door Mozilla, Netscape Navigator en Opera de datum 1 januari 1970 (de standaard startdatum van JavaScript) weergegeven en door Microsoft Internet Explorer de huidige datum. Wanneer je wilt weten welke header een server meestuurt, kun je de URL van een document op deze server invoeren in Delorie's HTTP Header Viewer. Ook de laatste wijzigingsdatum kun je op een meer aangename manier weergeven:

Voor het laatst gewijzigd op 25-04-2012

Het script in de body van het document is vergelijkbaar met het gewone datumscript, alleen is de lastModified eigenschap opgenomen als parameter van het Date object. Omdat Netscape Navigator 3 in dit geval een jaar toch in twee cijfers weergeeft, is de code voor de jaarweergave iets aangepast. Om het crashen van Netscape Navigator 2 te voorkomen, wordt het script in deze browser niet uitgevoerd. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus helemaal in het begin van het document plaatsen. Microsoft Internet Explorer 3 en Opera lager dan 3.5 kunnen ook niet met het script overweg en geven de standaarddatum weer. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function DatumWeergave(datum) { var dag = datum.getDate(); var maand = datum.getMonth() + 1; var maand2 = ((maand < 10) ? "0" : "") + maand; var jaar = datum.getYear(); if (jaar < 70) { var jaar4 = (jaar + 2000); } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)); } var datumwaarde = dag + "-" + maand2 + "-" + jaar4; return datumwaarde } if (!NN2) { var gewijzigd = new Date(document.lastModified); var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>"; } document.write(wijzigdatum); //--> </SCRIPT> Ook de laatste wijzigingsdatum kun je weer als tekst opnemen. Omdat Netscape Navigator crasht en Microsoft Internet Explorer 3 en Opera 3 niet de correcte datum retourneren, is er in dit voorbeeld voor gekozen de uitkomst door die browsers niet te laten weergeven. Ook in dit geval gebeurt dat op basis van het algemene script voor de browsertest. Door de versies van Netscape Navigator lager dan 4.5 wordt bij de laatste wijzigingsdatum niet de correcte dag van de week wordt geretourneerd. Daarom is deze in dit voorbeeld weggelaten.

Voor het laatst gewijzigd op 25 april 2012

Het in de body van dit document gebruikte script heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } var dagArray = new initArray("zondag","maandag",

"dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); function DatumWeergave(datum) { var weekdag = datum.getDay() + 1; var dag = datum.getDate(); var maand = datum.getMonth() + 1; var jaar = datum.getYear(); if (jaar < 70) { var jaar4 = (jaar + 2000); } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)); } var datumwaarde = dagArray[weekdag] + " " + dag + " " + maandArray[maand] + " " + jaar4; return datumwaarde } if (!NN2 && !IE3 && !OP3) { var gewijzigd = new Date(document.lastModified); var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>"; document.write(wijzigdatum); } //--> </SCRIPT>

De huidige tijd
Met behulp van de methodes getHours, getMinutes en getSeconds kun je uit het Date object de huidige tijd in respectievelijk uren, minuten en seconden halen. De tijd bij openen van dit document:

11:35:03

Het script in de body van het document heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var var var var var var var nu = new Date(); uren = nu.getHours(); uren2 = ((uren < 10) ? "0" : "") + uren; minuten = nu.getMinutes(); minuten2 = ((minuten < 10) ? ":0" : ":") + minuten; seconden = nu.getSeconds(); seconden2 = ((seconden < 10) ? ":0" : ":") + seconden;

var tijdweergave = uren2 + minuten2 + seconden2

document.write(tijdweergave); //--> </SCRIPT>

Welkomstbericht afhankelijk van de tijd

Door te testen hoe laat het is, kun je een bezoeker met een aan het dagdeel aangepast bericht begroeten.

Goedemorgen, je hebt dit document geopend op woensdag 25 april 2012 om 11:35 uur.
Het in de body van dit document gebruikte script heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i]; } var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); var var var var var var nu = new Date(); dagtekst = dagArray[(nu.getDay()+1)]; dag = nu.getDate(); maandtekst = maandArray[(nu.getMonth()+1)]; jaar = nu.getYear(); jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar));

var datumweergave = dagtekst + " " + dag + " " + maandtekst + " " + jaar4; var var var var uren = nu.getHours(); uren2 = ((uren < 10) ? "0" : "") + uren; minuten = nu.getMinutes(); minuten2 = ((minuten < 10) ? ":0" : ":") + minuten;

var tijdweergave = uren2 + minuten2 if (nu.getHours() >= 18) var welkom = ("Goedenavond, "); else if (nu.getHours() >= 12) var welkom = ("Goedemiddag, "); else if (nu.getHours() >= 6)

var welkom = ("Goedemorgen, "); else var welkom = ("Goedenacht, "); var bericht = welkom + "je hebt dit document geopend op " + datumweergave + " om " + tijdweergave + " uur."; document.write(bericht); //--> </SCRIPT>