Externe 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 links 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.

In dit hoofdstuk maak je gebruik van de Local Root Folder htm--.

Activeer deze in Brackets via Bestand > Open map...

Selecteer de map htm-- en klik op Open.

In deze video leer je hoe je een hyperlink kunt maken naar een webpagina ergens op het internet.

Als voorbeeld gebruiken we daarvoor het webadres van house-of-training.

Ik knip deze tekst die ik wil gaan linken weg uit de tekst met commando X.

Je linkt met het html element a.

Deze moet ook afgesloten worden. Dat doet Brackets automatisch voor me.

Binnen het a-element plak ik de tekst terug met Commando V.

Plaats binnen het a-element het attribuut href=" en dan twee quotes.

Ondanks dat er nog geen adres is opgegeven geeft de browser de tekst al als een link weer.

Voor het maken van een link naar een andere webpagina moet je altijd het hele adres inclusief het protocol invoeren.

Het makkelijkst is om gewoon de desbetreffende webpagina in een browser op te zoeken.

Dan het adres in de adresbalk te kopiëren met Commando C.

en je eigen html-document te plakken met Commando V.

Leer jezelf aan om ook links maar direct te voorzien van een 'title'.

title= en ook weer twee quotes. Als title plaats ik:

Online cursussen voor de creatieve industrie

Bewaar het document en loop in het voorbeeldvenster naar de link.

Wacht even met de muis boven de link.

En de title verschijnt in een popup venster en hierin staat de tekst die je bij de title hebt ingevoerd.

Ook spraakmachines gebruiken de title-tekst om de link uit te spreken.

En dat is natuurlijk veel prettiger als dat de spraakmachine elke keer de hele url uitspreekt.

En het webadres biedt ook niet altijd duidelijkheid waar de website over gaat.

Dat kun je in de title dus mooi verwoorden.

Klik op de link.

De huidige pagina wordt vervangen door de gelinkte pagina.

Het kan zijn dat je dat wil.

Maar het kan juist ook zijn dat je wel wilt refereren naar een andere website.

Maar niet dat de bezoeker nu van jouw pagina af is.

Ik keer terug naar de vorige pagina.

En ik zal mijn Live Voorbeeld opnieuw moeten activeren.

Want ik ben nu eenmaal van mijn eigen pagina afgegaan.

Om te voorkomen dat mijn huidige pagina wordt vervangen.

Kan ik daarvoor een attribuut gebruiken en dat is target=" ".

En dan heb ik de keuze uit de opties _blank, _parent, _self en _top.

Eigenlijk is op dit moment alleen maar '_blank' interessant.

Dat heeft ermee te maken dat de anderen voornamelijk gebruikt werden door websites die volledig uit frames waren opgebouwd.

Dat is een techniek die we heden ten dage helemaal niet meer gebruiken.

Bewaar het document en klik dan nogmaals op de link.

Ditmaal verschijnt er een tweede tabblad bovenin mijn browserbalk.

En dan kan ik nog vrij eenvoudig terugkeren naar de website...

waar ik vandaan ben gekomen door op het andere tabblad te klikken.

Het laatste attribuut dat ik wil behandelen is de hreflang=" ".

En hiermee geef je de taal aan.

Stel dat je meerdere links plaatst naar bijvoorbeeld documenten in het Duits, Nederlands en Engels.

Dan kun je per link aangeven om welke taal het gaat.

Als het om een Nederlandse pagina of document gaat dan gebruik je daarvoor de tweeletterige landencode nl.

Elk land heeft een eigen tweeletterige herkenningscode.

En deze kun je vinden op wikipedia.

Hier staat een tabel en in de tweede kolom vind je de twee letters die het land duiden.

Het is een hele lange lijst. Alle landen van de wereld staan erin vermeld.

Het is een hele lange lijst. Alle landen van de wereld staan erin vermeld.