InfoNu.nl > Pc en Internet > Programmeren > HTML: De eerste stappen

HTML: De eerste stappen

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!
© 2006 - 2017 Rein, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
Hyper Text Markup LanguageHyper Text Markup LanguageHyper Text Markup Language, beter bekend onder html, is een taal voor de opmaak van documenten. Html wordt op het web ge…
HTML de basisbeginselenVoor het maken van een website heb je enige kennis van HTML nodig. HTML is de basis van een website. In dit artikel lees…
Gratis HTML script of toch betalenGratis HTML script of toch betalenAls je een website wil maken kun je HTML script kopen, zelf maken of gratis downloaden. Lees hier alles over de voor en…
Websites maken voor beginners: HTMLWebsites maken voor beginners: HTMLVrijwel alle websites zijn grotendeels in HTML geschreven. Maar wat is HTML precies en hoe kun je er een website mee mak…
Website maken met Mozilla ComposerWebsite maken met Mozilla ComposerMozilla Composer maakt het voor u eenvoudig om webpagina's te maken. En daar hebt u bijna geen kennis van HTML voor nodi…

Reageer op het artikel "HTML: De eerste stappen"

Plaats een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Reactie

Wouther, 14-04-2007 12:58 #1
Erg goed! Ik programmeer zelf ook (o.a. HTML) en dit is volgens mij een uitstekende tutorial voor een beginnende prorammeur! :-p

Infoteur: Rein
Gepubliceerd: 07-10-2006
Rubriek: Pc en Internet
Subrubriek: Programmeren
Reacties: 1
Schrijf mee!