Blogg

Länkar

Att använda länkar på hemsidor är såklart en självklarhet, nu ska vi gå igenom hur enkelt det är att skapa länkar så du kan ha undersidor på din webbsida.

Vi börjar med den grundläggande koden:

<a href=”index.html” title=”Detta är index.html”>Index</a>

När man klickar på denna länk hamnar man på “index.html” och när man håller musen över länken kommer en ruta med texten “Detta är index.html”. Title attributet är inget krav men är bra att skriva en beskrivande text på länken med hjälp av Title för sökmotorerna. Den text som är klickbar är texten ”Index”.

Om man vill länka till en extern sida t.ex. google.com, måste man skriva ”http://” innan länken, så här:

<a href=”http://www.google.se” title=”En sökmotor”>Google</a>

För att länken ska öppnas i ett nytt fönster använder vi oss av target=”_blank”, att tänka på är att target=”_blank” inte är ett validerat argument i XHTML 1.0 Strict.

<a href=”http://www.google.se” title=”En sökmotor” target="_blank">Google</a>

Länkar med CSS

Som standard kommer länken presenteras såhär:

• En obesökt länk är blå och understruken
• En besökt länk är lila och understruken
• En aktiv länk är röd och understruken

Detta kanske inte är så passande om man har gjort en design i helt andra färger, så då vänder man sig till CSS och ändrar utseendet på dom.

a {
    color: #53b100;
    text-decoration: none;
}

a:hover { 
    color: #c5ff92;
text-decoration: none;
}

a:active { 
    color: #000000;
    text-decoration: underline;
}

Med denna CSS kod har länkarna helt andra färger:

• En obesökt länk är moss-grön och inte understruken
• En besökt länk är ljusgrön och inte understruken
• En aktiv länk är svart och understruken

Om du vill ändra mer på länkarnas utseende ta en titt på Ge dina texter stil.

Föregående: Ge dina Texter stil

Kategori: XHTML-CSS     3 Kommentarer