Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Zelf stap voor stap een website maken

Op deze pagina leg ik je uit hoe je je eigen website ontwerpt op basis van een van mijn templates.

  1. Een ontwerp kiezen
  2. Een eigen map aanmaken
  3. Veranderingen aanbrengen
  4. Andere kleuren
  5. Andere tekst
  6. Andere afbeeldingen
  7. De menuknoppen veranderen
  8. Meer webpagina’s maken
  9. En nu online!

Als je snel een eigen website maken wilt, dan ben je al een heel eind op weg als je één van mijn kant-en-klare templates als basis neemt. Op deze pagina leg ik je uit hoe je deze templates gebruikt, en hoe je ze zo aanpast dat je uiteindelijk je eigen, unieke website hebt.

(NB: Dit zijn géén WordPress-templates, maar templates die je kunt gebruiken als je zelf een website wilt gaan ontwerpen met behulp van html en css.)

Maar voordat je ook maar iets kunt doen, moet je eerst het zip-bestand dat je hebt gedownload uitpakken op je eigen computer. Dat doe je bijvoorbeeld met het programma WinZip. Heb je dit programma niet op je computer staan, dan kun je een gratis proefversie downloaden. Een ander unzip-programma voor Windows is 7-Zip. En voor Mac-gebruikers is Unarchiver een goede keus.

Is een van deze programma’s op je computer geïnstalleerd, dan kun je gezipte bestanden, eenvoudig ‘unzippen’ door erop te dubbelklikken en de aanwijzingen op je beeldscherm op te volgen. Dan wordt het gezipte bestand uitgepakt tot een map met daarin een aantal bestanden.

1. Een ontwerp kiezen

Nu kun je het template dat je hebt gedownload eens goed bekijken. In elke templates-map vind je grotendeels dezelfde bestanden: een bestand dat index.html heet, en twee mappen: afbeeldingen en overig.

Het bestand index.html is de homepage. Een homepage is altijd een bestand dat index.php of index.html heet. In dit geval heet het dus index.html.

In de map afbeeldingen staan de afbeeldingen die in dat template zijn gebruikt. In de map overig vind je een bestand met de naam basis.css, en een bestand met de naam menuknop.js

  • Het bestand met de naam basis.css is een zogenaamd stylesheet. Hierin is de lay-out van het template vastgelegd. Dit bestand heb je dus nodig als je iets aan het uiterlijk van het template wilt veranderen.

  • Het bestand menuknop.js zorgt ervoor dat de menubalk helemaal verdwijnt als het scherm te klein wordt. In plaats daarvan wordt een menuknop zichtbaar, waar je op kunt klikken of tappen om de verschillende menu-onderdelen zichtbaar te maken.

terug naar het begin

2. Een eigen map aanmaken

Het beste is als je nu eerst een kopie maakt van de uitgepakte map met websitebestanden en die map een eigen naam geeft. Zo blijven de originele bestanden intact en kun je altijd opnieuw beginnen mocht dat nodig zijn.

Zoek nu in je eigen map het bestand index.html op en open het, gewoon door erop te dubbelklikken. De pagina opent zich dan in je webbrowser (Chrome, Internet Explorer of Mozilla Firefox bijvoorbeeld). Maar natuurlijk wil je nog het een en ander aan deze homepage veranderen voordat je hem op internet zet. In de volgende alinea’s lees je hoe je dat kunt doen.

terug naar het begin

3. Veranderingen aanbrengen

Het bestand index.html openen en bewerken

Om veranderingen aan te brengen in de homepage, moet je het bestand met de naam index.html openen in een eenvoudige (gratis) html-editor. Gebruik in ieder geval géén Word om website-bestanden aan te passen). Klik met je rechtermuisknop op index.html, kies voor: Openen met – en klik dan op het gewenste programma. (Andersom kan ook: dus eerst de html-editor openen, dan klikken op Bestand - Openen, en daarna het bestand index.html opzoeken op je computer, aanklikken en openen.)

de title van een pagina komt o.a. op je browsertabblad te staan

Verander om te beginnen de title. (De title is NIET de kopregel bovenaan de tekst, maar de tekst die op het tabje van je webbrowser staat.) In een van de eerste regels van je bestand staat de volgende regel: <title>Titel voor de tab</title>. Vervang het woord tussen de title-codes door iets anders (‘Pauls homepage’ bijvoorbeeld) en sla op. Als je nu het bestand opnieuw opent in je webbrowser, dan zie je deze nieuwe title staan.

