Linken
pv2_paars.gif 204*37
mail me
 
 
 
  index
  home
  basis
  linken
  lijsten
  plaatje
  varia
 
Intro HTML codes.


Hyperlinken: het linken van de ene pagina naar een andere

Hyperlinken, of Linken, is de mogelijkheid om op een bepaalde tekst te klikken, dan wel een plaatje, waardoor je naar een andere pagina springt. Hierbij heb je zowel een Openings<A> als een Sluit </A> Tag nodig. De letter A wordt er voor gebruikt, van Anchor oftewel: Anker

Anchors moeten ook het HREF= (Hypertext Reference) attribuut hebben om goed te werken:

<A HREF=> </A>

Maar deze tag is nog niet kompleet en doet nog niks, want je moet wel vertellen waar naar gelinkt moet worden:

<A HREF="http://www.HTMLclinic.com/example.html"> </A>

Nu moet de bezoeker wel ergens op klikken, dus zet je tekst tussen de openings en sluit tag, zo dus:

<A HREF="http://www.HTMLclinic.com/example.html">HTML Hulp</A>

Nu is de tag compleet. Probeer maar: HTML Hulp

Pagina Linken Tips

Indien een pagina niet op je eigen site zit, dan dien je het web adres van de betreffende pagina aan te geven:

<A HREF="http://www.examplesite.com/index.html">Voorbeeld Site</A>

Als de pagina in dezelfde map zit heb je alleen maar de filenaam nodig:

<A HREF="test_pagina.html"> Klik hier </A>

Als de pagina in een andere directory of map zit moet je de padnaam erbij zetten:

<A HREF="andere_mapnaam/paginae2.html">Page Two</A>

Linken naar Download Files

Als je wilt dat je bezoeker een file kan downloaden, gebruik je de anchor tag met de filenaam van die file:

<A HREF="filenaam.hier"> klik hier om de file te downloaden </A>

Naam Anchors: linken naar bepaalde plaatsen op dezelfde pagina

Anchors kunnen ook gebruikt worden om naar een bepaalde plek op dezelfde pagina te springen.

Als je bijvoorbeeld een pagina over je huisdieren hebt, en je wilt vanaf de bovenkant naar het verhaal over je hond, wat beneden aan de pagina staat springen, dan is zo een link erg vlot en nuttig. Ga dan naar het verhaal van je hond en zet een "Name Anchor" rond het eerste woord, of een zin van je verhaal:

<A NAME="hond">Alles over mijn hond Snuffy:</A>
Snuffy is mijn hond. Hij heeft een staart die altijd kwipspult, 4 pooten en een lange snuit. Je ziet het er niet aan af, maar hij is een politiehond. Een recherchehond. Zijn broer, die ook banketbakker is......... mmmm volgens mij klopt het nu niet meer.........

Nu ga je naar de bovenkant van je pagina waar je de link naar je "hond"verhaal wil plaatsen. Hier is de code voor de link aan de bovenkant van de pagina:

<A HREF="#hond">Klik voor Snuffy de hond</A>

Als je nu op de link bovenaan je pagina klikt, spring je gelijk naar het verhaal over Suffy!

Als je vanaf een andere pagina naar Snuffy wil linken doe je dat zo:

<A HREF="beesten.htm#hond">Klik voor Snuffy </A>

Mailto Anchor: een link maken naar een email adres

Je kunt een link ook gebruiken om een mail naar een gespecificeerd e-mail adres te versturen, dan moet je "mailto:" aan de link toevoegen:

<A HREF="mailto:vazed@zeelandnet.nl">Email Me Now!</A>

Als je nu op deze mailto link klikt, opent het je email programma en pakt automatisch het adres wat in de link vermeldt staat.

Probeer maar: Email Me Nu!

Image Anchor: Plaatjes als link

Je hebt mooie buttons voor je navigatie gemaakt en wilt deze als link gebruiken.

Hier is de code vooor de buttons:
<IMG SRC="button.gif" HEIGHT="30" WIDTH="40" ALT="Mijn Button" BORDER="0">

Nu moet de Anchor code er rond gezet worden:
<A HREF="folder/pagina2.html"><IMG SRC="button.gif" HEIGHT="30" WIDTH="40" ALT="Mijn Button" BORDER="0"></A>

Als je een border rond de button wilt (border="3"):
<A HREF="folder/pagina2.html"><IMG SRC="button.gif" HEIGHT="30" WIDTH="40" ALT="Mijn Button" BORDER="3"></A>

En je kunt ook linken vanaf een kleine versie van een groot plaatje (dit heet een 'thumbnail') , naar het grote plaatje:
<A HREF="groot.gif"><IMG SRC="klein.gif"></A>

In dit voorbeeld zal bij het klikken op klein.gif de groot.gif file in de browser getoond worden.

Verder met:   Lijsten