Je eerste website

Modern Markup is op dit moment nog in ontwikkeling. Er is daarom altijd een kans dat je op een fout stuit. In dat geval zouden we het erg op prijs stellen als je deze fout bij ons zou melden. Bij voorbaat dank.

Als je tot hier bent gekomen betekent het dat je nu genoeg basiskennis heb vergaard om een redelijke webpagina te maken. In dit hoofdstuk worden alle onderdelen die we in de voorgaande hoofdstukken hebben besproken plus een aantal nieuwe elementen en eigenschappen samengevoegd om zo een simpele webpagina in elkaar te zetten. Van dit proces bespreken we hoe:

de structuur van de pagina in elkaar steekt;
de inhoud van de pagina eruit moet zien;
en hoe we de pagina opmaken d.m.v. een aantal bekende en nieuwe elementen en eigenschappen.

De structuur van de pagina

We beginnen natuurlijk met de HTML code van de pagina. Daarin komt namelijk de inhoud. Zoals elke HTML pagina hoort te hebben, bestaat de basis van onze pagina natuurlijk uit:

De DOCTYPE die verwijst naar de DTD;
Het HTML element met het lang attribuut;
Het HEAD element;
Het TITLE element;
Het BODY element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
 <title>Mijn eerste website!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
<!-- De inhoud van jouw webpagina -->
</body>
</html>

De inhoud van de pagina

Nu de structuur van de pagina af is, gaan we de pagina wat inhoud geven. Dat hangt natuurlijk helemaal af van het onderwerp. Die keuze laten we aan jou over. Ook de inhoud mag je natuurlijk geheel zelf bepalen. Wij gebruiken voor dit hoofdstuk een beknopte geschiedenis van het internet:

<h1>Het internet</h1>
<p><img src="first-server.jpeg" alt="De eerste server, ontwikkeld door Sir Tim Berners-Lee."></p>

<p>Voor de meeste onder ons is het internet een onmisbaar hulpmiddel geworden.
Het mooie van het internet is o.a. dat de mogelijkheden oneindig zijn. Zo blijft
het gebruik van het internet nog steeds groeien, zoals het in de geschiedenis
van het internet altijd heeft gedaan.</p>

<p>Het begon allemaal in de hitte van de Koude Oorlog, toen de Amerikanen zagen
dat het machtige Amerika zijn voorsprong verloor aan de Sovjet Unie. De
Amerikaanse regering nam toen de beslissing om het instutuut <a
href="http://nl.wikipedia.org/wiki/Advanced_Research_Projects_Agency"><abbr
title="Advanced Research Projects Agency">ARPA</abbr></a> op te richten. Deze
zou een technologie moeten ontwikkelen die Amerika in staat zou brengen om niet
verrast te worden door een militaire vijand.</p>

<p>Op 7 april 1969 werd door ARPA het <a
href="http://nl.wikipedia.org/wiki/ARPANET">ARPANET</a> ontwikkeld. Deze
voorloper van het hedendaagse internet kende sindsdien een enorme groei. Zo
werden in de periode tussen 1974 en 1984 andere netwerken die niet door ARPA
waren ontwikkeld gekoppeld aan het ARPANET. In 1984 werd ook het <a
href="http://nl.wikipedia.org/wiki/Domain_Name_System"><abbr
title="Domain Name System">DNS</abbr></a> protocol verbeterd die het systeem
van de huidige domeinnamen mogelijk maakt.</p>

<p>In 1991 was het dan zover. Toen ontwikkelde <a
href="http://nl.wikipedia.org/wiki/Tim_Berners-Lee">Sir Tim Berners-Lee</a> de
taal HTML dat sinds dien gebruikt wordt door de talloze websites die het
hedendaagse internet kent om hun informatie makkelijk beschikbaar te maken op
het internet.</p>

<p>Bron afbeelding: <a href="http://nl.wikipedia.org/wiki/Tim_Berners-Lee">Wikipedia</a>.</p>

<p>Copyright © 2006 Jouw website.</p>

De bovenstaande code is de inhoud van jouw pagina en hoort daarom in het BODY element. Laten we de structuur van de pagina en de inhoud samenvoegen en opslaan als bijvoorbeeld webpagina.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
 <title>De geschiedenis van het internet</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>

<h1>Het internet</h1>
<p><img src="first-server.jpeg" alt="De eerste server, ontwikkeld door Sir Tim Berners-Lee."></p>