Behalve voor het tabblad van je webbrowser, wordt de title die je op deze plaats invoert ook gebruikt door de zoekmachines (als je pagina eenmaal online staat). In het voorbeeld hieronder zie je dat de title van een van mijn webpagina’s door Google als kopje wordt gebruikt voor de link naar deze pagina:

de title tag wordt ook door de zoekmachines gebruikt

Een title kan dus niet te lang zijn, want op geen van deze beide plaatsen is veel ruimte beschikbaar. Zelf zorg ik er daarom zoveel mogelijk voor dat de title van mijn pagina’s niet meer dan ongeveer 55 tekens lang is.

Verander daarna de regel voor de description, die er vlak onder staan. Die ziet er zo uit:
<meta name="description" content="beschrijving">

In deze regel vervang je het woord beschrijving door een korte omschrijving van de inhoud van deze pagina, bijvoorbeeld: Lees over avontuurlijke zeilvakanties in heel Europa. Gebruik niet meer dan zo’n 150-200 tekens voor deze beschrijving.

Verander nu iets in de tekst zelf. Dus open index.html nog een keer in je html-editor en vervang een paar woorden door je eigen naam. Sla weer op en als je de homepage hierna opnieuw oproept in je browser, zie je dat deze verandering is doorgevoerd. Had je de pagina al eerder opgeroepen in je browser, dan kun je ook de refresh-knop gebruiken om de pagina opnieuw op te roepen: in Internet Explorer is dat het pijltje met de twee groene pijltjes rechts naast de adresbalk; in Firefox is het een blauw, rond pijltje en in Google Chrome staat er zo’n rond pijltje aan de linkerkant van de adresbalk.

Het bestand basis.css openen en bewerken

Maar niet alle veranderingen in de homepage kun je op deze manier voor elkaar krijgen. Voor sommige veranderingen (zoals veranderingen in de gebruikte kleuren) moet je het bestand basis.css openen. Dit is het stylesheet. Een stylesheet herken je aan de extensie .css (deze afkorting staat voor: cascading style sheet). Het css-bestand van elk template vind je in de map met de naam overig. Dit bestand open je net zoals het bestand index.html in je html-editor.

Vervang bijvoorbeeld in dit bestand color: black; door color: red; en sla het bestand weer op. Open nu index.html weer in je browser (door erop te dubbelklikken) en kijk wat er veranderd is. (De tekst van de alinea’s is veranderd van zwart in rood!)

terug naar het begin

4. Andere kleuren

Kleuren kunnen in HTML op verschillende manieren worden vastgelegd: met behulp van kleurnamen, kleurcodes of kleurwaardes. Over dit onderwerp heb ik een aparte pagina geschreven: Kleuren met HTML-codes. Deze namen, codes en waardes vind je weer in het stylesheet, het bestand basis.css. Dus wil je andere kleuren gebruiken, dan moet je in dat bestand andere gegevens invullen achter de eigenschappen voor background-color of color.

terug naar het begin

5. Andere tekst

Je bent inmiddels al een stuk verder met je eigen homepage: je hebt een template uitgezocht, de kleuren misschien aangepast, en nu leg ik je uit hoe je de standaardtekst op je homepage verandert. Op de homepage staat nonsense-tekst, die er alleen maar is neergezet zodat je een beeld hebt van hoe een pagina gevuld met tekst eruitziet.

Om deze tekst te veranderen, moet je eerst weer het bestand index.html openen in je html-editor. Heb je dat gedaan, selecteer dan een stukje nonsense-tekst en vervang dat door je eigen tekst. Wil je koppen gebruiken, zet die dan tussen de codes <h1> of <h2>, net zoals dat is gedaan in de nonsense-tekst. In de nonsense-tekst staat ‘Homepage’ tussen de codes <h1> en </h1>. De iets kleinere kop (Duis consectus) staat tussen de codes <h2> en </h2>.

Om woorden cursief te zetten, gebruik je de code <em>: <em>deze tekst komt cursief te staan</em> en wil je vet, dan gebruik je de code <strong>: <strong>zo zet je woorden vet</strong>.

Behalve de codes <em></em> en <strong></strong> kun je ook de codes <i></i> en <b></b> gebruiken om woorden cursief of vet te maken. Ze hebben hetzelfde resultaat als de <em>- en <strong>-codes, maar <em> en <strong> worden gebruikt als de gecursiveerde of vet gemaakte tekst ook in betekenis een bepaalde nadruk moet krijgen, terwijl je <i> en <b> het beste kunt gebruiken als het je er alleen om gaat dat deze woorden een ander uiterlijk krijgen dan de omringende tekst.

