Klaar voor de praktijk? Hier leer je hoe je een eenvoudige webpagina maakt waar je een stukje over jezelf schrijft en waaraan je een foto van jezelf toevoegt.
Heb je de voorgaande pagina’s op zelf-een-site-maken.nl goed doorgelezen? Dan is het nu tijd om het geleerde in de praktijk te brengen. Hier lees je hoe je zelf een eenvoudige website maakt waarop je jezelf kunt presenteren. Dit alles in HTML en CSS, je hoeft je dus nog niet al te veel te verdiepen in JavaScript of PHP.
We beginnen met de basis HTML-code waar iedere website uit bestaat.
<html>
<head>
<title>Titel van de webpagina</title>
</head>
<body>
</body>
</hml>
Kopieer deze naar kladblok of een HTML-editor. Het is een goed gebruik om je HTML-code te beginnen met het aangeven van het doctype, wat je in de eerste regel ziet. Zonder doet een eenvoudige website het ook prima, maar het ontbreken ervan kan problemen opleveren bij complexere websites.
Tussen de <body> tags plaatsen we vervolgens de content van de webpagina.
<style type="text/css">
body {
font-family:Tahoma;
font-size:13px;
background:#EFEFEF;
}
#content {
width:600px;
}
div.foto {
margin:10px;
float:left;
}
div.bio {
padding-top:10px;
}
div.hobbies {
margin:10px;
clear:both;
}
div.hobbies ul {
list-style-type: square;
}
</style>
<div id="content">
<div class="foto"><img src="images/naam-van-afbeelding.png" width="100" height="150" /></div><div class="bio">Schrijf een korte biografie
van jezelf en plaats die tussen deze beide div-tags. </div>
<div class="hobbies">Maak hier een opsommingslijst met je hobby's.<br />Mijn hobby's zijn:<ul><li>Hobby 1</li><li>Hobby 2</li><li>Hobby
3</li></ul></div>
De code begint met een stuk CSS, waarin het lettertype en de grootte van de letters van de tekst over de hele body van de webpagina wordt ingesteld op Tahoma en 13 pixels (probeer gerust eens een ander lettertype uit!).
De breedte van de content-div stellen we in op 600 pixels, zodat de pagina niet te breed wordt op breedbeeldschermen. De content-div geven we trouwens een id mee in plaats van class. Een class kan meerdere keren op een webpagina gebruikt worden, een id eenmalig. We kunnen dus maar één div met id content hebben, en meerdere divs met class foto, of class bio. In de CSS-code gebruik je het hekje # om een id aan te geven. Een class geef je met een punt aan.
Vervolgens krijgt de div-tag met de class ‘foto’ een marge van 10 pixels, en een uitlijning links, zodat de tekst er netjes aan de rechterkant naast komt.
De div met de biografie krijgt een padding vanaf de bovenkant van 10 pixels. (Het verschil tussen padding en marge wordt uit dit plaatje duidelijk).
De div met een opsomming van de hobby’s krijgt een clear:both; mee, wat ervoor zorgt dat dit gedeelte op een nieuwe regel begint (de afbeelding wordt er dus nooit links van geplaatst, ook niet als de tekst van de biografie te kort is).
Tot slot wil ik het uiterlijk van de opsommingslijst iets veranderen ten opzichte van de standaardversie: ik wil blokjes in plaats van rondjes. ‘list-style-type: square;’ is wat hiervoor zorgt.
Zoek nu een kleine foto van jezelf op, en vervang “images/naam-van-afbeelding.png” door de bestandsnaam en locatie van die foto. Staat de afbeelding in dezelfde map als waar je straks dit bestand op gata slaan, verwijder dan “images/” en gebruik “naam-van-afbeelding.png”. Uiteraard kun je in plaats van een png-bestand ook een jpg-bestand nemen.
Als je al deze tekst nu tussen de <body></body> geplaatst hebt, sla het bestand dan op als biografie.html. Open dit bestand vervolgens in je webbrowser, en voilà, je eerste webpagina met HTML en CSS!
Is het niet helemaal gelukt? Geen probleem, hier vind je het volledige bestand. Open het en klik met de rechtermuisknop en kies voor ‘Paginabron weergeven’. Je vindt hier de volledige broncode en kunt deze vergelijken met je eigen versie.