<p>Voor de meeste onder ons is het internet een onmisbaar hulpmiddel geworden.
Het mooie van het internet is o.a. dat de mogelijkheden oneindig zijn. Zo blijft
het gebruik van het internet nog steeds groeien, zoals het in de geschiedenis
van het internet altijd heeft gedaan.</p>

<p>Het begon allemaal in de hitte van de Koude Oorlog, toen de Amerikanen zagen
dat het machtige Amerika zijn voorsprong verloor aan de Sovjet Unie. De
Amerikaanse regering nam toen de beslissing om het instutuut <a
href="http://nl.wikipedia.org/wiki/Advanced_Research_Projects_Agency"><abbr
title="Advanced Research Projects Agency">ARPA</abbr></a> op te richten. Deze
zou een technologie moeten ontwikkelen die Amerika in staat zou brengen om niet
verrast te worden door een militaire vijand.</p>

<p>Op 7 april 1969 werd door ARPA het <a
href="http://nl.wikipedia.org/wiki/ARPANET">ARPANET</a> ontwikkeld. Deze
voorloper van het hedendaagse internet kende sindsdien een enorme groei. Zo
werden in de periode tussen 1974 en 1984 andere netwerken die niet door ARPA
waren ontwikkeld gekoppeld aan het ARPANET. In 1984 werd ook het <a
href="http://nl.wikipedia.org/wiki/Domain_Name_System"><abbr
title="Domain Name System">DNS</abbr></a> protocol verbeterd die het systeem
van de huidige domeinnamen mogelijk maakt.</p>

<p>In 1991 was het dan zover. Toen ontwikkelde <a
href="http://nl.wikipedia.org/wiki/Tim_Berners-Lee">Sir Tim Berners-Lee</a> de
taal HTML dat sinds dien gebruikt wordt door de talloze websites die het
hedendaagse internet kent om hun informatie makkelijk beschikbaar te maken op
het internet.</p>

<p>Bron afbeelding: <a href="http://nl.wikipedia.org/wiki/Tim_Berners-Lee">Wikipedia</a>.</p>

<p>Copyright © 2006 Jouw website.</p>

</body>
</html>

Het opmaken van de pagina

Als je de bovenstaande code opslaat en bekijkt in een browser, dan ziet dat er nogal saai uit. Daarom is er natuurlijk CSS uitgevonden! We gaan dus met CSS de pagina iets spectaculairder eruit laten zien. Zo zou het natuurlijk wel leuk zijn om een mooie achtergrond te maken.

We kiezen voor een simpele achtergrond die een subtiele kleuroverloop (in het Engels wordt dit een "gradient" genoemt) heeft van licht grijs naar wit voor een metallic look. De makkelijkste manier om dit effect te creëeren is om met een programma zoals Adobe Photoshop of The GIMP zo'n simpele overloop te maken en op te slaan en dan horizontaal aan de bovenkant van de pagina te laten verspreiden.

Als laatste veranderen we ook nog de lettertype. We hebben gekozen voor de lettertype die op Modern Markup ook gebruikt wordt: Trebuchet MS. Vervolgens maken we de tekstkleur iets minder zwart aangezien donker zwart (eigenlijk zo zwart mogelijk) op wit nogal vervelend kan lezen door het enorme contrastverschil. Om deze reden hebben we dus gekozen voor de kleur #222 i.p.v. #000. Hieronder de CSS code die de bovenstaande effecten werkelijkheid maakt:

html {
	background:#FFF url(tim-berners-lee/gradient.png) repeat-x;
	font:0.8em Trebuchet MS,Verdana,Arial,sans-serif;
	color:#222;
}

Dus sla de bovenstaande code op als, bijvoorbeeld, "style.css" in dezelfde map als webpagina.html. Open dan webpagina.html weer, want we moeten de LINK element toevoegen die naar de style.css linkt. Het LINK element hoort natuurlijk in HEAD, zoals hier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
 <title>De geschiedenis van het internet</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<!-- De rest van de pagina -->

Als we de pagina opnieuw opslaan en er in een browser heen gaan, ziet die er ongeveer zo uit.

De `id` en `class` attributen

