Presentaties
Sessie 1 : HTML basis
Sessie 2 : HTML met stijl

Opdracht 2 : HTML document met stijl maken

Voorbereiding :

Open je HTML-document uit opdracht 1 in Kladblok en in de browser. Nu ben je klaar om de stijl toe te voegen aan je HTML pagina.

Stap 1 : gebruiken van stijl document

Voeg onder het element <title> de lijn <link rel="STYLESHEET" type="text/css" href="http://workshop.terbank-egenhoven.be/web.css"> toe.
Je pagina heeft nu een ander uitzicht.

Stap 2 : centreren van de pagina

Plaats alles wat tussen <body> staat tussen <div class="inhoud"> en </div>. Alles staat mooi in het midden.

div indeling

Stap 3 : opdelen van de pagina in boven, midden en onder

Voeg <div class="boven"></div> toe boven de hoofding <h1>. In het bovenste deel van de pagina verschijnt een afbeelding, die als achtergrond is gezet in div.boven.
Plaats onder deze <div> een andere <div class="midden"> en sluit na <img.../> af met </div>. Dit vormt het middengedeelte van je pagina.
Vervang <hr> door <div class="onder"> en sluit af na de link </a> met </div>. Het onderste deel van de pagina verschijnt in het geel.

Stap 4 : toevoegen van link naar homepagina

Voeg tussen <div class="boven"> </div> een afbeelding met een link naar de startpagina <a href="http://workshop.terbank-egenhoven.be/home.htm"><img src="http://workshop.terbank-egenhoven.be/images/huis.png" class="huis" title="Startpagina"/></a>. Omdat het schoollogo als achtergrondafbeelding staat, wordt het huisje bovenop de afbeelding getoond.

Stap 5 : plaatsen van randen

Voeg onder <link...> de stijlregels voor je eigen document toe, vb. een omrande box:
<style>
div.rand { padding: 5px;
border-color: #000000;
border-style: dotted;
border-width: 2px;
}
</style>
Pas deze stijl toe als volgt : <div class="rand">Uiterlijke kenmerken : <ul>...</ul> </div>.
Doe hetzelfde met de afbeelding <div class="rand"><img.../></div>.
Er verschijnen 2 omrande boxen onder elkaar.
Voeg in de <style> voor div.rand een vaste breedte width: 466px; toe.
Voeg voor div.rand float:left; toe zodat alles naar links schuift en naast elkaar komt te staan.
Voeg ook margin: 10px; toe zodat er rond de randen een marge ontstaat en ze niet meer aaneen plakken.

Stap 6 : toevoegen van weetjes

Vertel één of meerdere leuke weetjes over je dier onder <div class="rand"><img.../></div> als volgt: <div class="rand">Wist je dat ...</div>.

Stap 7 : kiezen van eigen kleuren

Kies een kleur op W3C kleurcodes en vervang de kleurcode (of -naam) bij border-color: #000000;.
Voeg in div.rand een stijlregel toe om de tekstkleur te veranderen, vb. color: #123456;.
Voeg in div.rand een stijlregel toe om de achtergrond een kleurverloop te geven, vb. background: linear-gradient(yellow, orange);.

Extraatje voor wie nog tijd heeft

Laat je afbeelding verschijnen door animatie toe te voegen in <style> als volgt:
@-webkit-keyframes verschijn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes verschijn {
from {opacity: 0;}
to {opacity: 1;}
}
img.toon {
-webkit-animation-name: verschijn;
-webkit-animation-duration: 3s;
animation-name: verschijn;
animation-duration: 3s;
}
Opmerking: het -webkit- voorvoegsel is nodig voor Safari en Opera browsers. Voeg het attribuut class="toon" toe in het <img> element met je afbeelding.
Animatie is de overgang van de ene waarde naar een andere waarde voor dezelfde stijl-eigenschap (vb. opacity of zichtbaarheid) gedurende een bepaalde periode (animation-duration). Je afbeelding start onzichtbaar en wordt na 3 seconden volledig zichtbaar.
Pas zelf verder aan zoals je wil; maak er iets moois van! Alle mogelijke stijlen en voorbeelden vind je op W3C CSS reference.

Vrije Basisschool Terbank-Egenhoven | Workshop HTML © 2016 | Created by Els Quartier