Skapa Länkar

1. Länka bilder

Länkar kan vara av olika slag. Det gemensamma för dem är att de leder läsarna någon annanstans, antingen till en annan av dina sidor, eller till en helt annan webbplats och server. De kallas för interna- respektive externa länkar.

Länkar kan bestå av text eller av bilder. Med HTML-koden <img src="huset.gif" width="300" height="200" border="0" alt="Huset"> har vi lagt in bilden på sidan, men vi vill nu skapa en länk av den. Genom att göra bilden "klickbar", skall vi komma till en annan sida vi skapat (intern länk) och till en annan webbplats (extern länk).

HTML-koden för en intern länk via en bild:

<a href="hosmig.html"><img src="huset.gif" width="300" height="200" border="0" alt="Huset"></a>

HTML-koden för en extern länk via en bild:

<a href="http://www.macromedia.com"><img src="diskett.gif" width="14" height="14" border="0" alt="Diskett"></a>

<a> gör bilden "het" (eller "klickbar") och denna kod måste avslutas </a>. "hosmig.html" (en annan sida som jag har skapat) och "http://www.macromedia.com" är dit jag vill att läsarna skall komma när de klickar på bilden. Vid interna länkar är det viktigt med ange rätt plats där filen är placerad. Finns filen "hosmig.html" i mappen "hemma", som är en annan mapp än den länken finns på, måste jag ange det genom "hemma/hosmig.html"

Genom att ange border="0" talar jag om att jag inte vill ha en linje runt bilden, något som jag annars får och ser i det här fallet oftast fult ut.

2. Länka text

Så här gör vi när vi länkar en text:

HTML-koden för intern text-länk:

<a href="hosmig.html">Om mig!</a>

HTML-koden för extern text-länk:

<a href="http://www.macromedia.com">Ladda ner nya Dreamweaver här!</a>

"Om mig!" och "Ladda ner nya Dreamweaver här", blir automatiskt understrukna aktiva länkar på sidan. Istället för att ange en bild, skrev vi in lite text.

Länkar kan vi också skapa inne i olika meningar, genom att omsluta valt ord med HTML koden. Exempel: "Jag skulle också vilja passa på att ge er ett litet tips: <a href="http://www.macromedia.com">Ladda ner nya Dreamweaver här!</a> Det programmet kan vara bra att ha".

3. Länka till avsnitt inom sida (ankare)

Om vi skriver något längre avsnitt som vi tänker lägga ut på Internet, kan det ibland vara en fördel att i innehållsförteckning kunna länka till ett speciellt avsnitt eller t.o.m till ett speciellt ord. När vi klickar på kapitel 3, hoppar automatiskt detta textavsnitt fram.

Detta fenomen kan åstadkommas genom att, i det här fallet ange HTML koden: <a href="sidansnamn.html#Lektion3">Lektion 3</a>. "Sidansnamn.html" är denna sidans namn. "#Lektion3" är målet för länken. Men vi måste också skriva HTML koden <a name="Lektion3"> vid det avsnittet vi skall komma till genom länken. Denna senare kod behöver inte avslutas, men gör det helst ändå.

Jag har använt ankare. Om du högerklickar på sidan och väljer "Visa källa", så finner du denna teknik i tillämpning.

4. Sända E-mail från sidan

Ofta vill vi att våra besökare skall kunna sända E-mail till oss, direkt ifrån sidan. Då kan vi koda så här: <a href="mailto:xxx@xxx.se">Skriv till mig!</a>. Efter mailto skriver vi den adress som vi har. Ordet "Skriv till mig!" markeras som klickbar och när vi klickar, öppnas automatiskt E-post programmet.

5. Ge länkarna önskad färg

När det gäller textlänkar kan vi ange dem på följande sätt: link, alink och vlink samt valfri färg, exempelvis ="#0000ff", när vi skall ange deras egenskaper. Dessa koder läggs in i body och det kan se ut så här: <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#ff0000">.

Med link menar vi att länken är obesökt och med en färgkod anger vi färgen på våra länkar. När jag tycker ner musknappen på länken, aktiveras funktionen alink. När jag släppt upp musknappen igen, blir länken besökt och aktiverar funktionen vlink. Anger vi inga färger för dessa länkar, anger datorns standardinställning dem istället och det är inte alltid så bra.

6. Exempel på kod med länkar

Nu använder jag ovanstående attribut i koden:

<html> <head> <title>Länkar</title> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#ff0000"> <a href="http://www.handels.gu.se"><img src="Handels.jpg" width="207" height="167" border="1" alt="Handelshögskolan"></a> För muspekaren över bilden och klicka Klicka <a href="http://www.macromedia.com">här</a> för att ladda ner nya Dreamweaver! Du är välkommen att maila till <a href="mailto:xxx@xxx.se">mig</a> </body> </html>





kontakt	© Stefan Dahlén	Tisdag 7:e oktober 2008