Website maken voor beginners

Voorwoord:

Dit is de eerste uit een reeks artikelen die aan ieder kan uitleggen hoe een website werkt. Geschikt voor jong een oud, van lagere school tot afgestudeerd.

We gaan er van uit dat u een windows gebruiker bent, bestanden kunt openen en opslaan, en de verkenner gebruiken. Meer kennis is niet nodig.

Laat u in dit eerste stuk meevoeren, en ervaar dat het eenvoudig is een eerste webpagina te maken.

Deel 1: Mijn eerste webpagina.

In deze alinea maakt u de eerste pagina. Geloof het of niet.

  • Ga naar het zoekveld van het startmenu (windows) en schrijf hier “kladblok”, bij een Engelse windows versie heet het “notepad”.
  • Start deze eenvoudige tekst bewerker, en schrijf iets in het veld, bijvoorbeeld: “Mijn eerste webpagina”
  • Kies bestand -> opslaan als. En de optie “Alle bestanden”.
  • Geef het de naam “website.html”, onthoud waar het is opgeslagen.

Zoek het bestandje op via de verkenner, en open het door erop te klikken.

Gefeliciteerd, dat is een webpagina!

Uitleg: Een webpagina is een tekstbestand. We kunnen dit aan de webbrowser laten weten door de naam te wijzigen. Het gaat hier om het gedeelte achter de punt. Dit heet de “extensie”. Zou dat .txt zijn? dan start het in kladblok. Nu het .html is start het in de webbrowser.

Wat is HTML?

En wat is het niet? HTML is de afkorting van Hyper Text Markup Langauge. Begrijpelijk vertaald staat er: “Een uitgebreide opmaak taal”. Een taal waarmee een webpagina is opgemaakt.

Wie wel eens in de bron van een pagina heeft gekeken, zal denken: “Dat begrijp ik nooit.” De rest van dit artikel zal ik gebruiken om te bewijzen dat u het verkeerd heeft.

HTML is niet:

  • Code
  • Programmeertaal
  • Technisch hoogstaand

HTML bepaald  de opmaak van een webpagina. Het is meer een creatief dan een technisch proces.

Over elementen.

Een onderdeel van een webpagina noemen we een ‘element’. Dat kan werkelijk alles zijn; een afbeelding, een vakje, een stukje tekst, enzovoort.

Over eigenschappen.

Wat voor de hand liggende eigenschappen:

  • Vorm
  • Kleur
  • Plaats

Als we een schilderij maken gebruiken we dezelfde termen. We zouden kunnen zeggen: Ik schilder een rood vierkant aan de onderkant van mijn schilderij. Met wat we geleerd hebben klinkt het zo:

  • We hebben een element (een vorm)
  • De eigenschap is dat het vierkant is.
  • Een andere eigenschap is dat het rood is.
  • En de plaats is aan de onderkant.

Op dit punt krijgt u mogelijk het idee dat ik u voor simpel verklaar. Dat is zeker onwaar. Bovenstaande vinden we vanzelfsprekend. We denken er niet meer over na. En dat is een val waar mensen intrappen als ze HTML leren.

Het blijkt dat we met een kwast en verf goed in staat zijn dit soort benoemingen te doen, maar met een toetsenbord en een tekstverwerker is er de nijging het moeilijker te maken dan het is.

KEEP IT SIMPLE!

De “tag”

Letterlijk “Een markering”. Het betreft een opmaak die door de browser niet getoond word aan de bezoeker. Maar de elementen en hun eigenschappen bepalen. Het gebruik ervan kan in het begin wat onwennig zijn. In het volgende artikel introduceer ik een hulpmiddel waarmee u kunt oefenen en experimenteren met het gebruik van de tag.

Het is niet anders; de namen van tags, de eigenschappen het is allemaal in de Engelse taal. Om de werking en het gebruik ervan te illustreren gebruik ik hier Nederlandse termen uit de echte wereld:

Stel! We hebben een doos en deze is leeg. De tag ziet er dan zo uit.

<doos></doos>

We nemen nu een leeg glas:

<glas></glas>

En plaatsen dat in de doos:

<doos><glas></glas></doos>

Een lege tag mogen we ook zo schrijven

<glas />

Om het nog leesbaarder te maken, gebruiken we inspringingen en plaatsen een nieuwe tag op een nieuwe regel:

<doos>
      <glas /> 
</doos>

Er bevind zich een leeg glas, in een doos. Op deze wijze hebben we de elementen benoemd, en het glas een plaats gegeven.

Ingewikkeld? Nee? U heeft zojuist de basis van HTML volledig begrepen.

Deel 2: Experimenteren met tags.