Structureren van tekst
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde Introductie, Elementen, Witruimte, Paragrafen, Inspringen, Centreren, Kolommen, Adresgegevens, Regel afbreken, Vaste opmaak, Koppen en Horizontale lijnen.

Introductie

Tekst in een HTML-document kan op verschillende manieren gestructureerd worden. De meest algemene vorm is het indelen van tekst in paragrafen. Hiervoor kan gebruik gemaakt worden van het P element. Daarnaast zijn er elementen, welke gebruikt kunnen worden, als een specifieke betekenis van een blok tekst benadrukt moet worden. Het BLOCKQUOTE element is bedoeld voor tekst welke wordt geciteerd en geeft deze ingesprongen weer. In het ADDRESS kunnen adresgegevens van de auteur worden opgenomen, welke cursief worden weergegeven.
Soms hebben elementen meer betrekking op de weergave van blokken tekst. Dat geldt bijvoorbeeld voor het CENTER element, waarmee een deel van de inhoud van een document gecentreerd kan worden. Een ander voorbeeld is het Netscape specifieke MULTICOL element, dat gebruikt kan worden voor het weergeven van tekst in meerdere kolommen naast elkaar.
Voor de tekst ingesloten door de genoemde elementen wordt bij de weergave door de browser automatisch aan het einde van een regel een overgang naar een volgende regel ingevoegd. Overgangen naar een nieuwe regel in de bron van het document worden evenwel genegeerd. De elementen BR, NOBR en WBR kunnen gebruikt worden om controle te krijgen op het afbreken door de browser. Het PRE element kan toegepast worden, wanneer tekst door de browser moet worden weergegeven in de opmaak, zoals deze staat in de bron van het document.

Aan het begin van een document, of bijvoorbeeld tussen de verschillende paragrafen, kunnen koppen geplaatst worden met het Hx element. Dit element is beschikbaar in zes verschillende groottes (H1 .. H6).

Als scheiding tussen blokken tekst en/of andere inhoud van een document kunnen horizontale lijnen geplaatst worden met het HR element.

Bij de elementen P, BLOCKQUOTE, ADDRESS, CENTER, MULTICOL, Hx en HR gaat het om zogenaamde elementen op blokniveau. Deze elementen worden altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en soms ook door een blanco regel. Voor de opmaak van stukjes tekst binnen een element op blokniveau zijn inline elementen beschikbaar. Deze worden beschreven in het onderdeel Weergave inline tekst. Achtergrondinformatie over de indeling van elementen en de wijze waarop ze hun plek vinden in het venster van de browser, wordt gegeven in het onderdeel CSS en elementen.

De elementen DEL en INS kunnen gebruikt worden om revisiegegevens van een document vast te leggen. Het INS element bevat de inhoud welke is toegevoegd, het DEL element inhoud welke is verwijderd. De browser moet deze inhoud op een passende manier weergegeven, bij het INS element bijvoorbeeld onderstreept, bij het DEL element bijvoorbeeld doorgestreept. DEL en INS kunnen niet alleen als element op blokniveau gebruikt worden, maar ook als inline element.

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

Elementen

Voor het structureren van tekst zijn de volgende elementen beschikbaar:

ADDRESS
BLOCKQUOTE
BR
CENTER

DEL
HR
Hx
INS

MULTICOL
NOBR
P
PRE

WBR

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.

Witruimte

Een blok tekst wordt door de browser standaard aan de linkerzijde van bijvoorbeeld een venster of een frame uitgelijnd. Als de tekst langer is dan op één regel past, wordt aan de rechterzijde automatisch een overgang naar een nieuwe regel toegevoegd. De witruimte die je opneemt in de bron van het HTML-document wordt niet zomaar door de browser weergegeven. Als voorbeeld een document met de volgende opbouw:

Overgangen naar een nieuwe regel in de bron van het document worden genegeerd en meerdere spaties achter elkaar worden samengevoegd tot één spatie.

Dit wordt door de browser als volgt weergegeven:

Overgangen naar een nieuwe regel in de bron van het document worden genegeerd en meerdere spaties achter elkaar worden samengevoegd tot één spatie.

