4. HyperText Markup Language

Marc van Oostendorp

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

In de vorige hoofdstukken is de techniek die ten grondslag ligt aan de Web-pagina al enkele keren genoemd. Die techniek heet HTML, hypertext markup language. Tot nu toe hebben we de details ervan met succes kunnen negeren, maar na de voorafgaande hoofdstukken hebt u een zodanig niveau bereikt dat het belangrijk wordt om iets over HTML te leren wanneer u vooruit wilt komen. Maakt u zich geen zorgen. Erg ingewikkeld zal het niet blijken te zijn.

Hypertekst is de technische term voor het soort tekst waarop het Web gebaseerd is: tekst waarin bepaalde woorden geselecteerd kunnen worden en weer nieuwe tekst tevoorschijn te roepen. Er wordt overigens ook wel gesproken over hypermedia, om te benadrukken dat ook andere soorten bestanden dan pure tekst hun plaatsje hebben op het Web. Het belangrijkste verschil tussen gewone tekst of gewone media en hypertekst of hypermedia is dat de schrijver bij de laatste minder invloed heeft op de volgorde waarin de gebruiker de aangeboden informatie tot zich neemt.

HTML

De hypertext markup language is een systeem van instructies over de manier waarop een hypertekst moet worden weergegeven op het scherm. Alle zetinstructies die u tot nu toe in Netscape Gold hebt gegeven zijn achter de schermen voor u vertaald in HTML-codes. Hoe die vertaling werkt, kunnen we het best bestuderen aan de hand van een eenvoudig concreet voorbeeld. U maakt de volgende pagina aan.

Vervolgens slaat u de pagina op uw harde schijf op. U kunt hem nu openen in een eenvoudige zogenaamde ASCII-editor, zoals het kladblok in Windows. Wanneer u met Windows 3.1 werkt, vindt u deze editor in de groep Accessoires in de Programmagroep; in Windows 95 vindt u hetzelfde programma in het deelmenu Bureau-accessoires in het menu Programma's onder de Start-knop.

Er zijn nog enkele manieren waarop u de code die aan een pagina ten grondslag ligt te zien kunt krijgen. Een van die manieren is via de mogelijkheid Document Source in het menu View Source van het bladergedeelte van Netscape (of Source in het menu View in Microsoft Internet Explorer). Deze code kunt u echter niet bewerken. U kunt ook een speciaal programma gebruiken om met HTML-bestanden om te gaan. Enkelen hiervan worden later in dit hoofdstuk behandeld.

U ziet dat aan de eigenlijke tekst een groot aantal elementen zijn toegevoegd. Die elementen zijn allemaal woorden die tussen vishaken staan. Ze worden vaak aangeduid met de Engelse term tag. Wanneer u wel eens met het tekstverwerkingspakket WordPerfect gewerkt heeft, kent u dit soort elementen wel uit het zogenaamde onderwaterscherm dat u in dat pakket tevoorschijn kunt roepen door de toets F3 in te drukken. Zo staat helemaal aan het begin van het document (we negeren hier de allereerste tag die met <DOC> begint) de tag <HTML>. Deze aanduiding geeft aan dat de rest van het document gebruik maakt van HTML-codes. Aan het eind van het document vindt u de tag </HTML>; deze geeft aan dat er geen HTML-codes meer volgen.

Tags staan vaak in dit soort paren: een begin-tag met een bepaald woord tussen vishaken, en een eind-tag met datzelfde woord tussen vishaken, maar nu voorafgegaan door een schuine streep. In het bovenstaande voorbeeld ziet u bijvoorbeeld de tagparen <HEAD>...</HEAD>, <TITLE>...</TITLE>, <BODY>...</BODY>, <B>...</B> en <I>...</I>.

In tags wordt geen onderscheid gemaakt tussen hoofdletters en kleine letters. De tag <HTML> is precies dezelfde als de tags <html>, <Html> of <HtmL>. De meeste mensen -- en de meeste programma's die automatisch tags invoegen zoals Netscape Navigator Gold -- maken gebruik van de tags met alleen hoofdletters, waarschijnlijk omdat deze makkelijker te onderscheiden zijn van de lopende tekst.

Net zoals het verschil tussen hoofd- en kleine letters er niet toe doet, zo maakt het ook niet uit hoeveel spaties of regels wit er in een bepaald HTML-document staan. Al zouden we alle bovenstaande tag-paren op één regel plaatsen, dan kregen we nog dezelfde uitkomst.

Binnen de HTML-structuur maken we onderscheid tussen twee gedeelten. Allereerst is er het hoofd (head). In dit gedeelte vindt u alle informatie die u aan een document heeft toegevoegd zonder dat hij in het document zelf getoond wordt, zoals de titel (title) van het document, de naam van de auteur (author), eventuele steekwoorden (keywords), enzovoort.

Het belangrijkste gedeelte van het document staat tussen het paar tags <BODY>...</BODY> (lichaam). Alles wat tussen deze twee tags staat wordt op het scherm van de gebruiker getoond. In die tekst vindt u ook weer tags. Deze geven opmaakinstructies aan. De belangrijkste hiervan worden in de volgende paragraaf opgesomd.

