1 of 26

HTML-CSS

Welkom in de HTML-CSS modules! Werk hieronder de lesbrieven af volgens je planner.

HTML-CSS-0

Welkom in de HTML-CSS-0 module! Werk hieronder de lesbrieven af volgens je planner.

Les 1: HTML, de basis

Elke HTML-pagina begint met <!DOCTYPE html> Daarmee zeg je tegen je browser: Let op! Je krijgt nu HTML-code voor je kiezen. Daarna zie je een <html>-tag dat helemaal onderaan wordt afgesloten met</html>. Binnen de <html>-tag heb je een <head> en een <body> tag. In de <head>-tag kun je de titel van de pagina zetten in het de <body>-tag zet je eigenlijk alles wat je op de pagina wilt zien.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  
  </body>
</html>

Wil je tekst op je webpagina zetten, dan zet je dat dus in de body van je code. Dat betekent dus tussen <body> en de </body>

<body>
  Dit is een stukje tekst.
</body>

Je kunt ook de titel van je webpagina aanpassen. De titel is het stukje tekst dat je bovenaan je webbrowser te zien krijgt.

<head>
  <title>Welkom op mijn eerste pagina!</title>
</head>

Je kunt de inhoud van je body verder uitbreiden met allerlei leuke dingen. Laten we beginnen met het maken van een kopje. Hiervoor kunnen we de <h1>-tag gebruiken.

<body>
  <h1>Dit is een hoofdstuk</h1>
  Dit is een stukje tekst.
</body>

Naast de <h1> -tag heb je ook de <h2>, <h3>, <h4>, <h5> en <h6> tag. Hoe groter het getal, hoe kleiner de letter zullen zijn. Denk er wel om dat je de tags weer netjes aflsluit.

<body>
  <h3>Dit is een groot</h3>  
  <h2>Dit is nog groter</h2>
  <h1>Dit is het grootst</h1>
</body>

Je kunt ook alinea's aanmaken. Dat doe je met de <p>-tag.

<body>
  <h1>Hoofdstuk 1</h1>
  <p>Dit is een alinea</p>
</body>

Opdrachten

[1] Installeer Atom, maak een map en daarin je eerste webpagina. Noem het bestand index.html. Zie hier de installatie video

[2] Verander de titel van je website naar "Een pagina over mijzelf". Denk erom dat je deze tekst tussen <title> en </title> dus gaat aanpassen.

[3] Maak nu drie <H1>-tags aan op je pagina. Noem de eerste "Over mijzelf", de tweede "Hobbies" en de derde "Contact". Dit moet er zo uit komen te zien:

Over mijzelf Hobbies Contact

[4] Zet onder elke <h1>-tags een paragraaf waarin je iets zinnigs verteld over jezelf. Je hobbies en over je contactgegevens. Je hoeft niet zoveel te schrijven hoor. Een regel per kopje is meer dan genoeg. Zie hieronder een voorbeeld:

Over mijzelf
Ik ben jan en ben 12 jaar oud. Ik woon in Amsterdam

Hobbies
Ik zit op voetbal en houd van minecraf

CONTACT
Je kunt mij bereiken op jan@jan.nl

Belangrijk! Gebruik altijd je school e-mail adres of iets dergelijk. Zet niet je telefoonnummer of adres op internet.

Heb je het af? Cool! Je bent dan klaar met deze leskaart. Je kunt met de volgende leskaart aan de slag kan gaan. We gaan de pagina met de komende leskaarten opleuken met foto's, linkjes en nog veel meer!

Les 2: HTML, meer over body, plaatjes en links

Sommige woorden zijn belangrijker dan anderen in een tekst. Om dit aan te geven kun je ervoor kiezen om je tekst dikgedrukt te laten zien. Dit doe je met de <Strong>-tag rondom het woord of de woorden die je dikgedrukt wilt. Hiernaast zie je hier een voorbeeld van. Als je wilt dat je tekst op een nieuwe regel verder gaat, gebruik je de <br>-tag. Deze is een beetje raar omdat hij alleen maar een close-tag is.

<html>
    <h1>Over mij:</h1>
    <p>Hallo mijn naam is <strong>Laura.</strong><br>
     Ik hou heel erg van <strong>programmeren en gamen.</strong><br>
     Deze website is een voorbeeld voor de coderdojo. Hoe        
     cool is het om je eigen website te kunnen programmeren!    
     :)
    </p>
</html>

Tot nu toe zijn we eigenlijk alleen maar bezig geweest met de tekst op onze website. Maar er zijn nog genoeg andere leuke dingen om op je website te zetten, bijvoorbeeld plaatjes! Voor plaatjes gebruik je de <img> -tag, maar je moet deze tag nog wat extra informatie meegeven over het plaatje wat je wilt gebruiken.

Voor een plaatje vanaf je eigen computer gebruik je <img src="LOCATIE PLAATJE">
Bijvoorbeeld <img src="Laura/Afbeeldingen/laura.jpg">

Je kunt ook een  plaatje van het internet gebruiken. Achter src=” zet je dan de website link naar het plaatje.
Bijv.: <img src="http://www.gscdn.org/library/cms/11/12611.JPG">

Het is ook leuk om op je website naar andere pagina’s of websites te kunnen verwijzen. Hiervoor heb je link’s nodig, dit doe je met de <a>-tag. Net als bij plaatjes heeft de <a>-tag meer informatie nodig. Net zoals je bij een plaatje een link moet zetten moet je dat hier ook doen. In plaats van src gebruik je href en daarachter zet je de link van de pagina waarnaar je wilt verwijzen. Zoals hiernaast te zien is. Bij de -tag hadden we niets tussen de open- en sluit-tag in gezet. Bij de <img>-link doen we dat wel. De tekst waarop je kunt klikken om naar de link te gaan zet je tussen deze tags.

<a href="http://www.google.nl">Klik hier om naar Google te gaan.</a>

Opdrachten

[1] Kijk eens terug naar de teksten die je hebt geschreven bij de vorige leskaart. Zijn daar woorden tussen die je belangrijker vindt dan de rest van de woorden? Maak deze dan dik gedrukt zodat ze goed opvallen. Probeer tenminste 3 dikgedrukte woorden op je pagina te hebben.

[2] Het is leuk om onder het kopje “over mij” een foto van jezelf toe te voegen. Als je die niet hebt kun je ook een leuk plaatje van iets anders zoeken op internet. Extra: Misschien vind je je plaatje wel wat te groot of te klein. Het formaat van het plaatje kun je aanpassen binnen de tag. Om te weten hoe je dit kunt doen kun je eens een kijkje nemen op de volgende website: https://www.w3schools.com/tags/tag_img.asp als je er niet uitkomt, vraag het dan gerust aan de begeleiders!

[3] Maak een kopje aan met “leuke linkjes” en daaronder een korte paragraaf met linkjes die je leuk vindt. Kijk terug op wat je bij leskaart 1 hebt geleerd als je niet meer zo goed weet hoe kopjes en paragrafen werken. Extra: Met de <a>-tag kun je nog meer dan alleen maar een link openen in het bestaande scherm. Je kunt bijvoorbeeld ook een nieuw tabblad openen waarin de pagina uit het linkje komt te staan. Om te weten hoe je dit moet doen kun je kijken naar de volgende website: https://www.w3schools.com/tags/att_a_target.asp

Ben je klaar? Tof! Je site ziet er nu al een stuk leuker uit dan eerst. Laat aan een van de begeleiders zien hoe je site eruit ziet.

Les 3: HTML, lijsten

Soms maken we gebruik van korte opsommingen of lijstjes. Bijvoorbeeld de volgende lijstjes: Dingen die ik leuk vind:

Gamen
Programmeren
Lego

Maar ook het volgende lijstje:

Top 3 favoriete films:

The Lion King
Toy Story
Bambi

Dit kunnen we ook in HTML doen! Hiernaast zie je de hele code, geen paniek als je hem nog niet helemaal begrijpt. We leggen hem hierna helemaal uit.

Dingen die ik leuk vind: <br>
<ul>
   <li>Gamen</li>
   <li>Programmeren</li>
   <li>Lego</li>
</ul>
<br>
Top 3 favoriete films: <br>
<ol>
   <li>The Lion King</li>
   <li>Toy Story</li>
   <li>Bambi</li>
</ol>

Het is belangrijk om het verschil te zien tussen de beide lijstjes. Het ene lijstje heeft puntjes, dit noemen we een ongesorteerde lijst. Om een ongesorteerde lijst te maken gebruiken we de <ul>-tag. Vervolgens moet je voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ul>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
</ul>

Daarnaast zijn er lijsten die nummertjes vooraan hebben staan. Dit zijn gesorteerde lijsten, bijvoorbeeld om een top 3 aan te geven. Om een gesorteerde lijst te maken gebruiken we de <ol>-tag. Vervolgens moet je ook hierbij voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ol>
   <li>Nummer 1</li>
   <li>Nummer 2</li>
   <li>Nummer 3</li>
</ol>

Opdrachten

[1] In de website die je net hebt gemaakt vertel je al een paar dingen over jezelf. Je gaat hier nu ook een lijstje aan toevoegen. Kies een van kopjes die je eerder hebt gemaakt en voeg hier een ongesorteerd lijstje aan toe met minimaal 3 items. Je mag zelf kiezen bij welk kopje je dit lijstje zet.

[2] Nu ga je op je site ook een top 5 van je favoriete films, games of artiesten maken. Hiervoor maakt je eerst een nieuwe kopje aan zoals je hebt geleerd bij leskaart 1. Schrijf ook een korte introductieparagraaf over je top 5. Gebruik nu een gesorteerde lijst om je top 5 op je site te zetten. Een voorbeeldje zie je hiernaast: Je mag iets anders doen, als je maar gebruik maakt van een gesorteerde lijst.

