Bilder på hemsidan Använda tabeller

Länkar och ankare

Du kan gå in på praktiskt taget vilken webbsida som helst, och från den leta dig ut över hela Internet. Att du kan göra det beror på att nästan varenda webbsida innehåller en eller flera länkar. Webben blir därför som ett väldigt gatunät utan återvändsgator; vilken väg man än väljer, finns det alltid en möjlighet att fortsätta utan att vända om.

En länk kan leda till en annan webbsida eller till en bestämd plats på den andra sidan. Den kan också leda till en bestämd plats inom den egna webbsidan. Det är med länkar man kopplar till bestämda e-postadresser. En länk av det senare slaget lade du in på din hemsida redan i det allra första avsnittet av övningsuppgifter - Hur börjar jag?

I det här avsnittet kommer du dessutom att lära dig att lägga in en gästbok och en räknare på hemsidan. Även dessa är beroende av länkar.

Fyra modeller av länkningar

Du bör lära dig de här fyra modellerna för att länka:

  • Länka till en annan sida
  • Länka till en bestämd plats på en annan sida
  • Länka till en annan plats på den aktuella sidan
  • Länka till din e-postadress

Alla fyra är mycket användbara. För att du skall kunna länka till en annan sida och pröva länken nedkopplad i webbläsaren, skall du nu göra ytterligare en sida till din egen hemsida. Du gör precis som tidigare. Koden kan se ut så här:

<HTML>
<HEAD>
<TITLE>Fiskar i människans tjänst</TITLE>
<LINK REL="stylesheet" HREF="hemsida.css" TYPE="text/css">
</HEAD>
<BODY>
<IMG SCR="bilder/dinbild.gif">
<H1>Fiskar jag dresserat</H1>
<H2>Här tänker jag presentera en del av de fiskar jag samlat in längs längs livets stig. Mina mest uppskattade medhjälpare är Ida, Harald och Anita.</H2>
<P>På min väg genom livet har jag träffat många fiskar och en del av dem har jag haft förmånen att få bära med mig hem. Dessa fiskar har jag sedan gjort mig god vän med och lärt upp i olika husliga sysslor. De har blivit mig ett gott sällskap och en god hjälp i mitt dagliga id.</P>
<H3>Apropå id - möt iden Ida</H3>
<P>Ida är en trevlig idflicka och mycket idog när hon putsar mina samlade frimärken. ... </P>
<H3>Harald Haj</H3>
<P>Harald är en hundhaj och har under sin tjänstgöring som avfallskvarn hos mig vuxit från de 60 cm han mätte när jag bar hem honom till de präktiga 8 meter han i dag mäter. ... </P>
<H3>Kvabbson Anita</H3>
<P>Anita är inte vacker men hon är ack, så präktig i matlagningen. ... </P>
<HR>
<A HREF="mailto:din.epostadress">Skicka gärna ett e-brev till mig</A> och berätta om dina egna tama fiskar.<BR>
<A HREF="index.html">Till förstasidan</A>
</BODY>
</HTML>

Fyll på med mer text, helst så att sidan blir flera "skärmar" lång. Glöm inte att lägga in mellanrubriker - <H3> ... </H3>.

Sedan sparar du den nya sidan under ett eget namn, till exempel fiskar.html, men i den mapp där du har index.html och stilmallen. Öppna sidan i webbläsaren och kontrollera att den är så lång att rullningslisten på höjden behövs.

Två länkar finns redan

Koden ovan ger en sida där det redan finns två länkar. Den första kopplar till din e-postadress. Det är den raden som börjar med <A HREF...> och länken slutar i och med </A>. HREF är ett attribut till <A> och används när länken skall leda till en annan sida, eller en bestämd plats på en annan sida - eller som i det här fallet till en e-postadress.

Den andra länken kopplar tillbaka till din egen förstasida. Det är en god vana att ha med denna länk på alla sidor utom den första.

<A> har fler attribut

Med koden <A NAME="..."> ... <A> bestämmer man ett namn på ett ankare. Ankaret är en plats dit man kan länka direkt, inte bara till en sida utan till en bestämd plats på den sidan. Du kan till exempel byta ut den första underrubriken ovan mot:

<H3><A NAME="ida">Apropå id - möt iden Ida</A></H3>

Detta skapar ett ankare med namnet "ida" - du kan länka direkt till detta ankare från en annan plats på webbsidan eller från en annan webbsida.

Låt oss säga att du vill länka till iden Ida från ingressen - <H2> ... </H2>. Du skall då använda koden <A HREF="#ida"> ... </A>. Vi ändrar ingresskoden så här:

<H2>Här tänker jag presentera en del av de fiskar jag samlat in längs livets stig. Mina mest uppskattade medhjälpare är <A HREF="#ida">Ida</A>, Harald och Anita.</H2>