De tag <BODY> heeft overigens in veel gevallen enkele toevoegingen. Dergelijke toevoegingen worden meestal attributen genoemd. In het voorbeeld hierboven zijn dat TEXT="#000080", BGCOLOR="#FFC040", LINK="#0000FF", VLINK="#008000" en ALINK="#00FFFF". Al deze toevoegingen geven kleuren aan, van respectievelijk de achtergrond van de pagina, de gewone tekst, de koppelingen die nog niet en de koppelingen die al wel gevolgd zijn.

Al deze kleuren worden weergegeven met behulp van combinaties van cijfers en letters. Er is een ingenieus systeem bedacht om de miljoenen kleuren die u aan elk element op een pagina geeft om te zetten in een code die bestaat uit zes cijfers of letters. De berekening welke code u hier moet gebruiken wordt gelukkig uitgerekend door Netscape. Over de precieze structuur van deze codes hoeven we ons dus geen zorgen te maken.

Er zijn overigens ook enkele standaardkleuren die we niet met dit soort vreemde codes hoeven weer te geven. U kunt bijvoorbeeld in een pagina de volgende tag opnemen:

De achtergrond van de pagina neemt dan een groene kleur aan. (Het Engelse woord voor green is groen.) Deze kleur groen komt overigens overeen met de code & #008000&. Op dezelfde manier zijn nog meer standaardkleuren gedefinieerd. Alle onderstaande codes kunnen eventueel worden voorafgegaan door een hekje:

Naam - Code - Omschrijving

aliceblue - F0F8FF - Een groen-achtig blauw
antiquewhite - FAEBD7 - Sjiek gebroken wit
aqua - 00FFFF - Lichtblauw
aquamarine - 7FFFD4- Aquamarine
azure - F0FFFF- Azuur
beige - F5F5DC- Beige
bisque - FFE4C4- Licht oranje-achtig bruin
black - 000000- Zwart
blanchedalmond - FFEBCD- Amandelkleurig
blue - 0000FF- Blauw
blueviolet - 8A2BE2- Blauw-violet
brown - A52A2A- Bruin
burlywood - DEB8887- Bruin-achtig
cadetblue - 5F9EA0- Kadettenblauw
chartreuse - 7FFF00- Chartreuse
chocolate - D2691E- Chocolade-kleurig
coral - FF7F50- Koraalrood
cornflowerblue - 6495ED- Korenbloemblauw
cornsilk - FFF8DC- Zijde-achtig wit
crimson - DC143C- Donker rood
cyan - 00FFFF- Cyaan
darkblue - 00008B- Donkerblauw
darkcyan - 008B8B- Donkercyaan
darkgoldenrod - B8860B- Donkergroenachtig bruin
darkgray - A9A9A9- Donkergrijs
darkgreen - 006400- Donkergroen
darkkhaki - BDB76B- Donkerkhaki
darkmagenta - 8B008B- Donkermagenta
darkolivegreen - 556B2F- Donkerolijfgroen
darkorange - FF8C00- Donkeroranje
darkorchid - 9932CC- Donker-orchideekleurig
darkred - 8B0000- Donkerrood
darksalmon - E9967A- Donker-zalmkleurig
darkseagreen - 8FBC8F- Donker-zeegroen
darkslateblue - 483D8B- Donker-leisteenblauw
darkslategray - 2F4F4F- Donker-leisteengrijs
darkturquoise - 00CED1- Donker-turquoise
darkviolet - 9400D3- Donker-violet
deeppink - FF1493- Diep-roze
deepskyblue - 00BFFF- Diep-hemelsblauw
dimgray - 696969- Zachtgrijs
dodgerblue - 1E90FF- Helderblauw
firebrick - B22222- Vuursteenrood
floralwhite - FFFAF0- Bloemenkelkwit
forestgreen - 228B22- Bosgroen
fuchsia - FF00FF- Fuchsiakleurig
gainsboro - DCDCDC- Lichtgrijs
ghostwhite - F8F8FF- Spokenwit
gold - FFD700- Goudkleurig
goldenrod - DAA520- Groenachtig bruin
gray - 808080- Grijs
green - 008000- Groen
greenyellow - ADFF2F- Groengeel
honeydew - F0FFF0- Honingdauw
hotpink - FF69B4- Donkerroze
indianred - CD5C5C- Indianenrood
indigo - 4B0082- Indigo
ivory - FFFFF0- Ivoor
khaki - F0E68C- Khaki
lavender - E6E6FA- Lavendel
lavenderblush - FFF0F5- Toefje lavendel
lawngreen - 7CFC00- Grasgroen
lemonchiffon - FFFACD- Helderpaars
lightblue - ADD8E6- Lichtblauw
lightcoral - F08080- Licht-koraalkleurig
lightcyan - E0FFFF- Licht-cyaankleurig
lightgoldenrodyellow - FAFAD2- Licht-geelachtig groen
lightgreen - 90EE90- Lichtgroen
lightgrey - D3D3D3- Lichtgrijs
lightpink - FFB6C1- Lichtroze
lightsalmon - FFA07A- Licht-zalmkleurig
lightseagreen - 20B2AA- Licht-zeegroen
lightskyblue - 87CEBA- Licht-hemelsblauw
lightslategray - 778899- Licht-leisteengrijs
lightsteelblue - B0C4DE- Licht-staalblauw
lightyellow - FFFFE0- Lichtgeel
lime - 00FF00- Limoenkleurig
limegreen - 32CD32- Limoenengroen
linen - FAF0E6- Linnen
magenta - FF00FF- Magenta
maroon - 800000- Afrika-bruin
mediumaquamarine - 66CDAA- Zachtaqaumarijn
mediumblue - 0000CD- Zachtblauw
mediumorchid - BA55D3- Zacht-orchideekleurig
mediumpurple - 9370DB- Zacht-paars
mediumseagreen - 3CB371- Zacht-zeegroen
mediumslateblue - 7B68EE- Zacht-leisteenblauw
mediumspringgreen - 00FA9A- Zacht-lentegroen
mediumturquoise- 48D1CC - Zacht-turqoise
mediumvioletred - C71585- Zacht-violetrood
midnightblue - 191970- Zacht-blauw
mintcream - F5FFFA- Mintkleurig
mistyrose - FFE4E1- Oud-roze
moccasin - FFE4B5- Moccasin-kleurig
navajowhite - FFDEAD- Indianenwit
navy - 000080- Legerblauw
oldlace - FDF5E6- Oud-kantkleurig
olive - 808000- Olijfkleurig
olivedrab - 6B8E23- Donker-olijfkleurig
orange - FFA500- Oranje
orangered - FF4500- Oranjerood
orchid - DA70D6- Orchidee-kleurig
palegoldenrod - EEE8AA- Bleekgeelachtig groen
palegreen - 98FB98- Bleekgeel
paleturquoise - AFEEEE- Bleekturquoise
palevioletred - DB7093- Bleek-roodviolet
papayawhip - FFEFD5- Papaya-kleurig
peachpuff - FFDAB9- Perzikenrood
peru - CD853F- Peru
pink - FFC0CB- Roze
plum - DDA0DD- Pruimenpaars
powderblue - B0E0E6- Pastelblauw
purple - 800080- Paars
red - FF0000- Rood
rosybrown - BC8F8F- Rozenbruin
royalblue - 4169E1- Edelblauw
saddlebrown - 8B4513- Zadelbruin
salmon - FA8072- Zalmkleurig
sandybrown - F4A460- Zandachtig bruin
seagreen - 2E8B57- Zeegroen
seashell - FFF5EE- Lichtgroen
sienna - A0522D- Sienna
silver - C0C0C0- Zilverkleurig
skyblue - 87CEEB- Hemelsblauw
slateblue - 6A5ACD- Leisteen-blauw
slategray - 708090- Leisteen-grijs
snow - FFFAFA- Sneeuwwit
springgreen - 00FF7F- Lentegroen
steelblue - 4682B4- Staalblauw
tan - D2B48C- Gebruind roze
teal - 008080- Donkergrijsachtig blauw
thistle - D8BFD8- Distelkleurig
tomato - FF6347- Tomatenrood
turquoise - 40E0D0- Turquoise
violet - EE82EE- Violet
wheat - F5DEB3- Boekweitwit
white - FFFFFF- Wit
whitesmoke - F5F5F5- Rokerig wit
yellow - FFFF00- Geel
yellowgreen - 9ACD32- Geelgroen

