Het schrijven van teksten in HTML voor beginners

© Paul Cooijmans - gecertificeerd computerprogrammeur, gecertificeerd webontwikkelaar, CCNA

Inleiding

HTML - HyperText Markup Language - is de computertaal waarin webpagina's geschreven worden. Een HTML-bestand kan in elke browser bekeken worden en is dus platformonafhankelijk, in tegenstelling tot een tekstverwerkerbestand. Ook is een HTML-bestand zeer veel lichter (in bestandsgrootte) dan een tekstverwerkerbestand, waardoor het sneller per e-post te verzenden is.

Hierna wordt uitgelegd hoe men een tekst eenvoudig in HTML kan zetten. Alleen de meest elementaire zaken van HTML worden behandeld. Voor verdere studie kan men het beste een boek of webtutorial nemen. Voor het schrijven van teksten met eenvoudige opmaak in HTML zijn deze elementaire zaken echter voldoende.

Het sjabloon

Maak eerst een sjabloon voor alle toekomstige documenten. Start hiervoor een teksteditor, zoals Kladblok. Typ (of kopieer en plak) het volgende:

<html>
<head>
<title></title>
</head>

<body>



</body>
</html>

Sluit af met een lege regel (Enter), hier onzichtbaar natuurlijk. Sla het bestand op onder de naam sjabloon.html . Ook toegestaan is sjabloon.htm ; in het verleden mochten extensies maar uit drie letters bestaan, vandaar de gewoonte om .htm in plaats van .html te gebruiken.

Let op dat bij het opslaan in het vakje "opslaan als type:" de optie "alle bestanden" gekozen moet worden, anders wordt aan de bestandsnaam automatisch .txt toegevoegd (door Kladblok).

Een eerste tekst

Schrijf een tekst eerst in je gebruikelijke tekstverwerker. Voordeel daarvan is dat je de automatische spelcorrectie ter beschikking hebt. Houd de volgende punten in gedachten:

1 Al wat je schrijft is óf een "kop" (titel) óf een paragraaf.

2 Paragrafen worden gescheiden door een regel wit.

3 Een paragraaf bestaat óf uit doorlopende tekst óf uit een verticale opsomming, zoals:

Jan
Piet
Klaas
Enz.

4 Als een paragraaf uit doorlopende tekst bestaat begin je niet handmatig een nieuwe regel binnen die paragraaf; dit is zinloos omdat er bij het bekijken van het uiteindelijke bestand altijd automatische regelomloop plaats vindt aan het eind van elke regel ("word wrap"). En de precieze plaatsen waar regelomloop plaats zal vinden zijn onvoorspelbaar, want afhankelijk van de schermresolutie en browserinstellingen van de lezer, en ook van de wijze waarop de tekst op de uiteindelijke webpagina tussen de navigatie-elementen geplaatst wordt door de webmeester. Als zo'n regelomloop toevallig samenvalt met een handmatige nieuwe regel, zal het verschil niet waarneembaar zijn.

Als de tekst klaar is, selecteer haar dan (bijvoorbeeld met Ctrl-a of met de muis) en kopieer haar met Ctrl-c.

Open het bestand sjabloon.html in de teksteditor (Kladblok) en sla het bestand opnieuw op onder een andere naam naar keuze, bijvoorbeeld tekst1.html. Gebruik geen spaties in bestandsnamen.

Plak de tekst met Ctrl-v tussen de <body> en </body> tags (die dingen heten tags). Al wat daartussen staat vormt de zichtbare inhoud van de pagina. Je krijgt dan iets als dit:

<html>
<head>
<title></title>
</head>

<body>

Mijn parkiet

Ik heb een parkiet genaamd Pietje. Hij kan goed vliegen en spelen. Overdag mag hij uit zijn kooi. Hij is blauwwit. Hij eet en drinkt uit bakjes. Hij heeft veel speelgoed:

Pietje's speelgoed

Een spiegeltje
Een belletje
Nog een belletje
Nog een spiegeltje
En nog veel meer

Tot zover dit artikel over de parkiet Pietje.

</body>
</html>

Kopieer de titel, hier "Mijn parkiet", en plak die tussen de <title> en </title> tags. Wat daartussen staat is niet zichtbaar in de pagina, maar wordt getoond in de smalle blauwe richel helemaal bovenaan het browservenster. Ook gebruiken zoekmachines deze titel voor het indexeren van de pagina.

