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
• Opbouw van een document
• Aan de slag in de body
• Een voorbeeld
• Tips

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.


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.

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:


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.

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.


HTML zou HTML niet zijn als men deze elementen niet tegelijkertijd kan toepassen op een tekstregel.


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.


Zoals je ziet staat er niet tussen <img> en </img>, vandaar dat we dezelfde code kunnen herleiden tot onderstaande code.


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.


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:


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!