Namnet Ida i ingressen har nu blivit en understruken länk, och om man klickar på den kommer man direkt till avsnittet om iden Ida. Observera att ankarets namn föregås av hustecknet #. Det är bara texten mellan <A ...> och </A> som syns på webbsidan.

Länkarna i den här webbskolan är inte understrukna. Det beror på att jag har valt bort den funktionen i stilmallen - i övningsuppgifterna lär du dig hur man gör detta.
Länka till en annan sida

När du vill länka till en sida från en annan sida, lägger du <A>-taggarna på den plats där länken skall synas.

Öppna filen index.html i textredigeraren. Någonstans på sidan, men mellan BODY-taggarna, lägger du till följande:

<P>Läs om mina <A HREF="fiskar.html">husliga fiskar</A>.</P>

Spara sidan. På webbsidan kommer detta att se ut så här:

Läs om mina husliga fiskar.

Du har fått en länk på sidan och den länken leder till en annan sida, nämligen sidan fiskar.html. Observera att detta är en relativ länk - den går ju till en sida som ligger i samma mapp som sidan du länkar från. Se till att sökvägen blir rätt - se nedan (här leder länken "nedan" till ett ankare). Om du vill att besökaren skall komma direkt till avsnittet om iden Ida, ändrar du koden på följande sätt:

<P>Läs om min <A HREF="fiskar.html#ida">husliga fisk Ida</A>.</P>

På webbsidan ser det ut så här:

Läs om min husliga fisk Ida.

När man klickar på den här länken kommer man direkt till avsnittet om iden Ida på den nya sidan.
Ange rätt sökväg

Om sidan som du länkar till ligger i en annan mapp på servern (och hårddisken, där du ju skall ha samma mappstruktur), måste du skriva in den rätta sökvägen. Gör så här i så fall:

  • <A HREF="fisk/fiskar.html">husliga fiskar</A>
    Betyder: Gå till undermappen fisk från den aktuella mappen och hämta där filen fiskar.html
  • <A HREF="../fiskar.html">husliga fiskar</A>
    Betyder: Gå ett steg bakåt i mappstrukturen och hämta där filen fiskar.html
  • <A HREF="../../fiskar.html">husliga fiskar</A>
    Betyder: Gå två steg bakåt i mappstrukturen och hämta där filen fiskar.html
  • <A HREF="../fisk/fiskar.html">husliga fiskar</A>
    Betyder: Gå ett steg bakåt i mappstrukturen, gå därifrån till undermappen fisk och hämta filen fiskar.html

Om sidan du länkar till inte ligger på din egen webbadress, anger du den absoluta sökvägen till den. I webbläsarens adressfält kan du ofta utelämna det inledande "http://", men det kan du inte göra i sökvägen. Om du skapar en länk till SupportData.Net, skall det stå så här:

A HREF="http://www.supportdata.net" eller "http://www.supportdata.net/index.html"

Du kan alltså ofta utelämna själv filnamnet på sidan du länkar till, men inte http:// eller http://www.
Var skall den nya sidan visas?

Med attributet TARGET="..." bestämmer du var den nya sidan skall öppnas. TARGET kan ha flera värden, men här tar vi bara upp ett:

  • TARGET="_blank"
    Detta gör att den nya sidan öppnas i ett nytt webbläsarfönster, medan det gamla fortfarande ligger öppet under det nya.

<A HREF="http://www.supportdata.net" TARGET="_blank">SupportData.Net</A>
Gästbok och räknare

Att ha en gästbok på hemsidan är trevligt - det ger dina besökare chansen att skriva till dig, berätta vad de tycker om sidan, komma med förslag och mycket annat. Men gästboken kräver att det som skrivs i den lagras någonstans, och detta i sin tur kräver mer än bara vanlig HTML-kod.

Därför brukar man, om man inte själv hanterar CGI-skript, välja en fri gästbok någonstans på Internet. Det finns massor av platser där du kan välja en hygglig gästbok utan att behöva betala för det. Du registrerar din gästbok, och får en liten snutt HTML-kod som du skall lägga in på hemsidan. Du kan vanligen kopiera koden direkt från gästbokens hemsida - den skickas dessutom till dig som e-brev.

Här hade jag en länk till en sida med gratisräknare, men jag har tagit bort den eftersom sidan hade blivit porrsida. Men så här kan den koden se ut

<CENTER><BR><A HREF="http://dittnamn.guestbook.net">View my guestbook</A>
<BR><A HREF="http://dittnamn.guestbook.net/sign.php3">Sign my guestbook</A></CENTER>

Jag delar upp koden för att den skall bli lättare att läsa

<CENTER>
<BR>
<A HREF="http://dittnamn.guestbook.net">View my guestbook</A>   
<BR>
<A HREF="http://dittnamn.guestbook.net/sign.php3">Sign my guestbook</A>
</CENTER>

