Een homepage is natuurlijk niet compleet zonder links naar andere Internetonderdelen. Ook dit is zo simpel als wat. We gaan een link maken naar Oracle. Waarom Oracle, zul je vragen. Er zijn toch wel leukere sites om naar toe te gaan. Klopt, maar Oracle is waar ik me in het dagelijks leven mee bezig houd, vandaar een beetje reclame.
Begin hiermee...

<BODY BGCOLOR="#FFFFFF">
Ga naar Oracle!
</BODY>

Ga naar Oracle!

Zet het woord dat naar de link moet verwijzen tussen een paar verwijstags (anchor tags).

<BODY BGCOLOR="#FFFFFF">
Ga naar <A>Oracle!</A>
</BODY>

Ga naar Yahoo!

Voeg de URL toe en klaar is Kees! (URL staat voor Universal Resource Locator). Dat is een interessante term die de computerbobo's hebben bedacht. Ze schijnen daar een handje van te hebben. Een URL is niets meer of minder dan een Internetadres.

<BODY BGCOLOR="#FFFFFF">
Ga naar <A HREF="http://www.oracle.com/">Yahoo!</A>
</BODY>

Ga naar Oracle!

Laten we er nog eens een proberen.

<BODY BGCOLOR="#FFFFFF">
Download Netscape!
</BODY>

Download Netscape!

<BODY BGCOLOR="#FFFFFF">
Download <A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>

Download Netscape!

Een e-mail link werkt op dezelfde manier. We gebruiken gewoon mailto: in plaats van http:// en een e-mail adres in plaats van een Internetadres.

<BODY BGCOLOR="#FFFFFF">
Stuur me <A HREF="mailto:bill.gates@microsoft.com">Mail!</A>
</BODY>

Stuur me Mail!

We kunnen van een afbeelding ook een link maken. Gebruik het 'Download Netscape!' voorbeeld dat we hierboven gemaakt hebben. We vervangen het woord Netscape! door een <IMG> tag...

<BODY BGCOLOR="#FFFFFF">
Download <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
</BODY>

Download

Een veelgestelde vraag is hoe ik dat irritante blauwe kader dat om het plaatje staat, weg kan halen. Simpel...

<BODY BGCOLOR="#FFFFFF">
Download <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A>
</BODY>

Download

Vergeet niet dat afbeeldingen, vooral foto's, veel data bevatten en daardoor kan het wel even duren voor dat ze helemaal geladen zijn. Eén manier om de bestandsgrootte te verkleinen is het reduceren van de afbeeldingsgrootte. Door de hoogte en breedte te halveren houd je een bestand over dat slechts 1/4 van de originele bestandsgrootte is. Bij tekeningen kun je ook het aantal kleuren verminderen. Hier staan een paar voorbeelden:

Afmetingen 310 x 304
Aantal kleuren: 238
69 Kb

Afmetingen 207 x 203
Aantal kleuren: 238
34 Kb 		Afmetingen 207 x 203
Aantal kleuren: 48
19 Kb

Het bovenste plaatje heb ik ergens van het Net gehaald. Door deze met CorelDraw 8.0 te bewerken kreeg ik de onderste twee.
Toegegeven, de eerste spreekt meer aan omdat hij groter is en een betere beeldkwaliteit heeft dan de andere twee, maar vergeet niet... als het een eeuwigheid duurt om je pagina's te laden zullen bezoekers van je homepage waarschijnlijk verdwijnen en zullen ze helemaal niets zien.

Een leuke optie voor diegenen die veel afbeeldingen op hun homepage willen zetten is het plaatsen van kleine thumbnails die gelinkt worden naar een grotere versie van de afbeelding. Laten we aannemen dat ik op mijn homepage wil pronken met mijn auto's J .


Klik op de thumbnail om de grote foto te zien.

Het eerste dat je moet doen is je foto-editor starten en kleinere versies van je foto's maken. Je zou dan direct het aantal kleuren kunnen reduceren. Dit deel over het kleiner maken van je foto's is heel belangrijk. Ik heb voorbeelden gezien van documenten waarin de thumbnails werden gemaakt door simpelweg de afmetingen te reduceren in de <IMG> tag. Het enige dat je dan bereikt is dat de hele foto wordt geladen maar dan op een kleinere ruimte (voordeel is dan wel dat de grote foto bij aanklikken van de link niet opnieuw geladen hoeft te worden maar onmiddellijk op je scherm staat). Wat je dus moet doen is een kleinere kopie van de grote foto maken en die kopie als een link naar de grote foto gebruiken. We gaan er eens een proberen. Ik denk dat we de Lamborghini maar gaan gebruiken (de meest linkse foto, voor degenen die dat niet weten). Zet de foto en de verkleinde kopie in je werkdirectory. Begin met een <IMG> tag.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car2a.gif" WIDTH=87 HEIGHT=60>
</BODY>

Voeg de <A> tags toe.

<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car2a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>

Voeg de URL toe en ...voila!

<BODY BGCOLOR="#FFFFFF">
<A HREF="car2.jpg"><IMG SRC="car2a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>

Als je wilt kun je het blauwe kader weghalen hoewel je het misschien wilt laten staan om aan de lezers duidelijk te maken dat het om een link gaat. Je kunt zelf beslissen.

<BODY BGCOLOR="#FFFFFF">
<A HREF="car2.jpg"><IMG SRC="car2a.gif" WIDTH=87 HEIGHT=60 BORDER=0></A>
</BODY>

Een andere manier om te linken is het linken naar een specifieke plaats in een document, in plaats van gewoon naar een document. Klik hier om op miraculeuze wijze verplaatst te worden naar de regel waarin we voor het eerst over URL's gepraat hebben. Ik zal het aan de hand van een voorbeeld uitleggen. Als eerste zoek je de plaats waar je naar toe verplaatst wilt worden. Kies een woord en zet er een setje <A> tags omheen.

<A>Voeg</A> de URL toe en klaar is Kees!

Het woord "Voeg" is nu een "anchor" geworden.

Vervolgens geef je dat punt een naam (NAME).

<A NAME="omhoog">Voeg</A> de URL toe en klaar is Kees!

Wat je nu hebt gedaan is het punt markeren. Nu kun je er een link naar toe maken.

Begin nu met de link op te bouwen.

Klik <A>hier</A> om op miraculeuze wijze...

Maak een verwijzing naar het document waar je naar toe wilt...

Klik <A HREF="les04.html">hier</A> om op miraculeuze wijze...

Tenslotte voeg je de verwijsnaam (anchor NAME) als volgt toe...

Klik <A HREF="les04.html#omhoog">hier</A> om op miraculeuze wijze...

Natuurlijk kun je ook naar een bepaalde plaats in een ander document springen. Pas gewoon de bestandsnaam aan en zorg dat je je de juiste naam van het anchor opgeeft.

 

Introductie Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Index