Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Bert Bos

CSS cursus
beginnen met HTML + CSS

Inhoud

Deze korte cursus is bedoeld voor mensen die willen beginnen met CSS en nog nooit een CSS-stylesheet hebben geschreven.

Hij legt niet veel uit over CSS. Hij legt alleen uit hoe je een HTML-bestand en een CSS-bstand maakt en ze samen laat werken. Daarna kun je één van de vele andere cursusen [Engelse pagina] lezen om meer eigenschappen aan de HTML- en CSS-bestanden toe te voegen. Of je kunt een speciale HTML- of CSS-editor [Engelse pagina], gebruiken, die helpt complexe websites op te zetten.

Aan het einde van deze cursus heb je een HTML-pagina, die er zó uitziet:

[Link naar de uiteindelijke HTML-pagina]

De uiteindelijke HTML-pagina, met kleuren en layout, alles met CSS

NB. Ik beweer niet dat dit een mooie stijl is ☺

Let op! Voor gevorderden: Alinea's die er uitzien zoals deze zijn optioneel. Ze bevatten wat extra uitleg voor de HTML- en CSS-code in het voorbeeld. Het “Let op!” teken aan het begin geeft aan dat dit materiaal meer voor gevorderden is dan de rest van de tekst.

Stap 1: de HTML schrijven

Ik stel voor dat je voor deze cursus alleen de allereenvoudigste hulpmiddelen gebruikt. Bijv. Kladblok (onder Windows), TextEdit (op de Mac) of KEdit (onder KDE). Als je eenmaal de principes begrijpt, kun je naar meer geavanceerde hulpmiddelen overgaan of zelfs naar commerciële programma's, zoals Style Master, DreamWeaver of GoLive. Maar voor je eerste CSS-stylesheet is het niet verstandig je te laten afleiden door te veel geavanceerde features.

Gebruik geen tekstverwerker, zoals Microsoft Word of OpenOffice. Ze maken doorgaans bestanden die een web-browser niet kan lezen. For HTML en CSS hebben we eenvoudige tekstbestanden nodig.

Stap 1 is je tekst-editor te openen (Kladblok, TextEdit, KEdit, of wat je favoriet maar is), te beginnen met een leeg venster en het volgende in te typen: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mijn eerste opgemaakte pagina</title>
</head>

<body>

<!-- Navigatie-menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="gedachten.html">Gedachten</a>
  <li><a href="stad.html">Mijn stad</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Hoofdtekst -->
<h1>Mijn eerste opgemaakte pagina</h1>

<p>Welkom op mijn opgemaakte pagina!

<p>Hij heeft geen plaatjes, maar hij heeft stijl.
En hij heeft links, ook al werken ze nog niet&hellip;

<p>Er moet hier eigenlijk meer staan,
maar ik weet nog niet wat.

<!-- Onderteken en dateer de pagina, wees beleefd! -->
<address>Gemaakt 5 april 2004<br>
  door mijzelf.</address>

</body>
</html>

Je hoeft de tekst niet eens in te typen: je kunt hem uit deze pagina knippen en plakken naar de tekst-editor.

(Als je TextEdit op de Mac gebruikt, vergeet dan niet TextEdit te vertellen dat de tekst daadwerkelijk platte tekst is, door in het Opmaak-menu “Converteer naar platte tekst” te selecteren.)

Let op! Voor gevorderden: De eerste regel van de HTML hierboven vertelt de browser welk soort HTML dit is (DOCTYPE betekent DOCument TYPE). In dit geval is het HTML versie 4.01.

Woorden tussen < en > heten tags en zoals je kunt zien staat het hele document tussen de <html> en </html> tags. Tussen <head> en </head> is er plaats voor allerlei soorten informatie die niet op het scherm verschijnt. Er staat nu alleen nog maar de titel, maar later zullen we het CSS-stylesheet hier ook neerzetten.

De <body> is waar de daadwerkelijke tekst van het document komt. In principe wordt alles wat hier staat getoond, behalve tekst tussen <!-- en -->, die als commentaar voor onszelf dient. De browser zal die tekst overslaan.

Onder de tags in het voorbeeld vind je <ul>, die een ongeordende lijst (“Unordered List”) introdcueert, d.w.z. een lijst waarin de items niet genummerd zijn. De <li> is het begin van een item (“List Item”). De <p> is een alinea (“Paragraph”). En de <a> is een anker (“Anchor”), daarmee maak je een hyperlink.

De HTML-broncode getoond in KEdit

De KEDit editor toont de HTML-broncode.

Let op! Voor gevorderden: Als je wilt weten wat de namen in <…> betekenen, is Getting started with HTML [Engelse pagina] een goede plaats om te beginnen. Maar hier zijn enkele opmerkingen over de structuur van onze voorbeeld-pagina:

Merk op dat ik de “li” en “p” elementen niet gesloten heb. In HTML (maar niet in XHTML) is het toegestaan de </li> en </p> tags weg te laten, zoals ik hier gedaan heb om de broncode iets leesbaarder te maken. Maar als je wilt kun je ze toevoegen.

Laten we aannemen dat dit een pagina van een website moet worden met verscheidene andere soortgelijke pagina's. Zoals gebruikelijk heeft de pagina een menu met verwijzingen naar de andere pagina's van de imaginaire website, een deel unieke tekst en een ondertekening.

Kies nu “Bewaren als…” van het Bestandsmenu, ga naar de directory/map waar je het bestand wilt opslaan (het bureaublad is OK) en bewaar het bestand als “mijnpagina.html”. Sluit de editor nog niet, we hebben hem later nog nodig.

(Als je TextEdit onder Mac OS X vóór versie 10.4 gebruikt, zie je een optie om geen extensie .txt toe te voegen. Selecteer die optie, want de naam “mijnpagina.html” heeft al een extensie. Nieuwere versies van TextEdit herkennen de extensie .html automatisch.)

Open vervolgens het bestand in een browser. Dat kun je als volgt doen: vind het bestand in het bestandsbeheer (Windows Verkenner, Finder of Konqueror) en klik of dubbelklik het bestand “mijnpagina.html”. Als het goed is, opent het in je gebruikelijke browser. (Zo niet, open dan eerst de browser en sleep het bestand ernaartoe.)

Zoals je ziet ziet de pagina er tamelijk kaal uit…

Stap 2: kleuren toevoegen

Je ziet waarschijnlijk wat zwarte tekst op een witte achtergrond, maar het hangt ervanaf hoe de browser is geconfigureerd. Dus een eenvoudige handeling om de pagina er wat stijlvoller uit te laten zien is kleuren toe te voegen. (Laat de browser open, we gebruiken hem zo weer.)

We beginnen met een stylesheet ingebed in het HTML-bestand. Later zullen we de HTML en de CSS in afzonderlijke bestanden onderbrengen. Afzonderlijke bestanden is een goed idee, want het maakt het makkelijk hetzelfde stylesheet voor verscheidene HTML-pagina's te gebruiken: je hoeft het stylesheet maar één keer te schrijven. Maar voor deze stap houden we alles in één bestand.

We zullen een <style> element aan de HTML moeten toevoegen. Het stylesheet komt binnen dat element. Dus, ga terug naar de editor en voeg de volgende vijf regels toe in het head-gedeelte van het HTML-bestand. De regels die moeten worden toegevoegd staan in het rood (regels 5 t/m 9). 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mijn eerste opgemaakte pagina</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

De eerste regel zegt dat dit een stylesheet is in CSS (“text/css”). De tweede regel zegt dat we stijl toevoegen aan het element “body”. De derde regel maakt de kleur van de tekst paars en de volgende regel maakt van de achtergrond een soort groen-geel.

Let op! Voor gevorderden: Stylsheets in CSS bestaan uit regels. Elke regel heeft drie delen:

  1. de selector (in het voorbeeld: “body”), die de browser vertelt welk deel van het document wordt beïnvloed door de regel;
  2. de property (of “eigenschap”; in het voorbeeld zijn 'color' en 'background-color' allebei properties), die aangeeft welk aspect van de opmaak wordt veranderd;
  3. en de waarde ('purple' en '#d8da3d') van de property.

Het voorbeeld laat zien dat regels kunnen worden gecombineerd. We hebben twee properties veranderd, dus hadden we twee regels kunnen maken: 

