WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Een eenvoudig HTML document
Doorsturen naar een andere pagina
Het LINK element
Horizontale lijnen
Paragraphs
Break
Koppen
Tekstweergave
Geformatteerde tekst
Superscript en subscript
Stylesheets gebruiken
Opmerkingen
Voorbeeld downloaden

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Een eenvoudig HTML document

In dit hoofdstuk laat ik zien wat de bouwstenen van een eenvoudig HTML document zijn. In diit hoofdstuk leer je genoeg om een simpele webpagina te maken.

Een eenvoudig HTML document

Een eenvoudig HTML document ziet er zo uit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML LANG="nl">

<HEAD>
<TITLE>De titel die boven het venster verschijnt</TITLE>

<META NAME="keywords" CONTENT="HTML, CSS, JavaScript">
<META NAME="copyright" CONTENT="copyright 1995-2005 by Jan Weijers">

</HEAD>

<BODY>
De tekst van het document
</BODY>
</HTML>

Je kunt het document elke willekeurige naam geven als die maar eindigt met .html of .htm. Als het document eindigt in iets anders, is er wat bijzonders aan de hand. Bijvoorbeeld, op deze site vind je een aantal documenten die eindigen met .php en dat betekent dat er PHP scripts in zitten. Let op dat op Unix en Linux servers onderscheid maken tussen hoofd- en kleine letters in een bestandsnaam. OP zo'n server is MyFile.html dus niet hetzelfde als myfile.html.

De regel <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> vertelt de browser dat het document gemaakt is volgens de HTML 4.01 (strikt) specificatie. Je kunt de volledige specificaties vinden op de site van het WWW consortium (W3C). Het W3C biedt ook een controleur die je documenten online na kan kijken en laat weten of ze voldoen aan de standaard of niet.

Deze zogenaamde open standaarden zijn belangrijk. Ze zorgen ervoor dat het web blijft wat het is: een manier om voor iedereen te publiceren. Sommige softwareproducenten hebben nog wel eens de neiging eigen "standaarden" te ontwikkelen. Ik raad aan je documenten te publiceren volgens de standaarden van de W3C. Deze pagina's voldoen helemaal aan de HTML 4.01 en CSS 2 standaarden.

Het HTML element geeft aan waar je document begint. Binnen het HTML element vind je twee belangrijke delen, de kop (binnen de <HEAD> en </HEAD> tags) en het document zelf (tussen de <BODY> en </BODY> tags). Het document eindigt weer met een </HTML> tag. De kop van je document bevat informatie die in het algemeen niet aan de lezer wordt getoond maar wel nuttig is voor de browser. De HTML, HEAD en BODY elementen zijn optioneel en je bent niet verplicht ze in je document te gebruiken. Het is echter een goede manier om structuur in je documenten aan te brengen.

Het LANG attribuut geeft aan in welke taal het document is. Dit helpt browsers met bijvoorbeeld afbreken van woorden of het inschakelen van spraaksoftware. Taalcodes zijn bijvoorbeeld "nl" voor Nederlands, "en" voor Engels, "en-US" voor Amerikaans en "de" voor Duits. Met het LANG attribuut bij het HTML element geeft je de taal voor het hele document aan. Je kunt het LANG attribuut ook gebruiken bij elementen zoals <P> en <LI>, bijvoorbeeld als je kleine stukjes tekst in een andere taal hebt.

De tekst tussen de <TITLE> en </TITLE> tags is de tekst die verschijnt als titel van het venster, zoals er "WebThings: Een eenvoudig HTML document" bovenaan dit venster staat. Als je geen titel meegeeft, tonen de meeste browsers de locatie van het document. De meeste browsers gebruiken het TITEL element ook als je een favoriet toevoegt.

De <META NAME="keywords" CONTENT="HTML, CSS, JavaScript"> kun je gebruiken om zoektermen toe te kennen aan je document. Zoekmachines zoals Google kunnen daar gebruik van maken om je document te indexeren. Je hoeft dit niet te doen en niet alle zoekmachines maken gebruik van deze zoektermen. Sommigen doorzoeken gewoon je hele document. Met <META NAME="copyright" CONTENT="copyright 1995-2005 by Jan Weijers"> plaats je informatie over het auteursrecht op je document in de kop. Dit zijn bijvoorbeeld de META tags die je in dit document vindt:

