behang
lamp
painting
little man on computer
mopster figure
push mop
frontcurtain left
frontcurtain right
pull rope
raam
rozen voor muur
muis in de nacht
little man on computer
painting

Bouw je eigen HTML 5 website

Voor websites op computer, laptops en mobiele apparaten is HTML5, volgens W3C de nieuwe html generatie na het vroeger gebruikte HTML 4 en xHTML 1.1.

Euhm... tja, intro!

Kleine Introductie

Dusss.... je wilt een eigen website bouwen met HTML 5 en CSS3? Misschien kan ik je een klein beetje op weg helpen met deze introductie!

Laat ik deze introductie kort houden. De HTML5 is je broncode voor je website met de werkelijke inhoud en de CSS3 stylesheet, de motor, is datgene waardoor het er goed uitziet. Hiermee worden inhoud (htm) en structuur (css) van elkaar gescheiden (gescheiden bij wet). En dat maakt veranderingen in hoe je website er uit ziet steeds gemakkelijker.

Het binnenkomstbestand (welkom mat) van je website is meestal index.html, alle andere bestanden worden als onderwerp.htm opgeslagen (met natuurlijk allemaal verschillende onderwerpen). Het CSS bestand wordt opgeslagen als style.css, style2.css, website.css etc. Altijd met een punt css: .css .

