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.

• Het zwarte gedeelte is gewone tekst. Het staat tussen twee tags in, dus deze tekst wordt getransformeerd in datgene wat een tag doet (in dit geval aanklikbaar gemaakt).
• Het rode gedeelte zijn de tags, zoals altijd getoond in punthaken. Vooraan zien we een openingstag (de afsluitende punthaak zien we vlak voor de zwarte tekst), en achteraan zien we de sluittag.
• Het groene gedeelte is een attribuut. Een attribuut heeft bijna altijd een waarde, en dan wordt de naam van het attribuut gevolgd door een is-teken (=), en daarna twee dubbele aanhalingstekens.
• Tussen twee dubbele aanhalingstekens komt de waarde van een attribuut, in dit geval weergeven met de paarse kleur.

Een element hoeft niet altijd een attribuut te hebben, net zo goed als het mogelijk is meer dan één attribuut te hebben (zo heeft in de HTML-code voor dit artikel de afbeelding wel zes attributen!).

Nesten

Tot zover het eenvoudige gedeelte. Het hele concept van HTML is dat elementen in elkaar gebruikt worden, het zogenaamde nesten. Dit gaat eigenlijk bijna vanzelf, want als je inhoud aan het schrijven bent in een webpagina doe je dit al standaard tussen de begin- en eindtag van het <body>-element. Dat is echter op vrij grote schaal. Op iets kleinere schaal is bijvoorbeeld dit voorbeeld:

<b>Dikgedrukte tekst</b>
<i>Cursieve tekst</i>
<b><i>Dikgedrukte, cursieve tekst</i></b>

Foto gemaakt door
Frangipani Photograph
op Flickr.

Hier combineren we direct twee elementen, namelijk <b> voor dikgedrukte tekst en <i> voor cursieve tekst. Wanneer we dit soort constructies doen, moet je wel opletten! Het is belangrijk dat je de elementen precies andersom sluit dan je opent. Begin je dus eerst met <b> en dan met <i>, dan moet eerst <i&gt; worden afgesloten voordat je <b&gt; kan afsluiten. Dit klinkt heel lastig, en vergelijk het daarom eens met Russische poppetjes. Je kan een klein poppetje niet compleet maken als deze zit opgesloten in een grote pop. Je moet ze daarom in de juiste volgorde in elkaar zetten. En zo werkt het ook bij HTML-elementen.

Nesten is een belangrijk concept binnen HTML. Je zal zien dat de effecten hiervan later ook terugkomen in het opmaken van webpagina’s met HTML. Voorbeelden hiervan zullen binnenkort op Webbish verschijnen.

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!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>

<body>
</body>
</html>

Zoals te zien stelt het eigenlijk niet zo heel erg veel voor, laten we er even stap voor stap doorheen lopen.

De eerste regel kan er soms wat anders uitzien, en wordt ook wel de Doctype genoemd. Dit geeft aan de browser door welke versie van HTML of XHTML wordt gebruikt, en waar de regels hiervan te downloaden zijn. Ook voor jezelf kan dit handig zijn, zo weet je welke syntaxis je moet aanhouden bij het bewerken van een document.

Vervolgens wordt het element <html> geopend. Pas helemaal aan het eind van het document wordt dit weer afgesloten, en alles wat er dus in de pagina zit bevind zich binnen dit element. Het heeft verder weinig nut voor de ontwikkelaar zelf. Er zit wel een uitgebreid technisch verhaal achter, maar dat is niet echt interessant.

Een pagina bestaat in HTML verder uit grofweg twee delen. De <head> en de <body>. In de head staat allemaal extra informatie. Op de titel van de pagina na (daarvoor dient het <title>-element) zal de bezoeker van de webpagina dit allemaal niet zien. In de <body> daarentegen komt juist alle inhoud van de pagina terecht. Dit deel van de pagina wordt, op enkele uitzonderingen na, wel gezien door de bezoeker van de website.

Tenslotte, helemaal aan het eind, zien we zoals gezegd het <html>-element weer terug, in dit geval met het afsluitende element.

Dit alles wordt in een HTML-bestand opgeslagen. Hier zijn zoals je hier kan zien een heleboel smaken van.

1. HTML is eenvoudig te leren. Zoals al gezegd tijdens de inleiding is HTML bijzonder eenvoudig te leren en in gebruik. HTML bestaat uit heel simpele blokjes die samen een webpagina vormen, en daartussen zit de tekst. Deze blokjes, die we elementen noemen, staan tussen punthaken. Ze zijn vaak een logische afkorting van de engelse naam voor iets, dus je hebt zeker niet te maken met cryptische afkortingen, waar sommige programmeertalen nog wel eens last van hebben.
2. Uiterlijk van pagina’s gemaakt door software. Ook systemen als WordPress, waarmee je websites kan maken, maken gebruik van HTML. Voor de vormgeving gebruiken ze zogenaamde thema’s. Deze thema’s bestaan uit bestanden waarin speciale codes verwerkt zitten in normale HTML. Wil je deze zonder hulp aan kunnen passen, dan is kennis van HTML bijzonder nuttig.
3. Berichten schrijven. De kracht van de softwaresystemen is dat je er erg eenvoudig berichtjes mee kan publiceren. Vaak zit hiervoor een zogenaamde WYSIWYG-bewerker ingebouwd, maar er wordt vaak ook de mogelijkheid aangeboden om de tekst op te maken met HTML. Soms kan je HTML ook gebruiken om reacties te plaatsen op artikelen op je eigen site of andere site. Hierbij is wat kennis van HTML dus superhandig!
4. Opstapje naar andere technieken. HTML is zoals gezegd eenvoudig te leren, en vormt hierdoor een mooi opstapje naar andere, meer ingewikkeldere technieken, zoals XML, maar vooral naar aanverwante technologieën als XML Schema, XSLT of XPath. Schaam je zeker niet als je deze termen niet kent, deze zijn op dit moment nog niet van noemenswaardig belang voor het maken van een website. Mocht je meer willen weten, lees dan op je gemak de gelinkte pagina’s op Wikipedia eens door.

Mocht je overtuigd zijn, dan ben je hier goed! Met de artikelen die de komende tijd op deze website zullen verschijnen kan je eenvoudig en snel kennis maken met HTML en aanverwante technieken.