5. Speciale Tags

Marc van Oostendorp

Hoofdstuk uit het boek, oorspronkelijk verschenen bij A.W. Bruna Informatica, 1996.

Aan het eind van het vorige hoofdstuk zijn ze al even aan de orde gekomen: de speciale tags die niet tot de standaard van HTML behoren, maar bedacht zijn door een particuliere firma. Meestal gaat het om een van de twee bedrijven Microsoft en Netscape. Deze ondernemingen zijn zoals u weet in een felle concurrentiestrijd verwikkeld. Dit heeft onder andere tot gevolg dat beide bedrijven een bladerprogramma willen brengen dat net ietsje meer kan als het produkt van de ander.

Dat betekent aan de ene kant dat de twee bedrijven druk de afgelopen jaren druk bezig zijn geweest met het bedenken van nieuwe tags. Die tags werden dan door de concurrent na enkele maanden overgenomen in de nieuwste versie van zijn produkt: Microsoft nam tags van Netscape over, en Netscape van Microsoft.

Het lijkt soms wel of de bedrijven het zelf niet kunnen bijhouden. In ieder geval zijn bijvoorbeeld de makers van het Gold-gedeelte van Netscape nog lang niet zo ver dat ze u alle mogelijkheden geven die het bladerprogramma van Netscape biedt. De tags om die speciale dingen te maken, komen in dit hoofdstuk aan de orde.

De standaard van HTML is ondertussen zelf ook behoorlijk in ontwikkeling. Op dit moment is versie 3 van deze standaard vastgesteld. De nieuwste versies van de bladerprogramma's van Netscape en Internet Explorer kunnen alle HTML-opdrachten die aan deze standaard voldoen weergeven. Naar verwachting zullen binnen niet al te lange tijd ook de andere bladerprogramma's deze standaard ondersteunen. Desondanks kunnen ook in dit geval nog lang niet alle benodigde tags met Netscape Navigator Gold worden aangemaakt. Ook in dit geval zult u veel tags met de hand moeten coderen.

Dat zijn de zaken die we in dit hoofdstuk zullen behandelen -- eerst de nieuwe standaard van HTML, vervolgens enkele van de uitbreidingen van Netscape en Microsoft. Aan het eind van dit hoofdstuk zal ik tenslotte ook nog kort ingaan op het werken met formulieren -- strikt genomen een onderdeel van de moderne HTML-standaard, maar niet één die u in Netscape zonder kennis van HTML kunt maken.

HTML 3.0 -- De Nieuwe Standaard

Zet een paar creatieve mensen bij elkaar in een kamer en binnen enkele minuten hebben ze de gehele aanblik van die kamer veranderd. Zet een paar miljoen creatievelingen bij elkaar op een netwerk en in een ommezien ziet dat netwerk er geheel anders uit. De veranderingen op het Internet gaan zo snel dat iemand die een paar maanden niet online is geweest, waarschijnlijk nauwelijks zijn oude vertrouwde Net herkent als hij weer inlogt.

Het snelst gaan de veranderingen op het World Wide Web, de Internet-toepassing voor hypermediale pagina's. Slechts iets meer dan anderhalf jaar geleden was er een nul-versie van een nieuwe Internet-browser gratis op een paar plaatsen op het Net te halen. Die browser werd gemaakt door een paar enthousiaste studenten en werd Netscape genoemd. Tegenwoordig is Netscape een belangrijke economische factor op de wereldmarkt geworden en is bovendien voor veel mensen vrijwel synoniem met het Internet.

Eén van de belangrijkste successen van het programma Netscape was dat het een aantal interessante kenmerken aan HTML toevoegde. HTML (Hypertext Markup Language) is het systeem waarin informatiepagina's voor het World Wide Web geschreven kunnen worden. Die pagina's zijn overdraagbaar van het ene systeem naar het andere en kunnen voor een groot aantal toepassingen worden gebruikt, zoals hypermedia en in-line afbeeldingen. Het voordeel van Netscape was dat het aan de toenmalige standaard HTML 2.0 een paar simpele maar doeltreffende uitbreidingen toevoegde, zoals tabellen.

Waarschijnlijk is het vooral deze ontwikkeling geweest die de Internet-gemeenschap ertoe heeft aangezet snel een nieuwe standaard te ontwikkelen, HTML 3.0. Veel van de Netscape-uitbreidingen zijn in deze nieuwe standaard terug te vinden. Ik zal hier twee relatieve nieuwigheden in HTML bespreken: de elementen FIG en META.

Flexibele afbeeldingen met FIG

In oudere versies van HTML was het de ontwikkelaar weliswaar toegestaan plaatjes op te nemen, maar erg van harte ging dat niet. De meest gebruikelijke manier om een afbeelding in een document op te nemen maakte gebruik van de tag IMG, zoals ik in het vorige hoofdstuk heb laten zien. De code bij een typische in-line afbeelding zag er als volgt uit:

Deze opdracht liet de grafische browser de GIF 'plaatje' op het scherm tekenen, terwijl niet-grafische browsers de opdracht kregen om in plaats daarvan de woorden 'Welkom op deze pagina' te schrijven.

Dit was een nogal primitieve manier om het gewenste doel te bereiken. Mensen die een niet-grafische browser gebruikten omdat hun systeem een grafische browser niet toeliet, of omdat niet-grafisch Netsurfen nu eenmaal veel sneller gaat, of omdat ze visueel gehandicapt waren en daarom hun HTML-pagina's lieten omzetten in braille, zulke mensen kregen alleen deze ene zin te zien -- als de HTML-schrijver die tenminste niet ook vergeten was want de toevoeging ALT (voor alternatief) is niet verplicht.

