HTML Cursus - Hoofdstuk 4: Links
Om te beginnen gaan we nu werken met twee verschillende HTML bestanden:

hyperlink1.html:
<HTML>
<HEAD>
    <TITLE>HTML Cursus Youreon.nl - Hst. 4</TITLE>
</HEAD>
<BODY>
    <A href="hyperlink2.html">Klik hier eens</A>
</BODY>
</HTML>


hyperlink2.html:
<HTML>
<HEAD>
    <TITLE>HTML Cursus Youreon.nl - Hst. 4</TITLE>
</HEAD>
<BODY>
    <A href="hyperlink1.html">Ga terug</A>
</BODY>
</HTML>


Sla deze bestanden op als hyperlink1.html en hyperlink2.html. Zorg ervoor dat ze in dezelfde map staan (bijv. Mijn documenten). Als je nu hyperlink1.html opent in je browser, dan zie je "Klik hier eens" staan. Als je daar klikt, zie je daar "Ga terug" staan. Je zit nu op hyperlink2.html. Door op een link te klikken, ga je naar de andere pagina.

Als je hyperlink2.html in een mapje zet (rechtermuisknop => Nieuw => Map / rechtermuisknop op de map => Naam wijzigen => Typ: map [enter] / hyperlink2.html in de map slepen) worden de links als volgt:

hyperlink1.html:
<A href="map/hyperlink2.html">Klik hier eens</A>


hyperlink2.html:
<A href="../hyperlink1.html">Ga terug</A>


Bij hyperlink1.html zet je dus map/ in de link. Dit betekend dat hij naar de map met de naam "map" moet gaan.

Bij hyperlink2.html zet je dus ../ in de link. Dit betekend dat hij naar de vorige map moet gaan.


Maak een link naar google:

<A href="http://www.google.nl">Gooooogle</A>


Met href bepaal je dus naar welke pagina je gaat. De tekst die je tussen de A tags zet, bepaald welke tekst (of afbeelding) er getoont wordt als link.


Open een website in een nieuw venster:

<A href="http://www.youreon.nl target="_blank">Open Youreon.nl in een nieuw venster</A>


Je hebt relatieve en absolute links.

Een Relatieve link is een link binnen jouw website. Ik gaf net al het voorbeeld, hoe je tussen twee HTML pagina's naar elkaar kan linken. Dit zijn relatieve links.

Een absolute link is een link naar bijvoorbeeld google of youreon.nl. Zorg ervoor dat je de voledige link typt (bijv. met http://www. ervoor).


Mail link:

<A href="mailto:mijnemail@mijndomein.ext">Mail me!</A>


Index

Hoofdstuk 1 - Hoofdstuk 2 - Hoofdstuk 3 - Hoofdstuk 4
Hoofdstuk 5 - Hoofdstuk 6 - Hoofdstuk 7 - Hoofdstuk 8
Hoofdstuk 9 - Hoofdstuk 10



Wat vind je van deze pagina?

92%
Je moet ingelogd zijn om te kunnen stemmen!