Opdracht 5
<!DOCTYPE html>
<html>
<head>
<title>Opdracht 5</title>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<h1>de dieren op de noordpool</h1>
<p>De volgende dieren wonen op de noordpool:
veelvraat, Canadese lynx, Fluitzwaan, Poolhaas,
Rode vos, Witte dolfijn, IJsbeer, Rendier, Narwal,
Sneeuwuil, Poolvos, Reuzenalk, Papegaaiduiker.</p>
<h2> eigenschappen van de dieren </h2>
<table>
<tr>
<th>dier</th>
<th>kleur</th>
<th>Aantal poten</th>
</tr>
<tr>
<td>Witte dolfijn</td>
<td>Wit</td>
<td>Geen</td>
</tr>
<tr>
<td>ijsbeer</td>
<td>Wit</td>
<td>4</td>
</tr>
<tr>
<td>Rode vos</td>
<td>Rood?</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Stap 1
Neem eerst bovenstaande code over in weer een nieuwe index.html file in een nieuwe map.
Bepaal een mooie kleur, achtergrondkleur en lettertype voor alle <h1>-tags op je pagina.
(Een lettertype is Font in het Engels dus kijk even op: https://www.w3schools.com/css/css_font.asp)
Stap 2
Doe hetzelfde voor de body
Stap 3
Kleur je tabel nu in door de <td> en de <tr>-tags een andere achtergrondkleur te geven.
Stap 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.
Stap 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
Stap 6
Lukt het jou ook op alle css informatie in een apart bestand te krijgen? Probeer dat maar eens te organiseren. Lees hier hoe dat moet: https://www.w3schools.com/css/css_howto.asp
Last updated
Was this helpful?