[3] Vond je dit eigenlijk wel makkelijk en wil je wat ingewikkelds proberen? Dan hebben wij een uitdaging voor je! Kun je een lijst in een lijst maken? Tip: je hebt nu tags in tags nodig. Probeer maar eens wat en als je er niet uitkomt vraag het dan aan de begeleiders.

Les 4: HTML, tabellen

Je kunt ook tabellen maken met HTML. Zoals je weet bestaat een tabel uit rijen en kolommen. Een tabel maak je met de <table>-tag. Voor elke rij die je in de tabel wil, zet je een <tr>-tag tussen de <table>-tag. En per kolom zet je een <td>-tag in de . Vergeet de <tr> en <td>-tags niet af te sluiten.

<h1>Topscorers Nederlands elftal</h1>
  <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
  </table>

We gaan de tabel uitbreiden met nog een rij. Denk erom dat de nieuwe rij ook weer twee kolommen moet hebben.

 <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
    <tr>
      <td>Van Persie</td>
      <td>96</td>    
    </tr>
  </table>

Cool hé? Je mag natuurlijk meer rijen en kolommen maken, maar er is één belangrijke voorwaarde: Het aantal kolommen per rij moet voor iedere rij gelijk zijn!

Als we een tabel willen hebben met lijntjes, dan kunnen we in de table-tag een border opgeven van bijvoorbeeld 1 pixel.

table border="1px">
  ..
</table>

Probeer het uit in je 'eigen' site...

Meestal zet je in de eerste rij van je tabel de titel van een kolom. Die wil je dan ook dikgedrukt maken. Dat gaat automatisch als je in de eerste rij de <th>-tag gebruikt, i.p.v. de <td> -tag.

<table>
    <tr>
      <th>Naam</th>
      <th>Aantal doelpunten</th>    
    </tr>
</table>

Je mag naast tekst ook plaatjes of linkjes in een tabel zetten. Dat doe je door ze in de <td>-tag te plaatsen.

<tr>
  <td><a href="http://www.google.com">Google</a></td>    
  <td><img src="plaatje.jpg"></td>
</tr>

Opdrachten

[1] Maak een nieuwe alinea onderaan je webpagina. Zet er een kopje boven met de tekst Top 5 beste sporters.

[2] Maak nu een tabel met zes rijen en drie kolommen. Zet daarin jouw top 5 van de beste sporters.

[3] Pas de tabel nu zo aan, dat je kan klikken op de naam van de sporter. Als je er op klikt, dan kom je op een Wikipedia-pagina waar je wat meer informatie kan vinden over de desbetreffende speler.

[4] Maak nu een vierde kolom per rij. In deze vierde kolom zet je een kleine foto van de speler in de tabel. Je kunt met Google zoeken naar kleine foto's door de Zoekhulpmiddelen te gebruiken. Kies bij de grootte voor Gemiddeld (zie pijltje hieronder).

Je zou ook het formaat van een grote foto kunnen verkleinen. Daarvoor stel je of de breedte of de hoogte van een <img>-tag in. Dat ziet er dan bijvoorbeeld zo uit:

<img width="200px" src="jouwplaatje.jpg">

Les 5: CSS, background-color, color

Je hebt nu een HTML-pagina gemaakt. Deze ziet er alleen nog best wel kaal en saai uit. Daar gaan we verandering in brengen met CSS! Dat staat voor Cascading Style Sheets. Met CSS kun je het uiterlijk van je webpagina bepalen. Je kunt dus zeggen dat je 's een rode achtergrond moet hebben met groene tekst. Je kunt bijvoorbeeld je plaatjes een randje geven. Je kunt je tabellen inkleuren en nog veel en veel mee

We gaan nu de CSS style direct in een pagina verwerken om mee te oefenen.

Als je meerdere pagina's gaat maken in je website is het beter om de CSS in een apart bestand te zetten. Dit staat aan het einde van de lesbrief uitgelegd.

In je pagina zet je de CSS style tussen de <style> en <style> tags in de header van je html bestand:

<html>
  <head>
    <style>
      /* Hier komt je style terecht.*/
    </style>
  </head>

Zullen we eerst een achtergrondkleurtje instellen voor de pagina? Dan moeten we body selecteren. Tussen de { en de } komen alle stijlkenmerken van de body. Alles wat je voor de body wilt instellen zet je tussen die accolades. We gaan de achtergrondkleur instellen met background-color.

<html>
  <head>
    <style>
      body {
        background-color: red;
      }
    </style>
  </head>

En voor de kleur van de tekst gebruiken we color. Zet hem er maar bij! (Wel weer in de body en tussen de accolades zetten!)

body {
  background-color: red;
  color: green; /* Tekstkleur is groen*/
}

Kun je ook iets anders dan de body opmaken? Ja natuurlijk! Je kunt elke tag opmaken die je in je HTML hebt gezet! Dus <p>, <table>, <td>, <tr>, <img> . Denk er wel om dat ze dan OOK in je HTML moeten staan!

p {
  color: blue;
  background-color: yellow;
}

In totaal ziet het er dus zo uit:

<style>
  body {
    background-color: red;
    color: green; /* Tekstkleur is groen*/
  }

  p {
    color: blue;
    background-color: yellow;
  }
</style>

Maak je meerdere pagina's? Gebruik dan een extern stylesheet.

Maak een bestand in dezelfde map als index.html
Noem het: style.css
Zet daar alles wat tussen de <style>-tags staat in
Zet er een link naartoe in je HTML-pagina: <html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Sla beide bestand op en test het.

Opdrachten

[1] Bepaal een mooie kleur, achtergrondkleur en lettertype voor alle <h1>-tags op je pagina.

[2] Doe hetzelfde voor de body

[3] Kleur je tabel nu in door de <td> en de <tr>-tags een andere achtergrondkleur te geven.

[4] Je kunt je tabel ook een veel mooiere rand geven. Dat doe je natuurlijk ook in CSS. Lees op de volgende internetpagina hoe dat moet: https://www.w3schools.com/css/css_table.asp. Verras ons dan met een mooie rand voor je tabel.

[5] De CSS-code die we je in deze leskaart hebben geleerd is maar een kleine fractie van alle mogelijkheden die er zijn. Ga naar de w3schools-pagina waar je nog veel meer mogelijkheden kunt ontdekken om je pagina mee op te leuken. Klik op de volgende link: http://www.w3schools.com/css/default.asp

Les 6: HTML, iframes, Youtube of maps invoegen

Vaak wil je een deel van een andere pagina in jouw eigen pagina opnemen. Denk bijvoorbeeld aan een Youtube filmpje, of een interactieve Google maps kaart. Dit heet 'insluiten' of 'embedding'. Veel pagina's hebben hiervoor functies ingebouwd.

Zie de voorbeelden van youtube.

Je klikt eerst op 'Share' of 'Delen'. Daarna kies je 'Embed' of 'Insluiten'.

Je krijgt nu een schermpje waarin een stuk html-code staat die begint met:

<iframe … Zorg dat je de hele regel kopieert. Dus helemaal tot en met de afsluitende </iframe>-tag.

Dus bijvoorbeeld: <iframe width="560" height="315" src="https://www.youtube.com/embed/rYFjIx0OBAI" frameborder="0" allowfullscreen></iframe>

Zet de regel code in je pagina en je bent klaar!

Bij Google maps gaat het op soortgelijke manier.

Je zoekt een plek op waarvan je de interactieve kaart wilt hebben.

Dan klik je op 'Delen'. Kies vervolgens 'Kaart insluiten' en neem de regel code over die begint met <iframe …

De grootte kun je weer aanpassen door width en height te veranderen in de regel code.

Je kunt met het <iframe> element ook andere webpagina's invoegen. Let wel op want sommige pagina's laten dit niet toe.

Opdrachten

[1] Voeg een favoriete video in in je pagina met behulp van een iframe

[2] Voeg een interactieve kaart in in je pagina van de plek waar je school staat

HTML-CSS-1

Welkom in de HTML-CSS-1 module! Werk hieronder de lesbrieven af volgens je planner.

Let op: Bij deze module zitten opdrachten die je moet gaan maken in repl.it. Maak een account aan en join deze classroom.

Les 1: CSS koppelen aan je HTML-pagina

Met Cascading Style Sheets (CSS) kun je de opmaak van je webpagina veranderen. Wij leren je een extern stylesheet te gebruiken.

Je gebruikt een apart bestand voor je CSS.

<html>
  <head>
    <title>Mijn pagina</title>
    <link rel="stylesheet" href="style/opmaak.css" type="text/css">
  </head>
...

Let duidelijk op de naam van je bestand en het valt je wellicht op dat deze in een andere folder zit dat je basis html bestand!

In je CSS-bestand maak je stijlregels.

Je selecteert welk HTML-element wilt wijzigen. Daarna tussen geef je tussen { en } aan wat je wilt veranderen. Dit doe je met eigenschap: waarde; tweetallen.

In je CSS bestand ziet het er uit

body {
  background-color: red;
}

Je kunt ieder HTML-element selecteren met de selector.

En je kunt meerdere eigenschappen tegelijk veranderen.

p {
  text-align: right;
}

h1 {
  text-align: center;
  color: green;
  background-color: lightblue;
}

Opdrachten

