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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wanneer het BASEFONT element is gebruikt. geldt de waarde van het SIZE attribuut van het BASEFONT element als beginwaarde. Pas als het SIZE attribuut van het FONT element wordt gebruikt. Voor het SIZE attribuut is de ondersteuning niet altijd zoals verwacht. lt. geldt de waarde van het SIZE attribuut als beginwaarde voor de relatieve waarden van het SIZE attribuut van het FONT element. Zo negeren Microsoft Internet Explorer en Netscape Navigator 4 en lager de via het BASEFONT element gedefinieerde grootte in tabellen en houden in plaats daarvan de standaard lettergrootte van de browser aan.. Opera houdt in het hele document de standaard lettergrootte van de browser aan.. element: <FONT SIZE="-3">SIZE="-3"</FONT> <FONT SIZE="-2">SIZE="-2"</FONT> .FONT SIZE="+3">SIZE="+3"</P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. <BASEFONT SIZE="4"> <P>In dit document ..Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft. . Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"><IMG SRC="gezicht. dan kun je voor het element op blokniveau waarin de afbeelding is opgenomen. een stijl definiëren met behulp van de text-align eigenschap. Het VSPACE attribuut doet hetzelfde boven en onder de afbeelding. <P STYLE="text-align: center. Wil je de afbeelding centreren.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125" HSPACE="10"> HSPACE="10" .gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"></P> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. <IMG SRC="gezicht. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. Ruimte rond de afbeelding De HSPACE attribuut kan gebruikt worden om zowel links als rechts van de afbeelding ruimte te scheppen tot de overige inhoud van het document.

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

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

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

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

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

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

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

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