Bovendien mag binnen het ALT-element geen andere HTML-code gebruikt worden. Als het plaatje een klikbare kaart is die een menu bevat, moest dat menu daarom onder en onafhankelijk van het plaatje als een tekstlijst met klikbare referenties herhaald worden voor de niet-grafische surfer.

Ook bij grafische browsers ontstaan er problemen. Zo is het niet in alle bladerprogramma’s mogelijk de afbeelding midden op een bladzijde te plaatsen en de tekst van de pagina om die afbeelding heen te laten lopen. Eventueel kan een afbeelding uiterst links geplaatst worden en de tekst rechts, of andersom, maar daar houden de vormgevingsmogelijkheden het wel mee op. In Netscape en de Internet Explorer zijn wat dit betreft wel iets meer mogelijkheden voorhanden, maar deze behoren niet tot de standaard.

Een ander belangrijk probleem bij grafische browsers op het Internet is de tijd. Het versturen van plaatjes over het Net kost nu eenmaal al snel kostbare minuten, al gebruikt u nog zulke kleine GIF- of JPEG-bestanden. Dat is des te ergerlijker als meerdere bladzijden na elkaar moesten worden opgehaald met telkens een iets ander plaatje.

Al deze problemen kunt u in HTML 3.0 omzeilen door het paar tags <FIG>...</FIG> te gebruiken.

Anders dan IMG heeft FIG dus zowel een openings- (<FIG>) als een sluit-symbool (</FIG>). Mensen met een grafisch bladerprogramma krijgen de JPEG-afbeelding 'elfsteden' en de GIF-afbeelding 'mannen' te zien. Mensen zonder zo'n bladerprogramma lezen 'Mannen die zwoegen over het ijs.' Mensen met een bladerprogramma dat de tag FIG nog niet ondersteunt krijgen het alternatieve plaatje dat staat aangegeven in de IMG-tag. Alle drie de groepen zien de twee tekstjes die in de <CAPTION> (het onderschrift) en de <CREDIT> (de bronvermelding) staan.

Overigens ondesteunen noch Netscape Navigator versie 3 noch Internet Explorer versie 3 deze tags. De verwachting is dat allebei de programma’s vanaf versie 4 wel ondersteuning zullen bieden.

De afbeelding 'elfsteden' wordt door de computer van de gebruiker in zijn zogenaamde cache-geheugen geladen. Deze afbeelding bevat de achtergrond, het decor waar tegen u de mannen ziet schaatsen. Die mannen staan zelf op de GIF-afbeelding mannen dat over de afbeelding 'elfsteden' heen geprojecteerd wordt. Op een volgende bladzijde kunt u nu dezelfde achtergrond gebruiken met misschien een nieuwe 'overlay'. De achtergrond hoeft dan niet opnieuw te worden geladen. Dat spaart tijd.

Dynamische documenten met META

De tag FIG geeft de mogelijkheid om gedeeltelijk op elkaar gelijkende plaatjes relatief snel achter elkaar te laden. Als HMTL 3.0 verder niet van eerdere versies verschilde, hadden we hier nog niet veel aan bij het maken van interessante pagina’s. De gebruiker moet nog steeds actief klikken om elk nieuw plaatje te zien.

Gelukkig geeft de nieuwe versie van HTML ook in de mogelijkheid om in bescheiden mate dynamische documenten te creëren. De tag META laat de browser zelf het initiatief nemen om een nieuw document te laden, zonder dat de gebruiker iets hoeft te doen. Anders dan FIG wordt deze tag al wel actief ondersteund door zowel Netscape als Internet Explorer.

Een voorbeeld van een klein document met een META-tag zou er als volgt uit kunnen zien:

Wanneer iemand een HTML-pagina ophaalt dat deze tag bevat, zal de browser automatisch na 5 seconden (CONTENT = 5) het document 'verversen' (refresh) door een nieuw HMTL-document met het adres (de universal resource location, URL) 'volgende.html' binnen te halen en dat op het scherm te tonen.

Wanneer nu het volgende document een nieuwe afbeelding vertoont, kunt u een eenvoudige animatie maken. Ook is het mogelijk om bij een bepaald document na enkele seconden een geluids- of videofragment te starten. Om dat in het bovenstaande voorbeeld te bereiken hoeft u alleen de URL te veranderen in de URL van een geluidsfragment (bijvoorbeeld URL=geluid.au of URL=video.mpeg). Een andere toepassing ziet u gedemonstreerd op het Internet-adres http://www.dds.nl/~ljcoster/ostaijen/boem.htm: met behulp van enkele tientallen pagina’s die aan elkaar gekoppeld zijn met behulp van de META-tag ziet u hier een bewegende versie van een gedicht van de bekende Vlaamse dichter Paul van Ostaijen, gemaakt door de auteur van dit boek.

Een andere handigheid waar deze tag voor wordt gebruikt is om lezers te helpen wanneer u uw site onverhoopt van het ene Internet-adres naar het andere moet verhuizen. Op de plaats waar uw site vroeger stond laat u dan een berichtje achter dat u verhuisd bent. Bovendien neemt u een META-tag op die de gebruiker onmiddellijk doorschakelt naar de juiste pagina.

Vergeet in dit soort gevallen niet ook nog een gewone koppeling op te nemen naar het nieuwe adres voor mensen die uw pagina bekijken met een bladerprogramma dat de tag META niet ondersteunt.