<META NAME="generator" CONTENT="BBEdit 8.2">
<META NAME="author" CONTENT="Jan C.H. Weijers">
<META NAME="copyright" CONTENT="1995-2005 Jan C.H. Weijers">
<META NAME="keywords" CONTENT="html guide, html info, html questions, html tutorial, html answers">

De tekst tussen <BODY> en </BODY> is de werkelijke inhoud van je document.

To the top

Doorsturen naar een andere pagina

Een heel bijzondere toepassing van het META element is het laden van een andere pagina. Hier een een voorbeeld:

<HTML><HEAD><TITLE>The clock is ticking...</TITLE>
<META http-equiv=refresh content="3; url=basic.php#_force">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Just wait for 3 seconds to go back</H1>
</BODY>

Dit document is hier opgeslagen onder de naam basic_refresh.html. Als je er heen klikt en drie seconden wacht, kom je vanzelf weer uit bij deze pagina.

<A HREF="basic_refresh.html">Probeer dit</A>

Probeer dit

Zoals je kunt zien, heeft een heel simpel element in de kop van je document grote gevolgen. Je kunt op deze manier zelfs een 'rondleiding' door je site maken door in elke document deze META tag te gebruiken. Overigens kun je er niet vanuit gaan dat alle browsers dit element ondersteunen en wil je voor de zekerheid ook een gewone link toevoegen.

To the top

Het LINK element

The LINK element geeft relaties tussen documenten weer. Het LINK element mag alleen voorkomen in de kop van je document. Bijvoorbeeld, in de kop van dit document zou ik de volgende LINK elementen kunnen gebruiken:

<LINK REL="Contents" HREF="index.php">
<LINK REL="Previous" HREF="intro.php">
<LINK REL="Next" HREF="text.php">

Dit vertelt de browser dat er bij dit document een inhoudsopgave hoort die index.php heet en dat er een voorgaand en volgend hoofdstuk zijn. Het LINK element wordt het meest gebruikt om te verwijzen naar een cascading style sheet. Bijvoorbeeld:

<LINK HREF="parts/guide.css" REL="stylesheet" TYPE="text/css">

Dit is de link die aan alle pagina's van WebThings is toegevoegd en verwijst naar een stylesheet.

To the top

Horizontale lijnen

In HTML kun je makkelijk horizontale lijnen maken tussen hoofdstukken of secties van je document. Dat doe je met het HR element:

<HR>

Wat resulteert in deze horizontale lijn:

 


 

Je kunt de hoogte en breedte van de lijn instellen:

<HR STYLE="width:250px; height:5px">


Dit voorbeeld geeft een lijn die 5 beeldpunten hoog is en 250 beeldpunten breed. Dit is een voorbeeld van het gebruik van het STYLE attribuut. Meer daarover in het hoofdstuk over stylesheets. De lijn komt gecentreerd tussen je tekst te staan.

In oudere versies van HTML bestonden WIDTH, SIZE, ALIGN en NOSHADE attributen voor het HR element. Deze attributen zijn "deprecated". Dat betekent dat ze niet langer onderdeel zijn van HTML 4 maar dat browsers ze nog wel correct weer moet geven.

<HR WIDTH="250" SIZE="5" NOSHADE ALIGN="left">

To the top

Paragraphs

Een <P> tag markeert een paragraaf tekst. Een paragraaf eindigt met de </P> tag. Regeleinden en tabs in HTML documenten worden genegeerd door de browser. Meerdere spaties ziet een browser als één spatie. Als tekst niet indeelt met het P en het BR element, ziet de browser het als een continue lap tekst. Het P element voegt lege ruimte toe boven en onder de paragraaf.

<P>Semper ubi sub ubi. Quone modo nunc, ... magno suo cum periculo deicerentur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.

To the top

Break

<BR> zorgt voor een regeleinde zodat de tekst op een nieuwe regel verder gaat. Zo dus:

<P>Dit is een<BR> een zin met<BR> een paar regeleindes er in.</P>

Dit is een
een zin met
een paar regeleindes er in.

To the top

Koppen

Het H element zorgt voor koppen en tussenkoppen in je document. Er zijn er zes beschikbaar:

<H1>Kop maat 1</H1>
<H2>Kop maat 2</H2>
<H3>Kop maat 3</H3>
<H4>Kop maat 4</H4>
<H5>Kop maat 5</H5>
<H6>Kop maat 6</H6>

