In dit hoofdstuk leren we een aantal elementen die je kan gebruiken in de inhoud van je pagina (alles wat in het BODY element staat dus). Aangezien het natuurlijk helemaal aan jou is hoe jouw website eruit ziet en wat erin komt te staan, moet je natuurlijk zelf weten hoe je jouw pagina opbouwt. Natuurlijk moet de pagina wel voldoen aan de document structuur die in het vorige hoofdstuk is uitgelegd en de regels van de elementen die in dit hoofdstuk worden besproken. De elementen die in dit hoofdstuk worden besproken worden gebruikt voor:

• koppen;
• alinea's;
• nadruk leggen op bepaalde tekst;
• afkortingen;
• citaten;
• en overigen tekst elementen.

Koppen

Zoals in elke tekst kan je op webpagina's ook koppen gebruiken. In HTML zijn er 6 verschillende soorten koppen die elk hun eigen HTML element hebben: H1, H2, H3, H4, H5 en H6. Het verschil tussen deze 6 elementen is hoe belangrijk de kop gevonden wordt. Zo wordt H1 als belangrijkste kop gezien. H2 is weer minder belangrijk dan H1, H3 is op zijn beurt weer minder belangrijk dan H2, etc.

Koppen kunnen een tekst snel overzichtelijk maken en zijn daarom erg handig voor de bezoeker bij lange teksten. Modern Markup gebruikt ze ook! De tekst "Tekststructuur" is een voorbeeld van zo'n kop. Een kop in HTML heeft dus dezelfde functie als dat een kop in een tekst van bijv. een magazine of een schoolboek heeft en horen een beknopte omschrijving te geven van de tekst die de kop introduceert.

Bijvoorbeeld, gebruik je de kop "Ridders" als H1 op jouw pagina over ridders, dan kan je bijvoorbeeld die pagina opsplitsen in delen:

• het nut van ridders;
• de wapens;
• en toernooien.

Elk van deze 3 onderwerpen hebben te maken over ridders en kunnen dus als secundaire koppen (H2 dus) van jouw pagina over ridders gebruikt worden. Zo kan je d.m.v. koppen een boom maken van de pagina maken. Als je een boom van deze pagina zou maken, dan zou die er als volgt uitzien:

Alinea's

Het P element geeft een alinea aan. Net zoals koppen die in de vorige paragraaf werden besproken heeft een alinea in HTML precies dezelfde functie als dat het heeft in andere media zoals een magazine. Het leest namelijk een stuk makkelijker als een tekst in alinea's is verdeeld, zoals je uit eigen ervaring waarschijnlijk kan bevestigen.

Als we de HTML code van deze alinea bekijken, ziet die er als volgt uit:

<p>Als we de HTML code van deze alinea bekijken, ziet die er als volgt uit:</p>

Als we de krachten van de koppen en alinea's bundelen, en je wilt een pagina over jezelf schrijven, dan kan die er zo uitzien:

<h1>Autobiografie van Jan Jansen</h1>
<p>Op deze pagina kunt u een beknopte autobiografie van mij, Jan Jansen,
vinden. Veel lees plezier enzo!</p>

<h2>Geboorte</h2>
<p>Ik ben geboren in Rotterdam op 8 september 1954. Bla bla bla etc.</p>

<h2>Het heden</h2>
<p>Op dit moment woon en werk ik nog steeds in Rotterdam, etc.</p>

<h3>Mijn werk</h3>
<p>Een alinea over mijn werk.</p>

<h3>Mijn hobby's</h3>
<p>…</p>

<!-- En ga zo maar door… -->

De bovenstaande voorbeelden zijn, zoals je ziet, zonder de standaard document structuur die we in het vorige hoofdstuk hebben geleerd. Die is er namelijk uit gehaald om de voorbeelden wat overzichtelijker te maken.

