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>De header van een web page
<TITLE></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.
op mijn site
 | |
| Voorpagina | |
| Moerman | |
| Hobbies | |
| Computers | |
| Vroeger | |
| Veilig | |
| Net(werk) | |
| Linux | |
| Program'ng | |
| Embedded | |
| Web pages | |
| Vervolg | |
| Specials | |
| Paginas | |
| Header | |
| Upload | |
| CGI | |
| CGI 2 | |
| CGI 3 | |
 | |
| SintLijst | |
 | |
| HTC Desire | |
 | |
| Archief | |
| Site Map |
