Hoe maak ik een website? Les 2: HTML

Hoe ziet HTML er uit?

HTML is een taal voor browsers. Denk bij browsers aan programma's zoals Google Chrome, Firefox, Internet Explorer en Edge. 

De taal is opgebouwd uit elementen met daarin inhoud. Dat kan tekst zijn, maar dat kunnen ook andere elementen zijn. Een element ziet er zo uit:

<elementnaam></elementnaam>

Zoals je ziet bestaat een element eigenlijk altijd uit 2 delen. De opening en de afsluiting. Er zijn hier op in de loop der tijd wat uitzonderingen op ontstaan bijvoorbeeld het afbeeldings-element (img) of het element om een 'enter' in een stuk tekst aan te geven (br).

Les 2: HTML

Dit is les 2 in een tutorial over het maken van een website. Als je nog niet bekend bent met het plaatsen van HTML bestanden op een webserver, dan raad ik je aan om eerst even Les 1: De basis te volgen.

In deze les ga ik je laten zien hoe je een webpagina in statische HTML op kan bouwen. In Les 1 heb ik beloofd dat we een dynamische website gaan maken, maar we beginnen even bij het schrijven van statische HTML.

Benodigheden

  • Een webserver met hier op Apache, PHP en Mysql geinstalleerd
    • Dit kan je huren bij een webhosting-partij
  • Een FTP programma (in de tutorial: FileZilla *)
    • Dit programma gebruiken we om bestanden naar de webserver te sturen
  • Een editor (in de tutorial: Eclipse *. Andere opties: Netbeans, PHPedit of jEdit)
    • Met dit programma is het makkelijk om onze code te schrijven.

* Download-links rechtsboven op de pagina met Les 1.

Stap 1 Het opbouwen van een HTML pagina

Elke website bestaat uit HTML code die door de browser wordt geinterpreteerd. Daarom moeten webpagina's wel aan een aantal standaarden voldoen. Een webpagina bestaat eigenlijk uit 2 delen. De header, en de body. Dit ziet er in html elementen zo uit:

<head>
</head>
<body>
</body>

Omdat we aan de browser ook nog even willen aangeven dat onze pagina in HTML geschreven is, geven we dat op deze manier aan.

<html>
    <head>
    </head>
    <body>
    </body>
</html>

We omringen alles op de hele pagina met een element met de naam HTML. We beginnen de pagina met het openen van dit element, en aan het eind van de pagina sluiten we deze weer.

Weetje: Het omsluiten van het ene element in het andere noemen we 'nesting'

Alles wat in de HEAD van de pagina staat is visueel op de pagina zelf niet zichtbaar. Hier staan dingen in als de titel van de pagina (element TITLE) en de META tags van de pagina, waar onder andere de scription van de pagina in staat. In de volgende stap gaan we de HEAD van onze pagina inrichten. Voor het doel van deze tutorial ga je proberen om in eerste instantie een website te maken waar je jezelf kan presenteren. Bijvoorbeeld jouw onderneming, of een pagina over jou persoonlijk.

Ik zal zelf een fictief bedrijf gebruiken: Hamsteropvang Sjoerd

Stap 2 De header (HEAD) van de pagina vullen

Omdat je nu gaat beginnen met het maken van de eerste pagina, beginnen we met het vullen van de HEAD van de pagina met een aantal basis-dingen. We willen de pagina graag een titel geven (Deze wordt in Google weergegeven als klikbare link, en bovenaan je browser helemaal in de bovenste balk) en de omschrijving van de pagina. Deze wordt in Google onder de klikbare link weergegeven. De titel van de pagina heeft een apart element, de omschrijving vullen we in door middel van een META-element:

<html>
    <head>
        <title>Hamsteropvang Sjoerd</title>
        <meta name='description' value='Dit is de website van Hamsteropvang Sjoerd. 
Als je hamster moet worden opgevangen moet je hier zijn.'>
    </head>
    <body>
    </body>
</html>
Weetje: Het inspringen op 'geneste' elementen noemen we indentation We gebruiken dit om de code overzichtelijk te houden, en om snel te zien waar een element begint en waar het ophoudt.

Zoals je ziet is het TITLE element een eenvoudig element. Het begint, er staat content, en het houdt weer op.
Het element META is de eerste uitzondering op de regel dat een element altijd moet worden afgesloten. Er komt dus GEEN

</meta>
De content van een META-tag is daarnaast zodanig variabel dat we met z'n allen hebben afgesproken dat we die in attributen gaan plaatsen. Het eerste attribuut in het voorbeeld is: name en het 2e is value. Dit zijn veelvoorkomende attributen. Een attribuut wordt altijd alsvolgt aangemaakt:
<meta name='NAAM VAN TAG' value='WAARDE'>

Een element kan meer dan 1 attribuut tegelijk bevatten.

Als deze pagina nu door Google geindexeerd zou worden zou dit er zo uit zien:
Voorbeeld

Step 3 De eerste zichtbare content (BODY)

We gaan nu beginnen met het vullen van de BODY. Ik stel voor dat we dat meteen even goed doen en een nieuw element gaan toevoegen. We beginnen de pagina met een H1 element. Dit is een element dat een tekstkop aangeeft. Een kop boven een stukje, zoals bijvoorbeeld hierboven staat: "Stap 3 De eerste zichtbare content".

<html>
    <head>
        <title>Hamsteropvang Sjoerd</title>
        <meta name='description' value='Dit is de website van Hamsteropvang Sjoerd. 
Als je hamster moet worden opgevangen moet je hier zijn.'>
    </head>
    <body>
        <h1>Welkom bij Hamsteropvang Sjoerd</h1>
        <p>Dit is de website van Hamsteropvang Sjoerd. Hier kan je je hamster laten opvangen. Het is niet nodig de hamster eerst te gooien. Wij halen de hamster bij u thuis op.</p>
    </body>
</html>

Als we nu de H1 een kleurtje willen geven voegen we dit toe:

<h1 style='color: red;'>Welkom bij Hamsteropvang Sjoerd</h1>

Hier is style het attribuut, en color: red; is de waarde. In een style-attribuut kan je uitsluitend CSS gebruiken. Hier naast zie je het resultaat.

Resultaat

Resultaat