Maak een extern css bestand aan
1. Ga naar je HTML-CSS map
2. Maak een nieuwe map Style
3. Maak in de map sylte een nieuw bestand
4. Noem het bestaat: opmaak.css
Zet de regel met <link ...> in de <head> van je index.html bestand <head> <title>Mijn pagina</title> <link rel = "stylesheet" href="style/opmaak.css"> </head>
Zet de code hieronder in je opmaak.css. body { background-color: red; } Sla je bestanden op en kijk of het ewrkt in je browser! Als het goed is, is de achtergrondkleur van je webpagina nu rood.
Breid je css: 1. Voeg <h1>, <h2> en <p> elementen toe aan je index.html bestand 2. Zet de stijlregels zoals hieronder in je opmaak.css bestand. 3. Sla alles op en test of het werk body { background-color: green; } h1 { text-align: right; } h2 { text-align: center; } p { text-align: justify; }

Les 2: Fonts, lettergrootte en stijl

Er zijn drie soorten lettertypes die je gebruikt

Met schreef: sierlijke letters, mooi als kopje of als header. Dit lettertype lees op papier het lekkerst, niet op het scherm.
Zonder schreef: strakke letters, lezen het lekkerste op het scherm. Prima voor tekst.
Monospace: voor letters die allemaal even groot zijn, Een i neemt evenveel ruimte in als een m, dit is wel eens handig als je wat wilt uitlijnen of benadrukken.

Voorbeelden: Dit is schreef Dit is schreefloos Dit is monospace

h1 {
  /* Met schreef */
  font-family: Georgia;
} 

p {
  /* Zonder schreef */
  font-family: Verdana;
} 

h2 {
  /* Monospace */
  font-family: Courier;
}

Je kunt ook meerdere lettertypes in één keer instellen.

De browser probeert eerst Verdana te vinden. Als dat niet bestaat dan probeert hij Geneva te vinden enzovoort.

Niet op ieder besturingssysteem bestaan dezelfde lettertypes.

h3 {
  /* Dit is commentaar in CSS! */
  /* h3 krijgt een schreefloos lettertype */
  font-family: Verdana, Geneva, Arial, sans-serif;
}

Cascading Style Sheet betekent dat een stijl ook toegepast wordt op 'kinderelementen'.

Hiernaast zie je een <h1>-element in de <body> staan. <h1> is dan een kind van <body> en krijgt (erft) dezelfde stijl.

Het <p>-element erft ook de stijl van de <body>.

<body>
  <h1>Dit is een hoofdstuk</h1>
  <p>Met een mooie inhoud</p>
</body>

Je kunt <h1> een ander font geven door dat in je CSS aan te geven.

Het <h1>-element heeft een ander lettertype dan de <body>. Je ziet namelijk dat er een ander font is aangegeven. Het <p>-element heeft nog steeds hetzelfde lettertype als de <body>; Er is in de CSS geen ander lettertype gekozen.

body {
  font-family: Verdana, Geneva, Arial, sans-serif;
} 

h1 {
  text-align: center;
  font-family: Georgia, "Times new Roman", serif;
}

p {
  text-align: right;
}

Font-size (lettergrootte)

In CSS kun je groottes op verschillende manieren aangeven. Hiernaast zie je lettergrootte in pixels.

p {
  font-size: 12px; /* 12 pixels hoog*/
}

Font-style (italic, oblique)

Italic om tekst schuin te laten zien. Wil je niet meer schuin, gebruik je normal.

h1 {
  font-style: italic;
}

Font-variant (kleinkapitaal: small-caps)

Gebruik hoofdletters, maar dan klein weergegeven.

p {
  font-variant: small-caps;
}

Font-weight (bold, normal)

Dikgedrukte tekst, of juist niet dikgedrukt.

h1 {
  font-weight: normal;
}

Opdracht

[1] Ga verder met het bestand uit de vorige leskaart. Pas bovenstaande font-opties toe op elementen in je pagina. Probeer ze allemaal uit op verschillende HTML-elementen.

[2] Maak de opdracht op repl.it.

Les 3: Kleuren en achtergrondplaatje

Kleuren kun je op meerdere manieren aangeven

Er zijn ingebouwde kleuren zoals red, green, blue en veel meer Kijk voor meer kleurnamen hier: w3schools kleuren
Je kunt de RGB waarde van een kleur opgeven. (We leggen RGB zo uit).
- rgb(0, 51, 153)
- rgb(0%, 25%, 71%)
- #00AF32 of #A02 (dit is #AA0022)

body {
  color: darkblue;  /* color  verandert de tekstkleur*/
  background-color: lightgrey;
} 

p, h1, h2 { /* gebruik deze stijl voor p, h1 en h2 tegelijk*/
  color: rgb(0, 51, 153);
  background-color: #00FA32;
}

RGB staat voor Red Green Blue

Je geeft steeds aan hoeveel rood, groen en blauw je wilt. De kleur is dan de mix die jij aangeeft.

In #00AF32 zie je ook letters. Je gebruikt dan hexadecimale getallen. De volgorde daarvan is: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Als je goed telt zijn er dus 16 waardes mogelijk.

0 betekent niets van de kleur en F juist zo veel mogelijk.

rgb(0, 51, 200) Getallen van 0 t/m 255; 0 is niets, 255 maximaal Mix hier geen rood, beetje groen en veel blauw #00AF32 Gebruik twee karakters per kleur geen rood (00), veel groen (AF) en beetje blauw (32) Kijk voor meer kleurcodes op:

Je kunt als achtergrond ook een plaatje gebruiken op je website.Je gebruikt dan de eigenschap background-image.

body {
    background-image: url("plaatje.gif");
}

Standaard zal je plaatje niet één keer getoond worden; het plaatje wordt herhaald. Dus naast elkaar en daarna ook onder elkaar. Als je dat anders wilt kan dat!

Je kan het plaatje ook op een andere plek zetten met background-position Je kunt uitlijnen met bijvoorbeeld right / left en top

body {
  background-image: url("plaatje.gif");
  background-repeat: no-repeat;
  /* Eerst rechts links, dan boven beneden */
  background-position: right top;
}

Je kunt ook een positie in pixels of in procenten weergeven.

/* positie: 50% van de breedte en 40 pixels van boven */
background-position: 50% 40px;

Je plaatje niet laten meebewegen als je scrollt:

background-attachment: fixed;  /* zie: voorbeeld */

Opdrachten

[1] Geef de elementen in je pagina verschillende kleuren. Oefen met de drie verschillende manieren om kleuren aan te geven.

[2] Voeg een achtergrondplaatje toe aan je website. Kun je ervoor zorgen dat:

Het plaatje maar één keer getoond wordt,
Niet mee scrolt met de pagina,
Op een andere plek komt?

[3] Maak de opdracht in repl.it

Les 4: Boxmodel en borders

De elementen <p>, <h1>, <body>, <ul> zijn voorbeelden van block elementen. Er zijn ook inline elementen zoals <a>, <span> etc. Later leer je het verschil tussen inline en block elementen.

Je kunt deze blockelementen in je pagina zien als een doos (een box) met een inhoud erin.

Van buiten naar binnen zie het volgende:

margin (ruimte tussen de rand en het parent element)
border (de rand om het element)
padding (de ruimte tussen de inhoud en de rand)
de inhoud zelf

Bij blockelementen kun je de inhoud een hoogte en breedte geven. Voor één element is het boxmodel simpel genoeg. In een website heb je natuurlijk veel elementen die ook nog in elkaar zitten. Dus het kan behoorlijk complex worden! Ouder- en kindelementen (parent en child) horen bij elkaar. In de code hiernaast zie je:

<html> <- parent van <body> <head> <- child van <html> <body> <- parent van <ul>, child van <html> <ul> <- parent van <li>, child van <body> <li>

<html>
  <head>
  </head
  <body>
    <ul>
      <li>Dit is een hoofdstuk</li>
    </ul>
    <p>Dit is een stukje tekst.</p>
  </body>
</html>

We beginnen met de randen (borders).

Een border heeft altijd 3 eigenschappen:

de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)

h1, h2 {
  color: rgb(0, 51, 153);
  text-align: center; /* Centreer de inhoud*/
  /* rand: 4 pixels dik, volle rand, kleur oranje*/
  border: 4px solid orange;
}

Je kunt ook ronde borders maken Je geeft dan de radius (straal) van de ronding op. Je doet dit voor iedere hoek apart en de volgorde is: linksboven, rechtsboven, rechtsonder, linksonder Je kunt ook in een keer alle hoeken gelijk maken.

h1, h2 {
  text-align: center;
  border: 4px solid orange;
  border-radius: 20px 0px 20px 0px;
}
 
p {
  border: 4px solid orange;
  border-radius: 20px;  /* alle hoeken straal van 20 pixels */
}

Opdrachten

[1] Maak borders om een aantal elementen in je pagina.

[2] Experimenteer met verschillende borders! Met ronde hoeken, verschillende stijlen enzovoort.

[3] Maak de opdracht in repl.it

Les 5: Margin, padding en development tools

Je website ziet er in je browser vaak niet meteen uit zoals je wilt.

Met behulp van de browser development tools kun je het boxmodel zien en welke CSS wordt gebruikt door de browser.

Je vindt de tools met:

Rechts klik op je pagina -> inpsecteren
Een sneltoets (F12 of CTRL-SHIFT-i)

In de vorige les heb je in het boxmodel gezien dat buiten de border de marge (margin) zit. Je kunt hiermee dus ruimte tussen bijvoorbeeld twee <p>-elementen maken.

p { 
  color: rgb(0, 51, 153);
  background-color: #00FA32;
  margin: 10px; /* 10 pixels marge rondom een paragraaf */
}

Veel elementen krijgen standaard een marge van de browser (en dit verschilt per browser).

