Je eerste, goede website maken
Een website maken is helemaal niet moeilijk, een goede website maken ook niet, maar het vereist wel wat meer investering van de bouwer. Voordat je dan ook begint met de feitelijke inhoud is het belangrijk om eerst te letten op de structuur van je website. In het volgende voorbeeld gaan we dan aan de slag met een website gemaakt in XHTML en CSS.
De meeste html-editors doen het automatisch, maar toch is het belangrijk om eerst eens een blik te werpen op de basis van je site. Een doctype, een header met de juiste inhoud en een body is van wezenlijk belang voordat je ook maar verder inhoud geeft aan je site. Dus zorg voor de volgende inhoud:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Hier komt de titel</title>
<link rel=”stylesheet” type=”text/css” href=”jouw_stijl_blad.css” />
</head>
<body>
…
…
</body>
</html>
Nu we xhtml transitional gebruiken zitten we iets ruimer in de mogelijkheden dan met XHTML strict, wat gewoon wat meer beperkingen kent.
De meta-tag definieert de tekencode. Voor europese talen is UTF-8 prima.
Daarnaast is er een title-tag opgenomen en een link-tag voor het stijlblad. De body mag niet ontbreken en alle content moet in dit gedeelte worden gezet.
Het volgende deel dat we gaan maken is de body. Hiervoor moeten we bepalen welke onderdelen er op de site komen. Wij kiezen voor de kop, de navigatie, inhoud en de footer. Er kunnen meer onderdelen op komen, maar de meeste sites bestaan uit deze vier onderdelen. Voor elk onderdeel maken we een div-element aan met een uniek ‘id’. Plaats de vier in volgorde van verschijnen op je html pagina. Dus als volgt voor ons voorbeeld:
<div id=”kop”></div>
<div id=”navigatie”></div>
<div id=”inhoud”></div>
<div id=”footer”></div>
Vaak worden deze div-elementen nog genest in een vijfde div-element. Deze wordt vaak een wrapper genoemd, een soort omhulsel, die geldig is voor alle andere div-elementen.
Wellicht lijkt deze opzet wel erg eenvoudig, maar dit is nu juiste de bedoeling van een website die gemaakt wordt met xhtml en css. Met css bepaal je straks hoe de div-elementen er uit gaan zien.
Een belangrijke regel bij xhtml is dat de opbouw van een pagina semantisch moet zijn. Met andere woorden, gebruik het element waar die voor bedoeld is. Zo moet je <h1> gebruiken voor een belangrijke kop en niet om een paragraaf mee te maken, daarvoor gebruik je <p>. Maak je een lijst, gebruik dan <ul> voor een ongeordende lijst en <li> voor een onderdeel van die lijst en ga niet aan de slag met paragrafen en <br />.
Op deze manier blijft je pagina nl. logisch van indeling, ook voor mensen die geen stijlen kunnen of willen zien. En dat geld ook voor de zoekmachines die de stijlen negeren. Wat ook handis is, is dat je een stijl maar een keer hoeft te veranderen. wil je bijvoorbeeld de kleur van een kop (<h1>) van oranje naar blauw hebben, dan hoeft dat maar een keer worden gewijzigd in het stijlblad. Je hoeft de hele xhtml-pagina niet meer aan te raken.
Een volgend artikel hopen we in te gaan op het uitwerken van de stijlen met behulp van een stijlblad. Wanneer je dat wilt ga dan eens werken aan de inhoud van je website en vul de vier div-elementen met de tekst die je erin wilt plaatsen.
