Het -div- & -span- element

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.

Dan rest mij nog om het div-element en het span-element uit te leggen.

Open hiervoor het bestand index-div.html.

Ook nu heb ik weer een paar css-stijlen geschreven die direct in beeld komen zodra je mij precies volgt.

De -div- en -span- zijn betekenisloze elementen.

Dat betekent dat browsers en zoekmachines geen enkele betekenis aan deze elementen verbinden.

Je gebruikt deze dan ook enkel als een ander html-element niet geschikt of beschikbaar is.

Het verschil tussen de -div- en -span- is dat een div een blocklevel-element is.

En een span een inline element.

Blocklevel elementen nemen net als de h-één tot en met h-zes altijd de hele regel in beslag.

Je kunt niet zonder ingrijpen twee div's naast elkaar op de regel krijgen.

Een span-element is een inline-element net als afbeeldingen.

Hiervan kunnen er juist meerdere naast elkaar op de regel staan.

Als ik dus een deel van de tekst anders wil gaan vormgeven dan gebruik ik daarvoor de -span-.

Wil ik dat teksten als een blokje, als een groep vormgeven worden.

Dan gebruik ik een -div-.

Onder elke laatste paragraaf heb ik een drietal regels staan.

Die wil ik als een apart blokje gaan groeperen en voorzien van een aparte opmaak.

Het makkelijkst is om deze regels even weg te knippen met Commando X. I

k plaats het div-element en plak de tekst weer terug met Commando V.

Zie je dat deze informatie als een blokje wordt vormgegeven.

Dat komt omdat ik hier een css-stijl voor heb geschreven.

Elke -div- krijgt nu deze vormgeving.

Om een deel van de tekst te kunnen voorzien van een aparte vormgeving.

Gebruik je het span-element.

Ik selecteer een stuk tekst en knip deze weg met Commando X.

En plaats -span-. Dan kan ik de tekst weer terug plakken.

Als het goed is zie je dat deze tekst nu een andere achtergrondkleur heeft gekregen.

Ook dit heb ik in een css-stijl beschreven.

Hierdoor krijgt elk span-element nu deze vormgeving.