I den här artikeln jobbar vi vidare med vår webbsida och provara att skapa några länkar.

Skapa länkar

Nu är det dags att skapa några länkar. Ta bort den gamla texten i div-behållaren sidhud och skriv istället in följande:

Länk 1
Länk 2
Länk 3

Som du vet sedan tidigare så måste det till lite övrig XHTML-kod för att skapa en länk och därför kompletterar vi med detta:

<a href="#">Länk 1</a>
<a href="#">Länk 2</a>
<a href="#">Länk 3</a>

Ersätt # med URL till de sajter eller sidor som du önskar länka till - just nu länkar de inte till någonting speciellt.

En repetition av länkar hittas här.

Formatera länkarna med CSS

En länk representeras av taggen a, alltså blir det div#sidhuvud a som fungerar som selektor i CSS-filen.

Padding

Skriv alltså in följande kod på en ny rad i din CSS-fil:

div#sidhuvud a {
padding-right: 20px;
}

Som du märker så gör den högra paddingen att länkarna separeras från varandra med 20 pixlar och de blir enklare att läsa.

Color och text-decoration

Länkfärg kan enkelt ändras. Addera exempelvis följande kod för att få en mörk ganska röd färg:

div#sidhuvud a {
padding-right: 20px;
color: #990000;
}

Om du inte vill att länken ska vara understruken så kan du lägga till:

div#sidhuvud a {
padding-right: 20px;
color: #990000;
text-decoration:none;
}

Det vanligaste är att använda text-decoration:underline;

Subclass

Med subclasses kan du bestämma hur länken ska bete sig om man exempelvis hovrar över den eller vilken färg den ska visas med om den redan besökts.

Lägg till följande text för att göra så att länkarna blir underline samt gröna när man hovrar med muspekaren och att besökta länkar visas i orange text.
Ursäkta färgvalet - det är inte meningen att det ska bli snyggt utan förklarande ;).

Lägg till dessa CSS-subclasses:

div#sidhuvud a:hover {
text-decoration: underline;
color: green;}

div#sidhuvud a:visited {
color: orange;}

Slutresultat

Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)