Interne sectielink maken

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.

Open de pagina sectielink in de map pages.

Een opsomming van links wordt gestructureerd als een lijst.

Hiervoor gebruik je het html-elementen voor lijsten.

Voor ongeordende lijsten de -ul- en voor geordende lijsten de -ol-.

Bovenaan deze pagina staat zo'n lijst.

Met teksten die moeten gaan linken naar Hoofdstuk één, twee en drie.

En deze staan op dezelfde pagina.

Om naar een deel van de pagina te kunnen linken maak je gebruik het id-attribuut.

Deze plaats je altijd binnen het html-element.

Ik zoek het meest geschikte html-element voor Hoofdstuk één.

Dat lijkt me de kop, de -h-.

Je typt hierin het attribuut id=" " en dan mag je de id zelf een naam geven.

Ik noem deze 'een'.

Hetzelfde doe ik ook voor de hoofdstukken twee en drie.

Ook die krijgen binnen het h-element een id mee.

Eke id moet altijd wel een unieke naam krijgen.

Dus in dit geval 'twee' en bij het laatste. Die noem ik 'drie'.

Nu kan ik de teksten bovenin de pagina gaan linken naar de juiste delen op de pagina.

Ik knip de tekst Hoofdstuk één weg met Commando X.

En ik plaats het a-element, het link-element.

En ik plak de tekst weer terug.

De route die ik moet aangeven met href= " ", moet gaan springen naar id een.

En dat geef je aan met een hashtag en dan de naam. Het hashtag teken staat voor 'id'.

Ik bewaar mijn document en ik controleer mijn link op mijn webpagina.

Inderdaad. Klik ik op Hoofdtuk één.

Dan springt deze ook naar de plek van Hoofdstuk één.

Nu kan ik ook de overige hoofdstukken gaan linken met bijbehorende hoofdstukken dus...

Opnieuw het a-element. Ik plak de tekst terug.

Ik typ href=" " en ditmaal wil ik springen naar hoofdstuk twee, dus dat is hashtag twee.

En ook hoofdstuk drie ga ik op dezelfde manier linken.

Bewaar je document en controleer dat elke link werkt.

Hoofdstuk twee moet linken naar twee.

En dat klopt. En Hoofdstuk drie moet linken naar drie. En die doet het ook.

Zodra ik spring naar een plek op de pagina.

En ik Weil weer terug naar boven. Dan moet ik scrollen.

Maar ook dit kun je oplossen met een sectielink.

Zoek dan het meest hooggelegen html-element van de pagina.

Dat is de body-tag. Hier plaats ik een id="boven".

Dan kan ik de teksten op deze pagina, die terug kunnen springen naar boven.

Wegknippen en voorzien van een link.

En in die link refereer ik dan naar de id="boven".

En dat doe je dus met hashtag boven.

Deze code kan ik nu kopiëren en ook bij de overige hoofdstukken plakken. Zo.

Bewaar het document, keer terug. Ik spring naar hoofdstuk drie.

En onder drie staat nu een link terug naar boven.

En jawel hoor! Dan spring ik weer terug naar boven.

Stel dat ik vanaf de index.html zou willen linken naar Hoofdstuk drie op de pagina 'sectielink.html'.

Nou dat kan ook.

Activeer de index.html. Selecteer de tekst 'sectielink' en knip deze weg met Commando X.

Plaats een link met -a-. Plak de tekst weer terug.

En bepaal de route met href=" ".

Allereerst, de pagina sectielink staat in de map pages.

Die staat in de Local Root Folder naast de index.html. Daar moet hij in gaan kijken.

Daarin staat het bestand sectielink.html.

Op die pagina wil ik naartoe refereren, maar dat is nog niet voldoende.

Daarna moet hij nog naar de juiste plek op de pagina, dat geef ik aan met hashtag drie.

Ik bewaar mijn document en controleer deze link.

Eén keer klikken en jawel hoor.

De juiste pagina wordt geactiveerd en hij springt direct naar de positie van hoofdstuk drie.

Experimenteer nu zelf verder met het maken van interne sectielinks.