Wanneer je de overgang naar een nieuwe regel wilt forceren, dan moet je gebruik maken van het BR element (zie Regel afbreken). Als je de tekst wilt weergegeven zoals in de bron van het document, dan kun je het PRE element gebruiken (zie Vaste opmaak). Meerdere spaties achter elkaar kun je maken met het speciale teken " " (non-breaking space), zoals in het volgende voorbeeld.

Meerdere     spaties maak je ...

Meerdere spaties maak je met het non-breaking space teken.

Paragrafen

Voor gewone tekst in een document wordt het P element gebruikt. De door het P element ingesloten tekst wordt in het algemeen voorafgegaan en gevolgd door een witruimte, vaak ter grootte van ongeveer één blanco regel. Indien het element gevolgd wordt door een tweede P element, of een ander element op blokniveau (bijvoorbeeld BLOCKQUOTE, PRE en Hx), dan schuiven de witruimtes in elkaar en resteert tussen de blokken tekst slechts één blanco regel.

<P>Dit is de eerste paragraaf</P><P>Dit is de tweede paragraaf</P>

Dit is de eerste paragraaf

Dit is de tweede paragraaf

Met het ALIGN attribuut kun je bepalen hoe de ingesloten tekst moet worden uitgelijnd.

<P ALIGN="right">Deze tekst ... uitgelijnd.</P>

Deze tekst is aan de rechterzijde van het venster of frame uitgelijnd.

Voor het P element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het P element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de opmaak van het blok tekst bepaald: de uitlijning met de text-align eigenschap, de regelhoogte met de line-height eigenschap, het lettertype met de font-family eigenschap, de lettergrootte met de font-size eigenschap en de kleur van de tekst met de color eigenschap.

<P STYLE="text-align: justify; line-height: 15pt; font-family: Arial, sans-serif; font-size: 10pt; color: #FF0000">De opmaak ... beschreven.</P>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

Omdat nog maar een beperkt aantal browsers Cascading Style Sheets ondersteunt, is het aan te raden stijlen voorlopig alleen te gebruiken als aanvulling op de mogelijkheden die HTML zelf biedt.

Inspringen

In HTML zijn er geen elementen, welke er specifiek voor bedoeld zijn om tekst te laten inspringen. Toch zijn er wel mogelijkheden om het gewenste effect te bereiken.

Wanneer je alleen de eerste regel van een paragraaf een stukje wilt laten inspringen, dan kun je gebruik maken van het speciale teken " " (non-breaking space). Je plaatst dit speciale teken eenvoudig een aantal keren aan het begin van de paragraaf.

<P>     Doordat ... stukje in.</P>

Doordat gebruik gemaakt is van " " begint de eerste regel van deze paragraaf niet langs de linker kantlijn, maar springt hij een stukje in.

Het inspringen van de eerste regel van een paragraaf kun je ook bereiken met behulp van Cascading Style Sheets. Je gebruikt daarvoor de text-indent eigenschap. Wanneer het inspringen slechts op één paragraaf betrekking heeft, kun je met het STYLE attribuut een inline stijl definiëren:

<P STYLE="text-indent: 15px"> </P>

Wanneer je de eerste regel van elke paragraaf wilt laten inspringen, kun je de stijl beter in een stijlblok of extern stijlblad opnemen:

P { text-indent: 15px }

Het BLOCKQUOTE element is er voor bedoeld om aan te geven, dat het bij de ingesloten tekst gaat om een citaat. Vrijwel alle browsers doen dit door de tekst zowel links als rechts te laten inspringen. Vanwege deze manier van weergeven wordt het BLOCKQUOTE element in de praktijk regelmatig gebruikt, als een blok tekst moet inspringen.

<BLOCKQUOTE>Dit blok ... rechts.</BLOCKQUOTE>

Dit blok tekst is ingesloten door het BLOCKQUOTE element en springt daardoor als geheel in, meestal zowel links als rechts.

Op dezelfde wijze als bij paragrafen kun je de opmaak van de tekst bepalen, door het koppelen van een stijl aan het BLOCKQUOTE element.

