|
|||
Cgi4free |
Egen söktjänst |
Erbjudanden |
Funktioner |
Gratis bilder |
Hemsidekryptering |
Posten |
Söktjänstregistrering |
JavaScript.nu
/
HTML-kurs
/
Länkar
Länkar
Som du säkert märkt genom ditt surfande är internet fullt utav länkar. En länk kan användas för att en besökare ska kunna skickas till en websites olika sidor, eller för att skicka en besökare till en annan website. Att göra en länk är busenkelt, och kan göras enligt två principer: <A HREF="sida.html">Text</A> <A HREF="http://www.javascript.nu/">Text</A>
Som du ser innehåller det ena exemplet en hel adress
(http://www.javascript.nu/).
Att trycka på en sådan länk är samma sak som att skriva in
hela adressen direkt i din webbläsares adressfält.
Som du säkert minns ska din första hemsida heta "index.html".
Vill du sedan skapa en till sida med t.ex. dina länkar
så kan du exempelvis döpa denna till "lankar.html".
För att din besökare som befinner sig på
"index.html" ska kunna hitta fram till "lankar.html"
så skapar du en länk i "index.html" enligt denna model:
Om din besökare nu trycker på texten "Besök mina länkar"
så kommer han/hon förflyttas till filen "lankar.html".
Vill du på denna sida länka till t.ex. http://www.JavaScript.nu/
så måste du på denna sida ha en länk av typen:
Vill du ha en bildlänk, dvs. så att man trycker på en bildlänk för att komma till den nya sidan så får du ha koden nedan. Detta kan vara användbart t.ex. i en meny som ska bestå av bilder: <A HREF="sida.html"><IMG SRC="bild.gif"></A> Bilden "bild.gif" måste ligga i samma katalog som själva sidan med länken. Har du alltså HTML-koden ovan i "C:/Mina Hemsidor/lankar.html", så båste bilden finnas på "C:/Mina Hemsidor/bild.gif". Något som är överkurs är hur man får en bild att länka till olika sidor. Det tas upp här. Du kan också göra en länk från en del av sidan till en annan del av sidan. Tänk dig att du har en sida med tusen artistnamn. Du kanske då vill att man ska kunna trycka på bostaven "k" för att man ska komma till den del av sidan som visar alla artister som börjar på "k". Det kan du åstadkomma med ett "ankare".
Där du ska trycka skriver du:
Där du ska komma upp ska du skriva:
Har du fler ankare ska du döpa dem till olika saker. I mitt exempel kan det vara klokt med "artistA", "artistB", "artistC" etc.
Här har jag ett exempel: För att göra en länk till en bild, dvs. så man kommer till en bild när man trycker på länken så ska du ha denna HTML-kod: <A HREF="hus.gif">Se min sommarstuga</A> Bilden dyker nu upp i en sida med vit bakgrund och utan text. För att den som tittar på sidan ska kunna skicka mail till dig skriver du: <A HREF="mailto:dittnamn@dinmail.com">Maila mig</A>
För att ett "subject" (rubrik på brevet) redan ska vara ifyllt när
man trycker på länken skriver du:
Skulle du vilja att det står något speciellt i
själva brevet ska du skriva:
För att länka till något i en annan UNDERkatalog skriver man: <A HREF="katalognamn/fil.shtml">tryck här</A>
Skulle jag ha en sådan länk på denna sida...
Tänk dig att besökaren besöker en sida med namnet url.shtml, alltså är den egentliga adressen:
Om du vill kan du skriva hela länken direkt, alltså:
Nackdelen med detta är att när du gör hemsidan på hårddisken så befinner du dig
(vanligtvis) på C:, detta gör att en direktlänk till...
Om du vill länka till en fil i en ÖVERkatalog skriver du:
Skulle det skrivas på denna sida...
Naturligtvis kan du länka flera kataloger "bakåt" genom att skriva:
Du kan även länka fram OCH tillbaka i kataloger genom att skriva t.ex:
För att ladda ner filer från ett ställe kan man göra en länk till filen man vill ladda ner. För att ladda ner en fil som heter filnamn.zip på http://www.adress.com/xxx/ gör du en länk till http://www.adress.com/xxx/ och sedan filnamnet (fil_namn.zip). En korrekt tag skulle alltså vara: <A HREF="http://www.adress.com/xxx/filnamn.zip">en text</A> För att man ska få ett meddelande i statusraden när man drar musen över en länk (gäller både textlänkar och bildlänkar) skriver man: <A HREF="http://www.JavaScript.nu/" onMouseOver="self.status='DENNA TEXT KOMMER ATT SYNAS LÄNGST NED PÅ SKÄRMEN'; return true"> texten/bilden man drar musen över</A>.
Vill du även att texten som synts i statusraden ska tas bort då man flyttar musen
från länken så skriver du:
<A HREF="http://www.JavaScript.nu/" onMouseOver="self.status='DENNA TEXT KOMMER ATT SYNAS LÄNGST NED PÅ SKÄRMEN'; return true" onMouseOut="self.status=''; return true"> texten/bilden man drar musen över</A>.
Ett sätt att ha "back-" och "forwardknappar" på sidan är genom dessa länkar (man kan bestämma hur många steg man ska förflytta sig). För att länka någon 1 steg bakåt skriver man: <A HREF="javascript:history.go(-1)">Text man ska trycka på</A>
Genom att byta "-1" mot t.ex. "-3"
så länkas man 3 sidor tillbaka, alltså där man var för 3 sidor sen.
Om man inte varit någonstans för 3 sidor sen så händer inget.
För att länka till en sida man är på (genom en "reload") skriver man: <A HREF="javascript:window.location.reload()">Text man ska trycka på</A> Vill du testa? Tryck här (kom ihåg vart i dokumentet du är nu, du kommer nämligen till toppen av detta dokument)! För att få en sida att sluta ladda skriver du: <A HREF="javascript:stop()">Text man ska trycka på</A> OBS: Fungerar bara för Netscape-användare. För att printa ut en sida kan man skriva: <A HREF="javascript:print()">Text man ska trycka på</A> Vill du testa? Tryck här. För att låta en besökare besöka sitt eget "home" så skriver du: <A HREF="javascript:home()">Text man ska trycka på</A> Glöm inte bort att "TARGET" ALLTID blir "_top" om du länkar besökaren till sitt home (även om du skriver t.ex. TARGET="_self"). Vill du testa? Tryck då här (glöm inte att trycka på "back" och komma tillbaka ;-) ). OBS: Fungerar bara för Netscape-användare. För att hitta något på en sida kan du skriva (öppnar "Find" (CTRL+F)): <A HREF="javascript:find()">Text man ska trycka på</A>
Vill du testa? Tryck då
här.
För att öppna ett nytt fönster skriver du: <A HREF="javascript:open()">Text man ska trycka på</A> Detta kan sedan utvecklas med andra JavaScript-attribut, som du kan lära dig i min JavaScriptkurs. Här kan du testa hur det blir. För att stänga ett fönster skriver du: <A HREF="javascript:top.close()">Text man ska trycka på</A>
Vill du testa detta? Tryck då
här.
Dessa är alltså alla värden man kan sätta som: <A HREF="javascript:...">Text man ska trycka på</A>
history.go(-2) history.go(3) window.location.reload() stop() För Netscape print() home() För Netscape find() För Netscape open() top.close() Vill du titta på en sidas HTML-kod? Kanske vill du se hur något från den personens sida är gjort, då kan du skriva: view-source:http://www.adress.com/namn/ ...Så ser du hur han har kodat sin sida. OBS: Dessa "about-funktioner" fungerar endast med Netscape.
För att se vad du har under din CACHE skriver du...:
Vill du se din CACHE måste du skriva in adressen ovan i ditt adressfält själv, man kan inte länka till någons cache.
Istället för about:cache kan du skriva t.ex.
about:plugins
(info. om olika plugin),
about:license
(om ditt licens (=tråkigt avtalstext)) eller bara
about: (info. om vilken webbläsare, version etc. man har).
Andra saker man kan skriva är t.ex.
about:document.
Med en TARGET="_top" (om du inte vet vad det är,
strunta i det) till din "about:document" kan du se huvudsidans information.
Som du vet så får länkar automatiskt en understrykning, vilket är bra för att besökaren lättare ska hitta länkarna och veta vad som är en länk. Vill du trots detta ta bort länkarna skriver du detta i HEAD-taggen: <STYLE TYPE="text/css"> <!-- a:link {text-decoration: none} //--> </STYLE> ...så blir dina länkar utan understrykningar.
Vill du att inget händer då man trycker in (håller in) en länk skriver du även:
Vill du att inget händer då man tryckt på en länk så skriver du även:
För att få alla funktioner skriver du alltså:
Om du vill ha en enda länk utan understrykning skriver du
style="text-decoration: none"
i din A-tagg.
Allt detta gör man med Style Sheets, vars kapitel finns under "Andra programspråk"/"style sheets". Som du vet så ändras länkarnas färg i BODY-taggen, men vad ska du göra om du vill ändra färg på en enstaka länk? Vanliga länkfärger ändrar du med följande attribut i BODY-taggen; LINK="färgnamn" (Länkarnas vanliga färg.) VLINK="färgnamn" (Länkarnas färg då de har blivit nedtryckta.) ALINK="färgnamn" (Länkarnas färg då de är nedtryckta.)
Alltså ändrar du färgen på länken med LINK-attributen, men vad ska
du göra om du vill att en enstaka länk på en sida ska byta färg?
Har du frames och vill länka till olika ramar så ska du använda TARGET (OBS: om du inte vet vad frames är så hoppa över detta.)
Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] |