Met <IMG SRC="URL"> kan je een afbeelding toevoegen aan je pagina. Voorbeeld: we willen de afbeelding http://www.sin.khk.be/~fatman/jpg/button_back.gif afbeelden. Hiervoor geven we de volgende tag in:
<IMG SRC="http://10.0.0.2/sin/jpg/button_back.gif">
Nu gaan we even de zaak versimpelen. Aangezien de locatie van deze pagina cursus/koppelingen.html en de afbeelding jpg/button_back.gif als locatie heeft, kunnen we de zaak iets versimpelen. We moeten nu niet heel de URL ingeven, maar slechts waar ergens in de directory structuur de afbeelding of link te vinden is. <IMG SRC="../jpg/button_back.gif"> De ../ geeft aan dat er een directory niveau omlaag moet worden gegaan. De browser springt dus van http://www.sin.khk.be/~fatman/cursus naar http://www.sin.khk.be/~fatman. Daarna geven we aan dat hij in de directory jpg/ moet gaan kijken naar de file button_back.gif.
Deze werkwijze maakt de opbouw van je site vele beter. Merk ook op dat het zo wel heel makkelijk is om je site van plek naar plek te verhuizen over Internet. Je moet immers nooit je links aanpassen op die manier.
Het is aan te raden om bij je afbeelding een ALT in te voegen. Op die manier krijgen mensen die geen afbeeldingen kunnen zien, Linux users bijvoorbeeld, ook nog een duidelijke uitleg te zien. <IMG SRC="../jpg/button_back.gif" ALT="Klik hierop om een niveau terug te gaan">
Als je nu op deze afbeelding met onze muiswijzer staan, dan zie je de alternatieve tekst. Als je geen afbeeldingen kan zien, dan krijg je automatisch deze tekst te zien. (P.S.: merk op dat deze link niet werkt, we hebben deze afbeelding nog niet gelinkt aan een pagina)
Vaak wil je een link leggen naar een volgende pagina, of naar een bepaalde file die de browser dan kan downloaden. Gebruik hiervoor de volgende code: <A HREF="URL"></A> Willen we bijvoorbeeld de teskt: "klik hierop" laten linken met de pagina doorlink.html, dan gebruik je de volgende code:
<A HREF="doorlink.html">Klik hierop</A>
Klik hierop
Merk op dat voor de URL dezelfde regels gelden als bij afbeeldingen. We kunnen nu ook een afbeelding als link gebruiken zoals bijvoorbeeld de back. Knop. Hiervoor gebruiken we de volgende code:
<A HREF="doorlink.html"><IMG SRC="../jpg/button_back.gif"ALT="Terug naar de vorige pagina"></A>
Merk op dat de pagina doorlink.html wel niet bestaat, dit is slechts een voorbeeldje.
Nu kunnen we op dezelfde eenvoudige manier files laten downloaden. We zettem gewoon als hyperlink een link naar een zip archiefje, je browser lost de rest wel op. Hij zal automatisch vragen/beginnen met het downloaden van de file. Je kan ook als URL "file:locatie" gebruiken. Dan zal de browser automatisch zonder kijken naar het file type, beginnen met downloaden.
Een E-Mail adres is een speciale link. Daarvoor gebruiken we als URL: "mailto:fatman@sin.khk.be". Op die manier zal je browser automatisch je E-Mail client activeren.
<A HREF="mailto:fatman@sin.khk.be">Klik hierop om mij een mailtje te sturen</a>
Klik hierop om mij een mailtje te sturen
Je kan ook linken naar een plek in je document. We markeren een plek met
<A NAME="naam">Hier mag tekst komen, dit is dus het veld naam</A>
Nu kunnen we linken naar deze plek met
<A HREF="#naam">Klik hierop om te springen naar het veld "naam"</A>
Hier mag tekst komen, dit is dus het veld naam
Klik hierop om te springen naar het veld "naam"