ZELF SITES BOUWEN

Bouw zelf stap voor stap je site met HTML en geef het vorm met CSS. Gemakkelijker dan je denkt!


Dit wil je doen: Dit is het kladblaadje met de tekst (en later ook de codes) die zometeen door je browser omgevormd wordt tot een site:
1) Voordat je het internet kunt verrijken met een prachtige, zelfgebouwde site, zul je eerst een testsite moeten bouwen om op te oefenen en mee te experimenteren.

Daar heb je geen dure programma's voor nodig; een kladblaadje is genoeg. Open dus Kladblok en typ (of kopieer) de tekst die je hiernaast (rechts) in het grijze blok ziet staan. Dat is - voor nu - alles. Klik dan op Bestand en daarna op Opslaan als.... Onderaan het scherm staat bij Opslaan als...: Tekstbestanden. Verander dat in Alle bestanden. Geef het bestandje nu een naam, maar laat achter de punt niet txt staan maar zet er htm voor in de plaats. Dus zoiets als dit: test1.htm . Let je even op in welke map hij terecht komt? Liefst op je bureaublad! Sla nu op.

Vanaf nu wordt dat bestandje aangezien voor een webpagina. Klik erop en het wordt door je internetbrowser geopend en getoond. Hieronder zie je het resultaat. Je eerste webpagina!
Mijn eerste webpagina!
Hieronder zie je hoe je site er dan uitziet:

Mijn eerste webpagina!


Dit wil je doen: Dit is het kladblaadje met tekst en codes die door je browser omgevormd wordt tot een site:
2) Tja, prachtig natuurlijk, maar misschien lang niet zo spannend als je had gehoopt. Je hebt zelf niks kunnen kiezen: Lettertype, letterkleur, lettergrootte en de kleur van de achtergrond stonden blijkbaar al vast. Dat is ook zo.

Voordat we dat gaan aanpakken, gaan we het kladblaadje beter "verteerbaar" maken voor onze internetbrowser. Met de declaration <!DOCTYPE html> weet de browser precies welke regels hij moet toepassen voor jouw codes. En met <html> laat je zien waar jouw HTML-codes beginnen en met </html> waar het stopt.

Zo'n commando tussen die rare haken heet een tag. Meestal is er een een begin- én een eindtag want je moet aangeven van waar tot waar iets geldt.

Kopieer de code (en tekst) die hiernaast staan naar een nieuw kladblaadje (net als zonet) of - nog liever - plak het over het vorige blaadje en klik op Opslaan. Ben je je kladblaadje kwijt? Klik met je rechtermuisknop op het bestand in de map (of bureaublad?) en kies bij Openen met voor Kladblok. Na je wijzigingen kun je gewoon op Opslaan klikken. Haal "je site" tevoorschijn en druk op de F5-toets om de pagina te verversen.
<!DOCTYPE html>
<html>
Mijn tweede webpagina ... ziet er eigenlijk niet beter uit!
</html>
En zo ziet je site eruit:

Mijn tweede webpagina ... ziet er eigenlijk niet beter uit!



Dit wil je doen: Dit is de code die je gebruikt:
3) Die tags kun je ook gebruiken om jouw tekst een andere lettergrootte te geven. Met de tags <h1> tot en met <h6> kun je koppen in verschillende groottes boven teksten zetten. Probeer maar eens uit en kijk naar de verschillen!

Voor normale stukken tekst gebruik je de tag <p> van paragraph.

Denk eraan: gebruik telkens weer begin- en eindtags: <h1> tekst tekst tekst </h1>. 		<!DOCTYPE html>
<html>

<h1>Mag het een beetje groter?</h1>
<h2>Of iets minder groot?</h2>
<p>En hier weer normale tekst.</p>

</html>
En zo ziet je site eruit:

Mag het een beetje groter?

Of iets minder groot?

En hier weer normale tekst.


Dit wil je doen: Dit is de code die je gebruikt:
4) Soms wil je midden in een zin even iets benadrukken. Hiernaast kun je zien welke tags je daarvoor gebruikt.

