Hfst 3: Les 4 structuur

1 / 17
volgende
Slide 1: Tekstslide
MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

In deze les zitten 17 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 50 min

Onderdelen in deze les

Slide 1 - Tekstslide

tja, toen werd de site
gewoon de hele tijd onder elkaar gemieterd. En nu dan?

Tijd voor les 4: meer structuur 

Slide 2 - Tekstslide

Ben je helemaal bij met alle lessen?
A
Ja
B
Nee

Slide 3 - Quizvraag

Heb je hulp nodig omtrent de vorige les?
A
Ja graag!
B
Nee ik kan verder

Slide 4 - Quizvraag

1a Extra pagina's 
Een website kan nooit bestaan uit maar 1 pagina. We hebben er altijd meer nodig. 
In de komende paar dia's zie je hoe je meer pagina's toevoegt aan jouw website in scrimba. Zet je muis eerst op de zelfde plek als in het plaatje hier naast.

Slide 5 - Tekstslide

1b
Klik op new file.
Type daarna de titel van de nieuwe pagina in. 
LET OP HIJ MOET ALTIJD EINDIGEN OP .html anderws wordt het geen website pagina. Dit kan je checken door groene <> tekens voor je pagina. 
Zorg dat er geen spaties tussen staan!

Slide 6 - Tekstslide

1c
Klik op de nieuwe pagina en zet daar de basis html code. 
Dit kan je gemakkelijk doen door de code van index.html te knippen en te plakken. Verwijder alles in de body code en geeft het een andere titel.

Slide 7 - Tekstslide

2. navigatie menu
Nu willen we dat onze gasten op onze website tussen de verschillende pagina's kunnen klikken. 
In de volgende dia's ga je zien hoe je een simpel menu maakt. 
Bedenk je dat we dit op iedere pagina moeten neer zetten want anders komen we niet meer terug. 

Slide 8 - Tekstslide

2a
De standaard html code achter een menu is een simpel opsom lijstje. Deze bevind zich voor nu helemaal boven aan bij <h1>. Op beide pagina's zet je het volgende neer:
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="nieuw pagina.html">News</a></li>
 </ul>
Voor iedere nieuwe pagina voeg je een
 <li><a href=" ">Contact</a></li> toe in dit overzicht.

Slide 9 - Tekstslide

2b
In zowel index.html als je andere pagina ziet het er nu zo uit vlak onder de body element.

Klik maar eens op run en klik maar eens op je menu in de mini browser. 

Slide 10 - Tekstslide

3.meer structuur.
Je merkt dat de body behoorlijk vol kan raken met allerlei zaken.  Om ervoor te zorgen dat de website er nog een beetje uitziet kunnen we hier wat meer structuur inbrengen. 
In de volgende dia's ga je daar mee aan de slag binnen de body element

Slide 11 - Tekstslide

3a

  • Wil je een titel helemaal bovenaan of een menu gebruiken dan gebruik je : <header>. element
  • <main> :Dit is een groot gebied in het midden van de pagina die de meeste unieke inhoud van de webpagina bevat. Dit kan bijvoorbeeld een video zijn die je wil bekijken of het belangrijkste verhaal dat je wil lezen, de kaart die je wil bekijken, de nieuwskoppen enz. Dit deel van de website zal zeker variëren van pagina tot pagina! De verschillende onderdelen geef je aan met subsecties:
  •  <article>: tag wordt gebruikt voor het defineren van de inhoud van een webpagina. Denk hierbij bijvoorbeeld aan een artikel, nieuws, forum post, blog post of een geplaatste commentaar. Werkt weer net iets anders dan een section element.
  • <section>: De <section> tag omsluit een sectie binnen een document, zoals hoofdstukken, kop en voetteksten, of andere delen van het document.

zijbalk: <aside>; wordt vaak binnen het <main>-element geplaatst.
Voettekst die helemaal aan het einde staat: <footer>.

Slide 12 - Tekstslide

 
 

• 
Klik op het plaatje om het beter te kunnen zien. 
Probeer de codes maar eens uit op jouw site.
Zo ziet het er uit als je ze allemaal gebruikt in je body code. 

Slide 13 - Tekstslide

Vul de nieuwe site die je hebt gemaakt met nieuwe informatie


Gebruik de onderdelen die je in deze slides hebt gezien en geleerd. 

Slide 14 - Tekstslide

Div
DIVS
Krijg maar eens via code iets op de juiste plaats op een website. Dat kan nog een heel gedoe zijn.
Met een tabel kan je de verschillende onderdelen van een pagina redelijk positioneren. Helaas
heeft een tabel een aantal beperkingen. Als je bijvoorbeeld een onderdeel helemaal links op jouw
pagina wilt plaatsen, zal je een tabel ter breedte van de hele pagina moeten maken.
Daarnaast wordt een tabel groter als de inhoud niet in de tabel past. De inhoud bepaalt dus de
grootte, niet de tabel.
Deze, en andere, problemen zijn op te lossen door het gebruik van div’s. ‘Div’ staat voor
division. Je deelt hiermee je pagina op in verschillende delen die een vaste grootte en plaats
(kunnen) hebben, wel of geen scrollbalk, aparte lettertypen.
De opmaak (stijl) van een div gebeurt bijna altijd met css.
Omdat er meestal meerdere div’s op één pagina staan, krijgen ze allemaal een aparte naam
(‘id’ of ‘class’).
Voorbeeld:
<div id="div1" style="position:absolute; left:100px; top:200px;
width:300px; height:300px; background-color:#ffff00; overflow:auto;">
Hier staat de inhoud van de div
</div>
Je ziet dat de volledig opmaak in het attribuut “style” staat. Deze opmaak kan je ook in de Css code van je pagina zetten. Dat leer je volgende week. 

Slide 15 - Tekstslide

Div
Met een tabel kan je de verschillende onderdelen van een pagina redelijk positioneren. Helaas
heeft een tabel een aantal beperkingen. Als je bijvoorbeeld een onderdeel helaal links op jouw
pagina wilt plaatsen, zal je een tabel ter breedte van de hele pagina moeten maken.
Daarnaast wordt een tabel groter als de inhoud niet in de tabel past. De inhoud bepaalt dus de
grootte, niet de tabel.
Deze, en andere, problemen zijn op te lossen door het gebruik van div’s. ‘Div’ staat voor
division. Je deelt hiermee je pagina op in verschillende delen die een vaste grootte en plaats
(kunnen) hebben, wel of geen scrollbalk, aparte lettertypen, ….
De opmaak (stijl) van een div gebeurt bijna altijd met css.
Omdat er meestal meerdere div’s op één pagina staan, krijgen ze allemaal een aparte naam
(‘id’ of ‘class’).
Voorbeeld:
<div id="div1" style="position:absolute; left:100px; top:200px;
width:300px; height:300px; background-color:#ffff00; overflow:auto;">
Hier staat de inhoud van de div
</div>
Je ziet dat de volledig opmaak in het attribuut “style” staat.

Slide 16 - Tekstslide

style
soms wil je dat de hele opmaak voor een website geld. Hiervoor kan je het element style gebruiken. Let op deze staat altijd in de header hoofdelement. 

Slide 17 - Tekstslide