Links toevoegen

Leerdoel:

Na deze uitleg kun je een verwijzing (link) naar een externe website toevoegen aan je website.

Je hebt in de vorige lessen jouw website voorzien van tekst en afbeeldingen. Met HTML kun je verwijzingen naar andere, externe websites toevoegen aan een stukje tekst of aan een afbeelding. Als je dan op zo’n stukje tekst of afbeelding klikt, wordt de externe website automatisch geopend. Zo’n verwijzing wordt vaak een link genoemd. In de tekst wordt een link vaak blauw en onderstreept weergegeven. Als je met de muisaanwijzer op een link gaat staan, verandert het pijltje van de muisaanwijzer in een handje.

Om een verwijzing of link toe te voegen aan je website maak je gebruik van het <a> element. Dit element moet je altijd openen én sluiten. De informatie over de externe website neem je op binnen het openingselement <a> en de tekst of afbeelding waarop geklikt moet worden voor het openen van de andere website, plaats je tussen het openings- en sluitelement, dus tussen <a> en </a>.

Een voorbeeld van een link gekoppeld aan één woordje ziet er dan zo uit:

Op de website ziet het er dan zo uit:

De url (het www-adres) van de externe website neem je dus op binnen het openingselement <a> na het commando href=. Belangrijk hierbij is dat je de volledige url gebruikt, dus ook http(s)://.

Een voorbeeld van een link gekoppeld aan één paragraaf ziet er zo uit:

Op de website ziet het er dan zo uit:

Je ziet dat nu de hele tekst een link geworden is. Let goed op de plaats van de verschillende openings- en sluitelementen. Verder zie je dat de kleur van de link nu paars is geworden. Dat komt omdat de link al een keer is aangeklikt. Een link die nog niet is aangeklikt is blauw, en een link die al een keer is aangeklikt is paars.

Op dezelfde manier als je een link koppelt aan een paragraaf, kun je ook een link koppelen aan een afbeelding. Tussen het openings- en sluitelement neem je dan het <img>-element op. Bij een afbeelding kun je niet zien dat het een link is; daarom is het belangrijk om dit ergens aan te geven. Bijvoorbeeld met: “Voor meer informatie klik op de foto van de zeesleepboot Holland”.

Je kunt binnen het openingselement van een link aangeven dat je de externe website in een nieuw tabblad van de browser wilt laten openen; jouw eigen website blijft dan dus ook geopend. Daarvoor gebruik je het commando target, zoals in onderstaand voorbeeld.

Als je nu de link aanklikt, wordt de andere website in een nieuw tabblad geopend.

Opdracht 11:

Je gaat nu een verwijzing naar een externe, andere website toevoegen aan je webpagina.

1. Zoek de website op waarvoor je een verwijzing (link) wilt toevoegen aan je website.
2. Kopieer uit de adresbalk het volledige internetadres (url).

3. Selecteer eerst het hele adres, klik dan met de rechtermuisknop op het adres en kies voor ‘kopiëren’. Of selecteer eerst het hele adres en gebruik dan ‘Ctrl-C’.

4. Log in met je eigen gegevens op repl.it en open je project (in team IT College - Noordik).
5. Als de file index.html nog niet geopend is, kun je deze openen door de file aan de rechterkant aan te klikken.
6. Zoek in je eigen website op, welk gedeelte (woord(en), paragraaf, kop, afbeelding) je wilt gebruiken voor de verwijzing.
7. Plaats dit gedeelte tussen het openingselement <a> en het sluitelement </a>.
8. Vul het openingselement aan met href. Het openingselement ziet er dan zo uit: <a href=””>
9. Plak tussen de dubbele aanhalingstekens het internetadres van de website waarnaar je wilt verwijzen. Klik tussen de dubbele aanhalingstekens met de rechtermuisknop en kies voor ‘plakken’. Of klik tussen de dubbele aanhalingstekens met de linkermuisknop en gebruik dan ‘Ctrl-V’.
10. Bekijk het resultaat via een webbrowser en probeer de verwijzing (link) uit.
11. OPTIONEEL: Kijk of je de andere website in een nieuw tabblad kunt laten openen.