Om een zin op een nieuwe regel te laten beginnen gebruik je de code <br>. Zet je twee van deze codes achter elkaar (<br><br>) dan krijg je dus een witregel. (Maar afzonderlijke alinea’s kun je eerlijk gezegd beter in zijn geheel tussen zogenaamde paragraafcodes zetten: <p> en </p> (zoals in de templates ook gedaan is.))

Zoals je misschien hebt opgemerkt, hebben de meeste elementen een begin- en een eindcode. Zo hebben een paragraaf (p), een kop (h1) een een stukje cursieve (em) of vetgedrukte tekst (strong) allemaal een begin- en een eindcode. De eindcode is hetzelfde als de begincode, alleen staat er nog een forward-slash voor. Maar dat geldt niet voor alle elementen. Een witregel bijvoorbeeld (br) of een afbeelding (img) hebben geen afzonderlijke begin- en eindcode.

terug naar het begin

6. Andere afbeeldingen

In elk template staan een of meer afbeeldingen. Meestal is de code voor zo’n afbeelding te vinden in het html-bestand zelf; een enkele keer in het stylesheet.

In template A staat bijvoorbeeld ergens een afbeelding van kussens. De code voor deze afbeelding staat in het bestand index.html en is: <img src="afbeeldingen/kussens.jpg" alt="kussens" class="links" style="width: 300px; padding: 5px; border: 1px solid darkgrey;">

Deze code betekent dat de afbeelding te vinden is in de map afbeeldingen en dat de naam van de afbeelding kussens.jpg is. Verder staat er dat – mocht de foto om de een of andere reden niet weergegeven kunnen worden – er dan de tekst ‘kussens’ vertoond moet worden (alt="kussens") en dat de foto links uitgelijnd moet worden (class="links" – wat dit precies inhoudt, is in het css-bestand vastgelegd onder het kopje img.links). En ten slotte staat er nog vermeld dat de foto 300 pixels breed mag zijn, dat er een donkergrijze rand van 1 pixel dikte omheen moet komen en dat er tussen die rand en de afbeelding zelf 5px ruimte moet blijven .

Wil je op deze plaats een andere afbeelding laten zien, dan vervang je kussens.jpg bijvoorbeeld door de naam van een van je eigen afbeeldingen. Als je het bestand opslaat en opnieuw inlaadt in je browser, zie je dat er nu een andere afbeelding vertoond wordt.

Als je je afbeelding wilt verplaatsen naar een andere plaats op de pagina, verplaats je de code in zijn geheel naar die nieuwe plek en als je hem rechts wilt laten uitlijnen in plaats van links, verander je class="links" in: class="rechts".

Er kunnen ook achtergrondafbeeldingen in een template staan. Meestal is de afbeelding die bovenaan een template staat, een achtergrondafbeelding. De code daarvoor staat niet in de html-pagina, maar in het stylesheet. Daarin staat bijvoorbeeld:

header {
background-image: url(../afbeeldingen/gele-stoffen.jpg);
background-size: cover;
}

Dit betekent dat de header de afbeelding met de naam gele-stoffen.jpg als achtergrond krijgt, en dat deze afbeelding te vinden is in een map met de naam ‘afbeeldingen’. Omdat deze aanwijzing is opgenomen in het stylesheet, moet je eerst een map ‘omhoog’ om in de websitemap uit te komen, en dan weer ‘omlaag’ om terecht te komen in de map ‘afbeeldingen’. Dat wordt aangeduid met: ../

Met de aanduiding background-size: cover; geef je aan dat de volledige ruimte van de header bedekt moet worden door deze achtergrondafbeelding.

terug naar het begin

7. De menuknoppen veranderen

Het volgende dat je waarschijnlijk wilt doen, is de menuknoppen veranderen. Behalve de knop ‘Home’, zijn dat de knoppen ‘Wie zijn wij’, ‘Hobby’s’, ‘Foto’s’, ‘Links’ en ‘Contact’. Sommige menuknoppen bevatten bovendien nog een submenu. Als je op dit moment op een van de menuknoppen klikt, gebeurt er nog niks, dat komt later.

Wil je de tekst van de knoppen veranderen, dan open je het bestand index.html in je html-editor. Vrij bovenaan in dit bestand zie je de volgende code staan:

<div id="menu">
<ul id="hoofdmenu">
<li><a href="index.php">Home</a></li>
<li class="submenu"><a href="#" onClick="return true">Hobby’s</a>
<ul>
<li><a href="#">Fotografie</a></li>
<li><a href="#">Zeilen</a></li>
<li><a href="#">Lezen</a></li>
</ul>
</li>
<li class="submenu"><a href="#" onClick="return true">Foto’s</a>
<ul>
<li><a href="#">Vakanties</a></li>
<li><a href="#">Familie</a></li>
</ul>
</li>
<li><a href="#">Wie zijn wij</a>
</li>
<li class="submenu"><a href="#" onClick="return true">Reizen</a>
<ul>
<li><a href="#">Egypte</a></li>
<li><a href="#">Zuid-Afrika</a></li>
<li><a href="#">India</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>

Als je bijvoorbeeld de tekst op de knop ‘Wie zijn wij’ wilt veranderen in ’Muziek’, dan verander je de regel
<li><a href="#">Wie zijn wij</a> </li>

in:

<li><a href="muziek.html">Muziek</a> </li>

Je verandert dus twee dingen: het hekje verander je in de naam van een nieuw te maken html-pagina en de tekst ‘Wie zijn wij’ verander je in ‘Muziek’.

Gebruik GEEN spaties, aanhalingstekens, komma’s e.d. in de naam van je nieuwe pagina. Een liggend streepje kan wel (bijvoorbeeld ‘over-mij.html’), maar noem je nieuwe pagina niet ‘foto’s.html’ of iets anders met een of ander raar teken erin.

Als je de pagina weer opslaat en opnieuw oproept in je browser, zie je nu de nieuwe tekst staan. Maar als je op de knop met die tekst klikt, krijg je een foutmelding. Want je hebt wel een link aangebracht naar de pagina met de naam ‘muziek.html’, maar deze pagina bestaat nog niet! Hoe je een nieuwe pagina aanmaakt, lees je bij punt 8.

Wil je een menuknop in zijn geheel weghalen, dan verwijder je gewoon het hele stuk code met de naam van de desbetreffende knop, dus vanaf de code <li> tot en met de code </li> (li staat voor list item, oftewel: onderdeel van een lijst).

terug naar het begin

8. Meer webpagina’s maken

De template-map bevat maar één pagina: een pagina met de naam index.html. Dat is de homepage. Een simpele manier om meer pagina’s aan te maken, is door dit index-bestand te openen en daarna op te slaan onder een andere naam, bijvoorbeeld: muziek.html.

Deze nieuwe pagina heeft natuurlijk nog wel exact dezelfde inhoud als de homepage, maar inmiddels weet je hoe je dat kunt aanpassen (zie de eerste stappen op deze pagina). Zo ga je verder totdat je alle pagina’s hebt gemaakt die je wilde maken. Loop daarna nog wel even al je pagina’s na, om te controleren of je op elke pagina wel links naar alle andere pagina’s hebt neergezet.

Tip:
Als je een website wilt maken met meer dan een handjevol pagina’s, dan is dit het moment om gebruik te gaan maken van php includes. Daarmee kun je in één keer de onderdelen aanpassen die meerdere keren terugkomen op je webpagina’s, zoals je menubalk en de balk bovenaan je site.

terug naar het begin

9. En nu online!

Wat je ten slotte moet doen, is de website-pagina’s die je hebt gemaakt uploaden naar de server (het computernetwerk) van een webhosting provider. Want als je je webpagina’s op je eigen computer laat staan, kan niemand ze zien.

Om je pagina’s dus voor iedereen zichtbaar te maken, moet je webruimte kopen bij zo’n hosting provider. Daar zijn er talloze van, en het kan dan ook moeilijk zijn een keus te maken. Mijn site is gehost bij Alphamegahosting.com, waar ik een First Class hostingpakket heb. Dit pakket is niet duur, zeker niet als je per jaar betaalt, en het biedt je ook alle ruimte om te groeien met je website.

Een andere hostingprovider waarmee ik ervaring heb, is One.com. Bij deze provider heb ik een wat kleinere site gehost. Zeker wat ondersteuning betreft vind ik ze wat minder dan Alphamegahosting, maar als de prijs je voornaamste criterium is, dan is dit een aanrader.

Ik raad je alleen niet te kiezen voor gratis webhosting. Daaraan kleven een aantal nadelen, waar ik op een van mijn andere webpagina’s meer over vertel (zie nadelen van gratis web hosting).

Nu moet je alleen nog je webpagina’s uploaden naar de server van je webhost. Daarover lees je meer in een ander artikel (zie de link onder ‘Lees ook’).

Veel succes en vooral veel plezier met het maken van je eigen website!