Tillbaka till "Länkar och ankare"  Kunskapstest

Övningsuppgifter - Länkar och ankare

Om du inte redan har gjort en ny sida som jag skrev på föregående sida, gör du det nu. Du behöver den för att kunna pröva dina länkar nedkopplad. Lägg dessutom in ankare i den nya sidan, en länk tillbaka till första sidan (index-sidan) och en eller flera länkar från första sidan till den nya sidan. Skapa länkar från första sidan direkt till dina ankare på den nya sidan.

Här kommer du att göra tre övningar
  • Ändra i stilmallen respektive HTML-koden så att länkarna inte blir understrukna
  • Ange färgen på länkarna direkt i stilmallen respektive i HTML-koden
  • Använda en bild som länk
Ta bort understrykningen på länkarna via stilmallen

Öppna stilmallen i textredigeraren. Någonstans i mallen lägger du till följande avsnitt - förklaringarna kommer efteråt:

/* inga understrukna länkar */
A, A:LINK {
font-family:arial, sans-serif;
font-size:10pt;
text-decoration:none;
color: Blue; 
}
A:VISITED {
font-family:arial, sans-serif;
font-size:10pt;
text-decoration:none;
color: Purple;
}
A:HOVER {
font-family:arial, sans-serif;
font-size:10pt;
text-decoration:none;
color: Fuchsia;
}

I raderna font-family och font-size använder du det teckensnitt och den teckenstorlek som du tycker lämpar sig bäst för din sida. Leta fram avsnittet för P-taggen, så ser du vilka val du har gjort där. 

De tre avsnitten i den här stilmallskoden bestämmer teckensnitt, textstorlek och färg för länkarna. Raden text-decoration:none; gör att länkarna inte blir understrukna.

Det första avsnittet, A, A:LINK, bestämmer utseendet på länkar som ännu inte har besökts - sådana som du alltså inte har klickat på. Det andra, A:VISITED, gäller besökta länkar. Det tredje, A:HOVER, anger vad som skall hända när muspekaren rör vid länken.

En ännu inte besökt länk visas här blå, en besökt länk blir lila och länken man pekar på blir ljust lila (fuchsia). Om de här färgerna syns bra mot din bakgrundsfärg, bör du behålla dem. Men om du använder någon av länkfärgerna i bakgrunden, måste du byta länkfärg. Skulle du ha den ljust lila färgen som bakgrund, "försvinner" länken annars när besökaren pekar på den - den får ju samma färg som bakgrunden.

Spara stilmallen.

Ändra färg i HTML-koden i stället för i stilmallen

Du kan bestämma länkfärgen direkt i HTML-koden i stället. Du lägger då färgvärdena i den inledande BODY-taggen:

<BODY link="blue" vlink="purple" alink="fuchsia">

eller

<BODY link="#0000FF" vlink="#800080" alink="#FF00FF">

Ta bort understrykningen direkt i HTML-koden

Om du inte vill använda stilmallen för att ta bort understrykningen på länkar, kan du lägga koden direkt på HTML-sidan. Följande kodrader läggs då mellan HEAD-taggarna, lämpligen direkt under TITLE:

<STYLE>
A:link, A:visited, A:active {
text-decoration:none;
}
</STYLE>

Bild i stället för text till länken

 Vill du ha en klickbar bild som länk? Gör då så här - eftersom en del besökare har stängt av möjligheten att visa bilder, bör du dock ha en länktext också:

<P>
<A HREF="fisk/fiskar.html">
<IMG BORDER="0" SRC="/bilder/abborre.gif" WIDTH="110" HEIGHT="55" ALIGN="middle" HSPACE="2">Mina fiskar</A>
</P>

På din hemsida kommer detta att se ut så här:

Mina fiskar
Är din index-sida och den nya sidan färdiga?

Har du öppnat den i webbläsaren, kontrollerat att länkarna fungerar, sett till att bilderna sitter rätt och att bildfilerna inte är för stora? Efter Kunskapstestet skall du lägga upp alltsammans på Internet igen. 

Gå gärna tillbaka till Länkar och ankare och läs igenom avsnittet en gång till innan du gör Kunskapstestet.

Tillbaka till "Länkar och ankare"  Kunskapstest

© SupportData.Net