CR2 Opdracht 4.1

Zet een html pagina op

  1. Maak een nieuwe map aan, waar de pagina en zijn bestanden in komen te staan
  2. Maak met een html editor (dreamweaver of brackets etc.) een nieuwe html5 webpagina aan en sla deze op in de map die je zojuist hebt aangemaakt. Let hierbij op dat je een goede bestandsnaam hanteert (bijv: home.html of index.html)
  3. Zorg dat de basis html elementen in het html bestand staan:
    1. doctype
    2. html
      1. head
        1. title (gebruik het title element om de titel van de pagina aan te geven)
      2. body
  4. Controleer in je bestand of alle elementen netjes gestructureerd staan. (Zijn alle open tags ook afgesloten?)

Link een stylesheet bestand aan je html pagina

  1. Maak een nieuw (stylesheet) bestand aan en sla deze op in dezelfde map als je webpagina.
    Geef het stylesheet een goede bestandsnaam (bijv: style.css)
  2. Link het stylesheet bestand in het html bestand. Kijk hier voor een voorbeeld.
  3. Controleer of het stylesheet bestand goed is gelinkt en werkt. (stel bijvoorbeeld de body achtergrond op een andere kleur in)

Maak een div voor de totale breedte van de site en zorg dat deze gecentreerd staat

  1. Zet dus een div in de html en geef deze een class
  2. Gebruik de class om in de stylesheets de div te selecteren en de styling erop toe te passen.
  3. Zorg dat de breedte op 1024 staat
  4. Gebruik margin om de div te centreren
  5. Zet wat meer inhoud in div, zodat je kunt zien wat er wordt aangepast
  6. Geef de div een minimale hoogte van 900px

Geef de pagina een achtergrond en zorg dat de inhoud (totale breedte div) mooi en duidelijk naar voren komt

  1. Gebruik een afbeelding, of een strakke kleur voor de achtergrond
  2. Geef de totale breedte div een rand of schaduw of andere achtergrond kleur

Maak een andere pagina en link naar deze pagina

  1. Maak bijvoorbeeld een copy van je huidige html pagina en geef deze een goede naam (bv. pagina2.html)
  2. Maak een link op je eerste pagina die linkt naar de tweede pagina. Zie hier een voorbeeld van hoe je een link in html maakt.
  3. Wanneer die werkt, maak dan ook een link van de tweede pagina die terug linkt naar de eerste pagina.