Handleiding HTML - Introductie in HTML

Introductie in HTML
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde HTML, Elementen, Attributen, Opbouw HTML-document, Extra mogelijkheden, Structuur versus presentatie, Maken HTML-document en Controle HTML-document.

HTML

HTML is de taal waarmee je documenten (ofwel homepages of webpagina's) maakt, die bekeken kunnen worden op het World Wide Web.

HTML staat voor HyperText Markup Language:

Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname.
Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

HTML-code is opgebouwd uit elementen en attributen.

Elementen

Elementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer opheft. Zowel de activering (ook wel start tag genoemd) als de opheffing (end tag) beginnen met het teken < en eindigen met het teken >. Tussen deze tekens staat de naam van het element. De activering en de opheffing zijn hetzelfde, met uitzondering van de slash (/) voor de naam van het element in de opheffing. Tussen de activering en opheffing 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 opheffing verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden:

<HR>

Van sommige elementen mag de opheffing 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 namen van de elementen zijn altijd case-insensitive, dat wil zeggen dat het niet uitmaakt of hoofdletters of kleine letters worden gebruikt.

Attributen

Attributen zijn nadere specificaties zijn van de elementen. De attributen worden opgenomen in de activering, 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. Deze waarde wordt geplaatst tussen dubbele of enkele aanhalingstekens. 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.

<HR SIZE="5" NOSHADE>

De namen van de attributen zijn altijd case-insensitive. Meestal geldt dat ook voor de waarden, maar er zijn enkele uitzonderingen.

In deze handleiding wordt de HTML-code, net als in de voorbeelden hiervoor, weergegeven in een lettertype met een vaste letterafstand. De namen van elementen en attributen worden altijd in hoofdletters weergegeven, de waarden (tenzij anders vereist) altijd in kleine letters.

Opbouw HTML-document

Een HTML-document bestaat uit twee delen: de head en de body.

De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan bijvoorbeeld instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden.

In de head van elk document moet in ieder geval het TITLE element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in de titelbalk van het venster.

Een uitgebreide beschrijving van de in de head op te nemen informatie is te vinden in het onderdeel Structuur document.

De body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document.

Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat.

Met de genoemde elementen heeft het HTML-document de volgende opbouw:

<HTML> <HEAD> <TITLE>Dit is mijn eerste homepage</TITLE> </HEAD> <BODY> </BODY> </HTML>

Binnen het BODY element kun je ondermeer koppen, paragrafen, horizontale lijnen, afbeeldingen en hyperlinks opnemen.

Koppen maak je met het Hx element. De "x" vervang je door een getal tussen 1 en 6. Hoe lager het getal, hoe groter de kop. Voor de belangrijkste kop gebruik je dus H1:

<H1>De belangrijkste kop</H1>

Gewone tekst neem je op met het P element. Voor een horizontale lijn gebruik je het HR element. Voorbeeld van deze elementen zijn hiervoor reeds gegeven.

De elementen Hx, P en HR zijn elementen, die ervoor bedoeld zijn de inhoud van een document op een voor een bezoeker begrijpelijke wijze te structureren. Dit soort elementen wordt altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en soms 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.

<IMG SRC="face.gif" WIDTH="105" HEIGHT="125" ALT="Gezicht">

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 op een andere server ziet er als volgt uit:

Bezoek de <A HREF="http://www.dsdelft.nl/html/index.html">Handleiding HTML</A>

Een hyperlink naar een document op dezelfde server kan een wat eenvoudiger opbouw hebben. Bijvoorbeeld:

<A HREF="hyplinks.htm">hyperlink</A>

Met de attributen van het BODY element kun je de basisweergave van een document bepalen. Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker. Het BACKGROUND attribuut tenslotte kun je gebruiken om aangeven, dat een afbeelding als achtergrond voor het document gebruikt moet worden.

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" ALINK="#FF0000"> </BODY>

Plaatselijk kun je de weergave van stukjes tekst binnen bijvoorbeeld een kop of paragraaf bepalen met de elementen voor tekstopmaak, zoals B voor vet en I voor cursief. Ze worden beschreven in het onderdeel Weergave tekst.

Tekst kun je ook in vet of cursief weergeven.

Extra mogelijkheden

Hiervoor is ingegaan op een aantal basismogelijkheden bij het maken van HTML-documenten. HTML biedt daarnaast nog veel extra mogelijkheden en in deze handleiding komen die uitgebreid aan de orde.

In het onderdeel Structureren van tekst wordt, behalve op de al eerder genoemde paragrafen, koppen en horizontale lijnen, onder meer ingegaan op de witruimte in een document, het inspringen en centreren van blokken tekst, het plaatsen van tekst in kolommen, het afbreken en het plaatsen van tekst in een vaste opmaak.

Lijsten kun je gebruiken om informatie in een document puntsgewijs weergeven.

Tabellen zijn er voor het ordenen van informatie in een document. Daarnaast worden tabellen ook veel gebruikt om de lay-out van een document te bepalen (in het bijzonder het in horizontale richting op de gewenste plaats zetten van tekst en andere inhoud).

Met formulieren kun je de bezoeker van je pagina's de mogelijkheid te bieden tot bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enquête, het beantwoorden van vragen en het plaatsen van bestellingen.

Door te werken met frames kun je het venster van de browser onderverdelen in meerdere subvensters en in elk een document kunt openen. Vaak wordt dat gedaan om een deel van het venster steeds zichtbaar te houden (bijvoorbeeld een titelbalk of een inhoudsopgave) en in een ander deel door opeenvolgende documenten heen te kunnen lopen. Een bijzondere vorm is het inline frame, een venster in je document waar je doorheen kijkt naar een ander document.

Een bijzonder gebruik van afbeeldingen betreft image maps, ook wel aanklikbare afbeeldingen genoemd. Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in verschillende gebieden, waarbij aan elk gebied een hyperlink kan worden gekoppeld. Als je in zo'n gebied in de afbeelding klikt met de muis, spring je naar de in de hyperlink gedefinieerde bestemming.

Naast afbeeldingen kun je in een document ook andere objecten opnemen. Bekende voorbeelden zijn Java applets en geluidsfragmenten.

Scripts kun je gebruiken om extra mogelijkheden aan HTML-documenten toe te voegen. Bekende voorbeelden zijn het openen van nieuwe browser-vensters, het vervangen van meerdere frames tegelijkertijd en berichten in de statusbalk. Naast een algemene beschrijving van het gebruik van scripts, worden in deze handleiding ook een aantal voorbeelden van de meest gebruikte scripttaal JavaScript gegeven.

Structuur versus presentatie

HTML is oorspronkelijk ontwikkeld om informatie via hypertext documenten te ontsluiten voor verschillende platforms (zoals Windows, Macintosh en Unix). Bij de weergave van HTML-documenten ging het niet om een mooie, door de auteur geheel vastgelegde lay-out. Uitgangspunt was dat de informatie in een heldere structuur aan een bezoeker geboden moest worden. Bijvoorbeeld door de informatie in te delen met behulp van koppen van verschillende zwaarte en paragrafen.

In de loop van de tijd ontstond bij webauteurs echter de behoefte aan meer mogelijkheden bij de opmaak van documenten. Op deze behoefte is door de ontwikkelaars van browsers (vooral Netscape en Microsoft) ingespeeld door het introduceren van nieuwe, soms browser-specifieke, elementen en attributen. Webauteurs zelf gebruikten hun creativiteit om met bestaande HTML-elementen meer invloed op de opmaak van hun documenten te krijgen. Deze verstrengeling van structuur en presentatie heeft tot de gevolg dat een document niet altijd meer in elke browser en op elk platform goed te bekijken is.

Als oplossing voor deze problemen zijn style sheets geïntroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet zoals oorspronkelijk bedoeld weer zorgen voor de structuur van het document, de presentatie wordt bepaald met behulp van style sheets.

In het onderdeel Style sheets wordt ingegaan op de koppeling van style sheets aan HTML. Daarnaast bevat deze handleiding een uitgebreide beschrijving van de style sheet taal Cascading Style Sheets (CSS). Deze taal wordt in meer of mindere mate door de laatste versies van de meest gebruikte browsers ondersteund.

Maken HTML-document

HTML-documenten zijn zogenaamde ASCI-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 Hulpprogramma's.

De formele extensie van de bestandsnaam van een HTML-document is "html", maar omdat bij op DOS/Windows 3.x gebaseerde systemen een extensie uit slechts 3 posities mag bestaan, wordt ook vaak "htm" gebruikt.

Controle HTML-document

Voordat je anderen in de gelegenheid stelt je HTML-documenten te bekijken, moet je controleren of ze geen fouten bevatten. Daarbij gaat het niet alleen om de spelling, maar ook om de HTML-code en de hyperlinks.

Het is belangrijk dat je de HTML-code op de juiste manier gebruikt. Je verkleint daarmee de kans dat de browser van een bezoeker de documenten niet correct kan weergeven.
Voor de controle van de HTML-code kun je gebruik maken van de HTML Validation Service van het W3C (World Wide Web Consortium), of van de WDG HTML Validator. Deze online validators maken gebruik van officiële door het W3C voor de verschillende HTML-versies opgestelde "document type definitions" (DTD; zie ook de beschrijving van de DOCTYPE declaratie).
Wanneer je de HTML-documenten liever offline wilt controleren, dan kun je gebruik maken van een daarvoor bedoeld programma.

Naast de controle met behulp van een validator, is het ook goed je documenten te bekijken met verschillende browsers. Je komt er dan onder meer achter of een browser een afwijkende weergave heeft, of fouten bevat waarmee je rekening moet houden.

Voor een bezoeker van je pagina's is het tenslotte wel zo plezierig dat eventuele hyperlinks kloppen. Je zult ze dus regelmatig moeten controleren. Heb je veel links dan is het gebruik van een linkchecker handig.

Inhoud Handleiding HTML Index