Les 1 - Korte uitleg over XHTML en CSS

Als je een website wilt maken die voldoet aan de "webstandards" van vandaag, zijn deze twee programmeertalen de belangrijkste die je moet kennen. Ik zal eerst uitleggen wat XHTML doet en vervolgens wat CSS doet.

XHTML Opbouw

XHTML is een van de huidige standaard webtalen. Het is vroeger begonnen met HTML en daarna samen gevoegd met XML, vandaar de naam XHTML. Een simpele XHTML is opgedeeld in de volgende stukken:

  1. Doctype, dit is nodig voor browsers om CSS en plugins op je pagina te laten werken.
  2. Head, hierin staat informatie voor de browsers en zoekmachines over je website.
  3. Body, dit is het visuele deel wat je in de browser ziet als je je website opent.

Ik zal je even kort laten zien hoe een XHTML 1.1 Strict document eruit ziet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>De titel van je pagina</title>
</head>
<body>
 <p>Hier komt de inhoud van je pagina</p>
</body>
</html>

XHTML Tags

Zoals je ziet wordt er bij XHTML gebruik gemaakt van tags. Tags moet je altijd in tegengestelde richting afsuiten. Bijvoorbeeld <div> <p> </p> </div>. Uitzonderingen zijn bijvoorbeeld de IMG tag voor plaatjes en de BR tag voor een handmatig regeleinde. Die sluit je zo af: <IMG src="plaatje.gif" /> en <br />.

XHTML Tag lijst

Hier een lijstje met de tags die je het meest zult gaan gebruiken, met uitleg:

  • <html> </html>, gebruik je om een document mee te beginnen.
  • <head> </head>, gebruik je om de head van je pagina in te delen.
  • <title> </title>, gebruik je om de titel van je pagina mee in te stellen.
  • <body> </body>, gebruik je om de body van je pagina in te delen.
  • <p> </p>, gebruik je om een nieuwe alinea mee te beginnen.
  • <div> </div>, gebruik je om een DIV element mee in te voegen.
  • <span> </span>, gebruik je om een stijl toe te passen op een stuk tekst.
  • <strong> </strong>, gebruik je om een deel van je tekst vet te maken.
  • <em> </em>, gebruik je om een deel van je tekst cursief te maken.
  • <a href=" "> </a>1, gebruik je om een hyperlink te maken.
  • <h#> </h#>2, gebruik je om een kop te maken.
  • <ul> </ul>3, gebruik je om een ongenummerde lijst te maken.
  • <ol> </ol>3, gebruik je om een genummerde lijst te maken.
  • <li> </li>,3 gebruik je om een lijst-item aan te maken.
  • <sup> </sup>, gebruik je om een tekst in superscript te zetten.
  • <sub> </sub>, gebruik je om een tekst in subscript te zetten.
  • <img src=" " alt=" " />4, gebruik je om een afbeelding in te voegen.
  • <br />, gebruik je om een handmatig regeleinde te maken.
  • <hr />, gebruik je om een horizontale lijn te maken.

1 Een externe link moet worden aangegeven als href="http://www.externelink.nl" en een interne link gewoon als href="intern.html".
2 Er zijn 6 verschillende groottes koppen, h1, h2, h3, h4, h5 & h6.
3 Een lijst wordt op de volgende manier ingedeeld: <ul><li>item</li></ul> Daarbij mag je een lijst niet binnen de P tags plaatsen.
4 De afbeeldingslocatie moet worden geplaatst tussen src="afbeelding.png" en de beschrijving ervan binnen alt="beschrijving".

Cascading Style Sheets (CSS)

CSS Stylesheets zijn ervoor om je pagina op te maken. Zo kan je in een stylesheet de kleur van de tekst en de grootte van de tekst opgeven, maar ook hoe breed elementen moeten zijn en hoe ze weergeven moeten worden. Een voorbeeld:

.stijl1 {
 font-size: 2em;
 color: #FF0033;
 text-decoration: underline;
}

In het bovenstaande voorbeeld wordt aangegeven dat de tekst binnen de elementen die de class* "stijl1" hebben, 2em groot moeten zijn, de kleur "#FF0033" moeten hebben en onderstreept moeten zijn. Dit klinkt lastig, maar hieronder zal ik laten zien hoe je zo'n stijl kan gebruiken:

<span class="stijl1">Tekst die 2em hoog, rood en onderstreept moet worden</span>

Zoals je weet is "span" een tag om stijlen toe te passen op een stuk tekst. Omdat wij hier verwijzen naar de class "stijl1" zal alles binnen de span-tag 2em hoog, rood en onderstreept worden. Dit is handig als je vaak delen in je tekst deze opmaak wilt geven. Maar wat als je deze stijl maar 1x hoeft te gebruiken? Daarvoor kan je een "inline style-tag" gebruiken. Dit doe je als volgt:

<span style="font-size: 2em; color: #FF0033; text-decoration: underline;">Tekst die 2em hoog, rood en onderstreept moet worden</span>

Zoals je ziet, zijn de stijlen die we gebruikt hebben in de eerder genoemde class "stijl1" verwerkt in de inline style-tag. Visueel ziet dat er dus zo uit: Tekst die 2em hoog, rood en onderstreept moet worden.

Standaard stijlen wijzigen met CSS

Nu weet je dus hoe je extra stijlen kunt aanmaken. Maar hoe verander je de standaard pagina opmaak? Daarvoor kan je de tag-namen in CSS gebruiken. Moeilijk te volgen? Hier even een voorbeeld:

body {
 font-family: helvetica, arial, sans-serif;
 font-size: 1em;
 color: #111111;
}

Je ziet hier, dat de standaard "body" tag wordt aangepast. Zo wordt het lettertype van de pagina Helvetica, Arial of Sans-Serif (dit hangt af van welk lettertype van deze 3 is geinstalleerd op de computer), de grootte van de tekst 1em en de kleur van de tekst "#111111".

DIV Blokken met CSS

DIV's zijn blokken, waarin tekst, plaatjes, etc. in kunnen worden geplaatst. Ze zijn vooral handig om de layout van je pagina te maken zonder tabellen. Tegenwoordig worden website-layouts niet meer gemaakt met tabellen, maar met DIV tags en CSS. Een voorbeeld:

#blok1 {
 width: 300px;
 height: 100px;
 float: left;
 background-color: #3C3C3C;
 color: #FFFFFF; }
<div id="blok1">
 Deze tekst is ingesloten in een DIV-blok met de ID "blok1"
</div>

Visueel ziet dit er zo uit:

Deze tekst is ingesloten in een DIV-blok met de ID* "blok1"

We zien dat de breedte van het blok 300 pixels is, de hoogte 100 pixels, het blok moet verschijnen aan de linkerkant van de pagina, de achtergrondkleur "#3C3C3C" en de tekstkleur "#FFFFFF" is.

*Het verschil tussen een ID en een class, is dat je een ID maar 1x in een element kunt gebruiken en een class meerdere keren. Daarom is het efficiënter om een ID voor pagina layout te gebruiken en een class voor stukken tekst die je meerdere keren wilt stylen.