English  
 

htmlcursus

Overzicht

Geschiedenis

HTML

Alinea's

Teksten

(Hyper)Links

Tabellen

Afbeeldingen

Lijsten

Formulieren

Frames

Imagemap

Hexdecimale kleuren

Character-overzicht

Publicatie

Ons adres

Slot Assumburgpad 40
3123 RR Schiedam
Tel: 010 - 7373737
Fax: 010 - 7373733


Klantenlogin

Loginnaam:
Wachtwoord:

htmlcursus

(Hyper)Links

Het leuke van zo'n internet-pagina is dat er links in een pagina opgenomen kunnen worden. Dat is eigenlijk ook het mooie en sterkte van internet. Eigenlijk hangt het aan elkaar van links. Zo kunt u van de ene naar de andere pagina 'surfen'. Dit kunnen wij ook maken. Uiteraard gaan we dat weer met labels doen.

<A> </A>

Voila, hier hebben wij het anker-label. Maar we hebben meer nodig. U zult moeten opgeven waar de link naar toe moet leiden en wat de link moet zijn. Daarom breiden wij het attribuut uit met HREF="web-adres". Het adres schrijven we tussen aanhalingstekens. Tussen het begin- en eindlabel nemen we een stukje tekst op dat op het scherm verschijnt in een andere kleur. Als iemand op deze link zou klikken zal er een andere pagina worden geladen.

<A HREF> </A>

<A HREF="http://www.cyberdots.nl">Cyberdots</A> De naam 'Cuberdots' zal op het scherm een andere kleur krijgen en is onderstreept. Het is dus een link geworden. Als hierop wordt geklikt komt u bij Cyberdots. In dit voorbeeld is in het webadres geen pagina-naam opgenomen. Daarom wordt automatisch de pagina 'index.html' geopend. U had ook http://www.cyberdots.nl/index.html kunnen invullen, het resultaat was hetzelfde geweest.

U ziet dat de directory-namen in HTML gescheiden zijn van elkaar door de zogenoemde slashes '/'. Houdt er rekening mee dat op internet de meeste servers werken op unix-systemen. Deze maken onderscheid tussen slashes en backslashes. Maar ook tussen hoofd- en kleine leters.

Absoluut & relatief

U ziet dus dat zo op een eenvoudige manier links opgenomen kunnen worden naar andere pagina's op het internet. Het adres <A HREF="http://www.cyberdots.nl"> is een absoluut adres. Het vermeldt de exacte lokatie van deze pagina. Maar dat kan ook anders. U kunt ook relatieve adresseringen gebruiken. <A HREF="pagina2.html"> Denk bijvoorbeeld aan uw eigen site. Als de volgende pagina van uw site in dezelfde directory staat, dan kunt u dit relatief opgeven in de anker-label. Als de browser dit tegenkomt dan zal het systeem er vanuit gaan dat deze pagina in dezelfde directory staat als de huidige.

Link naar een ander gedeelt in dezelfde pagina.

Als u een lange pagina heeft, dan is het handig als de bezoeker kan verspringen in de pagina door middel van links. Hiervan heeft u al een voorbeeld gezien in 'geschiedenis van het internet'. Onze bezoeker hoeft niet de gehele tekst door te ploeteren, maar kan direct naar die gedeelte 'klikken' welke hij/zij wilt.

<A NAME> en <A HREF>

Zoals gezegd gaan we een link maken van het ene gedeelte in de pagina naar een ander. Dus we moeten een label maken die er naar toe springt en een die weet waar dit is.
<A NAME="punt"></A> geeft aan waar het gedeelt zich bevindt waar wij naar toe willen springen. Deze naam mag alles zijn wat u maar wilt. De link hiernaar toe wordt bv. <A HREF="#punt">ga naar punt</A> of <A HREF="pagina2.html#punt">ga naar punt</A>. U merkt al dat hier dezelfde regels gelden als absolute en relatieve links. Let wel even op het '#'-je in de A HREF-label. U kunt zo springen in dezelfde pagina, maar ook naar een gedeelte in een andere pagina. Sluit de label wel altijd af met </A>, ook als er geen tekst tussen de labels staat. Dit komt weleens voor bij A NAME.

Nu nog een email-adres als een link.

