Geordende lijsten ol tag

uit de cursus Basiskennis HTML (2014)

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 HTML (2014)

perm_identity Belinda | video_library 40 video's | query_builder 2:50:32

Leer webpagina’s te bouwen in html

In webdesign is de content gescheiden van 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

Webdesigners, webbouwers, appbouwers en vormgevers voor webproducties. Iedereen die wil leren html-pagina’s te vervaardigen.

Wat ga je leren

In de cursus basiskennis HTML leer je hoe je webpagina’s structureert met de juiste HTML-tags. En je leert hoe je de juiste mappenstructuur maakt voor webproducties. Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen voorkennis nodig. Algemene comptervaardigheden is wel aan te raden.

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.

 

In deze video leg ik het gebruik uit van een 'ordered list'.

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

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

Maar nu houden we ons alleen maar bezig met het maken van een eenvoudige lijst aan opsommingen.

Dit zijn de items die onderdeel uitmaken van een lijst.

Daarvoor zal ik aan moeten geven met de html tags

    en einde

.

Dat ik wil dat de items die hierin komen te staan een 'ordered list' zijn.

Elk lijstitem moet worden aangegeven met de opdrachttag 'dit is een listitem'

  • .

    en dit is einde listitem

  • En dat doe je dan vervolgens voor alle afzonderlijke listitems.

    Bekijk een voorbeeld, bijvoorbeeld in het gedeelde venster van dreamweaver.

    En dit is een standaard manier van het tonen van een geordende lijst.

    Standaard worden daar de cijfers , , , voor 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 vervolgens wat voor type opsomming je wilt hebben.

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

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

    Maar je kan ook kiezen voor romeinse cijfers zowel in kapitalen als in undercast.

    Gebruik een kleine letter "i" voor de undercat romeinse cijfers.

    En een kapital letter "I" voor kapitaal romeinse cijfers.

    Naast dat je een type opsomming kunt bepalen, kun je ook bepalen met welk getal je wilt beginnen.

    Dat doe je met het attribuut start=" ". En vervolgens tussen de "quotes" voer je in met welk getal de lijst moet starten.

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

    Nu is er in html een nieuw element erbij gekomen voor de ordered list. Naast start kun je nu ook kiezen voor "reversed".

    En hier hoeft geen waarde bij.

    Want de lijst bestaat uit meerdere items en is genummerd.

    En zo ja dan zullen deze nummeringen omgekeerd weergegeven worden door de browser.

    Dreamweaver geeft de omgekeerde volgorde niet weer. Maar als we gaan kijken, bijvoorbeeld in Safari.

    Dan zie je dat deze nu de lijst met een terugnummering weergeeft van ,,,.

    Bedenk wel. Dit zijn de modernste browser. Een wat oudere browser die zal dit niet goed weergeven.

    En dan is het gewoon een standaard een ,,, lijst.

    Ook Chrome en Firefox ondersteunen deze nieuwe html attribuut van een ordered list.

    Als ik kijk bij Chrome dan doet deze het ook prima.