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:
Text som länk till annan hemsidaHä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.
Tredje sidan blev så här:
Länk till e-postI 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.
|