Op deze manier komt de nieuwe versie van HTML weer iets beter tegemoet aan de wensen en verlangens van de Web-ontwikkelaar die zijn pagina’s wil laten bewegen. Om echt een fraaie animatie te maken blijft het echter nodig om speciale programma’s op de Webserver te ontwikkelen ofwel HTML-documenten uit te breiden met zogenaamde Java-applets, waarover u meer kunt lezen in het volgende hoofdstuk. U bent dan echter al weer een stapje verder -- en loopt waarschijnlijk vooruit op de specificatie HTML 4.0 die in de loop van de komende paar jaar zal worden vastgelegd.

Speciale tags

Met versie 3 van HTML kunt u misschien al verbazingwekkend veel doen, voor de firma's Netscape en Microsoft is het nog lang niet genoeg. Beide bedrijven hebben een groot aantal uitbreidingen voor HTML voorgesteld. Met name de (al wat oudere) uitbreidingen van Netscape zijn zelfs al in de nieuwe standaard opgenomen. In dit hoofdstuk bespreken we de iets recentere ontwikkelingen en de meer geavanceerde technieken.

Bijzondere tags in gewone bladerprogramma's

Wat gebeurt er als een Web-pagina met een bijzondere tag wordt bekeken in een bladerprogramma dat die tag niet kent? Als het goed is slaat het bladerprogramma de desbetreffende tag gewoon over en geeft de pagina weer alsof het ding er helemaal niet stond. U kunt dit vrij gemakkelijk controleren door eens een pagina te maken met een zelfverzonnen tag.

Op zich kan het dus bijna nooit kwaad om bijzondere tags te gebruiken -- de tekst van uw pagina's blijven toch leesbaar. Aan de andere kant moet u er wel voor oppassen in uw opmaak teveel te laten afhangen van bijzondere tags. Als u wilt dat het woord niets er in de bovenstaande zin op ieders scherm uitspringt, kunt u beter een gebruikelijker paar tags zoals <I>...</I> of <EM>...</EM> gebruiken.

Voor- en nadelen van frames

De eerste uitbreiding wordt gevormd door zogenaamde frames, die kunnen worden weergegeven door Netscape Navigator vanaf versie 2.0 en door Microsoft Internet Explorer vanaf versie 3.0. Een pagina met frames bestaat uit twee of meer onafhankelijke deelvensters.

Elk van de twee deelvensters is een frame en bevat een aparte pagina met HTML-codes. De gebruiker kan elk frame apart bekijken en door te klikken op een koppeling in het ene frame wordt soms de inhoud van het andere frame, soms de inhoud van het eerste frame en soms de inhoud van allebei de frames tegelijkertijd gewijzigd worden.

Om een dergelijke pagina met twee frames samen te stellen zijn minstens drie aparte bestanden nodig: twee bestanden die de inhoud van de frames bevatten en een bestand dat aangeeft hoe groot elk frame is.

Frames zijn een aantrekkelijk middel, vooral om een relatief grote en gecompliceerde hoeveelheid informatie weer te geven. Vaak wordt gebruik gemaakt van een klein frame waarin de gebruiker permanent een inhoudsopgave ziet, zodat hij of zij makkelijk naar andere delen van de site kan springen, en een groot frame waarin de eigenlijke informatie wordt weergegeven.

Een andere reden waarom veel ontwerpers graag gebruik maken van frames, is dat er elementen in kunnen worden opgenomen die de gebruiker permanent blijft zien, zoals advertenties. De gebruiker kan door de eigenlijke informatiepagina bladeren zoveel als hij wil, de advertentie blijft hij altijd zien.

Toch zijn er ook enkele nadelen aan het gebruik van frames verbonden, die u serieus moet overwegen voor u besluit gebruik te maken van frames. Allereerst kunnen dit soort pagina's niet met alle Web-bladerprogramma's bekeken worden. Zelfs in de eerste publikaties van de Microsoft Internet Explorer 3.0 voor Windows 3.11 kan de gebruiker geen frames bekijken. Om uw informatie ook ter beschikking te stellen van mensen met wat oudere bladerprogramma's, dient u al uw pagina's op twee manieren samen te stellen: in een versie mét en in een versie zónder frames.

Een ander nadeel van frames is dat ze de pagina's relatief langzaam maken. Zoals hierboven opgemerkt bestaat een pagina met twee frames uit drie bestanden. Dat betekent dat de computer van de gebruiker drie keer kontakt moet maken met uw server om de hele pagina binnen te halen. Als het druk is op het Net, kan er bij elk van die drie pogingen genoeg misgaan. Hoe minder vaak de computers via het Net kontakt met elkaar hoeven te zoeken, des te sneller de verbinding verloopt.

Een eenvoudige pagina met frames

In Netscape Gold versie 3.0 kunnen we nog geen frames maken. We zullen dus met de hand moeten coderen. Allereerst maakt u het top-bestand aan. Hierin geeft u onder andere aan hoeveel frames u wilt gebruiken en hoe groot deze moeten zijn.

De bestanden links.html en rechts.html bevatten een gewone HTML-opmaak, zonder bijzondere codes.

In plaats van het paar tags <BODY>...</BODY>, gebruikt u in een goede pagina met frames twee paren tags: <FRAMESET> ... </FRAMESET> en <NOFRAME> ... </NOFRAME>. Tussen het eerste paar komt de informatie te staan die de gebruikers van moderne bladerprogramma's te zien krijgen, tussen het tweede paar de informatie voor de gebruikers die geen frames kunnen lezen.

Allereerst zullen we ons bezig houden met het eerste paar. De begin-tag <FRAMESET> (Engels voor verzameling frames) heeft altijd precies één van de twee attributen &ROWS& of &COLS&. Met deze attributen kunt u respectievelijk aangeven in hoeveel rijen of in hoeveel kolommen u het venster kunt verdelen. In het bovenstaande voorbeeld is gebruik gemaakt van kolommen: de frames staan naast elkaar. Wanneer u in het voorbeeld het attribuut &COLS="*,3*"& vervangt door &ROWS="*,3*"&, dan komen de twee frames onder elkaar te staan.

