HTML en CSS - van ontwerp naar website

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

Van ontwerp naar html

• Je kan een semantisch correcte html structuur bouwen met een header, footer en content elementen
  
• Je kan deze elementen visueel positioneren zodat het overeen komt met het ontwerp dat je op papier hebt gemaakt
  

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!
4. Gebruik echte teksten!

Zo kan een schets eruit zien

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!

Stel, je hebt een layout, maar hoe begin je nou?

In (ongeveer) 4 stappen:

1. Juiste html schrijven
2. Header styling
3. Content en navigatie styling
4. Footer styling

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!

<header>

<div>

<footer>

Stap 1.1

Opbreken grove blokken

Layout

Tips:

1. Wat is belangrijk? Staat dat duidelijk in beeld?
2. Gebruik je herkenbare patronen?
3. Ontwerp alleen voor wat je nodig hebt!

<header>

   <article>

<footer>

   

   <nav>

   <aside>

<div>

Stap 1.2

Waar nodig de blokken opbreken in blokken

Stap 1.2

Dit ziet er in de praktijk zo uit

Stap 1.3

Lelijke witte randjes weghalen

Stap 2

Header stylen. In dit geval: wat hoogte geven

Stap 3.1

Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar. 

Stap 3.2

We geven het nav en article element een width. vw staat voor ViewWidth wat breedte van het scherm betekent. 20vw is dus 20% van de breedte van het scherm. 

Stap 4

Footer positioneren door deze fixed te positioneren. De footer mag ook wat meer hoogte gebruiken. En wat doet position:fixed eigenlijk?

5 minuten regel

Loop je vast? Probeer het zelf in 5 minuten op te lossen. Lukt dat niet, vraag dan om hulp.

Geen hulp in de buurt, ga dan verder met iets anders.

Opdracht

Zet je artikel om naar nette, semantisch correcte html:

• ..gebruik <h1>, <h2> voor titels
• ..gebruik <p> voor paragrafen (tekst)
• ..gebruik <nav> voor navigatie
• ..gebruik <ul> en <li> voor lijsten
• etc..

Layout maken

Verdeel je layout in drie "blokken". Gebruik daarvoor eventueel deze les

• Header: het menu? Een mooi plaatje?
• Article: het verhaal: tekst, plaatjes, filmpjes etc..
• Footer: titel, plaatje etc..