Maak je eigen Homepage!
Les 4

Linke soep?

Een homepage is natuurlijk niet compleet zonder 'links' (verbindingen) naar andere Internetpagina's. Sterker nog: surfen op het Internet is niets anders dan van link naar link springen.
Het maken van een link is zo simpel als wat. We gaan een link maken naar Yahoo.
Begin hiermee...

<BODY>
Ga naar Yahoo!
</BODY>

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

<BODY>
Ga naar <A>Yahoo!</A>
</BODY>

 

Ga naar Yahoo!
Voeg de URL toe en klaar is Kees! (URL staat voor Universal Resource Locator). Een URL is niets meer of minder dan een Internetadres.

<BODY>
Ga naar <A HREF="http://www.yahoo.com/" >Yahoo!</A>
</BODY>

 

Stuur me mail!
Een e-mail link werkt op dezelfde manier. We gebruiken gewoon een e-mail adres in plaats van een Internetadres.

<BODY>
Stuur me <A HREF="mailto: mijnnaam@provider.nl">mail!</A>
</BODY>

Zoals je ziet is een link altijd blauw en onderstreept. Een link die al bezocht is, is paars en onderstreept. Deze kleuren kun je veranderen. Daarvoor zet je in de body-tag het volgende:
<BODY LINK="green" ALINK="gold">
De links worden nu groen en de bezochte links goudkleurig!

Een afbeelding als link
 

Ga naar
We kunnen van een afbeelding ook een link maken. Gebruik het Ga naar Yahoo voorbeeld dat we hierboven gemaakt hebben. We vervangen het woord Yahoo door een <IMG> tag...

<BODY>
Ga naar <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
</BODY>

 

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

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

De 'grootte' van een afbeelding

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 wordt je een bestand over het algemeen alveel kleiner. Bij tekeningen kun je ook het aantal kleuren verminderen. Hier staan een paar voorbeelden:

Afmetingen 350 X 340
90 Kb 		Afmetingen 175 X 170
34 Kb 		Afmetingen 175 X 170
13 Kb

Het meest linkse plaatje heb ik van het Internet gehaald. Het is een foto van Willem-Alexander en Maxima. Door deze met Photoshop te bewerken kreeg ik de rechtse 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. Zo zal de meest rechtse afbeelding 7 keer zo snel geladen zijn als de meest linkse!

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.


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. Bijvoorbeeld:
De meest linkse thumnail is een plaatje car1a.gif dat 4,16 KB groot is. Het plaatje dat je te zien krijgt als je op de thumbnail klikt is car1.jpg. Dit plaatje is 54 kB groot. Dat is ongeveer 13 keer zo groot!
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 het zelf ook maar eens proberen. Ik denk dat we de Lamborghini Diablo maar gaan gebruiken (de meest linkse foto, voor degenen die dat niet weten). Zet de kleine foto in je werkmap en noem hem car1a.gif
Zet ook de bijhorende grote foto in je werkmap en noem hem car1.jpg
Begin met een <IMG> tag.

 

<BODY>
<IMG SRC="car1a.gif" WIDTH=100 HEIGHT=39>
</BODY>

Voeg de <A> tags toe.

<BODY>
<A><IMG SRC="car1a.gif" WIDTH=100 HEIGHT=39></A>
</BODY>

Voeg de URL toe en ...voila!

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=100 HEIGHT=39></A>
</BODY>

Een link naar een andere plaats

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 maken we een plaats in je document waar je heen wilt springen.
Zet het woord 'Voorbeeld' onder op je pagina (maar nog wel tussen de body tags). Zet er vervolgens een paar anchor tags omheen:

<BODY>
....
....
....
<A> Voorbeeld</A>
</BODY>

Vervolgens geef je dat punt een naam (NAME):

<BODY>
....
....
....
<A NAME="hierheen">Voorbeeld</A>
</BODY>

Wat je nu hebt gedaan is het punt markeren waar je heen kunt springen. We gaan nu een punt maken waar vandaan we gaan springen. We maken daarvoor een nieuwe pagina. Kies in je kladblok bij Bestand voor de optie Nieuw.
Typ vervolgens de volgende regels:

<HTML>
<HEAD>
<TITLE>Dit is mijn tweede pagina!</TITLE>
</HEAD>
<BODY>
Klik hier en op miraculeuze wijze ....
</BODY>
</HTML>

Sla vervolgens de pagina op als page2.html. Vergeet niet het type op Alle bestanden te zetten!
Begin nu met de link op te bouwen:

<BODY>
Klik <A> hier</A> en op miraculeuze wijze ....
</BODY>

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

<BODY>
Klik <A HREF="page1.html">hier</A> en op miraculeuze wijze ....
</BODY>

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

Klik <A HREF="page1.html#hierheen">hier</A> en op miraculeuze wijze...

Sla je pagina nog een keer op. Open page2.html in de browser en klik op de link 'hier'. Verbazingwekkend, hè?
Een kind kan de was doen!

Einde les 4

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