Leuk, maar nu willen wij ook onze email-adres als zijnde een link op de pagina hebben. Want wij willen tenslotte wel dat onze bezoekers ons kunnen emailen. En alleen uw email-adres op uw pagina is wel leuk, maar de gebruiker moet er ook op kunnen klikken. Tenslotte hebben de meeste ook een email-programma waarmee men kan emailen. En de meeste browsers starten meteen het email-programma op als men op zo'n link klikt.

Het werkt bijna hetzelfde als een gewone link. U hoeft enkele 'http://' te vervangen in 'mailto:' met uw email-adres erbij. Als adres (en tekst) vullen wij ons email-adres in. Het zou er bijvoorbeeld als volgt uit kunnen zien: <A HREF="mailto:info@cyberdots.nl">Mail mij </A>
(info@cyberdots.nl). Zo ziet degene die niet rechtstreeks vanuit zijn browser post kan of wil verzenden toch ons email-adres.
Het leuke hiervan is dat u hiermee kan combineren. U kunt het onderwerp al meegeven van het mailtje: <A HREF="mailto:info@cyberdots.nl?subject=Informatie">info@cyberdots.nl</A> (info@cyberdots.nl).

Afbeeldingen als link

Een echte surfer weet dat veel (hyper)links niet alleen maar uit tekst bestaat, maar ook uit afbeeldingen kunnen bestaan. Hiervoor worden diverse labels met elkaar 'verbonden' of 'genest'.
Om een afbeelding te tonen nemen wij het volgende label op: <IMG SRC="plaatje.gif>. (Meer details hierover later). Als u hiervan een link wilt maken kun je dit als volgt doen: <A HREF="pagina.html><IMG SRC="plaatje.gif></A>. U komt dan het plaatje tegen waarop u kunt klikken, waardoor u op de opgegeven pagina komt.

Heel logisch in dit verhaal wordt dat de afbeelding wordt getoond met een kader eromheen wat aangeeft dat het een link betreft. Deze kader heeft dezelfde kleur als die u normaal gesproken tegenkomt bij een link. Deze kader heeft standaard de dikte van 3 pixel (beeld-puntjes). Dit kunt u veranderen door BORDER=x te gebruiken in de IMG SRC label. U kunt door BORDER=0 opgeven dat er GEEN kader komt. Zo zal je op het eerst oog het plaatje als een link herkennen.

Afbeeldingen als link

De pagina zal er dan ongeveer zo uit kunnen gaan zien (in bv. Notepad; tik het volgende maar over en bewaar deze als een html dokument en open deze in een browser):

<HTML>
<HEAD>
<TITLE>Onze eigen pagina </TITLE>
</HEAD>

<BODY BGCOLOR=#030303" TEXT="#FFFFFF" LINK="#AA00FF" VLINK="#AA00FF">
<FONT FACE="Verdana, Arial, Helvetica" SIZE="2">

<CENTER><H1>Onze eigen pagina</H1></CENTER>

<HR WIDTH=80%>

<A NAME="boven"></A>
Zoals je ziet is deze tekst <I>cursief.</I><BR>
<B>En deze is dikker.</B><BR>
Maar je kan tekst ook <U>onderstrepen</U> of <STRIKE> doorstrepen </STRIKE><P>

<!-- Knipperen en Scrollen --/>
Er is veel meer mogelijk in HTML:<BR>
<BLINK><MARQUEE>Je kan het ook OF laten scrollen in Explorer OF laten knipperen in netscape.</MARQUEE></BLINK><P>

Je kan zelfs de tekstkleur laten veranderen in <FONT COLOR="red">rood</FONT>, <FONT COLOR="GREEN">groen</FONT> of <FONT COLOR="BLUE">blauw</FONT>!<P>

Het leuke is dat er heel veel mogelijk is. Zo kun je ook tekst iets <SUP>hoger</SUP> of iets <SUB> lager </SUB> zetten. Dat is best makkelijk.

<HR 80%>

<!-- Links maken -->
Het is mogelijk links te maken naar andere pagina's en andere gedeeltes in pagina's. Als je <A HREF="#boven">hier</A> klikt ga je helemaal naar boven.<BR>
En je kan bijvoorbeeld naar de vorige <A HREF="3.html">pagina</A><P>

<CENTER>Je kan ook een Email sturen naar mij: <A HREF="mailto:webdesign@movieunlimited.demon.nl">
webdesign@movieunlimited.demon.nl</A>

</BODY>
</HTML>

Voor een voorbeeld van zo'n pagina (tot nu toe) klikt u hier.

© Cyberdots 1998 - 2005