De header van een web page

Deze pagina is bedoeld voor mensen die meer willen afweten van (of kunnen met) HTML en web pages. Niet echt (nodig) voor beginners, maar wel als je zelf invloed wilt uitoefenen op layout, zoekpaginas, automatisch doorverwijzen naar andere pagina's, en dergelijken.

De HTML header

Een HTML (web) page bestaat uit twee delen, de body en de header. De body bevat de tekst die zichtbaar is in de web browser, en dit is het gedeelte dat je normaal bewerkt met een HTML editor als Front Page. Het is het deel tussen de <BODY> en </BODY> tags in de HTML.

Maar, elke HTML page hoort te beginnen met een header, met daarin meer globale informatie over de pagina (waarvan de title de meest bekende is). Deze is voor veel mensen toch nog wat misterieus, laat ik mijn header eens wat uitleggen. Eerst de hele header zonder uitleg (verderop de gedetalliëerde uitleg):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="nl"> <HEAD> <link rel="icon" href= "favicon.ico" type="image/ico"> <link rel="shortcut icon" href= "favicon.ico" type="image/ico"> <LINK HREF= "moerman. css" rel="stylesheet" type="text/css"> <LINK HREF= "moerprint.css" rel="stylesheet" type="text/css" media="print"> <LINK HREF= "moerman.css" rel="stylesheet" type="text/css" media="screen"> <META NAME="copyright" CONTENT="© 2004 Kees Moerman"> <META NAME="author" LANG="nl" CONTENT="Kees Moerman"> <META NAME="date" CONTENT="2004-03-20T16:50:30+00:00"> <META NAME="keywords" CONTENT="Kees Moerman, web, html"> <META NAME="description" content="Hoe maak ik web pages"> <META NAME="robots" content="all"> <META NAME="generator" CONTENT="gen_idx.perl, C.M. Moerman 1999-2004 (c)"> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> <META HTTP-EQUIV="content-style-type" CONTENT="text/css"> <META HTTP-EQUIV="content-script-type" CONTENT="text/javascript"> <SCRIPT SRC= "moerman.js" TYPE="text/javascript" LANGUAGE="JavaScript"></SCRIPT> <TITLE>De header van een web page</TITLE> </HEAD>

Wat betekent dit nu allemaal? In detail:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> geeft aan wat dit voor type document is (HTML) en welke versie HTML gebruikt wordt: 4.01, maar dan losjes geïnterpreteerd (een DTD is een Document Type Definition, een exacte bescrhijving van de taal).

<HTML lang="nl"> is de standaard aanhef: het eerste stuk geeft aan dat hier de HTML begint, en het een Nederlandstalige pagina betreft. Andere mogelijkheden voor 'lang' zijn bijvoorbeeld "en" (Engels) en "en-US" (Amerikaans Engels).

<HEAD> geeft het begin van de header aan. De inhoud hiervan wordt niet direkt weergegeven, maar bevat informatie over de pagina, zoals de auteur en de titel van de pagina.

<link rel="icon" href= "favicon.ico" type="image/ico"> <link rel="shortcut icon" href= "favicon.ico" type="image/ico">
zorgt dat bij het opslaan van een link in je favorieten er een plaatje (icoontje) voor de naam van de pagina wordt gezet. Verschillende browsers houden zich niet helemaal aan de afspraken, vandaar twee vormen, waarmee de meeste browsers geholpen worden. favicon.ico moet een 16x16 icon zijn.

<LINK HREF= "moerman.css" rel="stylesheet" type="text/css"> <LINK HREF= "moerprint.css" rel="stylesheet" type="text/css" media="print"> <LINK HREF= "moerman.css" rel="stylesheet" type="text/css" media="screen">
zorgt voor de opmaak, met behulp van Cascading Style Sheets (CSS), zie ook bovenaan op deze pagina. Hiermee kan je je inhoud (in de HTML paginas) scheiden van de opmaak (in een gezamelijk style sheet). Bovendien kan je verschillende style sheets voor verschillende media hebben, om bijvoorbeeld onderscheid te maken tussen de papieren versie (media="print"), en de scherm-versie (media="screen"). Op de papieren versie heeft het bijvoorbeeld geen zin een uitgebreide navigatiebalk weer te geven (kunnen ze toch niet op klikken). Kijk maar eens in de print preview van deze page: de navigatiebar is verdwenen!

<META NAME="copyright" CONTENT="© 2004 Kees Moerman"> <META NAME="author" LANG="nl" CONTENT="Kees Moerman"> <META NAME="date" CONTENT="2004-03-20T16:50:30+00:00"> <META NAME="keywords" CONTENT="Kees Moerman, web, html"> <META NAME="description" content="Hoe maak ik web pages">
is wat informatie over de maker (ik dus) en de pagina's, redelijk voor zichzelf sprekend.

<META NAME="robots" content="all"> geeft aan dat robots alle pagina's mogen doorzoeken (bijvoorbeeld de googlebot van Google om de paginas op te nemen in de zoekmachine). Meer info over robots toelaten/tegenhouden op www.robotstxt.org. Wil je niets doorzocht hebben dan kan je bijvoorbeeld gebruiken: <META NAME="robots" CONTENT="none">

<META NAME="generator" CONTENT="gen_idx.perl, C.M. Moerman 1999-2005 (c)"> geeft aan met welk programma de pagina's gemaakt zijn, in dit geval mijn scriptje.

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> <META HTTP-EQUIV="content-style-type" CONTENT="text/css">
is de gebruikte codering (standaard west-europesche character set), en de gebruikte layout/opmaak-methode (met behulp van CSS).

<META HTTP-EQUIV="content-script-type" CONTENT="text/javascript"> <SCRIPT SRC= "moerman.js" TYPE="text/javascript" LANGUAGE="JavaScript"></SCRIPT>
geeft aan welke script-taal ik ga gebruiken (JavaScript dus), en laad mijn JavaScript bibliotheek met mijn (nog te maken) standaard-functies.

<TITLE>De header van een web page</TITLE> is de titel van depagina, zoals in de balk van de browser weergegeven. Wordt ook gebruikt als naam bij opslaan als favoriet (samen met het eerder genoemde icoontje).

</HEAD> geeft het einde van de header aan. Vervolgens komt de <BODY> maar daar ga ik het hier niet over hebben.

Hoe komt deze header in mijn pages

Mijn script waarmee ik ook de indices maak zorgt er ook voor dat deze header netjes in elke HTML pagina wordt toegevoegd. De header staat namelijk in de daar genoemde template, en iedere HTML pagina wordt in deze template gegoten (waarbij netjes bijvoorbeeld de titel en zo worden ingevuld). Op die manier weet ik zeker dat alle pagina's een consistente layout hebben.

Meer info

Andere handige meta statements:

Wil je automatisch doorschakelen naar een andere pagina, gebruik dan
<meta http-equiv="refresh" content="5;URL=http://nieuwe_sitenaam">
(de 5 is het aantal seconden waarna wordt doorgestuurd).

Meer uitleg? Kijk op Handleiding HTML (en CSS). Wil je je web-page op correctheid laten checken? Kijk dan op HTML-checker.

Meer info: kijk op mijn links pages, of ga terug naar mijn web page.