Ook is het misschien soms handig als je een regel kan laten ophouden op een bepaald punt om de tekst op de volgende regel verder te laten gaan. Simpelweg op Enter drukken heeft geen zin aangezien browsers dat gewoon zien als een spatie. Daarom is er een element ontworpen die de regel laat ophouden en verder laat gaan op de volgende regel: het BR element. Hier volgt een voorbeeld:

<p>Dit is een<br>paragraaf.</p>

Het bovenstaande voorbeeld ziet er als volgt uit:

Dit is een
paragraaf.

Zoals je ziet heeft het BR element alleen een start tag. Dit is één van de uitzonderingen waar we het over hadden in het hoofdstuk over de HTML syntax. Ook moet erbij gezegd worden dat je het BR element nooit teveel moet gebruiken, en zeker niet meerdere keren achter elkaar. Hier volgt een voorbeeld van hoe je het BR element niet moet gebruiken:

Tekst tekst tekst
<br><br>
Nog meer tekst

Het is duidelijk dat je de twee regels tekst beter in twee P elementen kan doen aangezien je hetzelfde effect krijgt en in HTML hoor je alinea's gewoon d.m.v. P elementen aan te geven. Doe je dezelfde tekst in twee Ps, dan ziet dat er als volgt uit:

<p>Tekst tekst tekst</p>
<p>Nog meer tekst</p>

Nadruk leggen op bepaalde tekst

Soms heb je een paar woorden, of een hele zin, die erg belangrijk is in je tekst en daarom extra wil laten opvallen. Hiervoor zijn twee elementen in HTML:

1. het EM element;
2. en het STRONG element.

Het EM element is bedoeld om nadruk op een bepaald deel van je tekst te geven waardoor de betekenis van het stuk tekst verandert. Neem bijvoorbeeld deze zin:

<p><em>Hij</em> is 50 jaar oud.</p>

Als het EM element er niet was geweest, dan had de zin gewoon aangegeven dat de persoon waar "hij" naar verwijst 50 jaar is. Door het EM element wordt het juist duidelijk gemaakt dat het persoon waarnaar verwezen wordt 50 jaar oud is en niet iemand anders.

Het STRONG element is bedoeld om extra nadruk te geven op een bepaald deel van je tekst waardoor het stuk tekst belangrijker wordt dan de tekst er omheen, zoals het voorbeeld hieronder laat zien dat het woord "fout" belangrijker is dan de foutmelding zelf. Dit komt omdat dat wordt aangeeft dat er iets aan de hand is. De foutmelding geeft aan wat er mis is, maar dat is pas relevant nadat je weet dat er iets aan de hand is.

<p><strong>Fout:</strong> U bent vergeten <em>uw naam</em> in het formulier in te vullen.</p>

Het bovenstaande voorbeeld ziet er als volgt uit als je de tekst zou opslaan in een HTML document:

Fout: U bent vergeten uw naam in het formulier in te vullen.

Indien je deze pagina met een HTML browser zoals Internet Explorer, Firefox of Opera bekijkt, dan zal je zien dat het STRONG element dikgedrukt is. "uw naam" ziet er vervolgens schuingedrukt uit. Als je al eerder met HTML in aanraking bent gekomen, dan ken je misschien de I en B elementen. Deze zien er in visuele browser hetzelfde uit als wanneer je de EM en STRONG elementen gebruikt. Maar om even te herhalen wat in elk hoofdstuk al is benadrukt: HTML gebruik je niet voor de opmaak van je pagina's, daarvoor gebruiken we CSS. Het verschil tussen de I & B en EM & STRONG elementen is dat I en B alleen de tekst schuin- of dikgedrukt doen maken. EM en STRONG hebben echt een functie voor de inhoud (namelijk nadruk geven op een bepaald stuk tekst). HTML is immers alleen voor de inhoud bedoelt, niet voor de presentatie. Dat ze door de populaire visuele browsers als schuin- of dikgedrukt worden afgedrukt is niet belangrijk. Het gaat er dus om dat je EM en STRONG alleen mag gebruiken als je een nadruk wilt leggen op iets en dus niet om de tekst schuin- of dikgedrukt te maken. I en B horen dus niet gebruikt te worden aangezien die alleen maar de tekst opmaken. Daarvoor hoort CSS gebruikt te worden.

