HTML5 tutorial 4 – Links og billeder

I dette afsnit af min HTML5 tutorial vil du lære hvordan du indsætter links og billeder på en HTML side.

Links

En hjemmeside ville næppe være noget værd uden links. Links er tekst en bruger kan klikke på og derved komme hen til en anden side. Den anden side kan være en side på din hjemmeside eller det kan være en side på en helt anden hjemmeside. Men det er links der binder internettets hjemmesider sammen.
Tagget for et link hedder <a> hvilket står for “anchor”, der er et andet ord for link. Det er et tag der både indeholder et start- og et stoptag og der anvendes også attributter. Et typisk link-tag ser således ud:

<a href="https://www.it-blogger.dk">Hjemmeside</a>

Denne kode ville give følgende resultat:
Hjemmeside
Som du kan se er selve teksten der vises i forbindelse med linket det du skriver mellem de to tags. Destinationen for linket skriver du på en attribut for tagget der hedder href=””.
Du kan vælge både at skrive hele URL-adressen, dvs. med http://. Men hvis det er en html-side der ligger i samme mappe som den side linket findes i, kan du også skrive den relative sti. Hvis f.eks. den anden html-side hedder Side2.html kan du skrive:

<a href="Side2.html">Se side 2</a>

Hvis nu side 2 ligger i en undermappe, der hedder “undermappe” kan du også angive den relative sti således:

<a href="undermappe/Side2.html">Se side 2</a>

Hvis side2 ligger i en mappe der ligger et niveau over den mappe hvor html-siden findes, kan du skrive ../ for at gå et niveau op.

<a href="../Side2.html">Se side 2</a>

Du kan altså for sider på din egen hjemmeside vælge at angive enten en absolut sti (hele URL adressen) eller den relative sti (i forhold til siden hvor linket findes) – mens du for andre hjemmesider kun kan angive den absolutte sti.
Du kan også angive en attribut der hedder title=””. Heri kan du skrive en tekst, som vil blive vist hvis du peger på linket.

<a href="Side2.html" title="Tryk for at gå til side 2">Side 2</a>

Bogmærker

Links til afsnit på samme side hedder bogmærker. Det kan f.eks. være en indholdsfortegnelse, hvor hvert punkt peger ned på en overskrift. For at kunne dette, skal du angive et id på hver overskrift-tag. For eksempel:

<h1 id="overskrift1">Her er overskrift 1</h1>

Herefter kan du så linke til disse overskrifter ved at skrive # foran id’et du har valgt.

<a href="#overskrift1">Link til overskrift 1</a>

Link til e-mailadresser

Du kan også linke til e-mailadresser. Dette gør du ved at skrive mailto: foran. Så åbner browseren automatisk standard-mailprogrammet, hvis et sådan er installeret, og starter en ny mail til den e-mail.
<a href=”mailto:test@test.dk”>Skriv mail</a>

Billeder

For at indsætte et billede, skal du bruge tagget <img>. Kilden til billedet ligger i en attribut der hedder src=””. For eksempel:

<img src="image.png" />

Bemærk at dette er et tag, der ikke skal have et stop tag. Igen kan du under src-attributten angive både den relative og absolutte sti til hvor billedet er placeret.
Du kan også sætte en ramme omkring billedet med attributten border=”” og angive en tekst i alt-attributten som vises, hvis billedet ikke kan vises i browseren.

<img src="image.png" border="1" alt="Her er en tekst" />

Du kan også angive bredden eller højden af billedet med width=”” og height=””.

<img src="image.png" border="1" alt="Her er en tekst" width="150" height="100" />

Enheden for både border og højde/bredde af billeder er pixels (px). Det letteste er nok at prøve sig frem.

Billede som link

Du kan såmænd også lave et billede om til et link, ved at kombinere a-tagget med img-tagget.

<a href="side2.html"><img src="image.png"></a>

Det var lidt om links og billeder. I næste afsnit vil vi kigge nærmere på hvordan du laver tabeller i html.