Aan de slag met HTML5

We werken aan het blok div

Het oude vertrouwde <div> krijgt een minder belanrijke rol. Eens  — na de frames —  was de tag div de koning van het container- ofwel blok-model. Deze mode heeft nogthans veel invloed op de lay-out van veel websites. De nieuwe container-tags zoals ‘article’ gaan de tag div grotendeels vervangen.

Een andere rol voor div

De hier besproken tag div wordt wel gebruikt in dit html-file. Een vermindert belang betekent nog niet overbodig. We kunnen echt niet zonder maar de rol is veranderd. De vorm <div id=article> is vervangen door <article>. Zo gaat dat ook bij <div id=aside> en de andere structuur-, ofwel sectionerende tags. Voor de verbinding met het CSS echter blijft <div> op vele plaatsen onmisbaar.

Louis van Gorkom maakt in Frankrijk een Garudasna uit yoga.

Zo wordt de tag div gebruikt voor het plaatsen van de afbeelding hier boven. Ook dit is tijdelijk, want <figure> werkt nog niet naar behoren. We vinden dit binnen <article> bij <div id=PlaatBox> [...] </div>. Op de plaats van de drie puntjes tussen haakjes staat de link naar de afbeelding met de attributen alt en titel. Ook id noemen we een attribuut. Achter het is-teken staat de bijbehorende waarde. Bevat een waarde spaties dan moet deze tussen aanhalingstekens staan!

De tag div duidt dus een lege box in de HTML-pagina. Met deze box kunnen we via het CSS plaats en uiterlijk bepalen. We zien dat hier bij de tekst in <header> met <div id=HedBox> [...] </div>. De naam ‘HedBox’ kunnen we zelf bepalen. Dit doen we tijdens de bouw van het CSS. De browser gebruikt deze namen om de lay-out te vormen. De genoemde naam staat dus los van de standaard, daardoor kunnen robots er niets mee!

Verander de naam ‘HedBox’ in ‘testbox’ en kijk wat er gebeurd. Pas daarbij op voor het verschil tussen kleine- en hoofdletters, want deze namen zijn in tegenstelling tot de tags hoofdlettergevoelig. Hier speelt o.a. de CSS-opdracht #HedBox {float:right;}, ofwel ga flexibel maximaal naar rechts.

Tijd voor diverse testjes

Maak nu een kopie van het CSS met de naam TestDiv.CSS en verbindt dit testfile met dit file (<link rel="stylesheet" href="TestDiv.css">). Nu kunnen we veilig experimenteren met de waarden in ‘testbox’. Eerst geven we deze box tijdelijk een andere kleur. Dan wordt de waarde in de opdracht width:95%; 100%. Durf vervolgens verder te experimenteren.

Ook om het menu in overzichtlijke partjes te verdelen is een extra omsluiting met <div> nodig. In het CSS vinden we de vorm #MenuPart {background:#CCCCFF; margin:0 0 35px 0;}. De achtergrondkleur staat er om te kunnen testen. De benedenmarge geeft de nodige afstand voor de indeling. In de bron binnen <nav> vinden we driemaal een box (<div id=MenuPart> [...] </div>), die een menudeel insluit.

Inmiddels hebben de menu's van bijna alle pagina's deze verdeling gekregen, maar binnen de pagina <nav> hebben we als voorbeeld bewust de oude vorm laten staan. We maken daarbij nog onderscheid tussen <ol> en <ul>. De tag ol staat voor ordered list, ofwel een gesorteerde lijst. Met <ul> duiden we een ongesorteerde lijst.

Zo kunnen we met behulp van een kopie van het CSS met een nieuwe naam, experimenteren met een kopie van dit HTML-file. De verbinding met het CSS staat in <link rel="stylesheet" href="css/5-LiBlauw02.css">. Het zijn we al eerder tegengekomen. Pas de naam ‘5-LiBlauw02’ aan en maak er ‘5-Templ02’ van in het HTML-file. Test de verschillen door de browser tijdelijk op 50% te zetten. Dit komt overeen met een extra breed scherm. Let op; ‘Templ’ is een afkorting van het Engelse template. Er staat dus een letter L; geen cijfer 1. Na deze experimenten gaan we verder met de tekst in <footer>.