De tekenreeks tussen aanhalingstekens in &COLS="*,3*"& (of &ROWS="*,3*"&) geeft aan hoeveel kolommen (of rijen) er gedefinieerd worden en hoe groot elke kolom (of rij) relatief is.

Dat in het bovenstaande voorbeeld gebruik wordt gemaakt van twee kolommen kunt u zien aan het feit dat er twee tekenreeksen tussen de aanhalingstekens staan, gescheiden door komma's. Om een pagina te maken met drie kolommen, zou u in de bovenstaande HTML-codering de volgende wijziging moeten aanbrengen:

De grootte van de frames wordt vastgelegd in de tekenreeksen tussen de komma's. Meestal wordt gewerkt met de zogenaamde sterretjes-notatie. Ook in het bovenstaande voorbeeld is dat gedaan. De aanduiding COLS="*,3*" geeft aan dat de twee verschillende kolommen zich verhouden als één staat tot drie. De linker-kolom neemt dus driekwart van het scherm in beslag, en de rechter-kolom één kwart. De aanduiding COLS=*,*,3*" geeft aan dat de verhouding tussen de drie kolommen 1:1:3 is. De eerste en de tweede kolom nemen ieder een vijfde van het scherm in beslag, de derde kolom beslaat drie vijfde.

Het voordeel van dit soort aanduidingen is dat de aangegeven grootte relatief is. Of iemand uw pagina nu op een groot of op een klein scherm bekijkt, de verhoudingen tussen de verschillende deelvensters zal altijd dezelfde blijven. Er is overigens nog een andere manier om dezelfde verhoudingen vast te leggen: dat is werken met percentages. De volgende HTML-code geeft precies hetzelfde resultaat als het eerste voorbeeld dat we besproken hebben:

Er zijn zelfs nog twee waarden die we aan het attribuut &COLS& kunnen weergeven om dit effect te bereiken. We hadden ook nog kunnen schrijven:

of

Hier ziet u weer een 'sterretje' terug, maar deze keer met een iets andere betekenis: in dit soort gevallen betekent het 'ik neem de rest van het scherm in beslag'. Als het eerste venster vijfentwintig procent in beslag neemt, is 'de rest' dus vijfenzeventig procent. Subtiele combinaties van de percentage-notatie en de sterretjes-notatie zijn overigens ook nog mogelijk:

In dit voorbeeld neemt de linkerkolom vijfitg procent van het complete venster in beslag. De resterende vijftig procent wordt voor één kwart gevuld door de middelste kolom en voor driekwart door de rechterkolom. Enig rekenwerk leert ons dan dat de rechterkolom in totaal drie achtste van het totale venster in beslag neemt.

Tot nog toe waren de aangegeven verhoudingen steeds relatief en werden aangegeven in percentages of verhoudingen. Het is ook mogelijk om aan frames een absolute grootte mee te geven. Een bepaald frame wordt dan op elk scherm precies even breed weer gegeven, wat de omvang van dat scherm verder ook mag zijn.

Absolute waarden zijn vooral handig als frames alleen een afbeelding bevatten. Zoals ik hierboven al uiteengezet heb, worden frames onder andere gebruikt om advertenties op een pagina te plaatsen. De adverteerder wil dan graag dat zijn advertentie zichtbaar blijft en niet door de gebruiker kan worden weggescrolld. Zo'n advertentie is vaak een plaatje en dan is het verstandig om dat plaatje in een apart frame te zetten, dat u precies evenveel pixels meegeeft als het plaatje groot is:

Met deze code geeft u aan dat de onderste rij precies 240 pixels hoog moet zijn. Ik ga er daarbij vanuit dat dit de hoogte is van de afbeelding advertentie.gif (zie hoofdstuk 2 voor een beschrijving om na te gaan hoe u de grootte van een afbeelding kunt meten in Netscape Navigator). Het bovenste frame neemt de rest van de ruimte voor zijn rekening.

Attributen van frames en framesets

We kunnen ons nu concentreren op de attributen van de tags <FRAMESET> en <FRAME>. Tot nu toe heb ik aan die laatste tag twee attributen meegegeven, &SRC& en NAME. De betekenis van het eerste attribuut zal u, na bestudering van het vorige hoofdstuk, hopelijk duidelijk zijn, omdat het ook gebruikt wordt in de tags <IMG> en <FIG>.

Het attribuut NAME wordt gebruikt om frames met elkaar te kunnen laten communiceren en zal in de volgende paragraaf uitgebreid aan de orde komen. Hier zullen we eerst enkele andere attributen van <FRAME> bekijken.

SCROLLING

Met dit attribuut kunt u aanduiden dat het frame wel of niet een zogenaamde scrollbar mag hebben, een balk waarmee de gebruiker door een langere bladzijde kan bladeren. Dit attribuut heeft drie mogelijke waarden: yes (ja), no (nee) en auto (automatisch). Bij yes wordt de balk altijd getoond -- ook als het niet strikt noodzakelijk is. Bij no wordt de balk nooit getoond -- zelfs niet als het nodig is. Bij auto wordt de balk precies in die omstandigheden getoond als dhet nodig is. Wanneer u het attribuut helemaal weglaat, heeft dit hetzelfde effect als wanneer u SCROLLING="auto" opgeeft.

NORESIZE

