HTML: De eerste stappen
Wie HTML wil leren, moet ergens beginnen. Maar waar? De bedoeling van dit artikel is diegenen die geïnteresseerd zijn in HTML, op weg te helpen.
Opbouw van HTML
HTML is opgebouwd uit elementen, attributen en de waarden van de attributen. Attributen en hun waarden bepalen het uitzicht van het element, elementen geven aan om wat het gaat. In onderstaande code bepaald het attribuut ‘align’ en de waarde ‘right’ het uitzicht van het element ‘p’. In dit geval zal er een paragraaf (p) worden weergegeven die rechts (right) zal worden uitgelijnd (align). Er is natuurlijk ook iets nodig om op te maken, in dit geval wordt het zinnetje “Deze tekst wordt opgemaakt.” opgemaakt.
<p align=”right”>Deze tekst wordt opgemaakt.</p>
Met dit voorbeeld wordt duidelijk wat de algemene opbouw is van HTML, deze formatie keert altijd terug. Het is echter niet noodzakelijk in elk element een attribuut te plaatsen. Onderstaande code is dus niet foutief.
<p>Dit tekstje staat in een paragraaf.</p>
Opbouw van een document
Een HTML-document moet voldoen aan enkele eisen. Het is verplicht enkele elementen op te nemen in het document. Wanneer deze elementen niet aanwezig zijn, is de code foutief. Het eerste element dat moet worden opgenomen, is het element “html”, dit om de eenvoudige reden dat hetgeen in dat element komt allemaal HTML is. De HTML die in dat element moet komen, bestaat uit twee hoofdelementen; de “head” en “body”.
In de “head” komt alles wat niet uitdrukkelijk weergegeven wordt in de webpagina. Dit kan gaan over de naam van de auteur van de pagina, de titel van de pagina of zelfs over sleutelwoorden met betrekking tot indexering van zoekmachines.
In de “body” komt alles wat wél weergegeven wordt in de webpagina. Bijvoorbeeld afbeeldingen en tekst.
Onderstaande code stelt dus de opbouw van een HTML-document voor:
<html>
<head>
Hier komt alles dat niet zichtbaar is binnen de webpagina.
</head>
<body>
Hier komen teksten, afbeeldingen, enzovoort.
</body>
</html>
In de “head” van een document is het eveneens noodzakelijk het title-element op te nemen, zoals de naam al doet vermoeden gaat het bij dat element over de titel van de pagina. Onderstaande code bevat het title-element.
<html>
<head>
<title>Dit is de titel van mijn pagina</title>
</head>
<body>
Hier komen teksten, afbeeldingen, enzovoort.
</body>
</html>
Aan de slag in de body
In de body plaatsen we dus hetgeen we willen weergeven in onze webpagina. Om te beginnen gaan we aan de slag met de algemene opmaak van een tekst.
De drie meest gebruikte opmaakpatronen voor een tekst zijn; Vet, cursief en onderstrepen. Natuurlijk kunnen we deze ook gebruiken in HTML, maar dan niet door een simpele klik op een knop zoals in MS Word. Vet kunnen we gebruiken door het element “b”, cursief door “i” en onderstrepen door “u”. Onderstaande voorbeelden illustreren deze elementen.
<b>Deze tekst is vetgedrukt</b>
<i>Deze tekst is schuin gedrukt</i>
<u>Deze tekst is onderstreept</u>
HTML zou HTML niet zijn als men deze elementen niet tegelijkertijd kan toepassen op een tekstregel.
<b><i>Dit is een dikgedrukt, schuin regeltje. <u>Dit regeltje is nog een onderstreept erbij</u></i></b>
Afbeeldingen weergeven met HTML gaat erg vlot, onderstaande code geeft een afbeelding weer met een hoogte van 100 pixels en een breedte van 150 pixels. Wanneer de afbeelding niet gevonden kan worden geeft hij een zin weer.
<img src=”afbeelding.jpg” height=”100px” width=”150px” alt=”De afbeelding kon niet worden gevonden”></img>
Zoals je ziet staat er niet tussen
<img> en
</img>, vandaar dat we dezelfde code kunnen herleiden tot onderstaande code.
<img src=”afbeelding.jpg” height=”100px” width=”150px” alt=”De afbeelding kon niet worden gevonden” />
De overbodige
</img> wordt weggelaten. Vergeet de “/” voor de laatste “>” niet.
Een voorbeeld
Onderstaande code is een correcte code van een webpagina, men zal een zwarte pagina zien met een witte tekst die opgemaakt is met vet, cursief en onderstrepen.
<html>
<head>
<title>Mijn eerste pagina</title>
</head>
<body bgcolor=”black”>
<font color=”white”><u>Beste bezoeker</u> Dit is een witte tekst. Sommige woorden in deze tekst staan <b>vetgedrukt</b> andere <i>schuin gedrukt</i>.</font>
</body>
</html>
Wanneer je nu wil dat er tussen “Beste bezoeker” en “Dit is een witte tekst.” Een enter komt, dan voeg je ertussen het element “br” aan toe. Dit toegepast, ziet er zo uit:
<html>
<head>
<title>Mijn eerste pagina</title>
</head>
<body bgcolor=”black”>
<font color=”white”><u>Beste bezoeker</u><br/>Dit is een witte tekst. Sommige woorden in deze tekst staan <b>vetgedrukt</b> andere <i>schuin gedrukt</i>.</font>
</body>
</html>
Nu zal er een enter verschijnen tussen “Beste bezoeker” en “Dit is een witte tekst”.
Tips
Nu je de basis mee hebt voor het maken van je eerste HTML pagina, kan je enkele tips vast en zeker goed gebruiken.
Afbeeldingen
Zorg voor harmonie, overmatig gebruik van bewegende gifjes staat niet mooi en zorgt voor drukte. De nummer één waarom mensen een webpagina wegklikken, is het overvloedig gebruik van irritante animaties.
Teksten
Zorg voor overzichtelijkheid, eventueel geïllustreerd met een afbeelding. Zorg ervoor dat de tekst leesbaar is, geel op een witte achtergrond is dus niet aan te raden. Zorg voor een mooie opmaak door het gebruik van een mooie kleur, een goede uitlijning én niet te vergeten de must voor elke tekst; vet, cursief en onderstreept. Zorg voor eenheid, titels geef je het best dezelfde kleur en grootte.
Inhoud
Zorg voor inhoud, het liefst inhoud waar mensen iets aan hebben. Hou je site ook up-to-date, zodat mensen een reden hebben om je site te blijven bezoeken.
Succes met jouw eerste webpagina!