Als je in je hele pagina zonder marge wilt beginnen, dan zet je de code hiernaast bovenin je CSS bestand.

* { /* Met * selecteer je alle elementen in je pagina */
  margin: 0px;
}

Margin hoeft niet aan elke kant hetzelfde te zijn. Je kunt margin-top, margin-bottom, margin-left of margin-right gebruiken om andere marges te krijgen. Of je geeft na margin vier waardes mee.

p {  
  /* volgorde is: boven, rechts, onder, links
  margin: 0px 30px 0px 20px;
  /* 0px margin-top, 30px margin-right, 0px bottom en 20px left */
}

Je kunt margin ook in een percentage geven.

Dit is dan ten opzichte van het ouderelement (het element waar dit element in zit).

p {  
  margin-left: 20%;
  margin-right: 40%;
}

padding is de ruimte tussen de inhoud en de border (denk aan het boxmodel van vorige les)

Verder werkt padding hetzelfde als margin.

Je kunt dus padding per kant instellen met padding-top, padding-right enzovoort.

Ook kun je weer met px of % werken en in één regel padding instellen.

Opdrachten

[1] Zet bovenaan je .css bestand de volgende stijlregel:

* {
  margin: 0px;
  padding: 0px;
}

[2] Stel nu de marges voor alle elementen in je pagina in zoals je het zou willen hebben!

[3] Stel nu ook padding in voor alle elementen in je pagina. Zorg dat het er mooi uit komt te zien!

[4] maak de opdracht in repl.it

Les 6: Elementen selecteren: classes en id's

Met classes kun je meerdere elementen selecteren uit je pagina. Zo kun je bijvoorbeeld sommige <p> elementen een andere kleur geven dan andere <p> elementen. Je doet dit door in de HTML-tag te zetten: class="naam"

Dit heet een attribute (eigenschap).

Vervolgens gebruik je in CSS de . (punt) om aan te geven dat je een class selecteert.

<body>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
</body>

In style.css:
p.rood { /* .rood: selecteer alle paragrafen met class="rood"*/
  color: red;
}

Je kunt dus p.rood gebruiken om alle paragrafen met class="rood" te selecteren. Je kunt ook .rood gebruiken om alle elementen met class="rood" te selecteren.

.rood { /* .rood: selecteer alle elementen met class="rood"*/
  color: red;
  text-align: right;
}

Met een id kun je één element uit je pagina selecteren. Als meerdere elementen hetzelfde id hebben, dan wordt alleen de eerste geselecteerd.

Je doet dit door in de HTML-tag te zetten: id="uitleg"

Vervolgens gebruik je in CSS de # om aan te geven dat je een class selecteert.

<body>
  <p id="uitleg">Hieronder zie je een voorbeeld:</p>
  <p class="rood">Deze tekst wordt rood</p>
  <p>Deze tekst blijft zwart</p>
</body>

In style.css:
p#uitleg { /* #uitleg: selecteer de paragraaf met id="uitleg"*/
  font-weight: bold;
  font-size: 20px;
}

Je kunt nu ook beginnen met een #:

#uitleg { /* #uitleg: selecteer het element met id="uitleg"*/
  font-weight: bold;
}

Opdrachten

[1] Maak een nieuwe html pagina en noem deze vragen.html. Neem de volgende code erin over:

<body>
  <h1>Provincievragen</h1>
  <p>
    De uitleg: Lees de vraag en bedenk wat het antwoord is.
  </p>
  <h2>vraag 1</h2>
  <p>Welke Nederlandse provincie bestaat uit slechts zes gemeenten? </p>
  <p>Flevoland</p>

  <h2>vraag 2</h2>
  <p>Wat is naar oppervlakte gemeten de kleinste provincie van Nederland? </p>
  <p>Utrecht</p>
</body>

[2] Voeg aan alle vragen (uit vragen.html) de class “vraag” toe en aan alle antwoorden de class “antwoord”. Voorbeeld:

  <p class="vraag">
    Welke Nederlandse provincie bestaat uit slechts zes gemeenten ?
  </p>  <p class="antwoord">Flevoland</p>

[3] Selecteer de twee classes in je css.

Geef de vragen een achtergrondkleur en een letterkleur.
Geef de antwoorden dezelfde achtergrondkleur en een letterkleur!
Je kunt nu de antwoorden niet lezen tenzij je ze met de muis selecteert.

[4] De eerste paragraaf geeft uitleg over de vragen. Voeg daar een ID aan toe en geef het een mooie stijl met behulp van CSS.

[5] maak de opdrachten in repl.it

Les 7: Pseudo-classes, (hyper)links en span-element

Naast classes bestaan er ook pseudo-classes in CSS. Met een pseudo-class kun je elementen selecteren in een bepaalde toestand. Bijvoorbeeld:

hover: De muis gaat over het element
active: Er wordt op het element geklikt

Voor (hyper)links <a> zijn er ook nog:

link: Er is nog niet op de link geklikt
visited: Er is wel op de link geklik

Je gebruikt de : (dubbele punt) voor pseudo-classes: element:pseudo-class

p:hover { /* Met muis over paragraaf? Verander lettergrootte.*/
  font-size: 30px;
}

p a:visited { 
  /* Is er op een link in een paragraaf geklikt? Kleur: blauw */
  color: blue;
}

a:link { 
  /* Links waar nog NIET op geklikt is hebben kleur geel*/
  color: yellow;
}

Je kunt ook een class en een pseudo-class gebruiken.

p.rood:hover { /* Met muis over paragraaf met class="rood"? 
                   Verander lettergrootte en kleur.*/
  font-size: 30px;
  color: black;
}

In HTML worden links standaard onderstreept. Je kunt dat ook uitzetten met de text-decoration eigenschap.

ul a { /* Alle links in een lijst niet onderstrepen*/
  text-decoration: none;
}

Soms wil je een stukje van een paragraaf een andere layout geven. Een manier om dit te doen is door een <span> element om je tekst te zetten. Met <span id="tekst"> kun je CSS bestand alleen dat stukje tekst selecteren.

<body>
  <h1>Dit is een header</h1>
  <p>Ik wil <span id="tekst">dit gedeelte</span> veranderen.</p>
</body>

In style.css:
#tekst { /* #tekst: selecteer alles in de span met id="tekst"*/
  font-size: 20px;
}

Opdrachten

[1] Oefen met pseudo-classes en span in je pagina.

[2] Maak de opdrachten op repl.it

Les 8: Tabellen opmaken

Een tabel maak je met de volgende elementen: <table> - Alles binnen <table> en </table> <th> - (Optioneel) kolomkop (tableheader) <tr> - Rij in de tabel (tablerow) <td> - Inhoud van de cel (tabledata)

Voorbeeld code met bijbehorende tabel:

TEST DEZE CODE:

<table>
  <tr> <!-- Eerste rij: kolomkoppen, automatisch dik gedrukt -->
    <th>Naam</th>
    <th>Achternaam</th>
    <th>Lievelingskleur</th>
  </tr>
  <tr> <!-- Tweede rij: 1e persoon -->
    <td>Kees</td>
    <td>Hendriks</td>
    <td>Rood</td>
  </tr>
  <tr> <!-- Derde rij: 2e persoon -->
    <td>Aron</td>
    <td>de Jong</td>
    <td>Geel</td>
  </tr>
</table>

Naam

Achternaam

Lievelingskleur

Kees

Hendriks

Rood

Aron

ee Jong

Geel

Belangrijk: iedere rij heeft hier precies 2 cellen. Want er zijn 2 kolommen gemaakt.

Je kunt ook een cel maken die twee, drie of meer kolommen breed is. Je gebruikt dan:

<td colspan="2"> of <th colspan="2">

Je kunt ook een cel maken die twee, drie of meer rijen hoog is. Je gebruikt dan:

<td rowspan="3"> 

Dit kan al snel ingewikkeld worden! Meer uitleg vind je hier: w3schools table

TEST DEZE CODE:

<table class="personen">
  <tr> <!-- Eerste rij: kolomkop -->
    <th colspan="2">Personen</th>  <!-- 2 kolommen breed -->
  </tr>
  <tr>
    <td rowspan="2">Kees</td>
    <td>Hendriks</td>
  </tr>
  <tr> 
    <!-- Hier maar 1 cel omdat de cel hierboven twee hoog is -->
    <td>de Jong</td>
  </tr>
</table>

Je kunt de inhoud van tabellen opmaken zoals je zou verwachten. De randen van een tabel werken ook zoals met andere elementen. Als je overal randen wilt, zul je zowel <table>, <th> als <td> een border moeten geven.

TEST DEZE CODE:

table.personen { /* Een rand om de buitenkant alleen*/
  border: 1px solid black;
} 

table.personen th { 
  /* Een rand om de headers alleen*/
  border: 1px solid red;
} 
table.personen td { 
  /* Een rand om de andere cellen alleen*/
  border: 1px solid green;
}

Je ziet dat de randen eigenlijk dubbel getekend worden. Om de randen te laten samenvallen (collapse) gebruiken we de tabel-eigenschap: border-collapse: collapse;

TEST DEZE CODE:

table.personen { 
  border: 1px solid black;
  border-collapse: collapse;
}

Opdrachten

[1] Voeg een tabel toe aan je eigen pagina. De inhoud moet natuurlijk passen bij je eigen pagina.

[2] Zorg ervoor dat meerdere kolommen en / of rijen samengevoegd worden.

[3] Voeg borders toe en geef ze een mooie kleur.

[4] maak de opdrachten in repl.it

Les 9: Lijsten opmaken (menu in je pagina)

