Kies een thema:

Cursus HTML

Beginner


Gevorderde


Appendix


Informatie


Referenties


Links


4 Tekst structureren


» Inhoudstafel
4.1 Paragrafen
4.2 Koppen
4.3 Witruimte
4.4 Horizontale lijnen

4.1 Paragrafen

Een paragraaf schrijven we in HTML met het element p.

<p>Dit is een paragraaf.</p>
Resultaat:
Dit is een paragraaf.

HTML schrijft onder en boven de paragraaf een nieuwe lijn. Met CSS kun je de paragraaf uitlijnen door het eigenschap text-align te gebruiken.

<p style="text-align: right">Dit is een paragraaf die rechts wordt uitgelijnd.</p>
Resultaat:
Dit is een paragraaf die rechts wordt uitgelijnd.

» Voorbeelden:


4.2 Koppen

Om een bepaalde kop te definiëren wordt er gekozen uit de elementen h1, h2, h3, h4, h5, h6. Het element h1 defineert het hoogste niveau en h6 definieert het laagste niveau.

In deze cursus wordt ook gebruik gemaakt van koppen. "Paragraven, Koppen, Witruimte, ..." zijn op deze cursus gedefineerd met het element h2, en de titel in elk hoofdstuk wordt gedefineerd met het element h1. Als je grote teksten op je website plaatst, gebruik dan altijd hier en daar een kop. Dit maakt je pagina indeling qua structuur veel duidelijker, dan wanneer je geen koppen gebruikt.

Zoals een paragraaf, wordt er door HTML automatisch een nieuwe lijn toegevoegd onder en boven een kop.


» Voorbeelden:


4.3 Witruimte

Meerdere spaties na elkaar kun je maken met het speciale teken &nbsp; (non-breaking space):

<p>Dit is een paragraaf.&nbsp;&nbsp;&nbsp;Na drie spaties gaan we weer verder...</p>
Resultaat:
Dit is een paragraaf.   Na drie spaties gaan we weer verder...

Met het element pre wordt de tekst weer gegeven zoals die in de bron van het document is genoteerd. Als er nieuwe lijnen of spaties worden genoteerd in de broncode zullen die behouden blijven en dus ook in de browser getoond worden. De inhoud die tussen de tags staan krijgt een niet-proportioneel lettertype (monospace).

<pre>NL ENG FR deur door porte auto car voiture huis home maison</pre>
Resultaat:
NL     ENG    FR
deur   door   porte
auto   car    voiture
huis   home   maison

Zonder het element pre wordt de inhoud naast elkaar weer gegeven zonder de witruimte die in de broncode is gebruikt.

Resultaat:

NL ENG FR deur door porte auto car voiture huis home maison


De browser negeert overgangen naar een nieuwe regel, die je hebt opgenomen in de bron van het document. Om een nieuwe regel te forceren gebruik je het br element.  Zonder gebruik te maken van het br element zal een paragraaf zolang doorgaan tot de maximale breedte ervan behaald is en weer verder gaan op de volgende regel.

Dit element heeft geen inhoud dus heeft geen eindtag nodig zoals de meeste elementen. In theorie zou dit betekenen dat dit in XHTML als <br></br> geschreven moet worden maar in XHTML veréénvoudigen we dit naar <br />.

<p>Deze paragraaf zal blijven doorgaan tot het br element <br />wordt gebruikt.</p>
Resultaat:
Deze paragraaf zal blijven doorgaan tot het br element
wordt gebruikt.

» Voorbeelden:


4.4 Horizontale lijnen

Een horizontale lijn plaats je met het hr element. Dit element heeft geen eind tag!
<hr />

Deze horizontale lijn wordt standaard over de maximale horizontale breedte geplaatst die mogelijk is. Met de width eigenschap wordt de grootte van de lijn aangepast.

<hr style="width: 50%" />

De text-align eigenschap wordt gebruikt om de horizontale lijn uit te lijnen. Let wel op dat standaard het element in het midden wordt uigelijnd! Onderstaande code lijnt een horzintale lijn links uit.

<hr style="text-align: left" />

De height eigenschap zorgt ervoor dat de dikte van de horizontale lijn wordt aangepast.

<hr style="height: 10px" />

Om een horizontale lijn een bepaalde kleur mee te geven, gebruik je de background-color eigenschap.

<hr style="background-color: red" />

» Voorbeelden:

« Elementen en attributen    Tekst opmaak »