Maar dat is natuurlijk niet genoeg. Het zou natuurlijk leuk wat leuker staan als we het H1 element kunnen opmaken. Zo is Georgia wel een mooi sierlijk lettertype voor een kop (H1 dus). Ook moet het P element met daarin de bron van de informatie opgemaakt worden, maar nu is er een probleem. Je kan natuurlijk gewoon in de CSS het P element opmaken, maar er zijn vier Ps op de hele pagina, dus gaan ze er allemaal hetzelfde uitzien. Dat moet natuurlijk niet, maar gelukkig hoeft dat ook niet, want hiervoor gebruiken we de id en class attributen. Je kan die attributen op elk element zetten zodat je gemakkelijk dat element apart kunt opmaken in de CSS. Het verschil tussen de id en class attributen zijn:

D.m.v. het id attribuut kan je een element een unieke identiteit geven. Dat betekent dat geen enkel ander element dezelfde id mag hebben. Deze regel heeft 3 voordelen:
- je kan dit element apart van de rest opmaken;
- je kan naar dit element verwijzen in de IRI (URL) door aan het einde van de IRI #id-van-het-element te plakken;
- en je kan dit attribuut heel gemakkelijk gebruiken in scripttalen zoals JavaScript.
Het class attribuut kan enkel en alleen gebruikt worden door de CSS. Het verschil met id is dat de waarde van class wel vaker mag voorkomen. Je kan d.m.v. dit attribuut dus bepaalde elementen groeperen in klassen zodat je deze elementen hetzelfde kan opmaken. Een ander verschil met dit attribuut en id is dat een element maar 1 id mag hebben maar mag wel behoren tot meerdere klassen. Je kan een element toevoegen aan een tweede klasse door een spatie na de eerste klasse te plaatsen en vervolgens de naam van de tweede klasse toevoegen.

Zoals je ziet kunnen beide attributen gebruikt worden om via de CSS het element apart van de rest op te maken. Nu vraag je je waarschijnlijk af hoe je in de CSS deze elementen kan selecteren. Dit kan d.m.v. de id- en class-selectors. Als je een element wilt selecteren met een bepaald id attribuut, dan gebruik je als selector de id van het element met daarvoor het # karakter. Als je de elementen met een bepaalde klasse wilt selecteren, dan gebruik je i.p.v. het # karakter een . karakter. Beide selectors zijn in dit voorbeeld te zien:

#id {}
.class {}

Om terug te komen op de pagina die we aan het maken zijn. We willen dus de P met daarin de bron opmaken zonder de andere twee Ps te beïnvloeden. We geven dus die P een class attribuut zodat we die apart kunnen opmaken. We hadden ook voor id kunnen kiezen, maar als we in de toekomst meerdere bronvermeldingen aan de pagina willen toevoegen gaat dat niet. Een id (zoals id="bron") kan immers maar één keer op een pagina voorkomen. We kiezen dus om het class te gebruiken aangezien we de waarde van een class wel meerdere keren op een pagina kunnen gebruiken.

<!-- De rest van de pagina -->

<p class="bron">Bron afbeelding:
<a href="http://nl.wikipedia.org/wiki/Tim_Berners-Lee">Wikipedia</a>.</p>

</body>
</html>

Nu kunnen we in de CSS de waarde van class gebruiken door het zoals hier op te maken:

.bron {
	font-size:0.9em;
}

.bron,.bron a {
	color:#999;
}

h1 {
	font:2em Georgia,serif;
}

Zoals je ziet is ook het lettertype van het H1 element veranderd. En nu we toch bezig zijn, kunnen we ook gelijk de copyrightregel opmaken. Dit element is ook een P, dus moeten we weer een class of een id attributen gebruiken. We kiezen dit keer voor het id attribuut. We gebruiken dit attribuut i.p.v. class omdat elke pagina maar één copyrightregel nodig heeft. Meerdere copyrightregels zijn namelijk een beetje nutteloos, dus hoeven we de waarde van het id attribuut voor de copyrightregel maar één keer te gebruiken. Zo kunnen we ook de voordelen van het id attribuut die aan het begin van deze paragraaf staan gebruiken.

We kiezen als waarde voor het id attribuut simpelweg copyright. Om in de CSS dit element op te maken gebruiken we dus als selector #copyright. Hieronder staat de CSS code van het vorige voorbeeld met de toegevoegde opmaak voor de copyrightregel:

.bron {
	font-size:0.9em;
}

.bron,.bron a,#copyright {
	color:#999;
}

#copyright {
	margin-top:3em;
	padding-top:.5em;
	border-top:1px solid #DDD;
	text-align:center;
}

h1 {
	font:3em Georgia,serif;
}