In HTML kun je een lijst maken met <ul> (unordered / bolletjes) of <ol> (ordered / genummerd). Je gebruikt voor ieder item op de lijst <li></li>. Met CSS kun je het soort lijst veranderen dus je hoeft eigenlijk alleen <ul> te gebruiken.

<ul class="voordelen"> <!-- Unordered list - bolletjes ervoor -->
	<li>douche en sauna in de kamer</li>
	<li>slechts twee minuten lopen van de supermarkt</li>
	<li>slechts drie minuten lopen van het strand</li>
	<li>zwembad aanwezig</li>
</ul>

We kunnen de hele lijst en de elementen apart stijlen:

Met de list-style kunnen we de soort lijst veranderen. Je geeft drie dingen mee.

position: opsomming binnen of buiten het kader (inside / outside)
type: rondje, vierkantje etc (disc, circle, square, decimal, upper-roman, lower-roman, upper-alpha, lower-alpha, none)
image: eventueel een plaatje als opsommingsteken

ul.voordelen { /* de lijst */
  border: 1px solid green;
  list-style: inside square none;
}

ul.voordelen li { /* de list items */
  border: 1px solid red;
}

<plaatje>

We gaan nu een menu maken met een lijst.

We gebruiken de eigenschap display: inline; om de <li></li> naast elkaar weer te geven. We gebruiken ook float: left; om te zorgen dat de elementen netjes links tegen elkaar aan komen te staan.

PROBEER DEZE CODE:

<ul id="menu"> 
    <li><a href="index.html">Home</a></li>
    <li><a href="pagina1.html">Pagina 1</a></li>
    <li><a href="pagina2.html">Pagina 2</a></li>
    <li><a href="pagina3.html">Pagina 3</a></li>
</ul>

#menu li { /* de list items */
  display: inline;
  float: left;
  border: 1px solid red;
}

LET OP! We leggen hier niet verder uit wat float en inline precies doen. Dat komt in latere modules. Gebruik de eigenschappen verder nog niet in je pagina.

We voegen de code hieronder toe. Margin zorgt ervoor dat er geen ruimte naast het menu komt en overflow: hidden; zorgt ervoor dat de achtergrondkleur te zien is over de hele breedte. Wat we hierna gaan toevoegen zorgt voor mooier opgemaakte links in je menu. We willen namelijk:

een andere kleur
geen onderstreepte links

PROBEER DEZE CODE:

#menu {
  background-color: grey;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

We zetten de kleur van links op wit en text-decoration: none; om de onderstreping weg te halen.

Merk op: Als je op een link geklikt hebt blijft de kleur nog steeds wit!

PROBEER DEZE CODE:

#menu a {  /* Selecteer de links uit het menu*/
  color: white;
  text-decoration: none;
}

We halen nu eerst de rand weg. Verder willen we dat je

op het hele blokje van een link kunt klikken
meer ruimte om de link hebt

We gebruiken display: block; zodat je overal kunt klikken (niet alleen op tekst). Met padding zorgen we voor meer ruimte om de tekst. Als laatste willen we nog dat de kleuren veranderen als je er met je muis overheen gaat. Hiervoor gebruiken we: :hover.

PROBEER DEZE CODE:
 
#menu a {  /* Selecteer de links uit het menu*/
  color: white;
  text-decoration: none;
  display: block;
  padding: 15px;
}

#menu a:hover {  /* Als je met je muis over een link gaat*/
  color: black;
  background-color: white;
}

Opdrachten

1] Maak zelf een mooi menu in je pagina

2] Maak de opdracht op repl.it

HTML-CSS-2

Les 1: Structuur van je Pagina

Je gaat in deze lesbrief een aantal dingen leren door een voorbeeldpagina maken. We gaan werken met HTML5 en CSS3 en we gaan eerst de structuur van je pagina neerzetten. Hou je vast :)

Als je een website ontwerpt (middels wireframes), dan is het eerste wat je doet je pagina in blokken verdelen. En dan heb je vaak de volgende blokken:

Er is vaak een header-blok. Dit is een kopregel die vaak bovenaan een webpagina staat. Hier staat vaak de titel van de site en een logo in.
Er is vaak een footer-blok. Vaak staat deze onderaan de pagina. Hier staat vaak in wie de site heeft gemaakt, met wat copyright informatie.
Er is vaak een navigatiebalk. Denk aan een knoppenbalk of een balk met linkjes. Je ziet ze vaak bovenaan de pagina of links op de pagina. Door op de knoppen of linkjes te klikken ga je naar andere pagina’s
De inhoud van je pagina. Deze inhoud gaan we straks nog eens onderverdelen.

Nog vóór HTML5 konden we deze blokken maken met <div>-tags. <div> is de afkorting voor division (=afscheiding, onderdeel, sectie). Een <div> kan zelf van alles bevatten. Zoals plaatjes, kopjes, tabellen, opsommingen, paragrafen etc. Een mogelijke indeling kan er dan als volgt uitzien:

Als je goed kijkt, dan zie je dat elke div van de andere div wordt onderscheiden middels classes en id's. Zo heb je <div id="header"> voor het kopje van de pagina. En <div id="footer"> voor de footer van de pagina. In de CSS kun je vervolgens de div's afzonderlijk opmaken. Met HTML5 echter, heb je speciale tags tot je beschikking voor dit soort standaard onderdelen:

De <div>-tag bestaat nog steeds en mag je gewoon gebruiken. Maar deze HTML5-tags maken het je wel makkelijker. Ook kunnen zoekmachines zoals Google makkelijker de inhoud van je pagina indexeren en doorzoeken!

Opdracht

Maak een nieuwe map aan op je harde schijf.

Maak vervolgens de volgende HTML-pagina. Noem hem index.html. Check uiteraard via de validator of deze aan de HTML5 standaard voldoet.

Tip: zet die tags netjes onder elkaar zoals hierboven, je hebt dan overzicht over wat bij wat hoort en je vergeet niet zo gauw een tag af te sluiten. Tip2: Er is een wereld van een verschil tussen de <head> en de <heading>. De <head>-tag mag je nooit in de body gebruiken. De <heading>-tag mag alleen een titel en meta data bevatten. De <heading> is onderdeel van je pagina en staat in de body !

We gaan even het resultaat van deze mega vette site bekijken ☺ Test de pagina in een webbrowser en je ziet het volgende:

De elementen <header>, <footer>, <section> en <nav> zijn allemaal blokelementen. Deze blokken worden dan ook netjes onder elkaar gezet.

We kijken nu even puur naar de inhoud van een pagina. In ons geval dus de <section> tag. Een section is bedoeld voor het opsplitsen van de inhoud. In ons geval hebben we maar één section. In het geval van een krant kun je best verschillende katernen hebben. Denk bij een krantensite aan economie, politiek, sport, buitenland, binnenland enz. Meerde sections per pagina zijn dus best mogelijk. Wij houden het nog even simpel bij één sectie.

Een sectie bestaat uit verschillende artikelen. Denk bij een artikel net als in de krant als een zelfstandige eenheid.

Opdracht:

Pas de section tag aan, verwijder het woord inhoud en maak hierin ongeveer drie artikelen:

Test het in je browser. Het ziet er nog steeds niet uit. Klopt ook, we hebben nog niets aan de opmaak gedaan. Ook een article is een blokelement. Dus die worden netjes onder elkaar gezet.

Iedereen die de krant leest weet waar een artikel uit bestaat: een kopje en één of meerdere alinea’s dus uit <h1> of <h2> … enz en uit <p> Deze heb je al in les 1 gehad.

Opdracht

Vul iedere alinea met een kopje (kies bijvoorbeeld <h2> dan kan je straks <h1> gebruiken voor je titel) en alinea’s. Gebruik minstens 1 alinea, maar je mag ook meer alinea’s gebruiken. Uiteraard mag je deze kopiëren uit eerdere pagina’s en ga je dit niet opnieuw schrijven.

Koppel een stylesheet

In de bovenstaande code staan twee artikelen afgebeeld. In het eerste artikel heb ik één kop met twee paragrafen in het tweede artikel heb ik een kop met maar één paragraaf.

Tip: doe jezelf (en anderen) een plezier en zet de en netjes onder elkaar. Je ziet dan of je vergeten bent iets af te sluiten. De headers zet ik wel op één regel.

Het resultaat ziet er nog steeds niet uit, maar het begint in ieder geval wel op een webpagina te lijken:

Vergeet niet te checken of je pagina nog steeds aan de HTML5 standaard voldoet !

We gaan nu de webpagina opmaken.

Opdracht

Koppel je pagina aan een stylesheet. Maak eerst een nieuwe stylesheet aan: ik noem de mijne opmaak.css zet deze weer in het mapje style en koppel deze aan je html pagina.

Margin en padding op 0px

Dit hebben we al verschillende keren gedaan. De eerste rule die ik er altijd inzet is: alle standaard margin en padding eruit. Die gaan we straks zelf opgeven. Sommige browsers hebben standaard wel een margin en/of padding andere weer niet. Hier hebben we geen zin in. * betekent alles. Dus zet als eerste rule in opmaak.css

Voor de body (dat is de hele pagina) zet ik alvast een standaard lettertype erin. In mijn voorbeeld heb ik ook voor een achtergrond gekozen. Een klein plaatje laat ik van links naar rechts en van boven naar beneden herhalen:

Ik heb dit plaatje gebruikt als achtergrond maar je bent natuurlijk vrij om je eigen pagina achtergrond te kiezen. Een kleur als achtergrond is ook prima.

Opdracht

We gaan eens kijken naar de header. Ik heb een header plaatje gevonden van 150pixels hoog en 960 pixels breed. Je zou zelf ook een plaatje kunnen maken in een programma zoals Photoshop.

