HTML cursus

Inleiding

Om te beginnen, gaan we een HTML document aanmaken met Kladblok (of Notepad) door volgende stappen te volgen:

Je opent Kladblok.
Locatie: Start – Alle programma's – Bureau-accessoires – Kladblok
Je klikt nu op Bestand – Opslaan als…. Je slaat nu het bestand op met extensie .html of .htm. Bij Opslaan als type selecteer je Alle bestanden.
Waar je dit opslaat, maakt niet uit. In het begin doe ik dit meestal op mijn bureaublad en daarna maak ik er een gepast mapje voor.

Je hebt nu een HTML document gecreëerd. Als je erop dubbelklikt, zie je een pagina die uiteraard nog leeg is.

In de broncode van dit document gaan we HTML codes schrijven. Wanneer we dit document opslaan, kunnen we het effect van die codes bekijken door het document te openen met een webbrowser. Dit doe je door te dubbelklikken op het document.

We beginnen met de <html> tag:

Deze tags zorgen ervoor dat de browser weet dat we in HTML werken.

Vervolgens voegen we de <head> tag toe:

Tussen de <head> en de </head> tag plaatsen we o.a. de <title> tag. Wat er nog allemaal tussen deze tags geplaatst moet worden, komt later nog aan bod.

<html>
<head>
<title>Hier plaats je de titel van de webpagina!</title>
</head>

</html>

Resultaat

We zien in de bovenste balk van de browser Hier plaats je de titel van de webpagina! staan. Nu voegen we de <body> tag toe:

<html>
<head>
<title>Hier plaats je de titel van de webpagina!</title>
</head>
<body>

</body>
</html>

Tussen de <body> en de </body> tag komt de inhoud van de pagina. In de <body> tag zelf komen verschillende attributen, o.a. om de achtergrond van de pagina te wijzigen. Dit kan op twee manieren:

Attribuut om de achtergrondkleur te bepalen: bgcolor="xxx".
In de plaats van xxx, schrijf je de kleur die je als achtergrondkleur wilt instellen. Deze kan je op 2 manieren aanduiden:
- Engelse naam van de kleur: bv. blue, black, yellow, red, gray, ….
  Hier volgt een voorbeeld:
  <html>
  <head>
  <title>Hier plaats je de titel van de webpagina!</title>
  </head>
  <body bgcolor="gray">
  
  </body>
  </html>
  Resultaat
- RGB waarde van de kleur: dit zijn 6 karakters die je achter een hekje of number sign (#) plaatst, de eerste twee karakters bepalen hoeveel rood er in de kleur aanwezig is. Het derde en vierde karakter bepalen hoeveel groen er in de kleur zit en de laatste twee bepalen hoeveel blauw er aanwezig is in de kleur. De mogelijke karakters zijn 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e en f.
  0 is dus het minimum (weinig kleur, donker dus) en f het maximum (veel kleur, lichter dus). Hieruit volgt dat #ffffff wit weergeeft (als rood, groen en blauw mengen, krijgt men wit) en #000000 zwart.
  We gaan nu eens zelf een kleur samenstellen, je wilt bv. dat de kleur matig rood bevat, weinig groen en veel blauw. Dan krijg je iets in deze aard:
  <html>
  <head>
  <title>Hier plaats je de titel van de webpagina!</title>
  </head>
  <body bgcolor="#8844bb">
  
  </body>
  </html>
  Resultaat
Tot zover het bepalen van de achtergrondkleur, nu gaan we een afbeelding als achtergrond gebruiken.
Attribuut om een afbeelding als achtergrond in te stellen: background="yyy".
In de plaats van yyy schrijf je de URI/locatie van de afbeelding. Een voorbeeld:
<html>
<head>
<title>Hier plaats je de titel van de webpagina!</title>
</head>
<body background="stars.gif">

</body>
</html>
Resultaat
Opmerkingen
- Hier – in het voorbeeld – wordt als extensie .gif gebruikt, dit kan bijvoorbeeld ook .jpg of .png zijn. Let er op dat je steeds de juiste extensie noteert.
- Zorg ervoor dat de afbeelding in dezelfde directory als die van de webpagina zit. Indien dit niet het geval is, moet je de naam van de directory en een slash typen vóór de bestandsnaam van de afbeelding. Stel dat je volgende situatie hebt; de afbeelding die je wilt instellen als achtergrond voor je webpagina noemt achtergrond.jpg en bevindt zich in een map dat afbeeldingen noemt, dan krijg je volgende code:
  <html>
  <head>
  <title>Hier plaats je de titel van de webpagina!</title>
  </head>
  <body background="afbeeldingen/achtergrond.jpg">
  
  </body>
  </html>
  Maar stel nu dat deze afbeelding zich zou bevinden in de bovenliggende map (een map hoger), dan zou je volgende code krijgen:
  <html>
  <head>
  <title>Hier plaats je de titel van de webpagina!</title>
  </head>
  <body background="../achtergrond.jpg">
  
  </body>
  </html>
- Als je een afbeelding als achtergrond instelt, houd dan rekening met de bestandsgrootte van deze afbeelding want als deze te groot is, duurt het te lang voordat de pagina is geladen en kan je bijgevolg bezoekers verliezen.

Naast het bgcolor en background attribuut zijn er nog 4 andere attributen van de body tag:

Het text attribuut: deze bepaalt de kleur van de gewone tekst.
Het link attribuut: bepaalt de kleur van de weblinks.
Het alink attribuut: bepaalt de kleur van actieve links (de a staat voor active), een link is actief nadat men erop heeft geklikt.
Het vlink attribuut: bepaalt de kleur van de bezochte links (de v staat voor visited), handig voor de bezoekers om te zien op welke links hij reeds geklikt heeft.

Hoe men tekst en weblinks invoegt op een webpagina, wordt in volgende lessen nog allemaal uitgelegd.

Hieronder volgt een algemeen voorbeeld van wat we in dit lesje allemaal gezien hebben.

<html>
<head>
<title>Welkom op mijn site</title>
</head>
<body background="images/leafs.gif" bgcolor="#668899" text="black" link="#446677" alink="white" vlink="gray">

</body>
</html>

Resultaat

Opmerking

Misschien is het je al opgevallen dat bij bovenstaand voorbeeld zowel het bgcolor als het background attribuut zijn gebruikt. Dit doet men om te zorgen dat de bezoeker geen witte achtergrond heeft wanneer de achtergrondafbeelding om de één of de andere reden niet kon worden geladen. Wanneer je beide attributen gebruikt, heeft het background attribuut voorrang. Het is dus aangeraden om beide attributen te gebruiken.

Zo, ik hoop dat je de HTML inleiding goed door hebt, dan kan je naar les 1 van de HTML cursus gaan.

Top

Ga naar Les 1: Tekstopmaak