HTML Ruud Koortens Informatica Lyceum Sancta Maria Instruct HTML 1 HTML-bestanden maken 1.1 Elementen en tags 1.2 Een simpel HTML-bestand 1.2.1 Hyperlinks 1.2.2 URL Relatieve URL s 1.2.3 Koppen en alinea s 1.2.4 Witruimte 1.2.5 Lijsten Ongeordende lijst Geordende lijst Definitielijst 1.2.6 Speciale tekens 1.2.7 Commentaar 1.3 Afbeeldingen invoegen 1.3.1 Afbeeldingen als hyperlink 1.3.2 Image maps 1.3.3 Bestandsformaten Compressie GIF PNG JPEG Het juiste bestandsformaat 1.4 Eenvoudige tabellen 1.4.1 Koppen 1.4.2 Cellen samenvoegen Horizontaal samenvoegen Verticaal samenvoegen 1.4.3 Grootte Grootte van de tabel Grootte van een cel 1.5 Frames 1.5.1 Eenvoudige framesets Aantal en grootte van frames 1.5.2 Uitgebreide framesets 1.5.3 Alternatief voor framesets 1.5.4 Frames en hyperlinks 1.5.5 Framesets verwijderen 1
Deel 2 1.6 Style sheets 1.6.1 Klassen 1.6.2 Externe style sheets 1.6.3 Tekst Lettertype Uitlijning Kleur Tekst Hyperlinks 2 JavaScript 2.1 Een simpel script 2.1.1 Functies Parameters Return-waarde 2.1.2 Variabelen Bewerkingen op teksten Bewerkingen op getallen 2.1.3 Opdrachten buiten de functie 2.2 Events 2.3 Objecten 2.3.1 Het window-object 2.3.2 Het document-object 2.4 Externe scripts 2.4.1 Scripts van anderen gebruiken 2.5 Het ontwerp 2.5.1 Compositie Basiselementen Frames Tabellen 2.5.2 Lettertypen Families Variaties Lettertypen kiezen 2.5.3 Kleuren Kleurentheorie Kleuren samenstellen Kleuren op internet Kleurenschema s 2.5.4 Doelgroep Inhoud Webbrowsers Technologie 2.5.5 Structuur Navigatie Positie Afbeeldingen 2
3 De website op het internet 3.1 Meta-informatie 3.2 Webruimte 3.3 FTP 3.4 Zoekmachines 3.4.1 AltaVista 3.4.2 Yahoo! 3.4.3 Ilse Er bestaan allerlei programma s waarmee je webpagina s kunt maken, zogeheten webpublishing-programma s. Bekende namen op dit gebied zijn Microsoft FrontPage, Macromedia Dreamweaver en Adobe GoLive. De producenten van deze pakketten beweren allemaal dat je met hun product in een mum van tijd een website in elkaar kunt zetten. Laat je hierdoor niet misleiden! Met Windows Kladblok en kennis van HTML heb je nog altijd de krachtigste gereedschappen in handen om een mooie en overzichtelijke webpagina te maken. In deze verdiepingsstof komen de belangrijkste zaken van HTML aan de orde. 1 HTML-bestanden maken Een HTML-bestand maak je op dezelfde manier als een tekstbestand: je opent een programma waarmee je teksten kunt typen en je slaat de gemaakte tekst op als een tekstbestand. Alleen, om aan te geven dat je een HTML-bestand hebt getypt, geef je het bestand de extensie.htm in plaats van.txt. Het eenvoudigste programma voor het invoeren van tekst is Windows Kladblok. Het is geïnstalleerd op elke pc waar Windows op draait. 1.1 Elementen en tags Een HTML-document is meer dan alleen maar een tekst. Tenslotte betekent de afkorting HTML: HyperText Markup Language en daarmee wordt aangegeven dat het om een opmaaktaal gaat. Met HTML kun je de opmaak van je tekst bepalen en allerlei objecten invoegen. Dit doe je door bepaalde codes te gebruiken; deze codes noemen we elementen. De meeste elementen bestaan uit twee tags. De eerste tag geeft het begin van een element aan en de tweede het einde. Om bijvoorbeeld duidelijk te maken dat een document een HTML-document is, zet je aan het begin de tag en aan het einde. Niet alle elementen bestaan uit twee tags, sommige hebben alleen een begintag. Je kunt bijvoorbeeld een horizontale lijn in je tekst zetten met het element <HR>. Hierbij heb je geen eindtag nodig; sterker nog, je mag zelfs geen eindtag gebruiken. 1.2 Een simpel HTML-bestand We gaan nu een uiterst eenvoudig HTML-bestand invoeren. Typ de volgende tekst in Windows Kladblok en sla het bestand op als simpel.htm. Open het bestand daarna in je webbrowser. 3
<TITLE>Een simpel HTML-bestand.</TITLE> Hier komt de tekst te staan. Zo ziet ons HTML-bestand er uit in de browser Internet Explorer. In dit voorbeeld maken we gebruik van vier elementen. Elk HTML-document moet op z n minst deze vier elementen bevatten. We bekijken ze stuk voor stuk. Het -element omsluit altijd een HTML-document: hiermee geef je het begin en het einde van het HTML-document aan. Als je HTML schrijft, moet je document dus altijd beginnen met en het moet eindigen met. Het -element is bedoeld om informatie over het document te geven. Wat in dit gedeelte vermeld staat, krijg je niet in de browser te zien. Browsers gebruiken het om het document goed weer te kunnen geven en zoekmachines herkennen een document aan de hand van deze tekst. <TITLE> </TITLE> Het <TITLE>-element bevat de titel van een document. Deze titel komt op de titelbalk van de webbrowser te staan. Binnen het -element staat alle informatie die je door de webbrowser wilt 4
laten weergeven. In het voorbeeld is dat een korte tekst, maar later zul je zien dat je hier ook links, koppen, tabellen, afbeeldingen en nog meer kunt plaatsen. 1.2.1 Hyperlinks Eén van de belangrijkste voordelen van webpagina s boven boeken is de mogelijkheid om hyperlinks te gebruiken. Een hyperlink vaak kortweg link genoemd verwijst naar een andere webpagina. Door op de hyperlink te klikken open je deze webpagina automatisch. Een hyperlink maak je met het element <A> </A>. <TITLE>Voorbeeld van een hyperlink</title> Klik <A HREF= simpel.htm >hier</a> voor een voorbeeld van een simpele webpagina. Zo ziet de hyperlink er uit in Internet Explorer. In bovenstaand voorbeeld staat het woord hier tussen de begin- en de eindtag. Hierdoor wordt dat woord een hyperlink. 1.2.2 URL 5
Waarnaar de hyperlink verwijst, wordt in de begintag aangegeven met een zogenoemde parameter. Deze parameter heeft de naam HREF, een samentrekking van de woorden hyperlink reference. Door middel van het =-teken geven we de parameter een waarde. Zo n waarde zetten we tussen dubbele aanhalingstekens ( ). De waarde die je meegeeft aan de HREF-parameter is een zogeheten URL: een Uniform Resource Locator. Elk bestand op het World Wide Web of dat nu een HTMLdocument, een afbeelding, een videofragment of een programma is heeft zijn eigen URL. Met een URL kun je dus verwijzen naar een bestand op het World Wide Web. Elke URL bestaat uit drie delen: De naam van het protocol dat nodig is om de bron op te vragen. De webbrowser wil weten welk protocol hij moet gebruiken voor de bron die je opgeeft. Voor HTMLdocumenten is dit http, voor binaire bestanden is dit ftp en voor e-mail is dit mailto. De naam van de machine waar de bron zich bevindt. Deze bestaat uit drie gedeelten, elk gescheiden door een punt. Het eerste deel is meestal www, het tweede deel is een unieke naam en het derde deel is een aanduiding van het soort website of van het land van herkomst van de website, bijvoorbeeld.com,.org of.nl. Dit laatste noemen we wel de domeinnaam. De naam van de bron zelf, gegeven als een padnaam. Dit is de bestandsnaam van de bron, zoals je die ook in Windows kent. De bestandsnaam wordt gegeven met het volledige pad, dus met de naam van de map ervoor. Relatieve URL s Het is niet altijd nodig om een volledige URL op te geven. Ook in ons voorbeeld wordt slechts een deel van de URL genoemd. Er is in zo n geval sprake van een relatieve URL. Bij een relatieve URL begint de browser te zoeken in de map waarin het document staat. Stel dat je het bovenstaande bestand link.htm hebt opgeslagen in http://www.mijndomein.nl/voorbeeld/link.htm. De relatieve URL simpel.htm neemt dan de domeinnaam en het pad van het document waar hij in staat en plakt daar simpel.htm aan vast. Je krijgt dan: http://www.mijndomein.nl/voorbeeld/simpel.htm. Als je de relatieve URL laat beginnen met een pad, dan wordt ook het hele pad van de oorspronkelijke URL vervangen. Stel dat je vanuit het document http://www.mijndomein.nl/voorbeeld/link.htm de relatieve URL /begin/simpel.htm opvraagt, dan luidt de volledige URL van je link: http://www.mijndomein.nl/begin/simpel.htm. Je kunt de slash (/) aan het begin van het pad ook weglaten. In dat geval wordt het oorspronkelijke pad niet vervangen maar aangevuld. Stel dat je vanuit het document http://www.mijndomein.nl/voorbeeld/link.htm de relatieve URL begin/simpel.htm opvraagt, dan luidt de volledige URL van je link: http://www.domeinnaam.nl/voorbeeld/begin/simpel.htm. 1.2.3 Koppen en alinea s Net als in veel andere documenten wordt tekst in een HTML-document verdeeld in koppen en alinea s. Een kop bevat de titel of de subtitel van een tekst. Een alinea bestaat uit een aantal regels tekst die bij elkaar horen. Koppen markeer je met het element <H1>,wat staat voor Heading 1. De webbrowser zet de kop automatisch op zijn eigen regel. Als je de webpagina ook nog wilt voorzien 6
van subkoppen, kun je het <H2>-element gebruiken. Een subkop van een subkop kun je weer aangeven met <H3>. Dit gaat zo door tot en met <H6>. Om aan te geven welke zinnen tot een alinea behoren, zet je al die zinnen binnen het <P>-element. <P> staat voor Paragraph, het Engelse woord voor alinea. Alinea s worden door de webbrowser automatisch gescheiden door een witregel. <TITLE>Koppen en alinea s</title> <H1>Koppen en alinea s</h1> <P>In een HTML-document zijn koppen en alinea s op een duidelijke manier van elkaar gescheiden.</p> <H2>Koppen</H2> <P>Koppen kun je gebruiken om je tekst een titel te geven. Op die manier weet de lezer meteen waar de tekst over gaat.</p> <P>Je kunt ook subkoppen gebruiken om stukjes in je tekst titels te geven. HTML ondersteunt koppen tot en met het zesde niveau.</p> <H2>Alinea s</h2> <P>In de alinea s staat het verhaal dat je wilt vertellen. De webbrowser scheidt alinea s van elkaar door er een witregel tussen te plaatsen.</p> 7
Hier zie je hoe Internet Explorer omgaat met koppen, subkoppen en alinea s. 1.2.4 Witruimte Inmiddels zul je wel gemerkt hebben dat HTML een wat aparte manier heeft om met witregels om te gaan. Je zou misschien verwachten dat als jij een witregel in je broncode hebt staan, je die ook in de webbrowser te zien krijgt. Dit is echter niet zo. Elke keer als je op de <Enter>-toets drukt, voeg je een harde return in in je document. De webbrowser beschouwt alle harde returns als spaties. Van meerdere spaties achter elkaar maakt hij één spatie. Al die spaties en harde returns die de webbrowser niet laat zien, maar die wel in je code staan, noem je witruimte. Dit zijn alle spaties, tabs en harde returns die niet horen bij de tekst zoals die uiteindelijk op je webpagina komt. Deze witruimte kun je heel goed gebruiken om je broncode er netter uit te laten zien. <TITLE>Witruimte</TITLE> <P>In de broncode staan heel veel spaties, tabs en harde returns 8
die de webbrowser niet weergeeft.</p> Alle witruimte uit de broncode is verdwenen. Het komt wel eens voor dat je toch een harde return wilt invoegen in je document. Dit kun je doen met het element <BR>, dat geen eindtag kent. <BR> staat voor Break. <TITLE>Volgende regel</title> <P>Je kunt geen regeleinde op een webpagina zetten door een harde return in de broncode te zetten, want de webbrowser beschouwt dit als witruimte. Toch kun je in HTML wel naar de volgende regel springen.<br> In de praktijk zul je dit maar weinig doen, want als je naar een nieuwe regel springt, heb je doorgaans te maken met een nieuwe alinea.</p> 9
Dankzij het <BR>-element kun je een regeleinde invoegen. Let erop dat je <BR> niet gebruikt om alineascheidingen aan te geven. Dit kun je beter doen door elke alinea tussen <P> en </P> te zetten. Je zult het <BR>-element in HTML-documenten dan ook niet vaak nodig hebben. 1.2.5 Lijsten Om teksten overzichtelijk te houden zijn niet alleen koppen en alinea s maar ook lijsten van belang. HTML ken drie verschillende soorten lijsten: de ongeordende lijst, de geordende lijst en de definitielijst. Ongeordende lijst Een ongeordende lijst gebruik je voor opsommingen zonder specifieke volgorde. Zo n lijst plaats je binnen het <UL>-element, waarbij elk onderdeel van de lijst wordt voorafgegaan door het <LI>-element. Dit laatste element kent geen eindtag. <UL> staat voor Unordered List en <LI> staat voor List Item. <TITLE>Ongeordende lijst</title> <H1>Lijsten</H1> <P>HTML kent drie verschillende lijsten.</p> <UL> <LI>ongeordende lijsten <LI>geordende lijsten <LI>definitielijsten </UL> 10
Een voorbeeld van een ongeordende lijst. Geordende lijst Een geordende lijst gebruik je als het gaat om informatie waarbij de volgorde van belang is, bijvoorbeeld een recept. Een geordende lijst zet je binnen het <OL>-element, waarbij elk onderdeel van de lijst weer wordt voorafgegaan door het <LI>-element. <OL> staat voor Ordered List. <TITLE>Geordende lijst</title> <H1>Afsluiten</H1> <P>Voer de onderstaande stappen uit om de computer af te sluiten</p> <OL> <LI>Klik op Start. <LI>Klik op Afsluiten. <LI>Selecteer de optie De computer uitschakelen. <LI>Klik op OK. </OL> 11
Een voorbeeld van een geordende lijst. Definitielijst Een definitielijst gebruik je als je van een aantal termen een definitie wilt geven. Zo n lijst plaats je binnen het <DL>-element, waarbij elke term wordt voorafgegaan door het <DT>-element en elke definitie door het <DD>-element. Zowel <DT> als <DD> heeft geen eindtag. <TITLE>Definitielijst</TITLE> <H1>Lijsten</H1> <P>HTML kent drie verschillende lijsten.</p> <DL> <DT>ongeordende lijst <DD>Wordt gebruikt om een opsomming te geven zonder specifieke volgorde. <DT>geordende lijst <DD>Wordt gebruikt om informatie te geven waarbij de volgorde van belang is. <DT>definitielijst <DD>Wordt gebruikt om van een aantal termen de definitie te geven. </DL> 12
Een voorbeeld van een definitielijst. 1.2.6 Speciale tekens Bepaalde tekens kun je niet zonder meer in HTML-code opnemen. Zo kun je het kleiner-dan-teken (<) niet in je tekst gebruiken, omdat de browser dan denkt dat je het begin van een tag aan wilt geven. Anderzijds zijn er tekens die niet op je toetsenbord zitten, maar die je soms wel op wilt nemen, bijvoorbeeld het auteursrechtteken ( ). Toch kun je deze tekens op je webpagina opnemen. Alle speciale tekens hebben namelijk een code gekregen. Als je deze code vooraf laat gaan door een ampersand (&) en afsluit met een puntkomma (;), laat de browser het juiste teken zien. In de opsomming van onderstaand voorbeeld zie je hoe je omgaat met tekens die een probleem kunnen opleveren als je ze zomaar intypt. <TITLE>Speciale tekens</title> <H1>Speciale tekens</h1> <P>Hieronder staan een paar veel gebruikte speciale tekens met hun code.</p> <UL> <LI>& = & <LI>< = < <LI>> = > 13
<LI>© = </UL> De webbrowser kan ook speciale tekens weergeven. 1.2.7 Commentaar Soms is het handig als je in je code opmerkingen kunt opnemen die niet in de webbrowser verschijnen. Je kunt dan van ingewikkelde code aangeven wat de code doet, of je kunt in de code duidelijk maken wat er nog moet gebeuren. Zulke opmerkingen noemen we commentaar. Tekst wordt beschouwd als commentaar zodra deze vooraf wordt gegaan door <!--. Je sluit commentaar af met -->. Let erop dat je in je commentaar niet twee streepjes achter elkaar (--) gebruikt, want dan denkt de webbrowser dat je het commentaar wilt afsluiten. <TITLE>Commentaar</TITLE> <H1>Tolor Asin</H1> <P>Dit is het recept voor tolor asin, oftewel zout ei.</p> <!-- Dit recept bestaat uit een definitielijst waarin een ongeordende en een geordende lijst worden gebruikt.--> <DL> 14
<DT>Ingrediënten <DD> <UL> <LI>4 liter verzadigde zoutoplossing <LI>mespuntje salpeter <LI>20 eenden- of grote kippeneieren </UL> <DT>Bereiding <DD> <OL> <LI>Los zoveel zout met de salpeter op in kokend water dat het water het zout niet meer opneemt. <LI>Overgiet de eieren met het pekelwater. Zorg dat de eieren geheel onder water staan. <LI>Zet het geheel weg op een koele plaats. Laat de eieren drie weken staan. <LI>Kook de eieren gedurende vijftien minuten. </OL> <DT>Opmerkingen <!-- Opmerking toevoegen over de manier van bewaren van de gepekelde eieren.--> </DL> 15
Het commentaar verschijnt niet in de webbrowser. 1.3 Afbeeldingen invoegen Om afbeeldingen op je webpagina te plaatsen gebruik je het <IMG>-element. Dit kent geen eindtag. <IMG> staat voor Image. <TITLE>Afbeelding</TITLE> <H1>Queen of Hearts</H1> <P>Voor de drie kaarten hieronder geldt:</p> <UL> <LI>er zit één schoppenkaart bij <LI>er zit één hartenkaart bij <LI>er zit geen klaverenkaart bij <LI>de linkerkaart is geen ruiten <LI>de rechterkaart is niet rood </UL> 16
<IMG SRC= kaarten.gif WIDTH= 219 HEIGHT= 96 ALT= Drie kaarten met de rug naar boven. > <P>Waar ligt de hartenvrouw?</p> Het raadsel van de hartenvrouw. Zoals je uit het voorbeeld kunt opmaken, heeft het <IMG>-element een aantal parameters. Om een afbeelding in te voegen heb je in ieder geval de vier parameters nodig die ook in het voorbeeld staan. Dit zijn: SRC Aan de SRC-parameter geef je de bron van je afbeelding op (SRC is een afkorting van source). Deze bron is een URL. HEIGHT, WIDTH Met de parameters HEIGHT en WIDTH geef je op hoe hoog en hoe breed de afbeelding is. Beide maten worden uitgedrukt in pixels. Let erop dat je de goede waarden meegeeft, anders heeft de browser problemen met het weergeven van de afbeelding. ALT De ALT-parameter gebruik je om een alternatieve tekst mee te geven aan de afbeelding (ALT is een afkorting van alternate). Deze tekst laat de browser zien als 17
hij de afbeelding niet kan weergeven, bijvoorbeeld doordat de browser de afbeelding niet kan vinden of doordat de gebruiker het weergeven van afbeeldingen heeft uitgeschakeld. 1.3.1 Afbeeldingen als hyperlink Je kunt een afbeelding als hyperlink gebruiken. De browser laadt dan een nieuwe pagina zodra je op de afbeelding klikt. <TITLE>Afbeelding als hyperlink</title> <H1>Queen of Hearts</H1> <P>Voor de drie kaarten hieronder geldt:</p> <UL> <LI>er zit één schoppenkaart bij <LI>er zit één hartenkaart bij <LI>er zit geen klaverenkaart bij <LI>de linkerkaart is geen ruiten <LI>de rechterkaart is niet rood </UL> <A HREF="oplossing.htm"> <IMG SRC="kaarten.gif" WIDTH="219" HEIGHT="96" ALT="Drie kaarten met de rug naar boven."> </A> <P>Waar ligt de hartenvrouw? Klik op de afbeelding voor de oplossing.</p> 18
Het kader om de afbeelding geeft aan dat de afbeelding als hyperlink fungeert. Als je geen kader om je afbeelding wilt hebben, geef de <IMG>-tag dan de parameter BORDER=0 mee. Om van een afbeelding een hyperlink te maken, plaats je deze binnen het <A>-element, net zoals je dat met tekst zou doen. 1.3.2 Image maps Zou het niet aardig zijn als in het Queen of Hearts -voorbeeld alleen de kaart werd omgedraaid waar je op klikt? Je zou dit natuurlijk kunnen doen door van elke kaart een aparte afbeelding te maken, maar er is ook een andere manier: image maps. Met een image map verdeel je een afbeelding in verschillende stukken. Elk stuk heeft zijn eigen hyperlink en zijn eigen alternatieve tekst. <TITLE>Image map</title> <H1>Queen of Hearts</H1> <P>Voor de drie kaarten hieronder geldt:</p> 19
<UL> <LI>er zit één schoppenkaart bij <LI>er zit één hartenkaart bij <LI>er zit geen klaverenkaart bij <LI>de linkerkaart is geen ruiten <LI>de rechterkaart is niet rood </UL> <IMG SRC="kaarten.gif" WIDTH="219" HEIGHT="96" USEMAP= #kaart-map > <MAP NAME= kaart-map > <AREA HREF= linker.htm ALT= De linkerkaart. SHAPE= rect COORDS= 0,0,70,95 > <AREA HREF= middelste.htm ALT= De middelste kaart. SHAPE= rect COORDS= 74,0,144,95 > <AREA HREF= rechter.htm ALT= De rechterkaart. SHAPE= rect COORDS= 148,0,218,95 > </MAP> <P>Waar ligt de hartenvrouw? Klik op de juiste kaart.</p> 20
Elke kaart is nu een aparte hyperlink. Om een image map aan een afbeelding te verbinden geef je het <IMG>-element de parameter USEMAP mee. Hiermee laat je weten welke image map je wilt gebruiken. Let erop dat je de naam die je achter USEMAP opneemt altijd laat beginnen met het #- teken. De image map zelf maak je met het <MAP>-element. De begintag van dit element geef je de parameter NAME mee. Dit is dezelfde naam als je hebt ingevoerd bij de paramater USEMAP van het <IMG>-element. Binnen het <MAP>-element geef je aan uit welke gebieden de afbeelding bestaat. Dit doe je door middel van het <AREA>-element, dat geen eindtag kent. Hieronder staan de parameters die je meegeeft aan het <AREA>element. HREF Net als bij het <A>-element geef je aan de HREF-parameter een URL op. Deze verwijst naar het document dat de browser moet openen zodra je op dit deel van de afbeelding klikt. ALT De ALT-parameter heeft hetzelfde effect als bij het <IMG>-element, alleen geldt de alternatieve tekst nu niet voor de hele afbeelding, maar alleen voor dit deel van de afbeelding. SHAPE Met de SHAPE-parameter maak je duidelijk welke vorm dit gebied binnen de afbeelding heeft. Je hebt de keuze uit rect, circle en poly, oftwel een rechthoek, een cirkel en een veelhoek. COORDS Met de COORDS-parameter geef je binnen de afbeelding precies een gebied aan. De waarde die je aan de COORDS-parameter meegeeft, is een lijst met getallen gescheiden door een komma. Wat deze getallen precies voorstellen, hangt af van de vorm die je hebt opgegeven bij de SHAPE-parameter. Alle getallen zijn coördinaten in pixels, gemeten vanaf de linkerbovenhoek van de afbeelding. SHAPE aantal verklaring getallen rect 4 x-coördinaat hoek linksboven, y-coördinaat hoek linksboven, x-coördinaat hoek rechtsonder, y-coördinaat hoek rechtsonder circle 3 x-coördinaat centrum, y-coördinaat centrum, straal poly afhankelijk van het aantal punten x-coördinaat eerste punt, y-coördinaat eerste punt, x-coördinaat tweede punt, y-coördinaat tweede punt,, x-coördinaat laatste punt, y- coördinaat laatste punt, x-coördinaat eerste punt, y-coördinaat eerste punt 1.3.3 Bestandsformaten Tot nu toe hebben we alleen een.gif-afbeelding ingevoegd. Een afbeelding kan echter ook een ander bestandsformaat hebben. Afhankelijk van hoe je afbeelding eruit ziet, moet je het juiste bestandsformaat kiezen. 21
Compressie Afbeeldingen zijn opgebouwd uit pixels. Al deze pixels moeten opgeslagen worden bij het bewaren van de afbeelding. Hoeveel bytes je nodig hebt om één pixel op te slaan, hangt af van het aantal kleuren waaruit je afbeelding bestaat, maar het minimum is één pixel. De afbeelding kaarten.gif, die we in ons voorbeeld gebruiken, is 219 pixels breed en 96 pixels hoog. Dit betekent dat de afbeelding in totaal bestaat uit 21.024 pixels. Dit zijn dus minimaal 21.024 bytes. Elke byte moet over het internet naar de bezoeker van je pagina gestuurd worden en dit kost tijd. Je gebruikt dus het liefst zo min mogelijk bytes. Met een speciale techniek, compressie genaamd, kunnen we ervoor zorgen dat een afbeelding minder bytes inneemt terwijl het aantal pixels gelijk blijft. Er bestaan verschillende soorten compressie, allemaal met hun eigen voor- en nadelen. Elk bestandsformaat gebruikt zijn eigen soort compressie. GIF Het.gif-bestandsformaat gebruikt zogenaamde lossless compressie. Dit betekent dat er bij het comprimeren geen informatie verloren gaat. Dit wordt bereikt door pixels of reeksen pixels die meermalen achter elkaar staan, slechts één keer op te slaan en aan te geven hoe vaak die pixel of reeks pixels afgebeeld moet worden. Deze vorm van compressie is vooral geschikt voor afbeeldingen die grote oppervlakten hebben die uit maar één kleur bestaan, denk aan cartoons. Afgezien van de compressiemethode heeft een.gif-afbeelding als beperking dat er maximaal 256 kleuren in voor kunnen komen. PNG Het.png-bestandsformaat wordt door velen gezien als de opvolger van.gif. De compressietechniek van.png is vergelijkbaar met die van.gif. Het grote voordeel van het.png-formaat is dat je meer dan 256 kleuren in een afbeelding mag gebruiken. JPEG In tegenstelling tot.gif en.png maakt het.jpeg-formaat gebruik van lossy compressie, wat betekent dat bij het comprimeren informatie verloren gaat. De details in de afbeelding worden vervaagd. De compressiemethode van.jpeg vergelijkt pixels die naast elkaar liggen met elkaar. Als de pixels qua kleur erg veel op elkaar lijken, maakt de compressiemethode ze dezelfde kleur en slaat ze als één geheel op. Als er in de afbeelding details voorkomen die met het menselijk oog niet of nauwelijks te zien zijn, worden die uit de afbeelding verwijderd. Deze vorm van compressie is vooral geschikt voor afbeeldingen met veel verschillende kleuren, zoals foto s. Het juiste bestandsformaat Je kunt het best bepalen welk bestandsformaat de kleinste afbeelding oplevert door de afbeelding op te slaan in alle drie genoemde formaten. Let erop dat het.jpeg-formaat kan leiden tot kwaliteitsverlies. De tabel hieronder zet de voor- en nadelen van de verschillende bestandsformaten op een rijtje. bestandsformaat compressietechniek aantal kleuren vooral geschikt voor.gif lossless (geen 256 cartoons, tekeningen kwaliteitsverlies).png lossless (geen kwaliteitsverlies) zoveel als nodig cartoons, tekeningen 22
.jpeg lossy (wel kwaliteitsverlies) 16.7 miljoen foto s Twee afbeeldingen opgeslagen als.gif, als.png en als.jpeg. 1.4 Eenvoudige tabellen We hebben al gezien dat je tekst overzichtelijk weer kunt geven met behulp van lijsten. Soms is het onder elkaar zetten van tekst in een lijst niet voldoende duidelijk. In dat geval kun je gebruik maken van tabellen. Je voegt een tabel in met het <TABLE>-element. Daarbinnen gebruik je het element om rijen aan te geven. Binnen het -element gebruik je vervolgens het <TD>-element om cellen aan te geven. staat voor Table Row, <TD> staat voor Table Data. <TITLE>Een simpele tabel</title> <H1>Magisch vierkant</h1> <P>Zowel de som van alle cellen in één rij, als de som van alle cellen in één kolom, als de som van alle cellen in één diagonaal is dertig.</p> <TABLE BORDER= 1 > <TD>8</TD> <TD>5</TD> <TD>2</TD> <TD>15</TD> 23
<TD>6</TD> <TD>11</TD> <TD>12</TD> <TD>1</TD> <TD>13</TD> <TD>0</TD> <TD>7</TD> <TD>10</TD> <TD>3</TD> <TD>14</TD> <TD>9</TD> <TD>4</TD> </TABLE> Zo maak je van een simpele tabel een magisch vierkant. Met de parameter BORDER van het <TABLE>-element geef je aan hoe breed de rand van de tabel moet zijn. BORDER= 1 geeft de tabel de dunst mogelijke rand. Hoe dun die rand precies is, hangt af van je webbrowser. BORDER= 0 zorgt voor een tabel zonder rand. 24
1.4.1 Koppen In een tabel kunnen ook koppen voorkomen. Je kunt van elke willekeurige cel een kop maken door het <TH>-element te gebruiken in plaats van het <TD>-element. <TH> staat voor Table Header. <TITLE>Koppen in een tabel</title> <H1>De konijnen van Fibonacci</H1> <P>De konijnen van Fibonacci zijn onsterfelijk. Elk volwassen konijnenpaar brengt één paar konijnen per seizoen voort. Zodra een konijn geboren wordt, heeft het één seizoen nodig om volwassen te worden. In het eerste seizoen is er één onvolwassen konijnenpaar aanwezig, dat één seizoen nodig heeft om volwassen te worden. Hoeveel konijnenparen zijn er in het zesde seizoen? <TABLE> <TH>seizoen</TH> <TH>onvolwassen</TH> <TH>volwassen</TH> <TH>totaal</TH> <TD>1</TD> <TD>1</TD> <TD>0</TD> <TD>1</TD> <TD>2</TD> <TD>0</TD> <TD>1</TD> <TD>1</TD> <TD>3</TD> <TD>1</TD> <TD>1</TD> <TD>2</TD> <TD>4</TD> <TD>1</TD> 25
<TD>2</TD> <TD>3</TD> <TD>5</TD> <TD>2</TD> <TD>3</TD> <TD>5</TD> <TD>6</TD> <TD>3</TD> <TD>5</TD> <TD>8</TD> </TABLE> Een net overzicht van de toename van het aantal konijnen van Fibonacci. 26
1.4.2 Cellen samenvoegen Zodra tabellen iets ingewikkelder worden dan wat we tot nu toe bekeken hebben, moet je al snel cellen gaan samenvoegen. Dit kun je doen met cellen die naast elkaar liggen en met cellen die onder elkaar liggen. Horizontaal samenvoegen Om cellen die naast elkaar liggen samen te voegen, gebruik je de parameter COLSPAN van het <TD>- of het <TH>-element. Je geeft aan COLSPAN een getal mee dat aangeeft uit hoeveel cellen de samengevoegde cel moet bestaan. <TITLE>Horizontaal samengevoegde cellen</title> <TABLE BORDER= 1 > <TH COLSPAN="6">december 2002</TH> <TD>maandag</TD> <TD> </TD> <TD>4</TD> <TD>11</TD> <TD>18</TD> <TD>25</TD> <TD>dinsdag</TD> <TD> </TD> <TD>5</TD> <TD>12</TD> <TD>19</TD> <TD>26</TD> <TD>woensdag</TD> <TD> </TD> <TD>6</TD> <TD>13</TD> <TD>20</TD> <TD>27</TD> <TD>donderdag</TD> <TD> </TD> 27
<TD>7</TD> <TD>14</TD> <TD>21</TD> <TD>28</TD> <TD>vrijdag</TD> <TD>1</TD> <TD>8</TD> <TD>15</TD> <TD>22</TD> <TD>29</TD> <TD>zaterdag</TD> <TD>2</TD> <TD>9</TD> <TD>16</TD> <TD>23</TD> <TD>30</TD> <TD>zondag</TD> <TD>3</TD> <TD>10</TD> <TD>17</TD> <TD>24</TD> <TD>31</TD> </TABLE> 28
De kop van deze tabel bestaat uit zes samengevoegde cellen. Verticaal samenvoegen Het is ook mogelijk om onder elkaar gelegen cellen samen te voegen. Hiervoor geef je een <TD>- of een <TH>-element de parameter ROWSPAN mee. <TITLE>Verticaal samengevoegde cellen</title> <H1>Cd-verzameling</H1> <TABLE BORDER= 1 > <TH> </TH> <TH>band/componist</TH> <TH>titel</TH> <TD ROWSPAN="2">Klassiek</TD> <TD>Debussy</TD> <TD>La Mer</TD> <TD>Stravinsky</TD> <TD>Le Sacre Du Printemps</TD> 29
<TD ROWSPAN="2">Pop</TD> <TD>Dire Straits</TD> <TD>Money for Nothing</TD> <TD>Guns 'n Roses</TD> <TD>Appetite For Destruction</TD> </TABLE> Met verticaal samengevoegde rijen kun je makkelijk categorieën aanduiden. Als je cellen verticaal wilt samenvoegen, moet je de parameter ROWSPAN meegeven aan het eerste <TD>- of <TH>-element dat bij de samengevoegde cellen hoort. Let erop dat je in de volgende rij de samengevoegde cel volledig weglaat. In bovenstaand voorbeeld lijkt het alsof sommige rijen maar twee cellen bevatten, hoewel ze er in werkelijkheid drie hebben. Dit komt doordat in de rij daarvoor is aangegeven dat de eerste cel van beide rijen samengevoegd moet worden. 1.4.3 Grootte De browser zorgt er automatisch voor dat elke cel in een tabel groot genoeg is om de gegevens erin te laten passen. Hierdoor ontstaat meestal een tabel die zo compact mogelijk is. Het zal regelmatig voorkomen dat je wat meer zeggenschap wilt over het uiterlijk van je tabel. In dat geval moet je zelf aangeven hoe groot de tabel moet zijn. Grootte van de tabel 30
Je kunt van een tabel aangeven hoe groot hij in totaal moet zijn. Dit doe je door aan het <TABLE>-element de parameters HEIGHT en WIDTH mee te geven. <TITLE>Grootte van de tabel</title> <TABLE WIDTH= 50% HEIGHT= 100% BORDER= 1 > <TH>jaartal</TH> <TH>locatie</TH> <TD>1344</TD> <TD>Portugal</TD> <TD>1464</TD> <TD>Engeland</TD> <TD>1584</TD> <TD>Frankrijk</TD> <TD>1704</TD> <TD>Duitsland</TD> <TD>1824</TD> <TD>Bulgarije</TD> <TD>1944</TD> <TD>Jeruzalem</TD> </TABLE> 31
De tabel neemt nu de helft van het venster in. Aan de parameters HEIGHT en WIDTH geef je een percentage mee, waarmee je vertelt hoeveel procent van de hoogte of breedte van het browservenster je wilt gebruiken. De tabel in het voorbeeld beslaat de gehele hoogte en de helft van de breedte. Grootte van een cel Het is een stuk lastiger om de grootte van een cel op te geven. Als je namelijk de breedte van een cel verandert, verander je de breedte van de hele kolom. En als je de hoogte van een cel aanpast, verander je de hoogte van de hele rij. <TITLE>Grootte van een cel</title> <TABLE HEIGHT="100%" WIDTH="100%" BORDER="1"> <TD WIDTH="20%">Deze cel is 20% breed.</td> <TD>De grootte van deze cel is ongedefinieerd</td> <TD HEIGHT="20%">Deze cel is 20% hoog.</td> <TD>De grootte van deze cel is ongedefinieerd</td> <TD HEIGHT="50%">Deze cel is 50% hoog.</td> 32
<TD>De grootte van deze cel is ongedefinieerd.</td> <TD>De grootte van deze cel is ongedefinieerd</td> <TD WIDTH="30%">Deze cel is 30% breed.</td> <TD HEIGHT="30%" WIDTH="50%">Deze cel is 30% hoog en 50% breed.</td> </TABLE> De grootte van de cellen in de tabel is aangepast. Ook de grootte van een cel geef je op in procenten. In dit geval gaat het om het percentage van de tabel en niet van de webpagina. Uiteraard moeten de breedtes van alle kolommen samen honderd procent vormen en de hoogtes van alle rijen eveneens. Je hoeft niet van elke rij of kolom de grootte op te geven. Stel dat je vier kolommen hebt en dat je van twee de breedte hebt opgegeven. De webbrowser kijkt dan hoeveel procent van de tabel er nog over is en verdeelt die ruimte over de twee overgebleven kolommen. 1.5 Frames 33
Met frames kun je een webpagina netjes in stukken verdelen. Bovendien voorkom je dat bepaalde gedeelten onnodig meerdere keren geladen moeten worden. 1.5.1 Eenvoudige framesets Om je webpagina in verschillende frames te splitsen, moet je eerst definiëren hoe je die verdeling wilt aanbrengen. Zo n definitie noemen we een frameset. Een frameset, waarin je aangeeft welke webpagina s in welk frame geladen moeten worden, zet je altijd in een aparte HTML-pagina. <TITLE>Een simpele frameset</title> <FRAMESET COLS= 20%,80% ROWS= 40%,60% > <FRAME SRC= frame1.htm > <FRAME SRC= frame2.htm > <FRAME SRC= frame3.htm > <FRAME SRC= frame4.htm > </FRAMESET> Een simpele frameset. Bij een HTML-document met een frameset ontbreekt een -gedeelte. In de plaats daarvan is het <FRAMESET>-element gekomen, dat aangeeft dat er een frameset is gedefinieerd. Je geeft de parameters COL en ROW mee om te laten weten hoeveel frames je wilt hebben en hoe groot ze moeten zijn. Binnen het <FRAMESET>-element gebruik je het <FRAME>-element om meer informatie te geven over de frames. Het <FRAME>-element heeft geen eindtag. Met de parameter 34
SRC geef je aan welk document er in het frame geladen moet worden. Dit doe je door de parameter SRC een URL mee te geven. In het voorbeeld wordt in elk frame een HTML-pagina geladen. Elke pagina bestaat uit een simpele tekst die aangeeft om welk frame het gaat. Aantal en grootte van frames Het <FRAMESET>-element kent zoals gezegd twee parameters om het aantal en de grootte van frames te definiëren. Met COL geef je op in hoeveel kolommen en met ROW in hoeveel rijen je de pagina wilt verdelen. Beide parameters werken op dezelfde manier. We nemen voor het gemak COL als voorbeeld. De waarde die je meegeeft aan COL bestaat uit een reeks getallen, gescheiden door een komma. Het aantal getallen dat je opgeeft, bepaalt in hoeveel kolommen de pagina wordt verdeeld. Zo verdeelt de regel <FRAMESET COLS= 20%, 20%, 20%, 20%, 20% > de pagina in vijf kolommen. De getallen zelf stellen groottes voor. Met de waarde 20% geef je aan dat een kolom twintig procent van de totale webpagina moet innemen. Uiteraard moeten alle getallen bij elkaar opgeteld honderd procent vormen. Je kunt ook aangeven dat een bepaalde kolom de rest van de pagina moet vullen. Dit doe je door middel van de asterisk (*). De regel <FRAMESET COLS= 20%,*,30% > maakt een linkerkolom van twintig procent van de pagina, een rechterkolom van dertig procent en een middelste kolom van de ruimte die overblijft. Het is zelfs mogelijk om meerdere asterisks te gebruiken. <FRAMESET COLS= 20%,*,*,30%> verdeelt de pagina in vier kolommen. De linkerkolom neemt twintig procent van de ruimte in, de rechterkolom dertig procent en de overgebleven ruimte wordt gelijkelijk verdeeld over de twee middelste kolommen. Als je wilt aangeven dat van de middelste twee kolommen de linker twee keer zo groot moet zijn als de rechter, dan zet je een 2 voor de asterisk: <FRAMESET COLS= 20%,2*,*,30%>. Uiteraard werkt dit ook met andere gehele getallen. 1.5.2 Uitgebreide framesets In het voorgaande voorbeeld was sprake van twee kolommen die beide verdeeld waren in twee rijen. Vaak is het handig als we slechts één van de twee kolommen in twee rijen verdelen en de andere kolom intact laten. Om dit te bereiken moeten we een frameset in een frameset plaatsen. <TITLE>Een uitgebreide frameset</title> <FRAMESET COLS= 20%,80% > <FRAME SRC= frame1.htm > <FRAMESET ROWS= 20%,80% > <FRAME SRC= frame2.htm > <FRAME SRC= frame3.htm > </FRAMESET> </FRAMESET> 35
Hier is een frameset in een frameset geplaatst. Door een <FRAME>-element te vervangen door een nieuw <FRAMESET>-element splitsen we het frame in meerdere stukken. 1.5.3 Alternatief voor framesets Niet alle browsers ondersteunen framesets. Om dit probleem te ondervangen kun je gebruik maken van het <NOFRAMES>-element. Alles wat binnen dit element staat wordt genegeerd door browsers die wel frames kunnen weergeven, maar het wordt gebruikt door webbrowsers die niet met frames kunnen omgaan. <TITLE>Alternatief voor framesets</title> <FRAMESET COLS= 20%,80% > <FRAME SRC= frame1.htm > <FRAME SRC= frame2.htm > <NOFRAMES> <P>Deze pagina gebruikt frames en die worden door uw webbrowser niet ondersteund.</p> </NOFRAMES> </FRAMESET> Het <NOFRAMES>-element wordt binnen het <FRAMESET>-element geplaatst. In dit voorbeeld krijgt de bezoeker slechts een berichtje te zien als de browser geen frames ondersteunt, maar je kunt in het <NOFRAMES>-element natuurlijk een webpagina plaatsen die geen frames gebruikt of een link naar zo n webpagina. 36
1.5.4 Frames en hyperlinks Standaard worden hyperlinks geopend in het frame waarin ze aangeroepen zijn. Dit betekent dat als iemand in frame 1 op een link klikt, de pagina waar de link naar verwijst ook in frame 1 geladen wordt. Je kunt dit veranderen door elk frame een naam te geven en bij de hyperlink op te geven in welk frame het document geladen moet worden. <TITLE>Frames en hyperlinks</title> <FRAMESET COLS= 20%,80% > <FRAME SRC= frame1link.htm NAME= frame1 > <FRAME SRC= frame2.htm NAME= frame2 > </FRAMESET> Om een frame een naam te geven gebruik je de parameter NAME van het <FRAME>element (zorg ervoor dat de namen uniek zijn). Wanneer elk frame een naam heeft, kun je naar het gewenste frame verwijzen. <TITLE>Frame 1</TITLE> <P>Klik <A HREF= frame2link.htm TARGET= frame2 >hier</a> om de inhoud van het tweede frame te veranderen.</p> Door aan het <A>-element de parameter TARGET mee te geven, kun je bepalen in welk frame de hyperlink geopend moet worden. 1.5.5 Framesets verwijderen Als je op je webpagina een link zet die niet in een frame geopend moet worden, maar die de hele pagina in beslag moet nemen, dan kun je dit doen door de parameter TARGET van het <A>-element de waarde _top mee te geven. <TITLE>Frame 1</TITLE> <P>Klik <A HREF= frame2weg.htm TARGET= _top >hier</a> om van de frameset af te komen.</p> 37
38