Deze ga ik als achtergrond gebruiken voor mijn header. Ik ga mijn site ook nog een titel geven.

Vervang de tekst tussen de <header> en </header> door een titel. Ik gebruik hiervoor de h1

In de stylesheet gaan we de header stylen. We gebruiken hiervoor de header en de header h1. Een voorbeeld staat hieronder. Je ziet dat ik expliciet de lengte en de hoogte opgeef met width en height.

De laatste optie text-shadow hebben we nog niet gehad. Deze is toch wel leuk, je kunt hiermee een schaduw bij je tekst krijgen. Eerste twee opties (beide 5px ) zijn het aantal pixels naar rechts en naar beneden van de schaduw. De derde optie (7px) is een maat voor hoe vaag of hoe scherp de schaduw moet worden. Hoe groter dit getal hoe vager de schaduw. De laatste optie is de kleur van de schaduw. (#000000 = zwart). Ik speel gewoon wat met deze getallen. Resultaat:

Het begint een beetje op een website te lijken.

Opdracht

We gaan nu een navigatiebalk maken. Hoe je dit moet doen heb je met de module HTMLCSS-1 geleerd. Ook heb je geleerd hoe je de knoppen naast elkaar kunt krijgen. Uiteraard doen we dit door een lijst te maken met linkjes.

Vervang de tekst tussen <nav> en </nav> door een lijstje met linkjes. In mijn voorbeeld laat ik de linkjes even naar een niet bestaande pagina verwijzen href=”#”. We hebben immers nog niet zoveel pagina’s. Alleen de homepage index.html (zie onderstaande code)

We gaan maar weer stylen. Hieronder zie je een voorbeeld. Het is wat standaard kleurtjes en achtergrondjes werk. Er is één belangrijke optie: display : inline-block; hierdoor staan de knoppen naast elkaar. Uiteraard hoef je de kleurtjes en de randen niet over te nemen. Leef je uit en maak je eigen knoppen!

Resultaat:

Opdracht

We gaan nu iets moois maken van de artikelen. Je hebt dit met de HTML-CSS-1 module al een beetje gehad. We kunnen de volgende rules gebruiken in de stylesheet: section, article, article h2 en article p

In onderstaand voorbeeld heb ik alleen nog maar section en article gebruikt

Het resultaat is toch wel aardig:

De tekst en de koppen gaan we ook nog opmaken. Dit mag je zelf uitzoeken. Hier zijn we in de vorige module uitvoerig mee bezig geweest. Je hebt in ieder geval nodig:

Tip: je had ook mogen gebruiken: section article h2 en section article p Maar omdat ik maar 1 sectie had vond ik dat wat overdreven.

Opdracht

De footer staat onderaan de pagina. We houden het even simpel: vervang alles tussen <footer> en </footer> door een copyright tekst. © is het © teken want het copyright teken hoorde niet bij de utf-8 tekenset. Ik heb hier een h3 gebuikt, maar iets anders is ook goed.

Uiteraard heb je weer een footer en een footer h3 nodig om de boel te stijlen. Een voorbeeld zie je hieronder. Van de footer heb ik niet overdreven veel werk gemaakt.

We zijn bijna klaar met onze pagina we hebben echter nog 1 ding wat niet zo netjes is. Het zou mooi zijn als de site netjes in het midden stond en was uitgelijnd. Nu is het rommelig. Hier zie je de site op een breedbeeld scherm.

Om dit probleem op te lossen zetten we alle blokelementen in een nieuw element. Een div-element. Dit element wordt alleen maar gebruikt om de opmaak mooier te maken. Het heeft dus geen structuur functie zoals article of nav. Zoals aan het begin van de lesbrief al is verteld bestonden de tags article, nav, section en footer voor HTML5 niet. Toen werd alles opgelost met de div tag. Je gaf toen een id mee in de div.

Voorbeeld:

<header> </header> was bijvoorbeeld <div id=”header”> </div><footer> </footer> was bijvoorbeeld <div id=”footer”> </div> <nav> </nav> was bijvoorbeeld <div id=”navigator”> </div>

De div tag is er in HTML5 nog steeds. Alleen we gebruiken het puur voor de opmaak. Niet meer voor de structuur. Een div is dus hetzelfde als <article>, <footer> of <section> behalve dan dat we hem puur voor de opmaak gebruiken !

We gaan de hele pagina in een div tag zetten die we id=”wrapper” meegeven. Dus voeg direct na de body tag in:

En onderaan de pagina net voordat de body tag sluit:

Tip: als ik veel div tags gebruik, moet ik die allemaal afsluiten met </div> ik zet dan wat commentaar bij de </div> bij welke div deze hoorde. Ik vergeet dan niet zo snel een div af te sluiten.

Nu gaan we de wrapper stijlen. Nogmaals ik wil met de wrapper alleen maar de pagina mooi in het midden zetten. Uiteraard wil ik alles net zo breed hebben als de header: deze was 960 pixels. Dus:

Kijk even of je het snapt: de marges boven en onder zijn 0. Links en rechts zijn de marges automatisch. Met andere woorden de browsers maakt de pagina 960 pixels breed en zet hem netjes in het midden omdat de linker en rechtermarge automatisch worden berekend.

Resultaat:

Les 2: position in CSS

In deze lesbrief behandelen we een aantal belangrijke technieken dat je nodig hebt voor het maken van een website.

Positionering in CSS

Je kunt op vier verschillende manieren de positie van een HTML-element op een pagina bepalen:

position: static
position: absolute
position: relative
position: fixed
position: sticky -> een combinatie van relative en fixed

Static

Positioneren met static, daar hoef je niets speciaal voor te doen. Alle elementen zijn namelijk standaard static gepositioneerd. Static betekent dat het element op de plek terecht komt in de volgorde zoals jij dat hebt aangegeven in de HTML. Men zegt wel: according to the normal flow of the page. Hieronder is dat ook te zien. De <p> komt na de <img> En de <img> komt na de <h1>.

Relative

Met relative kun je je element ten opzichte van zijn normale positie, naar links, rechts, boven en/of beneden plaatsen. Je geeft op de verticale as met top of bottom een afstand op. En op de horizontale as met left of right.

Absolute

Met absolute kun je eigenlijk hetzelfde doen, maar dan ten opzichte van de bovenkant van de pagina. Je haalt het element zelfs helemaal uit de flow, waardoor de <p> ook naar boven opschuift. Zie hieronder.

Fixed

Fixed lijkt weer heel erg op absolute. Maar er is een groot verschil: Als je iets met fixed positioneert, dan blijft het daar. Zelfs als je naar beneden gaat scrollen!

Opdracht

Maak een pagina waarmee je wat speelt met alle positioneringsopties. Misschien dat je het menu van de pagina die je in de vorige lesbrief had gemaakt fixed kunt maken?

Verschillende lagen en z-index

Als je een element met absolute, relative of fixed gaat positioneren, dan kan het zo zijn dat meerdere elementen bovenop elkaar worden geplaatst. Maar hoe zorg je ervoor dat de ene laag op of onder de andere laag terechtkomt? Dit regelen we met een ander CSS-property genaamd z-index. Voor de z-index kun je een getal opgeven. Hoe lager het getal, hoe meer hij naar achteren wordt geplaatst. Je kunt zelfs negatieve getallen opgeven! Zie het onderstaande voorbeeld met kaarten en hun bijbehorende z-index.

Je hoeft de lagen overigens niet per se van 1 tot 5 te nummeren (in stapjes van 1). Je mag ook sprongen maken. Als je maar weet dat de lagen van klein naar groot worden opgestapeld. Zie bijvoorbeeld het volgende plaatje:

Opdracht

Maak het volgende plaatje na. Hij bestaat uit 5 div'jes.

Floating

Vaak als je een stuk tekst voor op je website schrijft, dan wil je daar plaatjes bij. En dat ziet er dan standaard zo uit:

Terwijl je eigenlijk het plaatje met de tekst zou willen omringen, zie je hierboven dat er veel witruimte is. Je browser beschouwt het plaatje als een letter en zet hem in de zin. Ook als je het plaatje uit de <p> haalt, dan behoud je de witruimte. Dit gaat we nu oplossen met floating.

Door het plaatje float: left of float: right mee te geven krijg je het volgende effect:

Floating kan ook erg handig zijn als je een layout structuur voor je webpagina wilt maken waarbij je blokelementen naast elkaar wilt zetten. Neem als voorbeeld de volgende twee layouts:

LAYOUT 1

LAYOUT 2

De vraag is: Hoe maak je dit soort layouts? Je ziet in de eerste layout <nav> en <section> naast elkaar en in de tweede layout komt daar zelfs een <aside>-element bij. Ook dit doe je met floating. Hoe dat werkt wordt in de volgende video uitgelegd:

Opdracht

Maak een van de bovenstre twee layouts met behulpd van floating.

Kleurentheorie

Inderdaad! Ouch!!! … het doet zeer aan je ogen ;)

De theorie over kleuren is een van de belangrijkste onderwerpen voor web designers. Een website waarbij kleurgebruik goed wordt toegepast ziet er natuurlijk beter uit. Maar kleuren kunnen ook een psychologisch effect hebben. Met de verkeerde kleuren kun je het verkeerde gevoel bij je bezoekers achterlaten. Dan vinden ze je ineens onbetrouwbaar of nemen ze je niet serieus.

Design is een onderwerp waar we nu maar heel kort bij stil zullen staan. We kunnen je al wel verklappen dat hier ook modules en badges voor zullen komen. Voor nu moet je het doen met dit kleine hoofdstukje ....