Kop maat 1

Kop maat 2

Kop maat 3

Kop maat 4

Kop maat 5
Kop maat 6

Hoe groot de koppen precies getoond worden hangt af van de browser. Met stylesheets kun je dat zelf instellen.

To the top

Tekstweergave

Er zijn verschillende elementen beschikbaar om de weergave van tekst aan te passen:

<TT>teletype</TT>
<I>italic, schuingedrukt</I>
<B>bold, vet</B>
<BIG>big, groot</BIG>
<SMALL>small, klein</SMALL>

teletype
italic, schuingedrukt
bold, vet
big, groot
small, klein

<EM>Emphasis, nadruk</EM>
<STRONG>Stronger emphasis, meer nadruk</STRONG>
<CODE>Code sample, broncode</CODE>
<SAMP>Sample text, voorbeeldtekst</SAMP>
<KBD>Keyboard, toetsenbord</KBD>
<VAR>Namen van variabelen</VAR>
<DFN>Definities</DFN>
<CITE>Citaat</CIT>

Emphasis, nadruk
Stronger emphasis, meer nadruk
Code sample, broncode
Sample text, voorbeeldtekst
Keyboard, toetsenbord
Namen van variabelen
Definities
Citaat

Hoe deze elementen precies worden weergegeven bepaalt je browser. Het is goed mogelijk dat verschillende elementen in de weergave erg op elkaar lijken.

To the top

Geformatteerde tekst

Zoals gezegd negeren browsers alle gewone regeleinden en daarom gebruik je P en BR. Extra spaties worden ook genegeerd. Als je probeert spaties te gebruiken om tekst te centreren of rechts op de pagina te plaatsen gaat dat niet werken:

                        right
            middle
left

Zal resulteren in:

right middle left

Zoals je ziet negeert de browser alle regeleinden. Meerdere spaties worden vervangen door één enkele spatie. Dat kun je omzeilen door de <PRE> en </PRE> tags. De browser gebruikt dan wél alle spaties en gebruikt een lettertype waarvan alle letters even breed zijn zoals courier.

<PRE>
                        right
            middle
left
</PRE>

See how it looks now:

                        right
            middle
left

Je zou het PRE element ook kunnenn gebruiken om eenvoudige tabellen te maken maar het TABLE element biedt daarvoor veel meer mogelijkheden. Als je een document wat als text geformatteerd is online wilt plaatsen, is het PRE element de snelste manier om dat te doen.

To the top

Superscript en subscript

Superscript en subscript wordt zo gedaan:

Voorbeeld<SUP>superscript</SUP>
Voorbeeld<SUB>subscript</SUB>

Voorbeeldsuperscript
Voorbeeldsubscript

To the top

Stylesheets gebruiken

Stylesheets (CSS) bieden veel meer mogelijkheden om tekst op te maken. HTML is alleen bedoeld om tekst in te delen en stylesheets zijn juist bedoeld voor de opmaak. Hier is een klein voorbeeld van de mogelijkheden van CSS:

<P STYLE="font-family:times, serif; font_size:14px: font-weight:bold; text-decoration:underline; color:#FF6600; margin-left:150px;">Een beginnetje met CSS</P>

Een beginnetje met CSS

To the top

Opmerkingen

Je kunt opmerkingen toevoegen aan je HTML document. Opmerking zijn niet direct zichtbaar en kunnen handig zijn om bijvoorbeeld te noteren waar je het laatst aan gewerkt hebt of waarom je iets op deze manier gedaan hebt.

<!-- zo voeg je commentaar toe -->

De browser negeert zulk commentaar. Wees je er wel van bewust dat de lezer commentaar makkelijk zichtbaar kan maken. In meeste browsers kun je "toon bron" kiezen en dan komt het commentaar ook tevoorschijn. Probeer dat maar eens met een commentaar dat ik hieronder ingevoegd heb.

To the top

Voorbeeld downloaden

Hier kun je een voorbeeld downloaden van een simpel HTML bestand om mee te experimenteren. Het bevat alle voorbeelden die hierboven besproken worden. Als je op de link klikt opent het bestand in je browser maar al je met de rechterknop klikt (ctrl-klik op een Mac) kun je het bestand downloaden:

Een kant-en-klaar voorbeeld

Als het eenmaal op je eigen computer staat, kun je het bestand in een HTML editor openen bewerken en daarna bekijken in een browser.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.