Zelf met HTML5 en CSS een website maken in Kladblok

Wie echt zelf een website wil maken, kan niet zonder tenminste enige kennis van HTML en CSS. En kennis hebben van HTML en CSS heeft een heel groot voordeel: namelijk dat je voor het maken van een volledige website niet meer nodig hebt dan een HTML-editor.

Zelfs aan Kladblok, de teksteditor die standaard in Windows zit, kun je dan al voldoende hebben om een website te maken.

Hoe je een website in Kladblok maakt

Met de komst van HTML5 als nieuwe HTML-standaard, is het maken van een structuur van een webpagina er een stuk eenvoudiger op geworden.

Zo hoef je bijvoorbeeld niet langer een ingewikkelde doctype-definitie in je webpagina's op te nemen. Maar kun je volstaan met: <!doctype html>

We beginnen dan ook met het opstarten van het programma Kladblok. Zodra het programma is opgestart, toont het direct een leeg testdocument.

Je kunt dan ook direct beginnen met:

  1. Het intypen van: <!doctype html>
  2. Drukken op de Enter-toets, waarmee de cursor op de volgende regel komt te staan.

Vervolgens 'vertel' je in je tekstdocument waar het HTML-gedeelte in het document begint, waarbij je tevens aangeeft dat het een Nederlandstalig HTML-document is.

Hiervoor voeg je het volgende toe:

  1. Druk nogmaals op de Enter-toets.
  2. Typ in: <html lang="nl">
  3. Druk 3x de Enter-toets.
  4. Typ in: </html>

Als je een HTML-pagina maakt, dan is het tevens heel belangrijk dat je de pagina ook daadwerkelijk als HTML-document opslaat. Anders zal een webbrowser niet in staat zijn de webpagina te tonen.

Een tekstdocument gemaakt in Kladblok als HTML-document, ofwel webpagina, opslaan doe je als volgt:

  1. Druk de toetscombinatie CTRL-S.
  2. Het venster Opslaan als zal nu worden weergegeven.
  3. Klik met de muis in het tekstvak: Bestandsnaam. De inhoud (*.txt) zal nu blauw gemarkeerd worden.
  4. Druk op de knop DEL(ete) en typ vervolgens: index.html
  5. Klik op de knop Opslaan.

De webpagina heeft nu de naam: index.html gekregen. Een webpagina met de naam index.html wordt automatisch aangemerkt als homepage van een website.

Maar laten we eerst eens even bekijken waarom we deze HTML-pagina moeten maken, zoals we hem gaan maken.

Een doctype-definitie opnemen in je HTML-pagina is belangrijk. Want zo weet de webbrowser namelijk precies wat hij voorgeschoteld krijgt. Waardoor een webpagina sneller gerendeerd, en dus sneller weergegeven wordt in je webbrowser, bijvoorbeeld: Google Chrome of Internet Explorer.

Wat je wellicht snel zal gaan opvallen HTML-code is: dat bijna iedere HTML-tag, twee keer voorkomt op de webpagina. En wel als openings-tag en als sluit-tag.

Daarbij beginnen we na de doctype-definitie direct met de HTML-tag, zoals je hebt gezien.

Vervolgens voegen we binnen de HTML-tags aan de webpagina toe:

<head> </head> - Binnen de head-tags nemen we informatie op over de webpagina die zowel voor de webbrowser als voor de zoekmachines belangrijk zijn, maar niet voor de bezoeker. De inhoud van de head-tags is voor de bezoeker van je website dan ook niet zichtbaar.

<body> </body> - Alles wat binnen de body-tags van een webpagina wordt opgenomen, wordt getoond in de webbrowser en is dus zichtbaar voor bezoeker van deze webpagina.

Voeg de rest van de HTML-code toe aan je HTML-document, op de manier zoals hieronder weergegeven staat:

Vervolgens voegen we binnen de body-tags van onze HTML-pagina het volgende toe:

Deze tekst is zichtbaar in een webbrowser

Druk vervolgens weer op de toetscombinatie: CTRL-S. Hiermee wordt de laatste versie van ons HTML-document met de naam index.html opgeslagen.

Klik vervolgens in Kladblok op het menu Bestand en kies in het geopende menu vervolgens de optie Opslaan als…

Het venster Opslaan als zal nu worden weergegeven. In de adresbalk kunt u vervolgens zien op welke locatie op de harde schijf je HTML-document precies is opgeslagen.

Open Windows Verkenner en navigeer naar deze locatie op de harde schijf en open de map waarin uw HTML-document index.html zich bevindt.

  1. Klik met de rechtermuisknop op het bestand index.html.
  2. Kies in het geopende snelmenu de optie Openen met.
  3. Selecteer in het submenu dat nu opent de optie Internet Explorer.

