Tags, wat zijn het en hoe gebruik je ze.

10 februari 2011
Website laten maken
Marc

In mijn vorige bericht heb ik verteld wat een DOCTYPE precies inhoudt. Ook heb ik uitgelegd dat de 3 belangrijkste tags de <html>, <head> en de <body> tag zijn.

Dit is de basis van je website. Zonder dit zal de browser niet weten wat hij moet weergeven.

In principe komt de inhoud van je website, (het zichtbare deel dus) tussen de <body> tags. Nu hoor de PHP-ers en andere scripters al zeggen: “Da’s niet waar: Mijn script staat in de <head> of zelfs nog boven de DOCTYPE.”

Klopt…maar de browsers zal uiteindelijk enkel en alleen de HTML weergeven. Tenslotte wordt de PHP omgezet naar html en deze html code zal geplaatst worden in de <body>.

Bij Javascript werkt dat iets anders, maar daar kom ik later op terug zodat ik niet te ver afwijk van het onderwerp.

Waar waren we?

De inhoud van de website komt tussen de <body> tags.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head>

<body>

Hier komt mijn inhoud!

</body>
</html>

Als je dit voorbeeld in een webbrowser zou open zal enkel dit te zien zijn:

Hier komt mijn inhoud!

Natuurlijk wil je meer dan alleen wat “platte” tekst. Dat doe je met tags. Met een tag geef je de browser opdracht een deel van de website op een door jou beschreven manier te interpreteren.

Sommige zijn eenvoudig, andere wat ingewikkelder.

Gewone tekst paragraven worden bijvoorbeeld omgeven door <p> </p>
Als je een Kop tekst wil gebruik je de <h1> </h1>. Dat kan overigens ook <h2> t/m <h6> zijn. Je begrijp dat de belangrijkste de <h1> zal zijn.
Als je iets dikgedrukt wilt doe je dat door het woord of de zin tussen deze tags te zetten. <strong> </strong>

Zoals je vast al gezien hebt wordt elke tag geopend en gesloten. <p> Open en </p> sluit. Sinds de komst van XHTML en later met HTML5 is dit verplicht.

Doe je dat niet zal de browsers dingen weergeven die jij anders bedoeld had.

Naast “open-” en “sluittags” zijn er ook zelfsluitende tags bijvoorbeeld de <br /> om een harde return te geven aan een stuk tekst. De tekst achter deze tag zal beginnen op de volgende regel.

Zo zijn er enorm veel tags waarvan er later in deze blog een aantal worden behandeld.

Een opsomming van de mogelijkheden ga ik hier niet geven omdat daar enorm veel mooie websites voor zijn.

Een voorbeeld is deze: w3school.com

Om deze tags verder vorm te geven is CSS bedacht In de CSS style of stylesheet kan je bepaalde opmaak geven aan de tags.

Vanaf dat moment zal er een wereld voor je open gaan.

Daarover in het volgende bericht meer.

abonneren op deze feed

Maaswebsites.nl Blog