Länka bild och text i hemsida med hjälp av html-kod.

Det finns koder som gör det lätt att länka bild eller text till annan hemsida. Det finns också möjlighet att länka till en e-posstadress.

<a href=> använder du när du vill länka text eller bild.
</a> är avslutningskoden.
<a href=mailto:> används för att göra en e-postadress till en länk.
</a> är även här avslutningskoden.

Tillverka nu en mall med de koder som behövs för att länka en bild, text eller e-postadress.
I mallen finns alla tre alternativen med. Du tar lätt bort det eller de alternativ du inte behöver när du tillverkar din hemsida.

Ta fram "Anteckningar" och spara som... lankamall.html    Spara filen i din hemsidemapp! Nu kan du "kopiera" avsnittet med koderna som finns här nedan och "klistra in" i "Anteckningar" (lankamall.html):

<html>
<head>
<title> </title>
</head>
<body>
<center>
<h2>
 
</h2>
</center>
<font size="4">
<a href= > </a>
<a href= ><img width="" height="" src=""></a>
<a href=mailto: > </a>
</font>
</body>
</html>

Spara!
Skrivskydda mallen!

Du kan öva dig genom att göra 3 olika sidor med länkar.

Börja med att göra en "textlänk".

1/Kopiera källkoden till lankamall.html och klistra in den i ett nytt fönster i "Anteckningar". Spara som...textlank.html (Obs! Hemsidan kan inte heta textlänk.html eftersom det inte får finnas ä i hemsideadressen.)

Skriv in på lämpligt ställe:
Titel: Text som länk till annan hemsida
Rubrik: Text som länk till annan hemsida
<a href=(valfri länkadress till hemsida)>(Hemsidans namn)</a>
Brödtext: Här väljer jag att lägga in länken i löpande text. Då jag är intresserad av hur man arbetar med bilder i Paint gör jag en länk till <a href=http://ydrebo.se/kurser/kurs/kurs1.html>Bildkursen</a>.

Kommentar: Det finns flera möjligheter då man väljer text till länken. Det man bör tänka på är att det första den ser som är inne på en hemsida för att söka information är troligtvis länkarna. Då bör länken verkligen vara intresseväckande. Det utesluter ordet "här"! Länk i löpande text fungerar bra om man väljer "spännande" ord!

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

Här gör du en bild till länk.

2/Kopiera källkoden till lankamall.html och klistra in den i ett nytt fönster i "Anteckningar".. Spara som...bildlank.html

Skriv in på lämpligt ställe:

Titel: Bilden är en länk
Rubrik: Bilden är en länk.

<a href=http://www.napema.se/kalender/humla.htm><img width="100" height="88" src="humla.gif"></a>

Brödtext: Bilden på humlan är nu en länk till en sida där det finns mer information om humlor.

Kommentar: När du ska skriva in en lång hemsideadress är det lätt att det blir fel. Enklast är att "kopiera" adressen och sedan "klistra in" på lämpligt ställe.

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

Kommentar: Som du ser finns det är ram runt bilden av humlan. Ramen talar om att bilden är en länk. Ofta händer det att det blir "snyggare" om inte ramen syns. Då får man göra besökare uppmärksam på att det trots allt är en länk.
För att bli av med den synliga "länkramen" finns denna kod: <border="0">. Om siffervärdet är "0" syns inte ramen. Ett högre siffervärde gör "länkramen" bredare.

Arbeta vidare på lanka2.html

Lägg in bilden utan länkram:

<a href=http://www.napema.se/kalender/humla.htm><img width="100" height="88" border="0" src="humla.gif"></a>

Enklast gör du det genom att kopiera hela ovanstående rad och klistrar in den i "anteckningar" (bildlank.html)

Lägg in bilden med bred länkram.

<a href=http://www.napema.se/kalender/humla.htm><img width="100" height="88" border="3" src="humla.gif"></a>

(Lägg märke till att siffervärdet i "border" är ändrat.)

Spara. Minimera. Kolla nu resultatet! Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

Ta bort onödiga koder. Markera dem och tryck "Delete". Spara.

Brödtext: Skriv valfri text, gärna några rader. Lägg in <br> eller <p> på lämpliga ställen.

Här gör du en länk till en e-postadress.

3/Kopiera källkoden till lankamall.html och klistra in den i ett nytt fönster i "Anteckningar".. Spara som...e-postlank.html Skriv in på lämpligt ställe:
Titel: Länk till e-post
Rubrik: Länk till e-post
Brödtext: Skriv gärna ett e-postbrev till <a href=mailto:brunte@stallet.se>Brunte</a>
I nästa exempel skriver du "snabela" i stället för @. Innan brevet skickas måste avsändaren ersätta "snabela" med @.
Felaktigt adresserat brev till <a href=mailto:bruntesnabelastallet.se>Brunte</a>
E-postadressen ser alltså ut så här: bruntesnabelastallet.se men ska se ut så här: brunte@stallet.se
E-postadressen lägger jag in dold i källkoden. Den syns inte på hemsidan. Men då jag klickar på länken dyker det upp ett färdigt adresserat e-postbrev. Det är bara att börja skriva.

Kommentar: Man slipper en del skräppost om man inte visar sin e-postadress öppet. Vill man vara helt på den säkra sidan skriver man ut ordet "snabela" i stället för @. Men då gäller det att den som ska skicka brevet upptäcker det och ändrar innan brevet skickas. Annars kommer bara ett felmeddelande i inkorgen och så får NN fundera på varför det inte fungerade.

Spara. Minimera. Kolla nu resultatet! Du la väl in <br> eller <p> på lämpliga ställen? Om det smög sig in ett fel får du ta fram sidan i "Anteckningar" igen och rätta. Spara. Kolla igen!

Här ser du hur det kan se ut i färdigt skick:

Första sidan blev så här:

Text som länk till annan hemsida

Nyköpings Seniorsurfare

Här väljer jag att lägga in länken i löpnade text. Då jag är intresserad av hur man arbetar med bilder i Paint gör jag en länk till Bildkursen.

Andra sidan blev så här:

Bilden är en länk

Humlan är en av våra trevligaste och nyttigaste insekter.

På våren kommer de stora drottningarna som övervintrat och brummar kring blommorna.

Så småningom kommer årets små arbetare och blir fler och fler.
Flitigt flyger de från blomma till blomma och samlar honung och pollen.

Tredje sidan blev så här:

Länk till e-post

Skriv gärna ett e-postbrev till Brunte
I nästa exempel skriver du "snabela" i stället för @. Innan brevet skickas måste avsändaren ersätta "snabela" med @.
Felaktigt adresserat brev till Brunte
E-postadressen ser alltså ut så här: bruntesnabelastallet.se men ska se ut så här: brunte@stallet.se
E-postadressen lägger jag dold i källkoden. Den syns inte på hemsidan. Men då jag klickar på länken dyker det upp ett färdigt adresserat e-postbrev. Det är bara att börja skriva.

Till nästa avsnitt     Till kursens början

Barbros trädgård