De oefeningen - Hyperlink
Nu wordt het spannend.
Het Internet hangt van de links aan elkaar. Die links zorgen er nu juist voor dat een gebruiker van de ene naar de andere pagina kan komen. Die pagina's kunnen zowel binnen één website zijn, als op verschillende sites.
Tot nu toe was jij steeds op dezelfde pagina bezig geweest, die langzaamaan langer wordt.
Je was een soort boekrol aan het maken, waarvan steeds een relatief kleiner gedeelte tegelijk zichtbaar is.
Het is echter veel handiger, om die hoeveelheid tekst over meerdere pagina's te verdelen.
Je brengt dan verwijzingen aan (links geheten) die je kunt lezen als de opdracht:
"als hier geklikt wordt, zoek dan de pagina waarnaar verwezen wordt en zet die op het scherm".
Een link kan 3 soorten verwijzingen bevatten:
We gaan ons concentreren op de 2e soort link.
Hiermee kun je al jouw pagina’s aan elkaar koppelen en kun je bladeren door je eigen website.
Het Internet hangt van de links aan elkaar. Die links zorgen er nu juist voor dat een gebruiker van de ene naar de andere pagina kan komen. Die pagina's kunnen zowel binnen één website zijn, als op verschillende sites.
Tot nu toe was jij steeds op dezelfde pagina bezig geweest, die langzaamaan langer wordt.
Je was een soort boekrol aan het maken, waarvan steeds een relatief kleiner gedeelte tegelijk zichtbaar is.
Het is echter veel handiger, om die hoeveelheid tekst over meerdere pagina's te verdelen.
Je brengt dan verwijzingen aan (links geheten) die je kunt lezen als de opdracht:
"als hier geklikt wordt, zoek dan de pagina waarnaar verwezen wordt en zet die op het scherm".
Een link kan 3 soorten verwijzingen bevatten:
- naar een bepaalde plek binnen het huidige document
- naar een ander document binnen dezelfde website, al dan niet gecombineerd met een bepaalde plek binnen dat andere document
- naar een document "elders op het Internet"
We gaan ons concentreren op de 2e soort link.
Hiermee kun je al jouw pagina’s aan elkaar koppelen en kun je bladeren door je eigen website.
Als je een website van 20 pagina’s hebt, heb jij minstens 20 links nodig, voor elke pagina één.
Stel, je hebt op de index-pagina een verwijzing naar een pagina over je hobby.
De tag die je dan gebruikt is:
<A HREF="naam van de pagina.html">verwijzing naar de pagina</A>
De code luidt dan als volgt:
Bekijk ook <A HREF="hobby.html"> mijn hobby</A>
Je zal merken dat de woorden "mijn hobby" onderstreept worden in de browser, en ook een afwijkende kleur hebben.
(Welke kleur precies, hangt af van wat je zelf hebt opgegeven en/of van de instellingen van de browser. Dit klinkt wat wazig, maar dat is het ook. Laten we het er even op houden dat het voldoende is als het duidelijk herkenbaar is.)
Wat je ook ziet: de muispijl verandert ter plaatste in een handje.
Het effect: Als er op geklikt wordt, gaat de browser op zoek naar een pagina met de naam "hobby.html"; als die gevonden wordt, komt die op het scherm. Wordt die niet gevonden, dan komt er uiteraard een foutmelding.
Als je in die hobby-pagina een link terug naar de index-pagina wilt opnemen, zou de code als volgt zijn:
<A HREF="index.html">Terug naar de index</A>
Probeer het maar eens zelf met jouw website,
Succes!
Stel, je hebt op de index-pagina een verwijzing naar een pagina over je hobby.
De tag die je dan gebruikt is:
<A HREF="naam van de pagina.html">verwijzing naar de pagina</A>
De code luidt dan als volgt:
Bekijk ook <A HREF="hobby.html"> mijn hobby</A>
Je zal merken dat de woorden "mijn hobby" onderstreept worden in de browser, en ook een afwijkende kleur hebben.
(Welke kleur precies, hangt af van wat je zelf hebt opgegeven en/of van de instellingen van de browser. Dit klinkt wat wazig, maar dat is het ook. Laten we het er even op houden dat het voldoende is als het duidelijk herkenbaar is.)
Wat je ook ziet: de muispijl verandert ter plaatste in een handje.
Het effect: Als er op geklikt wordt, gaat de browser op zoek naar een pagina met de naam "hobby.html"; als die gevonden wordt, komt die op het scherm. Wordt die niet gevonden, dan komt er uiteraard een foutmelding.
Als je in die hobby-pagina een link terug naar de index-pagina wilt opnemen, zou de code als volgt zijn:
<A HREF="index.html">Terug naar de index</A>
Probeer het maar eens zelf met jouw website,
Succes!