In plaats van oneigenlijk gebruik te maken van het BLOCKQUOTE element, kun je beter een tabel toepassen. Je kunt dan zelf bepalen aan welke kant en hoeveel er wordt ingesprongen. Wil je bijvoorbeeld alleen aan de linkerkant inspringen, dan maak je een tabel met één rij en twee kolommen. Het WIDTH attribuut van het TD element waarmee je de eerste cel definieert, bepaalt de mate van inspringen. De tekst plaats je in de tweede cel.

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"> <TR> <TD WIDTH="25"></TD> <TD VALIGN="top">In dit ... eerste cel.</BR></TD> </TR> </TABLE>

In dit voorbeeld wordt een tabel gebruikt om een blok tekst te laten inspringen. De mate van inspringen wordt bepaald door de breedte van de eerste cel.

Centreren

De inhoud van een HTML-document kan op verschillende manieren in het venster gecentreerd worden. Wanneer het om tekst gaat welke deel uitmaakt van het P element, kan gebruik gemaakt worden van het ALIGN attribuut met de waarde "center".

<P ALIGN="center">Deze tekst is gecentreerd en wordt<BR> geplaatst over twee regels.</P>

Deze tekst is gecentreerd en wordt
geplaatst over twee regels.

Voor het centreren kan ook gebruik gemaakt worden van het CENTER element.

<CENTER>Deze tekst is gecentreerd.</CENTER>

Deze tekst is gecentreerd.

Het CENTER element wordt behalve voor tekst ook vaak gebruik voor andere inhoud. Bijvoorbeeld om een afbeelding te centreren. In HTML 4.0 heeft het CENTER element het label "deprecated" (afgekeurd) gekregen en in plaats ervan wordt aanbevolen het DIV element met het attribuut ALIGN="center" te gebruiken.

<DIV ALIGN="center">Deze tekst is gecentreerd.</DIV>

Deze tekst is gecentreerd.

Overigens heeft ook het ALIGN attribuut van de elementen P en DIV het label "deprecated" gekregen. De achtergrond hiervan is, dat de opmaak van een document in de toekomst zoveel mogelijk geregeld moet worden met behulp van Cascading Style Sheets. Ter illustratie wordt in het volgende voorbeeld tekst gecentreerd met het STYLE attribuut en de text-align eigenschap.

<P STYLE="text-align: center">Als de ... gecentreerd.</P>

Op dit moment worden stijlen nog slechts door een enkele browser ondersteunt en lang niet altijd correct. Het is daarom op dit moment verstandig gewoon gebruik te maken van de elementen P en DIV met het ALIGN attribuut.

De elementen CENTER en DIV worden in het algemeen voorafgegaan en gevolgd door de overgang naar een nieuwe regel, maar een blanco regel, zoals bij het P element, wordt echter niet toegevoegd.

Kolommen

Tabellen worden veel gebruikt bij het structureren van de inhoud van HTML-documenten. Je kunt tabellen bijvoorbeeld gebruiken als je tekst in kolommen wilt plaatsen. In het volgende voorbeeld is een eenvoudige tabel gebruikt met drie kolommen, waarvan de middelste bedoeld is om de breedte tussen de tekstkolommen vast te leggen.

<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"> <TR> <TD WIDTH="270" VALIGN="top">In dit ... ondersteunen.</BR></TD> <TD WIDTH="15"></TD> <TD WIDTH="270" VALIGN="top">De tekst ... houden.</BR></TD> </TR> </TABLE>

In dit voorbeeld wordt de tekst met behulp van een tabel in twee kolommen geplaatst. Voordeel van deze methode is dat de meeste browsers tegenwoordig tabellen ondersteunen.

De tekst wordt niet automatisch over de kolommen verdeelt. Als je kolommen van ongeveer gelijke lengte wilt, moet je de verdeling, elke keer als je de inhoud aanpast, zelf in de gaten houden.