De <b> komt van bold = vetgedrukt. De <i> komt van italic = schuingedrukt oftewel cursief. En de <u> komt van underline = onderstreept.

Let op: Als je meerdere commando's tegelijk geeft, ga je de tags "nesten". Gebruik de eindtags in de omgekeerde volgorde. Kijk maar hoe dat hiernaast gebeurt. 		<!DOCTYPE html>
<html>

<p>Dit is een gewoon zinnetje.</p>
<p>Hier is een woordje <b> vet </b> gemaakt.</p>
<p>Hier is een woordje <i> cursief </i> gemaakt.</p>
<p>Hier is een woordje <u> onderstreept </u>.</p>
<p>Woordjes mogen ook <b><i> vet en cursief </i></b> zijn of
zelfs <b><i><u> vet, cursief en onderstreept </u></i></b> maar let op de volgorde van de eindtags.</p>

</html>
En zo ziet je site eruit:

Dit is een gewoon zinnetje.

Hier is een woordje vet gemaakt.

Hier is een woordje cursief gemaakt.

Hier is een woordje onderstreept.

Woordjes mogen ook vet en cursief zijn of zelfs vet, cursief en onderstreept maar let op de volgorde van de eindtags.



Dit wil je doen: Dit is de code die je gebruikt:
5) Om meer te kunnen doen met de webpagina, moeten we binnen het HTML-gebied een verdeling maken in "head" en "body". De inhoud (de teksten dus) van de website zit in de body: daar staan, tussen woorden en zinnen, nog maar een paar lompe HTML-codes. Maar hoe het geheel er precies komt uit te zien, wordt centraal geregeld in de head. Wat daar staat geldt voor de hele site. Zeker in het gedeelte "style" dat in de head zit, wordt de hele aankleding georganiseerd.

Even wat spelen met kleuren!		 <!DOCTYPE html>
<html>

<head>
<style>
h1 {color: green;}
h2 {color: red;}
p  {color: blue;}
</style>
</head>

<body>
<h1>Het letterformaat h1 was zojuist nog zwart.</h1>
<h2>En letterformaat h2 ook!</h2>
<p>In de <b>style</b> is nu geregeld dat <b>h1</b>, <b>h2</b> en <b>p</b> niet meer (standaard) zwart zijn, maar een kleurtje hebben gekregen. </p>
</body>

</html>
En zo ziet je site eruit:

Het letterformaat h1 was zojuist nog zwart.

En letterformaat h2 ook!

In de style is nu geregeld dat h1, h2 en p niet meer (standaard) zwart zijn, maar een kleurtje hebben gekregen.



Dit wil je doen: Dit is de code die je gebruikt:
6) De codes die we op ons kladblaadje gebruiken zijn in HTML-taal. Ook tussen de teksten door geven we met tags onze commando's. Maar op één plekje op het blaadje wordt een andere code gebruikt: Tussen <style> en </style> gebruiken we CSS-taal. Hier geen tags met rare haken. Hier wordt de site heel fijntjes vormgegeven. Telkens wordt eerst het onderdeel genoemd en dan staat daarachter tussen accolades (die krullerige haken) wélke eigenschap wélke waarde moet krijgen.

Dat letterformaat h2 de kleur rood moet hebben, schrijf je zo:
h2 {color: red;}. Je snapt de dubbele punt? Let op dat de punt-komma betekent dat je klaar bent met je commando en dat je daarachter een nieuw zou kunnen geven. 		<!DOCTYPE html>
<html>

<head>
<style>
h2 {color: red; background-color: orange; font-style: italic; letter-spacing: 4px;}
p  {color: blue; font-size: 20px; border: 6px solid green;}
</style>
</head>

<body>
<h2>Letterformaat h2 heeft nieuwe eigenschappen</h2>
<p>Dit was net nog gewoon letterformaat <b>p</b>. Alles kan worden aangepast: Kleur, achtergrondkleur, grootte, letterafstand, stijl en zelfs de eigenschappen van de rand. </p>
</body>