Normaal gesproken kan de gebruiker de grootte van de frames met de hand veranderen. Wanneer u als ontwerper aan een bepaald frame bijvoorbeeld de helft van de pagina toekent, kan de gebruiker alsnog besluiten de rand van het frame zo te verslepen dat het veel kleiner wordt, of juist veel groter. Wanneer u dit attribuut toevoegt aan de tag <FRAME> is deze mogelijkheid uitgesloten: het frame blijft de grootte houden die u het als ontwerper gegeven heeft.

MARGINWIDTH

Met dit attribuut kunt u aangeven hoe groot de marge links en rechts van het frame moet zijn. De eenheidsmaat is de pixel; met het attribuut MARGINWIDTH=40 geeft u aan dat er links en rechts 40 pixels marge genomen moet worden. Wanneer u dit attribuut weglaat, kiest het bladerprogramma van de gebruiker zelf een geschikte marge.

MARGINHEIGHT

Dit attribuut heeft dezelfde functie als MARGINWIDTH, maar nu voor de boven- en ondermarge van het frame.

Ook de tag <FRAMESET> kan nog enkele attributen hebben:

FRAMEBORDER

Met dit attribuut kunt u aangeven of de frames in de verzameling wel of niet een rand moet hebben. Het attribuut kunt u ofwel een van de twee waarden yes en no, meegeven, of een getal (0 betekent: geen rand, 1 een dunne rand, 2 een iets dikkere rand, enzovoort). De eerste mogelijkheid is de officiële volgens Netscape, de tweede is officieel volgens Microsoft. Voor zover na te gaan ondersteunen de laatste versies van beide programma's allebei de mogelijkheden.

BORDERCOLOR

Met dit attribuut kunt u de kleur bepalen die de rand tussen de frames heeft. Normaal gesproken is deze kleur grijs. U kunt hier weer werken met de langzamerhand bekende kleurcodes; zowel codes als antiquewhite en blue en codes als #FF0212 en #00EE00 zijn mogelijk.

Communicatie tussen frames

Een typisch gebruik van frames betreft de permanente inhoudsopgave. In een venster links ziet de gebruiker permanent een inhoudsopgave. Door op een van de koppelingen te klikken komt er in het venster rechts een nieuwe informatiepagina.

Hoe is dit mogelijk? Normaal gesproken komt een nieuwe pagina terecht in het venster waarin de gebruiker geklikt heeft. Om de nieuwe pagina in het andere frame te laten binnenkomen, zoals hier gebeurt, moeten de twee frames met elkaar kunnen communiceren.

Voor communicatie zijn namen nodig. Dat is de reden waarom we in de definitie van onze verzameling frames het attribuut &NAME& gebruiken:

Het linkerframe hebben we inhoud genoemd en het rechterframe text. Van die namen kunt u nu gebruik maken.

De oplossing is dus gelegen in een attribuut bij de tag <A>, genaamd TARGET. Aan dit attribuut kunt u meedelen in welk frame de nieuwe pagina moet worden getoond.

Tussen het paar <HEAD>...</HEAD> is een tag <BASE> opgenomen, die aangeeft dat koppelingen op de huidige pagina naar het frame text verwijzen. Om een koppeling nu alsnog in het huidige frame (het frame waarin geklikt wordt) weer te geven, kunt u nu een bijzonder attribuut bij de tag <A> gebruiken:

De naam _self is een bijzondere naam die altijd verwijst naar het frame zelf. Let u bij die naam op het lage liggende streepje aan het begin. Er zijn nog in ieder geval twee belangrijke dergelijke bijzondere namen, die in iedere frame aanwezig zijn:

_parent

Deze naam verwijst naar de 'ouder' van het frame; de verzameling wwaartoe de huidige frame behoort.

_top

Deze naam verwijst naar het allerhoogste frame. Hoe diep u uw verzamelingen frames ook inbedt, de _top is altijd hetzelfde: het hele venster van het bladerprogramma.

Communicatie tussen vensters

Zoals frames, deelvensters, met elkaar kunnen communiceren zo kunnen ook vensters naar elkaar verwijzen. Zowel Netscape als de Internet Explorer bieden de gebruiker de mogelijkheid om meerdere vensters van het bladerprogramma naast elkaar te openen. Ook u als ontwerper kunt u het bladerprogramma vragen nieuwe informatie in een nieuw venster te openen.

Wanneer de gebruiker op de koppeling klikt, wordt een geheel nieuw venster geopend waarin de nieuwe informatie wordt getoond. Zoals u ziet is er geen verschil tussen de manier waarop u frames kunt aanspreken en de manier waarop u nieuwe vensters kunt aanspreken.

Het werken met dit soort vensters lijkt vooral nuttig wanneer u koppelingen naar buiten maakt binnen uw site. Het gevaar van dat soort koppelingen is altijd dat u uw bezoekers kwijtraakt: ze bekijken andere pagina's en niemand garandeert dat ze op die pagina's weer nieuwe koppelingen vinden en een zwerftocht beginnen. Wanneer ze die zwerftocht nu in een apart venster maken, komen ze in ieder geval altijd makkelijk terug op de pagina waar ze begonnen: die van u.

Een versie zonder frames maken

Hoe mooi pagina-indelingen met frames ook kunnen zijn, voorlopig zult u rekening moeten houden met gebruikers die dat soort pagina's helemaal niet kunnen zien. Met name gebruikers van niet-grafische bladerprogramma's zoals Lynx zullen nog lang moeten wachten voor ze deze mogelijkheid krijgen -- als dat al gebeurt.

