Een eigen website

   

Een eigen website bouwen of beheren. Het klinkt zo leuk maar er komt toch wel het een en ander bij kijken. Je zal een keuze moeten maken om een CMS (Content Management System) te gaan gebruiken of zelf te programmeren en HTML (HyperText Markup Language: de basis taal voor websites) te gebruiken. Mijn voorkeur als het gaat om de keuze tussen CMS en zelf een website bouwen wordt meestal bepaald door het doel. Een website puur gebasseerd op HTML is in de meeste gevallen sneller. Een CMS systeem heeft namelijk vaak veel opties die wel ingeladen worden als de webpagina geopend wordt maar niet direct gebruikt worden. Dit heeft invloed op de snelheid waarmee een pagina gedownload wordt, dus ook de snelheid waarmee de pagina geopend kan worden. Dit laatste heeft dan weer invloed op de zoekresultaten in de verschillende zoekmachines en hiermee dus ook op de hoeveelheid bezoekers op je website en eventueel je inkomsten. Hier gaan we verder op in op de pagina over zoekmachineoptimalisatie oftewel SEO (Search Engine Otimalisation).

Een CMS systeem heeft bij het maken van een eigen website echter echt niet alleen nadelen. Voor een beginnende websitebouwer die bijvoorbeeld een eigen webshop wil bouwen kan een CMS systeem wel degelijk uitkomsten bieden. Immers een webshop bevat veel functies (producten, secties, winkelwagen, betaalsysteem, etc.) die meer vragen dan alleen een basis HTML. Andere programmeertalen zoals bijvoorbeeld PHP komen hierbij kijken in combinatie met HTML om wat meer geavanceerde functies te bewerkstelligen.

Omdat de mijn websites over het algemeen puur informatief zijn (Horeca Info, Koffie en Thee, en Bots&Bytes), ik geen emmers met geld heb om aan extra SEO uit te geven en ik toch graag bezoekers trek zijn mijn websites over het algemeen gebasseerd op puur HTML en soms een beetje PHP.

HTML leren

Om vervolgens zelf een beetje te snappen hoe een website werkt en wat je moet doen om een paar simpele teksten aan te passen is het van belang dat je de basis van HTML onder de knie hebt. Hiervoor hebben we allereerst een goed programma nodig om mee te werken. Hiervoor kan je bijvoorbeeld in Windows het programma Kladblok gebruiken. Dit is een simpele tekst-editor waarmee je een HTML pagina gemakkelijk kan maken en bewerken. Mijn voorkeur echter gaat naar een iets uitgebreidere tekst editor. Het programma Notepad++ waarin je ook erg gemakkelijk websites kan maken en bewerken maar die ook, in tegenstelling tot het Kladblok van Windows, ook specifieke ondersteuning biedt voor verschillende online talen zoals HTML.

HTML Tags

Dan heb je de tekst editor open en staar je naar een wit veld. Wat nu? Een website is altijd op dezelfde manier opgebouwd en bestaat uit zogenaamde Tags.Een tag verteld de webbrowser (het programma waarmee je webpagina's ophaald zoals Internet Explorer of Chrome wat er met een bepaalde tekst moet gebeuren. Een voorbeeld:

<!DOCTYPE html>
<html>
<head>
<title>Pagina titel</title>
</head>
<body>

<h1>Je eerste heading.</h1>
<p>Je eerste alinea.</p>

</body>
</html>
							

De eerste tag die je tegen komt <!DOCTYPE html> verteld de browser dat het hier gaat om een HTML5 bestand. Zoals zoveel zaken ontwikkeld HTML zich ook en we zijn nu bij variant 5. Meer aandacht hoeven we daar niet aan te geven.
Vervolgens zien we de <html> tag welke aan de eind wordt afgesloten met de afsluitende </html> tag. Dit verteld de browser dat het om een HTML bestand gaat en waar het bestand begint en eindigd. De meeste tags hebben een <openende> en een </afsluitende> tag.
Dan zien we vervolgens de <head> tag met iets naar onderen de afsluitende head-tag. Tussen deze 2 tags staat achtergrondinformatie voor de webbrowser en zoekmachines die je niet terug vind op de website zelf. In dit geval zie je de titel-tag waar de titel van je webpagina staat. Deze titel kan je terug vinden in je webbrowser. Bovenin de webbrowser waar je nu in aan het lezen bent staat bijvoorbeeld Een eigen website. Tussen de head-tags kan je, op een later moment, ook extra informatie kwijt voor social media, header zoekmachineoptimalisatie, etc.

Dan de inhoud van je website. Deze staat dan ook logischerwijs tussen de tag <body> en </body>. Tussen de 2 body-tags staat alle informatie die je webbrowser moet weergeven. Eigenlijk is dat je zichtbare website.
Hierna zie je de heading staan tussen <h1> en </h1>. Dit is meestal de zichtbare titel op je website welke gevolgt word tussen <p> en </p> wat, in dit geval, de eerste alinea is en dus de daadwerkelijke, leesbare inhoud van je website.

Je eerste website

Dan nu een simpele opdracht.
1) Kopieer bovenstaande HTML code in zijn volledigheid en plak deze in je tekst editor.
2) Sla het bestand op als "website.html". Belangrijk als je toch het Klablok in Windows gebruikt bij opslaan: gebruik de codering UTF-8 en niet de ANSI codering. Notepad++ doet dit meestal automatisch. Het gebruik van een verkeerde codering kan er voor zorgen dat vreemde tekens niet goed weergegeven worden. Bij notepad++ selecteer je onder Karakterset de optie UTF-8 (Zonder BOM).
3) Gefeliciteerd! Je hebt je eerste website gemaakt! Sluit je tekst-editor en open het opgeslagen bestand in je webbrowser om het resultaat te bekijken.