De belangrijkste tags op een rijtje

In de volgende paragrafen vindt u een lijst met de meest voorkomende tags. Wanneer u de precieze werking van de verschillende tags wilt leren kennen, kunt u het best af en toe de pagina's die u heeft aangemaakt, eens bekijken. De volgende tags komen daarbij achtereenvolgens aan de orde.

 

Algemene opmaak-tags

<P>....</P>

Deze twee tags omsluiten een alinea (Engels: paragraph). In de meeste Web-bladerprogramma's worden twee alinea's van elkaar gescheiden door een regel wit. Het sluitingsteken wordt in dit geval overigens vaak -- ook door Netscape -- weggelaten. Aan de eerste tag kunnen enkele attributen worden toegevoegd. Het belangrijkste attribuut heet ALIGN, waarmee kan worden aangegeven hoe de tekst op de pagina moet worden geplaatst:

De drie soorten uitlijning worden in de onderstaande schermafbeelding gedemonstreerd.

<BR>

Deze tag staat gelijk aan wat in de wereld van tekstverwerkers heet een 'harde return'. In Netscape voerde u hem in met de combinatie van Control+Enter. De woorden na de tag <BR> beginnen op een nieuwe regel, zonder een regel wit.

<HR>

Deze tag geeft een horizontale scheidingslijn binnen de tekst aan. Ook aan deze tag kunnen door Netscape weer verschillende attributen worden toegevoegd, zoals WIDTH en HEIGHT die respectievelijk de lengte en de dikte van de lijn weergeven.

<H1>...</H1>, <H2>...</H2>, <H3>...</H3>, <H4>...</H4>, <H5>...</H5>, <H6>...</H6>

Deze paren tags worden gebruikt voor de verschillende soorten kopjes van hoofdstukken, paragrafen en deelparagrafen. H1 staat daarbij voor Header 1, het grootste kopje en <H6> voor Header 6, het kleinste kopje. Aan deze tags kan ook weer een attribuut ALIGN worden meegegeven, waarmee de ontwerper kan specificeren of het kopje links of rechts moet worden uitgelijnd, of dat het moet worden gecentreerd.

<BLOCKQUOTE>...</BLOCKQUOTE>

Deze tags geven aan dat een tekstgedeelte een langer citaat is. In de praktijk betekent dit dat voor de begin-tag en na de eind-tag een regel wit wordt overgeslagen, en dat het citaat als geheel een beetje inspringt in vergelijking met de rest van de tekst.