Het is daarom raadzaam om van elke pagina die gebruik maakt van frames ook een 'kale' versie te maken die hier geen gebruik van maakt. Deze kale versie neemt u op in de pagina met de definitie van de verzameling frames tussen het paar tags <NOFRAME>...</NOFRAME>.

De gebruiker van een bladerprogramma met frames krijgt niets te zien wat er tussen de tags <NOFRAMES>...</NOFRAMES>. Omgekeerd krijgt de gebruiker van een bladerprogramma zonder frames juist alleen die tekst te zien. Hier kunt u dus de essentiële informatie nog een keer herhalen die u ook in de frames-versie heeft opgenomen.

Zwevende frames

Frames zijn een uitvinding van de firma Netscape. Een uitvinding die al snel werd overgenomen door Microsoft. Deze laatste firma kwam bovendien met een interessante uitbreiding van het idee, de zogenaamde zwevende frames ('floating frames' in het Engels). Versie 3 van Netscape Navigator kan, anders dan Microsoft Internet Explorer versie 3, nog geen floating frames weergeven. Waarschijnlijk zal deze functie echter wel worden ingebouwd in toekomstige versies van dit programma.

Een zwevend frame bevindt zich in een gewone Web-pagina, net zoals een GIF- of JPEG-afbeelding zich daar kan bevinden.