Sla opnieuw op. Zoek het bestand op en open het door dubbelklikken; het wordt dan getoond in de standaard browser. Het zal blijken dat alle tekst nu achter elkaar doorloopt. Er is namelijk nog wat HTML-code nodig voor het vormgeven van de tekst.

Zet de titel (die tussen de body tags staat) tussen <h1> en </h1>, dus zo (de h van heading, headline):

<h1>Mijn parkiet</h1>

Hij wordt dan door de browser groot, vet en met witruimte eromheen weergegeven. Een subkop die wat kleiner moet zijn kan met <h2> en </h2> gemaakt worden:

<h2>Pietje's speelgoed</h2>

Voor nog kleinere koppen zijn <h3> tot en met <h5> beschikbaar.

Een paragraaf wordt met <p> en </p> gemaakt (de p van paragraph):

<p>Ik heb een parkiet genaamd Pietje. Hij kan goed vliegen en spelen. Overdag mag hij uit zijn kooi. Hij is blauwwit. Hij eet en drinkt uit bakjes. Hij heeft veel speelgoed:</p>

De browser zorgt voor witruimte eromheen en regelomloop.

De verticale opsomming gaat als volgt:

<p>Een spiegeltje<br>
Een belletje<br>
Nog een belletje<br>
Nog een spiegeltje<br>
En nog veel meer</p>

De <br> tag (break) zorgt dat een nieuwe regel begonnen wordt. Om tijd te sparen kun je hem eenmaal typen, en dan kopiëren en plakken waar nodig. Gewoon op Enter duwen produceert dus geen nieuwe regel in HTML.

In totaal hebben we nu:

<html>
<head>
<title>Mijn parkiet</title>
</head>

<body>

<h1>Mijn parkiet</h1>

<p>Ik heb een parkiet genaamd Pietje. Hij kan goed vliegen en spelen. Overdag mag hij uit zijn kooi. Hij is blauwwit. Hij eet en drinkt uit bakjes. Hij heeft veel speelgoed:</p>

<h2>Pietje's speelgoed</h2>

<p>Een spiegeltje<br>
Een belletje<br>
Nog een belletje<br>
Nog een spiegeltje<br>
En nog veel meer</p>

<p>Tot zover dit artikel over de parkiet Pietje.</p>

</body>
</html>

Sla weer op en bekijk de pagina in een browser. De tekst zal er nu normaal uitzien.

Vet, cursief en hyperlinks

Om een stukje tekst vet te maken dienen de <b> en </b> tags (de b van bold):

<b>Dit wordt vet weergegeven</b>

Cursief (schuin) gaat met <i> en </i> (de i van italic):

<i>En dit cursief</i>

Een hyperlink maak je met <a href=" "> en </a>, waarbij tussen de aanhalingstekens het doel van de link geplaatst wordt (de a van anchor, href staat voor hyper reference):

<a href="http://www.paulcooijmans.com/">Naar de webpagina van Paul Cooijmans</a>

Als het doel een bestand is dat in dezelfde map staat als de pagina zelf, hoeft alleen de bestandsnaam tussen de aanhalingstekens geplaatst te worden:

<a href="dieren.html">Lees over mijn andere huisdieren</a>

Een hyperlink wordt door de browser standaard blauw en onderstreept weergegeven.

Speciale tekens

Omdat de tekens < en > door de browser geïnterpreteerd worden (en dus niet weergegeven), zijn speciale codes nodig om die tekens desgewenst toch te gebruiken in de tekst zelf, namelijk respectievelijk &lt; en &gt; (less than en greater than).

En omdat het teken & dus ook geïnterpreteerd wordt, dient ook dat, als men het toch wil weergeven, met een code aangeduid te worden, namelijk &amp; (van ampersand).

Verder is het goed te weten dat in HTML opeenvolgende spaties genegeerd worden, en als één spatie weergegeven. Iets uitlijnen met spaties kan dus niet. Echter, er is een code die indien gewenst toch meerdere spaties mogelijk maakt, namelijk &nbsp; (no-break space). Bijvoorbeeld:

&nbsp; &nbsp; &nbsp; &nbsp;

Dit geeft zeven spaties (waarvan er drie gewone spaties zijn, die tussen de harde spaties in staan).

Tot slot

Als men zich verder in HTML wil verdiepen is een goede webtutorial die op http://www.w3schools.com/. Boeken over HTML zijn overal te koop.