HTMLHTML is de taal waarmee je documenten (ofwel homepages of webpagina's) maakt, die bekeken kunnen worden op het World Wide Web. HTML staat voor HyperText Markup Language: Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname. Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

HTML-code is opgebouwd uit elementen en attributen. In deze introductie in HTML wordt eerst ingegaan op de begrippen elementen en attributen. Daarna wordt toegelicht hoe een HTML-document met een aantal basismogelijkheden wordt opgebouwd. Vervolgens wordt een overzicht gegeven van de extra mogelijkheden waarvan je gebruik kunt maken. Het onderdeel besluit met informatie over het maken en controleren van HTML-documenten.

Elementen en attributenElementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer beindigt. Zowel de activering (ook wel start tag genoemd) als de beindiging (end tag) beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De activering en de beindiging zijn hetzelfde, met uitzondering van de slash (/) voor de naam van het element in de beindiging. Tussen de activering en beindiging staat de inhoud, waarop het element betrekking heeft. Als voorbeeld de opbouw van een paragraaf met behulp van het P element. Deze tekst vormt een paragraaf. Een aantal elementen heeft geen inhoud. Voor deze lege elementen is het gebruik van de beindiging verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden: Van sommige elementen mag de beindiging worden weggelaten en in een heel enkel geval ook de activering. Voor de eenduidigheid wordt echter geadviseerd van deze mogelijkheid geen gebruik te maken. De naam van een element is altijd hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters worden geschreven.

Attributen zijn nadere specificaties van een element. Ze worden opgenomen in de activering van het element, voor het >-teken. Indien meerdere attributen aan het element worden toegevoegd, worden deze gescheiden door een spatie. In veel gevallen moet voor een attribuut een waarde worden opgegeven. Als voorbeeld wordt aan het eerder genoemde P element het ALIGN attribuut toegevoegd. Deze paragraaf wordt rechts uitgelijnd.

Ook aan lege elementen kunnen attributen worden toegevoegd. In het volgende voorbeeld gebeurt dat voor het HR element met de attributen SIZE en NOSHADE, waarbij NOSHADE een voorbeeld is van een attribuut dat geen waarde kent. De naam van een attribuut is ook altijd hoofdletterongevoelig. Meestal geldt hetzelfde voor de waarde, maar er zijn enkele uitzonderingen. De waarde van een attribuut wordt geplaatst tussen dubbele of enkele aanhalingstekens. Wanneer de waarde alleen bestaat uit letters (A-Z of a-z), cijfers (0-9), verbindingsstreepjes (-) en punten (.), zijn aanhalingstekens niet strikt noodzakelijk. Vanwege de uniformiteit wordt echter geadviseerd ook in die gevallen aanhalingstekens te gebruiken. In deze handleiding wordt de HTML-code, net als in de voorbeelden hiervoor, weergegeven in een lettertype met een vaste letterafstand. De namen van elementen en attributen worden altijd in hoofdletters weergegeven, de waarden (tenzij anders vereist) altijd in kleine letters.

Opbouw HTML-documentEen HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan bijvoorbeeld instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden. In de head van elk document moet in ieder geval het TITLE element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in de titelbalk van het venster. Een uitgebreide beschrijving van de in de head op te nemen informatie is te vinden in het onderdeel Structuur document. De body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Met de genoemde elementen heeft het HTML-document de volgende opbouw: Dit is mijn eerste homepage Binnen het BODY element kun je ondermeer koppen, paragrafen, horizontale lijnen, afbeeldingen en hyperlinks opnemen. Koppen maak je met het Hx element. De "x" vervang je door een getal tussen 1 en 6. Hoe lager het getal, hoe groter de kop. Voor de belangrijkste kop gebruik je dus H1: De belangrijkste kop

Gewone tekst neem je op met het P element. Voor een horizontale lijn gebruik je het HR element. Voorbeeld van deze elementen zijn hiervoor reeds gegeven. De elementen Hx, P en HR zijn elementen, die ervoor bedoeld zijn de inhoud van een document op een voor een bezoeker begrijpelijke wijze te structureren. Dit soort elementen wordt altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en vaak ook door een blanco regel. Als je een afbeelding wilt opnemen, maak je gebruik van het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je als alternatief een omschrijving op, voor als de browser geen afbeeldingen weergeeft. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. Een uitgebreide beschrijving is te vinden in het onderdeel Afbeeldingen en image maps. Een hyperlink is een verbinding met een ander document, of een ander type bestand. Je maakt een hyperlink met het A element. Het HREF attribuut definieert op welke locatie het document of bestand zich bevindt. Een hyperlink naar een document in dezelfde directory op dezelfde server ziet er als volgt uit: Een hyperlink is ... Een hyperlink naar een site op een andere server heeft bijvoorbeeld de volgende opbouw: Bezoek de Handleiding HTML Met de attributen van het BODY element kun je de basisweergave van een document bepalen. Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker. Het BACKGROUND attribuut tenslotte kun je gebruiken om aangeven, dat een afbeelding als achtergrond voor het document gebruikt moet worden. Plaatselijk kun je de weergave van stukjes tekst binnen bijvoorbeeld een kop of paragraaf bepalen met de elementen voor tekstopmaak, zoals B voor vet en I voor cursief. Ze worden beschreven in het onderdeel Weergave tekst. Tekst kun je ook in vet of cursief weergeven. In de tekst van een HTML-document mag je een aantal (speciale) tekens niet zomaar gebruiken. Dat geldt bijvoorbeeld voor accenten en trema's, maar ook voor tekens die in HTML een speciale betekenis hebben zoals het begin () van de activering of beindiging van een element, de ampersand (&) en dubbele aanhalingstekens ("). In plaats van deze tekens moet speciale code gebruikt worden. Ter illustratie voor enkele tekens de code: - -

- " - " Voor een uitgebreid overzicht zie het onderdeel Speciale karakters.

Extra mogelijkhedenHiervoor is ingegaan op een aantal basismogelijkheden bij het maken van HTML-documenten. HTML biedt daarnaast nog veel extra mogelijkheden en in deze handleiding komen die uitgebreid aan de orde. In het onderdeel Structureren van tekst wordt, behalve op de al eerder genoemde paragrafen, koppen en horizontale lijnen, onder meer ingegaan op de witruimte in een document, het inspringen en centreren van blokken tekst, het plaatsen van tekst in kolommen, het afbreken en het plaatsen van tekst in een vaste opmaak. Lijsten kun je gebruiken om informatie in een document puntsgewijs weergeven. Tabellen zijn er voor het ordenen van informatie in een document. Daarnaast worden tabellen ook veel gebruikt om de lay-out van een document te bepalen (in het bijzonder het in horizontale richting op de gewenste plaats zetten van tekst en andere inhoud). Met formulieren kun je de bezoeker van je pagina's de mogelijkheid te bieden tot bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enqute, het beantwoorden van vragen en het plaatsen van bestellingen. Door te werken met frames kun je het venster van de browser onderverdelen in meerdere subvensters en in elk een document kunt openen. Vaak wordt dat gedaan om een deel van het venster steeds zichtbaar te houden (bijvoorbeeld een titelbalk of een inhoudsopgave) en in een ander deel door opeenvolgende documenten heen te kunnen lopen. Een bijzondere vorm is het inline frame, een venster in je document waar je doorheen kijkt naar een ander document. Een bijzonder gebruik van afbeeldingen betreft image maps, ook wel aanklikbare afbeeldingen genoemd. Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in verschillende gebieden, waarbij aan elk gebied een hyperlink kan worden gekoppeld. Als je in zo'n gebied in de afbeelding klikt met de muis, spring je naar de in de hyperlink gedefinieerde bestemming. Naast afbeeldingen kun je in een document ook andere objecten opnemen. Bekende voorbeelden zijn Java applets en geluidsfragmenten. Scripts kun je gebruiken om extra mogelijkheden aan HTML-documenten toe te voegen. Bekende voorbeelden zijn het openen van nieuwe browservensters, het vervangen van meerdere frames tegelijkertijd en berichten in de statusbalk van de browser. Naast een algemene beschrijving van het gebruik van scripts, worden in deze handleiding ook een beperkt aantal voorbeelden van de meest gebruikte scripttaal JavaScript gegeven. Een groot aantal mogelijkheden voor de opmaak van HTML-documenten heb je, als je gebruik maakt van stylesheets. Deze handleiding bevat een uitgebreide beschrijving van de taal die je daarbij gebruikt: Cascading Style Sheets (CSS). In het onderdeel Stylesheets wordt ingegaan op de verschillende manieren, waarop je stylesheets aan HTML kunt koppelen.

HTML-document maken en controleren

HTML-documenten zijn zogenaamde ASCII-bestanden. Dat wil zeggen dat je ze kunt maken met een gewone tekst-editor, zoals Kladblok (Notepad) van Windows. Handiger is het echter gebruik te maken van een speciale HTML-editor. Een beschrijving van enkele van dat soort editors is opgenomen in het onderdeel Hulpmiddelen. De formele extensie van de bestandsnaam van een HTML-document is "html". Omdat een extensie uit slechts 3 posities mag bestaan bij op DOS/Windows 3.x gebaseerde systemen, is in het verleden de gewoonte ontstaan om "htm" als extensie te gebruiken. Aangezien deze systemen niet of nauwelijks meer voorkomen, is er weinig reden meer om niet gewoon "html" aan te houden. Voordat je anderen in de gelegenheid stelt je HTML-documenten te bekijken, moet je controleren of ze geen fouten bevatten. Daarbij gaat het niet alleen om de spelling, maar ook om de HTML-code en de hyperlinks. Het is belangrijk dat je de HTML-code op de juiste manier gebruikt. Je verkleint daarmee de kans dat de browser van een bezoeker de documenten niet correct kan weergeven. Voor de controle van de HTML-code kun je gebruik maken van de HTML Validation Service van het W3C (World Wide Web Consortium), of van de WDG HTML Validator. Deze online validators maken gebruik van officile door het W3C voor de verschillende HTML-versies opgestelde "document type definitions" (DTD; zie ook de beschrijving van de DOCTYPE-declaratie). Wanneer je de HTML-documenten liever offline wilt controleren, dan kun je gebruik maken van een daarvoor bedoeld programma. Naast de controle met behulp van een validator, is het ook goed je documenten te bekijken met verschillende browsers. Je komt er dan onder meer achter of een browser een afwijkende weergave heeft, of fouten bevat waarmee je rekening moet houden. Voor een bezoeker van je pagina's is het tenslotte wel zo plezierig als de hyperlinks kloppen. Je zult ze dus regelmatig moeten controleren. Dat kun je zelf stuk voor stuk doen, maar als je veel links hebt dan kun je beter kiezen voor een meer geautomatiseerde oplossing. Bestaat je website uit een beperkt aantal pagina's, dan kun je gebruik maken van een online linkchecker. Wil je een groot aantal pagina's tegelijk controleren, dan is een daarvoor bedoeld programma handiger.

Introductie structuur documentEen HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie over het document, de body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Een HTML-document heeft de volgende opbouw: .. informatie over het document .. .. inhoud document .. Wanneer met frames wordt gewerkt, is er in het document waarin de frames worden gedefinieerd niet echt sprake van een body. Het BODY element wordt in dat geval niet opgenomen en in plaats ervan worden de elementen FRAMESET en FRAME gebruikt. Helemaal aan het begin van het document kan een DOCTYPE (document type) declaratie worden opgenomen, waarmee wordt aangegeven welke HTML-versie gebruikt is bij het maken van het document.

Zowel in de head als in de body van een document kan tekst als commentaar opgenomen worden, waardoor het niet door de browser wordt weergegeven.

De headIn de head van een document wordt informatie opgenomen, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden, of bijvoorbeeld gericht zijn op zoekmachines. In de head van elk document moet een titel worden vastgelegd met het TITLE element. Deze titel is te zien in de titelbalk van het documentvenster en wordt daarnaast door zoekmachines gebruikt bij de weergave van zoekresultaten. Een korte beschrijving van het document, sleutelwoorden en andere informatie, welke zoekmachines gebruiken bij de indexering van een document, worden opgenomen met het META element, waaraan de attributen NAME en CONTENT worden toegevoegd. Daarnaast kan ook het LINK element met de attributen REL en HREF een functie hebben in het vastleggen van informatie ten behoeve van zoekmachines. Informatie, op basis waarvan de browser na een bepaalde tijd het document zonder tussenkomst van de gebruiker ververst of vervangt, wordt opgenomen met het META element waaraan het HTTP-EQUIV attribuut is toegevoegd. Dit automatische verversen of vervangen heet de Client Pull methode. Een basisadres voor het openen van hyperlinks in het document en een basisframe worden vastgelegd met het BASE element. Een beschrijving is opgenomen in het onderdeel Hyperlinks. Informatie betreffende het gebruik van stijlen wordt vastgelegd met de elementen LINK en STYLE. Het LINK element geeft een relatie aan met een extern stijlblad, het STYLE element definieert een stijlblok in het document zelf. De koppeling van stijlen aan HTML wordt beschreven in het onderdeel Stylesheets. Het SCRIPT element kan worden gebruikt om een script te definiren, dat automatisch of als resultaat van een actie van de gebruiker wordt uitgevoerd. Een toelichting is opgenomen in het onderdeel Scripts. Tenslotte kan in de head informatie opgenomen worden om ervoor te zorgen dat browsers die dat ondersteunen in de adresbalk een eigen afbeelding weergeven (een zo genoemde shortcut icon).

De bodyIn de body van een document wordt de inhoud opgenomen, welke in het documentvenster te zien is. Bij deze inhoud kan het gaan om tekst, maar bijvoorbeeld ook om afbeeldingen. Er is een groot aantal mogelijkheden beschikbaar voor de wijze waarop de inhoud gestructureerd en gepresenteerd kan worden: Met de attributen van het BODY element wordt de basisweergave van het document bepaald: de kleur van de achtergrond, de tekst en de hyperlinks en of een achtergrondafbeelding gebruikt moet worden. Voor het BODY element kunnen daarnaast stijlen gedefinieerd worden, welke gelden voor het gehele document. De elementen voor het Structuren van tekst worden gebruikt voor het indelen van tekst in blokken, al dan niet met een bepaalde opmaak, het afbreken van regels en het maken van koppen en lijnen. Met de elementen voor Weergave inline tekst kan bepaald worden hoe de tekst op een regel moet worden weergegeven: in welke lettergrootte en -kleur, met welk lettertype en bijvoorbeeld vet, cursief, of met een vaste letterafstand.

In de vorm van Hyperlinks en Image maps wordt een verbinding gelegd naar bijvoorbeeld andere documenten. De inhoud kan opgenomen worden in Lijsten, Tabellen en Formulieren. Stylesheets kunnen gebruikt worden om de opmaak gedetailleerd vast te leggen.

DOCTYPE-declaratieHelemaal aan het begin van een document wordt de DOCTYPE-declaratie (document type) opgenomen. Deze is ervoor bedoeld aan te geven aan welke HTML-versie het document voldoet. De DOCTYPE-declaratie verwijst naar een document type definition (DTD). HTML 4.01, de laatste (als revisie van HTML 4.0) vastgestelde HTML-aanbeveling, kent drie verschillende DTD's. Het onderscheid tussen de DTD's zit in de elementen en attributen die ze ondersteunen. De basis DTD is HTML 4.01 Strict. Deze bevat alle elementen en attributen, met uitzondering van die welke het label afgekeurd hebben gekregen en die welke betrekking hebben op frames. Afgekeurd zijn elementen en attributen, die deel uitmaken van HTML 3.2, maar waarvoor er in HTML 4 een alternatief is (via bijvoorbeeld stylesheets). Omdat de alternatieven op dit moment slechts door een beperkt aantal browsers ondersteund worden, is het gebruik van de afgekeurde elementen en attributen nog steeds toegestaan. De tweede DTD, HTML 4.01 Transitional, bevat daarom alle elementen uit HTML 4.01 Strict plus de afgekeurde elementen en attributen. In de derde DTD, HTML 4.01 Frameset, zijn tenslotte alle elementen en attributen uit HTML 4.01 Transitional opgenomen, plus die welke betrekking hebben op frames. De DOCTYPE-declaraties voor de DTD's van HTML 4.01 zijn hierna te zien. Een overzicht waarin ook de DOCTYPE-declaraties voor de andere HTML-versies zijn opgenomen, wordt gegeven bij de beschrijving van !DOCTYPE. DOCTYPE-declaratie HTML 4.01 Strict: DOCTYPE-declaratie HTML 4.01 Transitional: DOCTYPE-declaratie HTML 4.01 Frameset: Het gebruik van n van bovenstaande DOCTYPE-declaraties en vooral het voldoen aan de bijbehorende specificatie wordt aanbevolen. Met het voldoen aan een specificatie verklein je de kans dat de browser van een bezoeker de documenten niet correct kan weergeven. Het opnemen van de DOCTYPE-declaratie is in ieder geval van belang als je een document wilt controleren op het gebruik van de juiste HTML-code. De validator weet dan op basis van welke HTMLversie de controle moet plaatsvinden. De meeste oudere browsers maken geen gebruik van de DOCTYPE-declaratie. Nieuwere browsers als Microsoft Internet Explorer 6.0 voor Windows en Microsoft Internet Explorer 5.0 voor Macintosh, Mozilla, Netscape Navigator 6.0 en hoger en Opera 7.0 en hoger gebruiken de DOCTYPE-declaratie om te bepalen hoe een document moet worden weergegeven. Onderscheid wordt daarbij gemaakt tussen twee manieren van weergeven: de "quirks" of "compatibility" (uitwisselbaarheids-) modus en de

"standards" modus. De reden voor de introductie van deze zogenaamde "DOCTYPE switch" (verwisseling) is het feit dat oudere browsers nogal wat fouten kennen in de wijze waarop ze met HTML en CSS omgaan. Het gaat dan bijvoorbeeld om het erven van stijlen in tabellen en het berekenen van de breedte en hoogte van elementen. Ook accepteren oudere browsers allerlei fouten die ontwikkelaars van webpagina's maken in hun HTML- en CSS-code. Bijvoorbeeld het onjuist opnemen van waarden, zoals eenheden voor lengte (13 px in plaats van 13px), of RGB-kleuren (FF0000 in plaats van #FF0000). Nieuwere browsers proberen zich meer en meer aan de officile standaarden te houden. Dat leidt er onder meer toe dat speciale constructies, die webontwikkelaars bedacht hebben als oplossing voor de problemen in oudere browsers, opeens tot een andere weergave leiden in de nieuwere browsers. Bij de weergave overeenkomstig de standaarden hoort ook, dat fouten in de code niet meer geaccepteerd worden. Dat kan er toe leiden dat stijlen soms helemaal genegeerd worden. De DOCTYPE-verwisseling moet hiervoor een oplossing voor bieden. In de quirks modus wordt de weergave van het document door oudere browsers nagebootst, dus inclusief alle fouten. In de standards modus wordt het document weergegeven volgens de laatste standaarden op het gebied van HTML (versie 4) en CSS (versie 2). Bij het bepalen van de weergave-modus speelt bij de meeste browsers niet alleen de gebruikte DOCTYPE-declaratie een rol, maar ook of daarin de URI van de document type definition is opgenomen. In het volgende overzicht is voor de verschillende DOCTYPE-declaraties aangegeven of de weergave al dan niet in de standards modus is. Dat is gedaan voor Microsoft Internet Explorer (6.0 voor Windows en 5.0 voor Macintosh), Netscape Navigator (6.0 en hoger), Mozilla en Firefox en Opera (7) Weergave in standards modus IE6 IE5 NN6+ OP7+ Windows Mac MOZ FF nee nee nee nee nee nee nee nee nee nee nee nee ja ja nee ja nee nee nee nee ja ja nee ja ja ja ja ja ja ja ja ja nee nee nee nee ja ja ja ja nee nee nee nee ja ja ja ja ja ja ja ja ja ja ja ja nee nee nee nee ja ja nee ja

DOCTYPE-declaratie

HTML 2.0 HTML 3.2 HTML 4.0 Frameset zonder URI HTML 4.0 Frameset met URI HTML 4.0 Transitional zonder URI HTML 4.0 Transitional met URI HTML 4.0 Strict zonder URI HTML 4.0 Strict met URI HTML 4.01 Frameset zonder URI HTML 4.01 Frameset met URI HTML 4.01 Transitional zonder URI HTML 4.01 Transitional met URI HTML 4.01 Strict zonder URI HTML 4.01 Strict met URI geen DOCTYPE-declaratie onbekende DOCTYPE-declaratie

Bij de keuze van een DOCTYPE-declaratie voor een document is het allereerst natuurlijk van belang vast te stellen aan welke standaard wordt voldaan. Ook is het zaak ervoor te zorgen dat je geen fouten in de HTML- en CSS-code hebt gemaakt. Om dat te controleren kun je gebruik maken van een validator (zie de buttons onder aan elke pagina in de Handleiding HTML). Tenslotte bekijk je de HTMLdocumenten in een browser die de DOCTYPE-verwisseling ondersteunt zowel in de standards als de quirks modus (daarvoor moet je dus echt de DOCTYPE-declaratie verwisselen). Gebruik je constructies waardoor de documenten er verschillend uitzien in de standards en de quirks modus en wil je dat de weergave in oudere en nieuwere browsers hetzelfde is, dan kun je het beste kiezen voor de quirks modus. Dat doe je door bijvoorbeeld de DOCTYPE-declaratie voor HTML 4.01 Transitional op te nemen zonder de URI van de document type definition:

Titel documentMet het TITLE element wordt een titel voor het document vastgelegd. Deze titel wordt niet weergegeven in het documentvenster, maar in de titelbalk van het venster. Daarnaast wordt de titel door zoekmachines geplaatst als kopje boven een zoekresultaat en gebruiken browsers hem als iemand de pagina toevoegt aan de bookmarks (bij Netscape Navigator), de favorieten (bij Microsoft Internet Explorer) of de hotlist (bij Opera). Elk document moet een TITLE element bevatten. Het is verstandig een titel te gebruiken, die duidelijk maakt waar het document over gaat en op basis waarvan bijvoorbeeld gebruikers van een zoekmachine kunnen beslissen, of het bekijken van het document zinvol is. Het TITLE element wordt bijvoorbeeld als volgt gebruikt: Handleiding HTML - De Nederlandse informatiebron op het gebied van HTML en CSS

CommentaarIn het HTML-document kan commentaar worden opgenomen: tekst die door de browser niet wordt weergegeven, maar wel zichtbaar is als iemand de source (bron) van het document bekijkt. Het commentaar kan zowel in de head van het document, als in de body geplaatst worden. In de head kun je er bijvoorbeeld informatie over het copyright mee opnemen:

Basisweergave documentDe attributen van het BODY element kun je gebruiken als je wilt dat het document anders wordt weergegeven dan met de standaardkleuren van de browser. Je kunt een achtergrondafbeelding definiren, een achtergrondkleur en kleuren voor de tekst en de hyperlinks. De opgegeven kleuren voor de tekst en de hyperlinks gelden voor het hele document. Wanneer je tekst plaatselijk in een andere kleur wilt weergeven, dan moet je gebruik maken van het FONT element (zie het onderdeel Weergave tekst). In het volgende voorbeeld zijn geen attributen aan het BODY element toegevoegd. Hiernaast zie je wat de basisweergave van de browser is. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Met het BACKGROUND attribuut kun je aangeven, welke afbeelding als achtergrond voor het document gebruikt moet worden. Algemeen ondersteunde formaten van afbeeldingen zijn GIF en JPG. Een nieuw formaat, dat nog slechts beperkt wordt ondersteund, is PNG. Het is verstandig een niet al te groot bestand te kiezen en daardoor de downloadtijd zoveel mogelijk te beperken. Door de browser wordt de afbeelding zo vaak gedupliceerd dat de hele achtergrond ermee bedekt is. In een nieuw venster kun je het resultaat bekijken. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

De attributen BACKGROUND en BGCOLOR kun je ook gecombineerd gebruiken. De achtergrondkleur wordt weergegeven zolang de achtergrondafbeelding nog niet is geladen, als een afbeelding met een transparante achtergrond wordt toegepast, of als de afbeelding niet gevonden wordt. Het is verstandig altijd de attributen BGCOLOR en/of BACKGROUND in combinatie te gebruiken met de attributen TEXT, LINK, VLINK en ALINK, zodat je niet het risico loopt dat de standaardkleuren van de browser voor tekst en hyperlinks wegvallen in de achtergrond. De Microsoft Internet Explorer specifieke attributen LEFTMARGIN, TOPMARGIN, RIGHTMARGIN en BOTTOMMARGIN en de Netscape Navigator specifieke attributen MARGINHEIGHT en MARGINWIDTH van het BODY element kun je gebruiken om de afstand in pixels tussen de inhoud van het document en de randen van het venster of frame vast te leggen. Omdat deze attributen geen deel

uitmaken van HTML 4.0, de meeste slechts ondersteund worden door de versies 4.0 en hoger van de genoemde browsers en er een goed alternatief is in de vorm van stylesheets, wordt het gebruik afgeraden. Een voorbeeld van het gebruik van de margin eigenschappen in een stijl wordt hierna gegeven.

Met behulp van stylesheets kunnen voor het BODY element stijlen gedefinieerd worden. Deze stijlen kunnen een vergelijkbaar resultaat opleveren als via de attributen van het BODY element, maar daarnaast ook op andere punten de weergave van het document benvloeden. In het volgende voorbeeld is met het STYLE attribuut een inline stijl voor het BODY element gespecificeerd. De eigenschappen font-family en font-size zijn gebruikt om het lettertype en de lettergrootte van de tekst in het document vast te leggen. Met de eigenschappen color en background zijn de kleur van de tekst, de achtergrondkleur en de achtergrondafbeelding gedefinieerd. De margin eigenschap zorgt ervoor dat ruimte wordt vrijgehouden tussen de inhoud van het document en de rand van het venster. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Zie ook de toelichting op het gebruik van stijlen in hyperlinks.

De browser plaatst standaard de inhoud van een document zo'n 4 5 pixels uit de rand van het venster of frame. Soms is het handig om de inhoud direct tegen de randen te plaatsen. Bijvoorbeeld als je gebruik maakt van frames zonder randen, of van inline frames. Voor Microsoft Internet Explorer, Netscape Navigator 6.0 en hoger, Mozilla en Firefox kun je dat regelen door voor het BODY element de margin eigenschap op te nemen met de waarde "0". Om ook in Opera het bedoelde effect te bereiken, moet je bovendien de padding eigenschap op te nemen met de waarde "0". Dit werkt wanneer voor het document een DOCTYPE-declaratie is opgenomen, die ervoor zorgt dat het document wordt weergegeven in de quirks modus (waarbij rekening gehouden wordt met fouten in oudere browsers). Als het document in de nieuwste browsers echter wordt weergegeven in de standards modus, dan houdt de browser de normale bovenmarge aan voor het P element en staat de tekst dus niet tegen de bovenrand. Je kunt dit oplossen door voor het eerste P element de margin-top eigenschap op te nemen met de waarde "0". Voor het document ... linker bovenhoek. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je gebruik maakt van tabellen, moet je er rekening mee houden dat stijlen gedefinieerd voor het BODY element niet in elke browser gerfd worden in een tabel. Dat geldt in Netscape Navigator 4 voor alle eigenschappen en in Microsoft Internet Explorer 4 t/m 5.5 voor een deel van de eigenschappen. Om een stijl ook voor de inhoud van de cellen van een tabel te laten gelden, kun je deze het beste ook definiren voor de elementen TH en TD. Zie ook het onderdeel CSS en browsers.

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Introductie structureren van tekstTekst in een HTML-document kan op verschillende manieren gestructureerd worden. De meest algemene vorm is het indelen van tekst in paragrafen. Hiervoor kan gebruik gemaakt worden van het P element. Daarnaast zijn er elementen, welke gebruikt kunnen worden, als een specifieke betekenis van een blok tekst benadrukt moet worden. Het BLOCKQUOTE element is bedoeld voor tekst welke wordt geciteerd en geeft deze ingesprongen weer. In het ADDRESS kunnen adresgegevens van de auteur worden opgenomen, welke cursief worden weergegeven. Soms hebben elementen meer betrekking op de weergave van blokken tekst. Dat geldt bijvoorbeeld voor het CENTER element, waarmee een deel van de inhoud van een document gecentreerd kan worden. Een ander voorbeeld is het Netscape specifieke MULTICOL element, dat gebruikt kan worden voor het weergeven van tekst in meerdere kolommen naast elkaar. Voor de tekst ingesloten door de genoemde elementen wordt bij de weergave door de browser automatisch aan het einde van een regel een overgang naar een volgende regel ingevoegd. Overgangen naar een nieuwe regel in de bron van het document worden evenwel genegeerd. Het BR element kan gebruikt worden om een overgang naar een nieuwe regel te forceren. Het PRE element kan toegepast worden, wanneer tekst door de browser moet worden weergegeven in vaste opmaak, dat wil zeggen zoals deze staat in de bron van het document. Aan het begin van een document, of bijvoorbeeld tussen de verschillende paragrafen, kunnen koppen geplaatst worden met het Hx element. Dit element is beschikbaar in zes verschillende groottes (H1 .. H6). Als scheiding tussen blokken tekst en/of andere inhoud van een document kunnen horizontale lijnen geplaatst worden met het HR element. Bij de elementen P, BLOCKQUOTE, ADDRESS, CENTER, MULTICOL, Hx en HR gaat het om zogenaamde elementen op blokniveau. Deze elementen worden altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en soms ook door een blanco regel. Voor de opmaak van stukjes tekst binnen een element op blokniveau zijn inline elementen beschikbaar. Deze worden beschreven in het onderdeel Weergave tekst. Achtergrondinformatie over de indeling van elementen en de wijze waarop ze hun plek vinden in het venster van de browser, wordt gegeven in het onderdeel CSS en elementen. De elementen DEL en INS kunnen gebruikt worden om revisie-informatie in een document vast te leggen. Het INS element bevat de inhoud welke is toegevoegd, het DEL element inhoud welke is

verwijderd. Deze elementen kunnen als element op blokniveau, maar ook als inline element gebruikt worden. Een toelichting wordt gegeven in het onderdeel Weergave tekst. Hierna wordt eerst ingegaan op de wijze waarop HTML met de witruimte in een document omgaat.

WitruimteEen blok tekst wordt door de browser standaard aan de linkerzijde van bijvoorbeeld een venster of een frame uitgelijnd. Als de tekst langer is dan op n regel past, wordt aan de rechterzijde automatisch een overgang naar een nieuwe regel toegevoegd. De witruimte die je opneemt in de bron van het HTMLdocument wordt niet zomaar door de browser weergegeven. Als voorbeeld een document met de volgende opbouw: Overgangen naar een nieuwe regel in de bron van het document worden genegeerd en meerdere achter elkaar worden samengevoegd tot n spatie. Dit wordt door de browser als volgt weergegeven: Overgangen naar een nieuwe regel in de bron van het document worden genegeerd en meerdere spaties achter elkaar worden samengevoegd tot n spatie. Wanneer je de overgang naar een nieuwe regel wilt forceren, dan moet je gebruik maken van het BR element (zie Overgang nieuwe regel). Als je de tekst wilt weergegeven zoals in de bron van het document, dan kun je het PRE element gebruiken (zie Vaste opmaak). Meerdere spaties achter elkaar kun je maken met het speciale teken "" (non-breaking space), zoals in het volgende voorbeeld. Meerdere spaties maak je ... Meerdere spaties maak je met het non-breaking space teken.

spaties

ParagrafenVoor gewone tekst in een document wordt het P element gebruikt. De door het P element ingesloten tekst wordt in het algemeen voorafgegaan en gevolgd door een witruimte, vaak ter grootte van ongeveer n blanco regel. Indien het element gevolgd wordt door een tweede P element, of een ander element op blokniveau (bijvoorbeeld BLOCKQUOTE, PRE en Hx), dan schuiven de witruimtes in elkaar en resteert tussen de blokken tekst slechts n blanco regel. Dit is de eerste paragraafDit is de tweede paragraaf Dit is de eerste paragraaf Dit is de tweede paragraaf

Met het ALIGN attribuut kun je bepalen hoe de ingesloten tekst moet worden uitgelijnd. Deze tekst ... uitgelijnd. Deze tekst is aan de rechterzijde van het venster of frame uitgelijnd.

Voor het P element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het P element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de opmaak van het blok tekst bepaald: de uitlijning met de textalign eigenschap, de regelhoogte met de line-height eigenschap, het lettertype met de font-family eigenschap, de lettergrootte met de font-size eigenschap en de kleur van de tekst met de color eigenschap. De opmaak ... beschreven. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Vervolg: Inspringen

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

InspringenIn HTML zijn er geen elementen, welke er specifiek voor bedoeld zijn om tekst te laten inspringen. Toch zijn er wel mogelijkheden om het gewenste effect te bereiken. Wanneer je alleen de eerste regel van een paragraaf een stukje wilt laten inspringen, dan kun je gebruik maken van het speciale teken "" (non-breaking space). Je plaatst dit speciale teken eenvoudig een aantal keren aan het begin van de paragraaf. Doordat ... stukje in. Doordat gebruik gemaakt is van "" begint de eerste regel van deze paragraaf niet langs de linker kantlijn, maar springt hij een stukje in.

Het inspringen van de eerste regel van een paragraaf kun je ook bereiken met behulp van stylesheets. Je gebruikt daarvoor de text-indent eigenschap. Wanneer het inspringen slechts op n paragraaf betrekking heeft, kun je met het STYLE attribuut een inline stijl definiren: De tekst op ... van een stijl. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je de eerste regel van elke paragraaf wilt laten inspringen, kun je de stijl beter in een stijlblok of extern stijlblad opnemen: P { text-indent: 15px }

Het BLOCKQUOTE element is er voor bedoeld om aan te geven, dat het bij de ingesloten tekst gaat om een citaat. Vrijwel alle browsers doen dit door de tekst zowel links als rechts te laten inspringen. Vanwege deze manier van weergeven wordt het BLOCKQUOTE element in de praktijk regelmatig gebruikt, als een blok tekst moet inspringen. Dit blok ... rechts. Dit blok tekst is ingesloten door het BLOCKQUOTE element en springt daardoor als geheel in, meestal zowel links als rechts. Op dezelfde wijze als bij paragrafen kun je de opmaak van de tekst bepalen, door het koppelen van een stijl aan het BLOCKQUOTE element. Als alternatief voor het oneigenlijke gebruik van het BLOCKQUOTE element, wordt vaak gebruik gemaakt van een tabel. Je kunt dan zelf bepalen aan welke kant en hoeveel er wordt ingesprongen. Wil je bijvoorbeeld alleen aan de linkerkant inspringen, dan maak je een tabel met n rij en twee kolommen. Het WIDTH attribuut van het TD element waarmee je de eerste cel definieert, bepaalt de mate van inspringen. De tekst plaats je in de tweede cel. In dit ... eerste cel.
In dit voorbeeld wordt een tabel gebruikt om een blok tekst te laten inspringen. De mate van inspringen wordt bepaald door de breedte van de eerste cel. Een oplossing die door alle gangbare browsers ondersteund wordt, is die waarbij gebruikt gemaakt wordt van stylesheets. Je doet dat met de eigenschappen voor de margin. In het volgende voorbeeld is de margin-left eigenschap gebruikt om een P element links te laten inspringen. Voor dit P element ... inspringt. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

CentrerenDe inhoud van een HTML-document kan op verschillende manieren in het venster gecentreerd worden. Wanneer het om tekst gaat welke deel uitmaakt van het P element, kan gebruik gemaakt worden van het ALIGN attribuut met de waarde "center". Deze tekst is gecentreerd en wordt
geplaatst over twee regels. Deze tekst is gecentreerd en wordt geplaatst over twee regels.

Voor het centreren kan ook gebruik gemaakt worden van het CENTER element. Deze tekst is gecentreerd. Deze tekst is gecentreerd.

Het CENTER element wordt behalve voor tekst ook vaak gebruik voor andere inhoud. Bijvoorbeeld om een afbeelding te centreren. In HTML 4.0 heeft het CENTER element het label afgekeurd gekregen en in plaats ervan wordt aanbevolen het DIV element met het attribuut ALIGN="center" te gebruiken. Deze tekst is gecentreerd. Deze tekst is gecentreerd.

Overigens heeft ook het ALIGN attribuut van de elementen P en DIV in HTML 4.0 het label afgekeurd gekregen. De achtergrond hiervan is, dat de opmaak van een document in de toekomst zoveel mogelijk geregeld moet worden met behulp van stylesheets. Ter illustratie wordt in het volgende voorbeeld tekst gecentreerd met het STYLE attribuut en de text-align eigenschap. Als de ... gecentreerd. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

De elementen CENTER en DIV worden voorafgegaan en gevolgd door de overgang naar een nieuwe regel, maar een blanco regel, zoals bij het P element, wordt echter niet toegevoegd.

Wanneer je een blok tekst een bepaalde breedte wilt geven en als geheel wilt centreren, dan kun je het beste gebruik maken van stylesheets. In het volgende voorbeeld is voor een P element met de width eigenschap een breedte gedefinieerd. Om het P element te centreren, moet je de eigenschappen margin-left en margin-right beide opnemen met de waarde auto. Deze oplossing wordt ondersteund door Mozilla, Firefox, Netscape Navigator 6.0 en hoger en Opera 4.0 en hoger. Het P element is ook gecentreerd in Microsoft Internet Explorer 6.0, maar alleen als een DOCTYPE-declaratie is gebruikt, die ervoor zorgt dat het document wordt weergegeven in de standards modus. Wanneer het P element wordt weergegeven door Microsoft Internet Explorer 6.0 in de quirks modus, of door Microsoft Internet Explorer 5.5 of lager, dan wordt het P element niet gecentreerd maar links in het venster of frame geplaatst. Je kunt het P element toch centreren, door een fout in deze browsers met betrekking tot de text-align eigenschap te benutten. Volgens de regels mag een browser de text-align eigenschap alleen gebruiken om de inline inhoud van een element op blokniveau uit te lijnen. Microsoft Internet Explorer (met uitzondering van versie 6.0 in de standards modus) doet het met alle ingesloten elementen op blokniveau. In deze browser kun je het P element dus centreren, als je het plaatst in een DIV element, waarvoor text-align: center geldt. Wanneer je beide oplossingen combineert, dan is het P element in vrijwel alle browsers gecentreerd (Microsoft Internet Explorer vanaf versie 5.0, Netscape Navigator vanaf versie 6.0, Mozilla, Firefox en Opera vanaf versie 4.0). Dit P element ... van een stijl. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer je ook de inhoud van het P element wilt centreren, dan wijzig de waarde van de text-align eigenschap voor dit element van left in center. ...

KolommenTabellen worden veel gebruikt bij het structureren van de inhoud van HTML-documenten. Je kunt tabellen bijvoorbeeld gebruiken als je tekst in kolommen wilt plaatsen. In het volgende voorbeeld is een eenvoudige tabel gebruikt met drie kolommen, waarvan de middelste bedoeld is om de breedte tussen de tekstkolommen vast te leggen. In dit ... ondersteunen. De tekst ... houden.

In dit voorbeeld wordt de tekst met behulp van een tabel in twee kolommen geplaatst. Voordeel van deze methode is dat de meeste browsers tegenwoordig tabellen ondersteunen.

De tekst wordt niet automatisch over de kolommen verdeeld. Als je kolommen van ongeveer gelijke lengte wilt, moet je de verdeling, elke keer als je de inhoud aanpast, zelf in de gaten houden.

Alleen door Netscape Navigator 3.0 en 4.x wordt het MULTICOL element ondersteund, waarmee je de inhoud van een document over meerdere kolommen kunt verdelen. In vergelijking met het werken met tabellen vraagt de methode met het MULTICOL element minder HTML-code. Een voordeel is verder dat de tekst automatisch over de kolommen wordt verdeeld. Groot nadeel is evenwel dat het MULTICOL element slechts door een enkele browser wordt ondersteund en geen deel uitmaakt van HTML 4.0. Je kunt er dus beter maar geen gebruik van maken.

AdresgegevensHet ADDRESS element wordt gebruikt om aan het begin of het eind van een document een auteursnaam, een (e-mail of website) adres, of een onderschrift weer te geven. De ingesloten tekst wordt in het algemeen cursief weergegeven. Naam
E-mail: gebruiker@provider.nl De browser geeft dit weer als: Naam E-mail: gebruiker@provider.nl

Op dezelfde wijze als bij paragrafen kun je de opmaak van de adresgegevens bepalen, door het koppelen van een stijl aan het ADDRESS element.

Overgang nieuwe regelDe browser negeert overgangen naar een nieuwe regel, die je hebt opgenomen in de bron van het document. Wanneer je in een blok tekst ingesloten door bijvoorbeeld de elementen P, BLOCKQUOTE en ADDRESS toch een overgang naar een nieuwe regel wilt forceren, dan moet je gebruik maken van het BR element. Deze tekst is ingesloten door het P element. Met het BR element
ga je naar een nieuwe regel. Met twee BR elementen

krijg je een blanco regel tussen de tekst. De browser geeft dit zo weer: Deze tekst is ingesloten door het P element. Met het BR element ga je naar een nieuwe regel. Met twee BR elementen krijg je een blanco regel tussen de tekst. Aan het BR element kun je het CLEAR attribuut toevoegen. Je geeft daarmee aan dat de tekst na het BR element pas geplaatst moet worden op de eerstvolgende regel met een vrije kantlijn aan de linkerzijde, de rechterzijde of aan beide zijden. Het gebruik van het CLEAR attribuut is vooral handig bij elementen, welke met het ALIGN attribuut zwevend zijn gemaakt, bijvoorbeeld afbeeldingen, tabellen of inline frames.

De browser voegt aan het eind van een regel automatisch een overgang naar een nieuwe regel in. Soms wordt daardoor een stuk tekst over twee regels verdeeld, terwijl je die liever op n regel bij elkaar wilt houden. In het onderdeel Tekst bij elkaar houden vind je beschreven hoe je kunt voorkomen, dat ongewenste overgangen naar een nieuwe regel ontstaan.

Vaste opmaakMet behulp van het PRE element kan tekst in een vaste opmaak worden opgenomen, zonder dat de browser daar iets aan mag veranderen. Voor de door het PRE element ingesloten tekst gebruikt de browser een lettertype met een vaste letterafstand. Spaties en een overgang naar een nieuwe regel worden weergegeven, zoals deze in de bron van het document zijn opgenomen. Het PRE element kan daarmee ook gebruikt worden om meerdere blanco regels achter elkaar vast te leggen. In het volgende voorbeeld wordt een blok tekst in tabelvorm ingesloten door het PRE element. In de bron van het document ziet het er zo uit: kleur 1 kleur 2

zwart rood

25 40

De browser geeft dit weer met: kleur 1 kleur 2 zwart rood 25 40

Als je het PRE element gebruikt, moet je ervoor zorgen dat je het aantal karakters op een regel beperkt houdt. Doe je dat niet, dan loopt de tekst het venster uit en moet de lezer horizontaal gaan scrollen.

Voor het PRE element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het PRE element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de extra opmaak van het blok tekst bepaald: de lettergrootte met de font-size eigenschap, het lettertype met de font-family eigenschap en de kleur van de tekst met de color eigenschap. kleur 1 zwart 25 kleur 2 rood 40 Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Koppen

Het Hx element wordt gebruikt om een kop (header) te definiren, welke bijvoorbeeld aan het begin van een document, of tussen de paragrafen geplaatst kan worden. Er zijn zes verschillende niveaus voor de koppen. Het niveau wordt gekozen door voor de "x" in Hx een getal in te vullen tussen 1 en 6. Dit is Header Hx Door voor x achtereenvolgens 1, 2, 3, 4, 5 en 6 in te vullen zie je:

Dit is header H1

Dit is header H2Dit is header H3

Dit is header H4Dit is header H5Dit is header H6Het ALIGN attribuut kan gebruikt worden om de horizontale uitlijning van de kop te specificeren. Deze kop is gecentreerd

Deze kop is gecentreerdVoor het Hx element kunnen met behulp van stylesheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het Hx element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de opmaak van de kop bepaald: het lettertype met de fontfamily eigenschap, de kleur van de tekst met de color eigenschap, de achtergrondkleur met de background-color eigenschap en de horizontale uitlijning met de text-align eigenschap. Handleiding HTML Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Horizontale lijnenHorizontale lijnen maak je met het HR element.

Standaard wordt de lijn over de gehele beschikbare breedte geplaatst. Met het WIDTH attribuut kun je zelf de breedte bepalen in pixels, of als percentage van de beschikbare breedte. Als de lijn niet de volledige breedte heeft, kun je met het ALIGN attribuut de horizontale uitlijning vastleggen.

De dikte van de lijn bepaal je met het SIZE attribuut. Het NOSHADE attribuut geeft aan dat de lijn niet in 3-D, maar vlak moet worden weergegeven.

Met het door Internet Explorer, Netscape Navigator 7.2, Mozilla 1.5 en hoger en Firefox ondersteunde COLOR attribuut kan de kleur van de lijn worden vastgelegd. Dit attribuut maakt echter geen deel uit van een HTML-specificatie.

Voor het HR element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. Als het om de kleur en de hoogte van de lijn gaat, hebben de verschillende browsers echter niet gekozen voor een uniforme oplossing. Daardoor is het nodig meerdere eigenschappen te combineren. De volgende oplossing, waarin gebruik gemaakt wordt van de stijleigenschappen border, color, backgroundcolor, width en height leidt tot vrijwel hetzelfde resultaat in Microsoft Internet Explorer 4.0 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 4.0 en hoger. Voor een lijn in kleur in de standaard hoogte gebruik je de volgende code: Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wil je de lijn een andere hoogte geven dan wijzig je de waarde van de height eigenschap. Bijvoorbeeld in 5 pixels:

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

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

Fysieke tekstopmaak-elementen

De volgende elementen worden gerekend tot de fysieke tekstopmaak-elementen: B, I, S, STRIKE, TT, U, BIG, SMALL, SUB en SUP. Je gebruikt ze, als je de weergave van de tekst wilt vastleggen. Dit is vet Dit is cursief Dit is doorgestreept Ook dit is doorgestreept Deze tekst heeft een vaste letterafstand Dit is onderstreept Dit is groot Dit is klein Dit is subscript Dit is superscript Dit is vet Dit is cursief Dit is doorgestreept Ook dit is doorgestreept Deze tekst heeft een vaste letterafstand Dit is onderstreept Dit is groot Dit is klein Dit is subscript Dit is superscript

Tot de fysieke tekstopmaak-elementen kan ook het door Netscape Navigator gentroduceerde BLINK element gerekend worden, waarmee tekst knipperend kan worden weergegeven. Omdat het element geen deel uitmaakt van HTML 4.0 en knipperende tekst bovendien door veel gebruikers als hinderlijk wordt ervaren, wordt geadviseerd geen gebruik van dit element te maken.

De verschillende fysieke tekstopmaak-elementen kunnen ook gecombineerd gebruikt worden. Dit is vet en typemachine tekst en onderstreept en cursief. In de browser zie je: Dit is vet en typemachine tekst en onderstreept en cursief.

Logische tekstopmaak-elementenDe volgende elementen worden gerekend tot de logische tekstopmaak-elementen: EM, STRONG, CITE, DFN, CODE, SAMP, KBD en VAR. Je gebruikt ze, als je niet de exacte weergave wilt bepalen, maar vooral wilt aangeven om wat voor soort tekst het gaat. De browser (of als die mogelijkheid er is, de gebruiker via de instellingen van de browser) bepaalt vervolgens hoe de ingesloten tekst wordt weergegeven. Deze tekst heeft nadruk Deze tekst heeft extra nadruk Zoals in de Handleiding HTML te lezen valt ... Deze term Dit is computercode Dit is een voorbeeld van de output van een programma Deze tekst moet de gebruiker vanaf het toetsenbord invoeren Dit is een variabele Deze tekst heeft nadruk Deze tekst heeft extra nadruk Zoals in de Handleiding HTML te lezen valt ... Deze term wordt gedefinieerd Dit is computercode Dit is een voorbeeld van de output van een programma Deze tekst moet de gebruiker vanaf het toetsenbord invoeren Dit is een variabele

LettertypenDe grootte van de tekst (meestal korte stukjes, soms zelfs een enkel woord of een enkele letter) kan bepaald worden met behulp van het SIZE attribuut van het FONT element. Als waarde van het SIZE attribuut kan een getal van 1 t/m 7 gebruikt worden om de absolute lettergrootte vast te leggen, of een getal gecombineerd met een "+" of een "-" om de grootte van de letters in ten opzichte van de standaard lettergrootte te bepalen. De absolute lettergrootte is SIZE="1" SIZE="2" .. In de browser zie je: De absolute lettergrootte is SIZE="1" SIZE="2" SIZE="3" SIZE="4"

SIZE="5"

SIZE="6" SIZE="7"De grootte .. lettergrootte: SIZE="-2" SIZE="-1" .. In de browser zie je: De grootte kan ook opgegeven worden in verhouding tot de standaard lettergrootte: SIZE="-2" SIZE="-1"

SIZE="+1" SIZE="+2"

SIZE="+3" SIZE="+4"

Houd er rekening mee, dat bij sommige browsers de gebruiker de weergave van de, via het SIZE attribuut gedefinieerde, lettergrootte kan uitzetten. Om de structuur van je document helder te houden, kun je voor koppen daarom het beste altijd een Hx element gebruiken.

Het FACE attribuut van het FONT element bepaalt het lettertype dat gebruikt wordt voor de tekst. De waarde van het FACE attribuut is de naam van n lettertype, of meerdere lettertypen gescheiden door een komma. Een tweede lettertype wordt gebruikt, als het eerste niet aanwezig is op het systeem van de gebruiker. Als geen van de opgegeven lettertypen is genstalleerd, wordt het standaard lettertype van de browser gebruikt. Afhankelijk .. van de browser.. In de browser zie je:

Afhankelijk van de beschikbaarheid van de opgegeven lettertypen, wordt deze tekst weergegeven in Garamond, Times New Roman, of het standaard lettertype van de browser.

Het COLOR attribuut van het FONT element bepaalt de kleur van de tekst. Deze tekst wordt weergegeven in rood.. In de browser zie je:

Deze tekst wordt weergegeven in rood.Het spreekt voor zich dat je bij het gebruik van het COLOR attribuut rekening houdt met de achtergrondkleur, welke je via het BGCOLOR attribuut van het BODY element hebt gedefinieerd. Daarmee heb je echter nog niet gewaarborgd dat de weergave in alle gevallen goed is. Veel browsers hebben de mogelijkheid in te stellen dat uitsluitend de door de gebruiker zelf opgegeven kleuren gebruikt mogen worden (dat is bijvoorbeeld van belang als de gebruiker een verminderd gezichtsvermogen heeft). Niet elke browser doet dat echter op een correcte manier. Bij Microsoft Internet Explorer vanaf versie 4.0, Netscape Navigator vanaf versie 6.0, Mozilla, Firefox en Opera vanaf versie 2.1 geldt de keuze van de gebruiker voor alle kleuren. Bij Netscape Navigator t/m versie 4 echter hebben de kleuren van de gebruiker alleen prioriteit over de via het BODY element gedefinieerde kleuren. Een door de auteur via het COLOR attribuut vastgelegde kleur wordt niet gewijzigd in de kleur van de gebruiker. Dat kan als resultaat hebben dat de tekst waarvoor het COLOR attribuut is gebruikt, moeilijk of niet leesbaar wordt. Rechtsboven is de weergave door de browser te zien en linksboven een schermafdruk van de bedoelde weergave. Daaronder de weergave wanneer de browser de gebruikerskleuren moet weergeven. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Weergave met gebruikerskleuren (zwart voor de tekst en wit voor de achtergrond) door Microsoft Internet Explorer 4 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 2.1 en hoger

Weergave met gebruikerskleuren (zwart voor de tekst en wit voor de achtergrond) door Netscape Navigator t/m versie 4 Het gebruik van Netscape Navigator 4 of lager is inmiddels tamelijk beperkt. Wanneer je het desondanks belangrijk vindt dat de weergave ook in deze browser correct is, dan is het verstandig in ieder geval een kleur voor de tekst te kiezen die de minste kans op problemen heeft. Omdat de meeste gebruikers als standaard waarschijnlijk een lichte achtergrond toepassen (wit, licht grijs, geel), zal dat het beste een donkere kleur kunnen zijn.

Het FONT element kan ook gecombineerd gebruikt worden met de fysieke tekstopmaak-elementen, bijvoorbeeld om de tekst vet, cursief of onderstreept weer te geven. De tekst .. kan ook vet, cursief of onderstreept weergegeven worden. In de browser zie je:

De tekst ingesloten door het FONT element kan ook vet, cursief of onderstreept weergegeven worden.Het FONT element is een inline element en mag slechts andere inline elementen bevatten (zoals in het voorbeeld hiervoor B, I en U). Het FONT element kan dus niet gebruikt worden om in n keer de kenmerken van de tekst in een heel document of bijvoorbeeld een tabel vast te leggen.

BasislettertypeHet BASEFONT element wordt gebruikt om de standaard lettergrootte, -kleur en -type voor een document vast te leggen. In het volgende voorbeeld zijn de attributen SIZE, COLOR en FACE aan het BASEFONT element toegevoegd. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Wanneer het BASEFONT element is gebruikt, geldt de waarde van het SIZE attribuut als beginwaarde voor de relatieve waarden van het SIZE attribuut van het FONT element. In dit document .. element: SIZE="-3" SIZE="-2" ... lt;FONT SIZE="+3">SIZE="+3" Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Voor het SIZE attribuut is de ondersteuning niet altijd zoals verwacht. Zo negeren Microsoft Internet Explorer en Netscape Navigator 4 en lager de via het BASEFONT element gedefinieerde grootte in tabellen en houden in plaats daarvan de standaard lettergrootte van de browser aan. Opera houdt in het hele document de standaard lettergrootte van de browser aan. Pas als het SIZE attribuut van het FONT element wordt gebruikt, geldt de waarde van het SIZE attribuut van het BASEFONT element als beginwaarde.

De attributen COLOR en FACE van het BASEFONT element worden alleen door Microsoft Internet Explorer ondersteund. Wanneer je de kleur van alle tekst in een document in n keer wilt vastleggen, dan kun je daarom beter gebruik maken van het TEXT attribuut van het BODY element (zie voor een toelichting het onderdeel Structuur document). Het BASEFONT element wordt helemaal niet (meer) ondersteund door Netscape Navigator 6.0 en hoger, Mozilla en Firefox. Al met al biedt het BASEFONT element weinig garantie dat de weergave in de verschillende browsers is, zoals je wenst. Je kunt er daarom beter voor kiezen, gebruik te maken van stijlen.

Het gebruik van stijlenOm te komen tot een betere scheiding tussen de structuur van een document en de presentatie ervan, heeft een aantal van de fysieke tekstopmaak-elementen (S, STRIKE en U) en de elementen FONT en BASEFONT in HTML 4.0 het label afgekeurd gekregen. In plaats daarvan is het de bedoeling dat gebruik gemaakt wordt van stijlen. Cascading Style Sheets is de taal, waarmee je stijlen kunt definiren voor HTML-elementen. Er zijn stijleigenschappen, welke hetzelfde effect hebben als de beschreven fysieke tekstopmaak-elementen en de elementen FONT en BASEFONT. Hierna wordt dat in een aantal voorbeelden gedemonstreerd. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd, die bepaalt dat de tekst ingesloten door het STRONG element niet alleen met extra nadruk, maar via de background-color eigenschap ook met een gele achtergrond moet worden weergegeven. Omdat het verstandig is altijd een combinatie van voor- en achtergrondkleur te gebruiken, is bovendien de color eigenschap opgenomen. Met Cascading Style Sheets krijg ... Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In het volgende voorbeeld worden de eigenschappen font-size, color (gecombineerd met backgroundcolor) en font-family gebruikt in plaats van het FONT element met de attributen SIZE, COLOR en FACE. Deze opmaak is ... Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

In plaats van de fysieke tekstopmaak-elementen B, I, U, TT en BIG kunnen de eigenschappen fontweight, font-style, text-decoration, font-family en font-size gebruikt worden. Dit is vet, cursief, onderstreept, vaste letterafstand en groot Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

Wanneer de stijlen betrekking hebben op het hele document of op meerdere documenten, dan ligt het niet voor de hand ze vast te leggen via een inline stijl. Je kunt ze dan beter opnemen in een stijlblok in de head van het document, of in een extern stijlblad. In het volgende voorbeeld is in het stijlblok met de eigenschappen font-family, color en background-color een stijl gedefinieerd voor het BODY element. Daarmee worden het lettertype en de voorgrond- en achtergrondkleur voor het document vastgelegd. Voor het P element is daarnaast de lettergrootte gedefinieerd met de font-size eigenschap. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster of de browser de stijlen correct weergeeft.

AfkortingenNieuwe elementen in HTML 4.0 zijn ABBR en ACRONYM. Ze hebben betrekking op afkortingen. Het TITLE attribuut van deze elementen kan gebruikt worden om de lange vorm van de afkorting vast te leggen, welke browsers kunnen weergeven in de vorm van een tooltip. Daarnaast kan met behulp van stylesheets (CSS 2) aan bijvoorbeeld een spraaksynthesizer aanwijzingen over de uitspraak gegeven worden.

Voor gewone afkortingen (zoals etc., HTML en incl.) wordt ABBR gebruikt. In het speciale geval dat de afkorting een letterwoord is, gevormd is uit n of meer beginletters van een aantal woorden en bovendien zelf een uitspreekbaar woord is, kan ACRONYM toegepast worden. Voorbeelden van letterwoorden (of acroniemen) zijn cara (chronische aspecifieke respiratoire aandoeningen) en radar (radio detection and ranging). Om de bezoeker te wijzen op de extra functionaliteit, plaatsen sommige browsers een onderbroken lijn onder de door de elementen ABBR en ACRONYM ingesloten tekst. Ten behoeve van de weergave in browsers die dat niet doen (bijvoorbeeld Microsoft Internet Explorer), kun je de afkorting met behulp van een stijl afwijkend maken van de gewone tekst. In de volgende voorbeelden is daarvoor een kleur gebruikt. De afkorting HTML is geen letterwoord. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De afkorting cara is een letterwoord. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

In de voorbeelden hiervoor zijn, om de ondersteuning door de browser te kunnen beoordelen, voor de stijl van de elementen ABBR en ACRONYM de vrij algemeen ondersteunde stijleigenschappen color en background-color gebruikt. Je kunt ook een andere wijze van presentatie kiezen. In het volgende voorbeeld wordt de afkorting (met behulp van de border-bottom eigenschap) onderstreept met een lijn met puntjes en (met behulp van de cursor eigenschap) voorzien van een aangepaste muisaanwijzer. Bestanden kun je uploaden met een FTPprogramma. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Revisie-informatie

HTML 4.0 biedt de mogelijkheid om revisie-informatie in een document op te nemen. Dat kan bijvoorbeeld handig zijn als door meerdere mensen gezamenlijk aan het document gewerkt wordt. Het INS element gebruik je om aan te geven dat de ingesloten tekst is toegevoegd, het DEL element om duidelijk te maken dat de ingesloten tekst verwijderd wordt. De browser moet deze elementen op een passende manier weergegeven. De meeste browsers doen dat door toegevoegde tekst onderstreept en te verwijderen tekst doorgestreept weer te geven. ... dat de ingesloten tekst is ingevoegd of wordt verwijderd. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De attributen CITE en DATETIME kun je gebruiken om extra informatie op te nemen. Het CITE attribuut verwijst naar een document, waarin de wijzigingen nader worden toegelicht. Met het DATETIME attribuut kan het tijdstip van wijziging worden vastgelegd. ... een datum van toevoegen of verwijderen ... Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De attributen CITE en DATETIME worden alleen door Netscape Navigator 6.1 en hoger, Mozilla en Firefox ondersteund. Je kunt in deze browser de informatie bekijken als je met de rechter muisknop op de ingevoegde of verwijderde tekst klikt en kiest voor properties (of eigenschappen). Je krijgt dan het volgende te zien:

Door Microsoft Internet Explorer vanaf versie 4, Mozilla, Netscape Navigator vanaf versie 6.1 en Opera vanaf versie 5 wordt het TITLE attribuut voor de elementen DEL en INS ondersteund, dat extra informatie in de vorm van een tooltip kan weergeven. ... bij ingevoegde of te verwijderen tekst ... Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Browsers die de elementen INS en DEL niet kennen, geven de inhoud op de gebruikelijke wijze weer. Dus niet onder- of doorgestreept. Het is daarom verstandig deze elementen alleen te gebruiken in situaties, waarvan je weet dat elke browser ze ondersteunt (bijvoorbeeld in een intranet). De elementen INS en DEL kunnen niet alleen als inline element gebruikt worden, maar ook als element op blokniveau. Wanneer ze als inline element worden gebruikt, dan mogen ze geen elementen op blokniveau bevatten.

CiterenHet BLOCKQUOTE element (dat toegelicht wordt in het onderdeel Structureren van tekst) is bedoeld voor blokken tekst, welke uit een andere bron geciteerd worden. Vrijwel alle browsers doen dit door zo'n blok tekst zowel links als rechts te laten inspringen. Daarnaast wordt de door het BLOCKQUOTE element ingesloten tekst voorafgegaan en gevolgd door een blanco regel. Voor (korte stukjes) inline tekst is nieuw in HTML 4.0 het Q element opgenomen. De door het Q element ingesloten tekst moet door de browser tussen aanhalingstekens worden geplaatst. Bovendien moet de browser het soort aanhalingstekens dat gebruikt wordt, laten afhangen van de via het LANG attribuut gedefinieerde taal. In veel talen is het gebruikelijk een citaat tussen dubbele aanhalingstekens te plaatsen en een citaat binnen een citaat tussen enkele aanhalingstekens. Dit wordt alleen gedaan door Firefox 1.5 en hoger. Netscape Navigator 6.0 en hoger, Mozilla, Firefox 1.0 en Opera 4 en hoger plaatsen een citaat altijd tussen dubbele aanhalingstekens. Microsoft Internet Explorer 4 en hoger geeft nooit aanhalingstekens weer. ... bedoeld voor short quotations ... breaks. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Het CITE attribuut kan gebruikt worden om te verwijzen naar het document, dat de bron is van het citaat.

... bedoeld voor short quotations ... breaks. Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Op dit moment wordt dit attribuut alleen door Netscape Navigator 6.1 en hoger, Mozilla en Firefox ondersteund. Je kunt in deze browsers de informatie bekijken als je met de rechter muisknop op het citaat klikt en kiest voor properties (of eigenschappen). Je krijgt dan het volgende te zien:

WoordafbrekenEen browser heeft geen ingebouwd mechanisme om woorden af te breken. Daardoor begint en eindigt een regel standaard altijd met een compleet woord. In de meeste gevallen is dat geen probleem, maar bij lange woorden kan dat leiden tot een minder fraaie weergave. Bij eenzijdig uitgelijnde tekst omdat er aan het eind (of begin) van de regel een grote witruimte ontstaat, bij tweezijdig uitgevulde tekst omdat de ruimte tussen de woorden erg groot wordt. Je kunt dat voorkomen, door in het woord n of meer keer de code voor een zacht koppelteken (soft hyphen) op te nemen. Deze code, of &173;, zorgt ervoor dat het woord als dat nodig is wordt afgebroken en een afbreekstreepje wordt ingevoegd. ... tekstverwerkingsprogramma's ... ... tekstverwerkingsprogramma's ... Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De code voor het zachte koppelteken wordt correct ondersteund door Microsoft Internet Explorer 5.0 en hoger en door Opera 7.2 en hoger. Netscape Navigator 6 en hoger, Mozilla, Firefox en Opera 4 t/m 7.1 ondersteunen en &173; helemaal niet en geven de tekst dus weer zoals dat standaard gebeurt. Alleen bij lagere versies van Microsoft Internet Explorer, Netscape Navigator en Opera is de weergave niet correct. Zie voor meer informatie het onderdeel Speciale karakters.

Tekst bij elkaar houdenSoms wil je voorkomen dat er op een bepaalde plaats een overgang is naar een nieuwe regel. Je zou dan gebruik kunnen maken van het NOBR element. De door dit element ingesloten tekst mag door de browser niet worden afgebroken en moet dus op n regel geplaatst worden. In het volgende code wordt het NOBR element gebruikt om te voorkomen dat de omschrijving van een hyperlink wordt afgebroken: Handleiding HTML Het NOBR element maakt geen deel uit van een HTML-specificatie. Wanneer je wilt voorkomen dat je documenten foutmeldingen opleveren bij de validatie van de HTML-code, dan kun je dit elementen dus beter niet toepassen. Er zijn echter twee goede alternatieven. Het eerste alternatief voor het NOBR element is het gebruik maken van het speciale teken (nonbreaking space, ofwel niet-afbrekende spatie). Wanneer je dit speciale teken zonder verdere spaties tussen twee woorden plaatst, dan worden deze woorden samen als n woord gezien en wordt er tussenin niet afgebroken. Handleiding HTML HandleidingHTML Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Bij het tweede alternatief voor het NOBR element maak je gebruik van stylesheets. Voor het deel van de tekst dat niet afgebroken mag worden, definieer je een stijl met de white-space eigenschap, die je de waarde nowrap geeft. Handleiding HTML Handleiding HTML Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Wanneer je gebruik maakt van n van de beschreven mogelijkheden om tekst bij elkaar te houden, is het verstandig dat alleen te doen voor korte stukken tekst. Daarmee voorkom je, dat de bezoeker genoodzaakt wordt de horizontale schuifbalk te moeten gebruiken om alle tekst te kunnen lezen. De mogelijkheid met wordt door alle browsers ondersteund, die met behulp de stijleigenschap white-space alleen door Microsoft Internet Explorer 5.5 en hoger, Netscape Navigator 6 en hoger, Opera 4.0 en hoger en door Mozilla en Firefox.

Een aantal browsers zien woorden met een koppelteken als n woord, dat aan het eind van de regel niet mag worden afgebroken. Microsoft Internet Explorer en Opera 6.0 en hoger breken woorden met een koppelteken die niet geheel op een regel passen, daarentegen na het streepje wel af. Wanneer je dat wilt voorkomen, dan kun je uiteraard gebruik maken van de hiervoor beschreven oplossing om met behulp van een stylesheet tekst bij elkaar te houden. Als alternatief wordt het gewone koppelteken ook wel vervangen door een niet-afbrekend koppelteken (non-breaking hyphen). De code voor dat speciale karakter is in decimale notatie en in hexadecimale Unicode notatie . niet-afbrekende nietafbrekende nietafbrekende niet-afbrekende Rechts is de weergave door de browser te zien en links een schermafdruk van de weergave door Microsoft Internet Explorer 7.0. Bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

De code voor het niet-afbrekende koppelteken wordt alleen ondersteund door Microsoft Internet Explorer 5.5 en hoger, Netscape Navigator 7.0 en hoger, Mozilla, Firefox en Opera 7.2 en hoger. Browsers die en niet kennen, geven helemaal geen streepje weer, maar laten in

plaats ervan bijvoorbeeld een vraagteken of een open rechthoek zien. Je moet er verder rekening mee houden, dat het niet alleen af van de browser afhangt of en worden weergeven, maar ook van de combinatie browser, systeem en genstalleerde lettertypen (in een testsituatie op een Windows 98SE systeem geeft Opera 7.2 en hoger het niet-afbrekende koppelteken niet weer, terwijl de eerder genoemde versies van Microsoft Internet Explorer, Netscape Navigator, Mozilla en Firefox dat op hetzelfde systeem wel doen). Voorzichtigheid bij het gebruik van het niet-afbrekende koppelteken is dus geboden.

Introductie hyperlinksHyperlinks (of hypertext links) zijn een essentieel onderdeel van HTML (Hypertext Markup Language). Ze maken het mogelijk dat je, door een simpele klik van de muis, snel van de ene locatie naar de andere surft. Een nieuwe bestemming kan zich bevinden op een andere plaats in hetzelfde document, maar het kan ook een ander document betreffen. Dat andere document kan zich bevinden op de lokale server, maar ook op een server elders op de wereld. Naast documenten kan het bovendien gaan om andere soorten bestanden, zoals afbeeldingen en geluidsfragmenten, of software die je wilt laten downloaden. Een hyperlink maak je met het A element (Anchor). Met het HREF attribuut definieer je op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. Als je werkt met frames, kun je met het TARGET attribuut aangeven in welk frame een document geopend moet worden. Het TARGET attribuut kun je ook gebruiken als een document in een nieuw venster moet worden geopend. Het NAME attribuut van het A element gebruik je om een (onzichtbaar) anker in een document te plaatsen. Dat anker kun je vervolgens gebruiken als bestemming van een hyperlink. Met het BASE element kun je een basisadres voor de URI's in een document te definiren. De kleur waarmee de hyperlinks worden weergegeven, kun je bepalen met de attributen van het BODY element. Meer mogelijkheden voor de weergave heb je als je stijlen definieert met behulp van stylesheets. Als je het TITLE attribuut opneemt van het A element, kun je de hyperlink voorzien van een korte omschrijving in een tooltip.

Link naar bestandEen hyperlink maak je met het A element, waaraan je het HREF attribuut toevoegt. Het HREF attribuut geeft aan op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. De waarde van het HREF attribuut is een zogenoemde Uniform Resource Identifier (URI). Een URI is een compacte reeks karakters, waarmee een bron (resource) gedentificeerd kan worden. De aanduiding URI is nieuw in HTML 4.0, daarvoor werd gebruik gemaakt van het begrip URL, Uniform Resource Locator. URL's worden nu gezien als een ondergroep van de meer algemene URI's. Bij een URL wordt een bron (bijvoorbeeld het te openen of te downloaden bestand) gedentificeerd door de wijze waarop je er toegang tot kan krijgen. Het gaat daarbij enerzijds om de methode die je moet gebruiken om er te komen en anderzijds om de locatie waar het zich op het internet bevindt. Bij het maken van een hyperlink naar een bestand zijn de belangrijkste methoden die je kunt gebruiken http (HyperText Transfer Protocol) en ftp (File Transfer Protocol). Voor deze methoden is de opbouw van de URI:

protocol://host/path Het protocol zal meestal http zijn en alleen ftp, als het gevraagde bestand zich op een speciale FTPserver bevindt. Host specificeert het adres van de server, waarop zich het gevraagde bestand bevindt. Het is meestal een domeinnaam, maar mag ook een IP-adres zijn (zie ook de beschrijving van het HREF attribuut). Path geeft aan hoe het gevraagde bestand op de server gevonden kan worden: in welke directory en onder welke bestandsnaam. Het is niet altijd nodig een complete URI te gebruiken. Wanneer je verwijst naar de beginpagina van een site, dan is het voldoende alleen de domeinnaam op te nemen. Meestal wordt dan automatisch een bestand met de naam "index.html" geopend (mits dat bestaat natuurlijk). Handleiding HTML In de browser zie je: Handleiding HTML Verwijs je niet naar de host, maar naar een directory op de server, dan beindig je de URI met een slash: HTML-gedeelte Handleiding HTML In de praktijk wil je vaak een verwijzing naar een specifiek bestand in een bepaalde directory van een server opnemen. Bijvoorbeeld: Inhoud HTMLgedeelte Wanneer de link verwijst naar een bestand op de lokale server, is het voldoende om alleen het path op te nemen. Daarbij zijn er de volgende mogelijkheden: staat het bestand in dezelfde directory als het huidige document, dan hoef je slechts de naam van het bestand op te nemen: Frames

staat het bestand in een subdirectory van de huidige directory staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een slash en daarna de naam van het bestand: Frames

bevindt het bestand zich in een hogere directory dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op: Frames

een combinatie van de laatste twee mogelijkheden gebruik je bijvoorbeeld als je moet verwijzen naar een bestand in een directory, die niet in dezelfde lijn ligt: Frames

verwijs je niet naar een bestand, maar naar een directory, dan beindig je de URI met een slash: HTML-gedeelte

Onderbreek een hyperlink, ook al is de URI nog zo lang, niet met harde returns (met Enter naar de volgende regel gaan). Zo'n harde return kan door de browser opgevat worden als spatie die ook onderstreept wordt. Bijvoorbeeld: Frames wordt door de browser weergegeven als: Frames en niet zoals bedoeld als Frames.

In de voorbeelden hiervoor is steeds een link gemaakt naar een HTML-document. Je kunt echter ook hyperlinks maken naar andere typen bestanden, zoals zip-bestanden, exe-bestanden, afbeeldingen (gif-, jpg- of png-bestanden), multimedia objecten (wav-, mp3-, swf- en mov-bestanden), Worddocumenten (doc-bestanden) en Powerpoint presentaties (ppt-bestanden). Sommige bestanden zal de browser direct openen. Naast HTML-documenten geldt dat bijvoorbeeld voor afbeeldingen. Bij andere soorten bestanden (zip- en exe-bestanden) zal de browser normaal gesproken met een voorstel tot opslaan komen. In de overige gevallen hangt het er vanaf of de bezoeker een plug-in of programma heeft genstalleerd dat iets met het bestand kan. Een Word-document kan bijvoorbeeld met de juiste plug-in direct in de browser geopend worden. Wanneer zo'n plug-in ontbreekt zal de browser voorstellen het doc-bestand te openen in Word zelf. Indien ook Word niet genstalleerd is, rest de browser weinig anders dan te komen met het aanbod het bestand op te slaan. Voor Powerpoint presentaties en multimedia objecten geldt een vergelijkbaar verhaal.

Tussen de activering en de beindiging van het A element in de voorbeelden in dit onderdeel is steeds met tekst een omschrijving geplaatst. Als alternatief voor tekst kun je echter ook een afbeelding gebruiken. Een voorbeeld daarvan wordt in het onderdeel Afbeeldingen gegeven.

Het A element is een inline element en moet dus geplaatst worden binnen een element op blokniveau (bijvoorbeeld P).

Downloaden bestandOm een bezoeker in de gelegenheid te stellen een bestand te downloaden, hoef je in principe niet meer te doen dan het maken van een gewone hyperlink. Voor een zip-achiefbestand, dat in dezelfde directory op de server staat als het HTML-document, ziet zo'n hyperlink er als volgt uit: Download bestand Wanneer het te downloaden bestand zich in een andere directory bevindt, dan hanteer je de regels die bij de algemene uitleg van hyperlinks zijn toegelicht. Bijvoorbeeld:

Download bestand Als het bestand zich op een FTP-server bevindt, dan heeft de link bijvoorbeeld de volgende opbouw: Download bestand Als je de naam van het bestand weglaat, krijgt de bezoeker een lijst te zien met alle bestanden in de opgegeven directory 'pub' en kan hij of zij zelf n of meer bestanden kiezen om te downloaden. Download bestand(en) In de voorgaande voorbeelden gaat het om een link naar een FTP-server, waar vanaf je anoniem kunt downloaden. Wanneer het noodzakelijk is een link te maken naar een FTP-server waarvoor een gebruikersnaam en een wachtwoord vereist zijn, dan heeft de link de volgende opbouw: Download bestand(en) Als je niet wilt dat de gebruikersnaam en het wachtwoord bij iedereen bekend worden, is het verstandig een dergelijke link niet zomaar open en bloot op een voor iedereen toegankelijke website te plaatsen.

Als de bezoeker op een hyperlink van een zip-bestand klikt, zal elke browser een venster openen waarin gevraagd wordt of het bestand moet worden opgeslagen of geopend met het bijbehorende programma. Zoals al eerder is aangegeven zal dat echter niet bij alle bestandstypen het geval zijn. HTMLdocumenten en bijvoorbeeld afbeeldingen zal de browser zelf openen, voor andere bestandstypen hangt het af van de op het systeem van de bezoeker genstalleerde plug-ins of programma's. Als auteur kun je niet benvloeden wat de browser met een bepaald type bestand doet. Wil je er zeker van zijn dat de bezoeker het bestand kan opslaan, dan is het de beste oplossing het bestand te verpakken in een zip-archief. Heb je daar geen mogelijkheid voor, of verwacht je dat de bezoeker het zip-bestand niet kan uitpakken, dan rest je weinig anders dan de bezoeker via de tekst van de hyperlink te adviseren de rechter muisknop te gebruiken en te kiezen voor 'Opslaan als'.

Basis-URIDe URI van een hyperlink kan absoluut of relatief zijn. In een absolute URI zijn in ieder geval het te gebruiken protocol en het adres van de server opgenomen, een relatieve URI bevat alleen het path op de server. Wanneer een hyperlink met een relatieve URI geopend moet worden, gebruikt de browser de URI van het huidige document als basisadres en bepaalt daarmee de absolute URI van de link. Is de URI van het huidige document: http://www.handleidinghtml.nl/html/hyperlinks/hyperlinks01.html en is deze hyperlink opgenomen: Frames dan weet de browser dat de absolute URI van de link de volgende is: http://www.handleidinghtml.nl/html/frames/frames.html

Wanneer veel links in een document verwijzen naar dezelfde site of directory, dan kan het handig zijn in

de head van het document het BASE element op te nemen en met het HREF attribuut een basis-URI definiren. Deze basis-URI wordt door de browser als basisadres gebruikt voor de relatieve URI's, in plaats van de URI van het huidige document. De basis-URI moet absoluut zijn en eindigen met een "/". Een voorbeeld van het BASE element is: Staat in het document, dat bovenstaand BASE element bevat, deze hyperlink: Inhoud CSS dan gaat de browser uit van de volgende absolute URI: http://www.handleidinghtml.nl/css/inhoud-css.html Wanneer de basis-URI betrekking heeft op een site op een andere server, kunnen naar bestanden op deze server relatieve URI's opgenomen worden. Verwijzingen naar bestanden op de lokale server mogen in dit geval uiteraard niet meer relatief zijn.

Bestemming binnen documentSoms wil je niet zomaar verwijzen naar een ander document, maar naar een specifieke plaats in een document. Dat kan als je eerst de plaats, waarnaar je wilt verwijzen, markeert met een A element waaraan het NAME attribuut is toegevoegd. Zo'n markering (of anker) ziet er bijvoorbeeld als volgt uit: In dit voorbeeld heeft de markering de naam "inhoud". Als je binnen een document een link naar een gemarkeerde plaats wilt maken, gebruik je als URI een hekje (#) gevolgd door de naam van de markering (ofwel de waarde van het NAME attribuut van de markering). Een link naar de markering in het voorbeeld hiervoor ziet er dus als volgt uit: Inhoud Hyperlinks De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks bovenaan deze pagina. Dit soort linken werken overigens niet alleen binnen een document. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document, in dezelfde of een andere directory, of op een andere server. Als waarde van het HREF attribuut neem je in dat geval gewoon de verwijzing naar het betreffende document op (zie het onderdeel Link naar bestand) en zet daar het hekje en de naam van de markering achter. In het volgende voorbeeld verwijst de link naar het document "inhoud-htmlplus.html", dat zich in een hoger gelegen directory bevindt. De plaats van bestemming binnen dat document is aangegeven met een markering die de naam "hyperlinks" heeft. Inhoud Hyperlinks De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks in de uitgebreide inhoudsopgave van het HTML-gedeelte van de Handleiding HTML.

Linken naar een plaats binnen een document zorgt ervoor dat de gebruiker niet het hele document hoeft door te scrollen, maar direct naar de gewenste informatie kan springen.

Document openen in frameWanneer je een document in een bepaald frame wilt openen, dan moet je het TARGET attribuut aan het A element toevoegen. Bijvoorbeeld: Tabell