Er bestaat HTML, maar er bestaat ook XHTML. Het verschil hiertussen is niet erg groot. XHTML is aan meer regels gebonden en heeft dus als voordeel dat deze vaker een pagina correct zal weergeven. Bij HTML heb je minder regels, maar de kans is dan ook groot dat je pagina niet altijd goed wordt weergegeven. Het verschil zit hem vooral in de kleine dingen, maar heeft wel een positief resultaat. Ik zal daarom ook uitgaan van XHTML, niet van HTML.
Tags zijn erg belangrijk, zelfs absoluut onmisbaar, voor (X)HTML.
Tags zorgen namelijk voor de lay-out.
Met tags kun je bijvoorbeeld bepaalde tekst dikgedrukt weergeven, maar er is nog véél meer dan alleen dat.
Het is moeilijk om goed uit te leggen wat een tag precies is.
Wel is het te vertellen hoe je een tag herkent, een tag begint namelijk met een '<', en eindigt met een '>'.
Een voorbeeld voor als je je tekst dikgedrukt wil hebben:
Wat tussen de begin- en eind-tag staat, is hetgeen waar die tag betrekking op heeft.
Als je een stukje tekst dikgedrukt wilt hebben, zet je dit tussen <b> en </b>.
Dus:
<b>Hier je dikgedrukte tekst</b> en hier weer normale tekst.
Geeft:
Hier je dikgedrukte tekst en hier weer normale tekst.
Een tag zal erg vaak twee keer voorkomen.
De eerste tag is dan de opening, de tweede de afsluittag.
Een tag die zorgt voor de afsluiting, is hetzelfde als de gewone tag, maar dus met een / ervoor.
Het kan ook nog zo zijn dat je je tekst dikgedrukt én onderlijnd wilt hebben, dat kan!
Toch zijn hier wel een paar regels aan verbonden.
Je moet namelijk de tag die je als laatst hebt geopend, als eerst sluiten.
<b><u>Hier je dikgedrukte en onderlijnde tekst</u></b>
of
<u><b>Zo</b></u>
, maar níet
<b><u>zo</b></u>
of
<u><b>zo</u></b>
Voor HTML zal het geen problemen geven, maar dit is dus één van de dingen die voor XHTML belangrijk is.
Het is belangrijk dat je alle tags die je opent, ook weer afsluit. Bij veel tags is het logisch om dat te doen, maar voor sommige is het wat minder voor de hand liggend. Bijvoorbeeld een enter. In HTML kun je gewoon
<br>
typen, en dan doet hij het goed. In XHTML moet je deze ook sluiten. Het kan op twee manieren; gewoon openen en sluiten:
<br></br>
, maar je kunt hier ook een zelfsluitende tag gebruiken, dan gebruik je
<br />
. Dit scheelt je weer wat typewerkt, en is ook een stuk overzichtelijker. Dit kan echter bij lang niet alle tags.
<html />
kan bijvoorbeeld niet.
Dat komt omdat er informatie tussen de twee tags moet komen te staan.
Onthoud dus dat alle tags ook afgesloten moeten worden en dat een zelfsluitende tag niet altijd gebruikt kan worden.
Bij XHTML is het ook belangrijk dat alle tags met kleine letter worden geschreven.
<B>...</B>
zal dan ook een foutmelding geven,
<b>...</b>
is dus wel goed.
Bij XHTML is er ook sprake van een DOCTYPE. Dit is een soort identificatie aan welke regels je code zich houdt.
Je hebt keuze uit drie types; Strict, Transitional en Frameset.
Frameset gebruik je als je met frames werkt, maar dit raad ik je erg af omdat het enkele vervelende nadelen met zich meebrengt.
Strict en Transitional lijken behoorlijk veel op elkaar.
Een verschil tussen deze twee is dat Strict zich nog wat meer aan de regels houdt dan Transitional.
Een ander verschil is dat Strict meestal gebruikt wordt samen met CSS, maar Transitional niet.
Je moet de browser ook laten weten welk doctype je gebruikt. Dit doe je door een regel code helemaal boven aan je document te zetten, dus nog boven de html-tag.
Voor Strict gebruik je
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Voor Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En voor Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Een overzicht voor welke tags bij welk DOCTYPE wel of niet werken, kun je hier vinden.
Ook kun je controleren of je document klopt met de regels van het DOCTYPE, dat kun je hier doen.
Een (X)HTML-document is opgebouwd uit verschillende delen. Deze delen moeten verplicht in iedere pagina terugkomen. Denk er aan dat je ze in de goede volgorde zet en dat je niet vergeet ze af te sluiten. Die opbouw is als volgt:
<!DOCTYPE ...
...>
<html>
<head>
<title></title>
</head>
<body>
<p>...</p>
</body>
</html>
Dit zal ik nu per onderdeel verder uitwerken.
<html> maakt duidelijk dat het om een HTML-bestand gaat, niet erg verrassend. Dit plaats je bovenaan een document en sluit je helemaal onderaan weer af. Daar tussen staat dus je gehele document.
Het volgende wat we tegen komen is <head>. De informatie die hierin staat is niet direct zichtbaar op het normale scherm, maar toch is het niet onbelangrijk. Hierin komen dingen te staan als de titel, meta-tags, verwijzing naar een css-bestand en eventueel wat javascript. De meta-tags, css-bestand en javascript zijn nu nog niet van toepassing, dat komt later nog wel aan bod.
De titel-tag spreekt voor zich; wat zich hiertussen bevindt, is de titel van de pagina. Dat is dus hetgeen wat helemaal boven aan je pagina komt. Op dit moment zul je daar Anjo Online zien staan.
Dan hebben we ook nog de body, een zeer belangrijk deel. Hierin komt namelijk de website zélf te staan. Wat je hier typt, zal worden weergegeven in het scherm van de site. In de body gebruik je ook nog allerlei soorten tags. De p-tag is een goed voorbeeld, dit is namelijk een veelgebruikte tag,
Het is voor jezelf erg makkelijk als je overzichtelijk werkt, zo zorg je ervoor dat je later ook nog wijs uit de bestand kunt. Een editor kan je hierbij ook goed helpen. Niet alleen omdat deze je tags een andere kleur geeft, maar ook omdat je met een editor goed kunt werken met inspringen. Ik kan het het beste uitleggen met een voorbeeld.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Hier zien we dat twee tags waar html in staat, helemaal links staan. De head en de body tags staan wat meer naar rechts, maar allebei op dezelfde plaats.
De title tag staat het meest rechts van allemaal.
Hier zit een logica in, namelijk; wat tussen de twee tags (dus die voor het openen en voor het sluiten) staat, laat je inspringen.
Zo kun je goed zien wat waarbij hoort en als je een voller document krijgt, kun je toch nog begrijpen wat waarbij hoort.
De editor helpt je hierbij omdat deze begint op het punt van de vorige regel, dus als je hebt ingeprongen, springt de volgende regel op dezelfde manier in.