body { color: purple }
body { background-color: #d8da3d }

Maar omdat beide regels op de body betrekking hebben, hebben we “body” maar één keer geschreven en de properties en waarden gecombineerd. Voor meer informatie over selectors, zie hoofdstuk 2 [Engelse pagina] van Lie & Bos.

De achtergrond van het element body beslaat ook de achtergrond van het hele document. We hebben geen van de andere elementen (p, li, address…) een achtergrond gegeven en dus hebben ze er normaalgesproken geen (oftwel: hun achtergrond is doorzichtig). De property 'color' geeft de kleur van de tekst van het element body, maar alle andere element binnenin de body erven die kleur, tenzij we hem expliciet veranderen. (We zullen verderop wat andere kleuren toevoegen.)

Bewaar het bestand (gebruik “Bewaar” uit het Bestandsmenu) en ga terug naar het browser-venster. Als je “Opnieuw laden” klikt, moet het scherm veranderen van de kale pagina naar een gekleurde (maar nog steeds tamelijk kale) pagina. Behalve de lijst met links bovenaan, moet alle tekst nu paars zijn op een groen-gele achtergrond.

Screenshot van de gekleurde pagina in Konqueror

Hoe één browser de pagina toont, nu enkele kleuren zijn toegevoegd.

Let op! Voor gevordereden: Kleuren kunnen in CSS op verschillende manieren worden aangegeven. Dit voorbeeld toont twee ervan: met hun naam (“purple”) en als hexadecimale code (“#d8da3d”). Er zijn ongeveer 140 (Engelse) namen van kleuren en de hexadecimale codes zijn genoeg voor meer dan 16 miljoen kleuren. Adding a touch of style [Engelse pagina] vertelt meer over deze codes.

Stap 3: lettertypes toevoegen

Iets anders dat eenvoudig te doen is, is onderscheid te maken in de lettertypes voor de verschillende elementen op de pagina. Dus laten we de tekst in “Georgia” zetten, behalve het kopje h1, dat we “Helvetica” geven.

Op het Web weet je nooit zeker welke lettertypes je lezers op hun computer hebben, dus geven we ook wat alternatieven aan: als Georgia niet beschikbaar is, kunnen Times New Roman of Times er ook mee door en als dat ook faalt, mag de browser een willekeurig font met schreven (serifs) gebruiken. Als Helvetica er niet is, zijn Geneva, Arial en SunSans-Regular gelijksoortig van vorm en als geen ervan werkt, kan de browser een willekeurig schreefloos lettertype kiezen.

Voeg de volgende regels toe in de tekst-editor (regels 7-8 en 11-13): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mijn eerste opgemaakte pagina</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

Als je het bestand bewaart en wederom “Opnieuw laden” kiest in de browser, zou je nu verschillende lettertypes voor het kopje en voor de rest van de tekst moeten zien.

Screenshot met lettertypes

De rest van tekst heeft nu een ander lettertype als het kopje.

Stap 6: een horizontale lijn toevoegen

De laatste toevoeging aan het stylesheet is een horizontale lijn om de tekst van de ondertekening te scheiden. We gebruiken 'border-top' om een stippellijn boven het element <address> te zetten (regels 34-37). 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Miijn eerste opgemaakte pagina</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

Nu is ons stylesheet compleet. Laten we vervolgens eens zien hoe we het stylesheet in een apart bestand kunnen zetten, zodat andere pagina's de stijl kunnen delen.

Stap 7: het stylesheet in een apart bestand zetten

We hebben nu een HTML-bestand met een ingebed stylesheet. Maar als onze website groeit, willen we waarschijnlijk dat veel pagina's dezelfde stijl delen. Er is een betere methode dan het stylesheet naar elke pagina te kopiëren: als we het stylesheet in een apart bestand zetten kunnen alle pagina's ernaar verwijzen.

Om het stijlbestand te maken moeten we eerst weer een leeg bestand maken. Je kunt “Nieuw” uit het bestandsmenu kiezen om een leeg venster te maken. (Als je TextEdit gebruikt, vergeet dan niet het bestand naar platte tekst om te zetten, met het Opmaak-menu.

Knip en plak dan alles binnen het element <style> uit het HTML-bestand naar het nieuwe venster. Kopiëer de <style> en </style> zelf niet! Die horen in HTML, niet in CSS. In het nieuwe venster heb je nu, als het goed is, het complete stylesheet: 

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Kies “Bewaren als…” uit het Bestandsmenu, let op dat je in dezelfde directory/map bent als mijnpagina.html en sla het stylesheet op als “mijnstijl.css”.

Ga dan terug naar het venster met de HTML-code. Verwijder alles van <style> t/m </style> en vervang het door een element <link>, als volgt (regel 5): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mijn eerste opgemaakte paginae</title>
  <link rel="stylesheet" href="mijnstijl.css">
</head>

<body>
[etc.]

Dit vertelt de browser, dat het stylesheet in een bestand genaamd “mijnstijl.css” staat en omdat er geen map is vermeld, staat het in dezelfde map als het HTML-bestand zelf.

Als je het HTML-bestand bewaart en opnieuw laadt in de browser, zie je als het goed is geen verschil: de pagina is nog steeds op dezelfde manier opgemaakt, maar het stylesheet komt nu uit een apart bestand.

Uiteindelijk resultaat

Het uiteindelijke resultaat

De volgende stap is beide bestanden, mijnpagina.html en mijnstijl.css, op je website te zetten. (Hoewel je ze misschien eerst wat wil veranderen…) Hoe je dat moet doen hangt af van je Internet-provider.

Meer informatie

Voor een introductie tot CSS (in het Engels), zie Hoofdstuk 2 van Lie & Bos of Dave Raggetts CSS-introductie.

Meer informatie, en meer cursusmateriaal, is te vinden op de pagina learning CSS [Engelse pagina]..

Talen

Over de vertalingen

CSS Valid CSS!Valid HTML 4.0!
Laatste wijziging ma 20 nov 2023 21:46:04 UTC

Bert Bos, leider stijl-activiteiten
Copyright © 1994–2023 W3C® Privacy