Les2 - HTML - Lijsten & Structuren

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

HTML

Lijsten & Structuren

Hoe staan we erin vandaag?

😒🙁😐🙂😃

Wat weet je al over HTML?

Leerdoel

Aan het einde van de les kan je lijsten gebruiken om een navigatie te bouwen

Inhoud

-Lijsten:

               Type

               Attributen

-Navigaties:

               Internal

               External

Lijsten

-Ordered list

-Unordered list

-Definition list

Ordered list

<ol>

       <li type=""> item1 </li>

       <li type=""> item2 </li>

</ol>

Andere mogelijke waarden voor de attribuut "type" zijn: 1, i, I, a, A

Unordered list

<ul>

 <li>item1</li>

 <li>item2</li>

</ul>

Definition list

<dl>

      <dt>term</dt>

      <dd>description</dd>

</dl>

Maak een navigatie balk op het scherm samen met de studenten

<nav>

       <ul>

              <li><a href="">Link1</a></li>

              <li><a href="">Link2</a></li>

              <li><a href="">Link3</a></li>

              <li><a href="">Link4</a></li>

        </ul>

</nav>

Welke tag wordt gebruikt om een link naar een ander document te creëren?

1. <url>
2. <a>
3. <href>
4. <link>

Welk attribuut wordt gebruikt om een lijststijl in te stellen in HTML?

1. style
2. format
3. type
4. list

Wat is het juiste HTML-element voor het maken van genummerde lijsten?

1. <li>
2. <ol>
3. <div>
4. <ul>

Opdracht 

Opdracht: menu

Maak een menu met minstens 3 koppelingen(intern,extern,relatief,absoluut .etc)

Wat: Maak een navigatie bar.

Gebruik daarbij juiste structuur

Hoe: Gebruik een nav tag genest daarin: een ul en li tag

Hulp:

W3schools.com

Je buurman/vrouw

De docent

Tijd: 10 minuten

Klaar:

Stijl de navigatie en voeg die toe aan minstens 2 pagina.

verbind deze met elkaar

Laat de studenten zelf een lijst maken

Bronnen

• Webdesign P57
• www.tutorialrepublic.com/html-tutorial/html-lists.php
• www.w3schools.com/html/html_lists.asp