Een handige tool om je te helpen bij de keuze van een harmonieus kleurenpalet voor je website is het kleurenwiel. Het kleurenwiel helpt je de relaties die kleuren met elkaar hebben te visualiseren. De meest gebruikte versie van het kleurenwiel is gebaseerd op het wiel dat Sir Isaac Newton heeft ontdekt. Zijn kleurenwiel gebruikt drie primaire kleuren: rood, geel en blauw. Wanneer je die kleuren met elkaar mixt krijg je een volledig kleurenwiel.

Kleurenwiel van Newton: Hoe meer naar binnen, hoe meer wit aan de kleur is toegevoegd. Hoe meer naar buiten, hoe meer zwart is toegevoegd. De echte kleuren bevinden zich in de middelste concentrische cirkel van het wiel.

In het creëren van een aangenaam kleurenpalet zit een beetje wetenschap. Daar gaat we het hieronder over hebben.

Verschillende kleurenschema's

Monochromatisch: Wanneer je variaties van dezelfde kleur gebruikt kan dat een prachtig effect geven, maar je bent bijna verplicht diverse accenten van wit en zwart toe te voegen. Kies daarom een kleur die je de mogelijkheid geeft genoeg contrast toe te voegen.

Analoog: Wanneer je kleuren selecteert die elkaar raken in het kleurenwiel krijg je een harmonieus kleurenschema. Net zoals monochromatische kleuren kunnen zij een warm of een koel gevoel geven, afhankelijk van hun plaats in het kleurenwiel.

Complementair: Kleuren van tegenovergestelde eindes van het kleurenwiel geven het meeste contrast. Als je de verleiding kan weerstaan van meer kleuren toe te voegen, beperk je dan tot twee kleuren om een krachtige look te creëren. Maar gebruik ze wijs, zodat ze niet vloeken.

Split Complementair: Deze variatie van het complementaire schema gebruikt twee kleuren aan beide zijden van een direct complementaire kleur. Deze kleuren hebben een hoog visueel contrast maar met minder spanning dan puur complementaire kleuren.

Triadisch: Drie kleuren gelijkwaardig gespreid over het kleurenwiel creëren een levendige visuele interesse. Sommige paletten zijn stevig, terwijl andere meer verfijnd zijn. Je kan wijzigingen aanbrengen door een lichtere tint of wat schaduw aan één van de drie kleuren toe te voegen in plaats van bij de echte kleur te blijven.

Tetradisch: Dit is een populair schema omdat het sterk visueel contrast biedt terwijl het toch harmonieus blijft. Het gebruikt twee paren van complementaire kleuren. Het is moeilijk dit schema harmonisch te maken wanneer je telkens evenveel licht of schaduw gebruikt, dus een beetje creativiteit is vereist. Gebruik een dominante kleur voor je design en gebruik de anderen om de hoofdkleur te ondersteunen.

Op http://www.paletton.com kun je op een vrij eenvoudige manier kleurenpaletten genereren met behulp van het kleurenwiel. Zie het plaatje hieronder voor een beschrijving van de belangrijkste onderdelen van deze website.

Opdracht

Les 3: Inline vs Block elementen

Zoals je weet worden alle HTML-elementen als een box gerenderd in je browser. Deze boxen kun je opmaken volgens het box-model. Er zijn twee van dit soort boxen:

inline elementen
block elementen

Voorbeelden van inline elementen zijn: <b>, <em>, <span>, <img>, <strong>. Ze zitten in de regel tekst en hun box is zo hoog en breed als de inhoud van de tekst. Block elementen daarentegen beginnen altijd op een nieuwe regel. Voorbeelden van block-elementen zijn: <div>, <h1>, <p>, <table>, <ul> enz. Standaard nemen ze de gehele breedte van hun parent (bijvoorbeeld de <body>) in beslag. Je kunt in tegenstelling tot de inline elementen de breedte en hoogte van een block-element wel instellen met height en width. Hier een voorbeeld:

HTML

CSS

RESULTAAT

Zoals je ziet is element <em> en <span> met id #nadruk inline elementen. Ze zijn zo breed en hoog als de hoeveelheid tekst en zitten middenin de regel. De elementen <p> en <h1> zijn block-elementen. Ze nemen de gehele breedte in beslag van hun parent (in dit geval <body>) en beginnen op een nieuwe regel.

Opdracht

Display

Nu is het zo dat je block elementen soms toch als inline elementen wilt behandelen en inline elementen als block element. Hoe doe je dat? Daar is het CSS-attribuut display voor bedacht! Als je voor een <p> element display: inline instelt, dan wordt de <p> als een inline element behandeld. Als je voor een <em> element display: block instelt, dan wordt het <em> element als een block element behandeld.

Opdracht

Bekijk de volgende pagina en de code:

Zoals je hierboven hebt gezien veranderen er twee dingen:

Alle height en width instellingen worden genegeerd. De elementen worden zo hoog en breed als de inhoud van de tekst.
Alles komt op een regel te staan, omdat het inline elementen zijn geworden.

Zo kun je ook inline elementen als block elementen beschouwen met display: block. Bekijk eens het volgende voorbeeld.

Ik heb hier drie linkjes naast elkaar. Zoals je weet is een <a>-tag een inline element. Wil ik van de linkjes een verticaal menu maken met vakjes die even breed zijn, dan moet ik er block elementen van maken.

Opdracht

Als je je goed herinnert hebben we in lesbrief 1 ook display: inline-block gebruikt voor het menu. Waar is dat dan goed voor? Nou, met display: inline-block willen we een element op een lijn zetten (inline), maar dan ook als een block behandelen. Dus ook voorzien van een hoogte en een breedte. Hartstikke handig als je een horizontaal menu wilt maken. Zie ook het plaatje hieronder voor de verschillen:

In dit plaatje gaan we ervan uit dat alle elementen divjes zijn. Merk op dat inline-block dus zowel de elementen naast elkaar zet, maar waar ook een hoogte en een breedte voor kan worden opgegeven!

Pseudo classes en pseudo elementen

Als het goed is heb je al eerder kennisgemaakt met pseudo classes in HTML. Linkjes hebben namelijk vier verschillende toestanden:

Je kunt voor elk van deze toestanden een opmaak opgeven. Dit doe je met pseudo classes.

De code voor een pseudo class is als volgt:

<selector>:<pseudoclass> { }

Voorbeeld:

Je kunt deze pseudo classes ook op andere HTML-elementen toepassen. Stel dat je een <div> een kleur wilt geven als je er met je muis overheen gaat, dan kan dat gewoon.

Opdracht

Maak een <div> die een andere kleur krijgt als er met je muis overheen gaat.

Nu is het aantal pseudo classes niet beperkt tot vier. Er zijn tientallen pseudo classes die je kunt gebruiken om dingen te doen die je anders met JavaScript had moeten programmeren. Stel dat je een tabel hebt en je wilt alle even rijen een kleur geven en alle oneven rijen een andere kleur. Dan zou je de pseudo class nth-child() kunnen gebruiken. Zie de onderstaande code:

In plaats van even of odd kun je ook gewoon een getal tussen haakjes zetten. Wel met een n erachter. Dus bijvoorbeeld nth-child(4n). Zo kun je iets bijzonders doen met exact de zoveelste rij.

Opdracht

Web-fonts

Hiervoor heb je geleerd om lettertypen op te geven met de font-family property. Je hebt ook geleerd dat je niet zomaar alle lettertypen kunt gebruiken aangezien de lettertype ook aanwezig moet zijn op het systeem van de bezoeker van je website. Zo niet, dan zal je website er niet zo mooi uitzien. Om dit te voorkomen heb je geleerd om meerdere lettertypen op te geven: beginnen met een web-safe font en vervolgens een paar generieke fallback fonts voor als de eerst opgegeven lettertype toch niet beschikbaar is.

font-family: Verdana, Geneva, sans-serif

font-family: "Times New Roman", Times, serif

Nu is er ook de mogelijkheid om met web-fonts te werken. Dat houdt in dat je website altijd de ingestelde lettertype downloadt voor als het niet beschikbaar is bij de bezoeker. Waar kun je die fonts dan downloaden en hoe kom je eraan?

Nou, er zijn websites die allerlei mooie fonts aanbieden die je zo als web-font kan instellen voor je website. Sommige van deze websites vragen hier geld om, maar sommige ook niet. Een van de webfoundry websites die honderden fonts gratis beschikbaar stelt is Google Fonts. Hier een pagina dat gebruik maakt van Google Fonts:

Hoe gaat dat dan in zijn werk?

Kies een lettertype uit en druk op het rode plusje (er verschijnt een zwart-wit kadertje aan de onderkant van de pagina
Klik op dat kadertje met de tekst (1 family selected).
Dan kun je twee dingen doen. Of je kopieert de <link>-tag naar je HTML-bestand of je drukt op @IMPORT en kopieert de @import regel in je CSS. Ik zou kiezen voor het laatste aangezien je dat maar 1 keer hoeft te doen.
Ten slotte kun je de lettertype gewoon gebruiken op je website.

Opdracht

Kies een leuke web-font en gebruik hem op een pagina.

Eindopdracht [PET1]

Je hebt basisinformatie gekregen over hoe je een website ontwikkelt.

De inhoud van de website gaat over de politieke partij die je nu aan opgerichten bent bij Maatschappijleer. Je maakt de site alleen.

Je levert de site in door het te hosten op github - zie uitleg onder kopje horsten. De url van je site kun je inleveren bij opdrachten in magister.

De eisen van de website en beoordelingschema staan onder de beoordeling. Lees die eerst goed door voordat je begint.

Succes!

Publiceren op Github pages

Met GitHub pages kan elke gebruiker een website hosten. Dit gaan we gebruiken om jouw portfolio online te zetten. Het stappenplan is als volgt:

Maak eerst een account aan op , hier een uitleg video:

Maak een nieuwe GitHub repository met als naam username.github.io waarbij username vervangen moet worden door jouw gebruikersnaam op GitHub. Denk erom: als je dit niet goed doet, zal je website niet werken!

Ga vervolgens naar de map waar je je bestanden wilt bewaren en voer het volgende commando in:

Ga naar de map username.github.io en voeg een index.html bestand toe

Add, commit en push naar GitHub

Beoordeling

Je website wordt op de volgende punten beoordeeld:

Als je een onderdeel voldoende in je website hebt, krijg je de correspondeerde punten.

Les 1: Structuur van je Pagina

Je gaat in deze lesbrief een aantal dingen leren door een voorbeeldpagina maken. We gaan werken met HTML5 en CSS3 en we gaan eerst de structuur van je pagina neerzetten. Hou je vast :)

