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.
Tillverka nu en mall med de koder som behövs för att länka en bild, text eller e-postadress.
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>
Spara!
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:
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
<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.
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:
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:
</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.
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.
<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>
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".
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>.
Rubrik: Bilden ä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.
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.
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:
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: