Gratis html-code
voor een eenvoudige homepage
Op deze pagina vind je in het vak hieronder de basis html-code voor een eenvoudige homepage. Deze html-code bevat de inhoud voor een homepage (in het voorbeeld is dat 'nonsense-tekst' waar je je eigen tekst voor in de plaats moet zetten).
Om hiermee aan de slag te gaan, kopieer je eerst alle code uit het vak. Daarna plak je het in een eenvoudige tekst-editor als Kladblok of je maakt gebruik van een html-editor als HTML Kit. Het bestand sla je op als: index.html
<!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" xml:lang="nl" lang="nl">
<head>
<title>De titel van je webpagina</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="keyword 1, keyword 2" />
<meta name="description" content="beschrijving van je webpagina" />
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />
</head>
<body>
<div id="kop"><p>Mijn eigen website</p></div>
<div id="midden">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="wiezijnwij.html">Wie zijn wij</a></li>
<li><a href="hobbys.html">Hobby's</a></li>
<li><a href="fotos.html">Foto's</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="hoofdvak">
<h1>Morbi aliquam mi quis volutpat</h1>
<p>Lorëm ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum orci sit amet odio varius pulvinar. Quisque malesuada iaculis nibh, a vulputate orci rutrum sed. In vitae neque nibh. Maecenas semper dolor nec orci vestibulum cursus. <span class="nadruk">Phasellus</span> vel eros urna, at laoreet lorem.</p>
<ul>
<li>Nam diam libero, vulputate non aliquet et, tempus consectetur magna.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes.</li>
<li>Morbi consequat ornare arcu at convallis.</li>
</ul>
<p>Nulla et lacus elit, id dapibus ante. Ut vulputate aliquam consequat. In nulla quam, consectetur in consequat quis, facilisis non nisi.</p>
<h2>Duis consectus</h2>
<p>Duis consectus vestibulum condimentum. Morbi bibendum, nisl id hendrerit rutrum, orci metus semper nulla, a condimentum augue turpis quis elit. Donec dolor velit, egestas sit amet faucibus non, placerat eget erat.</p>
<ol>
<li>Etiam lectus neque, hendrerit in feugiat ac, malesuada eu arcu.</li>
<li>Ut ipsum dui, sollicitudin eget viverra a, hendrerit in sapien.</li>
<li>Proin hendrerit orci eget nulla tristique sit amet volutpat arcu.</li>
</ol>
<p>Ut auctor viverra turpis id tincidunt. Curabitur eu lectus non orci interdum sagittis at condimentum justo. Donec porttitor massa tortor, et malesuada odio. Sed eget nisl sit amet mauris tempor ultrices ut eget erat. Mauris sit amet erat quis risus vehicula fermentum. Nulla sollicitudin pulvinar venenatis.</p>
</div>
<div id="kolomrechts">
<img alt="roos" src="roos.gif" width="135" height="135" />
<p>Roos</p>
</div>
</div>
<div id="voet">
<p>© 2011 Jouw eigen website</p>
</div>
</body>
</html>
Ook download je nog even de foto van de roos en zet die op dezelfde plaats op je computer als waar je ook het html-bestand hebt opgeslagen (de html-code bevat namelijk ook de code voor een foto, maar als je die foto niet hebt, dan krijg je in je webpagina alleen maar een rood kruisje te zien op de plaats waar hij hoort te staan).
Dubbelklik je nu op het bestand met de naam index.html, dan wordt automatisch je standaard-webbrowser geopend en krijg je het volgende te zien:
Daarmee ben je waarschijnlijk niet tevreden. De volgende stap is dan ook dat je het uiterlijk gaat vastleggen van de verschillende onderdelen uit dit html-bestand. Dat doe je met behulp van css. (Klik hier als je meer wilt weten over css.) Vrij bovenaan in de html-code die je hebt gekopieerd, zie je deze code staan:
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />
Daarin staat dat de opmaakkenmerken die bij het bestand 'index.html' horen, te vinden zijn in een bestand dat 'basis.css' heet. Zo'n bestand heb je nog niet, dus dat maak je aan door (in je tekst- of html-editor) een leeg bestand te openen en dat op te slaan onder de naam 'basis.css'. Dit bestand zet je natuurlijk op je pc weer op dezelfde plaats neer als waar ook je index-bestand staat. Het gemakkelijkste is natuurlijk als je een aparte map aanmaakt voor je website-bestanden.
Als je de html-code uit het vak bovenaan goed bekijkt, dan zie je dat er dat er bovenaan een gedeelte is dat tussen twee 'tags' staat: <head> en </head>. (De eerste is een begin-tag; de tweede een eind-tag.) Vlak daaronder begint de 'body', dit gedeelte staat tussen de tags <body> en </body>.
Alles wat tussen de head-tags staat, is het onzichtbare gedeelte van je site. De informatie hierin is o.a. bedoeld voor de browsers die de code moeten interpreteren, en voor de zoekmachines. Het zichtbare gedeelte van je site bevindt zich tussen de twee body-tags. De onderdelen die zich hierin bevinden worden vormgegeven met behulp van het stylesheet (je css-bestand).
Nu ga je één voor één de onderdelen uit je html-bestand doorlopen en vastleggen hoe ze eruit moeten komen te zien. In het css-bestand begin je bijvoorbeeld met de body, en daarna met de kop en het middelste gedeelte:
body {
background-color: silver;
font-family: "Trebuchet MS", sans-serif;
font-size: 100%;
color: black;
}
#kop {
width: 900px;
height: 74px;
margin: 0 auto;
background-color: navy;
}
#kop p {
font-family: Georgia, serif;
font-size: 40px;
font-weight: bold;
color: white;
font-variant: small-caps;
padding-left: 20px;
padding-top: 16px;
}
#midden {
width: 898px;
border-left: 1px solid black;
border-right: 1px solid black;
margin: 0 auto;
} Sla je dit css-bestand op en ververs je de index-pagina in je browser, dan ziet je pagina er nu zo uit (je scherm verversen doe je in Internet Explorer door op de knop met de twee groene pijltjes te klikken die zich direct rechts van de URL-balk bevindt):
Even een uitleg bij de css-code hierboven: zoals je ziet, staan alle opmaakeigenschappen tussen accolades, en elke eigenschap eindigt met een dubbele punt. Vóór elk blokje eigenschappen staat vermeld om welk onderdeel uit je html-code het gaat: om de body als geheel, om de kop, om de paragraaftekst in de kop, of om het middenstuk.
Het onderdeel 'body' is een html-term, de andere onderdelen (kop, midden), zijn termen die ik zelf bedacht heb. Daarom komt daar een hekje voor te staan. In de html-code uit het eerste blok zijn ze aangegeven met een 'id': <div id="kop">. Een 'id' kan maar eenmaal in een html-pagina voorkomen: elke pagina heeft natuurlijk maar één kop.
Maar er kunnen op je pagina ook onderdelen zijn die vaker voorkomen. Denk bijvoorbeeld aan stukjes tekst die je nadruk wilt geven door ze vet en rood weer te geven. Zulke onderdelen krijgen geen 'id', maar een 'class'. Dus: <div class="nadruk">. Zo'n class wordt niet voorafgegaan door een hekje (#), maar door een punt. In dit geval ziet je css-code er dus zo uit:
.nadruk {
font-weight: bold;
color: red;
}
Het gaat hier te ver om uitgebreid uit de doeken te doen hoe css werkt, maar in mijn video-cursus Website-ontwerp laat ik je stap voor stap zien hoe je op basis van de html-code uit het bovenste vak de volgende website bouwt:
Wil je zelf aan de slag, dan lees je meer over css-eigenschappen in de Handleiding HTML.
Van 'gratis html-code' terug naar de homepage