Als je een website ontwerpt (middels wireframes), dan is het eerste wat je doet je pagina in blokken verdelen. En dan heb je vaak de volgende blokken:

Er is vaak een header-blok. Dit is een kopregel die vaak bovenaan een webpagina staat. Hier staat vaak de titel van de site en een logo in.
Er is vaak een footer-blok. Vaak staat deze onderaan de pagina. Hier staat vaak in wie de site heeft gemaakt, met wat copyright informatie.
Er is vaak een navigatiebalk. Denk aan een knoppenbalk of een balk met linkjes. Je ziet ze vaak bovenaan de pagina of links op de pagina. Door op de knoppen of linkjes te klikken ga je naar andere pagina’s
De inhoud van je pagina. Deze inhoud gaan we straks nog eens onderverdelen.

Opdracht

Maak een nieuwe map aan op je harde schijf.

Maak vervolgens de volgende HTML-pagina. Noem hem index.html. Check uiteraard via de validator of deze aan de HTML5 standaard voldoet.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mijn nieuwe website</title>
  </head>

  <body>
    <header>
    Hier komt een plaatje met Logo
    </header>
    <nav>
    Hier komt de knoppenbalk
    </nav>
    <section>
    Hier komt de inhoud van de pagina
    </section>
    <footer>
    Hier komt een copyright en info over de maker
    </footer>
  </body>
</html>

We gaan even het resultaat van deze mega vette site bekijken ☺ Test de pagina in een webbrowser en je ziet het volgende:

De elementen <header>, <footer>, <section> en <nav> zijn allemaal blokelementen. Deze blokken worden dan ook netjes onder elkaar gezet.

Een sectie bestaat uit verschillende artikelen. Denk bij een artikel net als in de krant als een zelfstandige eenheid.

Opdracht:

Pas de section tag aan, verwijder het woord inhoud en maak hierin ongeveer drie artikelen:

<section>
      <article>
        Hier komt het eerste artikel
      </article>
     
      <article>
        Hier komt het tweede artikel
      </article>
     
      <article>
        Hier komt het derde artikel
      </article>
    </section>

Test het in je browser. Het ziet er nog steeds niet uit. Klopt ook, we hebben nog niets aan de opmaak gedaan. Ook een article is een blokelement. Dus die worden netjes onder elkaar gezet.

Iedereen die de krant leest weet waar een artikel uit bestaat: een kopje en één of meerdere alinea’s dus uit <h1> of <h2> … enz en uit <p> Deze heb je al in les 1 gehad.

Opdracht

<article>
    <h2>Robot nieuws</h2>
    <p>
      Ons robot nieuws geeft u inzicht in de allerlaatste ontwikkelingen. Lees over robot ontwikkelingen, robotica en leuke nieuwe robots voor thuis. Er wordt steeds meer ontwikkeld op robotgebied en al sinds 2009 leest u het laatste en beste nieuws over robots hier.
    </p>
    <p>
      Robotica is een wetenschap die vooral gericht is op systeemintegratie. Een goed ontworpen robot zal zijn waarnemingen (die verkregen zijn met behulp van sensoren) op een goede manier kunnen vertalen naar handelingen die zijn actuatoren zullen uitvoeren.
    </p>
  </article>

  <article>
    <h2>Waar gaat het heen met robots?</h2>
    <p>
      De robot revolutie is begonnen, robots maaien ons gras en stofzuigen ons huis. Ze staan de chirurg bij in de operatiekamer en rijden rond op Mars. Ze vermaken onze kinderen en binnenkort zijn zelfs onze autos autonome robots. Lees hier het robotnieuws als je echt bij wilt blijven. Meld je aan voor onze nieuwsbrief!
    </p>
  </article>

Koppel een stylesheet

In de bovenstaande code staan twee artikelen afgebeeld. In het eerste artikel heb ik één kop met twee paragrafen in het tweede artikel heb ik een kop met maar één paragraaf.

Tip: doe jezelf (en anderen) een plezier en zet de en netjes onder elkaar. Je ziet dan of je vergeten bent iets af te sluiten. De headers zet ik wel op één regel.

Het resultaat ziet er nog steeds niet uit, maar het begint in ieder geval wel op een webpagina te lijken:

Vergeet niet te checken of je pagina nog steeds aan de HTML5 standaard voldoet !

We gaan nu de webpagina opmaken.

Opdracht

Koppel je pagina aan een stylesheet. Maak eerst een nieuwe stylesheet aan: ik noem de mijne opmaak.css zet deze weer in het mapje style en koppel deze aan je html pagina.

 <head>
    <meta charset="utf-8">
    <title>hoofdpagina</title>
    <link rel="stylesheet" href="style/opmaak.css">
  </head>

Margin en padding op 0px

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  background: grey url('../images/blokje.jpg') repeat;
}

Ik heb dit plaatje gebruikt als achtergrond maar je bent natuurlijk vrij om je eigen pagina achtergrond te kiezen. Een kleur als achtergrond is ook prima.

Opdracht

We gaan eens kijken naar de header. Ik heb een header plaatje gevonden van 150pixels hoog en 960 pixels breed. Je zou zelf ook een plaatje kunnen maken in een programma zoals Photoshop.

Deze ga ik als achtergrond gebruiken voor mijn header. Ik ga mijn site ook nog een titel geven.

Vervang de tekst tussen de <header> en </header> door een titel. Ik gebruik hiervoor de h1

<header>
  <h1>De toekomst van robotica</h1>
</header>

In de stylesheet gaan we de header stylen. We gebruiken hiervoor de header en de header h1. Een voorbeeld staat hieronder. Je ziet dat ik expliciet de lengte en de hoogte opgeef met width en height.

header {
  background: url('../images/headermetlogo.png');
  width: 960px;
  height: 150px;
}

header h1 {
  font-size: 300%;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
  text-align: right;
  text-shadow: 5px 5px 7px #000000;
}

Het begint een beetje op een website te lijken.

Opdracht

<nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="#">Industrie</a></li>
        <li><a href="#">Ruimtevaart</a></li>
        <li><a href="#">Geneeskunde</a></li>
      </ul>
    </nav>

ul {
  background: #080808;
  padding: 10px;
}

ul li {
  background: #787878;
  padding: 5px;
  border: solid 2px white;
  display: inline-block;
}

ul li a {
  color: white;
  text-decoration: none;
}

ul li a:hover {
  color: #C0C0C0;
}

Resultaat:

Opdracht

In onderstaand voorbeeld heb ik alleen nog maar section en article gebruikt

section {
  padding: 5px;
  margin: 5px;
  border: double 4px black;
}

section article {
  border: 3px solid black;
  border-radius: 0px 20px 20px 20px;
  margin: 5px 10px 5px 10px;
  padding: 10px;
  background: white;
}

Het resultaat is toch wel aardig:

De tekst en de koppen gaan we ook nog opmaken. Dit mag je zelf uitzoeken. Hier zijn we in de vorige module uitvoerig mee bezig geweest. Je hebt in ieder geval nodig:

article h2 {
 
}

article p {
 
}

Tip: je had ook mogen gebruiken: section article h2 en section article p Maar omdat ik maar 1 sectie had vond ik dat wat overdreven.

Opdracht

<footer>
  <h3>Made with &hearts; by Coderclass</h3>
</footer>

Uiteraard heb je weer een footer en een footer h3 nodig om de boel te stijlen. Een voorbeeld zie je hieronder. Van de footer heb ik niet overdreven veel werk gemaakt.

footer {
  background: #F0F0F0;
}

footer h3 {
  text-align: center;
  font-weight: normal;
  font-size: 90%;
}

Resultaat:

Voorbeeld:

<header> </header> was bijvoorbeeld <div id=”header”> </div><footer> </footer> was bijvoorbeeld <div id=”footer”> </div> <nav> </nav> was bijvoorbeeld <div id=”navigator”> </div>

We gaan de hele pagina in een div tag zetten die we id=”wrapper” meegeven. Dus voeg direct na de body tag in:

En onderaan de pagina net voordat de body tag sluit:

Tip: als ik veel div tags gebruik, moet ik die allemaal afsluiten met </div> ik zet dan wat commentaar bij de </div> bij welke div deze hoorde. Ik vergeet dan niet zo snel een div af te sluiten.

Nu gaan we de wrapper stijlen. Nogmaals ik wil met de wrapper alleen maar de pagina mooi in het midden zetten. Uiteraard wil ik alles net zo breed hebben als de header: deze was 960 pixels. Dus:

wrapper {
  margin: 0 auto 0 auto;
  width: 960px;
}

Resultaat: