Bilder och länkar

I denna lektionen går vi igenom hur man visar bilder och hur man länkar till andra sidor på sin hemsida. För att göra detta måste man veta hur sökvägar fungerar, så vi går även igenom vad absoluta och relativa sökvägar är.

När man ska visa en bild eller länka till en annan hemsida måste man veta vad sökvägen till filen (bilden eller hemsidan) är. Sökvägen kan vara antingen absolut eller relativ, och vi ska nu gå igenom skillnaden mellan dessa två.

Absoluta sökvägar

Absoluta sökvägar beskriver den exakta sökvägen till filen, och det är den man använder då man länkar till en fil som inte finns på ens egna hemsida, utan på en annans. Ta till exempel bilden nedan, som finns på vår hemsida.

En stjärna.

Högerklicka på den och välj "Egenskaper", "Visa bildinfo" eller något annat alternativ i menyn som kommer upp och som visar information om bilden. Den absoluta sökvägen till bilden brukar stå vid texten "Adress" eller något liknande, men det brukar variera från webbläsare till webbläsare. Den absoluta sökvägen till just denna bilden är alltså http://www.webbguider.se/images/star.png.

Den absoluta sökvägen till den fil som visas i webbläsaren syns alltid i adressfältet högst upp i webbläsaren.

Relativa sökvägar

Relativa sökvägar beskriver sökvägen till filen utifrån mappen man är i, och dem brukar man använda för att länka till filer som ligger på ens egna hemsida. När man skapar en hemsida brukar man ha alla HTML-filer som hör till den samlade i en och samma mapp, och för att länka från den ena sidan till den andra använder man alltså relativa sökvägar.

Om filen man länkar till ligger i samma mapp som den aktuella sidan behöver man bara ange filnamnet som sökväg.

Om filen man länkar till ligger i en undermapp i mappen den aktuella filen ligger i behöver man ange undermappensNamn/filnamnet som sökväg.

Om man vill åstadkomma det omvända, det vill säga om man är i undermappen och vill länka till en fil som ligger i mappen som undermappen ligger i, anger man ../filnamnet som sökväg. ../ i början kan i talspråk översättas till "Gå upp ett steg".

Ta en titt på på Mapp- och filträdet nedan. I huvudmappen finns två HTML-filer och två undermappar med några HTML-filer i sig.

Kod - Mapp- och filträd
Huvudmapp +--------sida1.html +--------sida2.html +--------Undermapp1 +---------sida3.html +---------sida4.html +--------Undermapp2 +---------sida5.html

Om vi är i filen sida1.html och vill länka till filen sida2.html blir den relativa sökvägen sida2.html (vi behöver bara skriva i filnamnet på filen vi vill länka till eftersom de båda filerna ligger i samma mapp).

Om vi är i filen sida1.html och vill länka till filen sida3.html blir den relativa sökvägen Undermapp1/sida3.html (förutom filnamnet måste vi ange att filen vi vill länka till ligger i undermappen "Undermapp1").

Om vi är i filen sida3.html och vill länka till filen sida4.html blir den relativa sökvägen sida4.html (vi behöver bara skriva i filnamnet på filen vi vill länka till eftersom de båda filerna ligger i samma mapp).

Om vi är i filen sida3.html och vill länka till filen sida1.html blir den relativa sökvägen ../sida1.html ("../" i början anger att filen ligger i mappen som denna mappen ligger i).

Om vi är i filen sida3.html och vill länka till filen sida5.html blir den relativa sökvägen ../Undermapp2/sida1.html ("../" i början anger att vi ska gå upp en mapp, och sedan finns filen i undermappen "Undermapp2").

Att arbeta med relativa sökvägar kan vara knepigt i början, men det är något man måste kunna om man ska hålla på med hemsidor. Som nybörjare är det dock vanligt att alla ens HTML-filer ligger i samma mapp, och då behöver man alltså bara ange filens namn som sökväg.

Bilder

För att visa en bild på sin hemsida använder man taggen <img>. Img står för image, som betyder bild. Attributet src (står för source, betyder källa) beskriver sökvägen till bilden. Man måste även ange attributet alt, som visar en text ifall bilden inte kan visas. Denna taggen stängs inte.

HTML - HyperText Markup Language
<!-- En bild som finns --> <img alt="En stjärna." src="http://www.webbguider.se/images/star.png"><br> <!-- En bild som inte finns (för att visa hur alt-attributet fungerar) --> <img alt="Denna bilden finns inte." src="enBildSomInteFinns.jpeg">
En stjärna.
Denna bilden finns inte.

Länkar

För att länka till en sida använder man taggen <a>. Attributet href anger sidan besökaren ska komma till då denne trycker på länken, och texten mellan starttaggen och sluttaggen blir länken besökaren kan trycka på.

HTML - HyperText Markup Language
<p>Tryck på <a href="http://webbguider.se/index.php">länken</a> för att komma till vår startsida.</p>

Tryck på länken för att komma till vår startsida.

Exempel med relativa sökvägar

Vi ska nu visa hur man gör för att använda relativa sökvägar. Vanligtvis har man en mapp för varje hemsida man jobbar med, så skapa en ny mapp på skrivbordet som heter Hemsida. I denna mappen sparar du två HTML-filer med följande innehåll och namn (om du behöver hjälp med hur man skapar en HTML-fil kan du kolla in guiden Hur man skapar en hemsida):

HTML - sida1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sida 1</title> </head> <body> <h1>Sida 1</h1> <p>Detta är sida 1!</p> <p>Tryck på <a href="sida2.html">länken</a> för att komma till sida 2.</p> </body> </html>
HTML - sida2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sida 2</title> </head> <body> <h1>Sida 2</h1> <p>Detta är sida 2!</p> <p>Tryck <a href="sida1.html">här</a> för att komma till sida 1.</p> </body> </html>

Om man öppnar filen sida1.html med webbläsaren kommer den att visa följande:

Sida 1

Detta är sida 1!

Tryck på länken för att komma till sida 2.

Då man trycker på länken kommer webbläsaren öppna filen sida2.html och visa följande:

Sida 2

Detta är sida 2!

Tryck här för att komma till sida 1.

Trycker du på länken på denna sidan kommer du tillbaka till sida1.html.

Du kan själv öppna enbart dessa filer i din webbläsare genom att trycka på deras filnamn i deras respektive kodruta ovan (dock kommer troligtvis å, ä, ö, Å, Ä och Ö visas felaktigt).

För att du inte ska få för mycket att hålla reda på som nybörjare råder vi dig att döpa dina filer till namn som enbart består av tecknen a-z, 0-9 och _. Vissa specialtecken (som till exempel mellanslag och våra å, ä och ö) ska egentligen skrivas på ett annat sätt då man anger dem som sökväg, men om du bara använder dig av a-z, 0-9 och _ behöver du inte oroa dig för det.

Gå till nästa lektion, Formulär.