Alleen door Netscape Navigator 3.0 en hoger wordt het MULTICOL element ondersteund. Je kunt het gebruiken als je de inhoud van een document over meerdere kolommen wilt verdelen. Met het COLS attribuut bepaal je het aantal kolommen, het GUTTER attribuut specificeert de ruimte tussen de kolommen in pixels. Het WIDTH attribuut kan gebruikt worden om de totale breedte van de kolommen en de tussenruimte vast te leggen.

<MULTICOL COLS="2" GUTTER="15">In dit ... weergegeven.</MULTICOL>

Bekijk in een nieuw venster hoe de browser dit weergeeft.

In vergelijking met het het werken met tabellen vraagt de methode met het MULTICOL element minder HTML-code. Een voordeel is verder dat de tekst automatisch over de kolommen wordt verdeeld. Groot nadeel is evenwel dat het MULTICOL element browser-specifiek is. Wanneer je wilt dat je HTML-documenten aan een HTML-specificatie als HTML 4.0 voldoen, kun je er dus beter maar geen gebruik van maken.

Adresgegevens

Het ADDRESS element wordt gebruikt om aan het begin of het eind van een document een auteursnaam, een (e-mail of website) adres, of een onderschrift weer te geven. De ingesloten tekst wordt in het algemeen cursief weergegeven.

<ADDRESS>Handleiding HTML<BR> E-mail: html@dsdelft.nl</ADDRESS>

De browser geeft dit weer als:

Handleiding HTML
E-mail: html@dsdelft.nl

Op dezelfde wijze als bij paragrafen kun je de opmaak van de adresgegevens bepalen, door het koppelen van een stijl aan het ADDRESS element.

Regel afbreken

Wanneer je in een blok tekst ingesloten door bijvoorbeeld de elementen P, BLOCKQUOTE en ADDRESS een overgang naar een nieuwe regel wilt forceren, dan moet je gebruik maken van het BR element.

<P>Deze tekst is ingesloten door het P element. Met het BR element<BR>ga je naar een nieuwe regel. Met twee BR elementen<BR><BR>krijg je een blanco regel tussen de tekst.</P>

De browser geeft dit zo weer:

Deze tekst is ingesloten door het P element. Met het BR element
ga je naar een nieuwe regel. Met twee BR elementen

krijg je een blanco regel tussen de tekst.

Aan het BR element kun je het CLEAR attribuut toevoegen. Je geeft daarmee aan dat de tekst na het BR element pas geplaatst moet worden op de eerstvolgende regel met een vrije kantlijn aan de linkerzijde, de rechterzijde of aan beide zijden. Het gebruik van het CLEAR attribuut is vooral handig bij elementen, welke met het ALIGN attribuut zwevend zijn gemaakt, bijvoorbeeld afbeeldingen, tabellen of inline frames.

Soms wil je voorkomen dat er op een bepaalde plaats een overgang is naar een nieuwe regel. Je zou dan gebruik kunnen maken van de elementen NOBR en WBR. De door het NOBR element ingesloten tekst mag door de browser niet worden afgebroken en moet dus op één regel geplaatst worden. Het WBR element zet je binnen het NOBR element, op een plaats waar wel afgebroken mag worden.
De elementen NOBR en WBR maken echter geen deel uit van een HTML-specificatie. Wanneer je wilt dat je documenten geen foutmeldingen opleveren bij de validatie van de HTML-code, dan kun je deze elementen dus beter niet toepassen.

Een goed alternatief voor de elementen NOBR en WBR, is het gebruik maken van het speciale teken   (non-breaking space). Plaats je dit speciale teken zonder verdere spaties tussen twee woorden, dan worden deze woorden samen als één woord gezien en wordt ertussen niet afgebroken.

In het volgende code wordt het NOBR element gebruikt om te voorkomen dat binnen een hyperlink wordt afgebroken:

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

Hetzelfde effect wordt bereikt met  :

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

Wanneer je toch van het NOBR element gebruik wilt maken, is het verstandig dat alleen te doen voor korte stukken tekst. Daarmee voorkom je, dat de bezoeker genoodzaakt wordt de horizontale schuifbalk te moeten gebruiken om alle tekst te kunnen lezen.

Vaste opmaak