De menulijst (gedefinieerd met het MENU element) was oorspronkelijk bedoeld als een ongeordende lijst.. <UL> <LI>Dit is het eerste item van de ongeordende lijst (indien . Omdat alle belangrijke browsers zowel de menulijst als de directorylijst weergeven als de gewone ongeordende lijst. maar hebben ze een symbool als markering. hebben de elementen MENU en DIR hun betekenis verloren. 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. De ongeordende lijst wordt gemaakt met de elementen UL en LI. 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 gebruik ervan wordt in HTML 4 daarom afgeraden en ze worden in deze handleiding ook niet behandeld. waarvan de items niet meer dan één regel zouden beslaan. kan bepaald worden welk symbool gebruikt wordt als markering voor alle items van de lijst. welke bestaat uit termen en bijbehorende beschrijvingen.Een definitielijst is een lijst.. <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 . 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. 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. In het volgende voorbeeld is de waarde "square" gebruikt en zou een vierkant blokje weergegeven moeten worden. 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.

. 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.. De geordende lijst wordt gemaakt met de elementen OL en LI..Het TYPE attribuut kan ook aan het LI element toegevoegd worden.. zijn</LI> <LI TYPE="circle">De markering . <OL> <LI>Dit is het eerste item van de geordende lijst (indien . Dit is het derde item van de geordende lijst . springt deze op de volgende regels in) 2. Dit is het tweede item van de geordende lijst 3.. Het symbool voor de markering kan daardoor voor elk item afzonderlijk bepaald worden.. <UL TYPE="square"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <UL TYPE="disc"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </UL> </LI> <LI>Dit is het laatste item van de lijst</LI> </UL> De browser geeft dit zo weer:   Dit is het eerste item van de lijst Dit is het tweede item van de lijst • Dit is het eerste subitem • Dit is het tweede subitem Dit is het laatste item van de lijst  Geordende lijst In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. zijn</LI> <LI TYPE="disc">De markering .. <UL> <LI TYPE="square">De markering . in)</LI> <LI>Dit is het tweede item van de geordende lijst</LI> <LI>Dit is het derde item van de geordende lijst</LI> </OL> De browser geeft dit zo weer: 1.. Dit is het eerste item van de geordende lijst (indien de tekst langer is dan op één regel past.

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

Dit is het tweede item van de lijst • Dit is het eerste subitem • Dit is het tweede subitem 3. 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. Dit is het eerste item van de lijst 2. welke bestaat uit termen en bijbehorende beschrijvingen. kan het COMPACT attribuut ervoor zorgen dat term en definitie op dezelfde regel komen te staan. <DL COMPACT> <DT>x1</DT> <DD>Hier staat de definitie van x1</DD> <DT>x2</DT> <DD>Hier staat de definitie van x2</DD> </DL> De browser geeft dit zo weer: x1 . <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.<OL TYPE="1"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <UL TYPE="disc"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </UL> </LI> <LI>Dit is het laatste item van de lijst</LI> </OL> De browser geeft dit zo weer: 1. Dit is het laatste item van de lijst Definitielijst Een definitielijst is een lijst.

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

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

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

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

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

Voor veel onderdelen van tabellen kan de weergave bepaald worden met behulp van stylesheets. <TABLE BORDER="1" WIDTH="50%"> <TR> <TD>a1</TD> <TD>a2</TD> </TR> <TR> <TD>b1</TD> <TD>b2</TD> </TR> </TABLE> De browser zal de beschikbare breedte over de kolommen verdelen: a1 b1 a2 b2 . De randen van de tabel zijn zichtbaar. Het TR element definieert een rij en het TD element definieert de cellen in de rij. Eenvoudige tabellen In het volgende voorbeeld wordt een eenvoudige tabel met twee rijen en twee kolommen gemaakt. Een uitgebreide toelichting daarop wordt gegeven in het onderdeel CSS en tabellen. <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.TABLE element en de (nog niet in deze handleiding beschreven) attributen HEADERS. SCOPE. omdat voor het TABLE element het BORDER attribuut is opgenomen met een andere waarde dan "0". 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.

In de tweede en derde rij hoeven er daardoor slechts twee cellen gedefinieerd te worden. 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. Voor het samenvoegen in verticale richting gebruik je het ROWSPAN attribuut van het TD (of TH) element. <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 . <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.De hoogte en breedte van een cel worden bepaald met de attributen WIDTH en het HEIGHT van het TD (of TH) element. voor het samenvoegen in horizontale richting het COLSPAN attribuut.

De beginwaarde van het VALIGN is "middle" en zonder het attribuut wordt de inhoud van de cel in verticale richting gecentreerd. De beginwaarde van het ALIGN attribuut is "left" en als je het attribuut niet opneemt. <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.In het vorige voorbeeld worden nu de overblijvende cellen in de tweede rij samengevoegd met het COLSPAN attribuut. <TABLE BORDER="1" WIDTH="50%"> <TR> <TD ROWSPAN="3" HEIGHT="100">abc1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD COLSPAN="2">b23</TD> </TR> <TR> <TD>c2</TD> <TD>c3</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a2 abc1 b23 c2 c3 a3 Je kunt de attributen ROWSPAN en COLSPAN ook tegelijkertijd voor een cel gebruiken. dan wordt de inhoud van de cel links uitgelijnd. .

de tweede voor het VALIGN attribuut. Een streepje betekent dat het niet nodig is het attribuut op te nemen.In de volgende HTML-code kun je zien welke waarden je moet gebruiken om de celinhoud op de gewenste manier uit te lijnen. De eerste waarde is die voor het ALIGN attribuut. <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. <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 . om in één keer voor alle cellen in een rij te bepalen hoe de inhoud in respectievelijk horizontale en verticale richting uitgelijnd moet worden.

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

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

Het is verstandig direct na de tekst het BR element met het CLEAR attribuut op te nemen. Daarmee voorkom je dat een volgende alinea onbedoeld ook weer naast in plaats van onder de a1 a2 b1 tabel komt te staan. b2 De waarde "right" heeft een vergelijkbaar effect.. dan loopt de tekst onder de tabel door. dan kun je de hele tabel ook in een DIV element plaatsen en hiervoor het ALIGN attribuut gebruiken met de waarde "right"...<BR CLEAR="all"></P> Als je de waarde "right" voor het ALIGN attribuut gebruikt.</TABLE> <P>Met de waarde . komt de a1 tabel rechts in het venster te staan en wordt de tekst links naast de tabel geplaatst. <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 .. geplaatst. b1 a2 b2 Wanneer je de tabel alleen rechts wil uitlijnen en hem niet "zwevend" wilt maken. <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 . komt te staan.<BR CLEAR="all"></P> De browser geeft dit voorbeeld zo weer: Met de waarde "left" voor het ALIGN attribuut van het TABLE element maak je een links uitgelijnde "zwevende" tabel. De tekst wordt naast de tabel geplaatst en wanneer de hoeveelheid tekst groter is dan naast de tabel past.

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

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

is de tabel breder dan in het vorige voorbeeld. <TABLE BORDER="1" CELLSPACING="10"> <TR> <TD WIDTH="120" HEIGHT="60" VALIGN="top">rand 10 pixels breed</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> tussenruimte 10 pixels a2 breed b1 b2 .<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. dan is de ruimte tussen de randen 10 pixels breed. <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". Als je het attribuut niet hebt opgenomen. dan houden de meeste browsers een tussenruimte van 2 pixels aan. Omdat de cellen even breed blijven.

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

a1 b1 a2 b2 Wanneer je het BGCOLOR attribuut opneemt voor een TD (of TH) element. Welke kleur je te zien krijgt.0 kent voor deze elementen echter geen BGCOLOR attribuut. <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. 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. dan kun je de achtergrondkleur voor een enkele cel vastleggen. <TABLE BORDER="1"> <TR> <TD WIDTH="120" HEIGHT="40" BGCOLOR="#99FFCC">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE> De browser geeft dit voorbeeld zo weer: a1 b1 a2 b2 Je kunt het BGCOLOR attribuut ook voor de verschillende elementen tegelijkertijd gebruiken. . HTML 4.

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

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

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

voor de volgende kolomgroep is met behulp van het SPAN attribuut de omvang bepaald op twee kolommen. </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. Het ALIGN attribuut bepaalt de uitlijning van de inhoud van de cellen en het WIDTH attribuut bepaalt de breedte van de cellen. . In het volgende voorbeeld geldt dat voor de laatste kolom van de tweede kolomgroep.. dat de uitlijning van de tekst vastlegt. Het COL element moet twee keer gebruikt worden. Let erop dat het COL element in tegenstelling tot het COLGROUP element geen beëindiging kent. Soms wil je bepaalde kolommen binnen een kolomgroep kenmerken geven. Voor beide COL elementen is het ALIGN attribuut opgenomen.. die afwijken van die van de rest van de kolomgroep.In het volgende voorbeeld wordt de weergave bepaald met de attributen van het COLGROUP element. De eerste kolomgroep bestaat uit slechts één kolom. <TABLE BORDER="1"> <COLGROUP ALIGN="left" WIDTH="90"> </COLGROUP> <COLGROUP SPAN="2" ALIGN="center" WIDTH="60"> </COLGROUP> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> <TR> <TD>b1</TD><TD>b2</TD><TD>b3</TD> </TR> <TR> <TD>c1</TD><TD>c3</TD><TD>c3</TD> </TR> </TABLE> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. <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 RULES attribuut heeft de waarde "groups". Daardoor zijn alleen de lijnen tussen de rijgroepen en tussen de kolomgroepen zichtbaar. Het FRAME attribuut heeft de waarde "hsides". background-color: #FFFF99. Bekijk in een nieuw venster of en hoe de browser het voorbeeld weergeeft. die dat onderscheid wel mogelijk maken. Sinds de komst van HTML 4. In het volgende voorbeeld zijn de attributen RULES en FRAME gebruikt om structuur te geven aan de tabel. background-color: #FFFFCC. } Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. om vast te leggen welke van de lijnen tussen de rijen en kolommen van een tabel de browser moet weergegeven. <TABLE BORDER="1"> <COLGROUP CLASS="kg1"> </COLGROUP> <COLGROUP SPAN="2" CLASS="kg2"> </COLGROUP> <TR> <TD>a1</TD><TD>a2</TD><TD>a3</TD> </TR> . 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 .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. Om ook in browsers die de elementen THEAD. De gemaakte keuze geldt voor alle randen. TBODY en COLGROUP niet ondersteunen tot een acceptabele weergave te komen. </TABLE> In een stijlblok in de head van het document zijn de volgende stijlregels opgenomen: . Het RULES attribuut kun je gebruiken. 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. dat alleen het (via het WIDTH attribuut) vastleggen van de breedte van de cellen in de kolom(men) door alle actuele browsers wordt ondersteund. Eigenlijk moet je ervan uitgaan. Daartoe behoren het vastleggen van de breedte en de achtergrond van de cellen in een kolom(groep). Met het FRAME attribuut doe je hetzelfde voor de randen van het kader van de tabel (de randen aan de buitenzijde).kg2 { width: 60px. TH en TR.kg1 { width: 90px..Kolommen). zijn de attributen voor de uitlijning toegevoegd aan de elementen TD.0 beschikken we over twee nieuwe attributen voor het TABLE element.. Dat zorgt ervoor dat alleen de boven. <TABLE BORDER="1" FRAME="hsides" RULES="groups"> <CAPTION><B>Ondersteuning door browsers</B></CAPTION> . } . TFOOT. Je kunt geen onderscheid maken tussen de verschillende randen en op die manier bijvoorbeeld structuur aanbrengen in de tabel.en onderrand zichtbaar zijn.

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

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

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

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

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

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

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

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

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

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

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

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

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

. 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"> . </OPTGROUP> <OPTGROUP LABEL="Opera"> <OPTION VALUE="op3">Opera 3</OPTION> .. <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> .... <OPTION VALUE="pr" DISABLED>pruimen</OPTION> In browsers die het DISABLED attribuut ondersteunen wordt de keuze meestal in grijs weergegeven. .. moet je van de keuzemogelijkheden een array maken. </SELECT> Met behulp van het OPTGROUP element kunnen verschillende bij elkaar behorende keuzen worden gegroepeerd.Ook bij de meervoudige keuzelijst kun je met het DISABLED attribuut bepaalde keuzen uitsluiten.... dan leveren de hiervoor gegeven voorbeelden met meervoudige keuzelijsten het gewenste resultaat op. Maak je echter gebruik van een PHP-script.. Het gemeenschappelijke kenmerk van een groep keuzemogelijkheden wordt vastgelegd met het LABEL attribuut. dan moet je er rekening mee houden dat zo'n script bij de gegeven voorbeelden alleen de informatie van de laatste geselecteerde keuzemogelijkheid verwerkt. Wanner je gebruik maakt van een mailto-formulier of de informatie op de server laat verwerken door een CGI-script. </OPTGROUP> <OPTGROUP LABEL="Mozilla"> <OPTION VALUE="moz1">Mozilla 1</OPTION> </OPTGROUP> <OPTGROUP LABEL="Firefox"> <OPTION VALUE="ff1">Firefox 1</OPTION> . Om ervoor te zorgen dat het script ook de informatie van eerdere geselecteerde keuzemogelijkheden kan verwerken. </OPTGROUP> <OPTGROUP LABEL="Netscape Navigator"> <OPTION VALUE="nn4">Netscape Navigator 4</OPTION> . </OPTGROUP> <OPTION VALUE="anders">Andere browser</OPTION> </SELECT> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

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

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

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

zal de breedte daarvan dus vrijwel zeker verschillen. is het groeperen van controls. 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.<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. De breedte van een keuzelijst wordt bepaald door de keuzemogelijkheid met de langste omschrijving. Door het toevoegen van een extra keuzemogelijkheid aan alle keuzelijsten met een lange omschrijving kun je ze op eenvoudige wijze even lang maken.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. . 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. Met het LEGEND element kun je daarbij een bijschrift opgeven. Als je meerdere keuzelijsten gebruikt. Je doet dat door met het FIELDSET element een kader te plaatsen om bij elkaar horende controls. Controls groeperen Een nieuwe mogelijkheid waarmee je de layout van een formulier kunt bepalen. Die mogelijkheid wordt echter door oudere browsers (waaronder Netscape Navigator 4) niet ondersteund. In het volgende voorbeeld is dit te zien. dan moet je de activering en de beëindiging van het FORM element buiten de tabel te plaatsen. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="browser"> <OPTION VALUE="" SELECTED>-----. dat in het kader geplaatst wordt.

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

waarmee een control snel vanaf het toetsenbord geactiveerd kan worden. </SELECT><BR> <BUTTON TYPE="submit" TABINDEX="6"><IMG SRC="pos. <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> . Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets te definiëren. </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. De eerste letter van elk label is gebruikt als sneltoets en overeenkomstig het gebruik bij gewone sneltoetsen onderstreept. Omdat de waarde voor het ID attribuut slechts één keer mag voorkomen in een document.. waarin ze in het document staan (probeer dit eens uit in het formulier in de introductie van dit onderdeel). Geef aan welke browser je gebruikt: Microsoft Internet Explorer Netscape Navigator Mozilla Firefox Opera Andere browser Op een formulier kun je snel naar een volgend veld springen door gebruik te maken van de tab-toets.... Normaal worden de verschillende controls afgewerkt in de volgorde. kun je hierna ook op het label klikken om het keuzerondje te activeren.. de onderstreping weglaten. In het volgende voorbeeld is het TABINDEX attribuut gebruikt voor verschillende controls... zodat in ieder geval een deel van de browsers die het ACCESSKEY attribuut niet kennen. Dat is gedaan met behulp van Cascading Style Sheets.gif" .>Verzenden</BUTTON> <INPUT TYPE="reset" VALUE="Beginwaarden" TABINDEX="4"> </FORM> Bekijk in een document in een nieuw venster of de browser het TABINDEX attribuut correct ondersteunt. Met behulp van het TABINDEX attribuut kan deze volgorde beïnvloed worden. In het eerder gebruikte voorbeeld voor het LABEL element is het ACCESSKEY attribuut aan het LABEL element toegevoegd.

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

font-size: 21px."> <OPTION>Dit is keuze 1</OPTION> <OPTION>Dit is keuze 2</OPTION> <OPTION>Dit is keuze 3</OPTION> </SELECT><BR> <BR> <SELECT NAME="def" MULTIPLE SIZE="3" STYLE="background: yellow. font-weight: bold.<FORM METHOD="post" ACTION="bestemming"> <INPUT TYPE="text" SIZE="36" VALUE="Rode tekst op een gele achtergrond" STYLE="color: red. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. background: yellow. font-size: 12pt."> <INPUT TYPE="submit" VALUE="Verzenden" STYLE="color: #FFFFFF. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft. font-size: 21px. width: 120px. width: 250px. . In het volgende voorbeeld zijn met behulp van het STYLE attribuut inline stijlen gedefinieerd voor de elementen SELECT en OPTION. font-family: sans-serif. width: 120px. height: 25px. font-weight: bold. background: green. <FORM METHOD="post" ACTION="bestemming"> <SELECT NAME="abc" STYLE="background: lime. font-family: serif. vertical-align: top."><BR> <BR> <INPUT TYPE="reset" VALUE="Beginwaarden" STYLE="color: #FFFFFF. height: 25px. background: red."> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave."> <OPTION>Dit is keuze 1</OPTION> <OPTION STYLE="background: fuchsia.">Dit is keuze 2</OPTION> <OPTION>Dit is keuze 3</OPTION> <OPTION>Dit is keuze 4</OPTION> <OPTION>Dit is keuze 5</OPTION> </SELECT> </FORM> Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. font-family: serif.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML 3.0. Belangrijke thema's in HTML 4. de integratie van Java applets.w3.2. welke in mei 1996 als concept verschijnt en in januari 1997 van het World Wide Web Consortium (W3C) de status van aanbeveling krijgt. het opnemen van objecten.0 niet meer opgenomen.0 Specificatie: http://www. welke elementen behoren tot HTML 2.0 zijn onder meer: tabellen.2 Specificatie: http://www. De huidige standaard is HTML 4. extra mogelijkheden voor de opmaak van tekst en het uitlijnen van tekst naast afbeeldingen.2 zijn de volgende elementen opgenomen: . Lang niet alle deze mogelijkheden worden bij verschijnen van HTML 4.0 zijn de scheiding tussen structuur en presentatie door het gebruik van stylesheets en een betere toegankelijkheid voor mensen met een handicap. Bij het verschijnen van HTML 3. Vervolg: HTML 3.2.2 Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin HTML 3.0 (correct) ondersteund door de belangrijkste browsers. PLAINTEXT en XMP zijn in HTML 3.org/TR/REC-html32 Vastgesteld: 14 januari 1997 In HTML 3.html Vastgesteld: 22 september 1995 In HTML 2.0.0 behoren onder meer frames.w3. Uitbreidingen ten opzichte van HTML 2.0 wordt HTML 3.org/MarkUp/html-spec/html-spec_toc.2 als verouderd aangemerkt en in HTML 4. worden vrijwel al deze mogelijkheden reeds ondersteund door de dan actuele versies van de belangrijkste browsers. verbeteringen voor tabellen en formulieren en de integratie van stylesheets en scripts. HTML 2. Tot de nieuwe mogelijkheden van HTML 4. In enkele overzichten is te zien.2 en HTML 4. welke in juli 1997 als concept is gepubliceerd en in december 1997 als aanbeveling is vastgesteld. Ze worden daarom niet in deze handleiding beschreven.De echte opvolger van HTML 2.0 zijn de volgende elementen opgenomen: A ADDRESS B BASE BLOCKQUOTE BODY BR CITE CODE DD DIR DL DT EM FORM HEAD HR HTML Hx I IMG INPUT ISINDEX KBD LI LINK LISTING MENU META OL OPTION P PLAINTEXT PRE SAMP SELECT STRONG TEXTAREA TITLE TT UL VAR XMP De elementen LISTING. image maps.0 en welke elementen niet in een HTML-specificatie zijn opgenomen.

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

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

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

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

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

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

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

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

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

Voorbeelden: <BODY TEXT="black" BGCOLOR="white" LINK="blue" VLINK="red"> </BODY> <BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#0000FF" VLINK="#FF0000"> </BODY> Incidenteel wordt door een browser ook één van de andere besproken mogelijkheden ondersteund. Het gebruik ervan wordt echter afgeraden.Omdat 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.en achtergrondkleur.én een achtergrondkleur vast te leggen. Bovendien wordt geadviseerd ze niet door elkaar heen te gebruiken met kleuren die op een andere manier gedefinieerd zijn. 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. Kleuren in CSS In CSS kunnen kleuren gedefinieerd worden door middel van: . omdat het in andere browsers tot ongewenste resultaten zal leiden. Vanwege de leesbaarheid wordt evenwel geadviseerd de in het overzicht opgenomen schrijfwijze aan te houden. Daarmee wordt voorkomen een document onleesbaar wordt. Dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven. Het is belangrijk altijd een voor. De namen van de systeemkleuren zijn hoofdletterongevoelig. is het verstandig ze altijd te gebruiken in een combinatie van voor.

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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

De waarde van het HREF attribuut bevat een JavaScript opdracht. onload="VensterFocus()"> Nieuw venster sluiten Met JavaScript kun je niet alleen een nieuw venster openen. Het nieuwe venster wordt. dan moet je het volgende script opnemen in het te openen document: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function SluitVenster() { setTimeout("Verwijder()". dat een hypertext link plaatst. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-document.close()">Sluit</A> dit venster.3000). op een vergelijkbare wijze als bij eerdere voorbeelden. kun je het NOSCRIPT element opnemen: <NOSCRIPT>Dit is een nieuw venster.indexOf("Mozilla/2") != -1)... geopend met een hyperlink.appName == "Netscape") && (navigator.focus().') //--> </SCRIPT> Voor browsers die JavaScript niet ondersteunen.userAgent.</NOSCRIPT> Wanneer je het nieuwe venster na een bepaalde tijd automatisch wilt laten sluiten. maar je kunt het ook weer sluiten. } } //--> </SCRIPT> en de activering van het BODY element van dit document heeft de volgende opbouw: <BODY . welke ervoor zorgt dat bij klikken het venster wordt gesloten.write('<A HREF="JavaScript:parent. In het document in het nieuwe venster staat in de body een script. Sluit het op de gebruikelijke wijze. } function Verwijder() { close(). function VensterFocus() { if (!NN2) { self.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> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit."> . Hyperlinks in nieuw venster Soms wil je in een nieuw venster hyperlinks opnemen.close()".3000). Je kunt dan gebruik maken van de opener eigenschap. waarmee je het opent.userAgent.userAgent.} //--> </SCRIPT> De in de setTimeOut methode in het script opgenomen waarde geeft aan.indexOf("Opera/3") != -1) && (navigator. welke ondersteund wordt door Netscape Navigator 3 en hoger.indexOf("Mozilla/2") != -1). Als je in een document meerdere keren een pop-up venster gebruikt.userAgent. In de head van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-function OpenSluit(URL) { venster = window. "width=300. kan ook Netscape Navigator 2 er gebruik van maken.. dat is beschreven in het onderdeel Javascript en Informatie over de browser. Daarom wordt eerst getest om welke browser gaat.5 en hoger. na hoeveel milliseconden het venster sluit. setTimeout("venster.indexOf("Mozilla/3") != -1).appName == "Netscape") && (navigator.. Aan het BODY element van het document in het nieuwe venster voeg je onload event handler toe: <BODY onload="SluitVenster(). Omdat Opera 3 niet met het script overweg kan. Door de opener eigenschap bovendien nog eens apart te definiëren in het document. van waaruit het nieuwe venster geopend wordt. </BODY> Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit. var NN2 = (navigator. die een document openen in het venster. mag het door deze browser niet worden uitgevoerd.open(URL.height=200"). . kun je het sluiten van het nieuwe venster eenvoudiger regelen via het script. Dat gebeurt op basis van het algemene script voor de browsertest. van waaruit het nieuwe venster geopend is. Microsoft Internet Explorer 3 en hoger en Opera 3. Dat script moet je dus als eerste in de head van het document plaatsen. "nieuw". Het script in de head van dit document ziet er als volgt uit: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var OP3 = (navigator.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

De volgende voorbeelden worden gegeven:    Document vervangen via keuzelijst Document openen in frame Document openen in nieuw venster Document vervangen via keuzelijst Bekijk een voorbeeld in een nieuw venster.In het document dat je in het volledige venster laat openen. Document niet buiten frames openen Soms gebruik je documenten.length != n || (parent. 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.href = "bestemming".location. bijvoorbeeld in een navigatieframe.frames. In dat geval kun je het onderstaande script in de head van het document opnemen. 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. waarvan je niet wilt dat ze geopend worden in een volledig venster.html">Document 3</OPTION> </SELECT> </FORM> . Bijvoorbeeld de beginpagina van je site. dan wordt een ander document geopend.frames[y].html">Document 2</OPTION> <OPTION VALUE="keuze3. Daarbij wordt aan het SELECT element de onchange event handler toegevoegd (zie het onderdeel Scripts). <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-if (top. kun je zelf overigens gewoon weer framesets definiëren. 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. } //--> </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.html">Document 1</OPTION> <OPTION VALUE="keuze2. treedt de change gebeurtenis op en wordt het bijbehorende script uitgevoerd. Als de bezoeker een mogelijkheid uit de keuzelijst kiest. Wordt niet aan deze condities voldaan.name != "framenaam")) { top.

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

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

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

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

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

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

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. Wanneer je ook de begeleidende tekst in het script opneemt. document. i < this. Browsers die de eerste versie van JavaScript gebruiken (Netscape Navigator 2. var jaar = nu. var maand2 = ((maand < 10) ? "0" : "") + maand. wordt getMonth met 1 verhoogd.length = initArray. var maand = nu. //--> </SCRIPT> Omdat in JavaScript de maand januari correspondeert met "0". var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)).length. 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). de maand en het jaar gehaald. getMonth en getYear worden uit het Date object respectievelijk de dag van de maand. var dag = nu. Door met arrays te werken kunnen de dag van de week (verkregen via getDay) en de maand (verkregen via getMonth) omgezet worden in tekst. niets.    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.getDate().getYear().getMonth() + 1. wordt het script millennium-proof gemaakt. zien gebruikers van een browser die JavaScript niet ondersteunt.write(dag2 + "-" + maand2 + "-" + jaar4).length. for (var i = 0. i++) . De huidige datum is: 25-04-2012 In de body van dit document is het volgende script opgenomen: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-var nu = new Date(). var dag2 = ((dag < 10) ? "0" : "") + dag. 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.arguments. Door te testen op kleiner of groter dan 1900 en de waarde zo nodig te verhogen met 1900. De variabele "jaar4" wordt gebruikt om het jaar in 4 cijfers weer te geven.

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful