Länkar & Bilder

Länkar & Bilder

Internet bygger på att man tar sig till den information man vill åt genom att klicka på länkar. Bakom länkar döljer sig en längre webadress, en URL.(Unifurm Resource Locator) Det är browserns sökväg till olika filer på internet. Det finns några olika sorters länkar...
Den första och vanligaste är att man klickar på ett ord eller en textrad. För att göra en sån länk använder man taggen:

<a href=""> text </a>

Webadressen skriver du in mellan citationstecknen, och den text du vill ska synas på din sida skrivs in där det står "text". Så om du vill ha en länk till t.ex. Passagen så kan du skriva så här:

<a href="http://www.passagen.se">En länk till Passagen!</a>

Och resultatet blir...

En länk till Passagen!

Man kan också länka till en specifik plats i samma dokument. Då måste man först ha ett "ankare" på det ställe dit man vill att länken ska gå. Det skrivs så här:

<a name="ett ankarnamn"></a>

Ankarnamnet kan vara precis vilket ord som helst. Sen gör du länken till ankaret så här:

<a href="#ankarnamnet"> text som syns på sidan </a>

Där ankarnamnet måste vara det ord som du skrev in förut.

Oftast har man ju en e-mailadress, och med nästa tagg så länkar du den så att när man klickar på den så kommer det upp ett fönster i browsern där man kan skriva brevet direkt. Pröva själv på min e-mailadress: hoss@hem.passagen.se

<a href="mailto:hoss@hem.passagen.se"> hoss@hem.passagen.se </a>

Bilder. Det är alltid trevligt att ha några bilder på hemsidan. För att lägga in en bild använder du dig av taggen:

<img src="adress till bilden som skall visas">

Adressen kan antingen vara en adress till en bild ute på internet eller till en bild som ligger i samma mapp som html-dokumentet. I det senare fallet kan man skriva så här t.ex.:

<img src="sharkdog.gif">

Då visas min bild på en hund?... Om du vill spara en bild som du ser på internet så klickar du bara på den med högra musknappen och väljer "save image as.."
Taggen <img> är en av de taggar som saknar slutmarkering. Den har istället en mängd "attribut", eller om man hellre vill, "tillägskommandon". Om man vill så kan man ändra storleken på bilden genom att inom <img>-taggen lägga till attributen height="x" och width="x", där storleken x anges i procent eller bildpunkter av hela fönsterbredden:

<img src="se.gif" height="60" width="88">

Och resultatet blir:

Vill du ha text brevid bilden? Ja då lägger du bara till den efter img-taggen. Så här t.ex:

<img src="se.gif" height="60" width="88"> En <b>farlig</b> hund.

Vilket kommer att se ut så här:

En farlig hund.

Om man vill så kan man centrera bilden med taggen <center>. Men man kan också lägga den till höger. Då använder man kommandot:

align=right

Alltså...

<img src="se.gif" height="60" width="88" align=right>

Lägger bilden längst åt höger:

Det finns också en del andra användbara "align-kommandon". Här är några:

align=center
Kan användas istället för taggen <center>.

align=middle
Centrerar bilden i förhållande till textens baslinje.

align=bottom
Gör att bildens nederkant kommer i höjd med textens baslinje.

align=top
Gör att bildens överkant kommer i höjd med textradens högsta bokstav.

Man kan också göra en länk av en bild. Då kan man t.ex skriva så här:

<a href="http://www.passagen.se"><center>
<img src="logo.gif"></center></a>

Du kan själv pröva att det fungerar genom att klicka på bilden nedan. Glöm bara inte att komma tillbaka hit sen...

De som har valt att surfa utan bilder eller har en textbaserad browser ser ju inte bilderna. Då kan det vara bra att lägga in en text "bakom" bilden som då syns istället. Då använder man kommandot:

alt=text

Det skriver man inom <img>-taggen:

<a href="http://www.passagen.se"><center>
<img src="logo.gif" alt=länk till passagen></center></a>

Om du vill ha en ram runt bilden för att visa att det är en länk så lägger du till kommandot:

border=x

Och ju högre talet x är, desto tjockare ram blir det. Här är den 2:

Ibland vill man ha en bild insatt i ett textstycke. Då kan man också ändra bildens avstånd till texten med följande kommandon:

vspace=x
Ändrar det vertikala avståndet till texten.

hspace=x
Ändrar det horisontella avståndet till texten.

Ok, nu är det väl dags att sätta lite färg på hemsida.

Fortsätt till Bakgrunder & färger...