Interne links 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

Volgende video: Interne sectielink maken

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.

Met een interne link refereer je naar een pagina binnen je eigen website.

Je gebruikt hiervoor een relatief pad.

Dat houdt in dat je altijd de route opgeeft vanaf het document waarin je de link plaatst.

Vanaf daar moet je de exacte route naar de pagina binnen de Local Root Folder aangeven.

Bekijk de mappen en de bestanden in de linkerkolom.

Er staan twee losse html bestanden los in de Local root Folder.

De index.html waar we nu in werken en een pagina 'paginalink.html'

Er is ook een map 'pages'.

In deze map bevindt zich nog een html document. Deze heet 'sectielink.html'.

Ik ga de tekst 'Interne links' linken naar de pagina 'paginalink'.

Ik knip de tekst weg met Command X en plaats het html-element -a-.

Deze moet ook worden afgesloten, maar dat doet Brackets automatisch.

Dan kan ik de tekst weer terugplakken met Commando V.

En daarmee is dit de linktekst,

In het attribuut geef ik de route op met href=" ".

Het html-bestand 'paginalink' staat direct naast de index.html in de Local Root Folder.

Dus het voldoet om direct de naam van de pagina in te typen.

Je kunt ok nog de title opgeven title=" ".

Dus iets als 'Meer informatie over interne links'.

Bewaar het document en bekijk het resultaat in de browser.

Browsers geven aan links altijd een opvallende vormgeving zodat je ze direct herkent op de pagina.

Chrome doet dat met een blauw kleurtje en een blauwe onderlijning.

Blijf dan met de muis even boven de link hangen.

En in een popup verschijnt de titel-tekst.

Klik in en houd ingeklikt.

Zie je dat de browser dan de kleur van de link wijzigt?

Deze wordt bij het in klikken rood weergegeven.

Zodra je op de link klikt ga je naar de pagina.

Vanaf deze pagina moet ik dan ook weer een link maken waarmee ik weer terug kan keren naar de index.html.

Activeer de pagina 'paginalink' in Brackets.

De tekst knip ik weg met Commando X.

Ik plaats het link-element -a-. En plak de tekst weer terug met Commando V

De route naar de index geef ik weer op bij de href=" ".

En typ ditmaal 'index.html'.

Want de index staat direct naast de pagina paginalink.html.

Ik kan het document bewaren.

En ditmaal kan ik terugkeren naar de homepagina.

Nu kan ik tussen deze twee pagina's heen en weer navigeren.

Het is dus heel belangrijk dat je de juiste route naar het bestand aangeeft.

Stel dat ik de html-pagina 'paginalink' verplaats naar de map 'pages'.

Dan kloppen de links niet meer.

Kijk maar. Als ik nu op deze link klik.

Verschijnt de melding dat de pagina niet meer kan worden gevonden.

Ik zal de link moeten aanpassen in de broncode.

Keer terug naar de index.html.

En wijzig de route naar het bestand.

Deze staat nu in de map pages.

En daarin, dat geef ik aan met een /, staat het bestand 'paginalink'.

De link klopt weer als het goed is. Ja!

Maar hoe zit het met de link terug naar de index.html.

Ook die kan nu niet meer worden gevonden.

Want de index staat buiten de map 'pages'.

Dus ook die link moet je aanpassen.

Ik ga naar de pagina 'paginalink' en wijzig de route naar het bestand index.html.

Om uit de huidige map één map omhoog te gaan typ je twee punten en dan een slash.

Zou je twee mappen omhoog moeten gaan dan typ je dit tweemaal.

Ik bewaar het document.

En als het goed is werken deze twee links weer.

Ja hoor! Ik kan weer heen en weer linken tussen beide pagina's.

Je begrijpt nu wellicht hoe belangrijk het is dat je vanaf het begin nadenkt...

hoe en waar je de pagina's van de site wilt bewaren.

Want verplaats je pagina's achteraf zul je ook alle links weer moeten aanpassen.

En dat is best veel werk.