Geordende lijsten -ol- en -li-

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

Voor dit hoofdstuk maak ik gebruik van de index.html uit de Local Root Folder htm--.

Lijsten is een heel sterk onderdeel van het maken van webpagina's.

Later zul je leren hoe je met lijsten volledige navigatiesystemen maakt.

Maar we starten met het maken van een eenvoudige geordende lijst.

Plaats aan het begin van de lijst het html-element -ol-.

Deze wordt direct afgesloten door brackets.

Ik knip het html-element einde ol hier weg met commando X

en plak deze aan het einde van de lijst met Commando V.

Alle items in een lijst plaats je binnen het html-element li.

Dat staat voor listitems.

Daarvoor knip ik deze regel eerst weg. Dan plaats ik het li-element. Deze wordt direct afgesloten.

De cursor knippert op de juiste plek en dan plak ik de regel weer terug. En sat doe ik dan ook voor de overige.

Bewaar dan het document en bekijk een voorbeeld in de browser.

Ook nu is het handig om de Inspector in beeld te hebben.

Klik met de rechtermuisknop in de webpagina en kies uit het contextuele menu voor Inspecteren.

Selecteer in het elements-venster de lijst, de ol.

en je kunt de standaard vormgeving van Chrome bestuderen in het Styles-venster.

Zo kun je al bekend worden met de wijze waarop css-stijlen de vormgeving bepalen.

Standaard worden voor een geordende lijst cijfers gebruikt.

Maar je kan dit zelf bepalen door een attribuut toe te voegen aan de ordered list.

Het eerste attribuut wat ik wil behandelen is het attribuut type.Type =" ".

En tussen de " Quotes" bepaal je dan wat voor soort opsomming je wilt hebben.

Je kunt invoeren een kapitaal "A" en de opsomming verandert in hoofdletters.

Zie ook dat je hiermee de standaard vormgeving van de browser hebt overschreven.

In het Styles-venster staat nu de default-vormgeving doorstreept.

Standaard waren dit cijfers, oftewel decimal.

Nu is er een nieuwe inline stijl geschreven en die bepaalt dat de opsomming met kapitaalletters moet worden uitgevoerd.

Kies je bijvoorbeeld voor een kleine letter "a" worden het kleine letters.

Maar je kan ook kiezen voor romeinse cijfers zowel in hoofdletters met een kapitale i.

Of met een kleine i, de undercast romeinse cijfers.

Naast dat je het type opsomming kunt bepalen.

Kun je ook bepalen met welk getal je wilt beginnen.

Dat doe je met het attribuut start=" ".

En tussen de "quotes" voer je het getal in waarmee de lijst moet starten.

Ik wil starten met het getal vier. En voilà, de lijst start met vier.

Naast start kun je ook nog kiezen voor "reversed".

Hier hoeft geen waarde bij.

Nu nummert de lijst vanaf vier terug.

Dus vier, drie, twee, een.

Zet ik het beginnummer start op één.

Dan nummert deze terug naar nul, min-een, min twee.