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

Previousapart css bestandNextfilmpje: iframes om andere pagina's in te voegen

Last updated

Was this helpful?