</html>
En zo ziet je site eruit:

Letterformaat h2 heeft nieuwe eigenschappen

Dit was net nog gewoon letterformaat p. Alles kan worden aangepast: Kleur, achtergrondkleur, grootte, letterafstand, stijl en zelfs de eigenschappen van de rand.


Dit wil je doen: Dit is de code die je gebruikt:
7) Omdat er nu wel erg veel stijlinstructies staan per onderdeel, moeten we de zaak beter gaan ordenen. Extra spaties, enters en witregels op het kladblaadje hebben geen storend effect op de HTML/CSS-taal dus dat gaan we gebruiken. Hieronder zie je een verbeterde versie van hierboven. Nu begint het al aardig op de officiële schrijfwijze te lijken!

Als cadeautje mag je met tekstschaduwen gaan spelen. Het eerste getal na text-shadow gaat over de afstand naar rechts (negatief getal = naar links) en het tweede over de afstand naar onder (negatief getal = naar boven). Het derde getal bepaalt de verstrooiing van de schaduw. Dat laatste werkt niet bij elke browser; wél bij Firefox. 		<!DOCTYPE html>
<html>

<head>
<style>

h2 {
   color: red;
   background-color: orange;
   font-style: italic;
   letter-spacing: 4px;
}

p  {
   color: blue;
   font-size: 20px;
   border: 6px solid green;
}

h1 {
   color: red;
   text-shadow: 2px 2px 1px black;
}

</style>
</head>

<body>
<h2>Letterformaat h2 heeft nieuwe eigenschappen</h2>
<p>Dit was net nog gewoon letterformaat <b>p</b>. Alles kan worden aangepast: Kleur, achtergrondkleur, grootte, letterafstand, stijl en zelfs de eigenschappen van de rand. </p>
<h1>TEKSTEN MET SCHADUW</h1>
</body>

</html>
En zo ziet je site eruit:

Letterformaat h2 heeft nieuwe eigenschappen

Dit was net nog gewoon letterformaat p. Alles kan worden aangepast: Kleur, achtergrondkleur, grootte, letterafstand, stijl en zelfs de eigenschappen van de rand.

TEKSTEN MET SCHADUW


Dit wil je doen: Dit is de code die je gebruikt:
8) Niet alleen de stijlgeving van de teksten regel je zo, maar ook het uiterlijk van de rest van je site. De achtergrondkleur bijvoorbeeld, of een randje rond het scherm. Dan hebben we het over de body van je site. Niet als tag tussen enge haken, maar als CSS-term in het style-gedeelte.

Je ziet hieronder dat zowel het scherm (body) als de teksten een achtergrondkleur en een rand (=border) kunnen hebben.

Over randen gesproken: solid, double en groove zie je hier al; probeer ook eens ridge, inset, outset, dotted, en dashed. En misschien vind je 8px te dik? 		<!DOCTYPE html>
<html>

<head>
<style>

body {
   background-color: orange;
   border: 8px solid red;
}

h1 {
   color: blue;
   background-color: pink;
   border: 8px groove green;
}

h2 {
   color: black;
   border: 8px double white;
}

p  {
   color: green;
   font-size: 20px;
}

</style>
</head>

<body>
<h1>h1 met eigen achtergrondkleur en een rand</h1>
<h2>h2 zonder eigen achtergrondkleur maar wel met rand</h2>
<p><b>p</b>letterformaat p zonder eigen achtergrondkleur</p>
</body>

</html>
En zo ziet je site eruit!

h1 met eigen achtergrondkleur en een rand

h2 zonder eigen achtergrondkleur maar wel met rand

letterformaat p zonder eigen achtergrondkleur



Dit wil je doen: Dit is de code die je gebruikt:
9) Zitten de randen op jouw site niet precies zoals het hierboven staat? Geen nood; gaan we later nog aan werken!

Eerst nog iets over de stijl van de randen. Als er border: 8px solid red staat, is dat een verkorte schrijfwijze. Heel handig bij eenvoudige stijlen. De volledige schrijfwijze hiervoor is: border-width: 8px;  border-style: solid;  border-color: red;. Deze schrijfwijze is nuttig als je elk van de vier zijden van de rand verschillend wil maken qua breedte (=width), stijl en/of kleur. Voer gewoon vier waardes in, gescheiden met spaties. De volgorde is telkens: boven rechts onder links (met de klok mee dus). Kijk maar eens hieronder hoe dat eruit ziet. Ook andere onderdelen maken van dit systeem gebruik. 		<!DOCTYPE html>
<html>

<head>
<style>

h1 {
   color: green;
   border-width: 1px 7px 10px 2px;
   border-style: solid;
   border-color: darkred;
}

h2 {
   color: red;
   border-width: 8px;
   border-style: dashed double solid dotted;
   border-color: darkblue;
}

p  {
   color: blue;
   border-width: 8px;
   border-style: solid;
   border-color: lightgreen darkgreen black green;
}

</style>
</head>

<body>
<h1>randen in verschillende diktes</h1>
<h2>randen in verschillende stijlen</h2>
<p>randen in verschillende kleuren</p>
</body>

</html>
En zo ziet je site eruit:

randen in verschillende diktes

randen in verschillende stijlen

randen in verschillende kleuren


Dit wil je doen: Dit is de code die je gebruikt:
10) Om je lettertypen goed in te stellen, moet je weten dat er drie hoofdgroepen zijn. De eerste groep bestaat uit lettertypen met "schreven"; in het Engels serif. Dat zijn kleine uitsteeksels die dwars op de uiteinden van de letters zitten. Hieronder wordt een aantal van die fontfamilies van het serif-type gepresenteerd.

Om ze te kunnen vergelijken zijn h1 t/m h5 allen even groot en "niet-vet" gemaakt.

Zie je hoe in het style-gedeelte de lettertypen met een meerledige naam, dubbele aanhalingstekens krijgen en die met een enkelledige naam niet? 		<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   font-weight: normal;
   font-size: 22px;
   font-family: "Times New Roman", serif;
}
h2 {
   font-weight: normal;
   font-size: 22px;
   font-family: Georgia, serif;
}
h3 {
   font-weight: normal;
   font-size: 22px;
   font-family: Cambria, serif;
}
h4 {
   font-weight: normal;
   font-size: 22px;
   font-family: Garamond, serif;
}
h5 {
   font-weight: normal;
   font-size: 22px;
   font-family: "Bookman Old Style", serif;
}
</style>
</head>
<body>
<h1>Een erg bekend lettertype met schreven is Times New Roman.</h1>
<h2>Een erg bekend lettertype met schreven is Georgia.</h2>
<h3>Een erg bekend lettertype met schreven is Cambria.</h3>
<h4>Een minder bekend lettertype met schreven is Garamond.</h4>
<h5>Een minder bekend lettertype met schreven is Bookman Old Style.</h5>
</body>
</html>
En zo ziet je site eruit:

Een erg bekend lettertype met schreven is Times New Roman.

Een erg bekend lettertype met schreven is Georgia.

Een erg bekend lettertype met schreven is Cambria.

Een minder bekend lettertype met schreven is Garamond.

Een minder bekend lettertype met schreven is Bookman Old Style.


Dit wil je doen: Dit is de code die je gebruikt:
11) Drie hoofdgroepen dus. De tweede groep bestaat uit lettertypen zonder "schreven"; in het Engels sans-serif. Er zijn dan dus géén kleine uitsteeksels aan de uiteinden van de letters. Hieronder wordt een aantal van die fontfamilies van het sans-serif-type gepresenteerd.

Ook hier zijn h1 t/m h5 allen even groot en "niet-vet" gemaakt.

Zie je hoe in het style-gedeelte de lettertypen met een meerledige naam, dubbele aanhalingstekens krijgen en die met een enkelledige naam niet? 		<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   font-weight: normal;
   font-size: 22px;
   font-family: Arial, sans-serif;
}
h2 {
   font-weight: normal;
   font-size: 22px;
   font-family: Verdana, sans-serif;
}
h3 {
   font-weight: normal;
   font-size: 22px;
   font-family: Tahoma, sans-serif;
}
h4 {
   font-weight: normal;
   font-size: 22px;
   font-family: Calibri, sans-serif;
}
h5 {
   font-weight: normal;
   font-size: 22px;
   font-family: "Century Gothic", sans-serif;
}
</style>
</head>
<body>
<h1>Een erg bekend lettertype zonder schreven is Arial.</h1>
<h2>Een erg bekend lettertype zonder schreven is Verdana.</h2>
<h3>Een erg bekend lettertype zonder schreven is Tahoma.</h3>
<h4>Een erg bekend lettertype zonder schreven is Calibri.</h4>
<h5>Een minder bekend lettertype zonder schreven is Century Gothic.</h5>
</body>
</html>
En zo ziet je site eruit:

Een erg bekend lettertype zonder schreven is Arial.

Een erg bekend lettertype zonder schreven is Verdana.

Een erg bekend lettertype zonder schreven is Tahoma.

Een erg bekend lettertype zonder schreven is Calibri.

Een minder bekend lettertype zonder schreven is Century Gothic.


Dit wil je doen: Dit is de code die je gebruikt:
12) De derde van de drie hoofdgroepen bestaat uit lettertypen waarvan alle letters even breed zijn; in het Engels monospace. Hieronder wordt een aantal van die fontfamilies van het monospace-type gepresenteerd.

Ook hier zijn h1 t/m h4 allen even groot en "niet-vet" gemaakt.

Zie je hoe in het style-gedeelte de lettertypen met een meerledige naam, dubbele aanhalingstekens krijgen en die met een enkelledige naam niet? 		<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   font-weight: normal;
   font-size: 22px;
   font-family: "Courier New", monospace;
}
h2 {
   font-weight: normal;
   font-size: 22px;
   font-family: "Lucida Console", monospace;
}
h3 {
   font-weight: normal;
   font-size: 22px;
   font-family: "OCR A Extended", monospace;
}
h4 {
   font-weight: normal;
   font-size: 22px;
   font-family: Consolas, monospace;
}
</style>
</head>
<body>
<h1>Een erg bekend monospace-lettertype is Courier New.</h1>
<h2>Een erg bekend monospace-lettertype is Lucida Console.</h2>
<h3>Een minder bekend monospace-lettertype is OCR A Extended.</h3>
<h4>Een minder bekend monospace-lettertype is Consolas.</h4>
</body>
</html>
En zo ziet je site eruit:

Een erg bekend monospace-lettertype is Courier New.

Een erg bekend monospace-lettertype is Lucida Console.

Een minder bekend monospace-lettertype is OCR A Extended.

Een minder bekend monospace-lettertype is Consolas.



Dit wil je doen: Dit is de code die je gebruikt:
13) Je kunt wel een mooi lettertype uitkiezen voor je site, maar wat nu als de pc van de ander dat lettertype niet aan boord heeft? Hoeft geen probleem te zijn als je het goed regelt: Zet achter font-family eerst het lettertype dat je het mooist vindt. Daarachter zet je (gescheiden met komma's) lettertypen die erop lijken en hopelijk wat meer bekend zijn. Geef als laatste naam de naam van de hoofdgroep op zodat de computer - als het moet - zelf een geschikt type gaat zoeken. <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   font-weight: normal;
   font-size: 22px;
   font-family: "Century Gothic", Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Ik zou graag willen dat deze tekst in <b>Century Gothic</b> te lezen is, maar als mijn lezer dat lettertype niet op de pc heeft staan, wordt deze tekst in <b>Verdana</b> getoond. Als dat er ook niet is, wordt er gezocht naar <b>Arial</b>. Ook niet? De computer gaat kijken welke schreefloze (=sans-serif) letter hij dan wél heeft. Zo staat het hier achter <b>font-family</b> ingesteld.</h1>
</body>
</html>
En zo ziet je site eruit:

Ik zou graag willen dat deze tekst in Century Gothic te lezen is, maar als mijn lezer dat lettertype niet op de pc heeft staan, wordt deze tekst in Verdana getoond. Als dat er ook niet is, wordt er gezocht naar Arial. Ook niet? De computer gaat kijken welke schreefloze (=sans-serif) letter hij dan wél heeft. Zo staat het hier achter font-family ingesteld.


Dit wil je doen: Dit is de code die je gebruikt:
14) Even iets over kleuren. Tot nu toe gebruikten we voor de kleuren vaststaande Engelse namen. Daar bestaat een uitgebreide lijst van, maar dan moet je wel de officiëele namen gebruiken.

Er zijn ook andere methoden waarbij je zelf de kleuren kunt maken. Bij het mengen van gekleurd licht - en dát doe je op een computerscherm - gaat het eigenlijk maar om drie kleuren: rood, groen en blauw. Eén manier om de kleur rood te maken is met de code rgb(255, 0, 0). Even goed kijken: rgb is natuurlijk rood, groen, blauw en 255 betekent dat je de kraan maximaal hebt opengedraaid voor het rode licht, terwijl groen en blauw op 0 staan. Dan snap je ook hoe je de kleur groen of blauw maakt.

Hieronder zie je wat voor kleuren ontstaan als je gaat mengen. Met alle kleuren op maximaal maak je wit en alle kleuren op 0 is zwart. Hoe zou je oranje moeten maken? En hoe donkergroen? Lichtgrijs? Middelgrijs? Donkergrijs?

Zoals gezegd is 255 de maximumsterkte van een kleur. Je mag daarom ook 100% invullen, maar dan moet je de andere twee kleuren ook in procenten opgeven. Experimenteer maar! 		<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-color: rgb(127, 127, 127);
}
h1 {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(255, 0, 0);
}
h2 {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(0, 255, 0);
}
h3 {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(0, 0, 255);
}
h4 {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(255, 0, 255);
}
h5 {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(0, 255, 255);
}
h6 {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(255, 255, 0);
}
p {
   font: normal normal 22px Verdana, sans-serif;
   background-color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>rood door rgb(255, 0, 0)</h1>
<h2>groen door rgb(0, 255, 0)</h2>
<h3>blauw door rgb(0, 0, 255)</h3>
<h4>paars door rgb(255, 0, 255)</h4>
<h5>cyaan door rgb(0, 255, 255)</h5>
<h6>geel door rgb(255, 255, 0)</h6>
<p>wit door rgb(255, 255, 255)</p>
</body>
</html>
En zo ziet je site eruit:

rood door rgb(255, 0, 0)

groen door rgb(0, 255, 0)

blauw door rgb(0, 0, 255)

paars door rgb(255, 0, 255)

cyaan door rgb(0, 255, 255)
geel door rgb(255, 255, 0)

wit door rgb(255, 255, 255)



Dit wil je doen: Dit is de code die je gebruikt:
15) Wat meer over letters: Voor de letterinstellingen h1 t/m h6 en p zijn vooraf al waarden bedacht, maar je mag die instellingen zelf aanpassen in de style dus in css-taal. Wat is er allemaal te regelen?
- Letterkleur = color: ... (normaal zwart)
- Achtergrondkleur v.d. letters = background-color: ... (normaal doorzichtig)
- Lettertype = font-family: ... (normaal Times New Roman)
- Letterstijl = font-style: ... (normaal normal, anders italic (=cursief))
- Lettergewicht = font-weight: ... (normaal normal, anders bold (=vet))
- Lettergrootte = font-size: ... px (kleine standaardletter: 16px, grotere letter: 30px, forse letter: 40px)
- Letterafstand = letter-spacing: ... px (normaal 0px,)
- Regelafstand = line-height: ... (normaal 1.1)
Als de normale instelling al goed is, hoef je die niet meer te noemen. Geef alleen aan wat je anders wil zien. 		<!DOCTYPE html>
<html>
<head>
<style>
p {
   color: black;
   background-color: rgba(255, 255, 255, 0.0);
   font-family: "Times New Roman", Georgia, serif;
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
   letter-spacing: 0px;
   line-height: 1.1;
}
h1 {
   color: red;
   background-color: yellow;
   font-family: Verdana, Tahoma, sans-serif;
   font-style: italic;
   font-weight: bold;
   font-size: 40px;
   letter-spacing: 3px;
   line-height: 1.8;
}
h2 {
   color: #060;
   background-color: #f9f;
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: bold;
   font-size: 20px;
   letter-spacing: -1px;
   line-height: 0.8;
}
h3 {
   color: rgb(0, 0, 127);
   background-color: rgb(0, 255, 255);
   font-family: "Courier New", "Lucida Console", monospace;
   font-style: italic;
   font-weight: normal;
   font-size: 18px;
   letter-spacing: 1px;
   line-height: 1.2;
}
</style>
</head>
<body>
<h1>Als we h1 eens gaan pimpen: Forse rode letters op een gele achtergrond; lettertype Verdana of anders Tahoma of een andere schreefloze letter; cursief en vet; lettergrootte 25 pixels; letterafstand 3 pixels; regelafstand 1.8</h1>
<h2>Dit is wat bescheidener: De kleuren zijn gemaakt met hexadecimale getallen (beginnend met een hekje); de woorden zijn compacter door een negatieve letterafstand en de regelafstand is kleiner dan normaal.</h2>
<h3>Dit ziet er redelijk normaal uit: De monospaceletters zijn van Courier New en staan cursief maar niet vet; de kleuren zijn in rgb-waardes en de letterafstand en de regelafstand zijn een heel klein beetje luxer.</h3>
</body>
</html>
En zo ziet je site eruit!

Om te beginnen het eenvoudigste: De standaardinstellingen voor p. Zwart, lettertype Times New Roman, lettergrootte 16px. Hier had helemaal niets speciaals voor hoeven worden ingesteld; dit zijn al de basisinstellingen voor p.
Maar hoe ziet het eruit als we wél afwijkende waarden gaan gebruiken?

Als we h1 eens gaan pimpen: Forse rode letters op een gele achtergrond; lettertype Verdana of anders Tahoma of een andere schreefloze letter; cursief en vet; lettergrootte 25 pixels; letterafstand 3 pixels; regelafstand 1.8

Dit is wat bescheidener: De kleuren zijn gemaakt met hexadecimale getallen (beginnend met een hekje); de woorden zijn vet maar wel compacter door een negatieve letterafstand en de regelafstand is kleiner dan normaal.

Dit ziet er redelijk normaal uit: De monospaceletters zijn van Courier New en staan cursief maar niet vet; de kleuren zijn in rgb-waardes en de letterafstand en de regelafstand zijn een heel klein beetje luxer.

Dit wil je doen: Dit is de code die je gebruikt:
1 * 1 *
En zo ziet je site eruit!
+ 3 +


Dit wil je doen: Dit is de code die je gebruikt:
1 * 1 *
En zo ziet je site eruit!
+ 3 +


Dit wil je doen: Dit is de code die je gebruikt:
1 * 1 *
En zo ziet je site eruit!
+ 3 +


Dit wil je doen: Dit is de code die je gebruikt:
1 * 1 *
En zo ziet je site eruit!
+ 3 +


Dit wil je doen: Dit is de code die je gebruikt:
1 Zet tenslotte onderaan het opsla-venstertje de Codering op UTF-8 (in plaats van ANSI).

Zolang je bestand ook nog als kladblaadje openstaat, kun je er iets in wijzigen 		* 1 *
En zo ziet je site eruit!
+ 3 +


Dit wil je doen: En zo ziet je site eruit!
1 3
Dit is de code die je gebruikt:
1


Dit wil je doen: En zo ziet je site eruit!
1 3
Dit is de code die je gebruikt:
1