Het eerste wat opvalt wanneer je in de bron kijkt (klik rechts in de website, ga naar (Pagina, Bron) zijn de verschillende onderwerpen in bijzonder kort HTML in vergelijking met het eerdere gebruike xHTML. Door gebruik van header, nav, article, section en footer zullen websites uniform worden over de hele wereld. Je zou deze kunnen gebruiken, maar voor een sticky script (foto bovenaan rollend achter tekst) heb ik gekozen om een divisie (div) te gebruiken met een id #header. Tja, soms ben ik ook rebels, ik weet het.

Laatste van deze introductie is een eenvoudig stappenplan.

Stappenplan

1. Bouw eerst een html bestand met divisies: body, wanneer gewenst een container (voor centreren), header (voor logo en navigatie), nav (je navigatie), article (het hele artikel van 1 htm bestand), section (delen per onderwerp van een artikel) en een footer (voettekst).

2. Open en sluit altijd op de goede manier. Bijvoorbeeld open met <head>, maar sluit dan met </head>. Schrijf altijd tekst tussen de <p> en </p> tags. Leer hier voorzichtig mee om te gaan, anders zou je website niet goed kunnen functioneren.

3. Na stap 2 maak je een lay-out in een stylesheet (het style.css bestand). Wanneer nodig kun je ook nog een alternatief stylesheet kunnen maken voor oudere versies van Internet Explorer (stylefixie.css).

4. Valideer je website altijd bij internal link de W3C html controleur en je stylesheet bij internal linkW3C CSS controleur.

5. Mocht je een iets niet weten kun je altijd even kijken bij *W3schools.com: Learn to Create Websites om iets te raadplegen.

Maar geen paniek, geen paniek! Mocht je van hierboven iets niet hebben begrepen (deed ik ook niet flink wat jaren terug), lees dan verder. In het volgende hoofdstuk zal ik het volgende onderwerp uitleggen: Doctype.

Doctype

Een website heeft altijd stomweg een doctype nodig. Zoals je een vriend nodig hebt, echtgenoot of vrouw. Of niet, gebruik dan alsnog een doctype. Met dit laat je in de browser zien welk soort formaat HTML je wil gebruiken om je website te kunnen laden. kijk regelmatig op W3 Schools voor nieuwe doctypes. Ook om te kijken of het gebruikte doctype regel die je gebruikt nog steeds o.k. is en of de meta tag nog altijd actueel is! Voor HTML 5 is het doctype (tromgeroffel):

<!DOCTYPE html>

Met dit doctype (niets te maken met een doctor, maar met het soort document) is er altijd een heel trouwe charset, geschreven binnen de head tags:

<html>
<head>
<meta charset="UTF-8" />
</head>

Gemakkelijk, klaar. Ei is gelegd. Laten we dus snel vloeiend naar de head tag gaan!

Head

De head sectie ziet er als volgt uit (neem over wat tussen de 2 strepen staat):

<html>
<head>
<meta charset="UTF-8" />
<!--/*IE Fallback*/-->
<!--[if lt IE 9]>
<script src="html5.js"></script><![endif]-->
<title>Dutchhomepage HTML 5</title>
<link rel="shortcut icon" href="http://members.casema.nl/jwnieuwerth/myfavicon.ico" />

<link rel="stylesheet" href="style.css" />

</head>

De head sectie kun je beter niet verwarren met de header in je website. In je head sectie worden allemaal verchillende links opgeslagen met style sheets en java scripts die als motor voor je website worden opgeroepen:

1. Jammer wel dat de Microsoft browsers tot en met versie 8 niet klaar zijn voor HTML5. Hiervoor gebruik ik dan ook het javascript html5.js door de enige echte Remy Sharp. Klik rechts om het javascript te downloaden en zet het in je eigen root directory van je website: html5.js.

2. In title (titel) plaats ik de tekst die verchijnt op de tab bovenaan in je browser, je ziet dit telkens weer. In mijn geval is dit dus Dutchhomepage HTML5. Mmmmm, mompel mompel... best saai!

3. Je zou ook je eigen favicon kunnen plaatsen, het heel kleine symbool links in de url of naast je titel. Alleen doen als je je eens heel verveeld, je mag het ook weglaten!

4. Hierna volgt het aanroepen van de stylesheet voor de lay-out in je *.htm bestand.

Zoals je wellicht al hebt ontdekt, is het echt niet moeilijk om een website te openen, maar het is nog niet een volledige HTML5 website. De echte inhoud zit namelijk in de body tag, het volgende hoofdstuk. Wordt het dan nu echt spannend? Misschien voor de nerds, vast wel!

Body

Nadat je de head sectie hebt afgesloten, open je de fitte(?) body sectie. Dit ziet er als volgt uit:

<body>
  <header>
  <img src="img/imageheader.jpg" width="300" alt="Je websie logo of tekst hier" />
 <nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="modellennl.htm">Modellen</a></li>
    <li><a href="fotonl.htm">Foto's</a></li>
    <li><a href="linkmonthnl.htm">Expositie</a></li>
    <li class="aan"><a href="websitenl.htm">Website</a></li>
   </ul>
  </nav>
  </header>
 <article>
  <section>
   <p>
    Tussen de p tags schrijf je altijd tekst voor 1 alinea.
   </p>
  </section>
  <section>
   <p>
   Je zou ook een plaatje kunnen plaatsen, dit doe je als volgt:
   </p>
   <p class="center">
   <img src="img/dutchhomepageborder2.png" alt="dutchlabel" />
   </p>
  </section>
 </article>
 <footer>
 </footer>
</body>
</html>

In je body heb je een volgorde van onderdelen, dat maakt de webwereld uniform! Eerst altijd de opening met body (en later weer sluiten, zoals elke divisie). In die body staat alles wat je werkelijk leest in een website: header (kop met logo), navigatie (menu), article (artikel) en footer (de voettekst).

Na de opening van de body volgt de header met het logo van je website. Maar ook het menu is binnen de header die altijd bekend staat onder de html naam nav. Meestal zijn menu's in de vorm van een lijst, ook in dit kleine voorbeeld.

Na het sluiten van je menu nav en het sluiten van je header, wordt het artikel geopend met, je raadt het al: article. Binnen een article vind je secties met de naam: section. Hierin sla je informatie op die je van elkaar gescheiden wilt houden.

Tenslotte het laatste leesbare deel van je website: de footer, de voettekst. Hierin zou je copyright informatie, een link naar de disclaimer, misschien enkele snelle links kunnen opslaan.

Veronderstel dat iedereen nu dit HTML5 in deze volgorde als code gebruikt, dan worden alle websites uniform. Dit geeft als voordeel dat zoekmachines, denk aan o.a. Google, sneller kunnen zoeken naar waar het op zoek is!

Jamie Oliver zou dit nog kunnen brouwen! Onder de volgende regels, tadaaaa, vind je dan uiteindelijk een hele basis voor een HTML website:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!--/*IE Fallback*/-->
<!--[if lt IE 9]>
<script src="html5.js"></script><![endif]-->
<title>Dutchhomepage HTML 5</title>
<link rel="shortcut icon" href="http://members.casema.nl/jwnieuwerth/myfavicon.ico" />

<link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
  <img src="img/imageheader.jpg" width="300" alt="Hier je website logo of tekst" />
 <nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="modellennl.htm">Modellen</a></li>
    <li><a href="fotonl.htm">Foto's</a></li>
    <li><a href="linkmonthnl.htm">Expositie</a></li>
    <li class="aan"><a href="websitenl.htm">Website</a></li>
   </ul>
  </nav>
  </header>
 <article>
  <section>
   <p>
    Tussen de p tags schrijf je altijd tekst voor 1 alinea.
   </p>
  </section>
  <section>
   <p>
   Je zou ook een plaatje kunnen plaatsen, dit doe je als volgt:
   </p>
   <p class="center">
   <img src="img/dutchhomepageborder2.png" alt="dutchlabel" />
   </p>
  </section>
 </article>
 <footer>
 </footer>
</body>
</html>

Nou, ehhhhh.... moet bekennen dat het nog niet veel is, maar ja, het is een start van de inhoud van je website. Het volgende onderwerp is gemakkelijk: het plaatsen van tekst, je zag dit al in bovenstaande html, je weet wel, tussen de p tags.


Tekst

Nu maar niet al te enthousiast gaan worden, want tekst plaatsen is een beetje gaperig saai. Hou altijd in de gaten, helemaal wanneer je zoveel praat als ik doe, dat je spaarzaam met tekst bent in een website. Te veel tekst zal je bezoeker vrij snel vervelen, tenzij je een groot schrijver bent. Ben ik dus niet. Waarschijnlijk zijn mijn grappen soms desastreus. Maar snel terug naar de tekstopmaak, excuus voor de afdwaling!

Eerst eens wat eerste CSS, je weet nog, je slaat dit op in een style.css bestand. Hoe zit dat er daar uit?

/* body CSS */
body {
font-family: Verdana,arial,serif;
}
/* Tekst CSS */
p {
color : #000000;
margin: 10px 20px 10px 10px;
font-size : 80%;
font-weight : normal;
}

In bovenstaand voorbeeld kies in je je prachtige lijf body voor de font-family (tekst familie) Verdana, hierna Arial enz.. Kies tenminste 3 fonts en zeker door de computer herkenbare bekende fonts (lettertypen). In de p voor tekst kies je een color (kleur, die je goed leesbaar kiest tegen de achtergrond), de size (grootte, ik kies zelf voor percentage, je zou 9px kunnen kiezen, maar liever niet voor mijn bril!) en de font-weight (zwaarte van het lettertype), standaard normal (normaal), niet bold (vet).

Waarschijnlijk heb je intussen al door dat het nu wel heel gemakkelijk is om in de hele website de tekst te veranderen: het heeft alleen aanpassing nodig van de CSS! En maakt je website uniform (alweer ja): het is tenslotte geen kermis atractie. Niets tegen kermis trouwens!

Kloksgewijs (te starten bij 12.00 of 00.00? uur), geef ik boven de alinea tekst 10px ruimte, rechts 20px ruimte, onder de tekst 10px ruimte en tenslotte links van de aline tekst 10px ruimte.

Laten we snel doorgaan naar de HTML:

<p>
Leer jezelf altijd aan om tekst tussen de p tags te plaatsen, want dan kun je later tekst opmaak wijzigen door alleen de p style in het CSS bestand te veranderen.
</p>

Zei je toch, niet te enthousiast worden. Boevenstaande wordt dan:

Leer jezelf altijd aan om tekst tussen de p tags te plaatsen, want dan kun je later tekst opmaak wijzigen door alleen de p style in het CSS bestand te veranderen.

Had ik je al verteld altijd tekst tussen de p tags te.... Nou ja, ook voor het correcte HTML5.

Euhhh... jaja. Volgende onderwerp was, ach, natuurlijk plaatjes.

Plaatjes

In een visueel ingestelde maatschappij waarin we leven, wat zou je website voorstellen zonder foto's, afbeeldingen, niet te veel animatie, pure schoonheid. Als amateur fotograaf krijg ik niet veel aandacht. Veel mensen vinden mijn modellen websites leuk, maar vooral om er van te leren voor de richting van hun eigen website. Maar laten we niet weer in mijn afdwalende gedachten verzuipen.

Wanneer je - heel misschien zorgvuldig - al las in het body hoofdstuk, zag je dat je een afbeelding gecentreerd kunt plaatsen:

<p class="center">
<img src="img/dutchlabel.gif" alt="dutchlabel /">
</p>

dutchlabel

Let op: gebruik altijd alt="tekst" in deze tag binnen deze img src tag. In dit geval gebruik ik ook de p tag! Met alt verwijs je je browser naar de alternatieve tekst wanneer een plaatje niet zichtbaar is. Bij gebruik van deze alt verscheen vroeger een klein rood kruisje met de alternatieve tekst wanneer het plaatje niet is gevonden. En een rood kruisje of geen afbeelding is er natuurlijk altijd wanneer je niet kunt zien. Er al eens over nagedacht? Wat zouden ze moeten zien? Probeer dit te omschrijven of wees eerlijk wanneer je dit niet doet!

Hierna volgt de HTML 5 waarin een afbeelding rechts en links wordt uitgelijnd ten opzichte van wat tekst (een beetje vage zin):

<p class="right">
<img src="img/dutchlabel.gif" alt="Dutchlabel" />
</p>
<p>
Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, zei je toch: Ik ga niet loremps upsilum
</p>
<p class="left">
<img src="img/dutchlabel.gif" alt="Dutchlabel" />
</p>
<p>
Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, zei je toch: Ik ga niet loremps upsilum, weet niet eens wat het betekent!
</p>

This results in:

Dutchlabel

Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, zei je toch: Ik ga niet loremps upsilum

Dutchlabel

Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, Ik ga niet loremps upsilum, zie je toch: Ik ga niet loremps upsilum, weet niet eens wat dit betekent!

Is dat zo?

De CSS voor afbeelding in mijn style sheet is:

p.pic { /* Plaatje algemeen */
margin-left : 10px;
margin-right: 20px;
border: 0;
}
p.right { /* Plaaatje rechts drijvend tov de tekst */
font-size : 60%;
float : right;
border : 0;
margin : 0 20px 15px 20px;
}
p.left { /* Plaatje links drijvend tov de tekst */
font-size : 60%;
float : left;
border : 0;
margin : 0 20px 15px 10px;
}

Had ik je al eens ingefluisterd dat CSS het leven wel heel gemakkelijk maakt? Tenminste wel in mijn web wereld!

Wat je ziet in de 2e stijl p. right ( is het verzoek een afbeelding rechts te laten drijven en de margins (kantlijnen) er omheen zijn kloksgewijs boven, rechts, onder en links van de afbeelding. Geef de afbeelding altijd deze ruimte, zoals je zelf je ruimte wil in de metro!

De derde stijl die start met p.left { heeft natuurlijk dezelfde context, maar laat in dat geval de afbeelding links van de tekst drijven.

Tabellen

Om tekst te verdelen in enkele rijen zoals dat onder andere zichtbaar is in mijn Sitemap maak ik gebruik van tabellen. Tabellen worden vooral gebruikt om informatie snel overzichtelijk te maken in een deel van het scherm. Hieronder een vrij algemene uitleg hoe ik omga met een tabel.

Uitgewerkt voorbeeld van een tabel zou kunnen zijn:

Voorbeeld van een tabel in een website
rij 1 en kolom 1 rij 1 en kolom 2 rij 1 en kolom 3
rij 2 en kolom 1 rij 2 en kolom 2 rij 2 en kolom 3
rij 3 en kolom 1 rij 3 en kolom 2 rij 3 en kolom 3

In tags ziet deze tabel hierboven als volgt uit:

<table>
<tr><td colspan="3" class="title">
   Voorbeeld van een tabel in een website
</td></tr>
<tr><td>
   rij 1 en kolom 1
</td><td>
   rij 1 en kolom 2
</td><td>
   rij 1 en kolom 3
</td></tr>
<tr><td>
   rij 2 en kolom 1
</td><td>
   rij 2 en kolom 2
</td><td>
   rij 2 en kolom 3
</td></tr>
<tr><td>
   rij 3 en kolom 1
</td><td>
   rij 3 en kolom 2
</td><td>
   rij 3 en kolom 3
</td></tr>
<tr><td colspan="3">
    <br />
</td></tr>
</table>

Laat ik dit eens uitleggen, een een, nou ja, ehhh...., andere (aaahhhh!) tabel?

Hoe om te gaan met rijen, kolommen, border (randen) en colspan (samenvoegen kolommen)
Code Uitleg
<tr><td> Open de eerste rij en de eerste kolom
</td><td> Sluit de kolom en open de volgende kolom
</td></tr><tr><td> Eindig de rij, open de volgende rij en de eerste kolom in deze volgende rij
</td></tr> Sluit kolom en rij aan het einde van de tabel
</table> En natuurlijk: sluit altijd de tabel
colspan="number" Je kan de breedte van een vak manipuleren en daarmee een aantal rijen samenvoegen met HTML!

Nu zal dit je even wat studeren zijn, het is niet het eenvoudigste onderdeel binnen een website. Met wat oefenen met tabellen en leren van fouten tijdens validatie is dit wel goed aan te leren.

Voor de gebruikte tabel stijlen zou je echt een kijkje moeten nemen in het onderdeel CSS tabellen.

Het wordt zo langzamerhand tijd voor het menu in html!

Menu

Toegankelijkheid voor websites zal een steeds grotere rol spelen in de toekomst. Dat is ook precies de reden waarom ik het menu heb vereenvoudigd naar 1 regel (geen submenu dus), werkend onder HTML5 en met CSS 3 effecten (transitions). De laastste zijn zichtbaar in Google Chrome en Mozilla Firefox en Opera. Het menu werkt zonder enig gebruik van JavaScript. De HTML 5 in het menu is bijzonder eenvoudig:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="modellennl.htm">Modellen</a></li>
<li><a href="fotonl.htm">Fotografie</a></li>
<li><a href="linkmonthnl.htm">Expositie</a></li>
<li class="aan"><a href="websitenl.htm">Website</a></li>
<li><a href="linksnl.htm">Links</a></li>
<li><a href="archivenl.htm">Archief</a></li>
<li><a href="contactnl.htm">Contact</a></li>
<li><a href="indexnl.htm">Sitemap</a></li>
</ul>
</nav>

Gebruik altijd <nav> om te openen en om te sluiten gebruik je </nav> om de wereld uniform een eensgezind te maken in html! Let's unite together!

Kijk hierna goed wanneer je <li> gebruikt om te openen en </li> voor het sluiten van een item, en open en sluit uiteraard de hele lijst met <ul> en </ul>. Het spreekt voor zich goed op te letten welk onderdeel van de website aan is met class="aan". Pas dit aan in ieder HTML bestand.

Euhm..... mocht je nou dit menu hierboven willen testen, moet je even naar boven kijken.... maar dat wist je natuurlijk al!

Kijk in CSS menu voor de gebruikte CSS van dit menu!

Links

Een html document is natuurlijk maar weinig zonder hyperlinks, kortweg links. Het hele world wide web is een verzameling van http adressen, ook soort van links, wat we ook wel internet noemen.

met een link verwijs je naar een andere plek in je website of een url buiten je website. Dat kan in de vorm zijn van onderstreepte tekst, een afbeelding of menu-item.

Mijn links zijn onderlijnd, het wordt dan snel herkend in je website. Als iedereen verschillende manieren hanteert om te laten zien dat er links zijn is het niet helder voor de bezoeker waar die links zouden kunnen zijn. Om de links nog eens te benadrukken maak ik ze ook nog wat groter binnen de p tags. Wanneer je met de muis over de link gaat zal de onderlijning verdwijnen en de kleur verandert ook licht.

In mijn website zou je de volgende links kunnen vinden:

*Ga naar hoofdstuk Website voorbeeld link
*Ga naar hoofdstuk website wanneer je daar niet bent en ga naar onderwerp link voorbeeld link
*Scroll naar onderwerp link wanneer je al in onderdeel website bent voorbeeld link
#Ga naar een andere website W3 Schools in de browser voorbeeld link

Vast niet erg dat ik alvast de uitleg in de links heb geplaatst in plaats van de originele namen te gebruiken. Tussen de volgende lijnen zie je dezelfde 4 links in html code:

<a href="websitenl.htm"><img src="img/intern.gif" alt="*">Ga naar hoofdstuk Website voorbeeld link</a>

<a href="websitenl.htm#link"><img src="img/intern.gif" alt="*">Ga naar hoofdstuk website wanneer je daar niet bent en ga naar onderwerp link voorbeeld link</a>

<a class="scroll" href="#link"><img src="img/intern.gif" alt="*">Scroll naar onderwerp link wanneer je al in onderdeel website bent voorbeeld link</a>

<a href="http://www.w3schools.com/"><img src="img/extern.gif" alt="#">Ga naar een andere website W3 Schools in de browser voorbeeld link</a>

Voor interne links in hetzelfde html bestand gebruik ik geregeld het scroll javascript (rechtsklik, kijk in de Bron en zoek naar scroll script bovenin).

Wat je ziet in onderdeel Links dat ik * gebruik om een interne link te markeren en deze # voor een externe link. Niet vergeten om een alt(ernative) voor deze gif aan te geven.

Om naar een punt te gaan ergens in een html bestand zet je het doel als volgt in je website:

<a id="link"></a>

Je kunt ook banners gebruiken van andere websites binnen een html link:

<p><a href="http://www.w3schools.com/"><img src="http://www.w3schools.com/images/logo_new2.jpg" alt="W3 schools website"></a></p>

Dit resulteert dan in:

W3 schools website

Uiteraard zul je ook eens willen kijken naar de CSS van deze links.


Textarea - het alternatieve tekstveld

Even getwijfeld over dit onderwerp, want ik gebruik deze alternatieve textarea bijna niet meer. Maar toch besloten om je het te laten zien wanneer je ernaar zou kunnen zoeken. De uitleg staat in het frame zelf:

Uitleg

Eens wat CSS voor deze alternatieve textarea:

.textareaalt { /* alternate textarea */
float: left;
color : #000000;
margin: 10px 0 20px 10px;
width: 95%;
height: 300px;
background: #F2F2F2;
border-width: 0;
overflow: auto;
display: inline;
}

Dit is een alternatieve methode om een textarea zonder verschillen te hanteren in verschillende browsers. Browsers zouden namelijk een normale textarea verschillend kunnen weergeven en dat is precies wat je niet wilt.

Balangrijk hierbij zijn margin (ruimte rondom de textarea), height (hoogte) en width (breedte) in de CSS. Wat je niet moet vergeten hierbij is de overflow en display: inline om de scroller zichtbaar te maken. Verschil met de normale textarea is dat je de tekst wel plaatst tussen de p tags. Vandaag de dag adviseren website bouwers om de gebruikers van je website zo min mogelijk extra te laten scrollen, gebruik deze textarea's daarom zo weinig als mogelijk.

Om deze alternatieve textarea te starten en te stoppen gebruik je de volgende tags:

<div class="textareaalt">
en om de textarea te sluiten gebruik je:
</div>

Volgende onderdeel gaat over kleuren, zonder kleuren zou het toch wat saai zijn!

Kleuren

Geregeld vragen mensen me hoe ik kleuren kies, meestal onder verwijzing naar mijn modellen websites. Het antwoord is verrassend eenvoudig: gebruik foto's. Met Photoshop (je zou ook kunnen gaan naar http://imagecolorpicker.com/) zoek ik dan naar de kleuren van de foto. Gebruik deze dan in je website en je hebt een mooie combinatie van kleuren. Natuurlijk is een teveel gebruik van verschillende kleuren veel te druk, maar we zijn met kleding kopen ook al bescheiden met gebruik van kleuren, of niet soms?

Maar hoe definieer je dan een kleur? Eerst moet je dit weten:

Opbouw van kleurencode: #RRGGBB:
# Altijd de opening van een kleurencombinatie
RR kleur deel rood, hoeveel intensiteit rood wil je in je kleur?
GG kleur deel groen, hoeveel intensiteit groen wil je in je kleur?
BB kleur deel blauw, hoeveel intensiteit blauw wil je in je kleur?
Combinaties die mogelijk zijn is numeriek van 0 tot 9 op de plekken van R, G of B en de letters van A tot en met F in de plekken van R, G en B. Het is niet toegestaan om hoger dan F te gebruiken in een kleur. Voorbeelden zie je in de volgende tabel.
Een paar combinaties met de 3 basis kleuren:
Code kleur Uiterlijk kleur Uitleg
#000000
rood=00 groen=00 blauw=00
Alle getallen zijn nul, dus is de kleur zwart.
#900000
rood=90 groen=00 blauw=00
Eerste twee getallen hebben een roodwaarde, dus de kleur is rood. Om een heldere tint te krijgen selecteer ik hier 90.
#009000
rood=00 groen=90 blauw=00
Tweede paar getallen zijn groen, dus de kleur is groen.
#000090
rood=00 groen=00 blauw=90
Laatste paar getallen is blauw, dus is de kleur blauw.
#FFFFFF
rood=FF groen=FF blauw=FF
rood, groen en blauw hebben de hoogste waarde die is toegestaan met de F (A-F). Omdat de F de hoogste waarde is en ik gebruik het in alle waarden krijg je de witte kleur, net als een canvas.
#808080
rood=80 groen=80 blauw=80
Met rood, groen en blauw als gelijke getallen, hier bijvoorbeeld 80, krijg je een groot aantal aan grijze kleuren.
#9999FF
rood=99 groen=99 blauw=FF
Met rood op 99, groen op 99 en blauw op het hoogste niveau FF krijg je deze paarse kleur.
#FFFF80
rood=FF groen=FF blauw=80
Met rood op FF, groen op FF en blauw op 80 krijg je deze gele kleur.
#C1D98F
rood=C1 groen=D9 blauw=8F
Geeft deze soort van groene kleur.
Upload je afbeelding/url en vind je kleur op: http://imagecolorpicker.com/.

Na heel wat html wordt het nu echt tijd voor CSS...


CSS bestand

CSS3...

...omdat het kan! Uniformiteit, maar nog altijd uniek! Vind je tekst snel, nooit meer lang zoeken! Snelle aanpassing van de lay-out Geeft het oog van je bezoeker rust en een ontspannen stel hersens! Verandert fonts of tekst hoogte in een paar klikken! Laadt de website in een paar seconden! Ziet er goed uit in een paar seconden! Geeft je meer tijd voor de inhoud! Omdat je snel een lay-out effect wil! Je zou onnodig java script kunnen vermijden! Nieuwe lay-out in paar minuten! Menu's zouden je geen hoofdpijn moeten geven! Laat dit ons kleine geheim blijven! stille muis

CSS de motor voor de lay-out en tekst

Eerder vertelde ik al dat CSS (afkorting voor Cascading Style Sheet) ergens de motor is, hoe je websites er goed uit kunnen zien zoals jij dat wilt. Met CSS zet je alle delen (body, header, article, section, footer) op de juiste plek in je website, of maak je lagen om de onderdelen op de goede plek te zetten. En in welke vorm ze er dan uitzien.

Je bedenkt welke fonts (lettertypen) je wilt gebruiken, welk percentage text size (tekst grootte) (p) zou moeten zijn. Of hoe een title (titel) (h1,h2) er uit gaat zien.

Hoe gaat een section (sectie) in een article (artikel) er uit zien? Of hoe zal je navigatie opereren met CSS3? En wat te denken over afbeeldingen, forms (formulieren), tables (tabellen), hoe gaan die er uit zien?

Ons klein geheim is: zet zo veel mogelijk als je kunt hoe je website er uit zou moeten zien in je style.css bestand en niet in je onderwerp.htm bestand. Met soms heel kleine uitzonderingen.

Dus, het is niet een echte scheiding? Nee, ze opereren nog steeds samen zoals een diner aan een tafel en ze bedrijven de liefde. Een paar snelle voordelen vind je in de rechter kolom.

CSS, kom alsjeblieft in mijn onderwerp.htm

Welnu, hoe roep je dit style.css betand aan in een index.html of onderwerp.htm bestand? Mwoah, best eenvoudig:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!--/*IE Fallback*/-->
<!--[if lt IE 9]>
<script src="html5.js"></script><![endif]-->
<title>Dutchhomepage HTML 5</title>
<link rel="shortcut icon" href="http://members.casema.nl/jwnieuwerth/myfavicon.ico" />

<link rel="stylesheet" href="style.css" />

</head>

Kijk naar deze tekst, maar dan hierboven. Het kan niet eenvoudiger. De tag roept de stylesheet in de head aan (niet in de body!) en de motor draait onmiddelijk warm in je onderwerp.htm bestand.

CSS terugval voor IE

Alleen wanneer echt nodig zul je een terugval schrijven voor oudere browsers in je style.css. Je plaast eert de CSS voor IE (noem het een herstel) en hierna de CSS voor moderne browsers in hetzelfde style.css bestand. Stel dat je het volgende gebruikt, background: url('transparant.png'); voor oudere Internet Explorer versies, waar je dus niet kunt gebruiken: background rgba(255, 0, 0, 1);. Dan zal IE het transparant.png bestand pakken en Google Chrome pakt dan de CSS3 kleur code hexadecimaal (eerste 3 cijfers) en transparant waarde (vierde cijfer). Klaar. Maar wanneer je deze 2 regels zou omdraaien gaat het fout. Google Chrome zal kijken naar de laatst aangeboden stijl die het ziet en zal dan het transparant.png genereren en niet de rgba code! Terwijl IE het nog steeds goed doet. Het beste idee is dus codes te gebruiken die beide browsers begrijpen. En vertrouwen dat je bezoeker geregeld hun browser updaten....

CSS in tekst en afbeeldingen

Boven in tekst en afbeeldingen heb ik al de eenvoudige CSS gegeven. Kijk daar voor de gebruikte CSS. Maar ik gebruik ook nog headers.

CSS in mijn headers

De eerste header (zeg maar koptekst) die ik gebruik is h1. Deze header verschijnt met een achtergrondbalk als achtergrond. De tweede is er 1 zonder achtergrond, de h2.

/* Headers */
h1,h2 {
color : #666666;
margin: 15px 20px 15px 10px;
font-size : 100%;
font-family: 'Trebuchet MS',Verdana,arial,serif;
background: #C2C3BE;
border-radius: 5px;
font-weight: normal;
text-indent: 5px;
}
h2 {
background: transparent;
font-weight: bold;
min-height: 30px;
}
h2 a {
font-size : 100%; /* correctie hover h2 */
}

CSS begint altijd met dezelfde tag als in html maar dan zonder de < en >. Je opent altijd een stijl met { en sluit dit dan weer met }. Om elk CSS effect te scheiden gebruik je altijd een ;. En om het effect te kiezen wat iets moet worden zet je altijd bijvoorbeeld achter een font-weight een :. Het heeft dus continu dezelfde structuur. 1 fout hierin en het kan het hele uiterlijk van de website doen breken in je scherm. Daarom heb ik mezelf aangeleerd altijd eerst onmiddelijk de opening en sluiting van een stijl te typen met { en }. En let ik op dat ik de : en ; op het goede moment gebruik.

Voor de grote de echte man header h1 kies ik voor een grijze font kleur #666666. Door het zetten van een kloksgewijze margin (ruimte er om heen, boven, rechts, onder, links) maak ik een grote langgerekte balk achtergrond met als kleur #C2C3BE en ronde hoeken van 5px. Voor de font heb ik gekozen voor Trebuchet, kies de font die je wil, zet de tekst met indent 5 px vanaf links in de smalle achtergrondbalk.

Voor de kleinere broer header h2 zonder achtergrond, heb ik de achtergrond transparant gemaakt. Ik wilde voor deze een vette font-weight. Verder heb ik het een minimale hoogte gegeven voor de eigen ruimte.

CSS menu

Mijn CSS menu is hoofdzakelijk CSS3 en werkt in moderene browsers zoals Google Chrome, Firefox en Opera en in de nieuwere versies van Internet Explorer vanaf versie 9. Er is een terugval bij ingezet voor oudere versies van Internet Explorer, het wint niet de schoonheidsprijs, maar je kunt nog altijd het licht uitdoen!

/* Navigatie menu boven */
nav ul {
margin: 0 0 0 0;
width: 100%;
background: url(img/trans.gif);
}
nav ul li {
list-style-type: none;
display: inline;
font-size: 80%;
}
nav ul li a {
float: left;
text-decoration: none;
color: #ffffff;
padding: 10.5px 2.5%;
background: transparent;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
border-radius: 5px;
}
nav ul li a:visited {
color: #ffffff;
background: transparent;
}
nav ul li a:hover {
color: #666666;
background: url('img/white.png');
background: rgba(255,255,255,0.8);
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
nav ul li.aan a,nav ul li.aan a:visited {
background: url('img/white.png');
background: rgba(255,255,255,0.8);
}

Met <ul> open je in een lijst met html in je onderwerp.htm bestand. Eigenlijk gebruik ik altijd een lijsten ul voor een menu's. Of voor lange lijsten in links. Met </ul> sluit je een lijst af. Alle items van een lijst in html worden ingepakt met <li> en </li>. In menu had ik het al over de html. Omdat html5 altijd <nav> gebruikt voor de navigatie gebruik ik natuurlijk ook nav in de CSS stijl.

In nav ul { zal de navigatie altijd 100% breedte innemen en geen overtollige ruimte met margin door de 4 keer 0. De background (acthergrond) heeft een volledige transparant in de achtergrond voor het speciale gradient effect om doorzichtig te worden. Belangrijk: de header Dutchhomepage drijft links voor het menu: Bij smallere schermen zal het menu in 2 regels worden opgesplist en valt dan niet weg in het artikel.

De nav ul li { display: inline; stijl zorgt ervoor dat de knoppen in li in mijn horizontale menu horizontaal worden geordend binnen de lijst ul. De padding geeft ruimte rond de tekst van de knop van boven en onder met 10.5px en links en rechts een ruimte van 2.5%. Samen met nav ul li a:hover zorg ik voor een slow motion van een verandering in achtergrond (background) en font kleur (font-color). Deze CSS3 transition (verandering) werkt in Google Chrome, Firefox and IE9+. Kijk eens Java gelovigen, zonder javascript Yesssssss!

In nav ul li a { laat je de menu items links van elkaar drijven met float: left;, in een naviagtie wil je meestal geen onderstreping door middel van text-decoration: none;. Weg lijn. I zet de font-size: 80% (font grootte op 80%), zoals aardige en flexible benen. Groeit of verkleind met de schermgrootte.

In nav ul li a:hover { vind je de achtergrond die ik gebruik voor oudere versies van IE8-: white.png. Maar Google Chrome herkend de 2e regel met background: rgba(255,255,255,0.8); en maakt het wit met 3 getallen (255,255,255) 80 procent (0.8) aan waarde transparant. Deze regels niet omdraaien, anders neemt Google Chrome de white.png achtergrond!

Dan wil je nog weten waar je je bevindt binnen een website. In de html gebruik ik class="aan" voor het actieve onderwerp binnen mijn website, zoals Website nu aan is bovenin het menu. Het blijft ook altijd aan zonder hover (a), met een muis over (a:hover) en wanneer de links ooit eens is bezocht (a:visited). De laatste is het meest vergeten! Arme, arme bezochte links.

Hou het schoon dame
Schoon en eenvoudig!

Wanneer je nu sub-items wil gebruiken, zul je ook Javascript of JQuery moeten gebruiken. In mijn website gebruik ik bewust geen sub-items in het menu, omdat het niet nodig is en ik hou ervan om het menu schoon en eenvoudig als mogelijk te presenteren. Je zou jQuery kunnen gebruiken voor effecten in je menu, maar ik denk dat het afdoende is om CSS 3 effecten zoals de vermelde transitie (transition). Gebruik dan 2 maal de 4 regels voor de verschillende browsers.

Kijk in Menu hoe de html van het menu er uit zou moeten zien.

CSS scroll naar boven pijl

Met het aanroepen van de basis script van jQuery bibliotheek html: <script src="jquery-1.9.1.min.js"></script> en het scroll script html: <script src="scrollto2.js"></script> tussen de <head> en </head> tags maak ik het scrollen mogelijk. Natuurlijk is er ook een stijl voor de ga naar boven knop: (Je zou de bestanden kunnen downloaden met de gegeven links en deze in een *.js bestand zetten).

/* scroll naar boven pijl */
.top {
clear: left;
margin: 10px 0 40px 10px;
display: block;
background-image: url('img/gototop.png');
height: 30px;
width: 20px;
}

Eerste wat je opvalt is natuurlijk dat er niet staat float: left maar clear: left;. Hiermee zal de pijl altijd links onder je tekst worden geplaatst en niet wanneer er nog ruimte is er achter!

De combinatie van height: 30px; (hoogte 30px), width: 20px; (breedte 20px) en display: block (laat blok zien) zorgt ervoor dat er ook een blok zichtbaar is (anders zie je niets). Natuurlijk wil je ook wat ruimte rond de pijl met margin: 10px 0 40px 10px;. Uitlijning hier is 10px van boven, rechts niet van belang en daarmee 0, voor extra ruimte onder 40px en 10px van links net als mijn tekst.

De background-image: url('img/gototop.png'); in de CSS is extra handig. Stel dat je een andere pijl wil gebruiken als afbeelding met een andere naam of extensie, hoef je alleen nog 1 CSS stijl te wijzigen voor de hele website.

CSS Tabellen

Kijk in Tabellen voor de html uitleg.

Ook mijn tabellen hebben CSS, dit is geen toeval. Met het forceren van de CSS mark-up zullen tabellen niet zoveel geheugen gebruiken als je website laadt. En het geeft je meer controle over hoe je tabellen er uit zien. Eerst mijn algemene tabel in mijn website:

/* Diverse tabellen in mijn website */ table {
margin : 20px 20px 0 10px;
color: #000000;
font-size: 90%;
background: #F2F2F2;
border: 0px;
border-radius: 10px;
border-spacing: 0px;
}
table a, table a:hover, table a:visited {
font-size: 100%;
}
/* Table common */
td {
padding: 5px 10px 5px 10px;
border: 1px solid #ffffff;
}
td.title {
color : #666666;
font-family: 'Trebuchet MS',Verdana,arial,serif;
background: #C2C3BE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Ook mijn tabellen hebben een margin (ruimte er omheen). Al diverse keren besproken, je weet wel, kloksgewijs vanaf boven. Ik houd van een grotere font-size: 90%; in mijn tabel. De achtergrond heeft een grijze kleur: background: #F2F2F2;.

Als mensen denken dat ze geen border willen, denken ze al snel aan border: 0px;, maar vergeten dan meestal de andere om de ruimte binnen de tabel te verwijderen: border-spacing: 0px;.

Om zeker te zijn dat alle tekst niet verandert van grootte als de muis er over gaat gebruik ik ook table a, table a:hover, table a:visited {font-size: 100%;}. Het moet wel een website zijn, geen flipperkast.

De td (een vlakje in de tabel) krijgt een border: 1px solid #ffffff; witte lijn van 1 px en ook een padding: 5px 10px 5px 10px; voor de ruimte rondom afbeeldingen of tekst kloksgewijs vanaf.....? Denk dat je het al weet: boven!

Dan bouw ik ook nog eens de h1 binnenin een tabel: td.title {. Zelfde kleur, font soort in font-family, en achtergrond. Weer eens een tip voor uniformiteit! Op een of andere manier moest ik ook nog toevoegen border-top-left-radius: 10px; border-top-right-radius: 10px; aan deze titel om ronde hoeken te krijgen, anders liet de tabel de ronde hoeken bovenaan niet zien!

CSS Tabel tijdschrift

Speciale tabel...

...voor extra aandacht van je lezers! Eenvoudig! En puur en alleen CSS en html!

/* Tabel voor grote typografie */
table.tijdschrift {
float: right;
margin: 10px 20px 20px 10px;
font-size: 28px;
line-height: 26px;
text-align: right;
width: 20%;
border-radius: 10px;
padding: 10px 20px;
border-style: none;
border-spacing: 0px;
}
table.tijdschrift td {
border: 0px;
}
table.tijdschrift {
color: #9d9d9d;
}
table.tijdschrift strong {
color: #6d6d6d;
}
table.tijdschrift small {
color: #3d3d3d;
}
table.tijdschrift h2 {
color: #666666;
}

Helaas kon ik niet meer de echte bron van deze bijzondere tabel achterhalen, velen claimen deze. Anders had ik het wel gelinkt. Om extra aandacht te krijgen best handig binnen een tabel. Je kunt verschillende kleuren gebruiken. Met <strong>vette tekst </strong>, <small>dunne tekst </small> en gewoon normale tekst maak je de verschillende indrukken. Tip: kies hierbij kleuren die dicht bij elkaar liggen, bijvoorbeeld diverse blauwe kleuren samen of diverse groene. Dit geeft een extra sterk effect op een veel lichtere achtergrond met ongeveer dezelfde kleur.

Natuurlijk kun je het float: right; (drijf rechts) omzetten naar float: left; (drijf links) en text-align: right; (tekst rechts uitlijnen) naar text-align: left; (tekst links uitlijnen), zoals ik deed in dit voorbeeld hierboven.

Even oppassen: omdat ik gekozen heb voor een algemene kleur voor dit tijdschrift typo met table.tijdschrift {color: #9d9d9d;}, corrigeer ik de ingebouwde h2 header kleur met table.tijdschrift h2 {color: #666666;}, een bijpassende grijze kleur.

Bijzonder in deze CSS is het line-height: 26px; waarin je vastlegt, misschien raad je het al de ruimte boven en onder de de letters (tussenruimte). Je kiest hierbij een grote font met font-size: 28px; om extra aangezette fonts te laten zien.

Kan niets iets bedenken wat we in CSS al niet eerder zagen, of wel? Laat het me weten! Je raakt snel gewend aan het gebruik van CSS en dat is best wel aardig! Daarom wat meer verdieping in CSS, met de divisies! Echt niet moeilijk, gemakkelijk!

CSS Divisies

/* Stijlen voor alle divisies, laat ze zien als een blok */
article, section, footer, nav, aside, hgroup {
display: block;
}
/* Divisies */
body {
font-family: Verdana,arial,serif;
font-style: normal;
padding: 0;
margin: 0;
background: #ffffff;
}
#header {
background: #000000;
background: -moz-linear-gradient(top, #666666, #000000);
background: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#000000));
-moz-box-shadow: 0px 5px 5px #000000; /* Firefox */
-webkit-box-shadow: 0px 5px 5px #000000; /* Safari and Chrome */
box-shadow: 0px 5px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
margin: -5px 0 0 0;
padding: 0px;
width:100%;
box-sizing: border-box;
z-index: 100;
}
section {
float: left;
margin: 20px 20px 5px 10px;
display: block;
width: 90%;
overflow: auto;
border: 1px solid #000000;
color : #000000;
display: inline;
overflow: auto;
font-weight: normal;
font-family: Verdana,arial,serif;
border-radius: 10px;
position: relative; /* For h2 cufon bij veranderen font */
z-index: 1;
-moz-box-shadow: 0px 3px 5px #000000; /* Firefox */
-webkit-box-shadow: 0px 3px 5px #000000; /* Safari and Chrome */
box-shadow: 0px 3px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
footer {
float: left;
margin: 20px 0 0 0;
width: 100%;
height: 60px;
padding: 0em;
list-style-type:none;
background: #000000;
background: -moz-linear-gradient(bottom, #666666, #000000);
background: -webkit-gradient(linear, center bottom, center top, from(#666666), to(#000000));
-moz-box-shadow: 0px -5px 5px #000000; /* Firefox */
-webkit-box-shadow: 0px -5px 5px #000000; /* Safari and Chrome */
box-shadow: 0px -5px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}

body { moet je niet verwarren met article {. In body verschijnt je hele website. Wanneer je nu een full screen website wilt zet je padding: 0; margin: 0; om geen enkele ruimte overlaten op je website canvas) in je body {}. Nu plakt het overal tegenaan de randen van de browser!

#header is het id gedeelte waar in de html mijn Dutchhomepage logo en mijn menu (alleen die hierboven staat) zijn opgeborgen. Voor oudere versies van Internet Explorer gebruik ik een achtergrond met background: #000000;.

Voor IE9+ en Google Chrome, Firefox, Opera en andere browsers gebruik ik een achtergrond background: -moz-linear-gradient(top, #666666, #000000); background: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#000000)); met een kleurverloop van #666666 naar #000000. Voor de verschillende browsers heb je al deze beide regels nodig.

Als je hierboven goed oplet zie je ook dat er een schaduw is in Chrome, Firefox net onder mijn header. Deze wordt opgeroepen met -moz-box-shadow: 0px 5px 5px #000000; /* Firefox */ -webkit-box-shadow: 0px 5px 5px #000000; /* Safari and Chrome */ box-shadow: 0px 5px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ margin: -5px 0 0 0;.

Omdat ik ook nog eens een sticky (blijf hangen) script gebruik om de header bovenaan te houden, gebruik ik ook nog eens box-sizing: border-box;. Deze houdt de box in tact waneer het netjes bovenaan blijft staan geef ik het een z-index: 100;. Het gebruikte aantal is hoger dan in andere divisies in andere delen van mijn website, zoals section die heeft z-index: 1;. De header vindt het cool om op top positie te blijven! 't Is een keuze, ik weet het!

section { is een onderwerp die je weer graag apart houdt van een ander onderwerp in je the html. Houd deze sectie zo flexibel als mogelijk, met een breedte van width: 90%, een automatische verschijning van de scroll bar wanneer nodig met overflow: auto;. En gebruik display: inline; een standaard css om het omsloten element volledig zichtbaar te houden binnen de lijnen van de section.

Tegelijkertijd, maak ook iets van een section, zoals ik dit doe in Home. Ronde hoeken met border-radius: 10px; met een radius van 10px, misschien een dunne lijn met border: 1px solid #000000; en zoals onder en rechts van de header ook een smalle schaduw: -moz-box-shadow: 0px 3px 5px #000000; /* Firefox */-webkit-box-shadow: 0px 3px 5px #000000; /* Safari and Chrome */box-shadow: 0px 3px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */. Mocht je toch iets anders willen ga dan zeker kijken op: W3 Schools en grijp wat CSS van die website!

De footer zoals je echte voeten, heeft ook zo zijn zorg nodig! Zoals de header, maar dan andersom in richting van transitie en van schaduw! Of kies zelfs iets moois. Als het er maar verzorgd uit ziet!

CSS kolommen

/* 2 lange kolommen */
.kolom {
margin-top: 20px;
float: left;
width: 50%;
}
/* 3 lange kolommen */
.kolom {
margin-top: 20px;
float: left;
width: 33%;
}

In Home gebruik ik twee kolommen om de inhoud wat te scheiden. Je zou er ook drie kunnen maken. Hierboven de CSS. Je hoeft dan alleen nog 2 maal <div class="kolom"> </div> te maken om het te vullen met wat inhoud. Dit is de eenvoudigste manier om in een artikel (article) iets te splitsen.

CSS Links

Wie wil er nog standaard links in zijn/haar website? Met het blauw dat bijna nooit past bij de rest van de tekst. Een beetje CSS past je links al aan!

/* Algemene navigatie */
a, a:visited {
color: #000000;
background: none;
font-size : 120%;
}
a:hover { color: #666666;
text-decoration: none;
font-size : 120%;
}

Zelf vind ik het wel grappig om de links net iets groter te maken dan de rest van de tekst met: font-size : 120%; (font grootte 120% van de normale 90%). Enkele maanden geleden las ik een artikel dat me overtuigde een link helder te maken door deze toch een onderlijning mee te geven (maar niet in menu's). Wanneer de muis er over gaat neem ik deze onderstreping weg met text-decoration: none; (geen tekst decoratie) en geef ik de link een andere grijze kleur: color: #666666;.

CSS lijsten

Waarschijnlijk heb je al het volgende bekeken: CSS menu in een lijst. Ook in mijn lijsten kies ik voor uniformiteit:

Het list-style-type: none betekent dat ik geen symbool wil voor de lijst, want ik gebruik zelf een eigen plaatje. De externe links li.ex { markeer ik met background-image: url('img/extern.gif'); externe link dot en interne links markeer ik met li.in { I mark with this background-image: url('img/intern.gif'); interne link dot.

/* Lijsten van mijn website */
ul {
color: #000000;
font-family: Verdana,arial,serif;
list-style-type: none;
font-size: 80%;
margin: 5px 0 5px 10px;
padding-left: 5px;
}
li.ex { /* externe links */
background-image: url('img/extern.gif');
margin-bottom: 2px;
background-repeat: no-repeat;
background-position: 0 .2em; /* links boven tekst tov de afbeelding */
padding-left: 2.0em; /* afstand tekst plaatje */
}
li.in { /* interne links */
background-image: url('img/intern.gif');
margin-bottom: 2px;
background-repeat: no-repeat;
background-position: 0 .2em; /* links boven tekst tov de afbeelding */
padding-left: 2.0em; /* afstand tekst plaatje */
}
li.pt { /* punten in een lijst */
background-image: url('img/punt.gif');
margin-bottom: 2px;
background-repeat: no-repeat;
background-position: 0 .2em; /* links boven tekst tov de afbeelding */
padding-left: 2.0em; /* afstand tekst plaatje */
}

De achtergrond bij de link moet natuurlijk niet worden herhaalt, hiervoor gebruik je: background-repeat: no-repeat; (achtergrond niet herhalen). De andere markers in lijst items margin-bottom:, background-position: and padding-left: zorgen voor de goede positie van de dot (rondje), kijk in de CSS hierboven hoe dit dan werkt.

Suf, vergeet ik bijna een vierkant punt in een lijst, dus eigenlijk de items zonder een link met li.pt { met zijn eigen dot: background-image: url('img/punt.gif'); point in a list dot. Met uiteraard dezelfde opmaak als de andere twee hierboven.

CSS object

De laatste CSS (poeh, he, denk ik dan?) is hoe een object er uit gaat zien, zoals het insluiten van YouTube:

/* insluiten van een object */ object {
position: relative;
width: 380px;
height: 380px;
z-index: 1;
}

De width: 380px; (breedte 380px) en height: 380px; (hoogte 380px) zijn natuurlijk aanpasbaar voor je eigen website.

CSS overzicht in 2 tabellen

Om enig overzicht te geven van al het bovenstaande laat ik nog 2 tabellen zien met uitleg. In de eerste tabel laat ik de opening van de stijlen zien van alle CSS stijlen zoals item { voor mijn website divisies en lay-out stijlen. In de tweede tabel leg ik allerlei soorten van eigenschappen uit die ze zouden kunnen hebben. De CSS stijlen eindigen met een } en elke eigenschap met een ;.

Let wel: een stijl css is iets dat regelmatig verandert. Je zou eens kunnen kijken hoe het er nu uitziet in mijn style.css

De divisies, navigatie en opmaak, het openen van CSS stijlen uitgelegd.
De te openen stijl Uitleg van de te openen stijl (eigenschappen ervan worden uitgelegd in de 2e tabel)
body { In de body stijl geef je de body de css eigenschappen die in het hele canvas zullen renderen in een htm bestand. Zet niet te veel in deze stijl wat niet algemeen zou zijn.
header { (in mijn website: #header) In dit deel zou je je de CSS voor het website logo kunnen plaatsen (in mijn geval Dutchhomepage) en ook een deel voor nav (het menu).
nav { In dit deel berg je de CSS op voor de meest belangrijkste navigatie (menu) in je website.
article { Je raadt dit natuurlijk: in dit deel plaats je alle inhoud van elke *.htm pagina van je website.
section { In dit deel zet je alleen de mark-up CSS voor 1 onderwerp binnen een article (artikel).
footer { In footer de CSS voor de voettekst. Maak er iets moois van. Zou kunnen zijn copyright, een extra index overzicht met lijsten ul.
kolom { CSS een kolom in je style.css wanneer je een blad in 2 delen wilt verdelen in een htm bestand en geef beide kolommen een width (breedte).
nav {,nav ul { Meeste algemene CSS instellingen van je menu voor de hele lijst, niet voor 1 item.
nav ul li { Meeste algemene instellingen CSS voor 1 element van je menu (knop).
nav ul li a { Hoe moet nu een knop in het menu er uit zien wanneer je er niet over gaat met je muis.
class="aan" Aan, dat betekent dat wanneer een item oplicht je in dat onderwerp bent binnen je website.
nav ul li a:hover { Hoe ziet een knop van een menu eruit wanneer je er met je muis overheen gaat?
a, a:visited { Stijl hiermee de algemene links binnen een website. De a:visited is voor een link die je al eerder hebt aangeklikt.
a:hover { Hoe ziet een link er over het algemeen uit als je muis er over gaat, stijl dit dan met a:hover.
h1 { and h2 { De h1 titel balk die ik gebruik met een grijze achtergrond voor alle titels. De h2 titel regel die ik net zo gebruik, maar dan zonder een achtergrond voor de titel.
p { En hoe zou je tekst er uit moeten gaan zien in elk htm bestand. CSS deze altijd!
.vet { Ook handig voor al het schrijven van vette tekst: een aparte p tag met als sub class vet.
p.left { and p.right { Zorgt voor drijven van een afbeelding dan wel links of rechts, met behulp van de p tag.
.textareaalt { Alternatieve textarea (tekstveld) met scrollen, de eigenschappen worden opgeslagen in een CSS bestand.
table { Op sommige plekken gebruik ik tabellen in mijn website, zoals nu bijvoorbeeld, waarin je zit te kijken. Overal gebruik ik dezelfde tabel met dezelfde CSS.
ul { Ul is de combinatie van een hele lijst met punten. CSS de lijst zelf met deze stijl.
li { li is elk item onderdeel in de lijst van ul. CSS elk item van de lijst met deze stijl.
table.tijdschrift { Om een aardige speciale tekst effect te schrijven gebruik ik een glossy methode en die open ik met deze stijl.
table.tijdschrift strong {
table.tijdschrift small {
table.tijdschrift h2 {
Om de CSS te definieren die voorkomt in het glossy element table.tijdschrift strong (dik), small (dunne) teksten en de h2.
td {, td.enkel {t en td.kleur { Ik gebruik verschillende lay-outs voor tabellen in mijn website. Om hier onderscheid in te krijgen roep ik kolommen met een class als bijvoorbeeld enkel en kleur aan hoe die er uit zouden moeten zien.
td.title { In deze CSS style roep ik aan hoe de titelbalk bovenaan vast aan een tabel er uit zou moeten zien. Handig met een class title in html.
img { meestal gebruikt met border: 0px; (geen rand om afbeelding), om te voorkomen dat er een blauwe rand om de afbeelding verschijnt.
li.ex { /* externe links */
li.in { /* interne links */
li.pt { /* punten in een lijst */
CSS hier je externe links met de class ex, je interne links met de class in en punten in een lijst die geen links hebben in class pt.

Uitleg van enkele eigenschappen van het CSS bestand
Eigenschap van de stijl uitleg van de eigenschap (eindigt altijd met een ;)
background: url("achtergrondafbeelding.png"); In dit statement zet je tussen de aanhalingstekens de gewenste achtergrond, in dit geval achtergrondafbeelding.png.
background: none; Hier kies je voor geen achtergrond.
margin 10px 0 20px 30px; Ruimte om een afbeelding of sectie startend met boven (10px), rechts (0, dus geen waarde), onder (20px) en links (30px). Niet door elkaar halen!
padding: 5px 20px; Hoeveel ruimte moet er zijn boven en onder de tekst/afbeelding (5px) en hoeveel rechts en links ten opzichte van de tekst/afbeelding (20px).
float: left; Drijft een divisie, afbeelding of element links ten opzichte van de volgende divisie, afbeelding of element, hetgeen dan ook weer links volgt.
float: right; Net zoals float: left, maar dan drijft het rechts ten opzichte van het volgende deel dat ook weer van rechts aansluit.
width: 250px; Zet de breedte van een tekst, achtergornd, object of afbeelding vast, in dit voorbeeld 250px.
height: 230px; Zoals de breedte, maar dan uiteraard voor de hoogte.
background: #bad5ff; Legt de achtergrondkleur voor een element of een hele divisie vast.
text-indent: 20px; Met text-indent (tekst inspringen) plaats je een onderwerp, tekst of divisie 20 px naar rechts (binnen het gekozen element). Dit gebruik ik voor mijn titelbalk h1.
list-style-type: none; Laat geen standaard ronde afbeelding zien voor een item in een lijst met li's in een hele lijst van ul.
color: #rrggbb; Kleur mijn tekst in rr rood, gg groen en bb blauwe waarde. Toegestande waarden in rrggbb zijn 0-9 en A-F (hexadecimaal).
font-size: 90%; and font-size: 9pt; Zet de font-size (font grootte) op 90% of zet de font grootte op 9pt? Beste oplossing lijkt me met een percentage te werken zodat het lettertype zich aanpast naar de grootte van het scherm van een apparaat.
margin:0 auto; Wanneer je een divisie container wil centreren op je canvas plaats je dit om te centreren in je browser. Gebruik dit samen met text-align: center in de body en text-align: left in je divisie container!
display: inline; and list-style-type: none; Deze stijl zorgt ervoor dat de knoppen in mijn horizontaal menu ook werkelijk horizontaal gaan liggen binnen de lijst ul.
Een andere belangrijke functie display: het zet de divisies op de juist hoogte rechts wanneer je een browser gebruikt zoals Firefox.
font-family: Verdana,arial,serif; Voor de font kies ik zelf Verdana. Het is aan te bevelen om vooral bekende fonts te gebruiken zoals arial en serif, wanneer Verdana niet gevonden wordt zal het tweede gekozen font verschijnen. En hierna het derde. Kies tenminste wel 3 verschillende fonts.
overflow: auto; Gecombineerd met een hoogte (zie hieronder in deze tabel), is het overvloeien geactiveerd en zal er een schuifbalk verschijnen.
height: 470px; Zet de hoogte van bijvoorbeeld een sectie op 470px. Vaak gebruikt met overflow: auto. Maar laat je bezoeker nooit teveel moeten scrollen!
position:relative; Relatieve positionering shuift een element relatief naar de originele positie zodra er ruimte is voor dit element.
z-index:2;
z-index:1;
z-index draagt zorg om vooral dat te laten zien wat het meest belangrijk is. Een menu met een fixed (vaste) positie met een indexwaarde 2 zal boven een article (artikel) met een indexwaarde 1 blijven staan. Het artikel gaat dan achter het menu.
border-collapse: collapse; De staandaard ingebouwde ruimte tussen de cellen in een table zullen niet zichtbaar zijn tussen de kolommen en rijen.
display:block; Laat de menu items zien als een block, met ervoor en achter een zogenaamde lijn breuk om de elementen van elkaar te scheiden.
position: absolute; Positioneert een element op een vaste plek en laat het niet meeschuiven op het canvas in de webbrowser.
Ik leg niet alles uit, ik denk dat het beeld hoe dingen werken wel helder genoeg is. Door het proberen leer je nog het meest! In de volledige CSS uitleg worden nog expliciet veel stijlen uitgelegd. Kijk hierin voor meer uitleg!

Miscellaneous van meest gebruike bestanden in mijn website

Geen ondersteuning, hopelijk tot ziens!

Zelf een website bouwen is intensief, maar wel heel lonend. Je leert veel en het geeft je veel inzicht. Het bepaart website opslag. Tenslotte krijg je preies de website zoals jij die wilt!

Aan alle goede dingen komt een einde, dus ook deze uitleg. Deze uitleg wordt niet ondersteund. Je vragen zijn wel altijd welkom op het Websiteforum.nl, ze hebben me daar goed op weg geholpen toen ik mijn eerste website bouwde!

Hoe dan ook hoop ik dat ik je een klein beetje op weg heb geholpen. Hopelijk zie ik je hier weer terug als je ooit iets mocht zijn vergeten!

Voor nu, een ga je zien! Uit Leiden!

Jullie,

Jan Willem

pdf icon De disclaimer van deze website is van toepassing op de download websitebouwennl.pdf