Paragrafen

Voor paragrafen is het element bijzonder eenvoudig in gebruik. Het element wat we hiervoor gebruiken is het <p>-element, en het enige wat je hiermee hoeft te doen is <p> voor een alinea/paragraaf zetten en </p> aan het einde. Bijna geen voorbeeld benodigd, maar voor het gemak toch eentje:

<p>Dit is een paragraaf. Dat kan je zien omdat zowel boven
als onder deze blok tekst een witregel verschijnt, zo wordt
het onderscheid met andere paragrafen duidelijk. Met behulp
van CSS is
dat aan te passen, en kan je ook de eerste regel
laten inspringen.</p>

Belangrijke eigenschap van paragrafen, maar eigenlijk van alle tekst van HTML is dat ze dubbele spaties, enters en inspringingen met behulp van de tab-toets negeren. Als je dat gedrag wil aanpassen, dien je in plaats van het <p>-element het <pre>-element te gebruiken. Deze is op dezelfde manier te gebruiken als het <p>-element, maar toont de tekst exact zoals deze is ingevoerd tussen begin- en eindtag. Nadeel is wel dat de tekst standaard in een zogenaamd non-proportioneel lettertype wordt getoond, net zoals tekst uit typemachines of de codeblokken op deze site. Om dit aan te passen dien je gebruik te maken van CSS. Een voorbeeld:

<pre>Dit is een preformatted paragraaf. Dat kan je
zien omdat zowel boven als onder deze blok tekst een
witregel verschijnt, zo wordt het onderscheid met andere
paragrafen duidelijk. Maar in deze paragraaf
worden       alle spaties,
enters

en tab-inspringingen getoond, in een lettertype
dat ook door een typemachine wordt gebruikt.</pre>

Gelukkig is er ook een element waarmee je het afbreken van een regel ook kan regelen zonder meteen met een ander lettertype opgescheept te zitten, het <br>-element. Dit is best een bijzonder element, omdat het geen sluittag heeft, zoals veel andere HTML-elementen. Wanneer men gebruik maakt van XHTML dient men dan ook nog een extra slash te gebruiken, en het element komt er dan uit te zien als <br/>. De makers van deze site gebruiken echter gewone HTML in de voorbeelden, de redenen waarom kan je op de speciale pagina lezen. Een voorbeeld van het <br>-element:

<p>Van: €9,95<br>Voor:€10,95</p>

Hoewel dit voorbeeld op één regel staat, zal het worden weergeven op twee regels.

Koppen

Of je nu maar een beetje tekst hebt, of heel veel, je wil dit toch graag organiseren. HTML bied genoeg mogelijkheden voor allerlei soorten koppen. Met de elementen <h1> tot en met <h6> kan je zes verschillende groottes koppen maken die gaan van heel groot (<h1>) tot kleiner dan normale tekst (<h6>). Het zijn zelfstandige elementen, dus ze worden buiten een paragraaf geplaatst.

Hoewel je volledig vrij bent om koppen in elke willekeurige voorbeeld te gebruiken, is het toch een goed idee om ze op de meest logische manier te gebruiken: <h1> voor de paginatitel, <h2> voor de paragrafen en <h3> voor subparagrafen. Heel misschien heb je <h4> dan nog nodig, maar kijk dan uit dat je de tekst niet te ingewikkeld en te lang maakt. Heb je vijf of zes niveau's koppen op je pagina, dan moet je waarschijnlijk eens gaan kijken of de tekst niet beter gestructureerd kan worden.

Tenslotte nog een stukje voorbeeldcode:

<h1>Pagina over bla bla</h1>
<p>Dit is een hoop gebla bla bla</p>
<h2>Varianten van bla bla</h2>
<p>Er zijn veel varianten van bla bla.</p>
<h3>Bla bla zonder tekst</h3>
<p>Alleen maar bla bla</p>
<h3>Bla bla als vervolgtekst</h3>
<p>Tekst die wordt aangevuld met bla bla</p>
<h3>Andere tekst als bla bla</h3>
<p>Bijvoorbeeld Lorum Ipsum</p>

De lettergroottes zijn instelbaar via CSS, daarover lees je binnenkort meer.

Opbouw van een hyperlink

Net zoals veel andere HTML-elementen bestaat het <a>-element uit een openingstag en een sluittag. Tussen deze twee tags in staat de tekst die aanklikbaar is. Een voorbeeld:

<a href="http://www.nu.nl/">Bezoek Nu.nl</a>
<a href="index.html">Ga naar de homepage</a>

Hierbij valt meteen het attribuut href op. Dit attribuut wordt gebruikt om het adres van de webpagina die gelinkt moet worden op te geven. Dit kan een absoluut adres zijn (zoals in het voorbeeld naar Nu.nl) of een relatief adres (zie het tweede voorbeeld). Een relatief adres is in principe altijd op dezelfde site. Het href-attribuut zelf is altijd aanwezig bij dit element, tenzij je een anker plaatst (zie verderop).

Niet alleen naar webpagina’s: e-mailadressen

Het mooie van hyperlinks is dat ze niet alleen naar webpagina’s hoeven te verwijzen. Ook e-mailadressen zijn eenvoudig te linken met het <a>-element. Voordat ik hier een voorbeeld van geef, toch eerst een waarschuwing. Het linken van een e-mailadres wordt steeds vaker als ongewenst beschouwd. Er zijn geautomatiseerde robots actief die het internet afspeuren voor e-mailadressen om spamberichten naar te sturen. Link ook niet naar e-mailadressen anders dan die van jezelf, als je het beste met die ander voorhebt.

Na deze broodnodige waarschuwing volgt dan alsnog een mooi voorbeeld van een e-mail hyperlink:

<a href="mailto:example@example.org">E-mail versturen</a>

Zoals te zien is wordt een e-mailadres vooraf gegaan door mailto:, maar is het e-mailadres en het gebruik van het href-element niet anders. Bij het e-mailadres kunnen ook nog extra opties worden ingebouwd, zoals een onderwerp. Dat ziet er zo uit:

<a href="mailto:example@example.org?subject=Voorbeeld">E-mail versturen</a>

Handig, omdat je zo het e-mailbericht wat kunt sturen.

Binnen een pagina linken

In plaats van het attribuut href te gebruiken, kan je ook het attribuut name gebruiken. Dan maak je geen link, maar een anker aan. Dit wordt dan ook geen hyperlink, maar een plek waar je naar kan verwijzen. Dit ziet er ongeveer zo uit:

<a name="sectie"></a>
<a href="#sectie">Ga naar sectie</a>
<a href="langepagina.html#sectie">Ga naar sectie</a>

Met name maak je een anker voor een sectie van je webpagina aan. In het href-attribuut kan je naar dit anker verwijzen, of dat nu op dezelfde pagina is of niet. De naam van de sectie wordt vooraf gegaan door een hekje (#). Dat betekend niet dat maar een deel van de pagina geladen wordt, alleen de schuifbalk wordt direct naar de juiste plaats gestuurd.

Binnenkort vind je op Webbish een uitgebreid artikel over hoe relatieve links te maken zijn door de gehele site heen. Blijf dus op de hoogte, en schrijf je in voor onze RSS-feed!