Netters.nl

HTML is de taal/code waarmee de opmaak van webpagina's bepaald wordt. De opmaak is niet gelijk aan het design of de layout. HTML is enkel bedoeld om structuur in teksten aan te brengen, zodat er kopjes, tabellen, lijsten en andere vormen van structuur ontstaan. De afkorting HTML staat voor HyperText Markup Language. HyperText biedt de mogelijkheden om links naar andere pagina's aan te brengen, de zgn. hyperlinks. Tegenwoordig weten we niet beter dan dat we er per dag tientallen van aanklikken, maar toen HTML in 1991 bedacht werd, was juist dít vernieuwend.

Opmerking:
In dit document gebruiken we de term 'webpagina'. Nu is dit iets anders als een website. Een website bestaat namelijk uit meerdere pagina's die op bepaalde manier naar elkaar linken. De term 'webpagina' verwijst in dit document dus simpelweg naar één pagina.

Tags

HTML bestaat uit tekst welke omgeven worden door zgn. tags. Zo is <strong>woord</strong> een HTML-omschrijving van een woord welke omgeven wordt door een strong-tag. Een tag dient altijd afgesloten te worden, wat op twee manieren kan. De ene manier is te zien in het voorbeeld van de strong-tag: <strong> is de openingstag en </strong> is de sluittag. De andere manier om een tag te sluiten werkt niet bij alle elementen. Als je bijvoorbeeld een nieuwe regel wilt beginnen, is daar de tag <br> voor. Aangezien deze afgesloten zou moeten worden, zou je dit moeten krijgen: <br></br> Er is namelijk niks wat tussen de tags zou moeten staan. Omdat dit wat overbodig lijkt, volstaat <br> ook.

Opmerking:
Opmerking: soms kom je ook <br /> als schrijfwijze tegen. Dit kan ook. Deze schrijfwijze wordt gebruikt in XHTML, de xml versie van html. Maar omdat het juiste gebruik van XHTML niet goed wordt ondersteund door Internet Explorer kun je net zo goed blijven bij de <br> notatie.

Opmerking:
De lijst met bruikbare tags wordt bijgehouden door het World Wide Web Consortium (W3C). Het W3C is een organisatie die al jaren lang de webstandaarden ontwikkelt en beheert. De laatste specificatie dateert van 1999 en dit gaat om HTML 4.01.

Pagina-opzet

Pagina's die gemaakt zijn in HTML hebben vaak de extensie .htm of .html. Een HTML pagina bestaat uit twee delen, een HEAD en een BODY. In de head staat allerlei eigenschappen van de pagina, zoals een titel, een omschrijving van de pagina enz. Een klein voorbeeld zonder inhoud hiervan is:

Head

Het belangrijkste element in het HEAD gedeelte is de titel. Dit is de tekst die je altijd helemaal bovenaan in je browser ziet, vaak in de blauwe balk van Internet Explorer. Deze komt tussen te staan en het HEAD-gedeelte zou er dan als volgt uit kunnen komen te zien:

Metatags

Andere content welke vaak in HEAD staat, zijn de zgn. metatags. Meta tags beschrijven informatie over de pagina welke niet direct zichtbaar is. Je kan hierbij denken aan informatie over de auteur van het document, een lijst met woorden die de inhoud van de pagina omschrijven, een publicatiedatum, een aanduiding voor de taal van de pagina enz. Om een voorbeeld te geven breiden we bovenstaande HEAD uit met informatie over de auteur:

Overige tags

Daarnaast zijn er nog tags voor het gebruiken van stijlen, javascripts, favicons enz. Aangezien we echter deze technieken en termen nog niet hebben uitgelegd, zullen we hier niet verder op in gaan ;-)

Body

De BODY omschrijft de eigenlijk content van de webpagina. Deze content kan bestaan uit tekst, plaatjes, Flash files enz. Ook voor de BODY zijn er diverse tags. De belangrijkste lopen we hieronder langs.

Alinea <p></p>

De tags <p> en </p> omsluiten een alinea.

Break line <br>

Indien je een nieuwe regel (harde enter) wilt beginnen, maar niet zozeer een nieuwe alinea, kan dit d.m.v. <br>.

Link <a></a>

Bij de link maken we kennis met een nieuwe term, het zgn. attribuut. Een attribuut is een nadere specificatie van een tag of element. Een attribuut wordt in de openingstag gezet. Meerdere attributen worden geschieden door een spatie. Laten we een voorbeeld geven zoals een link:

<a href="pagina.html" title="Titeltekst">anchor tekst</a>

We zien hier drie variabelen:

• Het href-attribuut verwijst naar de locatie waar je heen verwijst.
• Het title-attribuut geeft een omschrijving van de link.
• De anchor tekst is hetgeen de bezoeker ziet er waar hij op kan klikken.

Image <img>

Ook als we een plaatje willen tonen, gebruiken we de <img> tag, welke ook weer attributen nodig heeft. Via het src-attribuut geven we de URL van het plaatje weer en via het alt-attribuut een omschrijvig van het plaatje:

<img src="/foto.jpg" alt="Omschrijving van de foto" >

Voorbeeld

Alles bij elkaars resulteert dit bijvoorbeeld in onderstaand BODY gedeelte van een HTML pagina:

Toevoegingen aan HTML

HTML is zoals we al zeiden een opmaaktaal. Dit betekent dat je er de structuur van een document mee kan bepalen, maar qua design levert enkel HTML vaak niet al te veel spannends op. Met Cascading Style Sheets (CSS) kun je layout van HTML-elementen bepalen, maar daar gaan we in een later artikel mee verder.

Mocht je meer willen lezen over HTML en het (goede) gebruik ervan, bekijk dan ook eens dit artikel over webstandaarden.