<PRE>...</PRE>

Geeft aan dat het tekstgedeelte gepreformatteerde tekst is, die door bladerprogramma's precies zo wordt weergegeven zoals u hem hebt ingevoerd.

Tags voor de vorm van tekstelementen

Behalve tags om de algemene structuur van de tekst mee aan te geven, zijn er ook tags waarmee u kunt bepalen dat een bepaald tekstelement, een woord of een woordgroep, op een bepaalde manier moet worden weergegeven, bijvoorbeeld schuingedrukt of vet.

Er zijn zelfs twee groepen van dit soort tag, die uitgaan van geheel verschilldende achterliggende gedachten. De eerste soort bestaat uit tag-paren als <I>...</I>, <B>....</B> en <U>...</U>. Deze tags geven respectievelijk aan dat een tekstgedeelte cursief (Engels: in italics), vet (boldface) of onderstreept moet worden weergegeven. Deze tags zult u dan ook het meest vinden in de tekst. Ze tags geven dus min of meer nauwkeurig aan hoe u de letters op het scherm wilt zien. Een andere tag uit dezelfde groep is <TT>, voor teletype, een aanduiding van het niet-proportionele lettertype.

Nog enkele -- iets minder vaak voorkomende -- tags uit deze categorie zijn:

<BIG>..</BIG>

Dit paar tags geeft aan dat de gebruikte letter -- inderdaad -- groter moet zijn dan de standaardletter. Netscape Navigator Gold voegt in dit soort gevallen meestal een paar tags in zoals <FONT SIZE=+1>...</FONT>, zoals we later zullen bespreken. <BIG> is iets minder precies, maar het wordt wel door meer Web-bladerprogramma's begrepen. Het programma Internet Explorer van Microsoft begrijpt overigens allebei de tags, net als Netscape Navigator.

<SMALL>..</SMALL>

Dit paar tags doet het omgekeerde als <BIG>...</BIG>: het geeft aan dat de gebruikte letter kleiner moet zijn dan die in de omringende tekst. Ook hier geldt weer dat Netscape een alternatief in de tekst invoegt (in dit geval <FONT SIZE=-1>...</FONT>), maar dat dit paar tags door minder bladerprogramma's begrepen wordt.

<SUB>..</SUB>

Dit paar tags geeft aan dat het omsloten tekstgedeelte een subscript is: het dient kleiner en iets lager te worden afgedrukt dan de omringende tekst.

<SUP>..</SUP>

Dit paar tags geeft aan dat het omsloten tekstgedeelte een superscript is: het dient kleiner en iets lager te worden afgedrukt dan de omringende tekst.

De tweede groep tags geeft daarentegen aan wat de functie is van een bepaald tekstelement binnen de huidige tekst. Een voorbeeld van een dergelijk tag-paar is <EM>...</EM>. De letters em staan voor emphasis, nadruk. Wanneer u een woord in uw tekst extra nadruk wilt geven, kunt u dit op de volgende manier aangeven:

In de praktijk geven zowel Netscape Navigator als Internet Explorer de woorden tussen de twee tags weer als schuingedrukt.

Andere blader-programma's, die bijvoorbeeld op computers werken die geen cursieve letters kunnen weergeven, kunnen nadruk op een geheel andere manier presenteren, bijvoorbeeld door middel van onderstrepingen.

Het werken met de tweede soort tag heeft één nadeel: u kunt er niet precies de vorm mee weergeven die u voor uw teksten verlangt. Het heeft tegelijkertijd echter ook een groot voordeel: omdat u heeft aangegeven wat de functie van een bepaald woord in uw tekst is, kan elk bladerprogramma zijn best doen om die functie zo goed mogelijk weer te geven. Een programma dat geen cursieve letters kan weergeven zal het tag-paar <I>...</I> gewoon overslaan; maar bij het tag-paar <EM>...</EM> zal het proberen een alternatieve oplossing te vinden.

Wanneer u pagina's maakt die bijvoorbeeld buiten het rijke Westen bekeken moeten worden, met eenvoudige bladerprogramma's en ditto Internet-verbindingen, zijn dit overwegingen die u heel serieus moet nemen. In dit boek ga ik er echter van uit dat u Web-pagina's maakt die mensen alleen kunnen bekijken op redelijk recente versies van geavanceerde bladerprogramma's zoals Internet Explorer. In dat geval zult u structurerende tags als <EM>...</EM> weinig tegenkomen. Voor de volledigheid geef ik hieronder toch nog enkele van de vaker voorkomende structurerende tags:

<ADDRESS>...</ADDRESS>

Geeft aan dat het tekstgedeelte naam en (e-mail-)adres bevat van degene die verantwoordelijk is voor deze pagina. De weergave hiervan is meestal een cursieve letter.

<CITE>...</CITE>

Geeft aan dat het tekstgedeelte een (kort) citaat is. De weergave hiervan is meestal een cursieve letter.

<CODE>...</CODE>

Geeft aan dat het tekstgedeelte een computerinstructie bevat. De weergave hiervan is meestal een niet-proportionele letter.

<STRONG>...</STRONG>

Geeft aan dat het tekstgedeelte sterke nadruk krijgt. De weergave hiervan is meestal een vette letter.

Lijsten