Jouw webpagina index.html zal nu in de webbrowser Internet Explorer te zien zijn:

Door in Kladblok te werken en telkens je werk op te slaan in Kladblok door middel van de toetscombinatie CTRL-S, kun je op de zojuist getoonde manier steeds de laatste versie van je webpagina in Internet Explorer of in een andere webbrowser bekijken.

Maar voor nu heb je alleen nog maar kunnen controleren of je de structuur van je webpagina goed in elkaar gezet hebt.

En de structuur van jouw index.html is goed, wanneer ook in jouw webbrowser de tekst "Deze tekst is zichtbaar in een webbrowser" wordt weergegeven.

Ontwerpen en vormgeven in Kladblok met HTML en CSS

Zodra de structuur van een webpagina in orde is, kan begonnen worden met het ontwerpen en vormgeven. Waarbij we beginnen met het toevoegen van de benodigde HTML-tags aan de webpagina index.html

Verwijder de testtekst "Deze tekst is zichtbaar in een webbrowser" uit de body van je HTML-pagina en neem de toegevoegde HTML-code uit de onderstaande afbeelding precies zo over in jou eigen HTML-pagina: index.html.

Om een beter begrip te krijgen van de regels HTML-code die je zojuist hebt toegevoegd, bekijken we ze even kort.

<div id="pagina"> </div> - Deze div-tag is een container waarin we de hele webpagina onderbrengen. Een dergelijke container gebruik je wanneer je iets wilt doen dat voor de hele webpagina moet gaan gelden. Bijvoorbeeld: de hele webpagina voorzien van een zwarte rand en gecentreerd in de webbrowser weergeven.

<header> </header> - De header-tag is nieuw in HTML5 en geeft aan waar in het HTML document zich de header van de webpagina bevindt. In de header-tag nemen we het logo van de website en de titel of slogan van de website op.

<nav> </nav> - Ook de nav-tag is nieuw in HTML5. In de nav-tag nemen we de navigatieonderdelen van de website op. Bijvoorbeeld het hoofdmenu, dat zich meestal aan de bovenzijde van een webpagina bevindt, net onder het logo van de website.

<article> </article> - Ook de article-tag is een HTML5 tag. Binnen de article-tag nemen we de inhoud van de pagina op, die alleen op deze pagina voor zal gaan komen.

<h1> </h1> - Tussen de header-tags nemen we de titel van de pagina op.

<p> </p> - De paragraph-tags gebruiken we om de tekst die we op een webpagina willen weergegeven onder te verdelen in alinea's.

Met behulp van slechts deze HTML-tags is het al mogelijk om een goed vormgegeven en ontworpen website te maken.

Dit zal duidelijk worden zodra we CSS gaan inzetten voor het vormgeven van de diverse HTML-tags.

Een webpagina, maar ook een website, vormgeven met CSS gaat als volgt:

  1. Voeg <style> </style> toe binnen de <head> </head> van je HTML-pagina zoals weergegeven in de onderstaande afbeelding

  2. Schrijf vervolgens binnen de style-tags de benodigde CSS-code om de verschillende HTML-tags in je HTML-pagina vorm te geven.

Iedere tag, inclusief de body-tag, kun je vormgeven met CSS. Dit gaat op de volgende manier:

  1. Eerst vertel je welke tag je wilt vormgeven, bijvoorbeeld: body
  2. Vervolgens vertel je hoe je deze vormgegeven wilt hebben, bijvoorbeeld { font-family: Verdana, sans-serif; }

En deze procedure herhaal je voor iedere tag in je HTML-pagina die je wilt vormgeven. Waarbij je bij elke tag die je wilt vormgeven begint op een nieuwe regel.

Zoals je wellicht is opgevallen in de bovenstaande afbeelding, gebruiken we als voorbeeld een pagina die bedoeld is voor een website over koffie.

Wanneer we de volledige HTML-code en CSS-code van deze pagina bekijken, dan zal het je opvallen dat je met behulp van slechts enkele regels HTML-code en CSS-code al een hele behoorlijke webpagina kunnen maken.

Hoe je snel voldoende HTML en CSS leert om een website te maken

Zelf met HTML en CSS een website maken in Kladblok, of iedere andere teksteditor of HTML-editor, leer je vooral door het te doen en door gewoon dingen te proberen.

De webpagina die je met behulp van dit artikel in Kladblok gemaakt hebt, kun je steeds opnieuw gebruiken, door 'm telkens simpelweg een andere naam te geven. Bewaar deze pagina dan ook goed.

Nu je weet hoe je één webpagina moet maken, ben je zonder meer in staat om een hele website te maken. Ga het gewoon proberen.

Gerelateerd