Här går du genast in och ändrar "View my guestbook" och "Sign my guestbook" till "Läs i min gästbok" respektive "Skriv i min gästbok" eller något liknande.

Som du ser innehåller koden två absoluta länkar - en som gör att man kan läsa din gästbok och en som gör att man kan skriva i den. När du själv vill läsa vad andra har skrivit, klickar du på länken "Läs i min gästbok".

Lägga in gästboken på hemsidan

Som koden ser ut ovan kommer de båda länkarna att ligga centrerade på två rader under varandra. Vill du hellre ha dem på en enda rad, kan du ändra koden så här:

<CENTER>
<P>
<A HREF="http://dittnamn.guestbook.net">Läs i min gästbok</A>&nbsp;&nbsp;&nbsp;
<A HREF="http://dittnamn.guestbook.net/sign.php3">Skriv i min gästbok</A>
</P>
</CENTER>

Som du ser har jag tagit bort radbrytningarna <BR> och lagt alltsammans inom <P> ... </P>. Det egendomliga &nbsp;&nbsp;&nbsp; i slutet av första <A HREF ...>-raden ger några blanksteg mellan länkarna till "Läs ..." och "Skriv ..." .

Om du inte vill ha länkarna centrerade på raden, tar du helt enkelt bort <CENTER> och </CENTER>. På din sida kommer det då att se ut så här:

Läs i min gästbok    Skriv i min gästbok

Nu lägger du in gästbokskoden i hemsidans kod

Öppna textredigeraren och din index-fil.

Du kan lägga gästbokskoden var som helst mellan BODY-taggarna, men jag föreslår att du placerar den högt upp eller längst ned. Det blir snyggt om du lägger den tillsammans med länken till din e-postadress. Ändra då koden så här, om du vill ha allt centrerat. Annars tar du bort <CENTER> och </CENTER>:

<HR>
<CENTER>
<P>
<A HREF="http://dittnamn.guestbook.net">Läs i min gästbok</A>&nbsp;&nbsp;&nbsp;
<A HREF="http://dittnamn.guestbook.net/sign.php3">Skriv i min gästbok</A></P> 
<P><A HREF="mailto:skriv_din_epostadress_här">Skicka gärna ett e-brev till mig</A></P>
</CENTER>

Spara hemsidan.

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

 Läs i min gästbok    Skriv i min gästbok

Skicka gärna ett e-brev till mig

En räknare på hemsidan

En räknare gör att du ser hur många som besöker din hemsida. Du skaffar dig den på samma sätt som gästboken och här rekommenderar jag TheCounter. Du kan själv välja utseende på räknaren, eller bestämma att den inte skall synas alls. Dessutom kan du ange att räknaren inte skall räkna dina egna besök.

TheCounter skickar en gång i veckan ett e-brev med uppgift om hur många besökare du har haft. Genom att själv logga in på ditt konto hos TheCounter kan du läsa massor av värdefull statistik om dina besökare: vilka webbläsare använder de, vilken skärmupplösning har de och mycket annat. Räknaren är gratis.

Koden från TheCounter kan du kopiera direkt när du registrerar din räknare, men du får den dessutom skickad med e-post. Koden är ganska lång, men det finns ingenting i den som du behöver ändra. Liksom med gästbokskoden kopierar du helt enkelt in den på hemsidan, på den plats där du vill ha räknaren.

Ett bra alternativ till TheCounter är Netzapp. Varje dag då du har haft besökare på hemsidan får du e-post om hur många besöken har varit, samt dessutom diverse användbar statistik om besökarna. Netzapps kod är bara tre rader lång och även här kan du välja en osynlig räknare. Däremot kommer även dina egna besök att räknas.

Synlig eller osynlig räknare?

Räknarens viktigaste uppgift är att tala om för dig hur många besökare sidan har, inte att tala om för besökaren om du har få eller många besök. Det finns inga räknare synliga på SupportData.Nets webbplats, eftersom all statistik jag behöver skickas direkt från vårt webbhotell. Denna statistik utnyttjar jag för att anpassa sidorna efter de flesta besökarna.

Å andra sidan kan det vara kul att visa andra hur många besökare du har...

Titta gärna på Haj i Hjälmaren

I det här avsnittet har du lärt dig
  • Hur du skapar ankare på en sida
  • Hur du kopplar till ankaret inom sidan och från en annan sida
  • Hur du länkar fram och tillbaka mellan dina egna html-sidor
  • Hur du länkar till andra sidor på Internet
  • Hur du gör så att nya sidor öppnas i ett eget webbläsarfönster
  • Att lägga in en gästbok på hemsidan
  • Att lägga in en räknare på hemsidan

Gör nu övningsuppgifterna och kunskapstestet.

Sedan skall du ut på Internet med din förändrade index-sida och den nya sidan.

Övningsuppgifter
Kunskapstest

Bilder på hemsidan Använda tabeller

© SupportData.Net