Chap 3: Lesson 4 structure

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

well, then the site became

a chaos.

Time for lesson 4: structure

Do you need help/have questions about lesson 3?

1a Extra pages

A website can never consist of just one page. We always need more. 

In the next few slides you will see how to add more pages to your website in scrimba. First put your mouse on the same spot as in the picture beside.

1b

Click on new file.

Then type the title of the new page. 

ATTENTION HE MUST ALWAYS END IN .html otherwise it will not be a website page. You can check this by putting green <> signs in front of your page. 

Make sure there are no spaces between them!

1c

Click on the new page and put the basic html code there. 

You can easily do this by cutting and pasting the code from index.html. Delete everything in the body code and give it a different title.

2. navigation menu

Now we want our guests to be able to click between the different pages on our website. 

In the next few slides you will see how to make a simple menu. 

Remember that we have to put this on every page, otherwise we won't come back. 

2a

The standard html code behind a menu is a simple list. For now, it is located at the very top of <h1>. On both pages you put the following:

<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

The standard html code behind a menu is a simple list. For now, it is located at the very top of <h1>. On both pages you put the following:

3.more structure

You notice that the body can become quite full of all kinds of things. To make sure the website still looks good, we can add some more structure here. 

In the following slides, you will work on that within the body element

• 3a
• If you want to use a title at the top or a menu, use <header>. element
• <main> :This is a large area in the middle of the page that contains most of the unique content of the webpage. For example, this could be a video you want to watch or the main story you want to read, the map you want to see, the news headlines and so on. This part of the website will certainly vary from page to page! You indicate the different parts with subsections:
•  <article>: tag is used to define the content of a web page. Think for example of an article, news, forum post, blog post or a posted comment. Works slightly different than a section element.
• <section>: The <section> tag encloses a section within a document, such as chapters, headers and footers, or other parts of the document.

Sidebar: <aside>; is often placed inside the <main> element.

Footer at the very end: <footer>.

 

 

• 

Click on the image to see it better. 

Try out the codes on your site.

This is how it looks when you use them all in your body code. 

Fill the new site you have created with new information

Use the parts you have seen and learned in these slides. 

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. 

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.