Je eigen website
Zelf een site maken, hoe doe je dat?

Zoeken

Je bent hier: Home / Zelf een webpagina maken – een handleiding

Zelf een webpagina maken – een handleiding

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.

Geplaatst in De basis Tagged CSS, Doe-het-zelf, HTML, HTML-editor


 

Hoe maak je zelf je eigen site?

  • De basis
    • HTML, WYSIWYG of CMS
    • Kies een HTML-editor
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Een MySQL-database
    • PHP op je eigen computer
    • Je site online zetten met FTP
    • Zelf een webpagina maken – een handleiding
    • Gratis website templates
      • Templates gebruiken
  • Hosting en domeinnaam kiezen
    • Gratis hosting
    • Goedkope hosting
    • Gratis weblog
    • Een domeinnaam registreren
  • Voorbeelden om je website uit te breiden
    • PHP-includes
    • Slideshow op je site
    • Een lightbox voor foto’s
    • Reacties via Facebook installeren
    • Kleuren kiezen
    • Google Analytics installeren
  • WordPress
    • WordPress installeren
    • WordPress-plugins en thema’s installeren
    • Gratis WordPress-thema’s
    • 10 handige WordPress-plugins
    • WordPress en plugins updaten
  • Bezoekers trekken
    • Hoger in Google
      • Hoger in Google – Opbouw van je site
      • Hoger in Google – Webteksten schrijven
    • Social media marketing
    • Een gratis nieuwsbrief maken
  • Geld verdienen met je website
    • Google Adsense op je website
    • Geld verdienen als affiliate
MustReads | Franse films | Frankrijk Puur

Copyright © 2018 Je eigen website.