Binnen dit frame kan zich desgewenst een complete HTML-pagina bevinden, waarin de gebruiker kan klikken. Microsoft zelf noemt in de documentatie (te vinden via het Internet-adres http://www.microsoft.com/ie/) een aardige toepassing van de floating frame. Met de eerder besproken <META>-tag is het mogelijk om informatie op een pagina op te nemen die permanent gewijzigd wordt. Zo is er een oude grap op het Internet om een elektronische fotokamera ergens op te stellen die bijvoorbeeld twee maal per minuut een foto maakt van een of ander object, zoals een koffiezetapparaat of een snelweg. Van deze foto wordt een GIF-afbeelding gemaakt die, bijvoorbeeld, photo.gif, genoemd wordt. Wanneer nu de gebruiker op gezette tijden de pagina ververst -- of wanneer de &META&-tag dat voor hem doet -- krijgt hij een permanent actuele blik op het koffiezetapparaat of de snelweg.

Wanneer u deze afbeelding nu op een pagina wil plaatsen waarop ook nog andere informatie staat, zou al deze informatie ook elke keer opnieuw moeten worden ververst. Dat is op zijn minst zonde van de tijd.

Met een zwevend frame is dat probleem op te lossen. De afbeelding wordt in een zwevend frame geplaatst temidden van de overige informatie. Op die manier hoeft alleen de afbeelding ververst te worden.

Om een zwevend frame te plaatsen gebruikt u het paar tags <IFRAME>...</IFRAME>.

De begin-tag <IFRAME> kan precies dezelfde attributen hebben als de tag <FRAME>; daarnaast worden ook de attributen &WIDTH& en &HEIGHT& gebruikt om respectievelijk de breedte en de hoogte van het frame aan te geven. De gebruikte lengtemaat voor die twee attributen is de pixel.

De tekst die u tussen het paar <IFRAME>...</IFRAME> plaatst wordt getoond in bladerprogramma's die geen zwevende frames kunnen vertonen.

Oude versies van zwevende frames

In sommige vroege versies van Internet Explorer 3 werd in plaats van het paar <IFRAME>...</IFRAME> de enkelvoudige tag <FRAME> gebruikt. Microsoft raadt daarom zelf aan om tags op de volgende manier weer te geven:

Het buitenste paar wordt dan weergegeven door de modernste bladerprogramma's, de binnenste door oudere versies van Internet Explorer 3. Het aantal mensen dat uw pagina's met dat laatste soort programma zal prberen te bekijken is echter volgens mij te verwaarlozen.U kunt zich de moeite om twee maal een vrijwel identieke tag op te geven in de meeste gevallen besparen.

Tekst over meerdere kolommen

Naast de tags die te maken hebben met frames, heeft Netscape ook vrij recent een paar tags ingevoerd waarmee tekst over meerdere kolommen kan worden weergegeven. Deze tag heet <MULTICOL> en heeft een verplicht attribuut, COLS, waarmee kan worden aangegeven in hoeveel kolommen de tekst moet worden opgedeeld.

Stijlbladen

HTML is ontstaan uit de gedachte om structuur en vormgeving van een pagina van elkaar te scheiden. Oorspronkelijk was het de bedoeling dat een ontwerper van een Web-pagina alleen zou specificeren wat de functie van elk tekstfragment in de tekst was: dit is een hoofdstuk-kopje, dit is een paragraaf, dit is een genummerde lijst en dit is een koppeling. Het bladerprogramma van de gebruiker bepaalde vervolgens hoe elk tekstelement eruit zou zien. De aanbieder van informatie specificeerde de structuur; het bladerprogramma bepaalde de vormgeving.

In de loop der jaren is die gedachte een beetje op de achtergrond verdwenen. Bijna alle aanbieders van informatie blijken toch iets meer te willen zeggen over de manier waarop hun documenten aan de gebruiker moeten worden getoond. De oorspronkelijke structuur-elementen werden daarom meer en meer misbruikt voor vormgevingsdoeleinden.

Een voorbeeld is te vinden in de hoofdstuk-kopjes. De manier waarop de tag <H1> door Netscape en Explorer wordt weergegeven is voor veel vormgevers te groot. Voor hoofdstuk-titels gebruiken zij daarom liever een andere tag, zoals <H4>. Eigenlijk is dat in strijd met de grondgedachte van HTML: als iets een hoofdstuk-kopje is, moet dit worden aangegeven met <H1> en niet met een of anderre hoger genummerd kopje.

In de toekomstige standaard van HTML wordt het waarschijnlijk mogelijk om vorm en structuur toch weer van elkaar te scheiden. De ontwerper van de pagina kan die twee elementen dan namelijk onafhankelijk van elkaar specificeren door middel van zogenaamde stijlbladen.

In de Internet Explorer zijn al een soort stijlbladen ingebouwd. Hoewel het nog niet helemaal zeker is dat deze stijlbladen precies in alle opzichten conform de toekomstige standaard zijn, komen ze waarschijnlijk een aardig eind in de richting. Netscape bood op het moment van schrijven nog geen ondersteuning van stijlbladen (stylesheets).

Het idee achter stijlbladen is als volgt. In een bepaald bestand definieert de maker van een pagina op de vertrouwde manier de functie van elk tekst-element binnen de tekst. Daarnaast heeft hij echter de mogelijkheid om -- in een apart bestand of op een aparte plaats binnen het tekst-bestand -- in het algemeen te definiëren hoe een bepaald tekst-element eruit komt te zien. Hij kan bijvoorbeeld zeggen: teksten die tussen het tag-paar <H1>...</H1> staan wil ik altijd iets laten inspringen, en bovendien in een blauwe kleur afgedrukt zien. Of hij kan zeggen dat hij teksten tussen dat paar tags juist altijd heel groot op het scherm wil zien, in een afwijkend lettertype.

Er zijn veel voordelen verbonden aan het werken met stijlbladen. In de eerste plaats maakt het zoals gezegd een terugkeer naar de oorspronkelijke gedachte achter HTML mogelijk, terwijl de ontwerper toch meer mogelijkheden heeft om te ontwerpen. Daarnaast wordt het makkelijker met een consistente huisstijl te werken. Een ontwerper kan eens en voor al voor alle documenten op een site bepalen hoe ze eruit moeten zien. Wanneer deze specificatie nu naar alle documenten gekopieerd wordt, is het praktisch zeker dat die documenten er ook uniform uit komen te zien. Een laatste voordeel is dan nog dat een dergelijke huisstijl vrij gemakkelijk te veranderen is. Wanneer u besluit dat kopjes voortaan niet blauw moeten zijn, maar rood, hoeft u dit slechts een maal op te geven. U hoeft niet langer handmatig elk individueel kopje te wijzigen.

Stijlbladen: Een praktisch voorbeeld

Laten we een praktisch voorbeeld bekijken van stijlbladen zoals ze in de Internet Explorer zijn ingebouwd. U begint met het maken van een eenvoudig document met verschillende soorten tekstelementen. De echte vormgeving beperkt u daarbij tot een minimum.

Vervolgens bepalen we de juiste opmaak van de verschillende elementen. U schrijft deze op de volgende manier op:

Met deze codes definieert u hoe de in de tekst voorkomende tags eruit dienen te zien. Zo zegt u over detekst tussen het paar tags <H1>...</H1> dat deze moet worden weergegeven in een blauwe kleur, en in een zogenaamde14 punts letter van het type Arial. Bovendien moeten dit soort kopjes een acht millimeter inspringen. Koppelingen krijgen geen enkele versiering (text-decoration:none). Dit wil met name zeggen dat ze niet onderstreept zijn. Wel krijgen ze een rode kleur.

Het tag-paar <STYLE>...</STYLE> komt altijd te staan in het hoofd van de Web-pagina, dat wil zeggen tussen de tags <HEAD> en </HEAD>, en in ieder geval vóór de tag <BODY>.

Achtergrondgeluid

De pagina’s die we tot nu toe hebben gemaakt speelden stommetje. Weliswaar was het niet moeilijk om koppelingen te maken naar geluids- en videobestanden. Maar op de HTML-pagina’s zelf bleef het doodstil.

Microsoft en Netscape hebben allebei besloten iets aan deze situatie te doen. Helaas zijn de twee bedrijven echter allebei met een andere oplossing gekomen. Om een achtergrondgeluid op uw pagina op te nemen dat met allebei de bladerprogramma’s beluisterd kan worden, dient u dan ook twee tags op te nemen:

De tag BGSOUND wordt gebruikt door Microsoft, de tag EMBED door Netscape. Allebei de tags hebben een attribuut SRC waarmee u kunt aangeven welk geluidsbestand tot klinken moet worden gebracht. Bij Netscape dient u daarnaast aan te geven dat dit achtergrondgeluid automatisch dient te starten; dat gebeurt bij Microsoft zonder meer. Bij de tag van dat laatste bedrijf dient u juist weer op te geven dat u wilt dat het achtergrondgeluidje herhaald moet worden zolang de bladzijde bekeken wordt; dat gebeurt bij Netscape nu juist weer automatisch.

Overigens heeft geen van beide bladerprogramma’s er problemen mee dat u ook de tag voor de concurrent in uw pagina’s opneemt: die tag negeren ze eenvoudigweg.

Formulieren maken

Om Web-pagina’s interactief te maken wordt door veel Web-ontwikkelaars gebruik gemaakt van formulieren. Een formulier is een Web-pagina waarin de gebruiker zelf gegevens kan invoeren, om deze uiteindelijk al dan niet te versturen naar de server-computer waarop de Web-site zich bevindt.

Op zo'n Web-pagina kan de gebruiker zijn of haar naam intikken, vinkjes plaatsen voor zijn of haar liefhebberijen en aankruisen welk geslacht hij of zij heeft. Uiteindelijk kan hij of zij op een knop Verstuur klikken om de ingevulde gegevens per e-mail te versturen of op Reset om alle ingevulde gegevens te verwijderen en opnieuw met een blanco invulpagina te beginnen.

De code van formulieren

Ik ga in dit boek alleen kort in op het ontwerp van formulieren. Om de formulieren echt interactief te maken -- om ze door een computer te laten ontvangen, analyseren en beantwoorden -- zal er het een en ander geprogrammeerd moeten worden. Dit valt buiten het bestek van dit boek. Hier zullen we alleen formulieren creëren die met de elektronische post naar een persoon toe kunnen worden gestuurd.

Rond de verschillende interactieve elementen van het formulier plaatst u het paar tags <FORM>...</FORM>. De begin-tag heeft het verplichte attribuut METHOD. Deze kan in theorie verschillende waarden hebben, maar vanwege de zojuist genoemde restrictie dat we niet gaan programmeren, is er slechts één waarde toegestaan: METHOD="post". Daarbij moet u nog enkele andere attributen opgeven. Allereerst is dat ACTION="mailto:naam@internetaanbieder.nl?subject=Enqueteformulier" waarbij u aangeeft naar welk e-mailadres het ingevulde formulier moet worden toegestuurd en wat er in de onderwerpregel (subject) moet worden ingevuld. In dit voorbeeld is dat het woord Enqueteformulier, maar u kunt hier elk woord of elke zin invullen die u maar geschikt acht. Zolang het maar een onderwerp is waaraan u onmiddellijk kunt zien dat het van het formulier afkomstig is.

U dient de tag FORM nóg een attribuut mee te geven, namelijk ENCTYPE="text/plain". Hiermee geeft u aan dat de uitkomst van het formulier eenvoudige ASCII zal zijn en als zodanig over het Internet verstuurd dient te worden.

Alles bij elkaar is de kern van het formulierenpaar dus als volgt:

De verschillende invoerelementen -- zoals de tekstvelden, de knopjes, de vakjes waarin de gebruiker een vinkje kan plaatsen -- maakt u allemaal met dezelfde tag, <INPUT>. Deze tag heeft drie verplichte attributen: TYPE, VALUE en NAME. De betekenis van de drie attributen wordt waarschijnlijk het duidelijkst als we de HTML-instructies voor het bovenstaande formulier één voor één bestuderen.

Het type van dit bestand is &TEXT&: dit is een veld waar tekst kan worden ingevuld. De naam van dit bestand is voornaam, want de gebruiker wordt hier verzocht antwoord te geven op de vraag wat zijn of haar voornaam is. De waarde (value) is Jan omdat deze naam aan de gebruiker als suggestie wordt gegeven.

Naast deze drie verplichte attributen, heeft de tag <INPUT> er hier nog twee. Met COLS=25 wordt aangegeven dat het tekstveld vijfentwintig lettertekens breed is; met SIZE="23" wordt aangegeven dat de gebruiker geen invoer mag geven die langer is dan drieëntwintig lettertekens. Probeert de gebruiker toch een langere invoer te geven, dan wordt zijn antwoord door het bladerprogramma afgekapt.

In dit geval hebben de twee tags het attribuut TYPE=CHECKBOX. Het laatste woord is de Engelse term voor het soort vakje dat gebruikt wordt om een vinkje in te zetten. Daarnaast hebben ze allebei het attribuut NAME="Hobby"; het zijn allebei antwoorden op de vraag naar de hobby van de gebruiker. Voor het attribuut VALUE hebben ze allebei een andere waarde omdat het natuurlijk verschillende antwoorden op de vraag zijn.

Deze twee tags hebben het attribuut TYPE=RADIO. Dat laatste woord staat voor radio button, ‘radioknop’. De term herinnert aan het ouderwetse soort radio, waarin druktoetsen zaten voor elke zender. Drukte men de toets voor een bepaalde zender in, dan kwamen alle andere toetsen naar buiten, omdat het natuurlijk niet mogelijk is om op meer dan één zender tegelijkertijd af te stemmen. Dat is ook een kenmerk van de radioknoppen die u hier kunt maken: de gebruiker kan hooguit één van de mogelijkheden kiezen. Hij of zij kan man zijn of vrouw, maar niet allebei tegelijk -- dat is in ieder geval de veronderstelling van de vragensteller. De naam van de twee tags verwijst weer naar de vraag waarop ze een antwoord geven en de waarde naar het antwoord dat ze geven.

De twee knoppen hebben allebei een ander type. De knop waarop de gebruiker moet klikken om zijn formulier te versturen heeft het type Submit (stuur in); de knop om het formulier leeg te maken heet Reset (begin opnieuw). De waarde van de knoppen is de tekst die op die knoppen geschreven staat. Het is -- alleen -- in dit geval niet nodig een naam mee te geven aan de knoppen: zij geven immers geen antwoord op een vraag.

Het resultaat van het formulier

Om de werking van het formulier te testen, loont het de moeite om het eens uit te proberen. U kunt dit overigens alleen doen wanneer u verbinding hebt met het Internet, omdat er immers een bericht moet worden verstuurd via de elektronische post. We vullen het formulier zelf in en klikken tenslotte op Submit. Na enkele seconden kunt u in uw e-mailvakje kijken hoe het bericht eruit ziet dat het bladerprogramma heeft aangemaakt.

De antwoorden op elke vraag worden regel voor regel onder elkaar gezet. Eerst wordt de waarde gegeven die u voor het attribuut &NAME& hebt ingevoerd, daarna het antwoord dat de gebruiker op die vraag heeft gegeven. Wanneer hij meerdere vinkjes heeft neergeschreven in antwoord op een bepaalde vraag, worden alle aangekruiste antwoorden gegeven. Bij radioknoppen komt uiteraard altijd maar één antwoord.