In hoofdstuk 1 hebben we gezien dat er verschillende soorten lijsten kunnen worden aangebracht op een Web-pagina. De volgende tags corresponderen met de verschillende soorten lijsten:

<UL>...</UL>

Een ongeordende lijst (unordered list)

<OL>...</OL>

Een geordende (ordened list).

<DL>...</DL>

Een definitielijst (definition list).

De elementen van geordende en ongeordende lijsten worden voorafgegaan door de tag <LI> en soms (maar niet altijd) gevold door de sluittag </LI>. De HTML van een ongeordende lijst zou er bijvoorbeeld als volgt uit kunnen zien.

Deze code correspondeert met het volgende scherm in Netscape Navigator.

Een definitielijst heeft telkens twee soorten elementen; elk van die elementen heeft zijn eigen tag. Er is een tag voor de te definiëren term (<DT>) en een tag voor de definitie (<DD>). Een definitielijst ziet er in HTML als volgt uit:.

Deze code correspondeert met het volgende scherm in Netscape Navigator.

Bijzondere lettertekens

U zult HTML vooral nodig hebben wanneer u bijzondere lettertekens gebruikt, lettertekens die u niet kunt maken door een eenvoudige aanslag op het toetsenbord, zoals é, è en ü. In een gewone tekstverwerker kunt u dit soort tekens maken met bijzondere toetsencombinatie, maar helaas zijn de meeste programma's om Web-pagina's te maken in het geheel nog niet toegerust om dit soort codes toe te voegen. We zullen het dus met de hand moeten doen.

De meest recente versies van Netscape Navigator Gold konden toen dit boek geschreven werd zelfs in het geheel niet omgaan met bijzondere tekens. Wanneer een tekst met dergelijke tekens wordt ingelezen en vervolgens bewaard binnen Netscape, worden de tekens op een vreemde manier door elkaar gehaald.

Wanneer u met Netscape werkt, moet u deze bijzondere tekens dus pas op het allerlaatste moment met de hand invoegen, nadat u de hele opmaak gereed hebt gemaakt.

Hieronder vindt u een complete lijst met speciale codes. In de linkerkolom vindt u de tekens zoals deze op het scherm worden weergegeven. Direct daarnaast vindt u de codes zoals u deze in HTML dient in te voeren om het gewenste resultaat te krijgen. U kunt elke keer kiezen tussen twee codes; de eerste bestaat uit een getal en de tweede uit een soort afkorting. Om het woord één weer te geven kunt u dus zowel &eacute;&eacute;n invoeren als &233;&233;n invoeren. De tekens zijn bij elkaar geplaatst in groepjes van letters die wat vorm betreft op elkaar lijken:

A

