Hfst 3: Les 4 structuur

• Mediawijsheid
• Middelbare school
• mavo, havo, vwo
• Leerjaar 2

tja, toen werd de site

gewoon de hele tijd onder elkaar gemieterd. En nu dan?

Tijd voor les 4: meer structuur 

Ben je helemaal bij met alle lessen?

1. Ja
2. Nee

Heb je hulp nodig omtrent de vorige les?

1. Ja graag!
2. Nee ik kan verder

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.

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!

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.

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. 

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.

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. 

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

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>.

 

 

• 

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. 

Vul de nieuwe site die je hebt gemaakt met nieuwe informatie

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

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. 

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.

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.