Als je de bovenstaande CSS toevoegt aan je style.css bestand, opslaat en weer naar je browser gaat, dan ziet dat er zo uit.

Het `float` eigenschap

Als we kijken naar de pagina over het internet, dan zien we een foto van de eerste webserver, gemaakt door Tim Berners-Lee. Aan de rechterkant van deze foto is jammer genoeg een grote leegte. Dit maakt de pagina een stuk langer dan nodig is, aangezien we er ook voor kunnen zorgen dat de tekst aan de rechterkant van de afbeelding begint. Dit doen we d.m.v. het float eigenschap. Dit eigenschap kan een element naar de linker of rechter kant laten "zweven". Hierdoor kunnen de elementen die na het zwevende element komen aan de andere kant van dit zwevende element geplaatst worden.

Op de pagina over het internet willen we dus dat de tekst aan de rechterkant van de foto komt te staan. Hiervoor moeten we de afbeeldingen dus naar links laten zweven waardoor de tekst die eronder staat naar de rechterkant kan komen. We doen dit door het toevoegen van de volgende CSS code aan onze stylesheet:

img {
	float:left;
}

Als we nu weer de pagina bekijken nadat we het CSS bestand hebben opgeslagen, ziet dat er zoals hier uit. Wil je de afbeelding aan de rechterkant van de tekst hebben, dan gebruik je simpelweg de waarde right i.p.v. left. Wij houden het in dit voorbeeld voor het gemak zoals het nu is. Het zou echter wel beter zijn als er wat ruimte komt tussen de afbeelding en de tekst. Dat leest namelijk wat prettiger. Hiervoor gebruiken we natuurlijk het margin eigenschap die we in het laatste paragraaf van De basis van CSS zagen. Maar we willen alleen maar margin aan de rechterkant van de afbeelding, dus gebruiken we het eigenschap margin-right. En als we dan toch bezig zijn met het opmaken van de afbeelding, dan maken we er gelijk een mooie omlijsting omheen d.m.v. de padding, background en border eigenschappen. We krijgen dan de volgende CSS code voor het IMG element:

img {
	float:left;
	margin-right:1em;
	padding:3px;
	background:#FFF;
	border:1px solid #CCC;
}

Het `DIV` element

Als je deze code hebt toegevoegd aan je CSS en opgeslagen, dan ziet de pagina er nu best goed uit. Als je echter zou willen dat de tekst en de foto allebei een eigen kolom krijgen (en dat de tekst dus niet verder loopt onder de foto), dan moeten we een aantal dingen veranderen in de code. Dan moeten we nu eigenlijk hetzelfde doen als wat in de layout van Modern Markup is gedaan. Daar hebben we namelijk ook d.m.v. het float eigenschap het secundaire menu aan de rechterkant van de pagina naar rechts laten zweven en ervoor gezorgd dat de tekst er niet onderdoor kan lopen.

Wat we moeten doen is de tekst (die bestaat uit 4 Ps) samenvoegen in één element zodat we die naar de rechterkant van de afbeelding kunnen zweven. Hiervoor maken we kennis met een nieuw element: het DIV element. Dit element heeft geen speciale betekenis maar hoort enkel en alleen gebruikt te worden om elementen te groeperen in situaties zoals deze. We zijn echter nog niet klaar, want nu moeten we ook voor zorgen dat de tekst niet onder de afbeelding meer komt. Gelukkig hoeven we niet veel te veranderen. Het enige wat we hoeven te doen is het margin-right eigenschap wat we op het IMG element gebruikten weg te halen en de volgende CSS code die betrekking heeft op het DIV element toe te voegen.

div {
	margin-left:275px;
}

Met deze laatste toevoeging komen we uit op deze pagina. Zo zie je maar dat je d.m.v. een relatief simpele CSS code een best leuke pagina kan maken. Maar één pagina is natuurlijk nog lang geen website. Daarvoor komt nog wel iets meer bij kijken. Daar zijn de komende hoofdstukken op gericht. Daar leer je hoe je lijsten moet gebruiken (voor bijvoorbeeld menu's), formulieren en tabellen. Dan wordt er in het laatste hoofdstuk besproken hoe Modern Markup (deze site) is gemaakt. Heb je je daar doorheen kunnen worstelen, dan heb je HTML en CSS voor het grootste gedeelte onder de knie om een fatsoenlijke website te maken.

We beginnen met lijsten »