À [&Agrave;] [&#192;] Hoofdletter A, accent grave
à [&agrave;] [&#224;] Kleine letter a, accent grave
Á [&Aacute;] [&#193;] Hoofdletter A, accent aigu
á [&aacute;] [&#225;] Kleine letter a, accent aigu
 [&Acirc;] [&#194;] Hoofdletter A, accent circonflexe
â [&acirc;] [&#226;] Kleine letter a, accent circonflexe
à [&Atilde;] [&#195;] Hoofdletter A, tilde
ã [&atilde;] [&#227;] Kleine letter a, tilde
Ä [&Auml;] [&#196;] Hoofdletter A, umlaut
ä [&auml;] [&#228;] Kleine letter a, umlaut
Å [&Aring;] [&#197;] Hoofdletter A, ring
å [&aring;] [&#229;] Kleine letter a, ring
Æ [&AElig;] [&#198;] Hoofdletter AE ligatuur
æ [&aelig;] [&#230;] Kleine letter ae ligatuur

C

Ç [&Ccedil;] [&#199;] Hoofdletter C cedille
ç [&ccedil;] [&#231;] Kleine letter c cedille

D

X [&ETH;] [&#208;] Hoofdletter Eth (IJslands)
X [&eth;] [&#240;] Kleine letter Eth (IJslands)

E

È [&Egrave;] [&#200;] Hoofdletter E, accent grave
è [&egrave;] [&#232;] Kleine letter e, accent grave
É [&Eacute;] [&#201;] Hoofdletter E, accent aigu
é [&eacute;] [&#233;] Kleine letter e, accent aigu
Ê [&Ecirc;] [&#202;] Hoofdletter E, accent circonflexe
ê [&ecirc;] [&#234;] Kleine letter e, accent circonflexe
Ë [&Euml;] [&#203;] Hoofdletter E, umlaut
ë [&euml;] [&#235;] Kleine letter e, umlaut

I

Ì [&Igrave;] [&#204;] Hoofdletter I, accent grave
ì [&igrave;] [&#236;] Kleine letter i, accent grave
Í [&Iacute;] [&#205;] Hoofdletter I, accent aigu
í [&iacute;] [&#237;] Kleine letter i, accent aigu
Î [&Icirc;] [&#206;] Hoofdletter I, accent circonflexe
î [&icirc;] [&#238;] Kleine letter i, accent circonflexe
Ï [&Iuml;] [&#207;] Hoofdletter I, umlaut
ï [&iuml;] [&#239;] Kleine letter i, umlaut

N

Ñ [&Ntilde;] [&#209;] Hoofdletter N, tilde
ñ [&ntilde;] [&#241;] Kleine letter n, tilde

O

Ò [&Ograve;] [&#210;] Hoofdletter O, accent grave
ò [&ograve;] [&#242;] Kleine letter o, accent grave
Ó [&Oacute;] [&#211;] Hoofdletter O, accent aigu
ó [&oacute;] [&#243;] Kleine letter o, accent aigu
Ô [&Ocirc;] [&#212;] Hoofdletter O, accent circonflexe
ô [&ocirc;] [&#244;] Kleine letter o, accent circonflexe
Õ [&Otilde;] [&#213;] Hoofdletter O, tilde
õ [&otilde;] [&#245;] Kleine letter o, tilde
Ö [&Ouml;] [&#214;] Hoofdletter O, umlaut
ö [&ouml;] [&#246;] Kleine letter o, umlaut
Ø [&Oslash;] [&#216;] Hoofdletter O, slash
ø [&oslash;] [&#249;] Kleine letter o, slash

S

ß [&szlig;] [&#223;] Ringel-s, sz-ligatuur

T

X [&THORN;] [&#222;] Hoofdletter thorn, Icelandic
X [&thorn;] [&#254;] Kleine letter thorn, IJslands

U

Ù [&Ugrave;] [&#217;] Hoofdletter U, accent grave
ù [&ugrave;] [&#249;] Kleine letter u, accent grave
Ú [&Uacute;] [&#218;] Hoofdletter U, accent aigu
ú [&uacute;] [&#250;] Kleine letter u, accent aigu
Û [&Ucirc;] [&#219;] Hoofdletter U, accent circonflexe
û [&ucirc;] [&#251;] Kleine letter u, accent circonflexe
Ü [&Uuml;] [&#220;] Hoofdletter U, umlaut
ü [&uuml;] [&#252;] Kleine letter u, umlaut 

Y

Y [&Yacute;] [&#221;] Hoofdletter Y, accent aigu
y [&yacute;] [&#253;] Kleine letter y, accent aigu
ÿ [&yuml;] [&#255;] Kleine letter y, umlaut

Overigen

" [&quot;] [&#34;] Dubbel aanhalingsteken
& [&amp;] [&#64;] En-teken
> [&gt;] [&#62;] Groter dan
< [&lt;] [&#60;] Kleiner dan
[&nbsp;] [&#160;] Harde spatie
¡ [-] [&#161;] Omgekeerd uitroepteken
¢ [-] [&#162;] Honderd-teken
£ [-] [&#163;] Pond Sterling
¤ [-] [&#164;] Euri
¥ [-] [&#165;] Yen
| [-] [&#166;] Schuine streep voorwaarts
§ [-] [&#167;] Paragraafteken
¨ [-] [&#168;] Umlaut (diërsis)
© [-] [&#169;] Copyright
ª [-] [&#170;]
´ [-] [&#171;] Franse haakjes openen
¬ [-] [&#172;] Negatieteken
—p; [-] [&#173;]
® [&reg;] [&#174;] Geregistreerd handelsmerk
[-] [&#175;]
° [-] [&#176;] Graad
± [-] [&#177;] Plus-minus
[-] [&#178;]
[-] [&#179;]
´ [-] [&#180;] Accent aigu
µ [-] [&#181;] Mu
¶ [-] [&#182;] Alinea-teken
· [-] [&#183;]
ü [-] [&#184;] Cedille
[-] [&#185;]
º [-] [&#186;]
ª [-] [&#187;] Franse haakjes sluiten
[-] [&#188;] Een kwart
[-] [&#189;] Een half
[-] [&#190;] Drie-kwart
¿ [-] [&#191;] Omgekeerd vraagteken
X [-] [&#215;] Vermenigvuldigingsteken
÷ [-] [&#215;] Deelteken

Afbeeldingen

Ook afbeeldingen worden op een pagina geplaatst met een tag. Afbeeldingen die u gebruikt als 'behang' op de achtergrond worden weergegeven met een attribuut binnen de tag <BODY>. Stel dat u een GIF-plaatje op uw pagina hebt opgenomen dat papier.gif heet. De tag <BODY> krijgt dan de volgende vorm:

<BODY BACKGROUND="papier.gif">

Voor plaatjes die ergens op de pagina zijn geplaatst, bestaat een aparte tag, <IMG>. Ook deze tag kan weer enkele attributen voeren. Een attribuut is zelfs verplicht: SRC="..." met op de plaats van de puntjes de naam van het bestand waarin het plaatje staat.

Een reeds bekend attribuut is ALIGN, waarmee bepaald wordt hoe een afbeelding uitgelijnd wordt (rechts, links of gecentreerd). Een tegenhanger is VALIGN, voor vertical alignment, dat de waarden TOP, MIDDLE en BOTTOM kan hebben. Bij de waarde TOP wordt de bovenkant van de afbeelding op dezelfde hoogte geplaatst als de bovenkant van de tekst, bij de waarde MIDDLE worden tekst en afbeelding ten opzichte van elkaar gecentreerd en bij de waarde BOTTOM wordt de onderkant van de afbeelding uitgelijnd tegen de onderkant van de alinea waar hij bij hoort.

Koppelingen

Voor koppelingen naar andere pagina's gebruikt HTML de tags <A>...</A> (de A staat voor anchor, anker). Ook hier heeft de begin-tag weer een verplicht attribuut, waarin de naam van het bestand waarnaar gekoppeld wordt is opgenomen. Dit attribuut heet HREF (voor hypertext reference). Wanneer u op een pagina de zin De olifant heeft een slurf aanklikbaar maakt zodat de gebruiker het document slurf.html te zien krijgt, ziet de resulterende HTML-code er als volgt uit:

De tag <A> wordt ook gebruikt om de gebruiker te kunnen laten springen binnen een document. Stel dat u aan het eind van een Web-pagina een koppeling hebt gemaakt waarmee de gebruiker terug kan springen naar het begin van dat document.

Op de plaats waarnaar teruggesprongen wordt vindt u dan een tekstgedeelte dat er als volgt uitziet:

en aan het eind vind u een tekstgedeelte als het volgende:

Tabellen

De HTML-codes die gebruikt worden in een tabel kunnen we het best bekijken aan de hand van een eenvoudig voorbeeld. Hieronder ziet u een eenvoudige tabel van twee bij twee velden.

De codes die Netscape heeft aangemaakt voor dit programma zien er als volgt uit.

Het buitenste paar tags geeft aan dat het omsloten tekstgedeelte een tabel is. Deze tabel is verdeeld in twee tabel-regels (TR), en elk van deze regels telt weer twee cellen (tabel data, TD). Elk van de drie tags <TABLE>, <TR> en <TD& kan een of meer attributen hebben.

De attributen van <TABLE> zijn de volgende:

BORDER

Dit attribuut geeft aan hoe breed de rand om de tabel moet zijn; bij BORDER=0 is er geen rand, bij BORDER=1 is er een dunner rand, bij BORDER=2 een iets dikkere, enzovoorts.

WIDTH

Dit attribuut geeft aan hoe breed de tabel is. U kunt deze breedte hier op twee manieren bepalen. Wanneer u bijvoorbeeld WIDTH=200 opgeeft, dan maakt Netscape de tabel precies tweehonderd pixels groot, ongeacht de breedte van het beeldscherm van de gebruiker. Zoals u weet is de pixel een --kleine-- lengteeenheid die heel gebruikelijk is in de wereld van de computergrafiek.

Een alternatief is dat u de breedte van de tabel opgeeft in een percentage. <TABLE WIDTH=80% geeft bijvoorbeeld aan dat de tabel precies tachtig procent van de breedte van het beeldscherm moet beslaan.

BGCOLOR

Dit attribuut geeft een achtergrondkleur aan voor de tabel. De gebruikelijke kleurcodes kunnen hier weer worden ingevoerd: zowel blue, yellow, white, enzovoorts, als bijvoorbeeld #ff0000 en #00a36e zijn hier mogelijke waarden.

CELLSPACING

Dit attribuut geeft aan hoeveel ruimte er moet worden vrijgelaten tussen twee tabellen. De gebruikte eenheidsmaat is weer de pixel.

 CELLPADDING

Met dit attribuut kunt u aangeven hoeveel ruimte er om de elementen in de cellen moet worden vrijgelaten. Ook hier is de gebruikte eenheidsmaat weer de pixel.

De volgende attributen worden gebruikt voor de tag <TR>:

ALIGN

Met dit attribuut kunt u bepalen hoe de tekst in de cellen in de huisige rij geplaatst moeten worden. Bij ALIGN=LEFT wordt de tekst in elke cel geplaatst tegen de linkerkantlijn, bij ALIGN=CENTER wordt hij gecentreerd, en bij ALIGN=RIGHT wordt hij geplaatst tegen de rechterkantlijn.

VALIGN

Met dit attribuut wordt de verticale plaatsing van de tekst in de cellen in de huidige rij. Dit attribuut kan drie waarden hebben: TOP, MIDDLE en BOTTOM.

Ook de tag <TD> kan enkele attributen hebben; de uitlijningsattributen &ALIGN& en VALIGN horen er in ieder geval bij. Daarnaast zijn er ook de volgende:

BGCOLOR, BACKGROUND

Met het eerste attribuut kan de kleur van een enkel veld worden aangepast. De gebruikelijke kleurcodes kunnen hier weer worden ingevuld. Het tweede attribuut kan aangeven dat een veld een eigen achtergrondafbeelding op de achtergrond heeft.

COLSPAN

Dit attribuut geeft aan dat een bepaalde cel over meerdere kolommen gespreid is. I

ROWSPAN

Met dit attribuut kan worden aangegeven dat een bepaald veld zich over meerdere rijen uitstrekt.

Overige tags

HTML heeft nog veel meer tags dan de paar die in het voorafgaande genoemd zijn. Sommige van de meer gecompliceerde, waarmee u dingen kunt maken die u in Netscape Navigator Gold niet kunt, komen in de volgende paragraaf aan de orde. In deze paragraaf wil ik nog enkele van de 'gewonere' tags bespreken, die niet in een van de hierboven genoemde categorieën vallen.

<FONT>...</FONT>

Met deze tag kunnen bepaalde eigenschappen van het gebruikte lettertype worden bepaald, zoals de grootte en de kleur van de letters. Een grote rode letter wordt bijvoorbeeld gebruikt in het volgende voorbeeld:

<FONT SIZE="+2" COLOR="red">Deze tekst is groot en rood.</FONT>

In het attribuut COLOR kunt u dezelfde waarden gebruiken als eerder in het attribuut BGCOLOR: zowel Engelse codes als yellow, red en antiquewhite als combinaties van cijfers en letters als "#32EC0A" en "#E12224" zijn toegestaan. Netscape voegt over het algemeen de laatste in.

Het attribuut SIZE kan verschillende soorten waarden hebben. Allereerst kunt u zogenaamde absolute waarden meegeven. Met <FONT SIZE="1"> geeft u aan dat de tekst heel klein, met <FONT SIZE="7"> dat hij heel groot moet zijn. De grootte van de omringende tekst doet er dan niet toe.

Anders ligt dit bij aanduidingen als <FONT SIZE="+2">. Hiermee geeft u aan dat de letters in het tekstgedeelte twee slagen groter moeten zijn dan de omringende tekst. De code:

<FONT SIZE="3">De volgende woorden zijn een beetje <FONT SIZE="+2">groter</FONT> dan de rest.</FONT>

heeft als resultaat dat het woord groter een lettergrootte van vijf krijgt.

Er zijn overigens wel limieten aan hoe groot u de letters kunt maken. Alle bladerprogramma's die er op dit moment zijn, onderscheiden op zijn hoogst 7 verschillende groottes. Een aanduiding als <FONT SIZE="72"> of <FONT SIZE="7"><FONT SIZE="+7"> heeft dus geen zin.

U kunt natuurlijk uw letters ook kleiner maken dan de omringende tekst. Dat gebeurt zelfs op een nogal voor de hand liggende manier -- met tags als <FONT SIZE="-2">.

Ook hier zijn weer grenzen aan hoe klein een letter kan zijn: kleiner dan een lettergrootte van één bestaat niet.

<!-- ... -->

Dit is de zogenaamde commentaar-tag. Alles wat binnen deze tag is opgenomen, komt niet op het scherm wanneer we de pagina in Netscape of een ander bladerprogramma bekijken. Deze tekst wordt dan ook vooral benut voor informatie die de maker van een pagina voor eigen doelen op de pagina aanbrengt; bijvoorbeeld voor copyright-informatie die de gemiddelde lezer van een bladzijde niet bijzonder zal interesseren.

Het nut van HTML-kennis

In het voorafgaande heb ik een tamelijk groot aantal HTML-tags behandeld. Gewapend met deze kennis kunt u nu in ieder geval de structuur van de HTML-pagina's die Netscape uitspuwt globaal begrijpen. Als u wilt kunt u de codes die Netscape aanmaakt ook met de hand verbeteren, al zal dit gelukkig zelden of nooit nodig zijn.

Een andere reden waarom het nuttig is op zijn minst enige kennis van HTML te hebben is dat de meeste programma's om Web-pagina's te maken in hun mogelijkheden enigszins achterlopen bij de bl;aderprogramma's. Wanneer u nu een uiterst geavanceerde mogelijkheid van Netscape of van de Internet Explorer wilt benutten, zit er soms niet veel meer op om met de hand wat codes toe te voegen. In het volgende hoofdstuk zullen we hier voorbeelden van zien.

Er is nog een derde reden waarom het nuttig is om iets over HTML te weten: dat is om gebruik te maken van de ideeën van anderen. Op het Web komt u waarschijnlijk regelmatig interessante en aardige pagina's tegen waarin technieken en gedachten zijn verwerkt die u ook kunt en wilt gebruiken. De HTML-codes van pagina's op het Internet zijn altijd opvraagbaar. De interessante tags kunt u op uw gemak bekijken en eventueel kopiëren voor uw eigen doelen.

Bij het kopiëren van andermans ideeën kunt u te maken krijgen met het auteursrecht. U kunt natuurlijk niet onbeperkt ideeën kopiëren. Maar de technieken die gebruikt worden om een pagina op te bouwen, vallen niet automatisch onder het auteursrecht: zolang u ze maar inbedt in uw eigen ideeën, en in uw eigen opmaak.

Programma's om HTML-codes te bewerken

HTML is zogenaamde 'platte ASCII-tekst' en kan daarom in een eenvoudig programma als het Kladblok van Windows bewerkt worden. Het Kladblok is echter wel een relatief erg eenvoudig programma en biedt geen enkele bijzondere faciliteit om met HTML om te gaan. Wanneer u zelf met HTML-codes aan de slag wilt, kan het daarom geen kwaad om een programma te gebruiken waarmee u deze codes gemakkelijk kunt bewerken. Gelukkig is er een groot aantal van dergelijke programma's op het Internet te vinden, vaak gratis, als freeware, of voor relatief weinig geld, als shareware.

Controle

Wanneer u handmatig HTML-codes besluit in te voeren, kunt u helaas ook fouten maken. Het is al te gemakkelijk om een begin-tag in uw bestand op te nemen en de bijbehorende eind-tag te vergeten, of om een tikfoutje te maken in de code voor een bijzonder letterteken. Nu is het programma Netscape een vrij 'liberaal' bladerprogramma. Ook pagina's met foutjes geeft hij vaak zonder klachten weer. Door uw pagina alleen met Netscape te bekijken (of eventueel met de Internet Explorer, dat net zo liberaal is als Netscape) zult u dus niet snel de fouten uit uw pagina's halen.

Helaas zijn niet alle HTML-bladerprogramma's even liberaal. Wanneer u een foutje maakt op een van uw pagina's kan dit voor sommige bladerprogramma's dus desastreuze gevolgen hebben. Het is dus zaak om uw handgemaakte pagina's voor u ze publiceert even te controleren op fouten.