Afkortingen

Als je de tekst voor je website aan het schrijven bent, kom je soms een woord tegen dat een afkorting is en niet in een normaal woordenboek staat. Een voorbeeld hiervan is HTML. Dit soort afkortingen kan je aangeven met twee elementen:

1. het ABBR element;
2. en het ACRONYM element.

Het ABBR element wordt gebruikt voor afkortingen terwijl het ACRONYM element alleen wordt gebruikt voor acroniemen. Waar de afkorting of acroniem voor staat wordt altijd aangegeven d.m.v. het title attribuut. Er moet wel benadrukt worden dat ABBR niet wordt ondersteund door Internet Explorer 6.0 of lager. Een voorbeeld:

<acronym title="Museum of Fine Arts">MFA</acronym>
<abbr title="Massachusetts Avenue">Mass. Ave.</abbr>

Citaten

Soms heeft iemand iets heel interessants gezegd en wil je dat citeren op jouw website. Hiervoor gebruiken we wederom twee elementen:

1. het CITE element;
2. en het Q element.

Het CITE element wordt gebruikt om aan te geven wie iets heeft gezegd, of waar het staat geschreven. Het Q element is bedoeld om het citaat in te doen. Dus als je één van Nederlands meest bekende voetballer, Johan Cruijff, wilt citeren, doe je dat als volgt:

<p>Zoals <cite>Johan Cruijff</cite> ooit zei:
<q>Om te winnen moet je 1 goal meer scoren dan je tegenstander.</q></p>

Is het citaat wat langer? Dan gebruik je i.p.v. het Q element het BLOCKQUOTE element. Dit element wordt alleen gebruikt voor citaten die één of meerdere alinea's aan tekst zijn. Het Q element wordt alleen gebruikt voor kleine citaten, zoals één zin. Een voorbeeld van het gebruik van BLOCKQUOTE:

<blockquote><p>Mijn naam is veel gebruikt, ook veel verkeerd gebruikt.
Ik heb in het verleden bij tal van projecten gezeten zonder controle over de
kwaliteit, het resultaat en de voortgang te hebben. Dat is nu wel het geval. De
Foundation gebruikt sport als middel om andere mensen te helpen.</p></blockquote>

Even tussendoor. Is het je trouwens opgevallen dat er in het BLOCKQUOTE element een P zit? Dit is natuurlijk omdat het citaat uit meerdere alinea's kan bestaan. Daarom moeten ook in een BLOCKQUOTE element alle alinea's gewoon worden aangegeven d.m.v. het P element.

Overige elementen voor tekst

Aangezien dit hoofdstuk al aan de lange kant is, worden de overige elementen niet uitvoerig besproken omdat die minder belangrijk zijn als de elementen die hierboven zijn besproken. Hieronder volgt een overzicht van de elementen die in dit hoofdstuk thuis horen maar hierboven nog niet zijn besproken. Erg belangrijk en veelgebruikt zijn ze niet, dus misschien is het leuk om de functies ervan even door te lezen, maar ik zou er niet wakker van liggen als je ze niet begrijpt.

DFN

Geeft een definitie aan. Uitleg van de definitie kan in het title attribuut worden gegeven, net zoals bij afkortingen.

CODE

Geeft computer code, zoals HTML, CSS, PHP of C, aan.

SAMP

Geeft de uitkomst van een computer programma aan.

KDB

Geeft tekst aan die moet worden ingevoerd door de gebruiker van een computer programma.

VAR

Deze geeft een computer code variabel aan.

INS

Deze geeft een stukje tekst aan die aan het origineel van de tekst is toegevoegd nadat deze is gepubliceerd.

DEL

Deze geeft een stukje tekst aan die niet meer relevant is nadat deze is gepubliceerd.

Op naar links en mediaobjecten om onze saaie alleen-tekst pagina's op te fleuren.