Aan de slag met HTML5

Elementen zonder sluit-tag

Er zijn tags die wel degelijk invloed hebben op de lay-out. Deze invloed blijf bovendien zichtbaar bij het verbreken van de verbinding met het CSS. Dat kan door dit file tijdelijk naar het bureaublad te kopiëren en vervolgens op te starten met een dubbelklik van de muis. We zien dat de vorm van het menu min-of-meer is behouden.

Ik bedoel <br> de tag om een regel af te breken. Dit br komt van het Engelse break. Het is een bijzondere tag, want deze heeft geen eindtag bij zich. Probeer de volgende code test 1<br>test 2<br>test 3<br> boven in een alinea van <article>.

We maken een apart test-file

Maak hiervoor een kopie op het bureaublad en verander  — ondanks de waarschuwing —  de extensie htm in txt. We veranderen ook de naam van het htm-file in test. De volle naam van dit file wordt dus test.txt, dat na een dubbelklik met de muis er op, de bron laat zien. De alinea herkennen we aan <p>. Het komt van het Engelse paragraph. Vervolgens voegen we tijdelijk aan de naam in de coderegel <link rel="stylesheet" href="css/5-Lay-out.css"> van het CSS een drietal x-jes toe. Doe dit eveneens met de print-vorm! Zo verbreken we dus de verbinding met het CSS.

We gaan nu naar de lay-out kijken, door de extensie weer te veranderen in htm en het file in de map html5 terug te plaatsen. Vervolgens bekijken we met een dubbelklikje het resultaat. Door de afwezigheid van het CSS blijkt dat de tag br dus directe invloed heeft op de lay-out.

De hier gebruikte methode  — van het veranderen van de extensie —  kunnen we bij al onze experimenten met HTML en CSS gebruiken. Ook bij het opzetten van een lay-out met een dummytekst (zie links), is deze methode handig. Verder kunnen we bij testen delen tijdelijk binnen commentaar (<!-- [...] -->) plaatsen. We halen nu de x-jes weer weg en gebruiken test.htm voor onze verdere experimenten. Het is handig ook de tekst in de titel te vervangen door “Test-file”, dat voorkomt vergissingen.

Nu veranderen we in <link rel="stylesheet" href="css/5-Lay-out.css"> de naam 5-Lay-out.css in 5-Zwart01.css en bekijken het resultaat door het test-file in htm-vorm weer op te starten. Dit doen we met een dubbelklikje. Er is inmiddels een zwarte versie van het CSS gebouwd. Het resultaat staat nu voor ons. We plaatsen de naam 5-Lay-out.css weer terug en daarmee komt ook de oorspronkelijke lay-out weer terug. Ook deze test laat duidelijk de scheiding tussen inhoud en lay-out zien.

Meer elementen zonder sluit-tag

Een andere vorm zonder afsluitende tag is <hr>. Deze vorm was in XHTML afgeschaft. Nu in HTML5 komt hij weer terug. Helaas in IE 11 werkt de tag voor de ‘horizontale lijn’ nog niet naar behoren. De tag pre heeft het een overeenkomstig probleem en zorgt voor nog meer raadsels.

De tag hr hoort  — binnen een alinea —  de tekst in delen te kunnen verdelen. Ik heb een voorbeeld in het CSS geplaatst. Misschien gaat het in jullie browser wel goed! Ook <wbr> (een woord afbreken) en <img> van het Engelse image, voor de weergave van een illustratie kennen geen sluittag. Voor <img> vinden we een voorbeeld boven deze alinea. De tag <wbr> is helaas nog toekomstmuziek.

Een echte opdracht

We kunnen voor de experimenten met de onderstaande tabel deze code overnemen en vervolgens ergens binnen <article> plaatsen. Hier volgt de basis-vorm van de tabel:

         <table>

               <tr>
                    <td>Dit is cel 1</td>
                    <td>Dit is cel 2</td>
               </tr>
               <tr>
                    <td>Dit is cel 3</td>
                    <td>Dit is cel 4</td>
               </tr>

         </table>

Pas op; de tabel hoort niet in <p> te staan, maar in een container op het niveau van <div>. Voordat we beginnen met de lay-out in CSS, is het is belangrijk eerst vaardig worden in de opbouw van simpele tabellen. Dus plaats de bovenstaande code  — uit het hoofd —  in de bron onder deze alinea. Bekijk dan het resultaat in de browser. Plaats vervolgens de box <div id=TabelBox> [...] </div> om deze tabel en bekijk het resultaat opnieuw.

Als het goed ging, staat het nieuwe resultaat links naast de bovenste regels van deze alinea. We kunnen nu gaan stoeien met deze tabel. Voeg meer cellen toe. We beginnen daarbij met een extra horizontale cellen. Dan kijken we naar de verticale cellen. Laat vervolgens via het CSS de randen samenvloeien met border-collapse: collapse; in plaats van border-collapse: separate;. Verder kunnen we natuurlijk spelen met de formaten, opmaak, kleuren en positie.

Er zijn zeker nog wensen

De HTML 3.2 en 4 versies van Natspel.nl waren gebouwde met de <td> [...] </td> van een tabel als begrenzer van de pagina. Dit voldoet niet aan de werkwijze, zoals bedoeld in HTML5. Ook zouden we de afbeeldingen graag een tikkeltje naar links schuiven, maar dat gaat jammer genoeg niet samen met centreren! Verder doen de te dunne streepjes onder de links, in Google Chrome het visueel niet. Dit voorbeeld echter laat bij smal-schuiven nog een duidelijk probleem zien. De lay-out ziet er dan echt niet uit!

Ik mis hier een werkende opdracht voor minimum breedte in <body>. Een vaste maat in pixels voor <article> lost dit probleem niet op! Wel geeft de CSS-opdracht max-width:520px; in plaats van width:60%; iets solaas. Ook blijkt daarbij padding: 0 3.85%; in <body> een noodzakelijke verbetering. Dit plaatsen we in het CSS van de meeste andere files, maar als voorbeeld niet in dit file Lay-out.

Vergelijk dit file met andere HTML5-files, door ze met de muis heel smal te schuiven. In dit file blijft er bij smal formaat en de verbinding met 5-LiBlauw01.css, dan niks van de linkerzijde van de tekst in <article> over. De oorzaak van dit probleem, is de acceptatie van <pre> (in IE 8 gaat dat toevallig weer wel goed). Plaats als test dit gebied tijdelijk binnen commentaar en bekijk dan het resultaat opnieuw.

We zien ook dat de browser een minimale breedte hanteert. Deze komt echter nergens overeen met de CSS-opdracht min-width:340px; in <body>. Toch mag deze opdracht opdracht niet ontbreken. Ook een waarde kleiner dan 340 pixels werkt niet (De afbeeldingen zijn 340 pixels breed; ligt hier de oorzaak?). Wel is de daadwerkelijke minimale breedte is duidelijk browserafhankelijk. Die van IE is het smalst namelijk ca. 220 pixels! De smalste mobiele maat is 320 pixels.

Tot een breedte van ca. 1024 pixels doet de huidige dynamische lay-out  — met “5-LiBlauw02” als CSS —  het best aardig. Bij nog bredere schermen echter, is de toevoeging van een container (div) rond het totaal een oplossing. In het CSS komt dan de regel div#container {clear:both; max-width:1024px;}. In dit file ontbreekt dat bewust. Bekijk het effect door even de browser op 50% te zetten. Misschien is er iemand die voor de lay-out nog een nog beter idee heeft. Ondertussen gaan we kijken naar lijsten in <nav>.