Met behulp van het PRE element kan tekst in een vaste opmaak worden opgenomen, zonder dat de browser daar iets aan mag veranderen. Voor de door het PRE element ingesloten tekst gebruikt de browser een lettertype met een vaste letterafstand. Spaties en een overgang naar een nieuwe regel worden weergegeven, zoals deze in de bron van het document zijn opgenomen. Het PRE element kan daarmee ook gebruikt worden om meerdere blanco regels achter elkaar vast te leggen.

In het volgende voorbeeld wordt een blok tekst in tabelvorm ingesloten door het PRE element. In de bron van het document ziet het er zo uit:

<PRE> kleur 1 zwart 25 kleur 2 rood 40 </PRE>

De browser geeft dit weer met:

kleur 1        zwart        25
kleur 2        rood         40

Als je het PRE element gebruikt, moet je ervoor zorgen dat je het aantal karakters op een regel beperkt houdt. Doe je dat niet, dan loopt de tekst het venster uit en moet de lezer horizontaal gaan scrollen.

Voor het PRE element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het PRE element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de extra opmaak van het blok tekst bepaald: de lettergrootte met de font-size eigenschap, het lettertype met de font-family eigenschap en de kleur van de tekst met de color eigenschap.

<PRE STYLE="font-size: 12pt; font-family: sans-serif; color: #FF0000"> kleur 1 zwart 25 kleur 2 rood 40 </PRE>

Koppen

Het Hx element wordt gebruikt om een kop (header) te definiëren, welke bijvoorbeeld aan het begin van een document, of tussen de paragrafen geplaatst kan worden. Er zijn zes verschillende niveaus voor de koppen. Het niveau wordt gekozen door voor de "x" in Hx een getal in te vullen tussen 1 en 6.

<Hx>Dit is Header Hx</Hx>

Door voor x achtereenvolgens 1, 2, 3, 4, 5 en 6 in te vullen zie je:

Dit is header H1

Dit is header H2

Dit is header H3

Dit is header H4

Dit is header H5

Dit is header H6

Het ALIGN attribuut kan gebruikt worden om de horizontale uitlijning van de kop te specificeren.

<H3 ALIGN="center">Deze kop is gecentreerd</H3>

Deze kop is gecentreerd

Voor het Hx element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. In het volgende voorbeeld wordt een inline stijl gebruikt, door aan het Hx element het STYLE attribuut toe te voegen. Met verschillende stijleigenschappen wordt de opmaak van de kop bepaald: het lettertype met de font-family eigenschap, de kleur van de tekst met de color eigenschap, de achtergrondkleur met de background-color eigenschap en de horizontale uitlijning met de text-align eigenschap.

<H2 STYLE="font-size: 24pt; font-family: sans-serif; color: #FFFFFF; background: #336699; text-align: center">Handleiding HTML</H2>

Omdat nog maar een beperkt aantal browsers Cascading Style Sheets ondersteunt, is het aan te raden stijlen voorlopig alleen te gebruiken als aanvulling op de mogelijkheden die HTML zelf biedt.

Horizontale lijnen

Horizontale lijnen maak je met het HR element.

<HR>

Standaard wordt de lijn over de gehele beschikbare breedte geplaatst. Met het WIDTH attribuut kun je zelf de breedte bepalen in pixels, of als percentage van de beschikbare breedte. Als de lijn niet de volledige breedte heeft, kun je met het ALIGN attribuut de horizontale uitlijning vastleggen.

<HR WIDTH="50%" ALIGN="center">

De dikte van de lijn bepaal je met het SIZE attribuut. Het NOSHADE attribuut geeft aan dat de lijn niet in 3-D, maar vlak moet worden weergegeven.

<HR SIZE="5" NOSHADE>

Met het door Internet Explorer ondersteunde en niet tot een HTML-specificatie behorende COLOR attribuut kan de kleur van de lijn worden vastgelegd.

Voor het HR element kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. Veel stijleigenschappen worden echter niet of niet correct door de verschillende browsers ondersteund.

Inhoud Handleiding HTML Index Inhoud Structureren van tekst