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 beëindigt. Zowel de activering (ook wel start tag genoemd) als de beëindiging (end tag) beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De activering en de beëindiging zijn hetzelfde, met uitzondering van de slash (/) voor de naam van het element in de beëindiging. Tussen de activering en beëindiging 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 beëindiging verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden: <HR> Van sommige elementen mag de beëindiging 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 beëindiging 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 enquête, 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 officiële 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.

of bijvoorbeeld gericht zijn op zoekmachines. Het LINK element geeft een relatie aan met een extern stijlblad.Zowel in de head als in de body van een document kan tekst als commentaar opgenomen worden. met welk lettertype en bijvoorbeeld vet. Een basisadres voor het openen van hyperlinks in het document en een basisframe worden vastgelegd met het BASE element. 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). dat automatisch of als resultaat van een actie van de gebruiker wordt uitgevoerd. 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. waaraan de attributen NAME en CONTENT worden toegevoegd. of met een vaste letterafstand. maar bijvoorbeeld ook om afbeeldingen. op basis waarvan de browser na een bepaalde tijd het document zonder tussenkomst van de gebruiker ververst of vervangt. het afbreken van regels en het maken van koppen en lijnen. cursief. de tekst en de hyperlinks en of een achtergrondafbeelding gebruikt moet worden. welke in het documentvenster te zien is. die betrekking heeft op het document. Een beschrijving is opgenomen in het onderdeel Hyperlinks. De elementen voor het Structuren van tekst worden gebruikt voor het indelen van tekst in blokken. Met de elementen voor Weergave inline tekst kan bepaald worden hoe de tekst op een regel moet worden weergegeven: in welke lettergrootte en -kleur. het STYLE element definieert een stijlblok in het document zelf. Een korte beschrijving van het document. Daarnaast kan ook het LINK element met de attributen REL en HREF een functie hebben in het vastleggen van informatie ten behoeve van zoekmachines. maar niet in het documentvenster wordt weergegeven. Dit automatische verversen of vervangen heet de Client Pull methode. Informatie betreffende het gebruik van stijlen wordt vastgelegd met de elementen LINK en STYLE. wordt opgenomen met het META element waaraan het HTTP-EQUIV attribuut is toegevoegd. In de head van elk document moet een titel worden vastgelegd met het TITLE element. al dan niet met een bepaalde opmaak. Het SCRIPT element kan worden gebruikt om een script te definiëren. Voor het BODY element kunnen daarnaast stijlen gedefinieerd worden. • • . welke gelden voor het gehele document. Bij deze inhoud kan het gaan om tekst. welke zoekmachines gebruiken bij de indexering van een document. Deze titel is te zien in de titelbalk van het documentvenster en wordt daarnaast door zoekmachines gebruikt bij de weergave van zoekresultaten. Informatie. De informatie kan instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden. De koppeling van stijlen aan HTML wordt beschreven in het onderdeel Stylesheets. waardoor het niet door de browser wordt weergegeven. De head In de head van een document wordt informatie opgenomen. De body In de body van een document wordt de inhoud opgenomen. Een toelichting is opgenomen in het onderdeel Scripts. worden opgenomen met het META element. sleutelwoorden en andere informatie.

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

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). of RGB-kleuren (FF0000 in plaats van #FF0000).01 Frameset met URI HTML 4.01 Transitional met URI HTML 4."standards" modus.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. 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.01 Frameset zonder URI HTML 4.0 en hoger).01 Transitional op te nemen zonder de URI van de document type definition: . Bijvoorbeeld het onjuist opnemen van waarden. Dat kan er toe leiden dat stijlen soms helemaal genegeerd worden. Bij het bepalen van de weergave-modus speelt bij de meeste browsers niet alleen de gebruikte DOCTYPE-declaratie een rol. zoals eenheden voor lengte (13 px in plaats van 13px).2 HTML 4. De DOCTYPE-verwisseling moet hiervoor een oplossing voor bieden. dan kun je het beste kiezen voor de quirks modus. Om dat te controleren kun je gebruik maken van een validator (zie de buttons onder aan elke pagina in de Handleiding HTML).0 Strict zonder URI HTML 4.en CSS-code. Dat doe je door bijvoorbeeld de DOCTYPE-declaratie voor HTML 4. Dat leidt er onder meer toe dat speciale constructies.0 Frameset met URI HTML 4.0 Transitional met URI HTML 4. In de quirks modus wordt de weergave van het document door oudere browsers nagebootst. In de standards modus wordt het document weergegeven volgens de laatste standaarden op het gebied van HTML (versie 4) en CSS (versie 2). 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.en CSS-code hebt gemaakt. opeens tot een andere weergave leiden in de nieuwere browsers.0 Frameset zonder URI HTML 4. Ook accepteren oudere browsers allerlei fouten die ontwikkelaars van webpagina's maken in hun HTML.0 HTML 3. Dat is gedaan voor Microsoft Internet Explorer (6. dus inclusief alle fouten.0 voor Macintosh). Ook is het zaak ervoor te zorgen dat je geen fouten in de HTML. maar ook of daarin de URI van de document type definition is opgenomen.01 Strict zonder URI HTML 4. Het gaat dan bijvoorbeeld om het erven van stijlen in tabellen en het berekenen van de breedte en hoogte van elementen. Bij de weergave overeenkomstig de standaarden hoort ook. Netscape Navigator (6.0 voor Windows en 5. die webontwikkelaars bedacht hebben als oplossing voor de problemen in oudere browsers.0 Transitional zonder URI HTML 4. 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. In het volgende overzicht is voor de verschillende DOCTYPE-declaraties aangegeven of de weergave al dan niet in de standards modus is. Nieuwere browsers proberen zich meer en meer aan de officiële standaarden te houden.01 Transitional zonder URI HTML 4. dat fouten in de code niet meer geaccepteerd worden.0 Strict met URI HTML 4.

--> 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. plaatsing op andere sites. Je kunt een achtergrondafbeelding definiëren. als in de body geplaatst worden. verveelvoudiging op welke andere wijze ook en/of commercieel gebruik van deze handleiding alleen na toestemming van de auteur.01 Transitional//EN"> Titel document Met het TITLE element wordt een titel voor het document vastgelegd. Het commentaar kan zowel in de head van het document. de favorieten (bij Microsoft Internet Explorer) of de hotlist (bij Opera). Deze titel wordt niet weergegeven in het documentvenster. maar in de titelbalk van het venster. die duidelijk maakt waar het document over gaat en op basis waarvan bijvoorbeeld gebruikers van een zoekmachine kunnen beslissen. <BODY> </BODY> Hiernaast zie je wat de basisweergave van de browser is. Het is verstandig een titel te gebruiken. een achtergrondkleur en kleuren voor de tekst en de hyperlinks. De opgegeven kleuren voor de tekst en de hyperlinks gelden voor het hele document. maar wel zichtbaar is als iemand de source (bron) van het document bekijkt. dan moet je gebruik maken van het FONT element (zie het onderdeel Weergave tekst). Elk document moet een TITLE element bevatten. In het volgende voorbeeld zijn geen attributen aan het BODY element toegevoegd. 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 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. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. 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.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Het TITLE element wordt bijvoorbeeld als volgt gebruikt: <HEAD> <TITLE>Handleiding HTML . of het bekijken van het document zinvol is. . Wanneer je tekst plaatselijk in een andere kleur wilt weergeven.

Het is verstandig een niet al te groot bestand te kiezen en daardoor de downloadtijd zoveel mogelijk te beperken. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. De Microsoft Internet Explorer specifieke attributen LEFTMARGIN. dat nog slechts beperkt wordt ondersteund. LINK. Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden. Met de attributen LINK. is PNG. De attributen BACKGROUND en BGCOLOR kun je ook gecombineerd gebruiken. als een afbeelding met een transparante achtergrond wordt toegepast. De achtergrondkleur wordt weergegeven zolang de achtergrondafbeelding nog niet is geladen. 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. <BODY BACKGROUND="watermerk.gif"> </BODY> In een nieuw venster kun je het resultaat bekijken. VLINK en ALINK. 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. Algemeen ondersteunde formaten van afbeeldingen zijn GIF en JPG. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst.Met het BACKGROUND attribuut kun je aangeven. Door de browser wordt de afbeelding zo vaak gedupliceerd dat de hele achtergrond ermee bedekt is. Omdat deze attributen geen deel . Het is verstandig altijd de attributen BGCOLOR en/of BACKGROUND in combinatie te gebruiken met de attributen TEXT. zodat je niet het risico loopt dat de standaardkleuren van de browser voor tekst en hyperlinks wegvallen in de achtergrond. welke afbeelding als achtergrond voor het document gebruikt moet worden. TOPMARGIN. Een nieuw formaat. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. of als de afbeelding niet gevonden wordt. VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is.

">Voor het document . sans-serif. wordt het gebruik afgeraden. De browser plaatst standaard de inhoud van een document zo'n 4 à 5 pixels uit de rand van het venster of frame.0. De margin eigenschap zorgt ervoor dat ruimte wordt vrijgehouden tussen de inhoud van het document en de rand van het venster. moet je bovendien de padding eigenschap op te nemen met de waarde "0". <BODY BGCOLOR="#FFFFCC" TEXT="#000000" STYLE="margin: 0px. Deze stijlen kunnen een vergelijkbaar resultaat opleveren als via de attributen van het BODY element. <BODY STYLE="font-family: Arial. color: red. Een voorbeeld van het gebruik van de margin eigenschappen in een stijl wordt hierna gegeven. de meeste slechts ondersteund worden door de versies 4. De eigenschappen font-family en font-size zijn gebruikt om het lettertype en de lettergrootte van de tekst in het document vast te leggen."> <P STYLE="margin-top: 0px. Helvetica. font-size: 18px. Met de eigenschappen color en background zijn de kleur van de tekst. background: #FFFFCC url(watermerk. Zie ook de toelichting op het gebruik van stijlen in hyperlinks. padding: 0px. linker bovenhoek. margin: 20px"> </BODY> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Om ook in Opera het bedoelde effect te bereiken. Met behulp van stylesheets kunnen voor het BODY element stijlen gedefinieerd worden.gif).0 en hoger.0 en hoger van de genoemde browsers en er een goed alternatief is in de vorm van stylesheets.. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Bijvoorbeeld als je gebruik maakt van frames zonder randen. In het volgende voorbeeld is met het STYLE attribuut een inline stijl voor het BODY element gespecificeerd.uitmaken van HTML 4. de achtergrondkleur en de achtergrondafbeelding gedefinieerd. maar daarnaast ook op andere punten de weergave van het document beïnvloeden. of van inline frames. Netscape Navigator 6.</P> </BODY> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Je kunt dit oplossen door voor het eerste P element de margin-top eigenschap op te nemen met de waarde "0". Mozilla en Firefox kun je dat regelen door voor het BODY element de margin eigenschap op te nemen met de waarde "0". Dit werkt wanneer voor het document een DOCTYPE-declaratie is opgenomen. Als het document in de nieuwste browsers echter wordt weergegeven in de standards modus. Soms is het handig om de inhoud direct tegen de randen te plaatsen.. dan houdt de browser de normale bovenmarge aan voor het P element en staat de tekst dus niet tegen de bovenrand. . Voor Microsoft Internet Explorer. die ervoor zorgt dat het document wordt weergegeven in de quirks modus (waarbij rekening gehouden wordt met fouten in oudere browsers).

Deze elementen worden altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en soms ook door een blanco regel. moet je er rekening mee houden dat stijlen gedefinieerd voor het BODY element niet in elke browser geërfd worden in een tabel. dat gebruikt kan worden voor het weergeven van tekst in meerdere kolommen naast elkaar. het DEL element inhoud welke is . Dat geldt bijvoorbeeld voor het CENTER element. In het ADDRESS kunnen adresgegevens van de auteur worden opgenomen.Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Het INS element bevat de inhoud welke is toegevoegd. Deze worden beschreven in het onderdeel Weergave tekst. kun je deze het beste ook definiëren voor de elementen TH en TD. Daarnaast zijn er elementen. Aan het begin van een document. wordt gegeven in het onderdeel CSS en elementen.5 voor een deel van de eigenschappen. dat wil zeggen zoals deze staat in de bron van het document. Het BR element kan gebruikt worden om een overgang naar een nieuwe regel te forceren. Het PRE element kan toegepast worden. Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin Introductie structureren van tekst Tekst in een HTML-document kan op verschillende manieren gestructureerd worden. Soms hebben elementen meer betrekking op de weergave van blokken tekst. welke cursief worden weergegeven. kunnen koppen geplaatst worden met het Hx element. De elementen DEL en INS kunnen gebruikt worden om revisie-informatie in een document vast te leggen. Bij de elementen P. Wanneer je gebruik maakt van tabellen. H6). welke gebruikt kunnen worden. Voor de opmaak van stukjes tekst binnen een element op blokniveau zijn inline elementen beschikbaar. Zie ook het onderdeel CSS en browsers. Dat geldt in Netscape Navigator 4 voor alle eigenschappen en in Microsoft Internet Explorer 4 t/m 5. ADDRESS. Als scheiding tussen blokken tekst en/of andere inhoud van een document kunnen horizontale lijnen geplaatst worden met het HR element. Achtergrondinformatie over de indeling van elementen en de wijze waarop ze hun plek vinden in het venster van de browser. Om een stijl ook voor de inhoud van de cellen van een tabel te laten gelden. 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.. CENTER. Overgangen naar een nieuwe regel in de bron van het document worden evenwel genegeerd. Een ander voorbeeld is het Netscape specifieke MULTICOL element. BLOCKQUOTE. Dit element is beschikbaar in zes verschillende groottes (H1 . of bijvoorbeeld tussen de verschillende paragrafen. Hx en HR gaat het om zogenaamde elementen op blokniveau. wanneer tekst door de browser moet worden weergegeven in vaste opmaak. waarmee een deel van de inhoud van een document gecentreerd kan 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. MULTICOL. De meest algemene vorm is het indelen van tekst in paragrafen. Hiervoor kan gebruik gemaakt worden van het P element.

Als je de tekst wilt weergegeven zoals in de bron van het document. Hierna wordt eerst ingegaan op de wijze waarop HTML met de witruimte in een document omgaat.</P> Deze tekst is aan de rechterzijde van het venster of frame uitgelijnd. Meerdere spaties maak je met het non-breaking space teken. Deze elementen kunnen als element op blokniveau. Wanneer je de overgang naar een nieuwe regel wilt forceren." (non-breaking space).. . dan moet je gebruik maken van het BR element (zie Overgang nieuwe regel)... dan kun je het PRE element gebruiken (zie Vaste opmaak). spaties Paragrafen Voor gewone tekst in een document wordt het P element gebruikt. Indien het element gevolgd wordt door een tweede P element. uitgelijnd. vaak ter grootte van ongeveer één blanco regel. dan schuiven de witruimtes in elkaar en resteert tussen de blokken tekst slechts één blanco regel. 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. spaties maak je . <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. 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. Meerdere &nbsp. De door het P element ingesloten tekst wordt in het algemeen voorafgegaan en gevolgd door een witruimte. Meerdere spaties achter elkaar kun je maken met het speciale teken "&nbsp. <P ALIGN="right">Deze tekst . of een ander element op blokniveau (bijvoorbeeld BLOCKQUOTE. Witruimte Een blok tekst wordt door de browser standaard aan de linkerzijde van bijvoorbeeld een venster of een frame uitgelijnd.verwijderd.. Een toelichting wordt gegeven in het onderdeel Weergave tekst.&nbsp. maar ook als inline element gebruikt worden. 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. PRE en Hx). zoals in het volgende voorbeeld.&nbsp. Als de tekst langer is dan op één regel past.

. maar springt hij een stukje in..</P> Doordat gebruik gemaakt is van "&nbsp. color: #FF0000">De opmaak . de regelhoogte met de line-height eigenschap." begint de eerste regel van deze paragraaf niet langs de linker kantlijn.. welke er specifiek voor bedoeld zijn om tekst te laten inspringen.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. de lettergrootte met de font-size eigenschap en de kleur van de tekst met de color eigenschap.. dan kun je gebruik maken van het speciale teken "&nbsp. In het volgende voorbeeld wordt een inline stijl gebruikt. Doordat . Je plaatst dit speciale teken eenvoudig een aantal keren aan het begin van de paragraaf. Met verschillende stijleigenschappen wordt de opmaak van het blok tekst bepaald: de uitlijning met de textalign eigenschap. <P STYLE="text-align: justify.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. stukje in. font-family: Arial.." (non-breaking space). line-height: 20px. beschreven.Voor het P element kunnen met behulp van stylesheets stijlen gedefinieerd worden.&nbsp. kun je met het STYLE attribuut een inline stijl definiëren: <P STYLE="text-indent: 15px">De tekst op . Vervolg: Inspringen Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin Inspringen In HTML zijn er geen elementen. van een stijl.&nbsp. Wanneer je alleen de eerste regel van een paragraaf een stukje wilt laten inspringen. font-size: 13px. sans-serif. door aan het P element het STYLE attribuut toe te voegen. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. <P>&nbsp. Toch zijn er wel mogelijkheden om het gewenste effect te bereiken. .&nbsp. Je gebruikt daarvoor de text-indent eigenschap.. het lettertype met de font-family eigenschap. Het inspringen van de eerste regel van een paragraaf kun je ook bereiken met behulp van stylesheets. Wanneer het inspringen slechts op één paragraaf betrekking heeft.

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

<CENTER>Deze tekst is gecentreerd.0 het label afgekeurd gekregen. .. Overigens heeft ook het ALIGN attribuut van de elementen P en DIV in HTML 4. Bijvoorbeeld om een afbeelding te centreren. In HTML 4. Het CENTER element wordt behalve voor tekst ook vaak gebruik voor andere inhoud. gecentreerd.</DIV> Deze tekst is gecentreerd. kan gebruik gemaakt worden van het ALIGN attribuut met de waarde "center". Bekijk in een nieuw venster of de browser de stijlen correct weergeeft..</CENTER> Deze tekst is gecentreerd. Ter illustratie wordt in het volgende voorbeeld tekst gecentreerd met het STYLE attribuut en de text-align eigenschap. Voor het centreren kan ook gebruik gemaakt worden van het CENTER element. <P STYLE="text-align: center.</P> Deze tekst is gecentreerd en wordt geplaatst over twee regels.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.">Als de . <DIV ALIGN="center">Deze tekst is gecentreerd. De achtergrond hiervan is. Wanneer het om tekst gaat welke deel uitmaakt van het P element.Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.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. <P ALIGN="center">Deze tekst is gecentreerd en wordt<BR> geplaatst over twee regels. dat de opmaak van een document in de toekomst zoveel mogelijk geregeld moet worden met behulp van stylesheets. Centreren De inhoud van een HTML-document kan op verschillende manieren in het venster gecentreerd worden.

. van een stijl.</BR></TD> </TR> </TABLE> . Mozilla...">. als je het plaatst in een DIV element. ondersteunen. <DIV STYLE="text-align: center. text-align: center.. of door Microsoft Internet Explorer 5. Wanneer je beide oplossingen combineert. waarvan de middelste bedoeld is om de breedte tussen de tekstkolommen vast te leggen. margin-right: auto.. dan is het P element in vrijwel alle browsers gecentreerd (Microsoft Internet Explorer vanaf versie 5. wordt echter niet toegevoegd. Om het P element te centreren. door een fout in deze browsers met betrekking tot de text-align eigenschap te benutten. margin-right: auto. Het P element is ook gecentreerd in Microsoft Internet Explorer 6. Firefox."><P STYLE="width: 120px. <DIV STYLE="text-align: center.De elementen CENTER en DIV worden voorafgegaan en gevolgd door de overgang naar een nieuwe regel. margin-left: auto. Netscape Navigator vanaf versie 6.0 en hoger. zoals bij het P element. margin-left: auto. <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"> <TR> <TD WIDTH="270" VALIGN="top">In dit . Netscape Navigator 6. maar alleen als een DOCTYPE-declaratie is gebruikt.0. 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. In het volgende voorbeeld is voor een P element met de width eigenschap een breedte gedefinieerd.. In deze browser kun je het P element dus centreren. Deze oplossing wordt ondersteund door Mozilla. Wanneer je een blok tekst een bepaalde breedte wilt geven en als geheel wilt centreren. Je kunt tabellen bijvoorbeeld gebruiken als je tekst in kolommen wilt plaatsen.</P></DIV> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. dan wordt het P element niet gecentreerd maar links in het venster of frame geplaatst. Je kunt het P element toch centreren.0)..">Dit P element .0. waarvoor text-align: center geldt. Volgens de regels mag een browser de text-align eigenschap alleen gebruiken om de inline inhoud van een element op blokniveau uit te lijnen. die ervoor zorgt dat het document wordt weergegeven in de standards modus. Firefox en Opera vanaf versie 4.0 en hoger en Opera 4. maar een blanco regel.0 in de standards modus) doet het met alle ingesloten elementen op blokniveau. Wanneer het P element wordt weergegeven door Microsoft Internet Explorer 6. Microsoft Internet Explorer (met uitzondering van versie 6. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. moet je de eigenschappen margin-left en margin-right beide opnemen met de waarde auto.</BR></TD> <TD WIDTH="15"></TD> <TD WIDTH="270" VALIGN="top">De tekst . dan kun je het beste gebruik maken van stylesheets. text-align: left. houden. In het volgende voorbeeld is een eenvoudige tabel gebruikt met drie kolommen."><P STYLE="width: 120px.</P></DIV> Kolommen Tabellen worden veel gebruikt bij het structureren van de inhoud van HTML-documenten.0.0 in de quirks modus.5 of lager..

Groot nadeel is evenwel dat het MULTICOL element slechts door een enkele browser wordt ondersteund en geen deel uitmaakt van HTML 4. bijvoorbeeld afbeeldingen. Wanneer je in een blok tekst ingesloten door bijvoorbeeld de elementen P.In dit voorbeeld wordt de tekst met behulp van een tabel in twee kolommen geplaatst. Als je kolommen van ongeveer gelijke lengte wilt. Een voordeel is verder dat de tekst automatisch over de kolommen wordt verdeeld. dan moet je gebruik maken van het BR element. . Aan het BR element kun je het CLEAR attribuut toevoegen. zelf in de gaten houden. door het koppelen van een stijl aan het ADDRESS element. Adresgegevens Het ADDRESS element wordt gebruikt om aan het begin of het eind van een document een auteursnaam. 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. welke met het ALIGN attribuut zwevend zijn gemaakt. <ADDRESS>Naam<BR> E-mail: gebruiker@provider. waarmee je de inhoud van een document over meerdere kolommen kunt verdelen.0 en 4. <P>Deze tekst is ingesloten door het P element. tabellen of inline frames.x wordt het MULTICOL element ondersteund. Met twee BR elementen<BR><BR>krijg je een blanco regel tussen de tekst. De tekst wordt niet automatisch over de kolommen verdeeld. Het gebruik van het CLEAR attribuut is vooral handig bij elementen. Alleen door Netscape Navigator 3. De ingesloten tekst wordt in het algemeen cursief weergegeven. Voordeel van deze methode is dat de meeste browsers tegenwoordig tabellen ondersteunen. of een onderschrift weer te geven. de rechterzijde of aan beide zijden.0. BLOCKQUOTE en ADDRESS toch een overgang naar een nieuwe regel wilt forceren. Met het BR element<BR>ga je naar een nieuwe regel. Je kunt er dus beter maar geen gebruik van maken. In vergelijking met het werken met tabellen vraagt de methode met het MULTICOL element minder HTML-code. een (e-mail of website) adres.</P> De browser geeft dit zo weer: Deze tekst is ingesloten door het P element. Met twee BR elementen krijg je een blanco regel tussen de tekst. Overgang nieuwe regel De browser negeert overgangen naar een nieuwe regel. die je hebt opgenomen in de bron van het document. moet je de verdeling. elke keer als je de inhoud aanpast. Met het BR element ga je naar een nieuwe regel.nl Op dezelfde wijze als bij paragrafen kun je de opmaak van de adresgegevens bepalen.nl</ADDRESS> De browser geeft dit weer als: Naam E-mail: gebruiker@provider.

Doe je dat niet. Spaties en een overgang naar een nieuwe regel worden weergegeven. color: #FF0000. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. moet je ervoor zorgen dat je het aantal karakters op een regel beperkt houdt. zonder dat de browser daar iets aan mag veranderen. <PRE STYLE="font-size: 16px. Koppen . Het PRE element kan daarmee ook gebruikt worden om meerdere blanco regels achter elkaar vast te leggen. 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. font-family: sans-serif. Voor het PRE element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een blok tekst in tabelvorm ingesloten door het PRE element. 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. In het volgende voorbeeld wordt een inline stijl gebruikt. Voor de door het PRE element ingesloten tekst gebruikt de browser een lettertype met een vaste letterafstand. In het onderdeel Tekst bij elkaar houden vind je beschreven hoe je kunt voorkomen.De browser voegt aan het eind van een regel automatisch een overgang naar een nieuwe regel in."> 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. Soms wordt daardoor een stuk tekst over twee regels verdeeld. terwijl je die liever op één regel bij elkaar wilt houden. dat ongewenste overgangen naar een nieuwe regel ontstaan. dan loopt de tekst het venster uit en moet de lezer horizontaal gaan scrollen. zoals deze in de bron van het document zijn opgenomen. door aan het PRE element het STYLE attribuut toe te voegen. Vaste opmaak Met behulp van het PRE element kan tekst in een vaste opmaak worden opgenomen.

door aan het Hx element het STYLE attribuut toe te voegen.Het Hx element wordt gebruikt om een kop (header) te definiëren. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Het niveau wordt gekozen door voor de "x" in Hx een getal in te vullen tussen 1 en 6. .">Handleiding HTML</H2> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Met verschillende stijleigenschappen wordt de opmaak van de kop bepaald: het lettertype met de fontfamily eigenschap. welke bijvoorbeeld aan het begin van een document. <H3 ALIGN="center">Deze kop is gecentreerd</H3> Deze kop is gecentreerd Voor het Hx element kunnen met behulp van stylesheets stijlen gedefinieerd worden. font-family: sans-serif. 3. of tussen de paragrafen geplaatst kan worden. In het volgende voorbeeld wordt een inline stijl gebruikt. 2. color: #FFFFFF. <Hx>Dit is Header Hx</Hx> Door voor x achtereenvolgens 1. text-align: center. de achtergrondkleur met de background-color eigenschap en de horizontale uitlijning met de text-align eigenschap. <H2 STYLE="font-size: 40px. 4. de kleur van de tekst met de color eigenschap. 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. background: #336699. Er zijn zes verschillende niveaus voor de koppen.

0 en hoger. border: solid #336699 0px.5 en hoger en Firefox ondersteunde COLOR attribuut kan de kleur van de lijn worden vastgelegd. <HR SIZE="5" NOSHADE> Met het door Internet Explorer. Mozilla 1."> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. <HR WIDTH="50%" ALIGN="right"> De dikte van de lijn bepaal je met het SIZE attribuut. Dit attribuut maakt echter geen deel uit van een HTML-specificatie. of als percentage van de beschikbare breedte. Netscape Navigator 7. background-color: #336699. Voor het HR element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. backgroundcolor. width en height leidt tot vrijwel hetzelfde resultaat in Microsoft Internet Explorer 4. Het NOSHADE attribuut geeft aan dat de lijn niet in 3-D. Wil je de lijn een andere hoogte geven dan wijzig je de waarde van de height eigenschap. Mozilla. Netscape Navigator 6. waarin gebruik gemaakt wordt van de stijleigenschappen border.0 en hoger. Als het om de kleur en de hoogte van de lijn gaat. Daardoor is het nodig meerdere eigenschappen te combineren. color.Horizontale lijnen Horizontale lijnen maak je met het HR element. hebben de verschillende browsers echter niet gekozen voor een uniforme oplossing.2. color: #336699. <HR> Standaard wordt de lijn over de gehele beschikbare breedte geplaatst. kun je met het ALIGN attribuut de horizontale uitlijning vastleggen. Bijvoorbeeld in 5 pixels: .0 en hoger. Met het WIDTH attribuut kun je zelf de breedte bepalen in pixels. De volgende oplossing. Als de lijn niet de volledige breedte heeft. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. maar vlak moet worden weergegeven. Firefox en Opera 4. height: 2px. Voor een lijn in kleur in de standaard hoogte gebruik je de volgende code: <HR STYLE="width: 75%.

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

maar vooral wilt aangeven om wat voor soort tekst het gaat. U... Logische tekstopmaak-elementen De volgende elementen worden gerekend tot de logische tekstopmaak-elementen: EM. In de browser zie je: Dit is vet en typemachine tekst en onderstreept en cursief. 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 geïntroduceerde BLINK element gerekend worden. Je gebruikt ze. Omdat het element geen deel uitmaakt van HTML 4.. SMALL. CODE. SUB en SUP. KBD en VAR. STRONG. S. TT. De verschillende fysieke tekstopmaak-elementen kunnen ook gecombineerd gebruikt worden. Deze tekst heeft <EM>nadruk</EM> Deze tekst heeft <STRONG>extra nadruk</STRONG> Zoals in de <CITE>Handleiding HTML</CITE> te lezen valt . De browser (of als die mogelijkheid er is. waarmee tekst knipperend kan worden weergegeven. I. Dit is <B><TT>vet en typemachine tekst</TT></B> en <U><I>onderstreept en cursief</I></U>. STRIKE. 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 . de gebruiker via de instellingen van de browser) bepaalt vervolgens hoe de ingesloten tekst wordt weergegeven. Je gebruikt ze.0 en knipperende tekst bovendien door veel gebruikers als hinderlijk wordt ervaren. wordt geadviseerd geen gebruik van dit element te maken. SAMP. als je niet de exacte weergave wilt bepalen. BIG.. DFN. 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 . als je de weergave van de tekst wilt vastleggen. CITE.De volgende elementen worden gerekend tot de fysieke tekstopmaak-elementen: B.

Als geen van de opgegeven lettertypen is geïnstalleerd. In de browser zie je: Afhankelijk van de beschikbaarheid van de opgegeven lettertypen.</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.</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 . als het eerste niet aanwezig is op het systeem van de gebruiker. <FONT SIZE="5" FACE="Garamond. Als waarde van het SIZE attribuut kan een getal van 1 t/m 7 gebruikt worden om de absolute lettergrootte vast te leggen. lettergrootte kan uitzetten.. De waarde van het FACE attribuut is de naam van één lettertype.. dat bij sommige browsers de gebruiker de weergave van de. Het FACE attribuut van het FONT element bepaalt het lettertype dat gebruikt wordt voor de tekst. of het standaard lettertype van de browser. Om de structuur van je document helder te houden. Een tweede lettertype wordt gebruikt. lettergrootte: <FONT SIZE="-2">SIZE="-2"</FONT> <FONT SIZE="-1">SIZE="-1"</FONT> . van de browser. of meerdere lettertypen gescheiden door een komma. wordt het standaard lettertype van de browser gebruikt.. of een getal gecombineerd met een "+" of een "-" om de grootte van de letters in ten opzichte van de standaard lettergrootte te bepalen. via het SIZE attribuut gedefinieerde. kun je voor koppen daarom het beste altijd een Hx element gebruiken.Times New Roman">Afhankelijk . . <P>De absolute lettergrootte is <FONT size="1">SIZE="1"</FONT> <FONT size="2">SIZE="2"</FONT> .. Times New Roman.</FONT>.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. wordt deze tekst weergegeven in Garamond.

Netscape Navigator 6. Bij Microsoft Internet Explorer vanaf versie 4. Mozilla. Een door de auteur via het COLOR attribuut vastgelegde kleur wordt niet gewijzigd in de kleur van de gebruiker. Daaronder de weergave wanneer de browser de gebruikerskleuren moet weergeven. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. Dat kan als resultaat hebben dat de tekst waarvoor het COLOR attribuut is gebruikt. Het spreekt voor zich dat je bij het gebruik van het COLOR attribuut rekening houdt met de achtergrondkleur.</FONT>. Rechtsboven is de weergave door de browser te zien en linksboven een schermafdruk van de bedoelde weergave. Daarmee heb je echter nog niet gewaarborgd dat de weergave in alle gevallen goed is.Het COLOR attribuut van het FONT element bepaalt de kleur van de tekst. Weergave met gebruikerskleuren (zwart voor de tekst en wit voor de achtergrond) door Microsoft Internet Explorer 4 en hoger. Niet elke browser doet dat echter op een correcte manier.0 en hoger. welke je via het BGCOLOR attribuut van het BODY element hebt gedefinieerd. 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).0. Netscape Navigator vanaf versie 6.0.1 en hoger . Firefox en Opera 2. In de browser zie je: Deze tekst wordt weergegeven in rood. moeilijk of niet leesbaar wordt. Mozilla.1 geldt de keuze van de gebruiker voor alle kleuren. <FONT SIZE="6" COLOR="#FF0000" FACE="Courier New">Deze tekst wordt weergegeven in rood. Firefox en Opera vanaf versie 2. Bij Netscape Navigator t/m versie 4 echter hebben de kleuren van de gebruiker alleen prioriteit over de via het BODY element gedefinieerde kleuren.

. cursief of onderstreept weer te geven.. <I>cursief</I> of <U>onderstreept</U> weergegeven worden. -kleur en -type voor een document vast te leggen.Arial"> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. In het volgende voorbeeld zijn de attributen SIZE. zal dat het beste een donkere kleur kunnen zijn. kan ook <B>vet</B>. licht grijs. 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. dan is het verstandig in ieder geval een kleur voor de tekst te kiezen die de minste kans op problemen heeft. bijvoorbeeld om de tekst vet.</FONT></P> In de browser zie je: De tekst ingesloten door het FONT element kan ook vet. <BASEFONT SIZE="5" COLOR="fuchsia" FACE="Lucida Sans.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. COLOR en FACE aan het BASEFONT element toegevoegd. <P><FONT SIZE="+1" COLOR="red">De tekst . 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. I en U). Basislettertype Het BASEFONT element wordt gebruikt om de standaard lettergrootte. Het FONT element kan ook gecombineerd gebruikt worden met de fysieke tekstopmaak-elementen. geel). Omdat de meeste gebruikers als standaard waarschijnlijk een lichte achtergrond toepassen (wit. Wanneer je het desondanks belangrijk vindt dat de weergave ook in deze browser correct is.

. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. . Opera houdt in het hele document de standaard lettergrootte van de browser aan. 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. geldt de waarde van het SIZE attribuut van het BASEFONT element als beginwaarde. element: <FONT SIZE="-3">SIZE="-3"</FONT> <FONT SIZE="-2">SIZE="-2"</FONT> . lt. Voor het SIZE attribuut is de ondersteuning niet altijd zoals verwacht.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. <BASEFONT SIZE="4"> <P>In dit document . Pas als het SIZE attribuut van het FONT element wordt gebruikt... 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.

</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd. Wanneer je de kleur van alle tekst in een document in één keer wilt vastleggen. die bepaalt dat de tekst ingesloten door het STRONG element niet alleen met extra nadruk. sans-serif. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.. Het BASEFONT element wordt helemaal niet (meer) ondersteund door Netscape Navigator 6.. . maar via de background-color eigenschap ook met een gele achtergrond moet worden weergegeven.. heeft een aantal van de fysieke tekstopmaak-elementen (S. waarmee je stijlen kunt definiëren voor HTML-elementen.De attributen COLOR en FACE van het BASEFONT element worden alleen door Microsoft Internet Explorer ondersteund. font-family: Arial. <P STYLE="font-size: 21px. is bovendien de color eigenschap opgenomen. In plaats daarvan is het de bedoeling dat gebruik gemaakt wordt van stijlen.0 het label afgekeurd gekregen.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Hierna wordt dat in een aantal voorbeelden gedemonstreerd. Omdat het verstandig is altijd een combinatie van voor. Je kunt er daarom beter voor kiezen. zoals je wenst. dan kun je daarom beter gebruik maken van het TEXT attribuut van het BODY element (zie voor een toelichting het onderdeel Structuur document). Al met al biedt het BASEFONT element weinig garantie dat de weergave in de verschillende browsers is. Het gebruik van stijlen Om te komen tot een betere scheiding tussen de structuur van een document en de presentatie ervan.">Deze opmaak is . Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Mozilla en Firefox. color: #FF0000. STRIKE en U) en de elementen FONT en BASEFONT in HTML 4. color (gecombineerd met backgroundcolor) en font-family gebruikt in plaats van het FONT element met de attributen SIZE. Er zijn stijleigenschappen. gebruik te maken van stijlen.0 en hoger. <P>Met <STRONG STYLE="color: #000000. background-color: #FFFF99">Cascading Style Sheets</STRONG> krijg .. welke hetzelfde effect hebben als de beschreven fysieke tekstopmaak-elementen en de elementen FONT en BASEFONT. Cascading Style Sheets is de taal. background-color: #FFFFFF. COLOR en FACE.en achtergrondkleur te gebruiken. In het volgende voorbeeld worden de eigenschappen font-size.

<SPAN STYLE="text-decoration: underline. Je kunt ze dan beter opnemen in een stijlblok in de head van het document. } P { font-size: 13px.en achtergrondkleur voor het document vastgelegd.">vaste letterafstand</SPAN> en <SPAN STYLE="font-size: large. <SPAN STYLE="font-family: monospace.In plaats van de fysieke tekstopmaak-elementen B. Wanneer de stijlen betrekking hebben op het hele document of op meerdere documenten. welke browsers kunnen weergeven in de vorm van een tooltip. background-color: #FFFF99. <P>Dit is <SPAN STYLE="font-weight: bold. } --> </STYLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Daarnaast kan met behulp van stylesheets (CSS 2) aan bijvoorbeeld een spraaksynthesizer aanwijzingen over de uitspraak gegeven worden. Ze hebben betrekking op afkortingen. of in een extern stijlblad. Voor het P element is daarnaast de lettergrootte gedefinieerd met de font-size eigenschap. U. Helvetica. color en background-color een stijl gedefinieerd voor het BODY element. I. In het volgende voorbeeld is in het stijlblok met de eigenschappen font-family.0 zijn ABBR en ACRONYM. <STYLE TYPE="text/css"> <!-BODY { font-family: Arial.">vet</SPAN>. sans-serif.">onderstreept</SPAN>. TT en BIG kunnen de eigenschappen fontweight.">groot</SPAN></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. font-family en font-size gebruikt worden. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Afkortingen Nieuwe elementen in HTML 4. text-decoration. font-style. dan ligt het niet voor de hand ze vast te leggen via een inline stijl. <SPAN STYLE="fontstyle: italic.">cursief</SPAN>. color: #000000. Daarmee worden het lettertype en de voorgrond. . Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Het TITLE attribuut van deze elementen kan gebruikt worden om de lange vorm van de afkorting vast te leggen.

</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. kun je de afkorting met behulp van een stijl afwijkend maken van de gewone tekst. 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. Je kunt ook een andere wijze van presentatie kiezen. cursor: help. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.. gevormd is uit één of meer beginletters van een aantal woorden en bovendien zelf een uitspreekbaar woord is. Om de bezoeker te wijzen op de extra functionaliteit.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. background-color: #FFFFFF. om de ondersteuning door de browser te kunnen beoordelen.05em. <P>De afkorting <ACRONYM STYLE="color: #FF0000. <P>De afkorting <ABBR STYLE="color: #FF0000. background-color: #FFFFFF. voor de stijl van de elementen ABBR en ACRONYM de vrij algemeen ondersteunde stijleigenschappen color en background-color gebruikt." TITLE="chronische aspecifieke respiratoire aandoeningen">cara</ACRONYM> is een letterwoord.) wordt ABBR gebruikt. plaatsen sommige browsers een onderbroken lijn onder de door de elementen ABBR en ACRONYM ingesloten tekst." TITLE="File Transfer Protocol">FTP</ABBR>programma. HTML en incl. In de voorbeelden hiervoor zijn. Revisie-informatie . In het speciale geval dat de afkorting een letterwoord is. <P>Bestanden kun je uploaden met een <ABBR STYLE="border-bottom: dotted 0. Ten behoeve van de weergave in browsers die dat niet doen (bijvoorbeeld Microsoft Internet Explorer)." TITLE="HyperText Markup Language">HTML</ABBR> is geen letterwoord.Voor gewone afkortingen (zoals etc. kan ACRONYM toegepast worden. In de volgende voorbeelden is daarvoor een kleur gebruikt. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. Voorbeelden van letterwoorden (of acroniemen) zijn cara (chronische aspecifieke respiratoire aandoeningen) en radar (radio detection and ranging).

De browser moet deze elementen op een passende manier weergegeven... Mozilla en Firefox ondersteund. Dat kan bijvoorbeeld handig zijn als door meerdere mensen gezamenlijk aan het document gewerkt wordt..nl/revisie.html" DATETIME="2002-0315T14:00:00Z+01:00">toevoegen</INS> of <DEL CITE="http://www.handleidinghtml.0 biedt de mogelijkheid om revisie-informatie in een document op te nemen. Het INS element gebruik je om aan te geven dat de ingesloten tekst is toegevoegd. een datum van <INS CITE="http://www.nl/revisie.HTML 4..</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. 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). De attributen CITE en DATETIME worden alleen door Netscape Navigator 6. <P>.handleidinghtml. De attributen CITE en DATETIME kun je gebruiken om extra informatie op te nemen.html" DATETIME="2002-0315T14:00:00Z+01:00">verwijderen</DEL> .. het DEL element om duidelijk te maken dat de ingesloten tekst verwijderd wordt.. Met het DATETIME attribuut kan het tijdstip van wijziging worden vastgelegd. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. Je krijgt dan het volgende te zien: . waarin de wijzigingen nader worden toegelicht.1 en hoger. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. dat de ingesloten tekst is <INS>ingevoegd</INS> of wordt <DEL>verwijderd</DEL>. De meeste browsers doen dat door toegevoegde tekst onderstreept en te verwijderen tekst doorgestreept weer te geven. <P>.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Het CITE attribuut verwijst naar een document.

<P>. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. Daarnaast wordt de door het BLOCKQUOTE element ingesloten tekst voorafgegaan en gevolgd door een blanco regel..Door Microsoft Internet Explorer vanaf versie 4. Dit wordt alleen gedaan door Firefox 1. dat extra informatie in de vorm van een tooltip kan weergeven. Het is daarom verstandig deze elementen alleen te gebruiken in situaties. bij ingevoegde of <DEL TITLE="Verwijderd na bespreking op 10 november...0 en Opera 4 en hoger plaatsen een citaat altijd tussen dubbele aanhalingstekens. Browsers die de elementen INS en DEL niet kennen. maar ook als element op blokniveau. waarvan je weet dat elke browser ze ondersteunt (bijvoorbeeld in een intranet).">te verwijderen</DEL> tekst . Citeren Het BLOCKQUOTE element (dat toegelicht wordt in het onderdeel Structureren van tekst) is bedoeld voor blokken tekst.. In veel talen is het gebruikelijk een citaat tussen dubbele aanhalingstekens te plaatsen en een citaat binnen een citaat tussen enkele aanhalingstekens. dan mogen ze geen elementen op blokniveau bevatten. Wanneer ze als inline element worden gebruikt..0 het Q element opgenomen. <P>.1 en Opera vanaf versie 5 wordt het TITLE attribuut voor de elementen DEL en INS ondersteund. Netscape Navigator vanaf versie 6. Netscape Navigator 6. Voor (korte stukjes) inline tekst is nieuw in HTML 4. dat de bron is van het citaat. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. . Firefox 1. welke uit een andere bron geciteerd worden. Het CITE attribuut kan gebruikt worden om te verwijzen naar het document. breaks</Q>. laten afhangen van de via het LANG attribuut gedefinieerde taal. De elementen INS en DEL kunnen niet alleen als inline element gebruikt worden.0 en hoger.of doorgestreept. Bovendien moet de browser het soort aanhalingstekens dat gebruikt wordt. Mozilla.5 en hoger. De door het Q element ingesloten tekst moet door de browser tussen aanhalingstekens worden geplaatst.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. geven de inhoud op de gebruikelijke wijze weer... Dus niet onder.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.. bedoeld voor <Q>short quotations . Vrijwel alle browsers doen dit door zo'n blok tekst zowel links als rechts te laten inspringen. Mozilla. Microsoft Internet Explorer 4 en hoger geeft nooit aanhalingstekens weer.

. tekst&shy.</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.. maar bij lange woorden kan dat leiden tot een minder fraaie weergave... &shy. In de meeste gevallen is dat geen probleem. Bij eenzijdig uitgelijnde tekst omdat er aan het eind (of begin) van de regel een grote witruimte ontstaat. 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).w3.. Daardoor begint en eindigt een regel standaard altijd met een compleet woord. bij tweezijdig uitgevulde tekst omdat de ruimte tussen de woorden erg groot wordt.verwerkings&shy..2.2" LANG="en">short quotations ..1 en hoger.programma's ... Je kunt dat voorkomen. Je krijgt dan het volgende te zien: Woordafbreken Een browser heeft geen ingebouwd mechanisme om woorden af te breken. <P>. door in het woord één of meer keer de code voor een zacht koppelteken (soft hyphen) op te nemen. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft..org/TR/html4/struct/text. Deze code. breaks</Q>. bedoeld voor <Q CITE="http://www. zorgt ervoor dat het woord als dat nodig is wordt afgebroken en een afbreekstreepje wordt ingevoegd..<P>.. . tekstverwerkingsprogramma's . of &173.</P> <P>..</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.html#h-9. Op dit moment wordt dit attribuut alleen door Netscape Navigator 6.

Firefox en Opera 4 t/m 7. Voor het deel van de tekst dat niet afgebroken mag worden.handleidinghtml.0 en hoger en door Opera 7. Bij het tweede alternatief voor het NOBR element maak je gebruik van stylesheets. Er zijn echter twee goede alternatieven. helemaal niet en geven de tekst dus weer zoals dat standaard gebeurt.nl">Handleiding HTML</A> <A HREF="http://www.">Handleiding HTML</A> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. dan worden deze woorden samen als één woord gezien en wordt er tussenin niet afgebroken.handleidinghtml.2 en hoger. dan kun je dit elementen dus beter niet toepassen.nl"><NOBR>Handleiding HTML</NOBR></A> Het NOBR element maakt geen deel uit van een HTML-specificatie. Mozilla. en &173. Je zou dan gebruik kunnen maken van het NOBR element. Zie voor meer informatie het onderdeel Speciale karakters. 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. <A HREF="http://www. (nonbreaking space. Wanneer je dit speciale teken zonder verdere spaties tussen twee woorden plaatst.handleidinghtml. Netscape Navigator 6 en hoger. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. De door dit element ingesloten tekst mag door de browser niet worden afgebroken en moet dus op één regel geplaatst worden.nl">Handleiding HTML</A> <A HREF="http://www.1 ondersteunen &shy. die je de waarde nowrap geeft. ofwel niet-afbrekende spatie). Het eerste alternatief voor het NOBR element is het gebruik maken van het speciale teken &nbsp. Tekst bij elkaar houden Soms wil je voorkomen dat er op een bepaalde plaats een overgang is naar een nieuwe regel.De code voor het zachte koppelteken wordt correct ondersteund door Microsoft Internet Explorer 5. Netscape Navigator en Opera is de weergave niet correct. .nl" STYLE="white-space: nowrap. Wanneer je wilt voorkomen dat je documenten foutmeldingen opleveren bij de validatie van de HTML-code.handleidinghtml.nl">Handleiding&nbsp. Alleen bij lagere versies van Microsoft Internet Explorer. definieer je een stijl met de white-space eigenschap. <A HREF="http://www.HTML</A> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Daarmee voorkom je. De mogelijkheid met &nbsp. Als alternatief wordt het gewone koppelteken ook wel vervangen door een niet-afbrekend koppelteken (non-breaking hyphen). maar laten in .afbrekende <SPAN STYLE="white-space: nowrap. De code voor het niet-afbrekende koppelteken wordt alleen ondersteund door Microsoft Internet Explorer 5. Firefox en Opera 7. dat de bezoeker genoodzaakt wordt de horizontale schuifbalk te moeten gebruiken om alle tekst te kunnen lezen.5 en hoger.2 en hoger. niet kennen. dat aan het eind van de regel niet mag worden afgebroken.5 en hoger. Browsers die &#8209. Microsoft Internet Explorer en Opera 6. Wanneer je dat wilt voorkomen. is het verstandig dat alleen te doen voor korte stukken tekst. en &#x2011. Opera 4. en in hexadecimale Unicode notatie &#x2011. Netscape Navigator 6 en hoger. Netscape Navigator 7. Een aantal browsers zien woorden met een koppelteken als één woord.0 en hoger en door Mozilla en Firefox. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.">niet-afbrekende</SPAN> Rechts is de weergave door de browser te zien en links een schermafdruk van de weergave door Microsoft Internet Explorer 7. Wanneer je gebruik maakt van één van de beschreven mogelijkheden om tekst bij elkaar te houden. die met behulp de stijleigenschap white-space alleen door Microsoft Internet Explorer 5.0 en hoger.Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. wordt door alle browsers ondersteund..0.0 en hoger breken woorden met een koppelteken die niet geheel op een regel passen. Mozilla. geven helemaal geen streepje weer. daarentegen na het streepje wel af. dan kun je uiteraard gebruik maken van de hiervoor beschreven oplossing om met behulp van een stylesheet tekst bij elkaar te houden. De code voor dat speciale karakter is in decimale notatie &#8209. niet-afbrekende niet&#8209.afbrekende niet&#x2011.

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. Link naar bestand Een hyperlink maak je met het A element. Als je het TITLE attribuut opneemt van het A element. zich 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). waaraan je het HREF attribuut toevoegt. Het TARGET attribuut kun je ook gebruiken als een document in een nieuw venster moet worden geopend. dat het niet alleen af van de browser afhangt of &#8209. Met het HREF attribuut definieer je op welke locatie het bestand. Introductie hyperlinks Hyperlinks (of hypertext links) zijn een essentieel onderdeel van HTML (Hypertext Markup Language). De waarde van het HREF attribuut is een zogenoemde Uniform Resource Identifier (URI). zoals afbeeldingen en geluidsfragmenten. Een hyperlink maak je met het A element (Anchor). Voor deze methoden is de opbouw van de URI: . kun je bepalen met de attributen van het BODY element.2 en hoger het niet-afbrekende koppelteken niet weer. systeem en geïnstalleerde lettertypen (in een testsituatie op een Windows 98SE systeem geeft Opera 7. Een URI is een compacte reeks karakters. Dat andere document kan zich bevinden op de lokale server. dat geopend of gedownload moet worden. maar ook van de combinatie browser. zich bevindt. kun je de hyperlink voorzien van een korte omschrijving in een tooltip. Mozilla en Firefox dat op hetzelfde systeem wel doen). Dat anker kun je vervolgens gebruiken als bestemming van een hyperlink. De aanduiding URI is nieuw in HTML 4. Met het BASE element kun je een basisadres voor de URI's in een document te definiëren. of software die je wilt laten downloaden. De kleur waarmee de hyperlinks worden weergegeven. maar ook op een server elders op de wereld. Het HREF attribuut geeft aan op welke locatie het bestand.0. terwijl de eerder genoemde versies van Microsoft Internet Explorer. daarvoor werd gebruik gemaakt van het begrip URL. Als je werkt met frames. URL's worden nu gezien als een ondergroep van de meer algemene URI's. door een simpele klik van de muis. Ze maken het mogelijk dat je. snel van de ene locatie naar de andere surft. worden weergeven. Het NAME attribuut van het A element gebruik je om een (onzichtbaar) anker in een document te plaatsen. maar het kan ook een ander document betreffen. dat geopend of gedownload moet worden. Je moet er verder rekening mee houden.plaats ervan bijvoorbeeld een vraagteken of een open rechthoek zien. waarmee een bron (resource) geïdentificeerd kan worden. Uniform Resource Locator. kun je met het TARGET attribuut aangeven in welk frame een document geopend moet worden. Meer mogelijkheden voor de weergave heb je als je stijlen definieert met behulp van stylesheets. Een nieuwe bestemming kan zich bevinden op een andere plaats in hetzelfde document. Naast documenten kan het bovendien gaan om andere soorten bestanden. Voorzichtigheid bij het gebruik van het niet-afbrekende koppelteken is dus geboden. Netscape Navigator. Bij een URL wordt een bron (bijvoorbeeld het te openen of te downloaden bestand) geïdentificeerd door de wijze waarop je er toegang tot kan krijgen. en &#x2011.

nl">Handleiding HTML</A> In de browser zie je: Handleiding HTML Verwijs je niet naar de host. Path geeft aan hoe het gevraagde bestand op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.html">Frames</A> • bevindt het bestand zich in een hogere directory dan de huidige. Bijvoorbeeld: <A HREF="http://www.protocol://host/path Het protocol zal meestal http zijn en alleen ftp. Meestal wordt dan automatisch een bestand met de naam "index.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. Daarbij zijn er de volgende mogelijkheden: • staat het bestand in dezelfde directory als het huidige document. dan is het voldoende alleen de domeinnaam op te nemen.html">Frames</A> • staat het bestand in een subdirectory van de huidige directory staat. dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op: <A HREF=". dan beëindig je de URI met een slash: <A HREF="http://www. 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. is het voldoende om alleen het path op te nemen. Het is niet altijd nodig een complete URI te gebruiken.handleidinghtml. maar naar een directory op de server. Het is meestal een domeinnaam.handleidinghtml. als het gevraagde bestand zich op een speciale FTPserver bevindt.html">Frames</A> . dan hoef je slechts de naam van het bestand op te nemen: <A HREF="frames. Host specificeert het adres van de server./frames.handleidinghtml..nl/html/inhoud-html. waarop zich het gevraagde bestand bevindt.html" geopend (mits dat bestaat natuurlijk).html">Inhoud HTMLgedeelte</A> Wanneer de link verwijst naar een bestand op de lokale server. maar mag ook een IP-adres zijn (zie ook de beschrijving van het HREF attribuut). Wanneer je verwijst naar de beginpagina van een site. <A HREF="http://www.

maar naar een directory./html/frames/frames. Bijvoorbeeld: <A HREF="frames. ziet zo'n hyperlink er als volgt uit: <A HREF="bestand.of png-bestanden). dan beëindig je de URI met een slash: <A HREF="html/">HTML-gedeelte</A> Onderbreek een hyperlink. Wanneer zo'n plug-in ontbreekt zal de browser voorstellen het doc-bestand te openen in Word zelf.html">Frames</A> • verwijs je niet naar een bestand. die niet in dezelfde lijn ligt: <A HREF=". hoef je in principe niet meer te doen dan het maken van een gewone hyperlink.en exe-bestanden) zal de browser normaal gesproken met een voorstel tot opslaan komen. Indien ook Word niet geïnstalleerd is. Als alternatief voor tekst kun je echter ook een afbeelding gebruiken. Bijvoorbeeld: . Zo'n harde return kan door de browser opgevat worden als spatie die ook onderstreept wordt. jpg. In de overige gevallen hangt het er vanaf of de bezoeker een plug-in of programma heeft geïnstalleerd dat iets met het bestand kan. Sommige bestanden zal de browser direct openen.en mov-bestanden). Je kunt echter ook hyperlinks maken naar andere typen bestanden. Downloaden bestand Om een bezoeker in de gelegenheid te stellen een bestand te downloaden.zip">Download bestand</A> Wanneer het te downloaden bestand zich in een andere directory bevindt. Worddocumenten (doc-bestanden) en Powerpoint presentaties (ppt-bestanden). swf. mp3-. zoals zip-bestanden. ook al is de URI nog zo lang.• een combinatie van de laatste twee mogelijkheden gebruik je bijvoorbeeld als je moet verwijzen naar een bestand in een directory. Een Word-document kan bijvoorbeeld met de juiste plug-in direct in de browser geopend worden. niet met harde returns (met Enter naar de volgende regel gaan). Het A element is een inline element en moet dus geplaatst worden binnen een element op blokniveau (bijvoorbeeld P). Bij andere soorten bestanden (zip. Tussen de activering en de beëindiging van het A element in de voorbeelden in dit onderdeel is steeds met tekst een omschrijving geplaatst. multimedia objecten (wav-.. Voor een zip-achiefbestand. Voor Powerpoint presentaties en multimedia objecten geldt een vergelijkbaar verhaal. dat in dezelfde directory op de server staat als het HTML-document.html">Frames </A> wordt door de browser weergegeven als: Frames en niet zoals bedoeld als Frames. exe-bestanden. In de voorbeelden hiervoor is steeds een link gemaakt naar een HTML-document. dan hanteer je de regels die bij de algemene uitleg van hyperlinks zijn toegelicht. Naast HTML-documenten geldt dat bijvoorbeeld voor afbeeldingen. Een voorbeeld daarvan wordt in het onderdeel Afbeeldingen gegeven. afbeeldingen (gif-. rest de browser weinig anders dan te komen met het aanbod het bestand op te slaan.

Als de bezoeker op een hyperlink van een zip-bestand klikt.html Wanneer veel links in een document verwijzen naar dezelfde site of directory.domein.zip">Download bestand</A> Als het bestand zich op een FTP-server bevindt.nl/pub/">Download bestand(en)</A> In de voorgaande voorbeelden gaat het om een link naar een FTP-server. 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. een relatieve URI bevat alleen het path op de server.. dan kan het handig zijn in . dan is het de beste oplossing het bestand te verpakken in een zip-archief. waar vanaf je anoniem kunt downloaden.<A HREF=". Is de URI van het huidige document: http://www. Wanneer een hyperlink met een relatieve URI geopend moet worden. dan heeft de link de volgende opbouw: <A HREF="ftp://gebruiker:wachtwoord@ftp. zal elke browser een venster openen waarin gevraagd wordt of het bestand moet worden opgeslagen of geopend met het bijbehorende programma. Basis-URI De URI van een hyperlink kan absoluut of relatief zijn. of verwacht je dat de bezoeker het zip-bestand niet kan uitpakken. is het verstandig een dergelijke link niet zomaar open en bloot op een voor iedereen toegankelijke website te plaatsen. 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'.nl/pub/bestand. gebruikt de browser de URI van het huidige document als basisadres en bepaalt daarmee de absolute URI van de link. Wanneer het noodzakelijk is een link te maken naar een FTP-server waarvoor een gebruikersnaam en een wachtwoord vereist zijn./frames/frames.html en is deze hyperlink opgenomen: <A HREF=". Als auteur kun je niet beïnvloeden wat de browser met een bepaald type bestand doet.nl/html/hyperlinks/hyperlinks01. voor andere bestandstypen hangt het af van de op het systeem van de bezoeker geïnstalleerde plug-ins of programma's. Wil je er zeker van zijn dat de bezoeker het bestand kan opslaan.handleidinghtml.. HTMLdocumenten en bijvoorbeeld afbeeldingen zal de browser zelf openen.domein.domein./pub/bestand.nl/pub/">Download bestand(en)</A> Als je niet wilt dat de gebruikersnaam en het wachtwoord bij iedereen bekend worden. dan heeft de link bijvoorbeeld de volgende opbouw: <A HREF="ftp://ftp. <A HREF="ftp://ftp.zip">Download bestand</A> Als je de naam van het bestand weglaat. Zoals al eerder is aangegeven zal dat echter niet bij alle bestandstypen het geval zijn. Heb je daar geen mogelijkheid voor. In een absolute URI zijn in ieder geval het te gebruiken protocol en het adres van de server opgenomen.handleidinghtml.nl/html/frames/frames.html">Frames</A> dan weet de browser dat de absolute URI van de link de volgende is: http://www.

handleidinghtml. Als je binnen een document een link naar een gemarkeerde plaats wilt maken. in dezelfde of een andere directory. gebruik je als URI een hekje (#) gevolgd door de naam van de markering (ofwel de waarde van het NAME attribuut van de markering). Een voorbeeld van het BASE element is: <BASE HREF="http://www.html".html Wanneer de basis-URI betrekking heeft op een site op een andere server./inhoud-html-plus. markeert met een A element waaraan het NAME attribuut is toegevoegd. in plaats van de URI van het huidige document. Bestemming binnen document Soms wil je niet zomaar verwijzen naar een ander document. De plaats van bestemming binnen dat document is aangegeven met een markering die de naam "hyperlinks" heeft.nl/css/inhoud-css. De basis-URI moet absoluut zijn en eindigen met een "/".handleidinghtml. Dit soort linken werken overigens niet alleen binnen een document.de head van het document het BASE element op te nemen en met het HREF attribuut een basis-URI definiëren. Dat kan als je eerst de plaats. . 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. dat zich in een hoger gelegen directory bevindt. Verwijzingen naar bestanden op de lokale server mogen in dit geval uiteraard niet meer relatief zijn. maar naar een specifieke plaats in een document. dat bovenstaand BASE element bevat. Deze basis-URI wordt door de browser als basisadres gebruikt voor de relatieve URI's. Volg je deze link.. waarnaar je wilt verwijzen. In het volgende voorbeeld verwijst de link naar het document "inhoud-htmlplus.html">Inhoud CSS</A> dan gaat de browser uit van de volgende absolute URI: http://www.nl/css/"> Staat in het document. dan kom je bij de inhoud van het onderdeel Hyperlinks bovenaan deze pagina. deze hyperlink: <A HREF="inhoud-css. dan kom je bij de inhoud van het onderdeel Hyperlinks in de uitgebreide inhoudsopgave van het HTML-gedeelte van de Handleiding HTML. Volg je deze link. kunnen naar bestanden op deze server relatieve URI's opgenomen worden. 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. Zo'n markering (of anker) ziet er bijvoorbeeld als volgt uit: <A NAME="inhoud"></A> In dit voorbeeld heeft de markering de naam "inhoud".html#hyperlinks">Inhoud Hyperlinks</A> De link wordt door de browser weergegeven als: Inhoud Hyperlinks. <A HREF=". of op een andere server. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document.

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 definiëren. 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 definiëren 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 geïnterpreteerd 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 beïnvloed 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 definiëren. 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

die verschijnt als de muis boven de hyperlink komt. Normaal worden de verschillende links afgewerkt in de volgorde. Zie voor meer informatie over pseudo-classes het onderdeel Selectors. Mozilla. } 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./inhoud-html.naast de voorgaande algemene stijlregels bijvoorbeeld ook de volgende stijlregel op het stijlblok of stijlblad: A. Die toelichting wordt in de nieuwere versies van de bekende browsers (Microsoft Internet Explorer vanaf versie 4. waarin ze in het document staan.w3.html" TABINDEX="4">Document 2</A> . 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. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Een extra toelichting kan handig zijn in een lijst met hyperlinks (bijvoorbeeld in een navigatieframe). <P><A HREF=". waarin de ruimte voor een uitgebreide gewone omschrijving ontbreekt. Toelichting in tooltip Het TITLE attribuut kun je gebruiken.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.. background-color: #336699.extern:hover { color: #FFFFFF. Firefox en Opera vanaf versie 5) weergegeven in de vorm van een zogenaamde tooltip.html" TABINDEX="1">Document 1</A> <A HREF="document2. Met behulp van het TABINDEX attribuut kan deze volgorde beïnvloed worden. wanneer je een extra toelichting voor de hyperlink wilt opnemen. Netscape Navigator vanaf versie 6.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. In het volgende voorbeeld is dat te zien: <P><A HREF="document1.

welke in plaats van de afbeelding wordt weergegeven in tekst-georiënteerde browsers. De attributen WIDTH en HEIGHT gebruik je om de afmetingen van de afbeelding op te geven. Met het BORDER attribuut bepaal je de dikte van de rand om de afbeelding. pas daarna kan de toets van het aangewezen karakter worden ingedrukt.0 en hoger wordt het gewenste document zoals bedoeld direct geopend.html" ACCESSKEY="2">Document 2</A> (2)</P> Bekijk in een nieuw venster of de browser het ACCESSKEY attribuut ondersteunt. welke op de afbeelding volgt. Hoewel alle gangbare browsers het gebruik van stijlen ondersteunen. <P><A HREF="document1.html" TABINDEX="2">Document 4</A></P> Bekijk in een nieuw venster of de browser het TABINDEX attribuut ondersteunt. sneller weergegeven.0 en hoger. 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. doen ze dit niet altijd zonder problemen. Veel en vooral grote afbeeldingen vragen een lange downloadtijd en daardoor geduld van de bezoeker. Alt en het aangegeven karakter. 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. Het ALIGN attribuut kun je gebruiken om de afbeelding verticaal of horizontaal uit te lijnen en met de attributen HSPACE en VSPACE creëer je ruimte rond de afbeelding. Zie hiervoor het onderdeel CSS en browsers. Willen bezoekers van deze mogelijkheid gebruik kunnen maken. Hoewel het gebruik van afbeeldingen een HTML-pagina zeker aantrekkelijker kan maken voor een bezoeker.html" ACCESSKEY="1">Document 1</A> (1)</P> <P><A HREF="document2. Met het ACCESSKEY attribuut leg je vast welke karakter in een sneltoets voor de hyperlink gebruikt moet worden. 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. Met het ALT attribuut geef je een omschrijving op. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst. 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. Als je het ACCESSKEY attribuut opneemt. De vraag is of deze dat altijd kan . In Netscape Navigator 6. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Dat gebeurt met behulp van het IMG element. In Firefox 2. dan moet je er uiteraard voor zorgen dat ze weten dat er een sneltoets is gedefinieerd.0 is de toetscombinatie gewijzigd in Shift. In de voorbeelden hierna wordt deze mogelijkheid toegelicht.<A HREF="document3. Opera hanteert een afwijkende procedure: eerst moet met de toetscombinatie Shift + Esc de werking van het ACCESSKEY attribuut geactiveerd worden. Mozilla. Verder moet je erop letten dat de sneltoets niet al een andere functie in de browser heeft. Met het TITLE attribuut kun je tekst opnemen. is het aan te bevelen er voorzichtig mee om te gaan. Firefox en Opera 7.html" TABINDEX="3">Document 3</A> <A HREF="document4. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. 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 definiëren met behulp van stylesheets. Introductie afbeeldingen Op een HTML-pagina kunnen naast tekst ook afbeeldingen opgenomen worden. kun je een hyperlink ook rechtstreeks activeren via het toetsenbord.

ook wel aanklikbare afbeeldingen genoemd. welke in plaats van de afbeelding wordt weergegeven in tekstgeoriënteerde browsers. In het volgende voorbeeld zijn achtereenvolgens het origineel. Opnemen afbeelding Een afbeelding definieer je met het IMG element. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. door op de opgenomen kleine afbeelding te klikken. eerder weergegeven. Voorzichtigheid is echter op z'n plaats.opbrengen en niet al voortijdig afhaakt. 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 de genoemde attributen gebruikt.gif" ALT="Originele afbeelding" WIDTH="120" HEIGHT="140" BORDER="1"> <IMG SRC="formaat. Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in verschillende gebieden. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Zo nodig kan de bezoeker de mogelijkheid geboden worden een grotere versie te openen. Een bijzonder gebruik van afbeeldingen betreft image maps. een verkleining en een vergroting van een afbeelding te zien. <IMG SRC="formaat. Als je binnen zo'n gebied in de afbeelding klikt. Beperk daarom het aantal afbeeldingen in een document en gebruik bij voorkeur kleine afbeeldingen. welke op de afbeelding volgt. Met het ALT attribuut geef je een omschrijving op. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst. <IMG SRC="usa1. waarbij aan elk gebied een hyperlink kan worden gekoppeld. spring je naar de in de hyperlink gedefinieerde bestemming.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. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen.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"> .

dan plaatsen sommige browsers er automatisch een rand om.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.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="border: solid 2px red. Bij Microsoft Internet Explorer 1. . <IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" BORDER="3" ALT="Foto Monument Valley"> Wanneer je een afbeelding in een hyperlink opneemt. Wanneer je dit niet wilt."></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. dan neem je het BORDER attribuut op met de waarde "0". In het volgende voorbeeld is met een inline stijl vastgelegd dat er een rode rand van 2 pixels om de afbeelding moet staan. vorm en kleur. 2 en 3 werkt dit overigens alleen als de afbeelding in een hyperlink is opgenomen. <P><IMG SRC="gezicht. Dat kan met behulp van de eigenschappen voor randen.gif"><IMG SRC="usa2.Rand om afbeelding Het BORDER attribuut gebruik je om de dikte van de rand om de afbeelding op te geven. <A HREF="usa3.

Om de rand weg te laten bij afbeeldingen die in een hyperlink zijn opgenomen. Met het ALIGN attribuut en de waarden "top". De hoogte van deze regel wordt bepaald door het hoogste onderdeel.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" ALIGN="top"> ALIGN="top" ALIGN="middle" ALIGN="bottom" . "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. Een afbeelding en de omringende tekst kunnen daardoor samen op één regel voorkomen. Standaard wordt de onderkant van de afbeelding op één lijn geplaatst met de onderkant van de tekst.Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. gebruik je de waarde none voor de border-style eigenschap <A HREF="usa3.gif"><IMG SRC="usa2."></A> Verticaal uitlijnen afbeelding Het IMG element is een zogenaamd inline element. Vaak zal dat de afbeelding zijn.gif" ALT="Foto Monument Valley" WIDTH="150" HEIGHT="102" STYLE="border-style: none.

"> top</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. dan is het verstandig het BR element met het attribuut CLEAR te gebruiken. De volgende regels lopen ook onder de afbeelding door..gif" ALT="Ogen" WIDTH="105" HEIGHT="45" ALIGN="left"> Voor deze afbeelding is het ALIGN attribuut met de waarde "left" gebruikt. De uitlijning van de afbeelding in verticale richting kun je ook vastleggen door met behulp van de vertical-align eigenschap een stijl te definiëren. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Naast de afbeelding worden zoveel regels tekst geplaatst als de hoogte van de afbeelding toelaat. Is de hoeveelheid tekst kleiner dan naast de afbeelding past. 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. dan moet je met de waarden voor de horizontale uitlijning een zwevende afbeelding maken..Met het ALIGN attribuut bepaal je alleen de uitlijning van de afbeelding ten opzichte van de tekst die op dezelfde regel staat. Wanneer je meer regels tekst naast de afbeelding wilt plaatsen. of afbeelding onbedoeld naast in plaats van onder de afbeelding terecht komt. <IMG SRC="ogen. Daarmee voorkom je dat een volgende alinea. dan wordt de resterende tekst zoals gebruikelijk op de volgende regel(s) onder de afbeelding geplaatst. 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. <IMG SRC="ogen.<BR CLEAR="all"> . <P><IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="vertical-align: top. Resterende tekst wordt zoals gebruikelijk op de volgende regel(s) geplaatst.gif" ALT="Ogen" WIDTH="105" HEIGHT="45" ALIGN="right"> . Als na de afbeelding onvoldoende ruimte is op de regel om alle tekst te plaatsen.

<P><IMG SRC="gezicht. Daarvoor kan echter het DIV element gebruikt worden met het ALIGN. <DIV ALIGN="center"><IMG SRC="gezicht. <P><IMG SRC="gezicht. kun je voor het P element een stijl definiëren met behulp van de clear eigenschap.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="float: left.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Via het ALIGN attribuut van het IMG element is het niet mogelijk een afbeelding in het midden van de pagina plaatsen.">Dit is een volgende paragraaf.</P> <P STYLE="clear: left. . Van een zwevende afbeelding met meerdere regels tekst ernaast is echter geen sprake meer."> Met een inline stijl is vastgelegd dat de afbeelding links moet worden uitgelijnd.Voor deze afbeelding is het ALIGN attribuut met de waarde "right" gebruikt.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" STYLE="float: left."> Met een inline stijl is vastgelegd dat de afbeelding links moet worden uitgelijnd. Net als bij de uitlijning via het ALIGN attribuut worden meerdere regels tekst naast de afbeelding geplaatst.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 definiëren.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Als er naast de afbeelding voldoende ruimte is.</P> <P>Dit is een volgende paragraaf. Om te voorkomen dat een volgende paragraaf naast de afbeelding wordt geplaatst. geldt dat ook voor een volgende paragraaf. Met de float eigenschap kun je de tekst links of rechts uitlijnen. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wil je de afbeelding centreren. <P STYLE="text-align: center. 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.Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. een stijl definiëren met behulp van de text-align eigenschap. Het VSPACE attribuut doet hetzelfde boven en onder de afbeelding."><IMG SRC="gezicht. dan kun je voor het element op blokniveau waarin de afbeelding is opgenomen.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. <IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" HSPACE="10"> HSPACE="10" . Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

maar wat afstand moet krijgen tot een andere afbeelding rechts ervan.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"> &nbsp. door het opnemen van een stijl voor het IMG element in een stijlblok in de head van het document. In het volgende voorbeeld wordt in één keer de weergave van alle afbeeldingen in een document bepaald.> Wanneer je afstand wilt creëren tussen een afbeelding en tekst rechts ervan.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"> Bijschrift . Het stijlblok staat in de head van het document. <IMG SRC="gezicht. dan kun je de oplossing met "&nbsp. In het volgende voorbeeld is daardoor het resultaat een vrije ruimte van 4 spaties. Dit teken wordt door de browser geïnterpreteerd als karakter en dus niet samengevoegd met de gewone spaties.&nbsp." (non-breaking space)." alleen gebruiken als alle tekst op dezelfde regel past. <STYLE TYPE="text/css"> <!-IMG { margin-right: 15px. <IMG . omdat je de afstand per kant van de afbeelding kunt aangeven.HSPACE="30" Het HSPACE attribuut zorgt ervoor dat zowel links als rechts van de afbeelding ruimte ontstaat. Bijvoorbeeld als de afbeelding langs de linker kantlijn moet blijven staan. Deze mogelijkheid geeft je veel meer flexibiliteit. Je plaatst dan de afbeelding in de ene cel en de tekst in de cel ernaast. In dat geval kun je beter gebruik maken van het speciale teken "&nbsp. } --> </STYLE> In de body van het document is het IMG element opgenomen zonder verdere verwijzing naar de stijlen. Is dat niet het geval. <IMG SRC="gezicht. 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 definiëren. Soms wil je echter alleen maar ruimte aan één kant hebben.. Met de margin-right eigenschap wordt vastgelegd dat rechts van elke afbeelding 15 pixels ruimte wordt vrijgehouden. dan kun je als alternatief gebruik maken van een tabel..

<IMG SRC="usa1. dan neem je zowel het ALT als het TITLE attribuut op met dezelfde waarde. Netscape Navigator vanaf versie 6. Links is een schermafdruk van de bedoelde weergave. Mozilla. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. In deze browsers kun je evenwel vaak hetzelfde effect bereiken door het toevoegen van het TITLE attribuut aan het IMG element. een klein venster dat boven het gewone browservenster wordt weergegeven. Speciale functie afbeelding .Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Omschrijving in tooltip Soms wil je extra informatie een afbeelding geven. die niet zomaar in de gewone tekst past. Het is verder verstandig een waarde te kiezen. Het TITLE attribuut is speciaal bedoeld voor de weergave van extra informatie en wordt ondersteund door Microsoft Internet Explorer vanaf versie 4.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. 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. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Omdat het ALT attribuut daar eigenlijk niet bedoeld is.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. Om te zien welk attribuut in de gebruikte browser de weergave van de tooltip bepaalt. Wil je in een zo groot mogelijk aantal browsers de tooltip zien. geven andere browsers de waarde ervan niet in een tooltip weer. Firefox en Opera vanaf versie 5. hebben de attributen ALT en TITLE in het volgende voorbeeld een verschillende waarde gekregen. Sommige browsers (Microsoft Internet Explorer 3. Je kunt dan gebruik maken van een tooltip.

spring je naar de bijbehorende bestemming.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. om te voorkomen dat de bezoeker van de pagina niet in de gaten heeft dat het hier een hyperlink betreft.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. Je ziet dat als een underscore direct na de afbeelding. bijvoorbeeld een inhoudsopgave.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="frames.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.handleidinghtml.Een afbeelding kun je bijvoorbeeld gebruiken in plaats van een standaard horizontale lijn: <IMG SRC="rainline.nl"><IMG SRC="handleiding-html.gif" ALT="Lijn in regenboogkleuren" WIDTH="580" HEIGHT="5"> Een afbeelding kun je ook gebruiken om een alternatieve lijst te maken.handleidinghtml. <A HREF="http://www. Door op de afbeelding te klikken.nl"><IMG SRC="handleiding-html. . Het is echter verstandig hiermee voorzichtig om te gaan.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="lijsten.html">Tabellen</A></BR> <IMG SRC="redball. <A HREF="http://www. Sommige browsers vatten een harde return op als een spatie en onderstrepen die net als een gewone hyperlink. 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. In het volgende voorbeeld wordt een afbeelding geplaatst in een hyperlink.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="tabellen. Zie een voorbeeld in het onderdeel lijsten.html">Lijsten</A></BR> <IMG SRC="redball. <IMG SRC="redball.

Klik op de afbeelding om een grotere foto te zien. Klik op de afbeelding om een grotere foto te zien. Door het ALT attribuut te gebruiken en daarin een omschrijving van de bestemming op te nemen. Met SHAPE attribuut van het AREA element kunnen drie vormen van gebieden worden vastgelegd: een rechthoek. COORDS en HREF respectievelijk de vorm. Om van dit soort image maps gebruik te kunnen maken. ofwel de browser. In veel gevallen zal een provider die mogelijkheid niet bieden aan individuele gebruikers. moet je aan het IMG element naast het SRC attribuut ook het USEMAP attribuut toevoegen. De wijze waarop je met het COORDS attribuut de coördinaten van een gebied vastlegt. Image maps Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in gebieden waaraan een hyperlink is gekoppeld. waarvan de werking gecontroleerd wordt door de server. <A HREF="usa3. spring je naar de in de hyperlink gedefinieerde bestemming.Het plaatsen van de afbeelding in een hyperlink kan ook gebruikt worden om de bezoeker de mogelijkheid te bieden een grotere afbeelding te bekijken. Client-side image maps.gif"><IMG SRC="usa2. de coördinaten en de bestemming vast. een veelhoek en een cirkel. Van de image maps zijn er twee typen: • Server-side image maps. • In deze handleiding worden alleen de client-side image maps behandeld. Wanneer je het NOHREF in plaats van het HREF opneemt. waarin de browser de informatie over de image map kan vinden. Alle benodigde informatie in de door de auteur gemaakt documenten wordt direct door de browser geïnterpreteerd. Het begin en einde van de "map" zelf wordt gedefinieerd met het MAP element. Het MAP element bevat in ieder geval het NAME attribuut. 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. Het USEMAP attribuut specificeert de verwijzing naar een "map". maak je het mogelijk dat ook gebruikers van een tekstgeoriënteerde browser de hyperlink kunnen activeren. dan geef je aan dat klikken in het betreffende gebied niet tot een actie moet leiden. waarvan de werking gecontroleerd wordt door de client. 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. hangt af van de vorm: . moet je op de server een cgi-script kunnen activeren.gif" ALT="Monument Valley" WIDTH="150" HEIGHT="102" BORDER="0" ALIGN="bottom"></A> &nbsp. De waarde van het NAME attribuut moet overeenkomen met de waarde van het USEMAP attribuut van het IMG element. Als je binnen zo'n gebied in de afbeelding klikt. Client-side image maps Om aan te geven dat het bij een afbeelding gaat om een image map.

Klikken op de afbeelding leidt in dat geval uiteraard niet tot het openen van een hyperlink. Wanneer een browser image maps niet ondersteunt. de positie van de linkerbovenhoek in verticale richting. veelhoek (poly): de waarde van het COORDS attribuut bevat voor een aantal hoekpunten een coördinatenpaar. In principe kun je van elke veelhoek van een onbeperkt aantal hoekpunten de coördinaten opnemen. 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). Een veelhoek met 5 à 6 hoekpunten is over het algemeen voldoende. Meestal is het echter niet noodzakelijk om de vorm van een gebied heel gedetailleerd vast te leggen.   rechthoek (rect): de waarde van het COORDS attribuut bevat vier getallen. <IMG SRC="knoppenbalk. kun je links in de titelbalk van het venster de x. Wanneer je in dit programma op een punt in de afbeelding klikt. . In alle gevallen wordt in horizontale richting (x) gemeten vanaf de linkerkant en in verticale richting (y) vanuit de bovenkant van de afbeelding. Een aanrader is het gratis programma IrfanView. De waarde van het NAME attribuut correspondeert met de waarde van het USEMAP attribuut van het IMG element: "knoppenbalk".gif" ALT="Knoppenbalk" WIDTH="390" HEIGHT="24" BORDER="0" USEMAP="#knoppenbalk"> Het MAP element bevat in ieder geval het NAME attribuut. wordt de afbeelding normaal weergegeven. is het voldoende een interne verwijzing op te nemen: "#knoppenbalk". De afstand is in pixels en om het juiste gebied aan te geven. de positie van de rechter benedenhoek in horizontale richting en tenslotte de positie van de rechter benedenhoek in verticale richting vastleggen. waarbij voor elk hoekpunt eerst de positie in horizontale en vervolgens de positie in verticale richting wordt opgenomen. die van het gebied achtereenvolgens de positie van de linker bovenhoek in horizontale richting. Bij het bepalen van de coördinaten is het handig gebruik te maken van een image-viewer/editor. cirkel (circle): het COORDS attribuut bevat 3 getallen.en y-positie van het punt aflezen. dan zullen je in de praktijk vaak uitkomen op het gebruik van veelhoeken. die achtereenvolgens de positie van het middelpunt van de cirkel in horizontale en in verticale richting en de lengte van de straal vastlegt. Wanneer je van een afbeelding aanklikbare gebieden wilt definiëren (bijvoorbeeld afzonderlijke personen op een foto). 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.

html" ALT="Mogelijkheid 2"> <AREA SHAPE="rect" COORDS="156. of het voor de bezoeker van je site voldoende duidelijk is waar hij of zij moet klikken om naar een bepaalde bestemming te gaan.233.129.33" HREF="map2b. heeft in dit voorbeeld in alle gevallen de waarde "rect" (rechthoek).gif" ALT="Vormen" WIDTH="300" HEIGHT="150" BORDER="1" USEMAP="#vormen1"> <MAP NAME="vormen1"> <AREA SHAPE="rect" COORDS="15.143" HREF="map2c.197.0.24" HREF="map1c.390. Klik je op een knop.24" HREF="map1a.0. . Daarmee wordt vastgelegd dat geen hyperlink is opgenomen voor de gebieden. Klik je op een figuur.77.120.html" ALT="Cirkel"> <AREA SHAPE="poly" COORDS="102. dan zie je in de statusbalk van de browser de verschillende URL's opkomen en verdwijnen. <IMG SRC="vormen.In het MAP element zijn een vijftal AREA elementen opgenomen. In het volgende voorbeeld zijn verschillende waarden gebruikt voor het SHAPE attribuut van het AREA element.24" HREF="map1b. Het SHAPE attribuut.134.300.311. die niet apart gedefinieerd zijn in deze image map. dan zie je in de statusbalk van de browser de URL wijzigen.208.24" HREF="map1d. In de afbeelding is de vorm van de gebieden heel direct te zien. dan wordt de bijbehorende URL geactiveerd.html" ALT="Rechthoek"> <AREA SHAPE="circle" COORDS="254.24" HREF="map1e. In het laatste AREA element is voor de gehele afbeelding het NOHREF attribuut opgegeven. <MAP NAME="knoppenbalk"> <AREA SHAPE="rect" COORDS="0. waarmee de vorm van het aanklikbare gebied wordt gespecificeerd. Het ALT attribuut is opgenomen met een omschrijving van de bestemming ten behoeve van het gebruik in tekst-georiënteerde browsers.15.html" ALT="Mogelijkheid 4"> <AREA SHAPE="rect" COORDS="312.0. in de praktijk zal dat vaak niet het geval zijn.155.93" HREF="map2a.0.html" ALT="Veelhoek"> <AREA SHAPE="rect" COORDS="0.61. dan wordt de URL geactiveerd.0.95.html" ALT="Mogelijkheid 5"> </MAP> Als je met de muis van links naar rechts over de knoppenbalk heen gaat.75.0. Wel is het handig er op te letten. De coördinaten van elk aanklikbaar gebied zijn vastgelegd met het COORDS attribuut.150" NOHREF ALT="Geen vorm"> </MAP> Als je met de muis over en tussen de figuren beweegt.html" ALT="Mogelijkheid 3"> <AREA SHAPE="rect" COORDS="234.164.html" ALT="Mogelijkheid 1"> <AREA SHAPE="rect" COORDS="78.84. Het ligt voor de hand in de praktijk een wat duidelijkere omschrijving te kiezen dan in dit voorbeeld is gedaan.

html" ALT="Geen vorm"> </MAP> In Mozilla. Firefox en Opera 6. <MAP NAME="vormen2"> <AREA SHAPE="rect" COORDS="15.61.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.html" ALT="Cirkel"> <AREA SHAPE="poly" COORDS="102. als de muisaanwijzer boven een aanklikbaar gebied van een image map komt. Het TITLE attribuut is in tegenstelling tot het ALT attribuut speciaal bedoeld voor het geven van extra informatie.150" HREF="map3d. de cirkel. Het probleem is dat deze browser bij het gecombineerde gebruik van de attributen ALT en TITLE (en dat is nodig. Netscape Navigator 6.208. of de veelhoek behoort.0 en hoger.164. alleen niet op de juiste wijze. 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.33" HREF="map3b.0. In Microsoft Internet Explorer werkt deze mogelijkheid echter niet. Mozilla.In dezelfde image map wordt nu in het laatste AREA element voor de gehele image map een URL gedefinieerd.150" wordt opgenomen SHAPE="default". . Enkele voorbeelden van client-side image maps waarbij gebruik gemaakt wordt van het OBJECT element. worden gegeven in het onderdeel Objecten.143" HREF="map3c.84. Bij andere browsers (Microsoft Internet Explorer 4.0. maar de waarde van het ALT attribuut. Tooltips voor image maps Je kunt ervoor kiezen dat een tooltip (een klein venster met extra informatie) wordt weergegeven.html" ALT="Veelhoek"> <AREA SHAPE="rect" COORDS="0.15. omdat ALT een vereist attribuut is) niet de waarde van het TITLE attribuut als tooltip weergeeft. als je de tooltip wilt zien. Het wordt ook ondersteund door Microsoft Internet Explorer 5.95.0.html" ALT="Rechthoek"> <AREA SHAPE="circle" COORDS="254. Netscape Navigator en Opera wordt hetzelfde effect bereikt als in het laatste AREA element in plaats van SHAPE="rect" COORDS="0.134.129.197.0 en hoger) moet je het daarvoor bedoelde TITLE attribuut opnemen. Sommige browsers (Microsoft Internet Explorer 5. In de praktijk is het daarom verstandig voor beide attributen eenzelfde waarde te kiezen.93" HREF="map3a.120.300.300.75.0 en hoger. die geactiveerd wordt als je klikt op elk deel van de afbeelding dat niet tot de rechthoek.

75. de menulijst en de directorylijst. In een ongeordende lijst zijn de items niet genummerd.208.gif" ALT="Vormen" WIDTH="300" HEIGHT="150" BORDER="1" USEMAP="#vormen"> <MAP NAME="vormen"> <AREA SHAPE="rect" COORDS="15.129.93" HREF="map4a.61. dat wil zeggen dat binnen een lijst een nieuwe lijst opgenomen mag worden. De meest gebruikte zijn de ongeordende en de geordende lijst. <IMG SRC="vormen.html" ALT="Veelhoek .197.33" HREF="map4b. Met het TYPE attribuut kan de weergave van de markering vastgelegd worden.ALT" TITLE="Veelhoek . daarnaast zijn er nog de definitielijst. Je kunt daardoor zien welk attribuut in de gebruikte browser de weergave van de tooltip bepaalt. . In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. circle en square).120. maar hebben ze een symbool als markering.TITLE"> <AREA SHAPE="poly" COORDS="102.84. De ongeordende lijst wordt gedefinieerd met het element UL (unordered list) en de geordende lijst met het element OL (ordered list).15.TITLE"> <AREA SHAPE="circle" COORDS="254.html" ALT="Rechthoek ALT" TITLE="Rechthoek . Introductie lijsten In HTML-documenten kun je verschillende soorten lijsten toepassen. Voor beide lijsten geldt dat een item wordt bepaald met het LI element.164.143" HREF="map4c. Ongeordende en geordende lijsten mogen (ook onderling) genest worden. Bij de ongeordende lijst kan gekozen worden uit een drietal symbolen (disc. Boven is een schermafdruk van de bedoelde weergave.In het volgende voorbeeld hebben de attributen ALT en TITLE verschillende waarden en is bovendien de naam van het attribuut erin opgenomen.html" ALT="Cirkel ALT" TITLE="Cirkel . Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. bij de geordende lijst uit diverse soorten getallen en letters.134.95.TITLE"> </MAP> Onder is de weergave door de browser en daarin kun je controleren of deze het TITLE correct ondersteunt.

hebben de elementen MENU en DIR hun betekenis verloren. 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. Het DL element bepaalt het begin en einde van een definitielijst en de elementen DT en DD definiëren respectievelijk de term en de beschrijving. Omdat alle belangrijke browsers zowel de menulijst als de directorylijst weergeven als de gewone ongeordende lijst. 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. <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 . maar hebben ze een symbool als markering. <UL> <LI>Dit is het eerste item van de ongeordende lijst (indien . De ongeordende lijst wordt gemaakt met de elementen UL en LI.. 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. In het volgende voorbeeld is de waarde "square" gebruikt en zou een vierkant blokje weergegeven moeten worden. De menulijst (gedefinieerd met het MENU element) was oorspronkelijk bedoeld als een ongeordende lijst. kan bepaald worden welk symbool gebruikt wordt als markering voor alle items van de lijst.. 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.Een definitielijst is een lijst. waarvan de items niet meer dan één regel zouden beslaan. welke bestaat uit termen en bijbehorende beschrijvingen.

. zijn</LI> <LI TYPE="circle">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. <OL> <LI>Dit is het eerste item van de geordende lijst (indien . De geordende lijst wordt gemaakt met de elementen OL en LI. <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. 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.. <UL> <LI TYPE="square">De markering . Dit is het derde item van de geordende lijst . Dit is het eerste item van de geordende lijst (indien de tekst langer is dan op één regel past.. Dit is het tweede item van de geordende lijst 3.Het TYPE attribuut kan ook aan het LI element toegevoegd worden. Het symbool voor de markering kan daardoor voor elk item afzonderlijk bepaald worden... zijn</LI> <LI TYPE="disc">De markering .. springt deze op de volgende regels in) 2..

A. <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. ongeacht welke nummering je gebruikt. Dit is het tweede subitem 3. hoofdletters (A). Dit is het derde item van de lijst Met het START attribuut kun je bepalen dat de nummering niet met de eerste waarde (1. Dit is het eerste subitem b. kleine romeinse getallen (i) en grote romeinse getallen (I). Het kan daarbij handig zijn de nummering voor de geneste lijst afwijkend te maken. <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. IV.Door het TYPE attribuut toe te voegen aan het OL element kun je bepalen welke nummering gebruikt moet worden. <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. Dit is het eerste item van de lijst b. Mogelijke waarden voor het TYPE attribuut zijn getallen (1). Dit is het eerste item van de lijst 2. a. V. De waarde van het START attribuut is altijd een getal. maar met een andere waarde. i of I) moet beginnen. In het volgende voorbeeld worden kleine letters gebruikt. 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. kleine letters (a). Dat kan nuttig zijn indien je een lijst wilt onderbreken met een paragraaf tekst en daarna de nummering weer wilt doorzetten. Dit is het laatste item van de lijst Geordende en ongeordende lijsten mogen ook door elkaar gebruikt worden. Dit is het tweede item van de lijst a. . Dit is het tweede item van de lijst c.

<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 . Dit is het laatste item van de lijst Definitielijst Een definitielijst is een lijst. Dit is het eerste item van de lijst 2.<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. kan het COMPACT attribuut ervoor zorgen dat term en definitie op dezelfde regel komen te staan. Dit is het tweede item van de lijst • Dit is het eerste subitem • Dit is het tweede subitem 3. Het DL element bepaalt het begin en einde van een definitielijst en de elementen DT en DD definiëren 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. welke bestaat uit termen en bijbehorende beschrijvingen.

font-style. De beginwaarde outside wordt daardoor aangehouden en de markering wordt zoals gebruikelijk buiten de inhoud van een onderdeel van de lijst geplaatst. font-size: 15px. die specifiek betrekking hebben op de wijze waarop lijsten worden weergegeven. gedefinieerd</LI> <LI>>Dit is het tweede onderdeel van de lijst</LI> </UL> <UL STYLE="list-style-position: inside. Voor de tweede lijst geldt de waarde inside.. om de grootte en de stijl van het lettertype en de voor.. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd voor het UL element. De markering wordt daardoor in het onderdeel van de lijst geschoven. <UL STYLE="list-style-type: square. background-color: #FFFFCC. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.. 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. de grootte..en achtergrondkleur vast te leggen. . Daarnaast zijn er een aantal mogelijkheden. font-style: italic. de stijl en de kleur van de tekst en de achtergrond. color: #336699.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. Met de list-style-type eigenschap is aangegeven welke markering er gebruikt moet worden voor de onderdelen van de lijst. color en background-color zijn gebruikt.>> <LI>Dit is het eerste . 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. kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld is voor de eerste lijst geen stijl gedefinieerd."> <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. Bij deze stijlen kan het bijvoorbeeld gaan om het lettertype. De eigenschappen font-size. <UL> <LI>Dit is het eerste .

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

moet je bovendien de padding-left opnemen met de waarde "0em"."> <LI>margin-top</LI> <LI>margin-bottom. margin-bottom: 0px.In de head van het document is een stijlblok opgenomen. . Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. <P STYLE="margin-bottom: 0px.</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave...</LI> </UL> <P STYLE="margin-top: 0px. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Firefox en Opera 7.0 en hoger een redelijk vergelijkbaar resultaat. Je krijgt dan in Microsoft Internet Explorer 4. als voor de P elementen ervoor en erna. margin-left: 1.0 en hoger. De mate van inspringen van de lijst kun je beïnvloeden. gebruikt:</P> <UL STYLE="margin-top: 0px. waarin met behulp van een descendent element-selector een stijl is gedefinieerd voor een UL element dat is opgenomen in een UL element. door voor het UL element de margin-left eigenschap op te nemen. Mozilla.">De lijst . In het volgende voorbeeld zijn de eigenschappen margin-top en margin-bottom zowel gebruikt voor het UL element.2em. moet je gebruik maken van de verschillende eigenschappen voor de margin. Om de lijst direct binnen de tekst te plaatsen. Ze zorgen ervoor dat de blanco regel verdwijnt.. <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.0 en hoger.">In dit .. de tekst. Netscape Navigator 6. Standaard wordt er zowel boven als onder de lijst een blanco regel geplaatst en springt de lijst in. Omdat de verschillende browser(versie)s het inspringen niet op dezelfde manier hebben geïmplementeerd.

<P STYLE="margin-bottom: 0px. Met het TABLE element wordt het begin en einde van een tabel aangegeven. CAPTION. Om die reden wordt ook in deze handleiding intensief van tabellen gebruik gemaakt..">De lijst . TR. hoe breed ze moeten zijn.. TH en TD. Hoewel in de toekomst deze functie overgenomen moet gaan worden door stylesheets.">In dit . de tekst. geef je de margin-left eigenschap de waarde "1.. Het ALIGN attribuut bepaalt hoe de tabel uitgelijnd moet worden.Als je in het voorgaande voorbeeld de lijst in lijn met de linkerrand van de tekst wilt plaatsen. Met het CELLPADDING leg je de afstand tussen de inhoud van een cel en de rand vast.</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. Tabellen worden gemaakt met behulp van de elementen TABLE. . margin-left: 1.2em"."> <LI>margin-top</LI> <LI>margin-bottom</LI> <LI>margin-left</LI> <LI>padding-left. Dit heeft zeker te maken met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan een document..</LI> </UL> <P STYLE="margin-top: 0px. list-style-image. margin-bottom: 0px. Het TD element wordt gebruikt voor cellen die de feitelijke tabelgegevens (data) bevatten. gaat het om header informatie: de titel van een rij of een kolom. list-style-position en list-style. gebruikt:</P> <UL STYLE="margin-top: 0px. Het CAPTION element plaatst een bijschrift bij de tabel. 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. Bij cellen waarvoor het TH element wordt gebruikt. Een rij wordt gedefinieerd met het TR element en elke cel in een rij met het TH of het TD element. Met de attributen BORDER en CELLSPACING van het TABLE element kun je bepalen of wel of geen tabelranden worden weergegeven en indien wel. Een tabel bevat één of meer rijen en elke rij bevat één of meer cellen. 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. padding-left: 0em. Meer voorbeelden van het gebruik van stijlen voor lijsten worden gegeven bij de toelichting op de eigenschappen list-style-type. Introductie tabellen Van tabellen wordt in HTML-pagina's op grote schaal gebruik gemaakt. Onder elkaar gelegen cellen vormen een kolom.2em. Het aantal cellen in een rij bepaalt het aantal kolommen.

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

SCOPE. <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 . Een uitgebreide toelichting daarop wordt gegeven in het onderdeel CSS en tabellen.TABLE element en de (nog niet in deze handleiding beschreven) attributen HEADERS. 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 definiëren met het TH element wordt de tabel voorzien van kolomtitels. Eenvoudige tabellen In het volgende voorbeeld wordt een eenvoudige tabel met twee rijen en twee kolommen gemaakt. De randen van de tabel zijn zichtbaar. Het TR element definieert een rij en het TD element definieert de cellen in de rij. Voor veel onderdelen van tabellen kan de weergave bepaald worden met behulp van stylesheets. ABBR en AXIS voor de elementen TH en TD. <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.

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. <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. <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 .De hoogte en breedte van een cel worden bepaald met de attributen WIDTH en het HEIGHT van het TD (of TH) element. 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.

. De beginwaarde van het VALIGN is "middle" en zonder het attribuut wordt de inhoud van de cel in verticale richting gecentreerd. <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. dan wordt de inhoud van de cel links uitgelijnd. De beginwaarde van het ALIGN attribuut is "left" en als je het attribuut niet opneemt.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 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 eerste waarde is die voor het ALIGN attribuut. <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 .In de volgende HTML-code kun je zien welke waarden je moet gebruiken om de celinhoud op de gewenste manier uit te lijnen. 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> <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. Een streepje betekent dat het niet nodig is het attribuut op te nemen. de tweede voor het VALIGN attribuut.

dan is het goed eens te kijken naar de voorrangsregels voor het uitlijnen van celinhoud. behalve langs de bovenrand waar de tussenruimte 4 pixels is. De opgegeven afstand geldt als minimum. Omdat de met het WIDTH attribuut vastgelegde breedte betrekking heeft op de inhoud van de cel. <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> . In het volgende voorbeeld is het CELLPADDING attribuut is opgenomen met de waarde "10". zal de afstand tot de rand langs sommige zijden groter zijn. hangt af van de (al dan niet opgegeven) uitlijning van de celinhoud. Als de cel breder en hoger is dan nodig is voor de inhoud en de opgegeven tussenruimte. <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 inhoud van de cellen staat in vergelijking tot de tabel uit het vorige voorbeeld verder van de rand. Waar dat het geval is. Zie hiervoor het onderdeel CSS en tabellen . is de tabel in het laatste geval aanzienlijk breder. 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.Uitlijnen celinhoud. Het uitlijnen van de celinhoud kun je ook regelen met behulp van stylesheets.Wanneer je de attributen ALIGN en VALIGN attributen voor meerdere elementen gebruikt.

De inhoud van het document die op de tabel volgt. Uitlijnen tabel Standaard wordt een tabel die niet de gehele breedte van het venster of frame beslaat. Met behulp van stylesheets heb je de mogelijkheid de afstand tot elke rand afzonderlijk te bepalen. 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. <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. dan gebruik je het ALIGN attribuut met de waarde "center". ze hebben ook als resultaat dat de tabel "zwevend" wordt.Uitlijnen celinhoud. maar ernaast. Als je de tabel wilt centreren.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. <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> . Zie hiervoor het onderdeel CSS en tabellen . In het volgende voorbeeld is dat te zien voor de waarde "left". wordt daardoor niet zoals gebruikelijk onder de tabel geplaatst.

<BR CLEAR="all"></P> Als je de waarde "right" voor het ALIGN attribuut gebruikt.</TABLE> <P>Met de waarde . geplaatst. b2 De waarde "right" heeft een vergelijkbaar effect.. Het is verstandig direct na de tekst het BR element met het CLEAR attribuut op te nemen. dan loopt de tekst onder de tabel door. Daarmee voorkom je dat een volgende alinea onbedoeld ook weer naast in plaats van onder de a1 a2 b1 tabel komt te staan. 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. <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 . komt te staan.. De tekst wordt naast de tabel geplaatst en wanneer de hoeveelheid tekst groter is dan naast de tabel past.<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. dan kun je de hele tabel ook in een DIV element plaatsen en hiervoor het ALIGN attribuut gebruiken met de waarde "right"... <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 .

<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 . Het attribuut heeft vier waarden: "top". De beginwaarde is "top" en als je het ALIGN attribuut niet opneemt.b1 b2 Het ALIGN attribuut van het TABLE element heeft in HTML 4. Zie hiervoor het onderdeel CSS en tabellen . Als alternatief kun je het uitlijnen van de tabel ook regelen met behulp van stylesheets. <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.Uitlijnen tabel. Met het ALIGN attribuut kun je bepalen waar het bijschrift moet staan.0 het label afgekeurd gekregen en hetzelfde geldt voor het ALIGN attribuut van het DIV element. Bijschrift bij tabel Het CAPTION element kun je gebruiken als je een tabel wilt voorzien van een bijschrift. wordt het bijschrift midden boven de tabel geplaatst. "bottom". "left" en "right".

1 en hoger) plaatsen het bijschrift links of rechts naast de tabel.Bijschrift bij tabel. Sommige browsers (Internet Explorer en Opera 7. hangt ervan af of het BORDER attribuut is opgenomen voor het TABLE element en zo ja. Het ALIGN attribuut van het CAPTION element heeft in HTML 4. Als alternatief kun je het uitlijnen van de tabel ook regelen met behulp van stylesheets. dan geeft de browser helemaal geen randen weer.0 het label afgekeurd gekregen.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.3 en hoger en Netscape Navigator 7. Andere browsers (Mozilla 1. Niet voor de tabel zelf (de buitenranden van de tabel) en ook niet voor de cellen. Door het opnemen BORDER attribuut voor het TABLE element met een andere waarde dan "0". Zie hiervoor het onderdeel CSS en tabellen . De breedte van de randen van de cel kun je met HTML niet beïnvloeden. Is het attribuut niet opgenomen.1 en hoger) plaatsen het bijschrift bij deze waarden links of rechts boven de tabel. of heeft het de waarde "0". <TABLE BORDER="10"> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> . <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. Tabelranden De wijze waarop tabelranden worden weergegeven. Of er randen worden weergegeven worden. kun je met twee attributen van het TABLE element beïnvloeden: BORDER en CELLSPACING. kun je de breedte van de buitenranden van de tabel vastleggen. welke waarde het heeft. waarin de tabel gebruikt wordt als hulpmiddel bij de lay-out van een document.

dan houden de meeste browsers een tussenruimte van 2 pixels aan. <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 . <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.<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. is de tabel breder dan in het vorige voorbeeld. Als je het attribuut niet hebt opgenomen. Omdat de cellen even breed blijven.

Ze worden niet ondersteund door andere browsers en maken bovendien geen deel uit van HTML 4. dan kun je een achtergrondkleur voor de cellen in de betreffende rij vastleggen. Achtergrond tabel Het BGCOLOR attribuut van de elementen TABLE. <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: . Het gaat om de attributen BORDERCOLOR. TR.0.Door Microsoft Internet Explorer wordt voor de elementen TABLE. De ruimte tussen de randen blijft daarbij transparant en in dit geval is daar de achtergrondkleur van het document te zien. Een uitgebreide toelichting en allerlei extra mogelijkheden zijn te vinden in het onderdeel CSS en tabellen Tabelranden. 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. TD en TH kun je gebruiken om een achtergrondkleur vast te leggen voor de gehele tabel. waarmee je de kleur van de randen kunt vastleggen. In het volgende voorbeeld is met het BGCOLOR attribuut een achtergrondkleur voor het TABLE element bepaald. TD en TH een aantal attributen ondersteund. TR. BORDERCOLORLIGHT en BORDERCOLORDARK. de cellen in rij. Deze achtergrondkleur wordt aangehouden voor de gehele tabel. of de afzonderlijke cellen. 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.

<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. . <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. Welke kleur je te zien krijgt.a1 b1 a2 b2 Wanneer je het BGCOLOR attribuut opneemt voor een TD (of TH) element. Verder ondersteunen veel browser het BACKGROUND attribuut voor de elementen TABLE. 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.0 kent voor deze elementen echter geen BGCOLOR attribuut. dan kun je de achtergrondkleur voor een enkele cel vastleggen. HTML 4.

TFOOT en TBODY kun je de rijen van een tabel groeperen in een header. voor het gewicht van de letters (met de font-weight eigenschap) en voor de uitlijning van de celinhoud (met de text-align eigenschap).Achtergrond tabel. ligt het voor de hand gebruik te maken van stylesheets bij de opmaak van rijgroepen.0. Ze bieden daarmee de mogelijkheid vast te leggen. 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. 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). TFOOT en TBODY. dat een bepaalde afbeelding als achtergrond moet worden weergegeven. Het gebruikte ALIGN attribuut zorgt ervoor dat de inhoud van alle cellen in deze rijgroepen in één keer wordt gecentreerd. De cellen in de rijen die behoren tot de header en de footer bevatten informatie over de kolom waarvan ze deel uitmaken. Een uitgebreide toelichting wordt gegeven in het onderdeel CSS en tabellen . De tabel heeft de volgende opbouw: <TABLE BORDER="1"> <THEAD> <TR> . Gezien het beperkte aantal attributen dat je kunt gebruiken voor de elementen THEAD. In het volgende voorbeeld zijn THEAD en TBODY gebruikt. Bijvoorbeeld een aanduiding van het soort gegevens een kolom bevat. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. 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. TD en TH. De cellen in de rijen die behoren tot een body bevatten de feitelijke gegevens. Ook dit is evenwel is strijd met HTML 4. Rijgroepen Met elementen THEAD. een footer en één of meer body secties.TR.

Deze oplossing wordt op dit moment alleen door Mozilla en Netscape Navigator 6. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. 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> . background-color: #FFFFCC. Het resultaat zal daardoor in deze browser juist het tegendeel van een gecomprimeerde tabel zijn. } Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Het volgende voorbeeld moet dan ook vooral als illustratie van toekomstige mogelijkheden worden gezien en het gebruik ervan in de praktijk wordt afgeraden. Het idee daarbij is dat de header en footer geheel zichtbaar zijn. maar de body van de tabel slechts voor een deel.0 en hoger ondersteund. } TBODY { text-align: center. 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. TFOOT en TBODY maakt het mogelijk een tabel in gecomprimeerde vorm weer te geven.<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. Uitgebreide informatie over het gebruik van stijlen voor tabellen is te vinden in het onderdeel CSS en tabellen. Met behulp van een verticale schuifbalk kan de bezoeker door de gegevens van de tabel heenlopen. font-weight: bold. Het gebruik van de elementen THEAD. Microsoft Internet Explorer past de opgegeven hoogte voor TBODY ten onrechte toe op de ingesloten TD elementen.

Kolomgroepen Wanneer je de cellen in kolommen van bepaalde kenmerken wilt voorzien. font-style: italic. Omdat TFOOT vóór TBODY geplaatst moet worden. Het COLGROUP element heeft daarnaast een functie in het structureren van de tabel (zie het onderdeel Kader en lijnen). 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. . background-color: #C0C0C0. 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. } TFOOT { color: #000000..4. Met het gebruiken van TFOOT moet je wat voorzichtiger zijn. } Rechts is de weergave door de browser te zien en links een schermafdruk van de weergave door Mozilla 1. Hoewel de elementen THEAD en TBODY door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund worden. } TBODY { overflow: auto.</TR> </TFOOT> <TBODY> <TR> <TD>Dit is rij 1 van de body van de tabel</TD> </TR> . zullen browsers die het element niet kennen. dan kun je gebruik maken van de elementen COL en COLGROUP. background-color: #C0C0C0. de bijbehorende rijen niet aan het eind van de tabel weergeven maar voor de rijen van TBODY. font-weight: bold. height: 130px.. Een uitzondering geldt de hiervoor beschreven gecomprimeerde tabel. kun je ze zonder problemen gebruiken. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. <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.

<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. dat de uitlijning van de tekst vastlegt. <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> . Het COL element moet twee keer gebruikt worden. Soms wil je bepaalde kolommen binnen een kolomgroep kenmerken geven. die afwijken van die van de rest van de kolomgroep. </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. .. Voor beide COL elementen is het ALIGN attribuut opgenomen. voor de volgende kolomgroep is met behulp van het SPAN attribuut de omvang bepaald op twee kolommen.. Let erop dat het COL element in tegenstelling tot het COLGROUP element geen beëindiging kent. De eerste kolomgroep bestaat uit slechts één kolom. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.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. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. In het volgende voorbeeld geldt dat voor de laatste kolom van de tweede kolomgroep.

Daartoe behoren het vastleggen van de breedte en de achtergrond van de cellen in een kolom(groep). TBODY en COLGROUP niet ondersteunen tot een acceptabele weergave te komen. TH en TR.Kolommen). Om ook in browsers die de elementen THEAD. Dat zorgt ervoor dat alleen de boven. Je kunt geen onderscheid maken tussen de verschillende randen en op die manier bijvoorbeeld structuur aanbrengen in de tabel. Het RULES attribuut kun je gebruiken. <TABLE BORDER="1" FRAME="hsides" RULES="groups"> <CAPTION><B>Ondersteuning door browsers</B></CAPTION> . Daardoor zijn alleen de lijnen tussen de rijgroepen en tussen de kolomgroepen zichtbaar. 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. Sinds de komst van HTML 4. 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.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. Met het FRAME attribuut doe je hetzelfde voor de randen van het kader van de tabel (de randen aan de buitenzijde). om vast te leggen welke van de lijnen tussen de rijen en kolommen van een tabel de browser moet weergegeven.0 beschikken we over twee nieuwe attributen voor het TABLE element.kg1 { width: 90px. Het FRAME attribuut heeft de waarde "hsides".. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. zijn de attributen voor de uitlijning toegevoegd aan de elementen TD. background-color: #FFFF99. De gemaakte keuze geldt voor alle randen..kg2 { width: 60px. </TABLE> In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen: . } . Het RULES attribuut heeft de waarde "groups". die dat onderscheid wel mogelijk maken. background-color: #FFFFCC. TFOOT.en onderrand zichtbaar zijn. } Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. In het volgende voorbeeld zijn de attributen RULES en FRAME gebruikt om structuur te geven aan de tabel. Ook met behulp van stylesheets heb je maar een beperkt aantal mogelijkheden de opmaak van de kolommen te beïnvloeden (zie het onderdeel CSS en tabellen . <TABLE BORDER="1"> <COLGROUP CLASS="kg1"> </COLGROUP> <COLGROUP SPAN="2" CLASS="kg2"> </COLGROUP> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> .

Deze browser geeft namelijk alleen randen weer voor de elementen COL. Als alternatief voor de attributen RULES en FRAME kun je ook stylesheets gebruiken voor het geven van structuur aan een tabel. ..0</TD> <TD ALIGN="center">6.0</TD> <TD ALIGN="center">7. TBODY..0</TD> </TR> . omdat in de weergave door Microsoft Internet Explorer alle randen ontbreken. Op dit moment is het overigens niet aan te bevelen de gegeven oplossing in de praktijk toe te passen.<COLGROUP WIDTH="80"></COLGROUP> <COLGROUP SPAN="3" WIDTH="60"></COLGROUP> <THEAD> <TR VALIGN="top"> <TH ALIGN="left">&nbsp. </TBODY> </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.1</TD> </TR> . </TBODY> <TBODY> <TR> <TH ALIGN="left">FRAME</TH> <TD ALIGN="center">3. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft.0</TD> <TD ALIGN="center">4. kun je ze zonder problemen gebruiken.</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. COLGROUP.. Ter illustratie is hierna een voorbeeld voor de eerder gebruikte tabel opgenomen.0</TD> <TD ALIGN="center">6. TFOOT en THEAD als het BORDER attribuut is opgenomen voor het TABLE element met een andere waarde dan "0". Hoewel de attributen RULES en FRAME niet door oudere browsers ondersteund worden..

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

welke betrekking hebben op de horizontale uitlijning van de celinhoud. de kolomgroep (COLGROUP) of de rijgroep (TBODY. een attribuut dat is toegevoegd aan het TR element 4. geldt dat achtereenvolgens voorrang hebben: 1. een attribuut dat is toegevoegd aan het TR element 6. een attribuut dat is toegevoegd aan de elementen TBODY. een attribuut dat is toegevoegd aan het TABLE element . CHAR en CHAROFF direct aan de elementen voor het definiëren van een cel (TD of TH) door de cel de uitlijning te laten erven van de elementen voor het definiëren van de rij (TR). TFOOT of THEAD 5. VALIGN. Voorrangsregels bij uitlijnen De uitlijning van de inhoud van een cel kan op verschillende manieren bepaald worden: • • • • door het toevoegen van de attributen ALIGN. een attribuut dat is toegevoegd aan het COLGROUP element 5. dat tot de celinhoud behoort 2. Voor de attributen ALIGN. een attribuut dat is toegevoegd aan het COL element 6. dat toegevoegd kan worden aan alle elementen.Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. 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. kolommen (COL). zijn in HTML 4. een attribuut dat is toegevoegd aan de elementen TBODY. een attribuut dat is toegevoegd aan het COLGROUP element 7. een attribuut dat is toegevoegd aan de elementen TD of TH 3. 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. een attribuut dat is toegevoegd aan een element. waartoe de cel behoort via het STYLE attribuut. dat tot de celinhoud behoort 2. een attribuut dat is toegevoegd aan het COL element 4. een attribuut dat is toegevoegd aan de elementen TD of TH 3. TFOOT of THEAD 7. een attribuut dat is toegevoegd aan een element. CHAR en CHAROFF. een attribuut dat is toegevoegd aan het TABLE element 8.0 voorrangsregels vastgelegd. TFOOT en THEAD).

INPUT. Tekstveld: . maar wordt uitgegaan van de volgorde waarin de genoemde elementen in het document staan: de uitlijning wordt bepaald door de waarde van het attribuut. Introductie formulieren Formulieren (forms) worden gebruikt om de bezoeker van een site de mogelijkheid te bieden informatie in te voeren en te verzenden. waarin de gebruiker op één regel tekst kan invoeren (gewone tekst. SELECT. Het FORM element definieert het begin en einde van een formulier. 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. het invullen van een enquête. waarvan de gebruiker er één of meer kan selecteren bestandsselectie. Een formulier bevat naast normale documentinhoud (bijvoorbeeld paragrafen. waarin meerdere opties zichtbaar zijn Het TEXTAREA element wordt gebruikt om het volgende control te maken: • tekstvak. Het kan daarbij gaan om bijvoorbeeld het geven van een reactie. waarin de gebruiker over meerdere regels tekst kan invoeren In het volgende "formulier" zijn een aantal controls te zien. dat is toegevoegd aan het laatste element in het document dat betrekking heeft op een cel. het beantwoorden van vragen en het plaatsen van een bestelling. lijsten en koppen) een aantal onderdelen. het aanmelden als abonnee.8. waarbij de gebruiker één keuze moet maken uit meerdere mogelijkheden aankruisvakjes (checkboxen). Met de attributen METHOD en ACTION wordt bepaald op welke wijze de informatie uit het formulier verzonden moet worden en waarheen. welke voor de gebruiker niet zichtbaar is. Het INPUT element wordt onder andere gebruikt voor het maken van de volgende controls: • • • • • • tekstvelden. de beginwaarde van het attribuut Door Microsoft Internet Explorer worden niet de voorrangsregels volgens de specificatie van HTML 4. maar wel met de overige informatie uit het formulier naar de server gestuurd wordt) keuzerondjes (radio buttons).0 aangehouden. De belangrijkste elementen bij het maken van formulieren zijn FORM. of een wachtwoord) verborgen informatie. OPTION en TEXTAREA. welke controls worden genoemd.

Meestal beschikt een provider over een aantal standaardscripts. waarvoor je gebruiksrechten kunt krijgen. Met het OPTGROUP element kunnen keuzemogelijkheden in een keuzelijst gegroepeerd worden. welke gemaakt worden met het INPUT element. Verder wordt aandacht besteed aan de opmaak van een formulier en het gebruik van stijlen. zodat het bij de verwerking van het formulier op de server onderscheiden kan worden van andere controls. die uitgevoerd worden op de webserver van de provider en daarom server-side scripts genoemd worden (in tegenstelling tot client-side scripts. 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. Minder vaak zal een provider je toestaan ook eigen scripts te draaien. Met het LEGEND element kan bij dat kader een bijschrift geplaatst worden. Het VALUE attribuut legt vast welke waarde naar de server gestuurd moet worden.0 opgenomen elementen FIELDSET. welke aan meerdere elementen toegevoegd kunnen worden.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. die door de browser verwerkt worden). Met het NAME attribuut wordt aan een control een naam gegeven. als een bepaalde keuze gemaakt wordt. Bijvoorbeeld voor het automatisch als e-mail door sturen van de in het formulier ingevoerde informatie. Het gaat daarbij om CGIscripts (die vaak geschreven zijn in de scripttaal Perl) of om PHP-scripts. Dit moet voorkomen dat de gebruiker bij een lange lijst in de vele mogelijkheden verdwaalt. 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. Wanneer je van . LABEL en BUTTON. dat door het element in het formulier is geplaatst. 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. Het BUTTON element kan gebruikt worden om een knop te maken met meer mogelijkheden voor de opmaak dan de knoppen. Met het LABEL element kan informatie aan een control verbonden worden (bijvoorbeeld een bijschrift). Daarnaast kan het in sommige gevallen gebruikt worden om een beginwaarde te definiëren (bij tekstvelden). Nieuwe mogelijkheden bieden de in HTML 4. Verwerken informatie Als een bezoeker een formulier heeft ingevuld. Tot de nieuwe mogelijkheden behoren ook de attributen TABINDEX en ACCESSKEY. De ondersteuning van de genoemde elementen en attributen beperkt zich vooral tot de nieuwste browsers. LEGEND. Deze elementen hebben vooral betrekking op de weergave en toegankelijkheid van formulieren. waarmee de verschillende controls van een formulier geactiveerd kunnen worden als de gebruiker de tab-toets op het toetsenbord indrukt. zal het de bedoeling zijn dat de informatie op de juiste plek terecht komt en/of verwerkt wordt. Dit onderdeel over formulieren wordt afgesloten met voorbeelden voor een zoekformulier en een vragenformulier. welke het de gebruiker makkelijker moet maken dat control te selecteren. Met het TABINDEX attribuut kan de volgorde bepaald worden. Daarna worden de hiervoor genoemde controls toegelicht en wordt ingegaan op de mogelijkheden voor groepen en activeren ervan. OPTGROUP. Dat gebeurt over het algemeen met behulp van scripts.

.formulieren gebruik wilt maken. Als gebruik gemaakt wordt van een script op de server waarop ook de HTML-documenten staan. Bijvoorbeeld: <FORM METHOD="post" ACTION="mailto:gebruiker@provider. Welke waarde moet worden opgenomen.. Als alternatief voor scripts van je eigen provider kun je ook terecht bij enkele sites. Een voorbeeld daarvan is het form-to-mail script van Freedback.com. dan wordt de bestemming door middel van een http-URI vastgelegd. </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.... Het METHOD attribuut kent twee waarden: "get" en "post". 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. 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. </FORM> of <FORM METHOD="post" ACTION="form2mail.Freedback. De waarde van het ACTION attribuut is een URI. die gratis standaardscripts aanbieden voor algemeen gebruik...php"> . zie ook het overzicht bij Karakters in URI's) of in de vorm van een attachment. </FORM> . is het daarom verstandig bij je provider te informeren naar de mogelijkheden. Bijvoorbeeld: <FORM METHOD="get" ACTION="http://cgi18. </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. hangt af van het gebruikte script op de server. Informatie over andere mogelijkheden voor het gratis verwerken van formulieren vind je onder meer bij The CGI Resource Index. bijvoorbeeld de spatie door %20.. dan wordt de bestemming bijvoorbeeld als volgt vastgelegd: <FORM METHOD="get" ACTION="/cgi-bin/mailform"> .. dat de informatie uit het formulier op een overzichtelijke manier per e-mail naar je toezendt (zie ook het Voorbeeld vragenformulier).com/mail..nl" ENCTYPE="text/plain"> .pl"> .nl"> . </FORM> Als het script op een andere server staat.

Bij de standalone versie van Netscape Navigator 4 werkt de mailto-URI in het geheel niet. 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.1 en in Mozilla met versienummer lager dan 1.nl?SUBJECT=Reactie"> . of van bijvoorbeeld Freedback.Net als bij mailto-hyperlinks worden door sommige browsers ook parameters voor de mailto-URI ondersteund. Je maakt het met het INPUT element. De inhoud van het bericht is daardoor moeilijk leesbaar. . Tekstvelden Een tekstveld wordt gebruikt om de bezoeker een beperkte hoeveelheid tekst op één regel te laten invoeren. Hetzelfde probleem doet zich blijkens allerlei meldingen regelmatig voor met Microsoft Internet Explorer 6. het bij de browser behorende e-mailprogramma gebruikt. Het is voor de gebruiker overigens wel zo overzichtelijk als de maximale lengte gelijk is aan de breedte van het tekstveld. In het volgende voorbeeld zijn daaraan de attributen TYPE. Netscape Navigator en Opera. • • • 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. maar geven Netscape Navigator en Opera een foutmelding. Meerdere e-mailadressen kunnen niet gebruikt worden. CC en BCC worden door geen enkele versie van Opera ondersteund. De extra parameters voor SUBJECT. Het SIZE attribuut definieert de breedte van het tekstveld en het MAXLENGTH attribuut bepaalt hoeveel karakters de gebruiker mag invoeren. Het standaard scheidingsteken de komma wordt ondersteund door Netscape Navigator en Opera. Als de puntkomma als scheidingsteken wordt gebruikt gaat het goed in Microsoft Internet Explorer. Door geen enkele versie van Opera wordt het ENCTYPE attribuut met de waarde "text/plain" ondersteund. </FORM> De mailto-URI wordt ondersteund door alle versies Microsoft Internet Explorer. Doordat ze aan het e-mailadres worden geplakt en dat daarmee geen legaal adres meer is. In Netscape Navigator met versienummer lager dan 7. De te verzenden informatie uit het formulier staat echter niet in de body van het bericht en kan dus ook niet verzonden worden. Door het TYPE attribuut de waarde "text" te geven. bijvoorbeeld om het onderwerp (subject) van het e-mailbericht vast te leggen: <FORM METHOD="post" ACTION="mailto:gebruiker@provider. maar een nieuw bericht in het e-mailprogramma geopend. NAME. Met de waarde "password" voor het TYPE attribuut wordt de invoer met asterisken (*) weergegeven. Door Microsoft Internet Explorer wordt bij de komma als scheidingsteken (zonder dat er een foutmelding wordt gegeven) helemaal niets verstuurd. <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.. kan de informatie uit het formulier niet verzonden worden.com). bepaal je dat het om een tekstveld gaat. SIZE en MAXLENGTH toegevoegd.3 wordt niets verstuurd.

Je maakt ze met het INPUT element. kan de invoer wel bekeken worden in de bron van het document.<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. Het VALUE attribuut definieert welke waarde naar de server gestuurd moet worden als een keuzerondje geselecteerd is. kan onzichtbaar voor de bezoeker bepaalde informatie naar de server worden gestuurd.nl"> </FORM> Dit wordt door de browser als volgt weergegeven: Verborgen control: Hoewel door de browser niets wordt weergegeven. In het volgende voorbeeld zijn daaraan de attributen TYPE. <FORM METHOD="post" ACTION="bestemming"> <I>Verborgen control:</I> <INPUT TYPE="hidden" NAME="recipient" VALUE="gebruiker@provider. <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 . 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. VALUE en in één geval CHECKED toegevoegd. NAME. Keuzerondjes Keuzerondjes (radiobuttons) worden gebruikt wanneer de bezoeker uit meerdere mogelijkheden één keuze moet maken. Het CHECKED attribuut zorgt er voor dat een keuzerondje bij openen van het formulier geselecteerd is.

moet je van de bij elkaar behorende aankruisvakjes een array maken. wordt een vakje al vooraf aangekruist. verzendt de browser een combinatie van de waarden van de attributen NAME en VALUE. Dat doe je door . Wanneer voor meerdere vakjes hetzelfde resultaat wordt verzonden. De volgende combinatie wordt in dat geval verzonden: fruit=on Een dergelijke weergave is uiteraard alleen begrijpelijk als slechts één vakje kan worden aangekruist. <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. Maak je echter gebruik van een PHP-script. blijft immers onduidelijk welke nu precies waren aangekruist.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. dan moet je er rekening mee houden dat zo'n script bij de gegeven voorbeelden alleen de informatie van het laatste aangekruiste vakje verwerkt. dan gebruikt de browser hiervoor de waarde "on". In het voorgaande voorbeeld is zo'n combinatie bijvoorbeeld: fruit=appel Als het VALUE attribuut niet is opgenomen. <INPUT TYPE="checkbox" NAME="fruit" VALUE="appel" CHECKED>appels appels peren bananen Wanneer een vakje is 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. De gebruiker kan dit weer ongedaan maken. Je maakt ze door het TYPE attribuut met de waarde "checkbox" aan het INPUT element toe te voegen. dan leveren de hiervoor gegeven voorbeelden met meerdere gegroepeerde aankruisvakjes het gewenste resultaat op. Om ervoor te zorgen dat het script ook de informatie van eerdere aangekruiste vakjes kan verwerken.

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. Knoppen worden ook vaak gebruikt bij scripts. In ieder geval zal de gebruiker het niet op prijs stellen als alles gewist wordt. Het SRC attribuut bepaalt welke afbeelding moet worden opgenomen. dan worden alle selecties ongedaan gemaakt en wordt alle reeds ingevoerde tekst op het formulier verwijderd. <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. Het TYPE attribuut met de waarde "reset" definieert een knop. het ALT attribuut definieert een alternatieve tekst voor als de browser de afbeelding niet kan of mag worden weergegeven. terwijl het bij uitgebreide formulieren maar de vraag is. Door het TYPE attribuut met de waarde "submit" aan het INPUT element toe te voegen. maar dat het script een bepaalde gebeurtenis veroorzaakt. Je voegt daarvoor aan het INPUT element het TYPE attribuut met de waarde "image" toe en bovendien de attributen SRC en ALT. Voor het VALUE attribuut kun je dezelfde waarde . waarmee je de beginwaarden van het formulier kunt herstellen. zal per situatie bekeken moeten worden. doordat hij/zij per ongeluk op de verkeerde knop drukt. of de gebruiker er behoefte aan heeft alle ingevoerde informatie in één keer te kunnen wissen. Klikken op de knop heeft dan niet als resultaat dat informatie naar de server gestuurd wordt. omdat geen echte URL is opgenomen). is het goed ook de attributen VALUE en NAME op te nemen. 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.de waarde van het NAME attribuut van het INPUT element te beëindigen met blokhaken. Bij kleine formulieren met een enkel tekstveld is er geen enkele noodzaak voor een reset-knop. Of een reset-knop nodig is. In plaats van een knop kan ook een afbeelding gebruikt worden om de informatie uit het formulier te verzenden. maak je een knop die er voor zorgt dat de informatie van het formulier wordt verzonden. Druk je op Verzenden. Omdat niet elke browser met het ALT attribuut overweg kan. welke je maakt met het INPUT element. Met het VALUE attribuut bepaal je het opschrift van de knoppen. Een knop voor verzenden zal in de meeste formulieren nodig zijn.

. 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. per e-mail doorsturen. Bestanden verzenden In een formulier kun je de gebruiker de mogelijkheid bieden. Met het BUTTON element heb je meer mogelijkheden om te bepalen hoe een knop er uitziet.> Verzenden</BUTTON> </FORM> In een browser die het BUTTON element ondersteunt. Drukken op de knop opent een venster waarin een bestand geselecteerd kan worden. dan heeft het geen zin de mogelijkheid tot het verzenden van bestanden in je formulier op te nemen. welk script of programma op de server de te verzenden informatie moet afhandelen.gif" . . Als je de mogelijkheid wilt bieden bestanden mee te sturen. De gebruiker heeft dan dus geen knop meer om op te drukken en kan de informatie dus niet verzenden. waarna in het tekstveld de naam (inclusief het volledige pad) van het geselecteerde bestand wordt weergegeven. 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. 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. Waarschijnlijk is het beter voorlopig gewoon de standaard knoppen te blijven gebruiken. 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. <FORM METHOD="post" ACTION="bestemming"> . Met het ACTION attribuut leg je daarnaast vast. Deze naam heeft geen verband met de naam van het bestand.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. Heb je niet de beschikking over zo'n script of programma.. cijfers en verbindingsstreepjes bevat. Als waarde voor het NAME attribuut kun je er het beste een kiezen.> Beginwaarden</BUTTON> <BUTTON TYPE="submit"><IMG SRC="goed. <FORM METHOD="post" ACTION="bestemming"> .gif" . <BUTTON TYPE="reset"><IMG SRC="fout.. om gelijk met de rest van de informatie één of meer bestanden naar de server te sturen. <INPUT TYPE="image" SRC="verzenden.. De grootte van het tekstveld bepaal je met het SIZE attribuut. maar dient slechts als informatie voor het script of programma op de server.als van het ALT attribuut gebruiken. of er bepaalde gegevens uithalen en die op de een of andere manier verwerken. Het is verstandig deze niet te klein te kiezen. die uitsluitend letters. Het NAME attribuut gebruik je om het control een naam te geven. Het mag echter ook een gewone "platte" afbeelding zijn. omdat anders een groot deel van het pad en de bestandsnaam niet te lezen zijn.

Mozilla en Netscape Navigator slechts één bestand.0 en hoger "Choose" (of "Bladeren" met een Nederlands taalbestand). Mozilla en Netscape Navigator heeft de knop het opschrift "Browse . Indien het nodig is de gebruiker in alle gevallen de gelegenheid te bieden meerdere bestanden te uploaden. in Microsoft Internet Explorer. Het opschrift van de knop kan in geen enkele browsers beïnvloed worden. maar kan toch een groot aantal keuzemogelijkheden bevatten. Het SELECT element geeft aan dat het om een keuzelijst gaat.5 en hoger doet dit wel en heeft het veiligheidsprobleem opgelost. Bij lagere versies van Opera moet de bezoeker het met slechts ". is het daarom aan te bevelen in het formulier meerdere keren het INPUT element met het attribuut TYPE="file" op te nemen. wordt deze mogelijkheid door de meeste browsers echter niet ondersteund." en bij Opera 6. Om te voorkomen dat de gebruiker ongemerkt of onbedoeld een bestand verzendt. Hoewel er weinig situaties te bedenken zijn waarin het echt nuttig is. Keuzelijsten Een uitschuifkeuzelijst neemt in het document slechts beperkte ruimte in. Het VALUE attribuut van het INPUT element kan daarvoor worden gebruikt.. Je maakt een keuzelijst met de elementen SELECT en OPTION.. het OPTION attribuut definieert een keuze. door voor verzenden een bevestiging van de gebruiker te vragen. Opera 3. De ondersteuning van de diverse mogelijkheden verschilt nogal per browser. kan het in een enkel geval gewenst zijn een beginwaarde voor de bestandsnaam en het pad van het te verzenden bestand vast te leggen. zal de standaardwaarde van het TYPE attribuut ("text") gebruiken en dus alleen een tekstveld weergegeven. Bij Microsoft Internet Explorer.<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. In Opera kunnen meerdere bestanden geselecteerd worden..." doen. De afmetingen en de vormgeving van het tekstveld en de knop kunnen in beperkte mate beïnvloed worden met behulp van stylesheets. <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: .

Een meervoudige keuzelijst brengt meer keuzemogelijkheden in beeld. kan de gebruiker geen keuze selecteren. <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): . <OPTION VALUE="FF" SELECTED>Firefox</OPTION> Als het DISABLED attribuut wordt toegevoegd aan het SELECT element. Met het SIZE attribuut van het SELECT element wordt vastgelegd hoeveel mogelijkheden er in de keuzelijst zichtbaar zijn. kan bepaald worden welke waarde naar de server gestuurd moet worden. Het MULTIPLE attribuut maakt het mogelijk meerdere keuzen tegelijk te selecteren. <SELECT NAME="browser" DISABLED> Het DISABLED attribuut kan ook toegevoegd worden aan een OPTION element.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. kan bepaald worden welke mogelijkheden al voorgeselecteerd moeten zijn (zoals hiervoor bananen). De betreffende keuze kan dan niet geselecteerd worden. dan wordt de eerste mogelijkheid weergegeven (zoals in het voorbeeld hiervoor). Is het SELECTED attribuut niet gebruikt. Het SELECTED attribuut bepaalt welke mogelijkheid door de browser als standaard weergegeven moet worden. <OPTION VALUE="IE" DISABLED>Microsoft Internet Explorer</OPTION> In browsers die het DISABLED attribuut ondersteunen wordt de betreffende keuze meestal in grijs weergegeven. Door aan het OPTION element het attribuut VALUE toe te voegen. Door aan het OPTION element het attribuut SELECTED toe te voegen.

. Wanner je gebruik maakt van een mailto-formulier of de informatie op de server laat verwerken door een CGI-script. 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="Opera"> <OPTION VALUE="op3">Opera 3</OPTION> . dan moet je er rekening mee houden dat zo'n script bij de gegeven voorbeelden alleen de informatie van de laatste geselecteerde keuzemogelijkheid verwerkt... </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... </OPTGROUP> <OPTGROUP LABEL="Mozilla"> <OPTION VALUE="moz1">Mozilla 1</OPTION> </OPTGROUP> <OPTGROUP LABEL="Firefox"> <OPTION VALUE="ff1">Firefox 1</OPTION> . dan leveren de hiervoor gegeven voorbeelden met meervoudige keuzelijsten het gewenste resultaat op.. </OPTGROUP> <OPTGROUP LABEL="Netscape Navigator"> <OPTION VALUE="nn4">Netscape Navigator 4</OPTION> . Dat doe je door de waarde van het NAME attribuut van het SELECT element te beëindigen met blokhaken: <SELECT NAME="vruchten[]" MULTIPLE SIZE="4"> . .. moet je van de keuzemogelijkheden een array maken. </SELECT> Met behulp van het OPTGROUP element kunnen verschillende bij elkaar behorende keuzen worden gegroepeerd.. Om ervoor te zorgen dat het script ook de informatie van eerdere geselecteerde keuzemogelijkheden kan verwerken. Maak je echter gebruik van een PHP-script. <OPTION VALUE="pr" DISABLED>pruimen</OPTION> In browsers die het DISABLED attribuut ondersteunen wordt de keuze meestal in grijs weergegeven..Ook bij de meervoudige keuzelijst kun je met het DISABLED attribuut bepaalde keuzen uitsluiten..

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.0 en hoger. Mozilla en Opera 7.0 en hoger). . geven de keuzelijst op de gebruikelijke wijze weer. Als de keuzemogelijkheden zijn gegroepeerd zoals in het voorbeeld hiervoor. <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. Netscape Navigator 6.0 en hoger. Browsers die het element niet kennen. kun je het zonder problemen toepassen. Hoewel het OPTGROUP element alleen door recente browsers wordt ondersteund (Microsoft Internet Explorer 6. Dus bijvoorbeeld niet voluit "Netscape Navigator 3". maar alleen "3". Firefox. Dat kan met behulp van het LABEL attribuut van het OPTION element. dan ligt het voor de hand ze zelf ook op andere wijze weer te geven.

Je maakt een tekstvak met het TEXTAREA element. Naast de hier beschreven toepassing in een formulier. <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. In Netscape Navigator met versie nummer lager dan 6. Op dit moment wordt het LABEL attribuut alleen door Microsoft Internet Explorer 7.0 ondersteund. worden keuzelijsten ook vaak in combinatie met JavaScript gebruikt om de bezoeker te laten kiezen uit een lijst met hyperlinks. 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. De attributen ROWS en COLS bepalen de hoogte (het aantal rijen) en breedte (het aantal karakters) van het tekstvak.Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. zijn in een apart document enkele voorbeelden opgenomen. Hoewel JavaScript in principe buiten het bereik van deze handleiding valt.0 gebeurt dat niet en loopt de tekst . Tekstvakken Een tekstvak kan gebruikt worden om de bezoeker een in principe onbeperkte hoeveelheid tekst te laten invoeren.

Vaak wordt de inhoud van een geblokkeerd tekstvak in grijs weergegeven.door buiten de grens van het vak. Door de tekst en de controls in aparte cellen te plaatsen. <TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" WRAP="soft"> </TEXTAREA> Het WRAP attribuut maakt geen deel uit van HTML 4. maar de voorafgaande tekst zorgt ervoor dat ze niet netjes onder elkaar staan. 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. <TEXTAREA NAME="tekstvak" ROWS="4" COLS="50" DISABLED> </TEXTAREA> Een formulier opmaken De controls in een formulier worden weergegeven als inline elementen. <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. het tekstvak doet niet mee in de tabvolgorde en de inhoud wordt niet met het formulier verstuurd. <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> . worden de tekstvelden netjes onder elkaar uitgelijnd. Je kunt dat voorkomen door gebruik te maken van het WRAP attribuut. Het geheel kan daardoor een nogal rommelige indruk geven. <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). 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. Dat is bijvoorbeeld te zien in het volgende formulier: de twee tekstvelden zijn weliswaar even lang.

Die mogelijkheid wordt echter door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund. De activering en beëindiging van de overige elementen in het formulier (zoals SELECT en TEXTAREA) daarentegen moeten zich juist binnen één cel van de tabel bevinden.<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. Controls groeperen Een nieuwe mogelijkheid waarmee je de layout van een formulier kunt bepalen. dan moet je de activering en de beëindiging van het FORM element buiten de tabel te plaatsen. dat in het kader geplaatst wordt. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser"> <OPTION VALUE="" SELECTED>-----. De breedte van een keuzelijst wordt bepaald door de keuzemogelijkheid met de langste omschrijving. . 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. In het volgende voorbeeld is dit te zien. Als je meerdere keuzelijsten gebruikt. is het groeperen van controls. zal de breedte daarvan dus vrijwel zeker verschillen. 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 beïnvloeden door gebruik te maken van stijlen.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. Door het toevoegen van een extra keuzemogelijkheid aan alle keuzelijsten met een lange omschrijving kun je ze op eenvoudige wijze even lang maken.

kun je ze zonder problemen gebruiken. Klik je op het label. zodat deze in alle gevallen benadrukt wordt. Controls activeren Het LABEL element kun je gebruiken om een label aan een control te verbinden. In het volgende voorbeeld is gebruik gemaakt van een expliciete verbinding met behulp van het FOR attribuut voor het LABEL element. dan wordt het control geactiveerd. <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. <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 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 . Je kunt daarom overwegen de inhoud van het LEGEND element binnen het B element te plaatsen. De waarde van het FOR attribuut moet hetzelfde zijn als de waarde van het ID attribuut van het control. Hoewel de elementen FIELDSET en LEGEND niet door oudere browsers worden ondersteund. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.. dat browsers die het LEGEND element niet kennen het bijschrift als gewone tekst weergeven.. Wel moet je er op letten. 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.

Omdat de waarde voor het ID attribuut slechts één keer mag voorkomen in een document.. de onderstreping weglaten. In het eerder gebruikte voorbeeld voor het LABEL element is het ACCESSKEY attribuut aan het LABEL element toegevoegd.. 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.. waarmee een control snel vanaf het toetsenbord geactiveerd kan worden.gif" . De eerste letter van elk label is gebruikt als sneltoets en overeenkomstig het gebruik bij gewone sneltoetsen onderstreept. Met behulp van het TABINDEX attribuut kan deze volgorde beïnvloed worden. </SELECT><BR> <BUTTON TYPE="submit" TABINDEX="6"><IMG SRC="pos. Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets te definiëren. kun je hierna ook op het label klikken om het keuzerondje te activeren. In het volgende voorbeeld is het TABINDEX attribuut gebruikt voor verschillende controls. Normaal worden de verschillende controls afgewerkt in de volgorde.>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. zodat in ieder geval een deel van de browsers die het ACCESSKEY attribuut niet kennen.. waarin ze in het document staan (probeer dit eens uit in het formulier in de introductie van dit onderdeel). Dat is gedaan met behulp van Cascading Style Sheets. </FORM> In een browser die het LABEL element ondersteunt.. <FORM METHOD="post" ACTION="bestemming"> <I>Geef aan welke browser je gebruikt:</I><BR> <BR> .. zijn de waarden voor het FOR en ID attribuut wat aangepast. <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> ..

">Aan het TEXTAREA . Browsers die ze niet kennen negeren ze eenvoudig. Opera hanteert een afwijkende procedure: eerst moet met de toetscombinatie Shift + Esc de werking van het ACCESSKEY attribuut geactiveerd worden. In het volgende voorbeeld zijn met behulp van het STYLE attribuut inline stijlen gedefinieerd voor enkele controls gemaakt met het INPUT element. In Firefox 2.. blauw.. font-family: sansserif. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.<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> .0 is de toetscombinatie gewijzigd in Shift. 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. pas daarna kan de toets van het aangewezen karakter worden ingedrukt. width: 250px. Het gebruik van stijlen Voor alle elementen welke gebruikt worden bij het maken van formulieren..</TEXTAREA> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. <FORM METHOD="post" ACTION="bestemming"> <TEXTAREA ROWS="6" COLS="40" STYLE="font-size: 16px. 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. kunnen met behulp van stylesheets stijlen gedefinieerd worden. </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.. kun je ze zonder problemen gebruiken. background: #FFFFFF. color: #0000FF.

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

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. om de breedte van het kader en de dikte en de kleur van de rand te bepalen.0 en hoger."> <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. Netscape Navigator 6. Het gebruik van stijlen voor het vastleggen van de breedte wordt ondersteund door Microsoft Internet Explorer 4. <FORM METHOD="post" ACTION="bestemming"> <FIELDSET STYLE="width: 250px. font-family: sansserif.Ook de breedte van controls als tekstvelden. border: solid 2px red. Firefox en Opera 5.0 en hoger. 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. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser" STYLE="width: 250px. ."> <LEGEND STYLE="color: red. Als voorbeeld is het STYLE attribuut aan het SELECT element toegevoegd.">Browser</LEGEND> <BR> <DIV STYLE="padding: 1em.0 en hoger. om wat afstand te creëren tussen de controls en het kader. Voor het LEGEND element is de kleur en het gewicht van de tekst bepaald met de stijleigenschappen color en font-weight. font-weight: bold. Voor het FIELDSET element zijn hierna onder andere de stijleigenschappen width en border opgenomen. Mozilla. Voor het DIV element is tenslotte de padding eigenschap opgenomen.">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. keuzelijsten en tekstvakken kun je bepalen met behulp van een stijl.

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

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

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

De waarden van de controls "acctid" en "formid" krijg je bij aanmelding van Freedback. In dit geval gaat het om: "acctid". De rest van het formulier is hetzelfde als bij het CGI-script. De waarden van "name". het e-mailadres van de afzender en de verplichte velden. "email" en "required_vars" staan voor respectievelijk de naam van de afzender. "formid".<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.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.freedback. </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: ... <FORM METHOD="post" TARGET="_blank" ACTION="http://www. "name" en "email" en "required_vars".com en staan respectievelijk voor je emailadres en het onderwerp van het bericht. email"> .

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

Een inline frame wordt gedefinieerd met het IFRAME element. Omdat het vooral om het principe gaat. Opbouw frames Het gebruiken van frames is niet bijzonder ingewikkeld. We zullen we dat nu doen voor de hieronder afgebeelde indeling. Bovendien wordt het SRC attribuut van het FRAME element vervangen door een aanduiding van elk frame (bijvoorbeeld A1. maar ook in een ander (al dan niet inline) frame. Inline frames worden opgenomen in een normaal document. mits je maar systematisch te werk gaat. waar doorheen je een ander document ziet. zijn in een apart document enkele voorbeelden opgenomen van de genoemde mogelijkheden. Hoewel JavaScript in principe buiten het bereik van deze handleiding valt. Je kunt ze beschouwen als een opening in het document. Daarna gaat het erom stapsgewijs vanuit een leeg venster de gewenste indeling op te bouwen. Dat openen kan in het inline frame waarin je hebt geklikt. Een bijzondere vorm van frames zijn inline frames (ook wel floating of zwevende frames). 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. . worden geen waarden opgenomen voor het ROWS of het COLS attribuut van het FRAMESET element. 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. B11 of B3).• • 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. Als eerste bedenk je op welke wijze je het venster wilt indelen.

"> <FRAME B11> <FRAME B12> </FRAMESET> <FRAME B2> <FRAME B3> </FRAMESET> </FRAMESET> . Dat leidt tot de volgende opbouw: <FRAMESET COLS=" . "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAMESET ROWS=" . <FRAMESET COLS=" . In dit geval moet het venster in twee kolommen verdeeld worden. "> <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 ROWS=" . "> <FRAMESET ROWS=" . nu met drie rijen: <FRAMESET COLS=" . ofwel horizontaal in kolommen. . "> <FRAMESET COLS=" .De eerste stap is het verdelen van het gehele venster ofwel verticaal in rijen. . "> <FRAME A1> <FRAME A2> </FRAMESET> <FRAME B> </FRAMESET> De derde stap is het vervangen van FRAME B door een frameset. "> <FRAMESET ROWS=" . "> <FRAME A> <FRAME B> </FRAMESET> De tweede stap is het vervangen van FRAME A door een frameset met twee rijen: <FRAMESET COLS=" .

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

Door het NORESIZE attribuut aan het eerste FRAME element toe te voegen.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster.75%"> <FRAME SRC="linksboven.Bekijk het resultaat in een nieuw venster. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET> <FRAME SRC="volledig.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> . dan kun je ook met één frameset werken en de attributen ROWS en COLS voor het FRAMESET element combineren. kan dit niet meer.html"> <FRAME SRC="linksonder. 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. met de muis verplaatst worden.html"> <FRAME SRC="rechtsboven. dat het frame dan het hele venster vult. zoals in de volgende afbeelding te zien is. Het resultaat hiervan is.html"> <FRAME SRC="rechtsonder. Wanneer je een symmetrische indeling van de frames wilt. Wanneer je de attributen ROWS en COLS niet opneemt voor het FRAMESET element. In de voorgaande voorbeelden is geen gebruik gemaakt van het NORESIZE attribuut.50%" COLS="25%. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="50%. De rand tussen de frames kan daardoor. dan wordt voor elk de beginwaarde 100% aangehouden.

Aan het middelste frame is het SCROLLING attribuut niet toegevoegd en de schuifbalk wordt weergegeven. Door het SCROLLING attribuut aan het FRAME element toe te voegen. Aan het bovenste frame is het SCROLLING attribuut toegevoegd met de waarde "no".en rechterrand. Voor het onderste frame is SCROLLING="yes" opgenomen.html" SCROLLING="no"> <FRAME SRC="boven.html" MARGINWIDTH="1" MARGINHEIGHT="1"> <FRAME SRC="rechts. omdat deze nodig is om de volledige inhoud van het document te laten zien. Een browser die deze waarde ondersteunt. dan krijgt de gebruiker een leeg venster te zien. Binnen het NOFRAMES . In het volgende voorbeeld wordt in de bovenste twee frames hetzelfde document geopend. Browser ondersteunt geen frames Als bovenstaande voorbeelden worden geopend in een browser die geen frames ondersteunt.html" SCROLLING="yes"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster.70%"> <FRAME SRC="links. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="*. Je plaatst het vlak voor de beëindiging van het buitenste frameset.*.en onderrand van het frame. moet je het NOFRAMES element opnemen.html" MARGINWIDTH="30" MARGINHEIGHT="30"> </FRAMESET> <FRAME SRC="onder.*"> <FRAME SRC="boven.html"> <FRAME SRC="midden.<FRAMESET ROWS="30%.60.60"> <FRAMESET COLS="*.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. respectievelijk de boven. kun je aangeven hoe groot de afstand moet zijn tussen de inhoud van een frame en de linker.html"> </FRAMESET> </HTML> Bekijk het resultaat in een nieuw venster. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="60. Om dat te voorkomen. Door de attributen MARGINWIDTH en MARGINHEIGHT aan het FRAME element toe te voegen. geeft in dit frame de schuifbalk weer ook al is deze niet nodig.html"> <FRAME SRC="onder. waardoor er geen schuifbalk wordt weergegeven. kun je bepalen of wel of geen schuifbalk moet worden weergegeven.*"> <FRAME SRC="links.html" NORESIZE> <FRAME SRC="rechts.

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

In andere gevallen wil je het document helemaal niet in een frame openen. kun je het resultaat bekijken in een nieuw venster.html" TARGET="hoofdframe">voorbeeld a</A> en <A HREF="vb-b.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. Je moet er dus voor zorgen dat je zowel in het TARGET attribuut als in het NAME attribuut exact dezelfde naam gebruikt.html" TARGET="navigatieframe">voorbeeld b</A> Indien de browser frames ondersteunt. Als je de voor-gedefinieerde framenaam "_parent" gebruikt wordt een hyperlink geopend in de parent .html" TARGET="_blank">vensternaam _blank</A> <A HREF="vb-c. Standaard wordt een document geopend in het frame waarin de hyperlink staat. maar juist in het volledige venster van de browser. Het document wordt daardoor geopend in een nieuw browservenster.Speciale aandacht verdient het gebruik van hyperlinks in documenten in frames.*"> <FRAME SRC="navigatie. 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). Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven. Wanneer je als waarde van het TARGET element de naam van een frame opneemt. Vaak is dat echter niet gewenst en wil je het document juist in een ander frame openen. "_parent". Hetzelfde gebeurt overigens als je gebruik maakt van een niet gedefinieerde framenaam. <A HREF="vb-c. Het toevoegen van TARGET attribuut aan het element waarmee je de hyperlink maakt (bijvoorbeeld A of AREA) biedt in dit geval uitkomst. Naast een zelf bepaalde framenaam kun je in een TARGET attribuut ook gebruik maken van enkele voor-gedefinieerde namen: "_blank". In het volgende voorbeeld is aan elk van de frames een naam gegeven met behulp van het NAME attribuut. dan wordt het document in dat frame geopend. In de praktijk maken alle belangrijke browsers als het gaat om de naam van een frame wel onderscheid tussen hoofdletters en kleine letters.html" TARGET="zomaar_een_naam">niet gedefinieerde vensternaam</A> Het resultaat zie je in een nieuw venster. "_top" en "_self". In het volgende voorbeeld wordt gebruik gemaakt van de voor-gedefinieerde framenaam "_blank".0 is de naam hoofdletterongevoelig. Volgens HTML 4. <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="120.

Je geeft daarmee aan dat alle URI's in het document geopend moeten worden in een frame met de opgegeven naam.van het huidige frameset. 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. Dat kan met HTML indien deze frames samen een frameset vormen. Bekijk in een nieuw venster hoe het werkt. Dat komt er op neer dat het huidige frameset vervangen wordt door het in de link genoemde bestand. Meerdere frames tegelijk vervangen Soms wil je niet alleen de inhoud van één frame vervangen. . 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. Dat is in het volgende voorbeeld het geval met de frames links 1 en rechts 1. maar van meerdere frames tegelijkertijd. dan kan het handig zijn gebruik te maken van het BASE element met daaraan toegevoegd het TARGET attribuut.. dan kun je als waarde van het TARGET element van bijvoorbeeld het A of AREA gebruik maken van de voor-gedefinieerde framenaam "_self". dat je als geheel kunt vervangen. 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. TARGET="_parent" Bekijk in een nieuw venster hoe het werkt. Deze frames kunnen dus in één keer vervangen worden door de frames links 2 en rechts 2. In de URI's zelf hoef je dan geen gebruik meer te maken van het TARGET attribuut.. 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..

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

Opera 6 ondersteunt het FRAMEBORDER ook niet. Als je vaker meerdere frames tegelijkertijd wilt vervangen. Nadeel van het werken met JavaScript is wel. is de opbouw als volgt: <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="25. maar geeft de frameranden altijd vlak weer. Omdat de ruimte tussen de frames door de meeste browsers daarbij niet geheel of soms helemaal niet wordt weggelaten. 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. levert de beschreven methode behoorlijk wat werk en extra documenten op.25" BORDER="10" FRAMESPACING="10"> <FRAME FRAMEBORDER="0" SRC="boven-onder. .0. In het volgende voorbeeld is te zien hoe de browser de verschillende mogelijkheden voor 3-D en vlakke frameranden weergeeft. Vrij algemeen ondersteund wordt het BORDER attribuut van het FRAMESET element: door Microsoft Internet Explorer vanaf versie 4. HTML 4. 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. maar wordt alleen ondersteund door Internet Explorer 3 en hoger en Opera 7. Firefox en Opera. De waarde "0" zorgt ervoor dat de 3-D rand niet wordt weergegeven. Daarmee kun je ook eenvoudig frames uit verschillende framesets tegelijk vervangen. Het FRAMESPACING van het FRAMESET element attribuut doet in hoofdlijnen hetzelfde als het BORDER attribuut. Met het FRAMEBORDER attribuut van het FRAME element kun je de weergave van de framerand beïnvloeden.html"> <FRAME FRAMEBORDER="0" SRC="boven-onder. dat het gewenste effect niet bereikt wordt als de bezoeker het gebruik van JavaScript heeft uitgesloten. Dus ook het frame wat helemaal niet vervangen hoeft te worden.*. Netscape Navigator vanaf versie 3.0 en hoger. De breedte van de framerand is afhankelijk van de browser. Met de waarde "1" wordt tussen de frames de standaard 3-D rand geplaatst.html" SCROLLING="no"> </FRAMESET> </HTML> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Als alternatief wordt daarom vaak gebruik gemaakt van een oplossing met JavaScript.0 kent geen mogelijkheid de breedte te beïnvloeden. Voor de mogelijkheid.In HTML heb je dan slechts de mogelijkheid het complete venster te wijzigen en in het te openen document alle frames opnieuw te definiëren. Frameranden Standaard worden frameranden in de meeste browsers weergegeven in 3-D.html" SCROLLING="no"> <FRAME FRAMEBORDER="0" SRC="midden. maar de browsermakers hebben hiervoor in de loop van de tijd toch enige attributen ontwikkeld. Mozilla. is het resultaat een "vlakke" rand.

dat de diverse browsers de rand verschillend weergeven ook als je gebruik maakt van hetzelfde attribuut met dezelfde waarde. In de eerste tabel is aan elk FRAME element steeds het attribuut FRAMEBORDER="1" toegevoegd. het BORDER attribuut. Bij een combinatie van de attributen BORDER en FRAMESPACING komen Microsoft Internet Explorer en Opera 5 op dezelfde breedte uit. Netscape Navigator. 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. . 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. Aan het FRAMESET element zijn achtereenvolgens geen attribuut (dat is dus de standaard weergave) en. dan is een gegeven waar je rekening mee moet houden. FRAMEBORDER="1" IE 4 . Bij de standaardweergave begint in de nieuwste browsers (met uitzondering van Opera 6 en 7) weliswaar enige uniformiteit te komen. Mozilla. In de hierna opgenomen tabellen is dat te zien voor de verschillende versies voor Windows van Microsoft Internet Explorer. bij de overige mogelijkheden is dat allerminst het geval.Wanneer je de breedte van de framerand wilt bepalen. 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.(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. het FRAMESPACING attribuut en de combinatie van de attributen BORDER en FRAMESPACING toegevoegd. Firefox en Opera. De rand wordt daardoor in 3-D weergegeven. In de tabel is te zien dat een uniforme weergave door de verschillende browser(versies) niet mogelijk is.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. Opera 6 ondersteunt het FRAMEBORDER attribuut van het FRAME element niet en geeft frameranden alleen nog vlak weer. Netscape Navigator 6 en 7. Mozilla en Firefox wijken daar echter weer aanzienlijk vanaf. met verschillende waarden. In Opera 7 is de ondersteuning weer hersteld.

het FRAMESPACING attribuut en de combinatie van de attributen BORDER en FRAMESPACING toegevoegd. 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. FRAMEBORDER="0" IE 4 . . dan is de weergave in alle gangbare browsers hetzelfde. Bij frames waarvan de randen niet meer zichtbaar zijn. Wanneer je gebruik maakt van het BORDER attribuut of de combinatie van de attributen BORDER en FRAMESPACING.De rand wordt daardoor in het algemeen vlak weergegeven. kan het soms handig zijn de inhoud van een frame zo dicht mogelijk in de linker bovenhoek te plaatsen. Ook in dit geval zijn aan het FRAMESET element achtereenvolgens geen attribuut (dat is dus de standaard weergave) en.html" MARGINWIDTH="1" MARGINHEIGHT="1"> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.(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. het BORDER attribuut. Uitzonderingen zijn Netscape Navigator 2 en Opera met versienummer lager dan 4. bij oneven getallen verhoogd met 1 als het BORDER attribuut een waarde heeft lager dan 4 bij Microsoft Internet Explorer. In de tabel is te zien dat nu juist bij de standaardweergave geen sprake is van uniformiteit. met verschillende waarden. <FRAME FRAMEBORDER="0" SRC="midden.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. die het FRAMEBORDER attribuut niet kennen en de rand dus in 3-D weergeven. Je doet dat door aan het FRAME element de attributen MARGINWIDTH en het MARGINHEIGHT toe te voegen met de waarde "1". om in de verschillende browsers (met uitzondering van Netscape Navigator 2) de frameranden geheel te laten wegvallen.

Firefox en Microsoft Internet Explorer 4 en hoger. Alleen bij Microsoft Internet Explorer 4 kun je ook de kleur van vlakke randen bepalen. In het vorige voorbeeld is voor alle frames dezelfde kleur voor de frameranden gedefinieerd.html" NORESIZE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. in Netscape Navigator 6 echter 16 pixels. Inline frames .html" SCROLLING="no"> </FRAMESET> </HTML> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. zijn bij Internet Explorer 4 en Opera 4 en hoger grijs en bij Netscape Navigator 6. Het gebruik van meerdere kleuren voor de frameranden is daarom niet echt aan te bevelen.html" SCROLLING="no"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="midden.Bij de meeste browsers is de minimale afstand tot de bovenrand zo'n 3 à 4 pixels. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. maar de browsermakers hebben hiervoor het BORDERCOLOR attribuut van het FRAME element ontwikkeld. De 3-D frameranden zijn standaard bij alle browsers grijs. HTML 4. Firefox en Opera 4 en hoger kunnen door een gebruiker niet alleen 3-D frameranden verplaatst worden.0 en hoger. In het volgende voorbeeld is de weergave te zien van frameranden in kleur.0 kent geen mogelijkheid om de kleur van de framerand te beïnvloeden. 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. Netscape Navigator 6 en hoger. Voor de mogelijkheid.25" BORDER="10" FRAMESPACING="10"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder. Elke browser hanteert daarvoor een eigen methode. 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. In Microsoft Internet Explorer 3 en hoger. die niet alleen afwijkt van de weergave van andere browsers. Mozilla. Opera ondersteunt het BORDERCOLOR attribuut niet. maar ook "vlakke" frameranden. De beïnvloedingsmogelijkheden zijn echter beperkt. Wanneer je niet wilt dat dit gebeurt.*. Mozilla. dan moet je het NORESIZE attribuut aan het FRAME element toevoegen: <FRAME SRC="frame-vb. Mozilla en Firefox wit. maar bovendien nogal eens onverwachte resultaten oplevert. Het BORDERCOLOR attribuut wordt ondersteund door Netscape Navigator 3 en hoger.html"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder. Waar de frames aan elkaar grenzen moet de browser dan bepalen welke kleur gebruikt wordt. Dat had ook voor elk frame een andere kleur mogen zijn. is de opbouw als volgt: <HTML> <HEAD> <TITLE>Voorbeeld frames</TITLE> </HEAD> <FRAMESET ROWS="25. omdat het attribuut in de meeste browsers alleen effect heeft op de kleur van de 3-D frameranden.

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 beëindiging 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 beëindiging 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 definiëren 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 definiëren 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 definiëren, 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

terwijl een andere voor grote problemen zorgt.0 en hoger en Opera 4. Voor het maken van aanklikbare afbeeldingen (Client-side image maps) zijn de elementen MAP en AREA beschikbaar. Bij de beschrijving van de ondersteuning van het OBJECT element blijft Microsoft Internet Explorer 3 buiten beschouwing. Dit element moet in de toekomst de eerder genoemde elementen gaan vervangen. • Voor het insluiten van de verschillende objecten is in HTML 4. omdat nieuwere versies van Microsoft Internet Explorer het insluiten ervan met behulp van het EMBED element niet meer ondersteunt. . of als het object niet kan worden weergegeven. Daarnaast worden voorbeelden gegeven van de verschillende mogelijkheden.0 het OBJECT element geïntroduceerd. Met name in Netscape Navigator 4 is de ondersteuning beperkt. Netscape Navigator 4. De beschrijving is opgenomen in het onderdeel Afbeeldingen. Java applets en multimedia objecten als QuickTime filmpjes. Voor het insluiten van andere HTML-documenten kan gebruik gemaakt worden van inline frames. Java applets. Browsers die het OBJECT element ondersteunen. Vaak is het mogelijk de werking van het applet te beïnvloeden. Voor sommige objecten is dat voorlopig ook de beste oplossing. Voor het insluiten van deze objecten worden verschillende elementen gebruikt: • • • Afbeeldingen worden in een document ingesloten met het IMG element. 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. Ten behoeve van oudere browsers kan tussen de activering en beëindiging van het OBJECT element een alternatieve inhoud opgenomen worden. Deze alternatieve inhoud wordt alleen weergegeven als de browser het OBJECT element niet ondersteunt. 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). andere HTML-documenten. door voor een aantal parameters op te geven welke waarde gebruikt moet worden. Gezien de hiervoor genoemde problemen met het OBJECT element is de verleiding groot de "oudere" elementen te blijven gebruiken. Hiervoor dient het PARAM element. Dat is een programma dat ervoor zorgt dat bepaalde typen objecten binnen de browser kunnen worden weergeven. De beschrijving is opgenomen in het onderdeel Frames. doen dat overigens niet altijd voor alle typen objecten. welke gedefinieerd worden met behulp van het IFRAME element. QuickTime filmpjes. In het algemeen kan gesteld worden dat de weergave van vrijwel alle objecten veel problemen kent. 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. HTMLdocumenten. Bij multimedia objecten is het echter niet mogelijk het OBJECT element links te laten liggen. Mozilla. Soms is de weergave in een browser met de ene plug-in prima. Bij multimedia objecten hebben die problemen vaak een relatie met de gebruikte plug-in. Het OBJECT element wordt ondersteund door Microsoft Internet Explorer 3.0 en hoger. terwijl de elementen EMBED en BGSOUND niet eens in de specificatie zijn opgenomen. 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).In een HTML-document kunnen verschillende soorten objecten opgenomen (of ingesloten) worden. Java applets. maar dat daar tegenover staat dat vrijwel niemand deze browser nog zal gebruiken.0 het label afgekeurd gekregen. Macromedia Flash animaties en geluidsfragmenten. kleine programma's geschreven in de programmeertaal Java.0 en hoger. image maps. bijvoorbeeld afbeeldingen. Macromedia Flash animaties en geluidsfragmenten. worden in een HTML-document ingesloten met het APPLET element. Het APPLET element heeft om die reden in HTML 4.

Indien voor de breedte van het object 300 pixels en voor de hoogte 45 pixels aangehouden wordt. welke door de gebruiker bediend kan worden. is alleen het complete bedieningspaneel te zien. ActiveX controls zijn speciaal ontwikkeld voor en worden ook alleen ondersteund door Microsoft Internet Explorer. Het bedieningspaneel beschikt over een geluidsregelaar. Plug-ins zijn oorspronkelijk ontwikkeld door Netscape. Als dit niet het geval is. au. Plug-ins en ActiveX controls Een plug-in of ActiveX control is een programma dat de functionaliteit van de browser zodanig uitbreidt. Kies je kleinere waarden. zal een aparte plug-in geïnstalleerd moeten worden. ActiveMovie in Microsoft Internet Explorer 4 ondersteunt wel midi-bestanden. niet voldoet aan HTML 4. De plug-in voor de belangrijkste bestandsformaten voor geluidsfragmenten (wav-.0 of hoger met LiveAudio geïnstalleerd is. au-. Beatnik Player plug-in De ActiveX control voor wav-. dat bepaalde typen multimedia objecten binnen het venster van de browser kunnen worden weergeven. zal het document dus niet worden goedgekeurd. Windows Media Player control alleen bedieningspaneel . Bij controle met een validator. Als je kiest voor een kleinere breedte dan 300 pixels valt de geluidsregelaar weg. Het bedieningspaneel voor LiveAudio heeft een regelaar voor het geluidsvolume. maakt Microsoft Internet Explorer 3 automatisch gebruik van deze plug-in. De gebruiker kan bepalen of het control met of zonder display moet worden weergegeven.en aif-bestanden in Microsoft Internet Explorer 3 en 4 is ActiveMovie. LiveAudio plug-in Bij latere versies van Netscape Navigator 4 wordt als plug-in voor geluidsfragmenten de Beatnik Player meegeleverd. Indien ook Netscape Navigator 3.5 Service Pack 1). De Beatnik Player heeft geen geluidsregelaar. Als afmetingen voor het object moet 144 pixels breed en 60 pixels hoog aangehouden worden. aif. De afmetingen zijn hetzelfde als bij LiveAudio: 144 pixels breed en 60 pixels hoog. ActiveMovie control zonder display ActiveMovie control met display Latere versies van Microsoft Internet Explorer maken standaard gebruik van de Windows Media Player control. dan valt een deel van het bedieningspaneel weg. 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 geïnstalleerd. Als de hoogte toeneemt krijg je ook (een deel van) het display te zien. In Microsoft Internet Explorer 3 ondersteunt ActiveMovie geen midi-bestanden. Voor geluidsfragmenten is dat voldoende. Het bedieningspaneel moet het in beide gevallen zonder geluidsregelaar doen en ook via het VOLUME attribuut is de geluidssterkte niet te regelen.Je moet er rekening mee houden dat een document waarin de elementen EMBED of BGSOUND zijn opgenomen.of midi-bestanden) is bij Netscape Navigator 3 en 4 LiveAudio. maar worden ook ondersteund door andere browsers zoals Opera en oudere versies van Microsoft Internet Explorer (t/m versie 5.

hangen af van het object. is het verstandig grotere afmetingen aan te houden. De Quicktime Player kan niet alleen QuickTime filmpjes weergeven. In het laatste geval is de werking hetzelfde als bij Internet Explorer 5. Indien afbeeldingen van het type png geassocieerd zijn met bijvoorbeeld de QuickTime player.Windows Media Player control In Netscape Navigator 6. de nieuwste versies kennen echter ook een ActiveX control. Mozilla. Met uitzondering van Opera 7. • • • • In enkele schermafdrukken is de weergave door Microsoft Internet Explorer van afbeeldingen met behulp van OBJECT element te zien. In Opera 4. gebruiken Netscape Navigator.0 en hoger plaatst de afbeelding in een inline frame. Met de originele afmetingen valt daardoor een deel van de afbeelding weg. Voor afbeeldingen van het type png geldt dat echter alleen indien deze niet geassocieerd zijn met een ander programma (bijvoorbeeld de QuickTime player). behalve als voor de weergave gebruik gemaakt wordt van een plug-in (bijvoorbeeld de QuickTime player voor png-bestanden). Mozilla en Firefox is de ondersteuning correct. dan wordt slechts het logo van de plug-in weergegeven. Tot voor kort was er alleen een plug-in.0 en hoger ondersteunt geen enkele browser het CODEBASE attribuut in combinatie met het DATA attribuut. bijvoorbeeld die van de LiveAudio en Beatnik Player plug-in. Wat betreft de ondersteuning van het OBJECT element valt het volgende op te merken: • Microsoft Internet Explorer 4. geven de verschillende versies van Microsoft Internet Explorer beide objecten weer in plaats van slechts één. Indien als alternatieve inhoud een tweede OBJECT element is opgenomen. De gebruikers van deze browsers moeten dus zelf de benodigde plug-ins kiezen.5 Service Pack 2. Mozilla. Netscape Navigator 4 ondersteunt geen afbeeldingen via het OBJECT element. Omdat je niet weet of de QuickTime plug-in gebruikt wordt.5 Service Pack 1 geldt hetzelfde als voor versie 4. Als de QuickTime Player geïnstalleerd is. Firefox en Opera deze bijvoorbeeld vaak voor het afspelen van bepaalde typen geluidsfragmenten.5. Firefox en Opera zijn standaard geen plug-ins opgenomen. terwijl bij een vergrote weergave de afbeelding het originele formaat houdt. tenzij de Security update Q321232 van 15 mei 2002 geïnstalleerd is. Voor Internet Explorer 5. QuickTime Player bedieningspaneel Afbeeldingen Voor het opnemen van afbeeldingen in een HTML-document. HTML 4. jpg en png). De afmetingen hebben betrekking op het inline frame en niet op de afbeelding. In dat geval is echter ook de alternatieve inhoud zichtbaar. Is dat wel het geval. wordt in plaats van de afbeelding slechts een leeg inline frame weergegeven. Het IMG element wordt door alle gangbare browsers zonder problemen ondersteund voor de verschillende typen afbeeldingen (zoals gif. . In Netscape Navigator 6. Microsoft Internet Explorer 5.5 Service Pack 2 en hoger ondersteunt geen Netscape plug-ins meer.0 t/m 5.0 en hoger is de ondersteuning correct. beschikken we al sinds lang over het IMG element.0 en hoger. maar ook allerlei andere multimedia objecten.0 biedt de mogelijkheid in plaats daarvan het OBJECT element te gebruiken. Voor geluidsfragmenten wordt alleen het bedieningspaneel weergegeven en dat heeft een breedte van 136 pixels en een hoogte van 16 pixels. De afmetingen die je moet aanhouden. In de nieuwste versies van de QuickTime Player kan de gebruiker instellen welke typen objecten ondersteund moeten worden.0 en hoger. Het bedieningspaneel van de QuickTime plug-in/control beschikt over een geluidsregelaar.

Wanneer je ondanks alle problemen in de weergave toch het OBJECT element wilt gebruiken. <P><OBJECT DATA="afbeeldingen/gezicht.B. Omdat de ondersteuning voor het CODEBASE attribuut minimaal is. worden deze voorbeelden geopend in een nieuw venster zonder schuifbalken. N. of het alternatief.gif" WIDTH="105" HEIGHT="125" . Belangrijkste reden is de weergave in Microsoft Internet Explorer. bij het type png "image/png" en bij het type jpg "image/jpeg". moet je in het DATA attribuut ook de verwijzing naar een andere directory opnemen. Wanneer je gebruik maakt van Microsoft Internet Explorer. maar het mag ook een ander object zijn.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.gif" WIDTH="105" HEIGHT="125" TYPE="image/gif" BORDER="0"> De browser ondersteunt het OBJECT element niet. maar voorlopig trouw te blijven aan het IMG element. Een uitgebreide toelichting op het IMG element wordt gegeven in het onderdeel Afbeeldingen. Hoewel het nieuwe venster en het object in het document in dat venster (de afbeelding dus) in principe niets met elkaar te maken hebben. <P><OBJECT DATA="afbeeldingen/gezicht. Wanneer JavaScript is toegestaan. Het TYPE attribuut maakt aan de browser bekend om wat voor type afbeelding het gaat. Wil je zien hoe de weergave van Microsoft Internet Explorer "normaal" is.png" WIDTH="105" HEIGHT="125" TYPE="image/png" BORDER="0"> <OBJECT DATA="afbeeldingen/gezicht. kun je dan een illustratie zien van de wijze waarop deze browser het OBJECT element geïmplementeerd heeft. Met het BORDER attribuut leg je vast of wel of geen rand om de afbeelding moet worden weergegeven. of kan de afbeelding niet insluiten. dan geef je met het DATA attribuut aan om welke afbeelding het gaat. zijn ook de schuifbalken verdwenen van het inline frame waarin de afbeelding wordt weergegeven. De browser mag slechts één van de objecten weergeven: of het object dat opgegeven is via het eerste OBJECT element. Bijvoorbeeld een gif-bestand voor als de browser geen pngbestanden ondersteunt. </OBJECT></P> Bekijk in een nieuw venster de weergave van de afbeeldingen in de typen gif of png. 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). dan moet je met de muis rechtsklikken op één van bovenstaande hyperlinks en kiezen voor 'Openen in nieuw venster'. Als je png-bestanden wilt gebruiken. Bij het type gif is de waarde "image/gif". In de voorbeelden hiervoor is een tekst als alternatieve inhoud van het OBJECT element opgenomen. De attributen WIDTH en HEIGHT bepalen de afmetingen van de afbeelding.

of kan de afbeelding niet insluiten.197.129. Mozilla en Firefox is de ondersteuning correct. Hierna worden enkele voorbeelden met het OBJECT element gegeven. Voor alle browsers geldt dat de eerder gemaakte opmerkingen ten aanzien van de ondersteuning van afbeeldingen ook voor de image map gelden.gif" USEMAP="#vormen" WIDTH="300" HEIGHT="150" TYPE="image/gif" BORDER="1"> De browser ondersteunt het OBJECT element niet.0. </OBJECT></P> <MAP NAME="vormen"> <AREA SHAPE="rect" COORDS="15. De ondersteuning van een oplossing met behulp van het OBJECT is veel beperkter: • • • • • Microsoft Internet Explorer 4. Een image map gemaakt met het IMG element wordt door alle gangbare browsers ondersteund.html" ALT="Veelhoek"> <AREA SHAPE="rect" COORDS="0.html" ALT="Rechthoek"> <AREA SHAPE="circle" COORDS="254.0 en hoger.html" ALT="Cirkel"> <AREA SHAPE="poly" COORDS="100. 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. Netscape Navigator 4 ondersteunt geen image maps via het OBJECT element.0 en hoger is de ondersteuning correct.84. .0 en hoger ondersteunt het USEMAP attribuut niet en geeft slechts de afbeelding weer. In Opera 7.TYPE="image/gif" BORDER="0"> De browser ondersteunt het OBJECT element niet.0 en hoger correct worden ondersteund. voeg je het USEMAP attribuut aan het OBJECT element toe. </OBJECT> </OBJECT></P> Bekijk in een nieuw venster welk(e) object(en) de browser weergeeft. kun je op een willekeurige plaats in het HTML-document opnemen.95. of kan de afbeelding niet insluiten. waarvan delen aanklikbaar zijn en je leiden naar een volgend document. 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 opbouw is hetzelfde als bij image maps via het IMG element.150" HREF="object/map1d.15.html" ALT="Geen vorm"> </MAP> Bekijk in een nieuw venster of de browser deze image map ondersteunt. Image maps Een image maps is een afbeelding. Opera 4 t/m 6 ondersteunt het USEMAP attribuut niet en geeft slechts de afbeelding weer.300.120.93" HREF="map1a.143" HREF="map1c.61. Een afbeelding wordt een image map.0 en hoger.75. welke alleen door Netscape Navigator 6.133.208. <P><OBJECT DATA="afbeeldingen/vormen. De "map" waarin de informatie over de image map staat.33" HREF="map1b. In Netscape Navigator 6. Mozilla.164. Om van een afbeelding een image map te maken. De algemeen ondersteunde oplossing met het IMG element wordt beschreven in het onderdeel Afbeeldingen. Firefox en Opera 7.

.gif" USEMAP="#vormen" WIDTH="300" HEIGHT="150" TYPE="image/gif" BORDER="1"></OBJECT></P> <MAP NAME="vormen"> <P><A SHAPE="rect" COORDS="15.93" HREF="map2a.html">Rechthoek</A> <A SHAPE="circle" COORDS="254.html">Cirkel</A> <A SHAPE="poly" COORDS="100. moeten browsers die de image map niet kunnen weergeven. Wanneer je de hyperlinks altijd wilt zien.300.15.61.15.html">Cirkel</A> <A SHAPE="poly" COORDS="100. <P><OBJECT DATA="afbeeldingen/vormen.html">Rest afbeelding</A></P> </MAP> </OBJECT></P> Bekijk in een nieuw venster of de browser deze image map ondersteunt.197. Als je de map als alternatieve inhoud van het OBJECT element opneemt.129.0.33" HREF="map3b.150" HREF="object/map2d.Een alternatieve manier om een image map te maken is die waarbij binnen het MAP element niet AREA gebruikt wordt.gif" USEMAP="#vormen" WIDTH="300" HEIGHT="150" TYPE="image/gif" BORDER="1"> <MAP NAME="vormen"> <P><A SHAPE="rect" COORDS="15.84.208.300.150" HREF="object/map3d. maar A.197. kun je de map ook buiten het OBJECT element plaatsen.75.133.61. Bekijk in een nieuw venster of de browser het insluiten van HTML-documenten ondersteunt.0.95. <P><OBJECT DATA="afbeeldingen/vormen.129.93" HREF="map3a.120.208.html">Rest afbeelding</A></P> </MAP> Van de weergave van dit voorbeeld is een schermafdruk gemaakt.95.html">Veelhoek</A> <A SHAPE="rect" COORDS="0.html">Rechthoek</A> <A SHAPE="circle" COORDS="254.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. een rijtje hyperlinks laten zien.84.120.164.143" HREF="map3c.75.html">Veelhoek</A> <A SHAPE="rect" COORDS="0.143" HREF="map2c.164. HTML-documenten HTML 4.33" HREF="map2b.133.

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.html" WIDTH="220" HEIGHT="150" TYPE="text/html"> De browser ondersteunt het OBJECT element niet. </IFRAME></P> Als je het OBJECT element gebruikt om een HTML-document in te sluiten. Het BORDER attribuut kun je (met de waarde "0") wel gebruiken om de rand om het object weg te laten. leg je met het DATA attribuut vast om welk document het gaat. Bij het IFRAME element leg je met het SRC attribuut vast welk document ingesloten moet worden. In Opera 4.0 en hoger is de ondersteuning correct.2 en hoger. of kan het HTML-document niet insluiten. met links de oplossing met het IFRAME element en rechts die met het OBJECT element. Mozilla.Het IFRAME element wordt ondersteund Microsoft Internet Explorer vanaf versie 3.0 en 6.1 ondersteunen geen HTML-documenten via het OBJECT element. maar niet om de dikte van de rand te bepalen. 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. Netscape Navigator vanaf versie 6. De attributen WIDTH en HEIGHT bepalen de afmetingen van het inline frame. Netscape Navigator 6. De attributen WIDTH. • • • Vooral vanwege de beperkte mogelijkheden van het vervangen van ingesloten HTML-documenten in Microsoft Internet Explorer.0.0.html" WIDTH="220" HEIGHT="150"> De browser ondersteunt het IFRAME element niet. wordt geadviseerd het IFRAME element te gebruiken. <P><OBJECT DATA="htmldoc02.0 en Opera vanaf versie 6. Mozilla en Firefox is de ondersteuning correct. . Met het BORDER attribuut leg je de dikte van de rand om het object vast. ook als het BORDER attribuut is opgenomen met de waarde "0". Hier wordt slechts een enkel voorbeeld opgenomen. 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. Netscape Navigator 4 ondersteunt geen HTML-documenten via het OBJECT element. Voor een uitgebreide toelichting op de mogelijkheden van inline frames wordt verwezen naar het onderdeel Frames. In Netscape Navigator 6. 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"). <P><IFRAME SRC="htmldoc01. </OBJECT></P> Van deze voorbeelden is een schermafdruk gemaakt. Het FRAMEBORDER attribuut geeft aan of er wel (de waarde "1") of geen (de waarde "0") rand om het frame geplaatst moet worden.

<A HREF="htmldoc08. Een deel van de tekst blijft daardoor onzichtbaar. .Bekijk in een nieuw venster of de browser het insluiten van HTML-documenten ondersteunt. wordt dit voorbeeld geopend in een nieuw venster zonder schuifbalken. </IFRAME></P> <P><OBJECT DATA="htmldoc05. Wanneer je gebruik maakt van Microsoft Internet Explorer. In Netscape Navigator 6. 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. Wanneer JavaScript is toegestaan. of kan het HTML-document niet insluiten. kun je gebruiken in het TARGET attribuut van de hyperlink. Firefox en Opera werkt het ook met een hyperlink in het hoofddocument of in een ander frame. maar het BORDER attribuut met de waarde "0" zorgt ervoor dat de rand verdwijnt. Opera plaatst standaard wel een 3-D rand. Mozilla en Netscape Navigator 6. N.B.2 en hoger plaatsen standaard geen rand. 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'. </OBJECT></P> De naam die je met het NAME attribuut aan een inline frame of object geeft. 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. is de verticale schuifbalk voor het OBJECT element (rechts) verdwenen. 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. Als je daarvoor een hyperlink in het hoofddocument of in een ander frame wilt gebruiken. Bij het inline frame (links) wordt de schuifbalk wel correct weergegeven. kun je in Microsoft Internet Explorer het ingesloten HTML-document alleen vervangen via een hyperlink in het ingesloten document zelf. Van de weergave van dit voorbeeld is een schermafdruk gemaakt.html" TARGET="obj">Document 3</A> Als je gebruik maakt van de oplossing met het OBJECT element.html" WIDTH="220" HEIGHT="150" TYPE="text/html" BORDER="0" NAME="obj"> De browser ondersteunt het OBJECT element niet. <P><IFRAME SRC="htmldoc03.html" WIDTH="220" HEIGHT="150" FRAMEBORDER="0" NAME="ifr"> De browser ondersteunt het IFRAME element niet. dan moet je het NAME attribuut toevoegen aan het IFRAME of het OBJECT element. Bij het OBJECT element plaatst Microsoft Internet Explorer altijd een 3-D rand. kun je dan een illustratie zien van de wijze waarop deze browser het OBJECT element geïmplementeerd heeft.2 en hoger. maar met het BORDER attribuut kun je aangeven dat je een vlakke rand van een bepaalde dikte wilt. Mozilla.

0 en hoger en in Mozilla is de ondersteuning correct. In Opera 5. . dan kun je het OBJECT element zonder problemen gebruiken voor Java applets. mits de erin opgenomen bestanden niet zijn gecomprimeerd. navigatiemogelijkheden en spelletjes. HEIGHT en CODETYPE opnemen en ervoor zorgen dat het gebruik van de attributen CODEBASE en ARCHIVE niet nodig is. 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. Het APPLET element wordt door alle gangbare zonder problemen ondersteund (mits in de instellingen van de browser de uitvoering van Java is toegestaan). Het is wel noodzakelijk de attributen WIDTH en HEIGHT op te nemen. In Netscape Navigator 6.Bekijk in een nieuw venster of de browser een ingesloten document kan vervangen. alleen moet in Opera 6 het CODETYPE attribuut zijn opgenomen (waarbij het overigens niet uitmaakt wat de waarde van het attribuut is). bijvoorbeeld teksteffecten. Java applets Een Java applet is een klein programma geschreven in de programmeertaal Java. Wat betreft de ondersteuning van het OBJECT element valt het volgende op te merken: • In Microsoft Internet Explorer 4.class".0 en hoger is de ondersteuning correct. waardoor het applet niet als archief-bestand kan worden opgenomen. 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. Een applet kan op allerlei manieren extra functionaliteit op een webpagina bieden. Een Java applet bestaat uit minimaal één bestand met de extensie ". De bestanden die samen het applet vormen kunnen ook opgenomen worden in een archief-bestand. • • • Wanneer je accepteert dat het applet niet wordt weergegeven in Netscape Navigator 3 en Opera 4. Indien als alternatieve inhoud een tweede OBJECT element is opgenomen. Je moet dan wel de attributen WIDTH. Bovendien wordt het ARCHIVE attribuut niet ondersteund. Het standaard archiefformaat voor Java bestanden is "jar" (Java ARchive).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. maar toont in sommige versies ook de alternatieve inhoud. Het insluiten van Java applets met behulp van het OBJECT element wordt niet ondersteund door Opera 4.0 en hoger is de ondersteuning correct. HTML 4. maar ook gewone zip-bestanden worden ondersteund.

. voor als de browser Java niet ondersteunt of de ondersteuning door de bezoeker is uitgezet. welke deel uitmaken van het applet. omdat alle benodigde bestanden in één keer aangevraagd worden. met het VALUE attribuut wordt de waarde vastgelegd.\neen groot aantal voorbeelden. Het CODEBASE attribuut gebruik je."> <PARAM NAME="line2" VALUE="<20><typed>Met de nieuwste mogelijkheden. Het CODEBASE attribuut wordt aan het APPLET element toegevoegd. De afmetingen van het applet moeten worden vastgelegd met de attributen WIDTH en HEIGHT.gif" WIDTH="274" HEIGHT="99" ALT="" BORDER="0"> </APPLET></P> Bekijk in een nieuw venster hoe het applet wordt weergegeven.\nde ondersteuning door browsers\nen Cascading Style Sheets.Wanneer je het APPLET element gebruikt om een Java applet in een document in te sluiten. maar de erin opgenomen bestanden mogen niet gecomprimeerd zijn. met als waarde de naam van het archief-bestand. dan geef je met het CODE attribuut aan om welke applet het gaat. Het archief-bestand is een zip-bestand. Dat gebeurt met behulp van het PARAM element. In het volgende voorbeeld is met behulp van het IMG element als alternatieve inhoud een bewegende afbeelding (animated gif) opgenomen. Of en welke parameters gebruikt kunnen of moeten worden. hangt af van het applet. kunnen ook opgenomen worden in een archief-bestand. Vaak moet voor het applet voor één of meer parameters een waarde opgegeven worden. Tussen de activering en de beëindiging van het APPLET element kan na de benodigde PARAM elementen ook een alternatieve inhoud opgenomen worden. <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. Als voorbeeld wordt gebruik gemaakt van het iScroll applet.class) mag worden weggelaten. 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. waarbij de extensie (. Wanneer de browser Java niet ondersteunt.\nbij het maken van HTML-pagina's. De PARAM elementen worden geplaatst binnen het APPLET element. als het applet zich niet in dezelfde directory als het document bevindt. Het NAME attribuut geeft aan om welke parameter het gaat. Alleen de bestandsnaam wordt opgenomen. Door het gebruik van een archief-bestand kan de downloadtijd beperkt blijven. Het geeft aan waar (in welke subdirectory) het applet gevonden kan worden."> <IMG SRC="applet1. als het archief-bestand zich niet in dezelfde directory als het document bevindt. Aan het APPLET element wordt in dat geval het ARCHIVE attribuut toegevoegd .

De naam van het object wordt daarbij voorafgegaan door de aanduiding dat de gebruikte methode "java" is (en niet bijvoorbeeld "http") en de extensie ". De verschillende PARAM elementen worden geplaatst binnen het OBJECT element. Welke parameters gebruikt kunnen of moeten worden.</OBJECT></P> Bekijk in een nieuw venster of het Java applet wordt weergegeven.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. Met het CODETYPE geef je aan om wat voor soort object het gaat.zip"> <PARAM NAME="Notice" VALUE="Applet by www. om aan te geven waar de bestanden zich bevinden. met het VALUE attribuut wordt de waarde vastgelegd.class" wordt nu wel opgenomen."> <PARAM NAME="line2" VALUE="<20><typed>Met de nieuwste mogelijkheden. Wanneer je het OBJECT element gebruikt om een Java applet in te sluiten. Bijvoorbeeld in de subdirectory "applet": <P><OBJECT CLASSID="java:FunScroll. vóór een eventuele alternatieve inhoud. De parameters voor het Java applet worden vastgelegd met behulp van het PARAM element. Bekijk in een nieuw venster of het Java applet wordt weergegeven.class" WIDTH="275" HEIGHT="75" CODETYPE="application/java"> <PARAM NAME="message" VALUE="Handleiding HTML"> De browser ondersteunt het OBJECT element niet. moet je het CLASSID attribuut opnemen om te specificeren om welk object het gaat. hangt af van het applet."> <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. Het NAME attribuut geeft aan om welke parameter het gaat.com"> <PARAM NAME="Text" VALUE="Handleiding HTML .\neen . moet je het CODEBASE attribuut opnemen. of kan het Java applet niet insluiten.<P><APPLET CODE="iscroll" CODEBASE="applet-zip/" WIDTH="480" HEIGHT="30" ARCHIVE="iscroll. Wanneer het applet zich niet in dezelfde directory bevindt als het HTML-document.CodeBrain.\nbij het maken van HTML-pagina's.een onmisbare hulp op het gebied van HTML en CSS . <P><OBJECT CLASSID="java:Bounce.

wordt echter een leeg inline frame weergegeven."> <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. 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. Ook bij het OBJECT element kun je het applet in een archief-bestand plaatsen: <P><OBJECT CLASSID="java:iscroll.com. Voor de oplossing met de Netscape plug-in geldt het volgende: • Microsoft Internet Explorer versie 4. maar in enkele subversies alleen als het TYPE attribuut is opgenomen. Het in de voorbeelden gebruikte FunScroll applet is ontwikkeld door Jan Andersson. 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 geïnstalleerd is op het systeem van de bezoeker. behalve door de nieuwste versies van Microsoft Internet Explorer. als auteur ben je daarvan echter niet op de hoogte). Voor Internet . Het EMBED element is niet opgenomen in HTML 4. QuickTime filmpjes Voor het insluiten van QuickTime filmpjes heb je de beschikking over de elementen EMBED en OBJECT. of kan het Java applet niet insluiten.0 t/m 5.een onmisbare hulp op het gebied van HTML en CSS .5 Service Pack 2 en hoger ondersteunt geen Netscape plug-ins meer.com"> <PARAM NAME="Text" VALUE="Handleiding HTML . Het insluiten van QuickTime filmpjes met behulp van het EMBED element wordt door alle gangbare browsers ondersteund. Bij beide elementen kun je gebruik maken van een zogenaamde Netscape plug-in. of kan het Java applet niet insluiten.0. Microsoft Internet Explorer 5. het OBJECT element wel.</OBJECT></P> Bekijk in een nieuw venster of het Java applet wordt weergegeven. bij het OBJECT element daarnaast ook van een ActiveX control. Omdat Microsoft Internet Explorer de attributen CODEBASE en ARCHIVE niet ondersteund. Omdat Microsoft Internet Explorer 5.class" CODEBASE="applet-zip/" WIDTH="480" HEIGHT="20" CODETYPE="application/java" ARCHIVE="iscroll."> De browser ondersteunt het OBJECT element niet. In plaats van de alternatieve inhoud van het OBJECT element.zip"> <PARAM NAME="Notice" VALUE="Applet by www.5 ondersteunt het object correct. 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 iScroll applet door CodeBrain.groot aantal voorbeelden.5 Service Pack 2 en hoger geen Netscape plug-ins meer ondersteunt.CodeBrain.</OBJECT></P> Bekijk in een nieuw venster of het Java applet wordt weergegeven.\nde ondersteuning door browsers\nen Cascading Style Sheets.

Bij het EMBED element bepaalt het SRC attribuut welk filmpje ingesloten moet worden. In het laatste geval is de werking hetzelfde als bij Internet Explorer 5.• • • Explorer 5.cab"> <PARAM NAME="src" VALUE="test.. HEIGHT bepalen de afmetingen van het object (filmpje en bedieningspaneel). Indien geen afmetingen worden opgegeven. dat ervoor zorgt dat andere browsers de QuickTime plug-in kunnen gebruiken. In Netscape Navigator 6. omdat sommige browsers anders het object niet of niet volledig weergeven. Deze attributen moet je opnemen.com/qtactivex/qtplugin.5 Service Pack 1 geldt hetzelfde als voor versie 4. <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www. dat niet tot HTML 4.. 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.0 behoort. houdt Netscape Navigator 4 50x50 pixels aan.mov"> . 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 PARAM element gebruik je om aan te geven om welk QuickTime filmpje het gaat.apple. Je moet bij deze oplossing wel voor lief nemen dat je gebruik maakt van een element. Het is belangrijk dit attribuut altijd . tenzij de Security update Q321232 van 15 mei 2002 geïnstalleerd is.5. De attributen WIDTH. Ten behoeve van Microsoft Internet Explorer geef je met behulp van het OBJECT element aan dat de QuickTime ActiveX control gebruikt moet worden. Netscape Navigator 4 geeft het filmpje zelf goed weer. Het TYPE attribuut maakt aan de browser bekend om wat voor type object het gaat..0 en hoger. dan is er slechts één oplossing: een combinatie van de elementen OBJECT en EMBED. maar toont in sommige versies ook de alternatieve inhoud.0 t/m 5.0 en hoger. Mozilla en Firefox is de ondersteuning correct. Bekijk in een nieuw venster of het QuickTime filmpje wordt weergegeven. houdt Netscape Navigator 6 240x200 pixels aan. </OBJECT></P> Van de weergave van dit voorbeeld is een schermafdruk in Microsoft Internet Explorer gemaakt.5 Service Pack 2. terwijl in Netscape Navigator 7. Als alternatieve inhoud van het OBJECT element neem je EMBED element op. 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. Mozilla en Firefox niets zichtbaar is. Het CODEBASE attribuut legt vast waar het QuickTime ActiveX control gevonden kan worden. De waarden van deze drie attributen zijn voor alle filmpjes hetzelfde. Indien geen afmetingen worden opgegeven. Wanneer je er verzekerd van wilt zijn dat QuickTime filmpjes in alle browsers goed worden weergegeven.

com/quicktime/download/"></EMBED> </OBJECT></P> Voor QuickTime filmpjes bestaan er een aantal mogelijkheden om de weergave te regelen. omdat sommige browsers het object alleen kunnen insluiten als het juiste type is opgegeven.com/qtactivex/qtplugin. Om het QuickTime filmpje door alle browsers te laten weergeven. terwijl je aan het EMBED element een aantal plug-in specifieke attributen moet toevoegen. In het volgende voorbeeld zijn enkele van deze mogelijkheden toegepast. kun je het PLUGINSPAGE attribuut opnemen om aan te geven waar de plug-in verkregen kan worden.com/qtactivex/qtplugin. Om dezelfde mogelijkheden te benutten bij de alternatieve inhoud voeg je aan het EMBED element de attributen AUTOPLAY en VOLUME toe. <EMBED SRC="test.apple.mov"> <PARAM NAME="autoplay" VALUE="false"> <PARAM NAME="volume" VALUE="25"> <EMBED SRC="test. 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. Ten behoeve van browsers die gebruik maken van het EMBED element. Voor het OBJECT element doe je dat door het opnemen van extra PARAM elementen. <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.cab"> <PARAM NAME="src" VALUE="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. Voor een uitgebreid overzicht van de verschillende mogelijkheden kun je op de site van QuickTime terecht.apple.cab"> <PARAM NAME="src" VALUE="test.apple. Indien dat niet het geval is.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" PLUGINSPAGE="http://www.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" PLUGINSPAGE="http://www.com/quicktime/download/" AUTOPLAY="false" VOLUME="25"></EMBED> </OBJECT></P> Bekijk het QuickTime filmpje in een nieuw venster.cab"> <PARAM NAME="src" VALUE="test.apple.apple. QuickTime filmpjes kunnen alleen worden weergeven als de QuickTime player geïnstalleerd is.op te nemen.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime"></EMBED> </OBJECT></P> Bekijk in een nieuw venster of de browser het QuickTime filmpje kan weergeven. wordt in Microsoft Internet Explorer gevraagd of dat alsnog moet gebeuren. 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. <P><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.com/qtactivex/qtplugin.mov"> <EMBED SRC="test.mov"> <EMBED SRC="test.

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 geïnstalleerd is op het systeem van de bezoeker; hoewel de kans daarop groot is, omdat het control meestal gelijk met Microsoft Internet Explorer geïnstalleerd 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 geïnstalleerd 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 geïnstalleerd 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 geïnstalleerde 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 beïnvloed 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 geïnstalleerd, 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 geïnstalleerd, 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 beïnvloeden 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

is een script niet gecompileerd en moet de code direct door de browser geïnterpreteerd worden. </SCRIPT> . Vaak zul je een script direct binnen een document opnemen. In tegenstelling tot gewone programma's of bijvoorbeeld Java applets. Wanneer je extra informatie aan het script wilt toevoegen. het klikken op een hyperlink en muisbewegingen. Bijvoorbeeld het openen of sluiten van een document. background-color: white. Bovendien is het verstandig de scriptcode voor deze browsers te verbergen. Met het gebruik van deze laatste waarden moet voorzichtig omgegaan worden. maar het is ook mogelijk het in een extern scriptdocument te plaatsen. Bekende voorbeelden zijn het openen van nieuwe browservensters. Om aan de browser bekend te maken om welke scripttaal het gaat. Daarnaast kunnen in het onderdeel JavaScript voorbeelden enkele veel gevraagde toepassingen bekeken worden.2". Als je aan de bezoeker kenbaar maken wat hij/zij mist. moet je de attributen TYPE en LANGUAGE opnemen. Als waarden voor het LANGUAGE attribuut kunnen bijvoorbeeld "JavaScript" of "VBScript" gebruikt worden.<\/P>"). omdat een browser die de waarde niet kent. moet je voorlopig in ieder geval ook het LANGUAGE attribuut opnemen.write("<P STYLE=\"color:red. maar ook als reactie op een door de gebruiker veroorzaakte gebeurtenis. zijn hier toch enkele voorbeelden opgenomen.1" en Netscape Navigator 4 bovendien de waarde "JavaScript1. Niet elke browser ondersteunt scripts en niet elke bezoeker heeft de ondersteuning voor scripts ingeschakeld.0 geïntroduceerde TYPE attribuut reeds ondersteunen.Een script is programmacode. Het volgende voorbeeld betreft een JavaScript in de body van het document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> document.1 of JavaScript1. Het SCRIPT element kan worden gebruikt om een script te definiëren. Scripts kunnen automatisch uitgevoerd worden als de browser ze tegenkomt in het document.2 gebruikt zijn en doet Netscape Navigator 3 dit niet als de waarde JavaScript1. Hoewel het programmeren van scripts buiten het bestek van de Handleiding HTML valt. het vervangen van meerdere frames tegelijkertijd en berichten in de statusbalk. voor VBScript "text/vbscript". Voor JavaScript is het MIME type "text/javascript". In dat laatste geval gebruik je het SRC attribuut om aan te geven om welk scriptdocument het gaat. Omdat lang niet alle gangbare browsers het in HTML 4. Zo voeren Microsoft Internet Explorer 3 en Netscape Navigator 2 het script echter niet uit als de waarden JavaScript1. neem je met het NOSCRIPT element een no-script sectie op. Netscape Navigator 3 en 4 ondersteunen daarnaast de waarde "JavaScript1. Omdat er meerdere scripttalen bestaan (waarvan JavaScript de bekendste is).\">Deze browser ondersteunt JavaScript. font-size: 16px. Je kunt van deze mogelijkheid gebruik maken. maar soms is het nodig het in de body op te nemen. door attributen aan elementen toe te voegen. waarmee je extra mogelijkheden aan je HTML-documenten toe kunt voegen. moet aan het SCRIPT element minimaal het TYPE attribuut worden toegevoegd. kun je dat doen in de vorm van commentaar. welke reageren op die gebeurtenissen. om aan de browser kenbaar te maken om welke taal het gaat. het script negeert. Script binnen document Het SCRIPT element kun je gebruiken als je een script in het document wilt opnemen. Meestal plaats je het in de head. Met dit TYPE attribuut specificeer je het zogenoemde Internet Media (MIME) type van de scripttaal. bijvoorbeeld JavaScript of VBscript (Visual Basic). Het SCRIPT element mag meerdere malen in het document voorkomen.2 gebruikt is. dat door de browser uitgevoerd moet worden.

Hoe je dat doet. //--> </SCRIPT> Voor VBScript is de opbouw de volgende: <SCRIPT TYPE="text/vbscript" LANGUAGE="VBScript"> <!-.. • In het volgende voorbeeld zijn voor JavaScript de verschillende mogelijkheden te zien: . wordt deze meestal tussen de HTML-code voor commentaar (<!-. '--> </SCRIPT> Commentaar in script Soms wil je binnen het SCRIPT element commentaar opnemen. Daarom is ook voor de aanhalingstekens bij het STYLE attribuut van het P element het escape teken geplaatst.write methode mag in het document niet onderbroken worden door een harde overgang naar de volgende regel... De beëindiging van het commentaar moet je bij JavaScript door twee slashes (//) en bij VBScript door een enkele quote (') vooraf laten gaan. laat je het vooraf gaan door een slash gevolgd door een asterisk (/*) en eindigen met een asterisk gevolgd door een slash (*/). Omdat de tekenreeks van de document. zodat deze vervolgens binnen het script weer als commentaar wordt gezien (zie bij Commentaar in script). Op de plaats waar het script in het document staat.-->) geplaatst. hangt af van de gebruikte scripttaal. als het commentaar niet op de huidige regel past. wanneer het commentaar doorloopt over meerdere regels. als je het commentaar in kleinere delen splitst.De backslash in <\/P> is een zogenaamd escape teken. kun je van deze mogelijkheid alleen gebruik maken.. dat moet worden toegevoegd. script-code . Verbergen inhoud script Om te voorkomen dat browsers die het SCRIPT element niet ondersteunen de inhoud ervan (de scriptcode) weergeven als tekst. script-code .write methode geplaatst is tussen dubbele aanhalingstekens.. plaats je voor het commentaar twee slashes (//).. bijvoorbeeld om het copyright vermelden. geeft een browser die JavaScript ondersteunt het volgende weer: Deze browser ondersteunt JavaScript. kun je direct na de tekens "<!--" commentaar over één regel plaatsen. of om de code toe te lichten. kunnen deze niet gelijktijdig binnen de tekenreeks zelf gebruikt worden.. wanneer je het commentaar elders in het script wilt plaatsen en het op de huidige regel past. omdat de inhoud van het SCRIPT element als beëindigd wordt beschouwd na de eerste keer dat de tekens "</" voorkomt. Voor JavaScript wordt de opbouw als volgt: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-. Bij JavaScript heb je de volgende mogelijkheden: • • wanneer je de inhoud van het script hebt verborgen voor browsers die het SCRIPT element niet ondersteunen. De tekst ingesloten door de haakjes van de document..

wordt niet weergegeven door Netscape Navigator 3.. of van verschillende mogelijkheden geen gebruik kunnen maken. if (navigator. Omdat Internet Explorer 3 crasht op externe scripts die proberen in het document te schrijven (via document. // Einde verbergen voor oudere browsers --> </SCRIPT> In VBScript laat je commentaar per regel voorafgaan door een enkele quote ('). maar ook dan nog kunnen bezoekers van je pagina's de ondersteuning uitgezet hebben. geeft een browser die externe scripts ondersteunt het volgende weer: Dit is een voorbeeld van het gebruik van een extern scriptdocument. geven de inhoud van het . background-color: white. } Op de plaats waar het script in het document staat.0 en Opera vanaf versie 3.write("<P STYLE=\"color:red.write).0 en hoger.Begin verbergen voor oudere browsers // Dit is commentaar dat op één regel past /* Dit commentaar beslaat meerdere regels */ . voeg je het SRC attribuut aan het SCRIPT element toe.. Microsoft Internet Explorer 3. font-size: 16px. Dat betekent dat sommige bezoekers van je pagina's een deel van de inhoud niet zien.</NOSCRIPT> De tekst.0 en hoger en Opera 3. is aangegeven dat het script in het voorbeeld in deze browser niet uitgevoerd moet worden. Je kunt ze daarop wijzen door in de body van het document het NOSCRIPT element op te nemen..0 en Opera vanaf versie 3.\">Dit is een voorbeeld van het gebruik van een extern scriptdocument.. Browsers die het gebruik van scripts niet ondersteunen. Om aan te geven om welk scriptdocument het gaat. Extern scriptdocument Netscape Navigator vanaf versie 3.userAgent.0.js" TYPE="text/javascript" LANGUAGE="JavaScript"></SCRIPT> Het externe scriptdocument bevat uitsluitend de code van het script (dus geen <SCRIPT> </SCRIPT>).<\/P>").0. Die ondersteuning wordt wel geboden door Netscape Navigator vanaf versie 2. Bijvoorbeeld: <SCRIPT SRC="voorbeeld. <NOSCRIPT>Uw browser ondersteunt het gebruik van scripts niet .0 ondersteunen de mogelijkheid om een extern scriptdocument te gebruiken. Microsoft Internet Explorer vanaf versie 3. Script niet ondersteund Niet elke browser ondersteunt het gebruik van scripts.indexOf("MSIE 3") == -1) { document.0. die je plaatst tussen de activering en de beëindiging van het NOSCRIPT element.<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-.0 en hoger. Microsoft Internet Explorer vanaf versie 3.

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

'voorbeeld'.. om aan de browser kenbaar te maken om welke scripttaal het gaat.height=240'). Het doel was het op een goede manier ontsluiten van informatie. <BODY onload="StatusbalkTekst('Copyright 1995-2006 Hans de Jong. welke optreedt als een document geopend wordt. geciteerde tekst en adresgegevens.html" TARGET="voorbeeld" onclick="window. setTimeout("erase()". moet je het META element met de attributen HTTP-EQUIV en CONTENT gebruiken. .UpdateNavigatieFrame(). Wel zouden de verschillende elementen waaruit HTML is opgebouwd.<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function BeweegMuisOp(txt) { window.." onmouseover="BeweegMuisOp('Bekijk . } function erase() { window. Bijvoorbeeld door vast te leggen dat het bij blokken tekst gaat om koppen van verschillend gewicht. Als voorbeeld is dat gedaan met de hiervoor gebruikte gebeurtenissen click en mouseover: <A HREF="script-vb. 'width=280. Bij de weergave van de documenten ging het niet om het bieden van een mooie. structuur aan een document moeten geven.html'.return true. welke op verschillende platforms toegankelijk zijn.').open('scriptvb. } //--> </SCRIPT> Aan een element kun je meerdere gebeurtenissen koppelen. 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. venster').status = txt. worden twee functies geactiveerd. de tweede dat gelijktijdig een document in een ander frame geopend wordt. om paragrafen."> </BODY> Wanneer je een compleet script als waarde van een gebeurtenis-attribuut opneemt. In het volgende voorbeeld van de load gebeurtenis. Of door (met de elementen voor logische tekstopmaak) te bepalen dat tekst met nadruk wordt weergeven (cursief of vet).return false. door de auteur geheel vastgelegde lay-out.status="".">Klik op deze hyperlink</A> Klik op deze hyperlink Aan een gebeurtenis kun je meerdere acties koppelen. De eerste zorgt ervoor dat er een bericht in de statusbalk wordt weergegeven. of als computercode.3000).

of nieuwe stijlen te definiëren. Dit maakt het voor de auteur een stuk eenvoudiger wijzigingen aan te brengen in een eenmaal vastgelegde stijl. 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. hebben onder andere betrekking op het lettertype en de lettergrootte. 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). maar ook de browser-specifieke elementen als BLINK. de horizontale en verticale uitlijning. MULTICOL. de presentatie wordt bepaald met behulp van stijlen. FACE en ALIGN. waarin HTML in eerste instantie vooral werd gebruikt. Wanneer de auteur iets aan een gebruikte • . Webauteurs zelf gebruikten hun creativiteit om met bestaande HTML-elementen meer invloed op de opmaak van hun documenten te krijgen. Als oplossing voor deze problemen zijn stijlen geïntroduceerd. maar slechts binnen één document. is Cascading Style Sheets (CSS).In de wetenschappelijke wereld. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet zoals oorspronkelijk bedoeld weer zorgen voor de structuur van het document. Stijlen worden gedefinieerd met behulp van speciale talen. Op deze behoefte is door de ontwikkelaars van browsers (vooral Netscape en Microsoft) ingespeeld door het introduceren van nieuwe elementen en attributen. SPACER en MARQUEE. In dit onderdeel komt vooral aan de orde op welke wijze je stijlen met HTML kunt verbinden. De stijlen die je met CSS kunt definiëren. In de HTML-documenten volstaat het met behulp van het LINK element een eenvoudige verwijzing naar het stijlblad te maken. Tenslotte wordt ingegaan op het gebruik van alternatieve stijlbladen. Dat moet dan bovendien op een flexibele en makkelijk beheersbare manier. Een uitgebreide beschrijving van de mogelijkheden is te vinden in het CSS-gedeelte van de Handleiding HTML. de kleur van de tekst en de achtergrond. dan kunnen de stijlregels met het STYLE element in een ingesloten stijlblok in de head van het document geplaatst worden. een inline stijl worden vastgelegd wanneer een stijl vaker gebruikt wordt en/of voor meer elementen. Daarbij is het idee dat stijlen niet alleen gebruikt worden als vervanging van huidige opmaakmogelijkheden. de vormgeving van lijsten en tabellen en de plaats van elementen in het venster van de browser. In plaats van elke keer dat een element in een document gebruikt wordt een inline stijl te moeten wijzigen of toevoegen. De enige taal die door de meest gebruikte actuele browsers ondersteund wordt. COLOR. dan kunnen deze het beste in een apart document worden opgenomen: een extern stijlblad. BGCOLOR. Met de toegenomen verbreding in het gebruik van Internet ontstond bij webauteurs echter de behoefte aan meer mogelijkheden bij de opmaak van documenten. 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. De verstrengeling van structuur en presentatie kent niet alleen voordelen. het stijlblok en het extern stijlblad. 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. Achtereenvolgens komen aan de orde inline stijlen. maar veel meer gaan bieden. Bijvoorbeeld de later in HTML opgenomen elementen CENTER en FONT en attributen als SIZE. Zeker de browser-specifieke elementen en attributen. 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. het inspringen van tekst. dan kan door het toevoegen van het STYLE attribuut aan een element. voldeed de genoemde wijze van presenteren uitstekend. Daarna wordt het gebruik van de attributen CLASS en ID en de elementen DIV en SPAN toegelicht.

. . In dat geval kan gebruik gemaakt worden van respectievelijk de elementen DIV en SPAN.stijl wil wijzigen. background-color: white. Een stijlblok heeft de volgende opbouw: <HEAD> <STYLE TYPE="text/css"> stijlregels </STYLE> . Soms geldt een stijl voor een groter deel van een document. Je doet dat door het STYLE attribuut toe te voegen aan het element."> </H1> Wanneer in een document gebruik gemaakt wordt van inline stijlen. Het koppelen van zo'n stijl aan een element in het HTML-document vindt plaats via de attributen CLASS en ID van dat element. In een stijlblok of stijlblad kunnen naast stijlen voor bepaalde elementen ook stijlen gedefinieerd worden. Voor Cascading Style Sheets is dat "text/css". Om dat te voorkomen. Als waarde van het STYLE attribuut neem je de stijldeclaratie op. kun je gebruik maken van een inline stijl. dat het Internet Media (MIME) type definieert van het bestand waarnaar verwezen wordt. maar slechts op één plaats in het stijlblad te worden aangebracht. Het STYLE element mag een onbeperkt aantal malen opgenomen worden in een document. 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. Hiervoor wordt gebruik gemaakt van het STYLE element.. </HEAD> Een browser die het STYLE element niet kent. zou de inhoud moeten negeren. dan moet aangegeven worden welke style sheet taal gebruikt wordt. kunnen bij Cascading Style Sheets de stijlregels binnen de code voor commentaar geplaatst worden. kunnen worden opgenomen in een stijlblok. waarvan je de opmaak van de ingesloten inhoud wilt bepalen. dat geplaatst wordt in de head van dat document. waarin de gewenste stijl is vastgelegd: <Element STYLE="stijldeclaratie"> In het volgende voorbeeld wordt met een inline stijl vastgelegd. hoeft de wijziging niet in elk document afzonderlijk. Dat doe je door het META element in de head van het document te plaatsen met de attributen HTTP-EQUIV en CONTENT. Aan het STYLE element wordt minimaal het TYPE attribuut toegevoegd. soms juist voor een kleiner deel. welke alleen in specifieke situaties toegepast moeten worden. dat de tekst ingesloten door het betreffende H1 element in rood moet worden weergegeven. Zeker bij oudere browsers is dat niet het geval en bestaat de kans dat de stijlregels als normale tekst worden weergegeven. <H1 STYLE="color: red. Niet altijd heeft een stijl betrekking op een element. Inline stijlen Wanneer een stijl slechts een enkele keer in een document wordt toegepast.

background-color: #336699. font-size: larger. Voor het eerste stijlblok is het MEDIA attribuut niet opgenomen en dat moet dus gebruikt worden bij de weergave op het scherm. In het laatste geval kan de stijl aan een element gekoppeld worden via onder meer de attributen CLASS en ID. font-family: serif. 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). Voor het tweede stijlblok geldt MEDIA="print" en dat moet toegepast worden bij het afdrukken van het document. background-color: #FFFFFF. monospace. color: #000000. In het volgende voorbeeld bevat een stijlblok bevat een viertal stijlregels. "print" (voor de weergave in pagina-opmaak bij het afdrukken of als printpreview) en "aural" (voor de weergave door een spraaksynthesizer).code { font-family: "Courier New". } H1 { color: #FFFFFF. om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. Een toelichting op het gebruik van deze attributen wordt gegeven in het onderdeel CLASS en ID. <STYLE TYPE="text/css"> <!-BODY { font-family: Arial. sans-serif. <STYLE TYPE="text/css"> <!-P { font-style: italic. Dat kan een element zijn. Als waarden (media beschrijvers) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm). 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). maar bijvoorbeeld ook een specifiek voorkomen van een element. Helvetica.<STYLE TYPE="text/css"> <!-stijlregels --> </STYLE> De stijlregels in het stijlblok zijn bij Cascading Style Sheets opgebouwd volgens het selectormechanisme. font-family: sans-serif. } #xyz987 { color: #FF0000. In de eerste twee stijlregels is een element de selector (we spreken dan over een element-selector). Courier. } --> </STYLE> Aan het STYLE element kan het MEDIA attribuut worden toegevoegd. De standaardwaarde van het MEDIA attribuut is "screen". De selector bepaalt op welk deel van een document de stijl betrekking heeft. } --> </STYLE> <STYLE TYPE="text/css" MEDIA="print"> <!-P { font-style: normal. dat beschreven wordt in het onderdeel Selectors. In het volgende voorbeeld zijn in de head van een document twee stijlblokken geplaatst. } --> </STYLE> . } . Dat betekent dat de browser bij het ontbreken van het MEDIA attribuut de stijlen alleen op het scherm moet weergeven. background-color: #FFFFFF.

css"). background-color: #336699. <STYLE TYPE="text/css" MEDIA="screen.0 negeren het MEDIA attribuut van het STYLE element voor een @import-regel.Bekijk in een nieuw venster of de browser het MEDIA attribuut ondersteunt. Het volgende voorbeeld laat de @import-regel zien voor het importeren van een stijlblad dat de naam "basis. 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. H1 {color: #FFFFFF. De stijlen uit een geïmporteerd stijlblad worden door deze browsers voor alle apparaten weergegeven. Een uitgebreide toelichting over de @import-regel en informatie over de ondersteuning door browsers wordt gegeven in het CSS-gedeelte van deze handleiding. print"> <!-P { font-family: sans-serif. Indien meerdere stijlbladen geïmporteerd worden en in meerdere van deze stijlbladen stijlen betrekking hebben op hetzelfde element. Wanneer een stijlblok op meerdere apparaten betrekking heeft. moet door de browser genegeerd worden. Deze mogelijkheid is daarmee een alternatief voor de constructie waarbij het LINK element een extern stijlblad met een HTML-document verbindt. Een stijlblok met een @import-regel en een gewone stijlregel ziet er bijvoorbeeld als volgt uit: <STYLE TYPE="text/css"> <!-@import url("stijl/basis. Een stijlblok mag meerdere @import-regels bevatten en daarnaast ook gewone stijlregels. } --> </STYLE> Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund. De @import-regel wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4. Voor gewone stijlregels in hetzelfde stijlblok wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden. De @importregels moeten echter altijd vóór de gewone stijlregels geplaatst worden.5 en Opera t/m versie 7. Microsoft Internet Explorer t/m versie 5.css" heeft en zich in een subdirectory met de naam "stijl" bevindt: @import url("stijl/basis. dan worden meerdere waarden voor het MEDIA attribuut opgenomen. 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.css"). gescheiden door een komma. } --> </STYLE> Gewone stijlregels hebben (als ze betrekking hebben op hetzelfde element) prioriteit boven de stijlregels uit een geïmporteerde stijlblad. Een @import-regel die na een gewone stijlregel is geplaatst. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde. . dan wordt de stijl uit het laatste geïmporteerde stijlblad aangehouden.

Dat kan een element zijn. REL en TYPE toegevoegd. Bij Cascading Style Sheets gaat het om een bestand. dat beschreven wordt in het onderdeel Selectors. monospace. Dat betekent dat de browser bij het ontbreken van het MEDIA attribuut de stijlen alleen op het scherm moet weergeven. BODY H1 . Het volgende voorbeeld van een stijlblad bevat een viertal stijlregels. Het TYPE attribuut definieert het Internet Media (MIME) type van het bestand waarnaar verwezen wordt. In het volgende voorbeeld wordt een extern stijlblad aan een HTML-document gekoppeld. De verwijzing vanuit een HTML-document naar een stijlblad gebeurt met behulp van het LINK element. 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). maar uitsluitend stijlregels. om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. sans-serif. dat wordt opgenomen in de head van het document.Extern stijlblad Een extern stijlblad is een document. } { color: #FF0000. waarin stijlen zijn beschreven waarvan in één of meer HTMLdocumenten gebruik gemaakt kan worden. font-size: larger. } Het MEDIA attribuut kan aan het LINK element toegevoegd worden.. background-color: #FFFFFF. Bij Cascading Style Sheets zijn deze stijlregels opgebouwd volgens het selector-mechanisme. Aan het LINK element worden in ieder geval de attributen HREF. "print" (voor de weergave in pagina-opmaak bij het afdrukken of als printpreview) en "aural" (voor de weergave door een spraaksynthesizer).css" REL="stylesheet" TYPE="text/css"> . background-color: #336699. Als waarden (media beschrijvers) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm). Het HREF attribuut specificeert welk stijlblad geopend moet worden. } { font-family: "Courier New". Helvetica. maar bijvoorbeeld ook een specifiek voorkomen van een element.css" en bevindt zich in een subdirectory met de naam "stijl". De standaardwaarde van het MEDIA attribuut is "screen". Voor Cascading Style Sheets is dat "text/css". <HEAD> <LINK HREF="stijl/basis. In het volgende voorbeeld worden de stijlregels in het stijlblad alleen toegepast bij het afdrukken: <LINK HREF="stijl/afdrukken. Het stijlblad heeft de naam "basis. </HEAD> Een stijlblad bevat geen HTML-code. } { color: #FFFFFF. color: #000000. Een toelichting op het gebruik van deze attributen wordt gegeven in het onderdeel CLASS en ID.css" REL="stylesheet" TYPE="text/css" MEDIA="print"> . Het LINK element mag een onbeperkt aantal malen opgenomen worden in een document.. 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). Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. waarvan de bestandsnaam de extensie "css" heeft. background-color: #FFFFFF. Courier. In de eerste twee stijlregels is een element de selector (we spreken dan over een element-selector). De selector bepaalt op welk deel van een document de stijl betrekking heeft. In het laatste geval kan de stijl aan een element gekoppeld worden via onder meer de attributen CLASS en ID.code #xyz987 { font-family: Arial. Het REL attribuut geeft aan dat het bij het gerelateerde bestand gaat om een stylesheet en heeft dan ook als waarde "stylesheet".

gescheiden door een komma. Een stijlblad met een @import-regel en een gewone stijlregel ziet er bijvoorbeeld als volgt uit @import url("stijl/formulier.css" REL="stylesheet" TYPE="text/css" MEDIA="screen. worden de in het stijlblad opgenomen stijlen door Netscape Navigator 4 genegeerd.5 en Opera t/m versie 7. Microsoft Internet Explorer t/m versie 5. Het volgende voorbeeld laat de @import-regel zien voor het importeren van een stijlblad dat de naam "formulier. Cascading Style Sheets biedt de mogelijkheid om in een stijlblad met behulp van de @import-regel een ander extern stijlblad te importeren.css" REL="stylesheet" TYPE="text/css" MEDIA="print"> Wanneer een stijlblad op meerdere apparaten betrekking heeft. Voor gewone stijlregels in hetzelfde stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden. Een uitgebreide toelichting over de @import-regel en informatie over de ondersteuning door browsers wordt gegeven in het CSS-gedeelte van deze handleiding. CLASS en ID Met behulp van de attributen CLASS en ID kunnen aan bijna elk element in een document stijlen worden toegevoegd. dan neem je het LINK element eenvoudig meerdere keren op. Een @import-regel die na een gewone stijlregel is geplaatst. <LINK HREF="stijl/basis. <LINK HREF="stijl/scherm.css"). Een stijlblad mag meerdere @import-regels bevatten en daarnaast ook gewone stijlregels.css" REL="stylesheet" TYPE="text/css" MEDIA="screen"> <LINK HREF="stijl/afdrukken. dan neem je meerdere waarden voor het MEDIA attribuut op. Indien meerdere stijlbladen geïmporteerd worden en in meerdere van deze stijlbladen stijlen betrekking hebben op hetzelfde element. De stijlen uit een geïmporteerd stijlblad worden door deze browsers voor alle apparaten weergegeven. background-color: #336699.0 negeren het MEDIA attribuut van het LINK element voor een @import-regel. welke met behulp van een CLASS-selector of ID-selector zijn opgenomen in een extern stijlblad of een ingesloten stijlblok. } Gewone stijlregels hebben (als ze betrekking hebben op hetzelfde element) prioriteit boven de stijlregels uit een geïmporteerde stijlblad. dan wordt de stijl uit het laatste geïmporteerde stijlblad aangehouden. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde. De @importregels moeten echter altijd vóór de gewone stijlregels geplaatst worden. H1 {color: #FFFFFF.Wanneer je verschillende stijlbladen hebt voor bijvoorbeeld weergave op het scherm en afdrukken. moet door de browser genegeerd worden. .css").css" heeft en zich in een subdirectory met de naam "stijl" bevindt: @import url("stijl/formulier. print"> Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund.

. DIV en SPAN De elementen DIV en SPAN kunnen gebruikt worden. waaraan het ID attribuut met de id-waarde "xyz987" is toegevoegd. background-color: white. 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: . Het ID attribuut kan alleen toegepast worden indien de waarde ervan slechts één keer in een document wordt gebruikt. waaraan het CLASS attribuut met de class-naam "speciaal" is toegevoegd. Het wordt vaak gebruikt om een stijl voor een groter deel van een document vast te leggen. dat weer andere elementen op blokniveau mag bevatten.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"> <!-. } --> </STYLE> Van elk element. background-color: white. wanneer een element niet elke keer in dezelfde stijl moet worden uitgevoerd (en dus geen stijl voor het element gedefinieerd kan worden). } #xyz987 { color: blue. 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. Het DIV element is een element op blokniveau.speciaal { color: red. of als dezelfde stijl voor verschillende elementen gebruikt moet kunnen worden. 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. wanneer een stijl voor een deel van een document moet worden vastgelegd en dat deel niet tevens door een ander element ingesloten wordt.Het CLASS attribuut wordt toegepast. is de kleur van de tekst rood: <H1 CLASS="speciaal"> of <B CLASS="speciaal"> </B> </H1> Van het enkele voorkomen van het element.

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. 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. background-color: white. Bijvoorbeeld een stijlblad voor normaal gebruik en een stijlblad met grotere letters voor mensen met een verminderd gezichtsvermogen. . In het volgende voorbeeld wordt voor het DIV element een inline stijl gedefinieerd met behulp van het STYLE attribuut. <DIV STYLE="color: red. Deze alternatieven zouden door de browser aan de gebruiker gepresenteerd moeten worden. 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. CLASS en ID.</P> </DIV> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave."> <H2>Dit is H2</H2> <P>Deze <SPAN STYLE="color: blue."> <H2>Dit is H2</H2> <P>Deze tekst is ingesloten door het P element. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. background-color: white.">tekst</SPAN> is ingesloten door het P element. background-color: white.Voor het toevoegen van een stijl aan de elementen DIV en SPAN kan gebruik gemaakt worden van de attributen STYLE. waarna deze een keuze kan maken.</P> </DIV> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.0 de mogelijkheid alternatieve stijlbladen te specificeren.

wordt "basis. Deze naam kan de browser gebruiken bij de presentatie van de alternatieven. Het TITLE element wordt gebruikt om een alternatief stijlblad een naam te geven. Bij meta-informatie gaat het niet om informatie die als inhoud van het document . maar als "vast" stijlblad gezien wordt. <LINK HREF="standaard.css" altijd gebruikt.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Standaard weergave"> <LINK HREF="groot. dan gaat dat via het META element voor.css" REL="stylesheet" TYPE="text/css" TITLE="Standaard weergave"> <LINK HREF="groot.css" in combinatie met het stijlblad met voorkeur "standaard. moet de browser alle erbij behorende stijlbladen gelijktijdig gebruiken. Mozilla. Afhankelijk van de keuze van de gebruiker wordt "basis.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Grote letters"> In bovenstaand voorbeeld wordt het stijlblad "basis.0 en hoger. Indien het META element meerdere keren is opgenomen en daarbij voor verschillende stijlbladen is aangegeven dat ze de voorkeur hebben. Introductie meta-informatie Met behulp van het META element kun je in de head van een document allerlei zo genoemde metainformatie opnemen. Via het TITLE attribuut krijgen deze stijlbladen dezelfde naam.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. In deze browsers kan het voorbeeld bekeken worden in een nieuw venster. Indien de gebruiker geen keuze maakt.css" gecombineerd met "standaard. Door voor één van de alternatieven als waarde voor het REL attribuut niet "alternate stylesheet" maar gewoon "stylesheet" op te nemen. <LINK HREF="standaard.0 en hoger. Het TITLE attribuut moet in dit geval wel gebruikt worden. De verschillende soorten stijlbladen mogen ook gelijktijdig gebruikt worden: <LINK HREF="basis. Indien twee of meer LINK elementen stijlbladen met voorkeur definiëren.css".css" of "groot. wordt dat alternatief als voorkeur aangewezen. dan heeft het stijlblad dat als eerste in de head van het document staat voorrang. Deze voorkeur wordt aangehouden indien de gebruiker geen keuze maakt uit de verschillende alternatieven.css" REL="stylesheet" TYPE="text/css"> <LINK HREF="standaard. 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 definiëren welk stijlblad de voorkeur heeft. dan wordt het stijlblad gebruikt dat als laatste in de head van het document staat. omdat het stijlblad anders niet als alternatief.Een alternatief stijlblad wordt gedefinieerd door voor het REL attribuut van het LINK element de waarde "alternate stylesheet" op te nemen. Als het alternatief gekozen wordt. Firefox en Opera 7. Het gebruik van alternatieve stijlbladen wordt alleen ondersteund door Netscape Navigator 6.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Grote letters"> Een alternatief kan uit meerdere stijlbladen bestaan.css" gebruikt.

of te laten vervangen door een ander document. De korte omschrijving leg je vast door aan het NAME attribuut van het META element waarde "description" te geven. Het is informatie die betrekking heeft op het document zelf en waar de browser soms wel wat mee doet. 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. in andere gevallen wordt ervoor of erna een stukje tekst uit het document geplaatst met daarin de opgegeven zoektermen. Als je site eenmaal in de index van een zoekmachine is opgenomen. Daarnaast plaatsen zoekmachines de titel van een document als kopje boven een zoekresultaat. Door te zorgen voor een goede uitnodigende omschrijving. moet je gebruik maken van het META. Als voorbeeld de beschrijving van deze handleiding: . Het moet dan overigens wel gaan om sites waarvan de inhoud een relatie heeft met wat jij op je site te bieden hebt. Allereerst bepalen zoekmachines mede op basis van de gebruikte woorden in de titel hoe hoog een document in de lijst met zoekresultaten wordt geplaatst. 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). Een aantal karakters van 200-250 wordt wel als maximum genoemd. Alleen bij Google ontbreekt de korte omschrijving in de meeste gevallen. kun je proberen de gebruikers van de zoekmachine naar jouw site te lokken. Altavista. In dit onderdeel wordt toegelicht hoe je meta-informatie kunt gebruiken om: • • • • • informatie ten behoeve van zoekmachines vast te leggen. Je kunt dat beïnvloeden door de documenten een goede titel te geven en door het opnemen van een korte omschrijving en relevante sleutelwoorden. Maak niet een te lange omschrijving. maar vaak ook helemaal niets. 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. Met het NAME attribuut geef je aan om wat voor informatie het gaat en met het LANG attribuut wat de taal ervan is. Om de korte omschrijving van de inhoud en de zoektermen voor een document vast te leggen. 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. te voorkomen dat een document wordt opgenomen in de cache van de browser. dan is het verstandig hem zelf bij de verschillende zoekmachines aan te melden. Wil je de kans vergroten dat je site in de index wordt opgenomen. zoektermen en aanwijzingen voor de zoekrobots. want dan loop je kans dat deze halverwege afgekapt wordt. Deze methode heet Client Pull. blijft altijd afwachten. Soms vormt de omschrijving de enige tekst van het zoekresultaat. AlltheWeb. om zoveel mogelijk documenten in hun index op te nemen. Lycos en Ilse struinen regelmatig het Internet af. scripts en karakter encodering. Bijvoorbeeld een omschrijving van de inhoud van het document. Het CONTENT attribuut bevat de informatie zelf. is het natuurlijk belangrijk dat een bezoeker hem zo hoog mogelijk in de zoekresultaten tegenkomt. Probeer de belangrijkste sleutelwoorden in de omschrijving te verwerken. ervoor te zorgen dat browsers die dat ondersteunen in de adresbalk een eigen afbeelding weergeven (een zo genoemde shortcut icon). Zoekmachines Zoekmachines als Google. Het opnemen van een titel is om twee redenen belangrijk. een document na een bepaalde tijd automatisch opnieuw te laten openen.wordt weergegeven door de browser. Of ze jouw site daarbij binnen een redelijke tijd tegenkomen. Daarnaast helpt het als er vanaf andere sites links naar jouw site staan.

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

Voor de volledigheid en omdat wel opnemen geen kwaad kan. Via het CONTENT attribuut geef je aan na hoeveel seconden een nieuw document geopend moet worden. 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. met het HREF attribuut waar dat gevonden kan worden. Je plaatst het LINK element in de head van een document. Om van de Client Pull methode gebruik te kunnen maken. Na 15 seconden sluit het Door ook de url-parameter in het CONTENT attribuut op te nemen. <HEAD> <META HTTP-EQUIV="refresh" CONTENT="3"> . venster automatisch. sleutelwoorden en informatie voor zoekrobots. Als voorbeeld een verwijzing naar de beginpagina van de Handleiding HTML: <LINK REL="start" HREF="http://www. Naast het hiervoor beschreven gebruik van het META element voor het opnemen van een korte omschrijving.. Deze methode heet Client Pull: de browser opent zelfstandig een gewijzigd of ander document.html"> Client Pull Het META element kan gebruikt worden om een document na een bepaalde tijd dynamisch te laten verversen of vervangen.nl/index. De algemeen gebruikte zoekmachines negeren de informatie en het opnemen ervan heeft dus in de meeste gevallen geen nut. zijn er nog enkele andere mogelijkheden die betrekking hebben op zoekmachines. Met het REL attribuut leg je vast dat het gaat om een begindocument. Het gaat daarbij om informatie over de auteur en het copyright. Wanneer het huidige document vervangen moet worden door een ander document. De url-parameter moet geplaatst worden tussen de aanhalingstekens van het CONTENT attribuut. Deze mogelijkheden worden echter slechts door gespecialiseerde zoekmachines ondersteund. moet je aan het META element het HTTPEQUIV attribuut toevoegen met de waarde "refresh". In het volgende voorbeeld wordt een document na 3 seconden opnieuw geladen. Verder kan het LINK element gebruikt worden om aan te geven wat de beginpagina van een verzameling documenten is. moet je de url-parameter aan het CONTENT attribuut toevoegen. </HEAD> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. geef je aan dat het huidige document vervangen moet worden door een ander. .handleidinghtml. 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.frames worden gedefinieerd). worden de genoemde mogelijkheden hier toch kort beschreven.

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. maar ook een meer uitgebreid adres.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.ico-bestand in de hoofddirectory geplaatst of de code met het LINK element correct opgenomen. ook al heb je het favicon.. dan kun je beter de alternatieve oplossing met behulp van het LINK element kiezen. dat je met een daarvoor geschikt programma maakt. of wanneer je verschillende documenten een eigen afbeelding wilt geven. Een nieuwe afbeelding kun je maken met een speciale icon-editor.html"> . De meest eenvoudige manier om ervoor te zorgen dat de eigen afbeelding wordt weergegeven. Door dat in volgende documenten te herhalen. Een bestaande afbeelding kun je met bijvoorbeeld de gratis image-viewer/editor IrfanView opslaan in het icoformaat. is het plaatsen van een ico-bestand met de naam "favicon. Als het laatste document weer terug verwijst naar een eerder document. zoals de gratis IconArt. Ook in het tweede document kun je het META element opnemen met de opdracht een nieuw document te openen. Na 15 seconden sluit het venster automatisch.ico" in de hoofddirectory van je website.0. ontstaat een loop.<HEAD> <META HTTP-EQUIV="refresh" CONTENT="3. gif en jpg. Firefox en Opera vanaf versie 7.ico" TYPE="image/x-icon"> De afbeelding moet een ico-bestand zijn. Voor de Handleiding HTML is de volgende code opgenomen: <LINK REL="shortcut icon" HREF="handleidinghtml. In oudere versies van Microsoft Internet Explorer wordt de shortcut icon niet altijd weergegeven. venster automatisch.0. Andere browsers dan Microsoft Internet Explorer ondersteunen ook andere bestandsformaten voor de afbeelding. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Wanneer je niet één afbeelding voor alle HTML-documenten wilt gebruiken. Soms helpt het als je de site of pagina toevoegt aan de favorieten/bookmarks. Netscape Navigator vanaf versie 7. url=document2. De afbeelding wordt dan gebruikt voor alle HTML-documenten in deze en onderliggende directories. Na 15 seconden sluit het Afbeelding in adresbalk In Microsoft Internet Explorer vanaf versie 5. Het TYPE attribuut geeft aan om wat voor soort afbeelding het gaat. bijvoorbeeld png. kun je een presentatie maken. Het beste kun je als formaat 16x16 pixels aanhouden en kleuren uit het veilig kleurenpalet gebruiken. </HEAD> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. of voor de favoriet of bookmark komt te staan. De vervangingstijd kun je laten afhangen van de inhoud van het document. Document niet in cache . 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). Mozilla.

of te versturen per e-mail. 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. het automatisch vervangen van documenten met behulp van Client Pull. die specifiek op Microsoft Internet Explorer 6 gericht zijn. Die knoppenbalk biedt de gebruiker onder meer de mogelijkheid de afbeelding snel op te slaan. dat het document na de vermelde (verval)datum niet meer in de cache geplaatst moet worden. Wanneer je niet wilt dat bij de afbeeldingen in jouw HTMLdocumenten ook zo'n knoppenbalk verschijnt. <META HTTP-EQUIV="expires" CONTENT="Tue. Diverse meta-informatie Naast de informatie met betrekking tot zoekmachines. Je laat dan aan de browser weten. Wanneer hetzelfde document opnieuw geopend moet worden. Dat zal vaak aanzienlijk sneller zijn dan het opnieuw binnenhalen van het document vanaf het Internet. 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. dan moet je de volgende meta-informatie in de head van de documenten plaatsen: . Hier worden daarvan enkele mogelijkheden genoemd. het uit de cache halen. zal de browser (afhankelijk van de instellingen) eerst controleren of het document misschien gewijzigd is en als dat niet het geval is. kun je als waarde voor het HTTPEQUIV attribuut "expires" opnemen en als waarde voor het CONTENT attribuut een datum en tijd. het weergeven van een afbeelding in adresbalk en het voorkomen van opname in de cache. 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. 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. verschijnt in de linker bovenhoek ervan een knoppenbalk. Soms heb je redenen om te willen voorkomen dat de browser het document in de cache opneemt. Wanneer je wilt dat dit soort controls in plaats van in de XP-stijl op dezelfde wijze als in andere browsers worden weergegeven.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. kun je ook nog allerlei andere meta-informatie opnemen. 31 Dec 2003 23:00:00 GMT"> Het is overigens onduidelijk hoe ruim de ondersteuning van de genoemde mogelijkheden is. af te drukken.

zal het document dus niet worden goedgekeurd. Netscape Navigator 7. Je moet er rekening mee houden dat een document waarin het MARQUEE element is opgenomen. Vooral als de tekst wat langer is en/of een groter lettertype wordt gebruikt. In dit onderdeel worden de basismogelijkheden van lichtkranten en enkele speciale effecten beschreven. FACE en COLOR.3 t/m 1. Daarom is het vaak beter de lichtkrant voor deze browsers te verbergen. In Netscape Navigator 7. Het MARQUEE element heeft geen attributen om de opmaak van de tekst in de lichtkrant te bepalen. Wanneer je een lichtkrant wilt opnemen welke ook in andere browsers zichtbaar is. Bij de JavaScript voorbeelden is een script voor een lichtkrant opgenomen. Je kunt hiervoor echter gebruik maken van de elementen voor tekstopmaak.0 en hoger. Als alternatief kan de weergave echter ook bepaald worden met . welke ook als lichtkrant toegepast kan worden. Bij de voorbeelden in het onderdeel Objecten wordt een applet gedemonstreerd. WIDTH en BGCOLOR kunnen gebruikt worden om de hoogte. omdat deze browsers het BGCOLOR attribuut niet ondersteunen. Bij controle met een validator.6 kan dat een probleem opleveren. dan kun je het beste gebruik maken van een Java applet of een JavaScript. ofwel de lichtkrant met verschuivende tekst.01 en hoger. is de weergave in browsers die het element niet ondersteunen minder gelukkig: de tekst welke de lichtkrant moet weergeven.20 wordt de Scrolling Text Marquee ondersteund. levert dit een weinig fraai beeld op. Door de wijze waarop een lichtkrant met het MARQUEE element wordt opgebouwd. In de voorbeelden hiervoor is de weergave van de lichtkrant bepaald met alleen HTML. Mozilla 1. Je maakt een lichtkrant met behulp van het MARQUEE element.0 en hoger. <MARQUEE>Dit is een lichtkrant</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. <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.<META HTTP-EQUIV="MSThemeCompatible" CONTENT="no"> Introductie lichtkranten Door Microsoft Internet Explorer 2. gebruikt de lichtkrant de totale beschikbare breedte. In het volgende voorbeeld is het FONT element opgenomen met de attributen SIZE. Firefox en Opera 7.1 en Mozilla 1. Basismogelijkheden lichtkrant Je maakt een lichtkrant met behulp van het MARQUEE element. niet voldoet aan HTML 4. zie je dan als stilstaande tekst. Omdat in het volgende voorbeeld geen attributen aan het MARQUEE element zijn toegevoegd. breedte en achtergrondkleur van de lichtkrant te specificeren. De attributen HEIGHT.

. verschuift de tekst weinig</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. color: white. Bij de waarde "slide" komt de tekst aan de ene kant op.3. Alle gangbare browsers kunnen daarmee overweg.. Speciale effecten Met het BEHAVIOR attribuut kun je bepalen hoe de tekst door de lichtkrant moet schuiven.">De opmaak . Bij de standaardwaarde "scroll" komt de tekst aan de ene kant op.behulp van stylesheets. background-color: #FFFFFF. door het STYLE attribuut aan het MARQUEE element toe te voegen. font-size: 24px. waarop de opgegeven stijlen gewoon worden toegepast. color: #336699.0 en Mozilla 1. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#336699" STYLE="font-family: sans-serif.x en Mozilla 1. color: #336699. hoe langzamer de lichtkrant loopt.</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. die de background-color eigenschap niet ondersteunen voor het MARQUEE element. met de font-size eigenschap de lettergrootte. in andere gevallen verdwijnt de tekst aan het eind in één keer).2/1. verschuift naar de andere kant en blijft daar stilstaan (in Microsoft Internet Explorer 4 werkt de waarde "slide" alleen zoals beschreven is. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#FFFFFF" SCROLLAMOUNT="5" STYLE="font-family: sans-serif. In het volgende voorbeeld is gebruik gemaakt van een inline stijl. Met het SCROLLAMOUNT attribuut kan worden vastgelegd hoeveel pixels de tekst bij elke beweging moet verschuiven. maar ze negeren het MARQUEE element ook niet: het wordt beschouwd als element op blokniveau. met uitzondering van Netscape Navigator 7.0 kunnen de lichtkrant weliswaar niet weergeven.5&quot. verschuift naar de andere kant en verdwijnt daar geleidelijk weer. color: #336699. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#FFFFFF" SCROLLDELAY="150" STYLE="font-family: sans-serif.">Dit is alternate</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. Je kunt dat oplossen door het gebruik van stylesheets te combineren met het BGCOLOR attribuut. font-size: 24px. In deze browsers is het misschien verstandig de lichtkrant maar geheel te verbergen. Met het SCROLLDELAY attribuut kan worden vastgelegd om de hoeveel tijd (uitgedrukt in milliseconden) de tekst een stukje moet verschuiven. stylesheets. De waarde "alternate" laat de tekst binnen de lichtkrant heen en weer bewegen. font-size: 24px. met de color eigenschap de kleur van de tekst en met de background-color eigenschap de achtergrondkleur. Hoe hoger de waarde. Netscape Navigator 6. als ook het LOOP attribuut gebruikt is met de waarde "1".. hoe sneller de lichtkrant voorbijschuift. Met de font-family eigenschap is het lettertype gespecificeerd. Hoe hoger de waarde.">Met SCROLLAMOUNT=&quot. background-color: #FFFFFF. Overigens zijn met bovenstaande oplossing alle problemen nog niet voorbij. Het BGCOLOR attribuut heeft dezelfde waarde als de background-color eigenschap. background-color: #336699. font-size: 24px. <MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#FFFFFF" BEHAVIOR="alternate" STYLE="font-family: sans-serif.

150&quot. Met het DIRECTION attribuut kan worden vastgelegd in welke richting de tekst moet schuiven. background-color: #FFFFFF. bij de waarden "right". is het gebruiken van een JavaScript. Zeker als je het FONT element gebruikt hebt om de grootte en kleur van de tekst te bepalen.</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.">Met DIRECTION=&quot. . Verbergen lichtkrant Omdat de tekst in de lichtkrant als inhoud van het MARQUEE element moet worden opgenomen. <MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#CCCCCC" STYLE="font-family: sans-serif.. color: red. wordt deze stilstaand en compleet zichtbaar weergegeven door browsers.. font-size: 24px. stilstaande tekst. <MARQUEE HEIGHT="27" WIDTH="320" BGCOLOR="#CCCCCC"><FONT SIZE="+2" FACE="Arial" COLOR="red">Tekst ingesloten . "up" en "down" respectievelijk van links naar rechts. die het MARQUEE element niet ondersteunen.">Met SCROLLDELAY=&quot. verschuift de tekst naar boven</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. stilstaande tekst.">Tekst ingesloten .background-color: #FFFFFF.. Bij de standaardwaarde "left" gaat de tekst van rechts naar links. 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. van beneden naar boven en van boven naar beneden. background-color: #CCCCCC. Uiteraard wordt de lichtkrant alleen weergegeven als de gebruiker de uitvoering van JavaScript heeft toegestaan. color: #336699. Een oplossing voor het geheel verbergen van de inhoud van de lichtkrant in browsers die het MARQUEE element niet ondersteunen. weergegeven als stilstaande tekst.up&quot. is het resultaat vermoedelijk niet wat je wilt.. In andere browsers wordt de inhoud van het MARQUEE element dan als standaard tekst weergegeven. font-size: 24px. <MARQUEE HEIGHT="75" WIDTH="560" BGCOLOR="#FFFFFF" DIRECTION="up" SCROLLDELAY="150" STYLE="font-family: sans-serif. verschuift de tekst langzaam</MARQUEE> Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.</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. 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.

write('<MARQUEE HEIGHT="27" WIDTH="560" BGCOLOR="#336699" STYLE="width: 560px.2 en in Mozilla met versienummer lager dan 1. var geckomarquee = (geckodatum >= 20020823) var beginopera = (nuA). var begingecko = (nuA). zoals het opnemen van afbeeldingen en tabellen.0. Een officiële standaard is HTML 3.beginopera + 7).substring(beginopera + 8.0 bevat alle basismogelijkheden bij het maken van HTML-documenten zoals het structureren van tekst. color: white.indexOf("Opera") != -1).1 en hoger). var geckodatum = (nuA).2 en hoger). heeft Tim Berners-Lee in het najaar van 1990 HTML ontwikkeld. if (IE || geckomarquee || OP72plus) { document. var OP72plus = OP && (parseInt(operaversie) >= 72).substring(beginopera + 6. Nieuwe mogelijkheden in HTML 3.indexOf("MSIE") != -1) && !OP.0 en hoger).write niet onderbroken wordt door een harde overgang naar de volgende regel. Firefox en Opera (7.begingecko + 14).In het volgende voorbeeld wordt de lichtkrant alleen weergegeven in Microsoft Internet Explorer en in recente versies van Netscape Navigator (7. welke naast afbeeldingen uitgelijnd wordt. maar met de toenemende populariteit van het World Wide Web ontstaat al gauw de behoefte aan meer uitgebreide mogelijkheden. font-family: sans-serif. In eerste instantie is het een eenvoudige tekst-georiënteerde taal. var OP = (nuA. Het duurt echter nog tot september 1995 voordat als eerste standaard HTML 2. dus ruim voor de definitieve vaststelling van HTML 2.0 zijn onder andere tabellen en tekst. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft. .userAgent.lastIndexOf("Opera"). Ontwikkeling HTML Als onderdeel van het in 1989 door hem gestarte World Wide Web project.7 zorgt ervoor dat de opgegeven stijl voor de lettergrootte niet wordt weergegeven in bovenstaande JavaScript oplossing. Een fout in Netscape Navigator met versienummer lager dan 7. koppen. var operasubversie = (nuA).beginopera + 9). hyperlinks. lijsten en tekstopmaak en daarnaast afbeeldingen en formulieren. Mozilla (1.0.lastIndexOf("Gecko"). font-size: 24px. var operahfdversie = (nuA). Door de makers van browsers wordt op verschillende manieren op deze behoefte ingespeeld en de noodzaak tot standaardisatie dient zich aan. In de body van het document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var nuA = navigator. Meer informatie over het testen op de gebruikte browser is te vinden bij de JavaScript voorbeelden voor Informatie over de browser. In maart 1995. HTML 2.0 door het Internet Engineering Task Force (IETF) wordt vastgesteld.substring(begingecko + 6.0 nooit geworden: in september 1995 vervalt het concept. 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. var IE = (nuA. var operaversie = (operahfdversie + operasubversie). verschijnt een concept voor HTML 3.

0 en welke elementen niet in een HTML-specificatie zijn opgenomen.2. Belangrijke thema's in HTML 4.0 zijn onder meer: tabellen. image maps. verbeteringen voor tabellen en formulieren en de integratie van stylesheets en scripts.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.w3.org/TR/REC-html32 Vastgesteld: 14 januari 1997 In HTML 3. Uitbreidingen ten opzichte van HTML 2.0 behoren onder meer frames.0. worden vrijwel al deze mogelijkheden reeds ondersteund door de dan actuele versies van de belangrijkste browsers. Tot de nieuwe mogelijkheden van HTML 4. het opnemen van objecten.0 niet meer opgenomen. Lang niet alle deze mogelijkheden worden bij verschijnen van HTML 4. extra mogelijkheden voor de opmaak van tekst en het uitlijnen van tekst naast afbeeldingen. Vervolg: HTML 3. welke in mei 1996 als concept verschijnt en in januari 1997 van het World Wide Web Consortium (W3C) de status van aanbeveling krijgt. De huidige standaard is HTML 4. de integratie van Java applets. Bij het verschijnen van HTML 3.0. welke in juli 1997 als concept is gepubliceerd en in december 1997 als aanbeveling is vastgesteld. welke elementen behoren tot HTML 2.org/MarkUp/html-spec/html-spec_toc.2 Specificatie: http://www.0 wordt HTML 3.html Vastgesteld: 22 september 1995 In HTML 2. Ze worden daarom niet in deze handleiding beschreven.2 en HTML 4.0 zijn de scheiding tussen structuur en presentatie door het gebruik van stylesheets en een betere toegankelijkheid voor mensen met een handicap.2 zijn de volgende elementen opgenomen: . In enkele overzichten is te zien.0 (correct) ondersteund door de belangrijkste browsers.w3.2 als verouderd aangemerkt en in HTML 4.2 Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin HTML 3.0 Specificatie: http://www.De echte opvolger van HTML 2. HTML 2. HTML 3.2. PLAINTEXT en XMP zijn in HTML 3.

Ze kennen in HTML 3. Ze worden daarom niet in deze handleiding beschreven.2 dan ook nog geen attributen.0 Aanbeveling 4.0: http://www.2.w3. PLAINTEXT en XMP zijn in HTML 3.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 . De elementen LISTING.0 niet meer opgenomen. HTML 4.2. De elementen SCRIPT en STYLE zijn onderdeel van HTML 3.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. maar uitsluitend als reservering voor de toekomstige integratie van scripts en stylesheets.org/TR/html401/ Vastgesteld: 24 december 1999 In HTML 4.01: http://www.org/TR/1998/REC-html40-19980424/ Vastgesteld: 18 december 1997 Revisie: 24 april 1998 Aanbeveling Revisie 4.2 als verouderd aangemerkt en in HTML 4.w3.

omdat veel browsers het ID attribuut niet en het NAME attribuut wel ondersteunen als identificatiekenmerk voor verwijzingen vanuit scripts. HTML 4. welke tot HTML 4. Hierbij gaat het vooral om attributen. 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. LAYER.01 is een revisie van HTML 4. FONT. Daarnaast gaat het om het APPLET element. S.0 behoren.0 en bevat een aantal kleine aanpassingen. dat deze elementen door alle gangbare browsers op dezelfde wijze worden weergegeven als UL. Ook deze attributen mogen voorlopig gewoon gebruikt worden. waarvoor er een alternatief is via stylesheets: BASEFONT. CENTER. waarvoor het OBJECT element als vervanging moet gaan dienen. De volgende elementen worden ondersteund door één of meer versies van Microsoft Internet Explorer. NOLAYER en SPACER) als vervanging dienen. Introductie speciale karakters . NOEMBED en BGSOUND) en stylesheets (voor BLINK. Voor een deel betreft het elementen. waarvoor stylesheets als alternatief gelden. ILAYER. Overige elementen Een aantal elementen maakt geen deel uit van een HTML-specificatie. maar wordt wel ondersteund door de bekende browsers. ISINDEX en MENU zijn afgekeurd. STRIKE en U.COLGROUP * DD INS * ISINDEX SCRIPT SELECT De met * gemarkeerde elementen zijn nieuw toegevoegd in HTML 4. Een aantal elementen. Ook de elementen DIR. blijft het gebruik van deze elementen voorlopig toegestaan. Voor DIR en MENU geldt. Mozilla. Omdat stylesheets en het OBJECT element niet door alle nog gangbare browsers ondersteund worden en de ondersteuning bovendien niet altijd correct is. heeft het label "afgekeurd" (deprecated) gekregen. Daarnaast is voor de elementen IMG en FORM het NAME attribuut toegevoegd. In plaats van ISINDEX kan het INPUT element gebruikt worden met het attribuut TYPE="text". maar met de kanttekening dat het gebruik wordt afgeraden.0. Netscape Navigator en Opera: BGSOUND EMBED MARQUEE NOBR NOEMBED WBR Het volgende element wordt ondersteund door Mozilla. Behalve de genoemde elementen heeft ook een aantal attributen het label "afgekeurd" gekregen.

Hierna wordt eerst het begrip karakterreferenties besproken. &. biedt HTML als alternatief de karakter entiteitsreferenties. Enerzijds omdat niet elk systeem (DOS/Windows. Tenslotte wordt ingegaan op karakter encodering en het gebruik van meta-informatie.IMG SRC=&quot. Ze worden als volgt weergegeven: &entiteitsnaam. waarvan 191 posities een zichtbaar karakter betreffen. Karakterreferenties Zoals hiervoor aangegeven mag je alleen de meeste letters. welke een bepaalde actie tot gevolg hebben (bijvoorbeeld een horizontale tab) en in HTML geen betekenis . Om het gebruik van de speciale code te illustreren is een voorbeeld opgenomen. Een numerieke karakterreferentie wordt als volgt weergegeven: &#nummer. Deze speciale code noemen we karakterreferenties.. ISO 8859-1 (ook wel Latin-1 genoemd) bevat 256 code-posities (0-255). Bij de overige 65 karakters (de posities 0-31 en 127-159) gaat het om controle tekens. < en >. In plaats van "nummer" wordt de zogenaamde code positie van het betreffende karakter gebruikt. cijfers en tekens die je op een standaard toetsenbord vindt gewoon gebruiken.gif" WIDTH="88" HEIGHT="31" ALT="Logo Handleiding HTML"> dan moet je in het HTML-document het volgende opnemen: &lt. anderzijds omdat sommige karakters in HTML een speciale betekenis hebben. en &#233. moet je speciale code gebruiken: de zogenaamde karakterreferenties. Deze karakter entiteitsreferenties gebruiken een symbolische naam voor een karakter.. Voor karakters die je niet zomaar mag opnemen. 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. In plaats van deze vier karakters en voor alle overige karakters (zoals Griekse letters. en &eacute.. Voor het copyrightteken en de kleine letter e accent acute zijn de karakter entiteitsreferenties respectievelijk &copy. Macintosh.Bij het maken een HTML-document mag je niet zomaar alle karakters opnemen. Omdat de code posities en daarmee de numerieke karakterreferenties niet zo eenvoudig te onthouden zijn. welke voor elk karakter uit een serie karakters (het karakterrepertoire) in een document karakterset zijn vastgelegd. cijfers en tekens die je op een standaard toetsenbord vindt. Speciale aandacht krijgt daarna de euro. Linux) deze karakters op dezelfde wijze interpreteert.31&quot. HEIGHT=&quot. Code posities zijn numerieke codes. Vervolgens wordt een overzicht gegeven van de karakterreferenties voor een groot aantal karakters en wordt ingegaan op de ondersteuning door browsers.&gt. WIDTH=&quot. In principe kun je alle letters. Overzicht karakters In HTML 2 is de standaard ISO 8859-1 als document karakterset gedefinieerd. Een uitzondering vormen de karakters ". mathematische operatoren en allerlei symbolen) moet je speciale code gebruiken. waarbij in de browser (zoals in deze handleiding nogal eens het geval is) HTML-code moet worden weergegeven.gif&quot.Logo Handleiding HTML&quot. ALT=&quot..88&quot. gewoon in een HTML-document opnemen. die je met allerlei toetscombinaties in bijvoorbeeld je tekstverwerker wel kunt gebruiken.handleidinghtml. Als je in de browser wilt zien: <IMG SRC="handleidinghtml. Deze zijn er in twee vormen: numerieke karakterreferenties en karakter entiteitsreferenties.

&deg. die gebruikt worden in talen over de hele wereld. De code-posities 0-255 komen overeen met die van ISO 8859-1. &sup1. kleine letters en algemene tekens. Dit is feitelijk een aparte standaard. &#169. die op een standaard toetsenbord te vinden zijn. De karakter entiteitsreferenties worden in Microsoft Internet Explorer en Netscape Navigator in de meeste gevallen pas . &sup3. &#176. &#178. die alleen gecodeerd weergegeven mogen worden. welke gedefinieerd wordt in de internationale standaard ISO 10646. &amp. Deze posities bevatten speciale symbolen. De numerieke karakterreferenties worden vrijwel allemaal ondersteund door alle versies van Microsoft Internet Explorer. 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. &lt. Een compleet overzicht is opgenomen in een aparte tabel. &#60. &shy. In HTML 4 wordt gebruik gemaakt van het Universele Karakterset (Universal Character Set. &#38. De meeste hoeven niet gecodeerd te worden en kennen ook geen karakter entiteitsreferenties. &frac34. &nbsp. &#173. Deze posities bevatten hoofdletters. &frac14. Netscape Navigator en Opera. &#190. &#62. &#188. &#179. &#185. code-positie 000-031 code-positie 032-126 Deze posities hebben geen betekenis in HTML. &gt. &copy. &quot. code-positie 127-159 code-positie 160-191 Deze posities hebben geen betekenis in HTML. maar wel geheel identiek aan UCS. die een bijzondere betekenis hebben in HTML en daarom niet ongecodeerd weergegeven mogen worden: " & < > dubbel aanhalingsteken ampersand kleiner dan groter dan &#34. In plaats van het UCS wordt ook vaak gesproken over Unicode. De eerste 128 posities van ISO 8859-1 (0-127) komen overeen met het bekende ASCII karakterset. &frac12. Een uitzondering vormen een viertal tekens. UCS). Alle posities worden ondersteund door alle versies van Microsoft Internet Explorer. &#189. Het Universele Karakterset bevat duizenden karakters. Netscape Navigator en Opera. &sup2.hebben. In aparte documenten is per groep een volledig overzicht opgenomen. 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.

en de karakter entiteitsreferentie &euro. Het gebruik van deze code kent echter . &oacute.en kleine letters met diverse accenten. &#225. opgenomen. &ouml. die in Microsoft Internet Explorer en Netscape Navigator pas ondersteund worden vanaf versie 3. &#232.A en Latin extended . Een compleet overzicht is opgenomen in een aparte tabel. &#247. &#239. 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. Een compleet overzicht is opgenomen in een aparte tabel. &#215. Currency symbols en Spacing modifier letters Mathematical operators Letterlike symbols. &divide. overige code-posities De code posities boven 255 zijn in HTML 4 onderverdeeld in de volgende groepen: • • • • • Latin extended . &agrave. Het zachte koppelteken wordt niet door alle browsers (correct) ondersteund. Hetzelfde geldt voor de karakter entiteitsreferenties. Miscellaneous technical. &#246. &ecirc. 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. &iuml. In het UCS/Unicode karakterset zijn daarvoor de numerieke karakterreferentie &#8364. &aacute. &#234. &#243.B Greek General punctuation. Euro Met de invoering van de euro is er vanzelfsprekend ook de wens het euroteken te kunnen gebruiken in HTML-documenten. &eacute. De numerieke karakterreferenties worden allemaal ondersteund door alle versies van Microsoft Internet Explorer. &times. &uuml. De ondersteuning voor de afzonderlijke code posities is in het overzicht van de hiervoor genoemde groepen opgenomen. Netscape Navigator en Opera. met uitzondering van de tekens voor vermenigvuldigen en delen.ondersteund vanaf versie 3. &#233. &euml. code-positie 192-255 Deze posities bevatten vooral hoofd. &egrave. &#235. &#252. Arrows. Of een bepaald karakter kan worden weergegeven hangt er daarnaast vanaf of de versie van het door de bezoeker gebruikte lettertype het karakter bevat.

0 Microsoft Internet Explorer vanaf versie 4. geven deze op verschillende manieren weer: in oudere versies van Netscape Navigator zie je een vraagteken.6 &euro. 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.0 Netscape Navigator vanaf versie 4. Dat is zeker bij oudere systemen. Om een HTML-document met de erin opgenomen karakters te kunnen opslaan in een bestand of te kunnen verzenden over internet. moet de browser weten welke karakter encodering van toepassing is.0 Netscape Navigator vanaf versie 4. wordt bepaald door de gebruikte karakter encodering. Dan kan ook een bezoeker met een browser die geen afbeeldingen weergeeft. terwijl oudere versies van Microsoft Internet Explorer en Opera het 'niet teken' (codepositie 172: ¬) laten zien. Welke (Windows) browsers dat wel doen.0 Opera vanaf versie 4. Soms sturen webservers deze informatie mee met het document. De wijze waarop dat gebeurt. kun je ook zelf in de vorm van meta-informatie in de head van het document de karakter encodering opgeven. Deze is vrij algemeen van toepassing voor West Europese talen. Browsers die de code voor de numerieke karakterreferentie voor het euroteken niet ondersteunen. Daarnaast is het zo dat ook oudere browsers de code voor het euroteken niet ondersteunen. Denk er daarbij aan het attribuut ALT="euro" aan het IMG element toe te voegen. Voor Grieks neem je bijvoorbeeld ISO-8859-7 en voor Turks ISO-8859-9. Allereerst moeten de lettertypen op het systeem van de bezoeker het euroteken bevatten. nog niet het geval. bijvoorbeeld voor: . Meta-informatie Bij de beschrijving van karakterreferenties is aangegeven dat voor elk karakter in een karakterset een numerieke code (de code positie) is vastgelegd.' weer. Microsoft Internet Explorer vanaf versie 4. De bezoeker kan daarvoor een update downloaden. zoals Windows 95. Indien je gebruik maakt van andere talen kun je een andere karakter encodering specificeren. zien waar het om gaat. Introductie kleuren in HTML en CSS Kleuren kunnen voor meerdere onderdelen van een HTML-document vastgelegd worden. Browsers die de code voor de karakter entiteitsreferentie niet ondersteunen geven in plaats hiervan voluit '&euro. dan kun je ervoor kiezen de officiële afkorting EUR te gebruiken. maar als website-auteur heb je daar uiteraard geen invloed op. moeten de numerieke codes omgezet worden in bytes. Wanneer je wilt dat de weergave in alle browsers zoveel mogelijk hetzelfde is. kun je in het volgende overzicht zien: &#8364.een aantal problemen. Om een HTML-document te kunnen weergeven.0 Opera vanaf versie 3. Je doet dat met behulp van het META element met de attributen HTTP-EQUIV en CONTENT: <META HTTP-EQUIV="content-type" CONTENT="text/html. Omdat dit niet altijd het geval is. Als alternatief kun je ook een kleine afbeelding met het euroteken opnemen: .

Daarom ligt het voor de hand ook in HTML en CSS kleuren vast te leggen als een mix van deze basiskleuren. groen en blauw.• • • de achtergrond. TD en TH. RGB-kleuren De eerste manier om een RGB-kleur te definiëren is door de intensiteit van elk van de basiskleuren rood. groen en blauw vast te leggen.75%. TBODY. TR. Wanneer de intensiteit van de drie basiskleuren gelijk is. wordt als resultaat een grijstint weergegeven. groen en blauw ook uitgedrukt worden in een numeriek getal in de range van 0 t/m 255.getal_blauw) . Bij 0% ontbreekt een kleur. TFOOT. Vervolgens wordt aangegeven welke van deze manieren gebruikt kunnen worden voor HTML en CSS.8%) zijn toegestaan.60%): rood wit zwart een zeegroene kleur Behalve als percentage kan de intensiteit van elk van de basiskleuren rood. Behalve als een RGB-kleur bieden HTML en CSS ook de mogelijkheid een kleur te definiëren door middel van een kleurnaam.getal_groen. Ter illustratie enkele voorbeelden: rgb(100%. 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.0%. de tekst en de hyperlinks van een document via de attributen BGCOLOR. Indien een waarde hoger dan 100% wordt opgenomen.0%. 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. De waarde van de kleur heeft de volgende vorm: rgb(getal_rood. THEAD. In dit onderdeel worden de verschillende manieren beschreven waarop kleuren gedefinieerd kunnen worden.blauw%) Elke basiskleur heeft een waarde tussen 0% en 100%.0%): rgb(13%. maar het gebruik ervan wordt afgeraden. Door een kleurenmonitor worden kleuren weergegeven als een bepaalde combinatie van rood. numerieke getallen en hexadecimale notatie. Decimale waarden (bijvoorbeeld 45.100%. TEXT. omdat een browser die geen decimalen ondersteunt de waarde verkeerd kan interpreteren. Daarbij komt 0 overeen met 0% en 255 met 100%. groen en blauw in een percentage uit te drukken. Een bijzondere vorm hiervan is het gebruik van systeemkleuren.0%): rgb(100%. Tenslotte wordt ingegaan op het veilig kleurenpalet. LINK. Het kan door middel van percentages. dat de kleuren bevat welke door elke browser op elk systeem kunnen worden weergegeven.groen%.100%): rgb(0%. bij 100% is de intensiteit maximaal. Er zijn verschillende manieren om de intensiteit van elk van de kleuren rood. wordt deze terug gebracht tot 100%. De waarde van de kleur heeft hierbij de volgende vorm: rgb(rood%.

154): rood wit zwart een zeegroene kleur De numerieke getallen kunnen ook in hexadecimale notatie opgenomen worden.0. In de specificaties van HTML en CSS is vastgelegd dat je de volgende 16 kleurnamen kunt gebruiken: . Indien een waarde hoger dan 255 wordt opgenomen. E voor 14 en F voor 15. zal de browser bij de interpretatie elk karakter dupliceren. B voor 11.178. In dit geval is het een hekje gevolgd door de drie paren karakters. bij 255 is de intensiteit maximaal. 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.255. 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.0): rgb(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. Als voorbeeld de zeegroene kleur met de numerieke getallen 32. C voor 12. het tweede karakter is het restgetal (het numerieke getal minus het eerste karakter maal 16). Als voorbeeld de kleuren die al eerder genoemd zijn: rgb(255. wordt deze terug gebracht tot 255. waarin gebruik gemaakt wordt van percentages of numerieke getallen.Bij het getal 0 ontbreekt een kleur. D voor 13. welke veel makkelijker te onthouden is dan een of andere combinatie van cijfers en/of letters. kan deze waarde ook op een verkorte wijze worden opgenomen: #RGB Als hiervan gebruik gemaakt wordt.0): rgb(255. Hierbij staan de getallen voor zichzelf.255): rgb(0. A voor 10. Decimale waarden zijn niet toegestaan.0. 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. 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.

. dat hiermee de kleuren afgestemd kunnen worden op wat de gebruiker (blijkbaar) plezierig vindt of nodig heeft vanwege een visueel handicap. groen en blauw per kleur gelijk en dat betekent dat het om grijstinten gaat. In de volgende afbeelding zijn de 16 standaard kleurnamen weergegeven. hoe ze door de browser worden weergegeven. Dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven. lime. maroon. Kleurnamen zijn hoofdletterongevoelig. gray.white. Niet elke naam wordt door elke browser ondersteund en bovendien maken ze geen deel uit van het veilig kleurenpalet. of naar de kleur van de tekst in de titelbalk (CaptionText). Naast de 16 kleurnamen ondersteunen veel browsers nog eens 124 extra namen. zullen de weergegeven kleuren van die op de afbeelding afwijken. In het laatste blok zijn de waarden voor rood. maar verwijzingen naar de kleuren die gebruikt worden door het systeem. aqua. Tevens zijn daarbij de bijbehorende RGB-waarden vermeld. LightGoldenrodYellow. olive. Het gebruik van dit soort namen wordt niet aanbevolen. fuchsia. red. In de volgende afbeelding is een overzicht van de systeemkleuren voor een standaard Windows 98 systeem te zien. teal. of als de gebruiker via de voorkeuren andere kleuren heeft gekozen. black. Dat zijn geen vaste kleuren. Bijvoorbeeld een verwijzing naar de kleur van de titelbalk van het actieve venster (ActiveCaption). Klik op de afbeelding voor een toelichting op de systeemkleuren en om te zien of en zo ja. Het idee achter de mogelijkheid om systeemkleuren te definiëren is. Systeemkleuren Nieuw in CSS 2 is de mogelijkheid tot het definiëren van systeemkleuren. 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%). navy en silver Deze kleuren zijn afkomstig uit het originele palet met 16 Windows VGA-kleuren. green. yellow. zoals MediumSpringGreen. Op een ander systeem dan Windows 98. Gainsboro en BurlyWood. blue. purple. waarop het document wordt weergegeven.

én een achtergrondkleur vast te leggen. Kleuren in CSS In CSS kunnen kleuren gedefinieerd worden door middel van: . is het verstandig ze altijd te gebruiken in een combinatie van voor. Daarmee wordt voorkomen een document onleesbaar wordt. Bovendien wordt geadviseerd ze niet door elkaar heen te gebruiken met kleuren die op een andere manier gedefinieerd zijn. Vanwege de leesbaarheid wordt evenwel geadviseerd de in het overzicht opgenomen schrijfwijze aan te houden. Het gebruik ervan wordt echter afgeraden. 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.Omdat je als auteur geen invloed hebt op hoe de systeemkleuren worden weergegeven. bijvoorbeeld doordat de voorgrondkleur van het document te weinig verschilt van de door de bezoeker ingestelde standaard achtergrondkleur van de browser. omdat het in andere browsers tot ongewenste resultaten zal leiden.en achtergrondkleur. Het is belangrijk altijd een voor. De namen van de systeemkleuren zijn hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven. 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.

Voorbeelden: BODY A:link A:visited BODY Ondersteuning: • • • • • • • • Internet Explorer 3.0.0%).als de achtergrondkleur te vast te leggen.100%).0%. { color: #FFFFFF. wordt het gebruik ervan alleen aanbevolen.1 en hoger: alle mogelijkheden.5 t/m 5. } { color: WindowText. background: #000000.0: alle mogelijkheden met uitzondering van systeemkleuren (welke correct genegeerd worden) Opera 5. als gewerkt wordt met browser-specifieke stijlbladen.0: alleen de 16 kleurnamen en RGB-waarden in al dan niet verkorte hexadecimale notatie Internet Explorer 4. maar in plaats ervan wordt tamelijk willekeurige een andere kleur weergegeven) Netscape Navigator 6.0 en hoger: alle mogelijkheden Netscape Navigator 4.0%. } { color: rgb(255. background: Window. background: rgb(0. } { color: rgb(0%.0 en hoger: alle mogelijkheden Mozilla: alle mogelijkheden Firefox: alle mogelijkheden Opera 3. Net als bij HTML is het van belang altijd zowel de voor. . } Gezien de foutieve wijze waarop Netscape Navigator 4 systeemkleuren weergeeft.0).x: alle mogelijkheden met uitzondering van systeemkleuren (deze worden echter ten onrechte niet genegeerd.0).• • • • • éé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. background: rgb(0%.0.

.

536 kleuren (hi-color) kunnen weergeven. moet het systeem minstens 65. 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.777. Dat is een set van 216 RGB-kleuren.Veilig kleurenpalet Als een RGB-kleur gedefinieerd wordt door middel van numerieke getallen. Hoewel de standaard de laatste jaren aanzienlijk verschoven is.90) dichtstbijzijnde kleur rgb(255. Dit heet dithering. De waarden die binnen het veilig kleurenpalet voor elke basiskleur toegepast mogen worden.216 verschillende combinaties zijn. gaat het daarom om veelvouden van 20%. ook als het systeem over slechts 256 kleuren beschikt. Op het aantal van 216 RGB-kleuren kom je uit. De andere mogelijkheid is dat de browser de kleur probeert te simuleren. Dat betekent dat er in totaal 256x256x256 = 16. groen en blauw een gelijk aantal mogelijkheden gebruikt moet kunnen worden en er binnen 256 kleuren dan niet meer dan 6x6x6 = 216 combinaties passen. zijn gelijkmatig over de beschikbare range verdeeld. kan voor elk van de kleuren rood. De eerste is dat de browser uit de beschikbare kleuren er een kiest. Wanneer je uit de beschikbare mogelijkheden een willekeurige kleur kiest. 51 en 33 voor respectievelijk de weergave in percentages. in de onderste rij is een deel van de afbeelding uitvergroot om de dithering beter te kunnen zien.189. In beide gevallen zal de weergave anders zijn dan bedoeld. In dat geval zijn er twee mogelijkheden. omdat er van elk van een basiskleuren rood. maar met name bij dithering kan het resultaat minder geslaagd zijn. hangt af van de mogelijkheden van de monitor.536 of zelfs maximaal 256 kleuren. 0 en 00.51) na dithering totaal 4 kleuren Om te voorkomen dat de browser de gekozen kleur vervangt door de dichtstbijzijnde kleur of simuleert door dithering. In de bovenste rij hebben de afbeeldingen hun originele grootte. groen en blauw een getal in de range van 0 t/m 255 gebruikt worden. De resterende 40 kleuren verschillen per systeem.204. zullen veel gebruikers het nog moeten doen met maximaal 65. originele kleur rgb(255. In de volgende afbeeldingen is te zien tot welk resultaat beide mogelijkheden kunnen leiden. Om in de eerste afbeelding de originele kleur te kunnen zien. Of elk van deze ruim 16 miljoen kleuren ook echt op het scherm van de gebruiker te zien zal zijn. De RGB-waarden . Dat kan door pixels te wijzigen in verschillende kleuren. welke door alle browsers op alle systemen zonder kleurwijziging of dithering kunnen worden weergegeven. kun je het beste gebruik maken van één van de kleuren uit het veilig kleurenpalet. die zo dicht mogelijk bij de bedoelde kleur komt. Naast 0%. welke gecombineerd de bedoelde kleur benaderen. is de kans dus groot dat de browser deze niet kan weergeven.

kan dat een voordeel zijn. Dergelijke editors zijn er inmiddels in een groot aantal. Naast de tekst-georiënteerde editors zijn er ook WYSIWYG-editors. die een benadering is van hetgeen je in de browser ziet. Een gratis WYSIWYG-editor is het op de Gecko lay-out engine van Mozilla gebaseerde KompoZer. knoppenbalken en/of de rechter muistoets. HTML. Als je echter regelmatig HTML-documenten produceert. Omdat de code op de achtergrond verzorgd wordt.en CSS-editors HTML-documenten zijn ASCII-bestanden. Uit de veelheid aan (goede) programma's is slechts een zeer beperkte selectie opgenomen en dan veelal nog alleen voor Windowssystemen. Een bekend voorbeeld is TopStyle. . FTP-programma's: zijn nodig om de HTML-documenten en andere bestanden te uploaden naar de server van je provider. Wanneer je slechts incidenteel een HTML-document maakt. zoals Kladblok (Notepad) van Windows. waarbij WYSIWYG staat voor What You See Is What You Get. Vooral ook omdat de code bij dit soort editors niet altijd volgens de specificaties is en daardoor tot foutmeldingen bij de validatie leidt. of als je met image maps werkt. Daarom zijn er in de loop van de tijd speciale HTMLeditors ontwikkeld. Grafische programma's: gebruik je als je afbeeldingen moet maken of bewerken. Browsers: gebruik je om te zien hoe de HTML-documenten in verschillende situaties worden weergegeven. waarmee je de code kunt invoeren via menu-opties. variërend van eenvoudig tot geavanceerd. Introductie Hulpmiddelen In dit onderdeel is een korte beschrijving opgenomen van programma's. Wanneer je meer uitgebreide mogelijkheden tot je beschikking wilt hebben.zijn vermeld in hexadecimale notatie. Voorbeelden van een tekst-georiënteerde 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. Deze editors geven het document weer in een vorm. dan kun je kiezen voor een aparte CSS-editor. die je kunt gebruiken bij het bouwen van een website. Linkcheckers: zijn handig om te controleren of alle opgenomen hyperlinks kloppen. Aan de orde komen: • • • • • • HTML. Bekende voorbeelden van WYSIWYG-editors zijn Dreamweaver van Adobe en Expression Web (de vervanger van het vroegere Frontpage) van Microsoft. Nadeel van zo'n eenvoudige tekst-editor is dat je de code geheel met de hand moet intypen. kan het verlies van de controle op de opgenomen code een nadeel zijn. Als alternatief kun je het palet ook bekijken met RGB-waarden in numerieke getallen. hoef je bij het gebruik van dit soort editors maar beperkt kennis van HTML te hebben. Bij de verschillende onderdelen is niet gestreefd naar volledigheid. Hierna worden de tekst-georiënteerde HTML-editor Macromedia HomeSite en de CSS-editor TopStyle beschreven. Validators: zijn er om te controleren of de gebruikte code correct is en de documenten aan de officiële standaarden voldoen. Dat wil zeggen dat ze gemaakt kunnen worden met een gewone tekst-editor. Soms hebben HTML-editors (eenvoudige) mogelijkheden ingebouwd om stylesheets te maken.en CSS-editors: gebruik je om de HTML-documenten en stylesheets te maken.

Je kunt dat doen met een online validator. of met behulp van één van de zelf te configureren knoppenbalken. 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. Meer informatie: TopStyle. Meer informatie vind je op de site van A Real Validator. Vaak bieden deze programma's echter wel extra mogelijkheden. A Real Validator Het al wat oudere shareware programma A Real Validator maakt bij de controle van de HTML-code gebruik van officiële door het W3C opgestelde "document type definitions" (t/m HTML 4.Macromedia HomeSite Tot de beste HTML-editors behoort zonder twijfel Macromedia HomeSite. omdat eigenschappen niet of niet correct ondersteund worden. Dat wordt gedaan door gebruik te maken van officiële door het W3C voor de verschillende HTML-versies opgestelde "document type definitions" (DTD. 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. tabellen. Het programma A Real Validator is een echte validator. zie ook de beschrijving van de DOCTYPE-declaratie). Omdat de controle niet plaatsvindt op basis van een officiële DTD. met waar nodig verwijzingen naar toelichting in help-bestanden. TopStyle Met de CSS-editor TopStyle kun je stylesheets maken en bewerken. Elementen kunnen ingevoegd worden via de rechter muisknop. De opties Tag Insight en Tag Completion maken het mogelijk tijdens het typen attributen en de beëindiging van een element snel toe te voegen. is het verstandig je HTMLdocumenten altijd voor publicatie te controleren. Zo zien ze soms fouten over het hoofd. zijn dit soort programma's over het algemeen minder nauwkeurig waar het gaat om het juiste gebruik van de HTML-code. HomeSite bevat een ingebouwde HTMLvalidator voor het controleren van de HTML-code. maar de resultaten van de controle zijn helaas niet altijd correct.01) en levert daardoor zeer betrouwbare resultaten. Als alternatief kan echter ook de Professional versie van het programma CSE HTML Validator in HomeSite geïntegreerd worden. maar ook een programma voor offline controle gebruiken. HomeSite heeft een eigen ingebouwde browser. Wanneer je de controle door Topstyle wilt aanvullen met een beoordeling door de online CSS-validator van het W3C. Met behulp van de Style Inspector kun je stijleigenschappen selecteren. Door rechts te klikken op de activering van een element en te kiezen voor bewerken. . Voor offline controle kunnen ook CSE HTML Validator en HTML Tidy gebruikt worden. voorzien van waarden en toevoegen aan een stijlblad. Uitgebreide wizards zijn er voor het maken van frames. Uitgebreide mogelijkheden zijn er voor zoeken en vervangen. wordt een dialoogvenster geopend waarin ook de nieuwste attributen uit HTML 4. of komen ze met valse foutmeldingen. Een ingebouwde linkchecker test of de hyperlinks in een enkel document of in een hele site kloppen. dan kan dat direct vanuit het programma. scripts en stylesheets. Validators Om er achter te komen of je de HTML-code correct hebt opgenomen. kunnen tegelijkertijd gecontroleerd worden. maar ondersteunt ook Internet Explorer als interne browser. Dat wil zeggen dat de HTML-code op dezelfde wijze wordt gecontroleerd als een online validator. In een preview venster kun je direct het resultaat zien. Bovendien wordt per versie van de belangrijkste browsers aangegeven of er problemen in de weergave zijn te verwachten. al dan niet gedefinieerd in een project. De foutmeldingen worden op een gebruiksvriendelijke wijze weergegeven. Naar wens kunnen nieuwe of eigen DTD's toegevoegd worden. Het biedt veel gebruiksgemak en een groot aantal geavanceerde mogelijkheden.0 zijn opgenomen. Spellingcontrole is in meerdere talen beschikbaar. In het voorjaar van 2009 is de ontwikkeling van Macromedia HomeSite door Adobe stopgezet. Het programma is ontwikkeld door de maker van de online validator WDG HTML Validator. Meerdere documenten. of wordt vanuit de HTML-documenten verwezen naar stijlen die niet gedefinieerd zijn. bijvoorbeeld bij het corrigeren van de gevonden fouten.

Klik je op een fout of melding. maar bijvoorbeeld ook met de gratis HTML-editors 1st Page 2000 en HTML-Kit. of niet ondersteund worden door de verschillende browsers. Meer informatie: AI Internet Solutions.5). Als alternatief voor het werken in een DOS-box kun je gebruik maken van een HTML-editor. Linkcheckers Een controle op de juistheid van de hyperlinks in je HTML-documenten is belangrijk. Xenu's Link Sleuth De gratis linkchecker Xenu's Link Sleuth doet z'n werk goed en snel. HTML Link Validator HTML Link Validator is ongeveer even snel als Xenu. is het gebruik van een linkchecker aan te bevelen. Daarnaast wordt in de Professional versie aangegeven welke van de gebruikte elementen of attributen geen deel uitmaken van HTML 4. Xenu kan geen links binnen documenten controleren. De Professional versie kan geïntegreerd worden onder meer met de HTML-editor Macromedia HomeSite. Het programma controleert op fouten in de HTML-code en schrijft het resultaat weg in een tekstbestand. In beide versies wordt binnen het programma een overzicht gegeven van de fouten en andere meldingen. Voor meer informatie: Xenu. maar kunnen ook in een uitgebreider rapport door de browser worden weergegeven. HTML Tidy Het gratis programma HTML Tidy beschikt niet over een eigen Windows schil en moet in een DOS-box worden uitgevoerd. dat de lay-out van het brondocument ook zal wijzigen. De resultaten zijn te zien in het Xenu venster.of txt-formaat genereren. browser-specifiek zijn. Naar wens kunnen bepaalde links of bestandstypen uitgesloten worden van de controle. Dat is het geval met Macromedia HomeSite (vanaf versie 4.CSE HTML Validator Een veel gebruikt programma voor offline controle van de HTML-code is het programma CSE HTML Validator. De resultaten van de controle worden op een overzichtelijke manier binnen het programma weergegeven. Indien gewenst kun je de fouten ook direct laten corrigeren. De Professional versie heeft een meer uitgebreide controle op de HTML-code dan de Lite versie. Wanneer je HTML Link Validator langer wilt gebruiken dan 30 dagen. Zeker als je veel links in je documenten hebt opgenomen. waarin HTML Tidy geïntegreerd is. Niet alleen is het vervelend voor bezoekers als bepaalde hyperlinks niet blijken te werken. Browsers . Bijvoorbeeld Xenu's Link Sleuth of HTML Link Validator. maar je moet er dan wel op bedacht zijn. Meer informatie vind je op de site van HTML Tidy. 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. dan spring je in de ingebouwde editor naar de juiste regel in het HTML-document en kun je direct de noodzakelijke wijzigingen aanbrengen. Van CSE HTML Validator zijn er twee versies: de gratis Lite en de shareware Professional. maar controleert dan wel gelijk alle links binnen documenten. 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. Voor meer informatie: HTML Link Validator. dan moet je een registratie kopen.0. Het programma kan een uitgebreid rapport in html. het zal bovendien de indruk van je site negatief beïnvloeden.

onderdeel van het pakket met internet programma's Netscape Communicator. dan worden de gedefinieerde stijlen ook niet weergegeven. dat het niet echt de moeite loont je site ermee te controleren. Van Cascading Style Sheets ondersteunt Navigator 4 een behoorlijk deel van CSS 1 en een beperkt deel van CSS 2. De later verschenen versies Navigator 4. die zich aan de verschillende webstandaarden houden. Netscape Navigator 4 (medio 1997.0 uit te komen. Onhandig is bovendien dat de weergave van CSS geregeld is via JavaScript: zet een gebruiker de ondersteuning voor javaScript uit. Gezien het grote aantal browsers op de markt zul je je enige beperking moeten opleggen.2 zijn uitgebracht. De laatste versies ondersteunen HTML 4. Microsoft Internet Explorer en Opera wordt aangegeven met welke versies van deze browsers een controle in ieder geval verstandig is. is het verstandig er dan wel voor te zorgen dat deze browser de stijlen niet kan weergeven. Uiteraard door Mozilla dat de versienummering van Gecko volgt. CSS 2 (vrijwel geheel). is onder de naam Gecko vanaf de grond opnieuw opgebouwd. In de hierna opgenomen beschrijving van de Netscape Navigator. 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. De lay-out engine. Firefox. XHTML. CSS 1 (geheel). maar ook door Netscape Navigator waarvan sinds medio 2002 de versies 7. De Gecko lay-out engine wordt inmiddels door een behoorlijk aantal browsers op verschillende platforms (Windows.0 (vrijwel geheel). Bij beide browsers gaat het om een pakket aan internet programma's. Nadat eigenaar AOL medio 2003 het besluit nam met de ontwikkeling van browsers te stoppen. In eerste instantie lag de coördinatie daarvan bij de onder de vlag van Netscape opererende Mozilla Organization. een e-mailprogramma en een nieuwslezer bevat. zijn de activiteiten voortgezet door de zelfstandige Mozilla Foundation. maar ook als afzonderlijk programma verkrijgbaar) heeft als belangrijkste nieuwe mogelijkheid het gebruik van layers.5 t/m 4. Daardoor kon iedereen bijdragen aan het verbeteren van het programma en dat heeft inmiddels duidelijk zijn vruchten afgeworpen. In Navigator 2 wordt het gebruik van frames. dat deel van de browser dat een HTML-document analyseert en op het scherm weergeeft. Sindsdien zijn regelmatig nieuwe versies uitgebracht en eind 2004 is Gecko 1. Linux.0 ondersteund. De uitgebreide mogelijkheden uit HTML 4. Netscape Navigator 6 en hoger. Mac OS) gebruikt. Enkele van deze testversies zijn vanaf november 2000 ook officieel uitgebracht in Netscape Navigator 6. ingesloten geluidsfragmenten en JavaScript 1.0 voor tabellen en formulieren worden niet door Navigator 4 ondersteund.8 in ontwikkeling. Het gebruik van Netscape Navigator 4 en lager is zo minimaal. Vanaf medio 2002 wordt er naast het pakket Mozilla ook gewerkt aan de ontwikkeling van .0 t/m 7. Mozilla. 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. Netscape Navigator t/m 4. Navigator 3 (medio 1996) kent op het gebied van HTML vooral nieuwe attributen voor bestaande elementen en ondersteunt daarnaast JavaScript 1.1. Java applets. Daarna hebben tot mei 2002 een groot aantal testversies van Gecko het licht gezien.8 kennen geen nieuwe of verbeterde mogelijkheden op het gebied van HTML en CSS.x Netscape Navigator is vanaf de eerste versie uit najaar 1994 gedurende een aantal jaren de meest gebruikte browser geweest. W3C Document Object Model. 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.0 t/m 6. die op 5 juni 2002 verscheen. Netscape Navigator (eigenlijk Mozilla in een andere verpakking) bevat daarnaast nog een programma voor instant messaging. Na ruim vier jaar ontwikkeling werd Gecko stabiel genoeg geacht om met de eerste versie 1. Het doel achter de Gecko lay-out engine is het mogelijk maken van browsers.Ook browsers zijn een belangrijk hulpmiddel bij het ontwikkelen en onderhouden van een website. Dat gebeurde in de eigen browser Mozilla. dat naast de webbrowser ook een WYSIWYG HTML-editor. XML en JavaScript en doen dat over het algemeen zeer correct.2 (versienummer 5 is overgeslagen). Gezien de fouten in Netscape Navigator 4 bij de weergave van stylesheets. De eerste preview van een nieuwe browser gebaseerd op de Gecko lay-out engine verscheen in december 1998. Zie hiervoor het onderdeel Stijlen verbergen. De ondersteuning kent echter zeer veel fouten.

Van verbeteringen in de weergave is lange tijd echter geen sprake geweest. Op het gebied van HTML en CSS is er maar weinig veranderd ten opzichte van versie 4.5. Open het overzicht in een nieuw venster. maar vaak niet correct. Internet Explorer 3 (augustus 1996) daarentegen begint al aardig de competitie met Netscape Navigator 3 aan te kunnen en biedt ondersteuning voor (inline) frames. 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. Van JavaScript wordt versie 1. De ontwikkeling van Netscape Navigator is in februari 2008 gestopt. Handig in Firefox is het "tabbed browsing". Van Cascading Style Sheets wordt een deel van CSS 1 ondersteund. dat het gebruik gedurende lange tijd speciale voorzorgen zal vragen. Voor Internet Explorer 6.0 wordt een groot deel ondersteund. Een goed voorbeeld daarvan is de Web Developer extension. wordt de DOCTYPE-declaratie gebruikt om te bepalen hoe een document weergegeven moet worden. zal de weergave daardoor vaak anders zijn dan de auteur heeft bedoeld. Als laatste van de bekende browsers werkt Internet Explorer met versie 7 nu ook met "tabbed browsing".afzonderlijke programma's.0 zijn in de loop van de tijd updates verschenen. maar via een kort leven als Firebird kreeg het programma als definitieve naam Firefox.2 ondersteund. Mozilla en Firefox. Internet Explorer 5 is in maart 1999 verschenen. Van HTML 4. 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. De nieuwe mogelijkheden hebben vooral betrekking op DHTML (Dynamic HTML) en XML (Extensible Markup Language). die vooral op het gebied van CSS de nodige verbeteringen kent. In een browser die zich wel aan de webstandaarden houdt. Omdat veel bestaande documenten afgestemd zijn op niet volgens de webstandaarden werkende browserversies. Gezien het sterk toegenomen gebruik is het verstandig je site te controleren met de verschillende versies van Firefox. die vooral bedoeld waren om allerlei veiligheidslekken te dichten. Internet Explorer 8 is in maart 2009 uitgebracht en kent met name op het gebied . De implementatie van het OBJECT element kent helaas zoveel fouten. Java applets. In oktober 2006 is Internet Explorer 7 verschenen. Je kunt ook oudere versies downloaden: Netscape Navigator. Mozilla en Firefox de datum en het nummer van de Gecko lay-out engine opgenomen. In het volgende overzicht zijn voor de verschillende versies van Netscape Navigator. Daarnaast kan Firefox uitgebreid worden met kleine programma's die extra functionaliteit bieden. ingesloten geluidsfragmenten en extra opmaak bij tabellen. De eerste officiële versie van Firefox is in november 2004 uitgebracht. Bij de webbrowser gebeurde dat aanvankelijk onder de naam Phoenix. Meer informatie over de genoemde browsers: Firefox en SeaMonkey.5. die zich vooral richt op de productontwikkeling en verspreiding van Firefox en het e-mailprogramma Thunderbird. Op het gebied van scripts worden Visual Basic en de eigen JScript (komt globaal overeen met JavaScript versie 1.0 (augustus 2001) kent wel weer een aantal verbeteringen en ondersteund nu CSS 1 volledig en wat meer overeenkomstig de verschillende webstandaarden. Dat geldt in belangrijke mate ook voor de in juli 2000 verschenen versie 5. In augustus 2005 heeft de Mozilla Foundation een aparte dochteronderneming opgezet (Mozilla Corporation).0) ondersteund. Microsoft Internet Explorer Van Microsoft Internet Explorer boden de versies 1 en 2 (respectievelijk augustus en november 1995) zo weinig mogelijkheden. Het complete Mozilla pakket wordt sindsdien onder de naam SeaMonkey door vrijwilligers verder ontwikkeld. een jaar later gevolgd door versie 1. dat ze op geen enkele manier een bedreiging vormden voor de toen meest gebruikte browser Netscape Navigator. waaronder de extra mogelijkheden voor formulieren. Om de aansluiting met bestaande documenten te houden. Internet Explorer 6. Internet Explorer 4 (oktober 1997) kan zich ruimschoots meten met Netscape Navigator 4 en dat is ook te zien aan het toegenomen gebruik. waarmee je binnen hetzelfde browservenster meerdere documentvensters in tabbladen kunt openen. Veel bestaande HTML-documenten zijn ontwikkeld voor browsers die zich niet goed aan de verschillende webstandaarden houden.

1 (december 1996). Ook Opera kent sinds versie 9.en uitzoomen en afdrukken op een instelbare schaal. Opera 2. De ondersteuning van CSS 2 is in de loop van de tijd uitgebreid en in versie 6. beschikt over de meeste basismogelijkheden van HTML en frames. Een verbinding kun openen je via de Site Manager. 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.5 (november 1998) die van Java applets. 5 en 6 (achtereenvolgens juni 2000. of om bestanden van een server naar je PC thuis te downloaden. de eerste versie welke op enigszins ruime schaal gebruikt is. Meer informatie over FileZilla vind je bij SourceForge. De ondersteuning van de verschillende webstandaarden is over het geheel genomen zeer compleet en correct: HTML 4. in versie 3. CSS 1 (geheel). Er is ook een archief van oudere versies beschikbaar. In januari 2003 is Opera 7 uitgebracht met de nieuwe lay-out engine Presto. 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.0 al redelijk compleet.van het naleven van webstandaarden veel verbeteringen. De DOCTYPE-declaratie wordt gebruikt. 7 en 8. Voor meer informatie: Microsoft. Tot de kenmerken van Opera behoren niet alleen compactheid en snelheid. XHTML.0 kleine programma's (widgets) die extra functionaliteit bieden. december 2001 en november 2001) ondersteund. 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. maar ook via een snelknop op de knoppenbalk. zoals lettertype. XML en ECMAScript).50 kun je Opera gebruiken zonder kosten én zonder reclame.0 (vrijwel geheel). het snelschakelen tussen de instellingen van het document en die van de gebruiker.1. Afgebroken downloads en uploads kunnen worden hervat (handig als er bij het downloaden of uploaden van grote bestanden bijna aan het eind iets misgaat). Opera Opera is na Microsoft Internet Explorer en Mozilla/Firefox de derde browser op de markt. In versie 3 (december 1997) is de ondersteuning van JavaScript en een aantal plug-ins opgenomen.0 was het kopen een registratie niet meer verplicht als je bereid was een reclamebanner te accepteren.5 en slechts beperkt door Opera 4.5 en hoger ondersteunt daarnaast Cascading Style Sheets (CSS 1) en doet dat tamelijk correct. Vanaf versie 5. Vanaf versie 8.0 voor tabellen en formulieren worden niet door Opera 3. . CSS 2 (vrijwel geheel). Daarnaast het werken met meerdere documentvensters in tabbladen binnen één browservenster. FileZilla FileZilla is een FTP-programma dat je zonder kosten kunt gebruiken. Het beschikt over een uitgebreide Site Manager. W3C Document Object Model. De laatste stabiele versie van Opera is 10. De uitgebreide mogelijkheden uit HTML 4. in. Gezien het gebruik van Internet Explorer is het aan te raden je site te controleren met de versie 6 . Wanneer je Opera wilt gebruiken voor de controle van je HTML-documenten. Opera 3. Aanbevolen programma's zijn FileZilla en FireFTP. Voor meer informatie: Opera. waarin je de gegevens van de verbindingen kunt opslaan. om te bepalen of een document volgens de webstandaarden op het gebied van HTML en CSS weergegeven moet worden of juist niet. 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. puntgrootte en kleur van de verschillende koppen en de tekst en wel of geen ondersteuning van frames. maar zeker ook de vele opties voor persoonlijke instellingen.

kun je bijvoorbeeld ook voorkomen dat bezoekers geconfronteerd worden met fouten in hun browser (zie bijvoorbeeld het onderdeel CSS . welke niet door alle browsers ondersteund worden. Grafische programma's Wanneer je afbeeldingen in je website wilt opnemen. het roteren van de afbeelding. Dat kan bijvoorbeeld handig zijn als in je pagina mogelijkheden opgenomen zijn. dan kan het soms nodig zijn deze eerst te bewerken. het aanbrengen van effecten en het aanpassen van kleurdiepte. Je kunt FireFTP downloaden bij Mozilla Firefox Add-ons.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. dan kun je bestanden up. Behalve bekijken en omzetten van afbeeldingen kun je met IrfanView echter ook allerlei bewerkingen uitvoeren. IrfanView IrfanView is een gratis programma dat vooral bekend staat als een image-viewer/converter voor een groot aantal bestandsformaten. maar in plaats van als zelfstandig programma wordt hij uitgevoerd in een tabblad in de browser. Bijvoorbeeld het maken van een uitsnijding. helderheid en contrast. Het bevat slechts een beperkt aantal voorbeelden. Verwijzingen naar sites met meer voorbeelden en uitleg worden hierna gegeven. die gebruikt kunnen worden bij het maken van een HTML-document.en downloaden met de add-on FireFTP.JavaScript Frequently Asked Questions Beschrijvingen van de mogelijkheden van JavaScript:   Netscape DevEdge JavaScript Central Microsoft Script Technologies . Eén van de programma's waarmee je dat kan doen. is IrfanView. Informatie elders Veel JavaScript oplossingen vind je bij:  irt. Deze add-on biedt in grote lijnen dezelfde mogelijkheden als FileZilla.FireFTP Wanneer je Firefox als browser gebruikt. 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. 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.org . Met gebeurtenissen. welke afhankelijk zijn van de browser.

appName: Microsoft Internet Explorer 4.1. of de bezoeker een bepaalde browser gebruikt.en browsers).30729. . appCodeName en userAgent van het navigator object kan informatie over de gebruikte browser weergegeven worden. ziet de informatie er als volgt uit: navigator.0: Netscape Navigator 4: nee nee nee Microsoft Internet Explorer 6. appVersion.write(navigator. . Microsoft Internet Explorer 5. kun je in een nieuw venster bekijken voor Microsoft Internet Explorer. Voor de browser. //--> </SCRIPT> Voor de overige eigenschappen gaat het op een vergelijkbare manier.1. De informatie. . Netscape Navigator en Opera.appCodeName: Mozilla navigator. welke gegeven wordt door de verschillende eigenschappen.1.4322) navigator.x: Microsoft Internet Explorer 7.0.0.NET CLR 2.0.0. Mozilla.5.4506. navigator.0: Microsoft Internet Explorer 8.x: nee ja nee . . Trident/4.3.NET CLR 3.0 (compatible.50727. .0.30729.NET CLR 3. . MSIE 8.0.1. Trident/4.2152. .3.NET CLR 1.NET CLR 2.1.0: Mozilla 1. Windows NT 5.NET CLR 3. Firefox. InfoPath. InfoPath. .2152.NET CLR 1.5.0. uiteraard alleen als de browser JavaScript ondersteund.50727. Windows NT 5.appName). GTB7.userAgent: Mozilla/4. 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.NET CLR 3.0. GTB7.4506.4322) In de Body van dit document is voor de appName eigenschap het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.1.0 (compatible.appVersion: Browsertest In het volgende voorbeeld wordt getest. MSIE 8. waarmee deze pagina bekeken wordt.

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

//--> </SCRIPT> Voor Opera 10 moet je testen op de aanwezigheid van "Presto/2.15") != -1) || (navigator.userAgent.write(OP8 ? "ja" : "nee").write(OP10 ? "ja" : "nee").test Opera 10 var OP10 = (navigator. //--> </SCRIPT> In Opera 4 en hoger kan de gebruiker instellen als welke browser het programma geïdentificeerd moet worden. document.write(OP9 ? "ja" : "nee").userAgent.userAgent.test Opera 9 var OP9 = ((navigator. De waarde van navigator. .5".document.indexOf("Opera 10") != -1). <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-.indexOf("Opera/9") != -1)) && (navigator.userAgent.indexOf("Opera 9") != -1) || (navigator. document.userAgent. document. 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.15" (Presto is de lay-out engine van Opera) en "Opera 10".2.0 var FF20 = (navigator. //--> </SCRIPT> Document openen afhankelijk van browser De browsertest kun je bijvoorbeeld gebruiken om te bepalen welk document geopend moet worden.indexOf("Presto") == -1).userAgent.indexOf("Firefox/2. bijvoorbeeld "Firefox/2.2.y" in navigator.test Firefox 2. //--> </SCRIPT> Omdat Opera 10 zich ook identificeert als "Opera 9. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-.userAgent.y test je op de aanwezigheid van "Firefox/x. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-. //--> </SCRIPT> Voor Firefox x. waarbij 'x' het versienummer van de browser is.0") != -1).write(FF20 ? "ja" : "nee").0" of "Firefox/3.userAgent heeft daardoor verschillende uitkomsten.userAgent.indexOf("Opera 8") != -1) || (navigator. document.userAgent.test Opera 8 var OP8 = (navigator. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-.indexOf("Opera/8") != -1).indexOf("Presto/2.userAgent.80" moet de test voor "Opera 9" uitgebreid worden.write(MOZ1 ? "ja" : "nee").

Firefox. } else .href="e3.href="e4.html".. } else if (navigator. 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. Probeer dit voorbeeld in een nieuw venster."> . Het BODY element van het document in het nieuwe venster.userAgent. Een klein deel van het script wordt hierna weergegeven. Netscape Navigator. = (nuA. staat een script waarin achtereenvolgens getest wordt of het gaat om een bepaalde versie van Microsoft Internet Explorer.indexOf("Opera") != -1). is als volgt opgebouwd: <BODY onload="browsertest().indexOf("MSIE 3") != -1) { window... = (nuA. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function browsertest() { if (navigator. In het volgende voorbeeld wordt slechts de naam van de browser vermeld. of Opera.userAgent.indexOf("Opera/3") != -1) && M3.. Mozilla.indexOf("Mozilla/4") != -1)..userAgent..indexOf("MSIE 4") != -1) { window. het volledige script kun je in een nieuw venster bekijken.location. maar meer voor de hand liggende mogelijkheden zijn bijvoorbeeld het afhankelijk van de browser gebruiken van stylesheets en inline frames.Dat kan dan een document zijn. .indexOf("Mozilla/3") != -1). = (nuA. } //--> </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. = (nuA.indexOf("Mozilla/2") != -1).location. dat geopend wordt in het nieuwe venster. In de head van het document. </BODY> Algemeen script voor browsertest Wanneer je vaker in een document gebruik maakt van een browsertest. wat speciaal is toegesneden op de mogelijkheden van de betreffende browser.html". = (nuA.

indexOf("Opera 6") != -1) || (nuA. var MOZ = GECKO && (nuA. (nuA.2.indexOf("rv:1") != -1). (nuA.indexOf("MSIE 6. = (nuA. Een volgend script kan er daardoor bijvoorbeeld als volgt uitzien: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- .appName == "Netscape") && !OP && !MOZ.indexOf("Presto") == -1).indexOf("Opera 10") != -1).indexOf("MSIE 8.indexOf("Opera/9") != -1)) && (nuA.0") != -1). zonder de testen opnieuw te hoeven uitvoeren.15") != -1) || (nuA. (nuA. NN && M4. (nuA. (nuA. (nuA.indexOf("Firefox/1.indexOf("Firefox") != -1). = (nuA.indexOf("Opera 4") != -1) || (nuA. (nuA. NN4 en IE50) direct in andere scripts in hetzelfde document gebruikt worden. NN && M3.5") != -1).indexOf("Opera/4") != -1).0") != -1). (navigator.0") != -1) && !OP.indexOf("MSIE 7.indexOf("Opera/7") != -1).indexOf("Opera/3") != -1) && M4.indexOf("Netscape/8") != -1). (nuA.indexOf("Opera/5") != -1).indexOf("Firefox") == -1). = (nuA. = ((nuA.indexOf("MSIE 4") != -1).indexOf("Firefox/3.indexOf("Netscape") == -1) && (nuA. = (nuA. (nuA.indexOf("Opera 9") != -1) || (nuA.indexOf("Netscape/7") != -1).indexOf("Opera/6") != -1).indexOf("MSIE 3") != -1). (nuA. //--> </SCRIPT> Omdat bovenstaande code geen onderdeel is van een functie.indexOf("Opera 3") != -1) && M4. = = = = = = = = (nuA. NN && M2.0") != -1) && !OP. (nuA. var GECKO = (nuA.indexOf("Firefox/2. = (nuA.indexOf("MSIE 5.indexOf("Opera 7") != -1) || (nuA.0") != -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.5") != -1).0") != -1) && !OP. (nuA.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. = (nuA. (nuA.indexOf("Navigator/9") != -1).5") != -1) && !OP. (nuA.6") != -1).indexOf("Firefox/1. (nuA.indexOf("Presto/2.indexOf("Firefox/3.indexOf("Opera 8") != -1) || (nuA.indexOf("Firefox/3. = (nuA. var MOZ1 = MOZ && (nuA.indexOf("Opera/8") != -1). (nuA.indexOf("Opera 5") != -1) || (nuA.indexOf("Netscape6") != -1).indexOf("MSIE") != -1) && !OP.indexOf("Gecko") != -1).0") != -1) && !OP.indexOf("MSIE 5. (nuA. kunnen de verschillende variabelen (zoals OP35.

1 en Mozilla 1.appVersion.4" en "20030624" (24 juni 2003) zijn: MOZ 1. kun je voor deze browsers één test uitvoeren. Mozilla en Firefox gebruik maken van dezelfde lay-out engine Gecko. Omdat Netscape Navigator 6 en hoger.4 respectievelijk "rv:1.0 (Windows..userAgent tot je beschikking. </BODY> Hier wordt het script geactiveerd met behulp van een hyperlink. Dit versienummer komt overeen met het versienummer van Mozilla.function browseralert() { if (IE) { alert("Wel eens een andere browser dan Internet Explorer geprobeerd?"). vastgelegd in het formaat jjjjmmdd. } else { alert("Goed zo.4) Gecko/20030624 Mozilla/5. rv:1. Voor Microsoft Internet Explorer net Netscape Navigator t/m versie 4 is het versienummer af te leiden uit de waarde van navigator. Win98. Voor Microsoft Internet Explorer 4 en hoger gebruik je voor de test de volgende code: var IE4plus = IE && (parseInt(navigator. In de volgende weergave van navigator."> .html" TARGET="voorbeeld" onclick="browseralert().4 NN 7. U. Wil je testen op Netscape Navigator 3 en hoger dan is de code: var NN3plus = NN && (parseInt(navigator..">voorbeeld</A>.</P> Probeer dit voorbeeld.1 We zullen hier de datum gebruiken om te testen om welke versie van de browser het gaat. Aan het algemene browser script kun je ook nog code toevoegen om te testen of de browser minimaal een bepaald versienummer heeft. en-US. Win98.1 Mozilla/5.appVersion) >= 3). U. } } //--> </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(). en-US. Daarbij heb je twee kenmerken in navigator. dat de genoemde kenmerken voor Netscape Navigator 7.userAgent is te zien.appVersion) >= 4). maar wijkt af van de versienummers van Netscape Navigator en Firefox. rv:1. Aan het A element is daarvoor het onclick attribuut toegevoegd: <P>Probeer dit <A HREF="js-voorbeeld.0 (Windows. . Het eerste kenmerk is het versienummer van de Gecko engine en begint met "rv:". jij kiest zelf je browser!"). return false. Het tweede kenmerk is de datum waarop de gebruikte Gecko engine is uitgebracht.4) Gecko/20030624 Netscape/7.

kun je het volgende script gebruiken. welke de volgende opbouw heeft: . var var var var var beginopera operahfdversie operasubversie operaversie OP72plus = = = = = (nuA).substring(beginopera + 6.beginopera + 7). kun je in een nieuw venster bekijken. var WIN = nuA. wordt gegeven bij de beschrijving van browser-specifieke stijlbladen.begingecko + 14).4 en hoger. In het JavaScript maak je gebruik van de open-methode. Een voorbeeld van het gebruik van een algemeen script voor de browsertest. var beginopera = (nuA).beginopera + 9). OP && (parseInt(operaversie) >= 72).5. (nuA). Het versienummer staat nu echter opgenomen in navigator. (nuA). omdat je dan invloed hebt op hoe het nieuwe venster eruitziet. Wanneer ook de subversie van belang is (bijvoorbeeld versie 7. maar in een (vaak kleiner) nieuw venster. Wanneer het alleen gaat om het hoofdversienummer (bijvoorbeeld versie 4 of hoger). var var var var GECKO begingecko geckodatum MOZ14NN71plus = = = = (nuA.substring(begingecko + 6. var LIN = nuA. Macintosh) dat de bezoeker gebruikt. = FF15 && LIN. nuA. var operahfdversie = (nuA).1 en hoger. var FF15w var FF15m var FF15l = FF15 && WIN. of Netscape Navigator 7.2 of hoger).lastIndexOf("Opera"). bijvoorbeeld wanneer je een style sheet gebruikt met daarin vaste puntgroottes gedefinieerd. Linux.lastIndexOf("Gecko").beginopera + 7).userAgent. door bijvoorbeeld op een knop of een hyperlink te klikken.indexOf("Mac") != -1.substring(beginopera + 6. In de uiteindelijke test laat je de punt tussen hoofd. moet je een wat uitgebreider script gebruiken.lastIndexOf("Opera"). = FF15 && MAC.Het volgende script gebruik je als je wilt weten of het gaat om Mozilla 1.en subversienummer weg. Tenslotte is het soms handig om de werking van een script te laten afhangen van het platform (Windows. Het openen van zo'n nieuw venster kun je het beste regelen via een JavaScript.indexOf("Gecko") != -1).substring(beginopera + 8. nuA.indexOf("Win") != -1. Hierna is dat gedaan voor Firefox 1. Ook voor Opera kun je geen gebruik maken van navigator.appVersion om het versienummer te achterhalen. De bezoeker kan dit nieuwe venster openen. Firefox. Je kunt dan aan het algemene script een platformtest toevoegen. var OP4plus = OP && (parseInt(operahfdversie) >= 4). GECKO && (geckodatum >= 20030624) Een overzicht van versies van de verschillende browsers en de versiedatum van de ervoor gebruikte Gecko lay-out engine. var MAC = nuA. Soms is het handig om bepaalde informatie niet in het hoofdvenster weer te geven. (operahfdversie + operasubversie).indexOf("Lin") != -1.

hoe een met behulp van JavaScript te openen venster er moet uitzien. De vensternaam kan gebruikt worden in het TARGET attribuut van een hyperlink. De kenmerken "width" en "height" hebben betrekking op dat deel van het venster. De kenmerken "top" en "left" worden alleen door Netscape Navigator 4 en Microsoft Internet Explorer 4 ondersteund. Voor alle voorbeelden in dit onderdeel geldt.open niet onderbroken mag worden door een harde overgang naar de volgende regel. 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". wordt een compleet opgetuigd venster geopend in de standaard grootte. De vensterkenmerken bepalen het uiterlijk van het venster. Druk op de knop om het venster te bekijken. vensternaam. vensterkenmerken) URL geeft aan welk document in het nieuwe venster geopend moet worden. zoals "width" en " height". bij de overige kenmerken in "yes" of "no". Als slechts enkele opties worden benoemd. Er wordt dus een kaal venster weergegeven. waarin het document wordt weergegeven en zijn dus exclusief de ruimte die bijvoorbeeld menubalken. 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. Als geen van de kenmerken wordt benoemd in het script. dat de code tussen de haakjes achter window. In het volgende voorbeeld zijn in het script alleen de kenmerken "width" en " height" benoemd. wordt voor de overige opties als waarde "no" aangehouden.window. In de head van dit document staat het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- .open(URL. "top" en "left" wordt de waarde aangegeven in pixels. knoppenbalken en schuifbalken innemen.

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

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

De focus-methode werkt ook niet in Microsoft Internet Explorer 3 en in Opera. hyperlink 1 hyperlink 2 hyperlink 3 .html').html'). 2 en 3.html').//--> </SCRIPT> De hyperlinks hebben de volgende opbouw: <A HREF="voorbeeld-2b. Het nieuwe venster wordt dan geopend als de muisaanwijzer over de hyperlink beweegt. het tweede vind je achter het hoofdvenster en het derde komt als gevolg van de focus-methode weer op de voorgrond. maar dit levert geen foutmelding op. Klik achtereenvolgens op hyperlink 1.">hyperlink 2</A> In plaats van de onclick event handler kan ook gebruik gemaakt worden van de onmouseover event handler. Gebruik wordt gemaakt van hetzelfde script als in de voorbeelden hiervoor. De hyperlink heeft de volgende opbouw: <A HREF="voorbeeld-2d. In het volgende voorbeeld. waarbij het gebruik van de focus-methode voor deze browser wordt uitgesloten. De volgende afbeelding is opgenomen in een hyperlink. return false. het nieuwe venster op de achtergrond wordt geplaatst. Het eerste nieuwe venster komt zoals gebruikelijk op de voorgrond.focus()" aan het BODY element van het in het nieuwe venster te openen document. Door te klikken op een volgende hyperlink."><IMG SRC="handleiding-html.">hyperlink 1</A> en <A HREF="voorbeeld-2c. dan is het niet nodig dat de bezoeker het nieuwe venster steeds sluit.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2b. return false. Vanuit de blik van de bezoeker lijkt het klikken daardoor geen effect te hebben. kun je bekijken of en hoe het werkt. is het echter nodig een tussenstap te maken. De eenvoudigste manier zou zijn het toevoegen van de onload event handler met de waarde "self. Je kunt dit echter verhelpen met een JavaScript dat er voor zorgt dat het venster op de voorgrond wordt geplaatst. Probleem is wel dat door het klikken in het hoofdvenster.html" TARGET="nieuw" onmouseover="NieuwVensterE('voorbeeld-2d.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.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2c. return false. wordt de inhoud van het nieuwe venster automatisch ververst. waarin gebruik gemaakt wordt van een eerder beschreven script om het nieuwe venster te openen. Omdat Netscape Navigator 2 de focus methode niet kent en een foutmelding geeft.

indexOf("Mozilla/2") != -1). op een vergelijkbare wijze als bij eerdere voorbeelden. In het document in het nieuwe venster staat in de body een script.. } } //--> </SCRIPT> en de activering van het BODY element van dit document heeft de volgende opbouw: <BODY . } function Verwijder() { close().focus(). Het nieuwe venster wordt.write('<A HREF="JavaScript:parent. Sluit het op de gebruikelijke wijze. 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.3000).appName == "Netscape") && (navigator. dan moet je het volgende script opnemen in het te openen document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function SluitVenster() { setTimeout("Verwijder()". kun je het NOSCRIPT element opnemen: <NOSCRIPT>Dit is een nieuw venster. geopend met een hyperlink..close()">Sluit</A> dit venster.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.') //--> </SCRIPT> Voor browsers die JavaScript niet ondersteunen. maar je kunt het ook weer sluiten. dat een hypertext link plaatst. function VensterFocus() { if (!NN2) { self. .</NOSCRIPT> Wanneer je het nieuwe venster na een bepaalde tijd automatisch wilt laten sluiten. onload="VensterFocus()"> Nieuw venster sluiten Met JavaScript kun je niet alleen een nieuw venster openen.userAgent.

indexOf("Opera/3") != -1) && (navigator. Door de opener eigenschap bovendien nog eens apart te definiëren in het document.3000). Dat gebeurt op basis van het algemene script voor de browsertest. waarmee je het opent. welke ondersteund wordt door Netscape Navigator 3 en hoger. Daarom wordt eerst getest om welke browser gaat. Als je in een document meerdere keren een pop-up venster gebruikt. Het script in de head van dit document ziet er als volgt uit: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var OP3 = (navigator. </BODY> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.height=200"). Dat script moet je dus als eerste in de head van het document plaatsen.5 en hoger. kun je het sluiten van het nieuwe venster eenvoudiger regelen via het script. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenSluit(URL) { venster = window. Hyperlinks in nieuw venster Soms wil je in een nieuw venster hyperlinks opnemen. na hoeveel milliseconden het venster sluit.userAgent.userAgent.} //--> </SCRIPT> De in de setTimeOut methode in het script opgenomen waarde geeft aan. setTimeout("venster. var NN2 = (navigator. Omdat Opera 3 niet met het script overweg kan.appName == "Netscape") && (navigator.indexOf("Mozilla/3") != -1). . mag het door deze browser niet worden uitgevoerd. "width=300.. Aan het BODY element van het document in het nieuwe venster voeg je onload event handler toe: <BODY onload="SluitVenster(). Microsoft Internet Explorer 3 en hoger en Opera 3. die een document openen in het venster. Je kunt dan gebruik maken van de opener eigenschap.close()". dat is beschreven in het onderdeel Javascript en Informatie over de browser. } //--> </SCRIPT> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit. "nieuw". van waaruit het nieuwe venster geopend wordt. van waaruit het nieuwe venster geopend is..userAgent.indexOf("Mozilla/2") != -1).open(URL. kan ook Netscape Navigator 2 er gebruik van maken."> .

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

3*"> <FRAME SRC="voorbeeld-1a.write(indexlink).html" NAME="rechtsonder"> </FRAMESET> </FRAMESET> De hyperlink in het voorbeeld is als volgt opgebouwd: <A HREF="geenscript. Een andere is het voorkomen dat je eigen site geopend wordt in een frame van iemand anders.0 en hoger. Dat is vooral handig wanneer je niet de inhoud van alle frames van een frameset wilt wijzigen.html')\">" indexlink += "Inhoudsopgave<\/A>" document.*"> <FRAME SRC="voorbeeld-1b. return false. Uitgangspunt is een document met twee framesets.html" NAME="links"> <FRAMESET ROWS="*. rechtsboven en rechtsonder hebben: <FRAMESET COLS="*. Meerdere frames tegelijk updaten Met behulp van JavaScript kun je met één klik op een hyperlink twee frames tegelijkertijd updaten.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-1c. De bekendste toepassing is wel het gelijktijdig vervangen van documenten in meerdere frames.5 soms problemen (zie de toelichting bij de voorbeelden). 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. waarin de frames de namen links.html" in het HREF attribuut kun je het beste de URI opnemen van het document. of wanneer het gaat om frames die niet tot hetzelfde frameset behoren. Zonodig . Bekijk eerst het voorbeeld in een nieuw venster.">Update twee frames</A> In plaats van "geenscript. 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.html" onclick="FrameUpdate(). //--> </SCRIPT> JavaScript wordt veel gebruikt in combinatie met documenten met frames. dat je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Microsoft Internet Explorer 3 en Opera 3/3. Met de eerste drie voorbeelden hebben Netscape Navigator 2.<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-indexlink = "<A HREF=\"JavaScript:Index('voorbeeld-5b. Zorg dat je het bekijken van je site niet afhankelijk maakt van JavaScript.0 en hoger en Microsoft Internet Explorer 4.

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

Bijvoorbeeld: parent. parent.href = "voorbeeld-1e.5 het script niet uitvoeren.location. 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.href = "bestemming_1".location. 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. waarin het document geopend moet worden en in plaats van "bestemming_y" het pad en de bestandsnaam van het te openen document.rechtsboven.location.5 wordt het script alleen goed uitgevoerd.html". } } //--> </SCRIPT> Meerdere keren frames tegelijk updaten Wanneer je vanuit één document meerdere keren de inhoud van twee frames tegelijkertijd wilt updaten. dat is beschreven in het onderdeel Javascript en Informatie over de browser. dan is het handig om de URL's niet in het script te plaatsen. Nadeel van een complete URI is dat je de site niet meer offline kunt bekijken.frame_naam_2. Dat gebeurt ook als je in een volgende document hetzelfde script gebruikt.location. Microsoft Internet Explorer 3 en Opera 3/3.href = "http://www. 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.function FrameUpdate() { parent. Een oplossing kan zijn als bestemming niet alleen een pad en bestandsnaam op te nemen.html". } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame. Dat script moet je dus als eerste in de head van het document plaatsen.nl/javascript/voorbeeld-1d.location. maar in de hyperlinks. parent. .location. maar een complete URI. 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. Microsoft Internet Explorer 3 en Opera 3/3. In Netscape Navigator 2. Nadat via het script eenmaal documenten uit een andere directory geopend zijn. Je voorkomt daarmee dat je voor elke link een script moet opnemen.frame_naam_1.href = "bestemming_2".href = "bestemming_3". Als je dat toch wilt en het niet mogelijk is alle documenten in dezelfde directory te plaatsen.handleidinghtml.html". indien de in een frame te openen documenten steeds in dezelfde directory staan. dan kun je er als alternatief ook voor zorgen dat Netscape Navigator 2. parent.rechtsonder.href = "voorbeeld-1d.frame_naam_3.rechtsboven.

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

} } } } //--> </SCRIPT> .length > 0) && (parent. URL2) { if (IE4plus || NN3plus) { if ((parent.frames. Het script voor het updaten van frames krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1.rechtsboven. 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).name == "rechtsboven")) { parent. URL2) { if ((parent. Het kan daarom nodig zijn.length > 0) && (parent.5 een foutmelding geven als de in een bepaald frame te openen documenten niet steeds in dezelfde directory staan.location.rechtsonder. de werking van het script afhankelijk te maken van de gebruikte browser. 'bestemming_3').frames[1].location. return false.">Omschrijving link</A> In plaats van "bestemming_x" neem je het pad en de bestandsnaam op van het te openen document.location. } } //--> </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. Dat script moet je dus als eerste in de head van het document plaatsen.frames[1]. parent.rechtsonder.href = URL2.href = URL2.htm" onclick="FrameUpdate('bestemming_1'. De browsertest doe je op basis van het algemene script.Voor een bijbehorende hyperlink is de opbouw: <A HREF="geenscript. parent.name == "rechtsboven")) { parent.href = URL1.rechtsboven. 'bestemming_2'. Microsoft Internet Explorer 3 en Opera 3/3. net als in het vorige voorbeeld.location.frames. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1. Ook bij dit voorbeeld speelt dat Netscape Navigator 2. dat is beschreven in het onderdeel Javascript en Informatie over de browser.href = URL1. is het verstandig te laten testen of een frameset bestaat en bijvoorbeeld de naam van één frame overeenkomt.

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).frames.name == "frame_naam")) { parent. } //--> </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. is het verstandig te laten testen of een frameset bestaat en de naam van het frame overeenkomt. //--> </SCRIPT> In plaats van "frame_naam" neem je de naam op van het frame. Gezien de problemen die Netscape Navigator 2.location.href = "bestemming".frames[x]. Dat script moet je dus als eerste in de head van het document plaatsen. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if ((parent.frame_naam.location. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-parent. dat in het te updaten frame geopend moet worden: Bekijk het voorbeeld in een nieuw venster.frames. dat is beschreven in het onderdeel Javascript en Informatie over de browser.href = "bestemming".length > 0) && (parent. dat je wilt updaten en in plaats van "bestemming" het pad en de bestandsnaam van het document. kan het nodig zijn de werking van het script afhankelijk te maken van de gebruikte browser.length > 0) && (parent. De browsertest doe je op basis van het algemene script.href = "bestemming".frames[x].frame_naam.name == "frame_naam")) { parent.frame_naam. Om foutmeldingen te voorkomen wanneer het andere frame niet aanwezig is (bijvoorbeeld indien het document geopend wordt in het volledige venster).location.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. 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.

location.length != 0) { top. heb je er geen controle over hoe deze geopend worden: in het volledige venster. Wordt niet aan deze condities voldaan. Door een klein JavaScript in de head je document op te nemen. } //--> </SCRIPT> In het document dat je in het volledige venster laat openen. bijvoorbeeld in een navigatieframe. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top. Document niet buiten frames openen Soms gebruik je documenten. In het script wordt getest of het frameset het juiste aantal frames heeft en of het document wel in het juiste frame geopend wordt. In de head van je document plaats je het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top.frames. waarin het document geopend wordt.frames[y]. } //--> </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. Als iemand anders een link naar een document van jou opneemt. In dat geval kun je het onderstaande script in de head van het document opnemen. In plaats van "y" neem je het nummer van . of in een nieuw venster geopend moet worden. kun je voorkomen dat het document in een frameset van een ander komt.href = self.//--> </SCRIPT> Document openen in volledig venster Wanneer je zelf in je documenten hyperlinks opneemt. of in een frameset van die ander. Bijvoorbeeld de beginpagina van je site. Als dit aantal ongelijk is aan "0". in het volledige venster.location. waarvan je niet wilt dat ze geopend worden in een volledig venster. kun je zelf overigens gewoon weer framesets definiëren. Getest wordt hoeveel frames er zijn in het venster.href = "bestemming".length != n || (parent. Bekijk het voorbeeld. kun je met behulp van het TARGET attribuut aangegeven of het document in een frame (en zo ja welk).name != "framenaam")) { top.location.document. dan wordt een ander document geopend.frames. dan wordt het document in het volledige venster geopend.

selectedIndex].value != 'geen-url') { location.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.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.selectedIndex]. waarin de keuzelijst staat.options[control.handleidinghtml.het frame (bij de telling wordt gestart bij "0" en de volgorde aangehouden. Keuzelijsten worden in combinatie met JavaScript veel gebruikt als alternatief voor een lange opsomming van hyperlinks. if (control. treedt de change gebeurtenis op en wordt het bijbehorende script uitgevoerd. 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.snelmenu. Daarbij wordt aan het SELECT element de onchange event handler toegevoegd (zie het onderdeel Scripts). Als de bezoeker een mogelijkheid uit de keuzelijst kiest. } } //--> </SCRIPT> . In het voorbeeld is dat een bestand in dezelfde directory als het document.options[control. Het kan echter ook een complete URI zijn: <OPTION VALUE="http://www.documentkeuze. 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.html">Document 1</OPTION> <OPTION VALUE="keuze2. waarin de frames zijn gedefinieerd) en "framenaam" vervang je door de naam van het frame.value.nl/algemeen/wijzigingen.href = control.

wordt de geselecteerde URI gebruikt om het goede document te openen. Als dat zo is. Document openen in frame Wanneer je werkt met frames.onder.options[control. d.value != 'geen-url') { parent. //--> </SCRIPT> Voor een toelichting op het gebruik van de backslash in de beëindiging van de verschillende elementen zie het onderdeel Scripts. is het verstandig ook het formulier op te bouwen met behulp van JavaScript: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var d = document.snelmenu.selectedIndex].value.documentkeuze.write('<FORM ACTION="geen_actie" NAME="snelmenu">'). dan kun je de keuzelijst opnemen in een navigatieframe. Omdat de keuzelijst alleen werkt in browsers die JavaScript ondersteunen. Dat kan met behulp van het NOSCRIPT element en wordt toegelicht in het onderdeel Hyperlinks.html" NAME="boven"> <FRAME SRC="keuze2.write('<\/SELECT>').write('<OPTION VALUE="geen-url" SELECTED>Kies document<\/OPTION>'). d. } . d. d.write('<OPTION VALUE="keuze3.write('<OPTION VALUE="keuze1. Omdat niet elke browser JavaScript kan of mag ondersteunen is het goed om ook een alternatief voor de keuzelijst op te nemen.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. d.write('<SELECT NAME="documentkeuze" onchange="openURI()">'). Bekijk een voorbeeld daarvan in een nieuw venster. Uitgangspunt is een frameset met twee frames.html">Document 2<\/OPTION>'). d.html">Document 3<\/OPTION>'). Hierbij verwijst "snelmenu" naar het juiste formulier in het document en "documentkeuze" verwijst naar de juiste keuzelijst.*"> <FRAME SRC="keuze1.href = control.write('<\/FORM>'). welke de namen boven en onder hebben: <FRAMESET ROWS="*.html">Document 1<\/OPTION>').write('<OPTION VALUE="keuze2.options[control. Vervolgens wordt gecontroleerd of een geldige waarde voor het VALUE attribuut van het OPTION element is geselecteerd. if (control.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. d. d.selectedIndex].location.

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

De eerste hyperlink in de body van dit document heeft de volgende opbouw: <A HREF="bestemming" onmouseover="moveover('Deze link is fake'). Als je een afbeelding opneemt in een hyperlink.write('<\/FORM>'). } //--> </SCRIPT> Met behulp van JavaScript kun je een tekst laten weergeven in de statusbalk van de browser. die er voor zorgt dat het script wordt aangeroepen. return true.">Beweeg de muisaanwijzer op de link</A> Voor de afbeelding is de opbouw: <A HREF="http://www.<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (!NN2) { document. wordt geadviseerd het gebruik ervan te beperken.return true. 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.. document. kun je die echter ook van een toelichtend bericht voorzien. werkt alleen bij hyperlinks. .handleidinghtml.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."><IMG SRC="handleiding-html. Hij verdwijnt weer na een in te stellen aantal milliseconden.. Bijvoorbeeld een toelichting op een hyperlink of een copyright-melding bij het openen van een document.write('<FORM>'). Omdat scrollende (bewegende) teksten in de statusbalk bij nogal wat mensen irritatie opwekken. . Beweeg de muisaanwijzer op de hyperlink Doe het ook met deze hyperlink De onmouseover event handler (zie het onderdeel Scripts).nl" onmouseover="moveover('Bezoek de Handleiding HTML voor uitgebreide informatie over HTML en CSS').

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

substring(position.function BeweegMuisAf() { window.value= msg. } //--> </SCRIPT> Volgend voorbeeld Met JavaScript kun je een lichtkrant in je document opnemen. pause=0. } function action() { if(!pause) { clearTimeout(id).".position+95). document. pause=1.position=0. for(i=0.i<=k. function ticker() { var i. } } //--> </SCRIPT> Om het tekstveld te verbergen in browsers die JavaScript niet ondersteunen. if(position++==38) position=0.k.i++) msg+=" "+msg. Enige beperking kan dus geen kwaad.1000/10). wordt het formulier geopend met een in de body van het document geplaatst script: .pause=0. 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.msg="Dit is de inhoud van de lichtkrant. k=(75/msg. var id. Zo'n lichtkrant kan als alternatief dienen voor de lichtkrant die je kunt maken met het MARQUEE element.status="".veld1.lichtkrant1. } else { ticker(). Overigens is het goed te bedenken dat niet alle bezoekers zitten te wachten op allerlei bewegende onderdelen op je pagina.length)+1. var timerRunning = false. id=setTimeout("ticker()".

ticker() //--> </SCRIPT> Met behulp van JavaScript kunnen allerlei mogelijkheden van datum en tijd in een document worden opgenomen. document. Bij deze voorbeelden wordt gebruik gemaakt van Date object. 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. De huidige datum is: 25-04-2012 In de body van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- .write('<\/DIV>'). getYear. document.<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document. Daarom worden in de voorbeelden verschillende methoden van het Date object gebruikt om de weergave te bepalen: getDate. Het volgende script.write('<DIV ALIGN="center">'). geldt de basis voor de gebruikte voorbeelden.write('<\/FORM>'). getDay. geplaatst in de body van het document. Het geeft de datum en tijd bij openen van het document weer. getMonth en getYear worden uit het Date object respectievelijk de dag van de maand. document. getHours. Hier worden daarom slechts enkele voorbeelden van de huidige datum en tijd en de laatste wijzigingsdatum gegeven. getMinutes en getSeconds. Bovendien is het niet een erg aantrekkelijke manier om de datum en de tijd weer te geven. document.write('<FORM NAME="lichtkrant1" ACTION="geen_actie">'). Veel daarvan vallen buiten het bestek van de Handleiding HTML.write('<INPUT TYPE="text" NAME="veld1" SIZE="50">'). //--> </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.write(nu).getMonth. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-nu = new Date(). document. de maand en het jaar gehaald.

for (var i = 0."mei".getMonth()+1)].getDate(). wordt het script millennium-proof gemaakt. dagtekst = dagArray[(nu. document. maand2 = ((maand < 10) ? "0" : "") + maand. var datumweergave = "Het is vandaag " + dagtekst + " " + dag + " " + maandtekst + " " + jaar4. maand = nu. 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. document. zien gebruikers van een browser die JavaScript niet ondersteunt."februari"."oktober".getYear()."september". "dinsdag"."maart". 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. jaar = nu. } var dagArray = new initArray("zondag".length = initArray. var maandArray = new initArray("januari".write(dag2 + "-" + maand2 + "-" + jaar4). Door te testen op kleiner of groter dan 1900 en de waarde zo nodig te verhogen met 1900. dag2 = ((dag < 10) ? "0" : "") + dag.var var var var var var var nu = new Date(). dag = nu. Browsers die de eerste versie van JavaScript gebruiken (Netscape Navigator 2. //--> </SCRIPT> Omdat in JavaScript de maand januari correspondeert met "0". . i++) this[i+1] = initArray. "augustus"."zaterdag"). jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).getDate().length."juni".arguments. niets."vrijdag".getYear()."april". wordt getMonth met 1 verhoogd. var var var var var var nu = new Date(). Door met arrays te werken kunnen de dag van de week (verkregen via getDay) en de maand (verkregen via getMonth) omgezet worden in tekst."woensdag". dag = nu.write(datumweergave). i < this.getMonth() + 1."november". jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar))."maandag".arguments[i]. jaar = nu. 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). Wanneer je ook de begeleidende tekst in het script opneemt."december")."juli"."donderdag". maandtekst = maandArray[(nu.length.getDay()+1)].

wordt het script in deze browser niet uitgevoerd.write(document. 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. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function DatumWeergave(datum) { var dag = datum. wordt getDay met 1 verhoogd. Indien de server de LastModified informatie niet in de zogenaamde HTTP-header meestuurt. .5 kunnen ook niet met het script overweg en geven de standaarddatum weer. Microsoft Internet Explorer 3 en Opera lager dan 3. } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).B. Om het crashen van Netscape Navigator 2 te voorkomen. is afhankelijk van de informatie die de browser van de server ontvangt. is de code voor de jaarweergave iets aangepast. Netscape Navigator en Opera de datum 1 januari 1970 (de standaard startdatum van JavaScript) weergegeven en door Microsoft Internet Explorer de huidige datum. wordt in plaats van de laatste wijzigingsdatum door Mozilla.lastModified). zie je in het algemeen de correcte laatste wijzigingsdatum.//--> </SCRIPT> Omdat in JavaScript de dag van de week correspondeert met "0". Of je de juiste datum ook online te zien krijgt. var maand = datum.getMonth() + 1. alleen is de lastModified eigenschap opgenomen als parameter van het Date object. De laatste wijzigingsdatum van een document Met behulp van de lastModified eigenschap kun je de laatste wijzigingsdatum van een document laten weergegeven. Wanneer je een document met dit script offline op je eigen systeem bekijkt. Omdat Netscape Navigator 3 in dit geval een jaar toch in twee cijfers weergeeft. dat is beschreven in het onderdeel Javascript en Informatie over de browser.getYear(). if (jaar < 70) { var jaar4 = (jaar + 2000). //--> </SCRIPT> Als resultaat zie je: 04/25/2012 11:31:54 N. Dat script moet je dus helemaal in het begin van het document plaatsen. var jaar = datum. var maand2 = ((maand < 10) ? "0" : "") + maand. Dat gebeurt op basis van het algemene script voor de browsertest.getDate(). 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. Je gebruikt daarvoor het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.

"april". var jaar = datum."maandag"."maart". for (var i = 0. var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>".5 wordt bij de laatste wijzigingsdatum niet de correcte dag van de week wordt geretourneerd. return datumwaarde } if (!NN2) { var gewijzigd = new Date(document.write(wijzigdatum). Ook in dit geval gebeurt dat op basis van het algemene script voor de browsertest."september". if (jaar < 70) { var jaar4 = (jaar + 2000)."oktober". Daarom is deze in dit voorbeeld weggelaten. var maand = datum."mei". Door de versies van Netscape Navigator lager dan 4. } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).getDate().length.length.getDay() + 1."december").} var datumwaarde = dag + "-" + maand2 + "-" + jaar4."woensdag". Omdat Netscape Navigator crasht en Microsoft Internet Explorer 3 en Opera 3 niet de correcte datum retourneren. } document. } var datumwaarde = dagArray[weekdag] + " " + dag + " " + maandArray[maand] + " " + jaar4. i++) this[i+1] = initArray. "augustus". "dinsdag".arguments[i] } var dagArray = new initArray("zondag".lastModified)."juli". function DatumWeergave(datum) { var weekdag = datum. i < this. //--> </SCRIPT> Ook de laatste wijzigingsdatum kun je weer als tekst opnemen. 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."november". var dag = datum.length = initArray."zaterdag").getMonth() + 1."februari"."juni". var maandArray = new initArray("januari". return datumwaarde } . is er in dit voorbeeld voor gekozen de uitkomst door die browsers niet te laten weergeven.arguments."donderdag"."vrijdag".getYear().

minuten en seconden halen. Goedemorgen. document.getSeconds(). Het in de body van dit document gebruikte script heeft de volgende opbouw: .lastModified). uren = nu.if (!NN2 && !IE3 && !OP3) { var gewijzigd = new Date(document. } //--> </SCRIPT> De huidige tijd Met behulp van de methodes getHours. minuten2 = ((minuten < 10) ? ":0" : ":") + minuten. //--> </SCRIPT> Welkomstbericht afhankelijk van de tijd Door te testen hoe laat het is. seconden2 = ((seconden < 10) ? ":0" : ":") + seconden. getMinutes en getSeconds kun je uit het Date object de huidige tijd in respectievelijk uren. kun je een bezoeker met een aan het dagdeel aangepast bericht begroeten.getHours(). seconden = nu.write(tijdweergave).write(wijzigdatum). minuten = nu. var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>". 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().getMinutes(). je hebt dit document geopend op woensdag 25 april 2012 om 11:31 uur. uren2 = ((uren < 10) ? "0" : "") + uren. var tijdweergave = uren2 + minuten2 + seconden2 document.

i < this.arguments."februari"."zaterdag"). dag = nu. else if (nu. else var welkom = ("Goedenacht.arguments[i]."juni". var tijdweergave = uren2 + minuten2 if (nu. else if (nu. "). ")."september". maandtekst = maandArray[(nu. document.length = initArray."december")."mei"."maandag".getMonth()+1)].<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this. minuten2 = ((minuten < 10) ? ":0" : ":") + minuten.write(bericht). var var var var uren = nu. var maandArray = new initArray("januari".length."juli".getYear()."woensdag"."donderdag". die gebruikt kunnen worden bij het maken van een HTML-document.getHours(). Verwijzingen naar sites met meer voorbeelden en uitleg worden hierna gegeven.getDate(). //--> </SCRIPT> Dit onderdeel van de Handleiding HTML is nadrukkelijk niet bedoeld als instructie in het gebruik van JavaScript."vrijdag". minuten = nu."maart".length. var datumweergave = dagtekst + " " + dag + " " + maandtekst + " " + jaar4.getHours() >= 12) var welkom = ("Goedemiddag."november". De voorbeelden zijn als volgt onderverdeeld:   Informatie over de browser Nieuw venster openen  Tekst in de statusbalk . Het bevat slechts een beperkt aantal voorbeelden. "). var bericht = welkom + "je hebt dit document geopend op " + datumweergave + " om " + tijdweergave + " uur. } var dagArray = new initArray("zondag".". "). dagtekst = dagArray[(nu. jaar = nu."oktober".getHours() >= 18) var welkom = ("Goedenavond.getMinutes()."april". for (var i = 0. var var var var var var nu = new Date().getHours() >= 6) var welkom = ("Goedemorgen. uren2 = ((uren < 10) ? "0" : "") + uren. "dinsdag". i++) this[i+1] = initArray. jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).getDay()+1)]. "augustus".

Windows NT 5.NET CLR 1.0.0.appCodeName: Mozilla navigator.1. Dat kan bijvoorbeeld handig zijn als in je pagina mogelijkheden opgenomen zijn. welke afhankelijk zijn van de browser.NET CLR 3. InfoPath.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.NET CLR 3.4322) navigator.3.1. Met gebeurtenissen. .NET CLR 2. GTB7. . kun je bijvoorbeeld ook voorkomen dat bezoekers geconfronteerd worden met fouten in hun browser (zie bijvoorbeeld het onderdeel CSS en browsers).4322) navigator.NET CLR 2. . Informatie elders Veel JavaScript oplossingen vind je bij:  irt. .NET CLR 3. waarmee deze pagina bekeken wordt.0 (compatible.4506.0.5.50727.NET CLR 1.30729.1.4506.1.userAgent: Mozilla/4. appVersion. . Voor de browser. Trident/4. GTB7. appCodeName en userAgent van het navigator object kan informatie over de gebruikte browser weergegeven worden.0.50727.appVersion: . 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.org .2152. Windows NT 5.NET CLR 3.JavaScript Frequently Asked Questions Beschrijvingen van de mogelijkheden van JavaScript:   Netscape DevEdge JavaScript Central Microsoft Script Technologies .0.appName: Microsoft Internet Explorer 4. InfoPath.0 (compatible. MSIE 8.1.5. .  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.3. .30729.0.0.2152. . Trident/4. welke niet door alle browsers ondersteund worden.1. uiteraard alleen als de browser JavaScript ondersteund. MSIE 8. ziet de informatie er als volgt uit: navigator.0.

respectievelijk "MSIE 7.x: Microsoft Internet Explorer 7.0 Opera 8.x: nee ja nee nee nee nee Het JavaScript dat voor de test gebruikt wordt. //--> </SCRIPT> Eerst wordt voor de browser waarop je wilt testen in een variabele vastgelegd aan welke kenmerken deze moet voldoen.0". of de bezoeker een bepaalde browser gebruikt. Hierna wordt voor enkele browsers het script toegelicht. Firefox.test Microsoft Internet Explorer 6. Voor andere browsers is de code die je in het script in plaats van het woord testcode invult.x Opera 9.appName).0 var IE60 = (navigator.indexOf("MSIE 6.0 en 8. //--> </SCRIPT> Voor de overige eigenschappen gaat het op een vergelijkbare manier.0: Netscape Navigator 4: Firefox 1.write(browser ? "ja" : "nee").x Firefox 3. Microsoft Internet Explorer 5. De informatie. . Vervolgens schrijft het script 'ja' als het om de betreffende browser gaat en 'nee' als dat niet het geval is.indexOf("Opera") == -1). Omdat Opera ook gebruik kan maken van dit kenmerk.write(navigator.x: Opera 10.In de Body van dit document is voor de appName eigenschap het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.0". 7. heeft de volgende opzet: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var browser = testcode. kun je in een nieuw venster bekijken voor Microsoft Internet Explorer.0. document.0: Microsoft Internet Explorer 8. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-.userAgent. Mozilla.0 test je in navigator.userAgent mag de tekst "Opera" niet voor komen.userAgent op "MSIE 6. welke gegeven wordt door de verschillende eigenschappen.userAgent. moet je een extra test opnemen: in navigator.x: Firefox 2. document.0" en "MSIE 8.0") != -1) && (navigator. te zien in een nieuw venster Voor Microsoft Internet Explorer 6. Netscape Navigator en Opera. Browsertest In het volgende voorbeeld wordt getest.0: Mozilla 1.write(IE60 ? "ja" : "nee").x: nee nee nee nee nee nee Microsoft Internet Explorer 6.

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

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

door een harde overgang naar de volgende regel.indexOf("MSIE 5.indexOf("Opera/4") != -1).indexOf("MSIE 8.indexOf("Opera 6") != -1) || (nuA. = (nuA..indexOf("Opera/5") != -1). (nuA.indexOf("Mozilla/4") != -1). = (nuA. (nuA.indexOf("Opera 4") != -1) || (nuA.15") != -1) || (nuA.indexOf("Opera") != -1).5") != -1) && !OP.indexOf("Opera 9") != -1) || (nuA.indexOf("Opera/3") != -1) && M4.indexOf("Presto/2.2. 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("Mozilla/2") != -1).indexOf("Mozilla/3") != -1).indexOf("MSIE 5. 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.0") != -1) && !OP.indexOf("Firefox") == -1). (nuA.indexOf("Gecko") != -1). </BODY> Algemeen script voor browsertest Wanneer je vaker in een document gebruik maakt van een browsertest. (nuA. (nuA. (nuA. (nuA. = (nuA. (nuA.indexOf("Opera/3") != -1) && M3. (nuA.indexOf("Opera/6") != -1).indexOf("Opera/8") != -1). (nuA.indexOf("Opera/9") != -1)) && (nuA.indexOf("Opera 8") != -1) || (nuA. (nuA.indexOf("Opera/7") != -1).indexOf("MSIE 6.indexOf("Opera 7") != -1) || (nuA.indexOf("Opera 10") != -1). (nuA. .indexOf("MSIE 7.0") != -1) && !OP.indexOf("MSIE") != -1) && !OP.indexOf("MSIE 3") != -1)."> .userAgent.indexOf("MSIE 4") != -1).indexOf("rv:1") != -1). (nuA.indexOf("Opera 3") != -1) && M4. (nuA. (nuA. (nuA.indexOf("Netscape") == -1) && (nuA.indexOf("Presto") == -1). ((nuA. is als volgt opgebouwd: <BODY onload="browsertest(). (nuA. var MOZ1 = MOZ && (nuA. var MOZ = GECKO && (nuA.indexOf("Opera 5") != -1) || (nuA.. Het BODY element van het document in het nieuwe venster. = = = = = = = = = = = = = = = = = = = (nuA.0") != -1) && !OP.0") != -1) && !OP.

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.

html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2c. Het nieuwe venster wordt dan geopend als de muisaanwijzer over de hyperlink beweegt.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2b.">hyperlink 2</A> In plaats van de onclick event handler kan ook gebruik gemaakt worden van de onmouseover event handler. Gebruik wordt gemaakt van hetzelfde script als in de voorbeelden hiervoor. De voorbeelden hierna kunnen daardoor anders dan bedoeld weergegeven worden. is het niet handig elke keer een nieuw script te gebruiken. Als het openen van een nieuw venster vaker in een document voorkomt.html'). welk document geopend moet worden in het nieuwe venster. "nieuw".html" TARGET="nieuw" onmouseover="NieuwVensterE('voorbeeld-2d. return false. 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. } //--> </SCRIPT> De hyperlinks hebben de volgende opbouw: <A HREF="voorbeeld-2b. return false. dat daardoor altijd als een volledig nieuw browservenster geopend wordt. De volgende afbeelding is opgenomen in een hyperlink."><IMG . 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. return false.">hyperlink 1</A> en <A HREF="voorbeeld-2c. In de eerder gebruikte voorbeelden is in het script opgenomen. Klik op deze hyperlink om een nieuw venster te openen. Je kunt dan beter gebruik maken van een algemener script en het te openen document specificeren in de onclick event handler in de hyperlink. "width=300.Netscape Navigator 2 ondersteunt bij gebruik van een hyperlink als hiervoor geen kenmerken voor het nieuwe venster.height=200").html'). krijgen alle volgende nieuwe vensters dezelfde afmetingen.open(URL. De hyperlink heeft de volgende opbouw: <A HREF="voorbeeld-2d.html').

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

height=200"). In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenSluit(URL) { venster = window. dat een hypertext link plaatst.</NOSCRIPT> Wanneer je het nieuwe venster na een bepaalde tijd automatisch wilt laten sluiten. } //--> </SCRIPT> De in de setTimeOut methode in het script opgenomen waarde geeft aan. Als je in een document meerdere keren een pop-up venster gebruikt. welke ervoor zorgt dat bij klikken het venster wordt gesloten. De waarde van het HREF attribuut bevat een JavaScript opdracht. waarmee je het opent.') //--> </SCRIPT> Voor browsers die JavaScript niet ondersteunen.write('<A HREF="JavaScript:parent. "nieuw".. Aan het BODY element van het document in het nieuwe venster voeg je onload event handler toe: <BODY onload="SluitVenster(). } function Verwijder() { close().3000).close()"."> . na hoeveel milliseconden het venster sluit. setTimeout("venster. kun je het sluiten van het nieuwe venster eenvoudiger regelen via het script.open(URL. "width=300.3000). } //--> </SCRIPT> .In het document in het nieuwe venster staat in de body een script.close()">Sluit</A> dit venster. </BODY> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit. Sluit het op de gebruikelijke wijze.. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document. dan moet je het volgende script opnemen in het te openen document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function SluitVenster() { setTimeout("Verwijder()". kun je het NOSCRIPT element opnemen: <NOSCRIPT>Dit is een nieuw venster.

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

Zorg dat je het bekijken van je site niet afhankelijk maakt van JavaScript. niets beginnen. } //--> </SCRIPT> Open de inhoudsopgave en bekijk in Netscape Navigator 2 en hoger. voeg je aan het script in het nieuwe venster "window. //--> </SCRIPT> JavaScript wordt veel gebruikt in combinatie met documenten met frames.0 en hoger. of waarin JavaScript niet is toegestaan. kunnen browsers die JavaScript niet ondersteunen. Wanneer je het nieuwe venster wilt sluiten.5 en hoger hoe het nieuwe venster na het klikken op een hyperlink sluit. window. Dat doe je ook weer met JavaScript: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-indexlink = "<A HREF=\"JavaScript:Index('voorbeeld-5b. Daarom is het misschien verstandig een dergelijke link te verbergen voor die browsers. 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.html')\">" indexlink += "Inhoudsopgave<\/A>" document. 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.<A HREF="JavaScript:OpenLink('js-venster. Microsoft Internet Explorer 3 en hoger en Opera 3. Met de hyperlink waarmee je in dit voorbeeld het nieuwe venster opent. Microsoft Internet Explorer 3 en Opera 3/3.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.location. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenLink(URL) { window.close()" toe. . Met de eerste drie voorbeelden hebben Netscape Navigator 2. Een andere is het voorkomen dat je eigen site geopend wordt in een frame van iemand anders.href = URL.write(indexlink).0 en hoger en Microsoft Internet Explorer 4. nadat op een hyperlink is geklikt.5 soms problemen (zie de toelichting bij de voorbeelden).5 en hoger. De bekendste toepassing is wel het gelijktijdig vervangen van documenten in meerdere frames.close().opener.

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

location. indien de in een frame te openen documenten steeds in dezelfde directory staan. waarbij "y" het nummer is van het frame.location. Voor drie frames bijvoorbeeld is de opbouw van het script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent.rechtsboven. waarin de frames zijn gedefinieerd. } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame.href = "bestemming_1".html".location. } //--> </SCRIPT> Een script als in het voorbeeld kun je ook gebruiken. Het controleren doe je op basis van het algemene script voor de .location.self. waarin het document geopend moet worden en in plaats van "bestemming_y" het pad en de bestandsnaam van het te openen document. parent. 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]". In Netscape Navigator 2. Een oplossing kan zijn als bestemming niet alleen een pad en bestandsnaam op te nemen. Microsoft Internet Explorer 3 en Opera 3/3. wanneer meer dan twee frames tegelijk gewijzigd moeten worden. Het script kun je dus ook als volgt opbouwen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate() { parent. dan kun je er als alternatief ook voor zorgen dat Netscape Navigator 2. Als je dat toch wilt en het niet mogelijk is alle documenten in dezelfde directory te plaatsen.location.handleidinghtml. Bijvoorbeeld: parent. 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. Nadat via het script eenmaal documenten uit een andere directory geopend zijn.location. Microsoft Internet Explorer 3 en Opera 3/3. parent. maar een complete URI.href = "bestemming_2".nl/javascript/voorbeeld-1d.html".5 wordt het script alleen goed uitgevoerd.frame_naam_1.frame_naam_2.href = "bestemming_3". Bij de telling wordt gestart bij "0" en de volgorde aangehouden. parent.href = "bestemming".frames[1]. 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. 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.5 het script niet uitvoeren.html". In plaats van de naam van het frame kun je ook "frames[y]" gebruiken. Nadeel van een complete URI is dat je de site niet meer offline kunt bekijken.href = "voorbeeld-1d.location. Dat gebeurt ook als je in een volgende document hetzelfde script gebruikt.frames[2].href = "voorbeeld-1e.frame_naam_3.href = "http://www.

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

return false.href = URL1. 'bestemming_2'. 'bestemming_3').name == "rechtsboven")) { parent. = URL3.frame_naam3.location.length > 0) && (parent. parent.htm" onclick="FrameUpdate('bestemming_1'. is het verstandig te laten testen of een frameset bestaat en bijvoorbeeld de naam van één frame overeenkomt.">Omschrijving link</A> In plaats van "bestemming_x" neem je het pad en de bestandsnaam op van het te openen document.frames[1].rechtsonder.location.href = URL1.frame_naam1. 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).location. .frame_naam2.href = URL2. Voor een bijbehorende hyperlink is de opbouw: <A HREF="geenscript. URL3) { = URL1. } } //--> </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. } //--> </SCRIPT> Uiteraard kun je ook meer dan twee frames tegelijk updaten. URL2.href = URL2.<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1.frames. parent.location.href parent.href } //--> </SCRIPT> In plaats van "frame_naam_x" neem je de naam op van het frame. URL2) { if ((parent. Voor drie frames bijvoorbeeld is de opbouw van het script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1.location.rechtsboven. parent.location. = URL2. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1.location.rechtsboven. waarin het document geopend moet worden. URL2) { parent.href parent.rechtsonder.

href = URL2.location.href = URL1. dat is beschreven in het onderdeel Javascript en Informatie over de browser.frames. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-parent.rechtsonder.rechtsboven. moet je in de head van het document het volgende script opnemen.frames[x]. Dat script moet je dus als eerste in de head van het document plaatsen. parent. De browsertest doe je op basis van het algemene script. Het script voor het updaten van frames krijgt nu de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function FrameUpdate(URL1. } } } } //--> </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.length > 0) && (parent.5 een foutmelding geven als de in een bepaald frame te openen documenten niet steeds in dezelfde directory staan.Ook bij dit voorbeeld speelt dat Netscape Navigator 2. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if ((parent. de werking van het script afhankelijk te maken van de gebruikte browser.name == "rechtsboven")) { parent.frames[1].location. URL2) { if (IE4plus || NN3plus) { if ((parent. //--> </SCRIPT> In plaats van "frame_naam" neem je de naam op van het frame.location.frame_naam. dat je wilt updaten en in plaats van "bestemming" het pad en de bestandsnaam van het document.name == "frame_naam")) { . Om foutmeldingen te voorkomen wanneer het andere frame niet aanwezig is (bijvoorbeeld indien het document geopend wordt in het volledige venster). dat in het te updaten frame geopend moet worden: Bekijk het voorbeeld in een nieuw venster.length > 0) && (parent. is het verstandig te laten testen of een frameset bestaat en de naam van het frame overeenkomt. Microsoft Internet Explorer 3 en Opera 3/3. Het kan daarom nodig zijn.href = "bestemming". net als in het vorige voorbeeld.frames.

Getest wordt hoeveel frames er zijn in het venster. Dat script moet je dus als eerste in de head van het document plaatsen.frames. De browsertest doe je op basis van het algemene script. dat is beschreven in het onderdeel Javascript en Informatie over de browser.href = "bestemming". of in een frameset van die ander. } //--> </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. kun je met behulp van het TARGET attribuut aangegeven of het document in een frame (en zo ja welk).frames.length != 0) { top.frame_naam. in het volledige venster.href = "bestemming".href = self. kun je voorkomen dat het document in een frameset van een ander komt. Als dit aantal ongelijk is aan "0".location. 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). dan wordt het document in het volledige venster geopend. } //--> </SCRIPT> . Gezien de problemen die Netscape Navigator 2.name == "frame_naam")) { parent. } } //--> </SCRIPT> Document openen in volledig venster Wanneer je zelf in je documenten hyperlinks opneemt. 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. In de head van je document plaats je het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top.frames[x].location.frame_naam.length > 0) && (parent. of in een nieuw venster geopend moet worden. Bekijk het voorbeeld.location. kan het nodig zijn de werking van het script afhankelijk te maken van de gebruikte browser. Door een klein JavaScript in de head je document op te nemen. Als iemand anders een link naar een document van jou opneemt.document. waarin het document geopend wordt. heb je er geen controle over hoe deze geopend worden: in het volledige venster.location.parent.

Wordt niet aan deze condities voldaan.frames. dan wordt een ander document geopend. waarvan je niet wilt dat ze geopend worden in een volledig venster. Bijvoorbeeld de beginpagina van je site. In dat geval kun je het onderstaande script in de head van het document opnemen. kun je zelf overigens gewoon weer framesets definiëren.name != "framenaam")) { top. Als de bezoeker een mogelijkheid uit de keuzelijst kiest. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top. In plaats van "y" neem je het nummer van het frame (bij de telling wordt gestart bij "0" en de volgorde aangehouden. In het script wordt getest of het frameset het juiste aantal frames heeft en of het document wel in het juiste frame geopend wordt. bijvoorbeeld in een navigatieframe. } //--> </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.href = "bestemming". Document niet buiten frames openen Soms gebruik je documenten.In het document dat je in het volledige venster laat openen. 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.frames[y].html">Document 3</OPTION> </SELECT> </FORM> .html">Document 2</OPTION> <OPTION VALUE="keuze3.html">Document 1</OPTION> <OPTION VALUE="keuze2.location. 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. 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. Daarbij wordt aan het SELECT element de onchange event handler toegevoegd (zie het onderdeel Scripts).length != n || (parent.

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

} } //--> </SCRIPT> In de body van het document staat een formulier met dezelfde opbouw als in het eerste voorbeeld. dan kun je de keuzelijst opnemen in een navigatieframe.value != 'geen-url') { URI = control. "nieuw".value. if (control. "width=300.href = control. welke de namen boven en onder hebben: <FRAMESET ROWS="*.Document openen in frame Wanneer je werkt met frames. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function openURI() { var control = document.value.selectedIndex]. Uitgangspunt is een frameset met twee frames.options[control.open(URI.onder.options[control.options[control.selectedIndex]. 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.selectedIndex].*"> <FRAME SRC="keuze1. if (control.html" NAME="boven"> <FRAME SRC="keuze2. } } //--> </SCRIPT> Het formulier in de body van dit document heeft weer dezelfde opbouw als in het eerste voorbeeld.value != 'geen-url') { parent.snelmenu. Bekijk een voorbeeld daarvan in een nieuw venster. window.selectedIndex].documentkeuze.options[control. .height=200").documentkeuze.snelmenu.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.location.

value != 'geen-url') { URL = control. "width=300. "nieuw". Omdat scrollende (bewegende) teksten in de statusbalk bij nogal wat mensen irritatie opwekken.write('<\/FORM>').selectedIndex]. .documentkeuze. 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.value. . document.selectedIndex]. met uitzondering echter van Netscape Navigator 2.options[control. } } } //--> </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.. Bijvoorbeeld een toelichting op een hyperlink of een copyright-melding bij het openen van een document. wordt geadviseerd het gebruik ervan te beperken.height=200").open(URL.options[control.write('<FORM>'). Om de uitvoering van het script door deze browser te voorkomen. 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. Die test kun je doen op basis van het algemene script voor de browsertest.snelmenu. dat is beschreven in het onderdeel Javascript en Informatie over de browser. } //--> </SCRIPT> Met behulp van JavaScript kun je een tekst laten weergeven in de statusbalk van de browser. if (control. kun je daarom het beste eerst testen om welke browser het gaat.Het script werkt goed in de meeste browsers. Hij verdwijnt weer na een in te stellen aantal milliseconden. window..

valt bij deze browsers geen actie te omschrijven bij de onmouseout event handler. Gezien het gedrag van Opera 3 en 3. kun je die echter ook van een toelichtend bericht voorzien. return true. werkt alleen bij hyperlinks.status = txt.5 werkt onmouseover alleen zolang de muisaanwijzer op de hyperlink staat. als de muisaanwijzer weer van de hyperlink af gaat.5 bij onmouseover.nl" onmouseover="moveover('Bezoek de Handleiding HTML voor uitgebreide informatie over HTML en CSS').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."><IMG SRC="handleiding-html. die er voor zorgt dat het script wordt aangeroepen. na hoeveel milliseconden de boodschap weer verdwijnt. } //--> </SCRIPT> De in de setTimeout-methode opgenomen waarde geeft aan. In Opera 3 en 3.handleidinghtml.return true. Beweeg de muisaanwijzer over de link .3000). Als je een afbeelding opneemt in een hyperlink. 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.">Beweeg de muisaanwijzer op de link</A> Voor de afbeelding is de opbouw: <A HREF="http://www. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function moveover(txt) { window.Beweeg de muisaanwijzer op de hyperlink Doe het ook met deze hyperlink De onmouseover event handler (zie het onderdeel Scripts). } function erase() { window. De eerste hyperlink in de body van dit document heeft de volgende opbouw: <A HREF="bestemming" onmouseover="moveover('Deze link is fake'). 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. setTimeout("erase()".status="".

i++) msg+=" "+msg. Dat gebeurt op basis van het algemene script voor de browsertest.".status = txt. } //--> </SCRIPT> Met JavaScript kun je een lichtkrant in je document opnemen.status = txt. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function BeweegMuisOp(txt) { if (!NN2 && !IE3) { window. function ticker() { var i.msg="Dit is de inhoud van de lichtkrant. setTimeout("BeweegMuisAf()".pause=0. dan wordt de setTimeoutmethode toegepast. .position=0. 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. for(i=0.">Beweeg de muis over de link</A> In het script in de head van dit document wordt eerst getest welke browser gebruikt wordt. } else { window. dat is beschreven in het onderdeel Javascript en Informatie over de browser.status="". 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.return true. var timerRunning = false." onmouseout="BeweegMuisAf().3000). Enige beperking kan dus geen kwaad. var id. k=(75/msg. } } function BeweegMuisAf() { window. Zo'n lichtkrant kan als alternatief dienen voor de lichtkrant die je kunt maken met het MARQUEE element.i<=k.k. Overigens is het goed te bedenken dat niet alle bezoekers zitten te wachten op allerlei bewegende onderdelen op je pagina.De hyperlink heeft de volgende opbouw: <A HREF="bestemming" onmouseover="BeweegMuisOp('De muisaanwijzer staat op de link').length)+1.

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

niets.length. Wanneer je ook de begeleidende tekst in het script opneemt. De variabele "jaar4" wordt gebruikt om het jaar in 4 cijfers weer te geven. var jaar = nu. Browsers die de eerste versie van JavaScript gebruiken (Netscape Navigator 2.length.getDate(). var dag2 = ((dag < 10) ? "0" : "") + dag. 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. //--> </SCRIPT> Omdat in JavaScript de maand januari correspondeert met "0". Door te testen op kleiner of groter dan 1900 en de waarde zo nodig te verhogen met 1900.length = initArray.getMonth() + 1. document. wordt getMonth met 1 verhoogd. zien gebruikers van een browser die JavaScript niet ondersteunt. var dag = nu. var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).arguments. i < this.write(dag2 + "-" + maand2 + "-" + jaar4). var maand2 = ((maand < 10) ? "0" : "") + maand. 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). var maand = nu. 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(). for (var i = 0.    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. i++) .getYear(). 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. de maand en het jaar gehaald. getMonth en getYear worden uit het Date object respectievelijk de dag van de maand. 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.

"augustus"."vrijdag"."mei"."november"."donderdag". wordt in plaats van de laatste wijzigingsdatum door Mozilla. document."september"."woensdag".getDay()+1)]."juni". zie je in het algemeen de correcte laatste wijzigingsdatum. var maandArray = new initArray("januari".getMonth()+1)]."december"). var var var var var var nu = new Date().getYear(). dagtekst = dagArray[(nu. De laatste wijzigingsdatum van een document Met behulp van de lastModified eigenschap kun je de laatste wijzigingsdatum van een document laten weergegeven."maart". Of je de juiste datum ook online te zien krijgt. } var dagArray = new initArray("zondag"."oktober"."februari"."zaterdag").arguments[i].this[i+1] = initArray.lastModified). jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)). jaar = nu. //--> </SCRIPT> Omdat in JavaScript de dag van de week correspondeert met "0"."maandag".getDate(). Wanneer je een document met dit script offline op je eigen systeem bekijkt. kun je de URL van een document op deze server invoeren in Delorie's HTTP Header Viewer. Wanneer je wilt weten welke header een server meestuurt."april". Ook de laatste wijzigingsdatum kun je op een meer aangename manier weergeven: Voor het laatst gewijzigd op 25-04-2012 . //--> </SCRIPT> Als resultaat zie je: 04/25/2012 11:35:03 N. Netscape Navigator en Opera de datum 1 januari 1970 (de standaard startdatum van JavaScript) weergegeven en door Microsoft Internet Explorer de huidige datum.write(datumweergave).B. var datumweergave = "Het is vandaag " + dagtekst + " " + dag + " " + maandtekst + " " + jaar4. "dinsdag". is afhankelijk van de informatie die de browser van de server ontvangt.write(document. wordt getDay met 1 verhoogd. dag = nu. Indien de server de LastModified informatie niet in de zogenaamde HTTP-header meestuurt. maandtekst = maandArray[(nu."juli". Je gebruikt daarvoor het volgende script: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.

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

var wijzigdatum = " Voor het laatst gewijzigd op " + DatumWeergave(gewijzigd) + "<BR>".lastModified)."september"."woensdag". var maandArray = new initArray("januari". seconden2 = ((seconden < 10) ? ":0" : ":") + seconden. minuten en seconden halen."vrijdag"."november". document.getHours()."juli"."maart"."april". "augustus"."donderdag". } var datumwaarde = dagArray[weekdag] + " " + dag + " " + maandArray[maand] + " " + jaar4. seconden = nu.write(wijzigdatum).getSeconds(). var dag = datum.getDate()."oktober"."december"). getMinutes en getSeconds kun je uit het Date object de huidige tijd in respectievelijk uren. return datumwaarde } if (!NN2 && !IE3 && !OP3) { var gewijzigd = new Date(document. function DatumWeergave(datum) { var weekdag = datum."dinsdag".getMonth() + 1.getMinutes(). minuten = nu. 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(). } //--> </SCRIPT> De huidige tijd Met behulp van de methodes getHours."februari"."mei". minuten2 = ((minuten < 10) ? ":0" : ":") + minuten."zaterdag"). var maand = datum.getDay() + 1. uren2 = ((uren < 10) ? "0" : "") + uren. if (jaar < 70) { var jaar4 = (jaar + 2000). uren = nu.getYear(). var jaar = datum. var tijdweergave = uren2 + minuten2 + seconden2 . } else { var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar))."juni".

maandtekst = maandArray[(nu.arguments[i]."oktober". //--> </SCRIPT> Welkomstbericht afhankelijk van de tijd Door te testen hoe laat het is. i < this. minuten = nu.getDate(). ")."donderdag". } var dagArray = new initArray("zondag".write(tijdweergave)."juni".length. var tijdweergave = uren2 + minuten2 if (nu. kun je een bezoeker met een aan het dagdeel aangepast bericht begroeten. else if (nu. Het in de body van dit document gebruikte script heeft de volgende opbouw: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function initArray() { this. i++) this[i+1] = initArray. jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).document. jaar = nu."woensdag". uren2 = ((uren < 10) ? "0" : "") + uren."maandag".arguments. else if (nu."maart"."november".getMonth()+1)].getDay()+1)]."zaterdag")."december").getHours(). "). var datumweergave = dagtekst + " " + dag + " " + maandtekst + " " + jaar4. je hebt dit document geopend op woensdag 25 april 2012 om 11:35 uur."april". for (var i = 0. var maandArray = new initArray("januari". dag = nu.getMinutes(). var var var var uren = nu. var var var var var var nu = new Date(). minuten2 = ((minuten < 10) ? ":0" : ":") + minuten.length = initArray.getYear().getHours() >= 18) var welkom = ("Goedenavond."mei".getHours() >= 6) . "augustus".getHours() >= 12) var welkom = ("Goedemiddag. Goedemorgen."september"."juli". "dinsdag"."vrijdag". dagtekst = dagArray[(nu.length."februari".

var bericht = welkom + "je hebt dit document geopend op " + datumweergave + " om " + tijdweergave + " uur. "). //--> </SCRIPT> .var welkom = ("Goedemorgen.".write(bericht). else var welkom = ("Goedenacht. document. ").

Sign up to vote on this title
UsefulNot useful