Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).

Transkript

1 Länkar, ankar och resurser En länk är en hänvisning från ett dokument till en resurs. En resurs kan nästan vara vad som helst. Det mesta på internet är resurser i någon form, som exempelvis HTLM-dokument, bildfiler, filer i FTP-arkiv och inlägg i diskussionsgrupper. En länk har två ändar, ett huvud och en svans. När vi klickar på svansen kommer man till länkens huvud. Huvudet kan vara en fil eller en speciell plats i ett dokument eller en webbsida. Man hänvisar ofta till hela filer och då fungerar själva filnamnet som länkens huvud, det är inte så vanligt att man skriver ut länkhuvudet. Därför använder man ganska ofta ordet länk i betydelsen länksvans. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor). Man använder attribut för att skilja mellan de olika typerna av ankare, med name eller id eller href vilket betyder (HypertextREFerens) och ger attributet ett värde som berättar vart länken leder. Den kan också kallas för hyperrefrenser.

2 I nedanstående exempel är det första ankaret svansen i länken och det andra är länkens huvud. <h1>exempel på en länk</h1> <p> I nästa mening är de första två orden en hyperlänk. <a href= #del2 > Klicka här</a> om du vill hoppa fram till nästa del av dokumentet. </p> <h2 id= del2 > Del två </h2> <p> På det här sättet kan man till exempel ha en innehållsförteckning i början av långa dokument.</p> Testa gärna själv detta exempel, men glöm inte att ange HTML-taggens huvud och svans, som vi gick igenom förra gången. Som du ser är Klicka där understruket vilket markerar att det är en hyperlänk. När man klickar på ordet, hoppar man ner till Del två i nästa rubrik. Genom att använda # (haschtecknet) framför del2 i href-attributet och ange del2 i id-attributet, har du skapat en inre länk i dokumentet.

3 URL, URI, URN och URC Du har säkert stött på förkortningen URL, många gånger. Ibland ser man förkortningar som URL, URI, URN och URC. De har skapats eftersom det behövs ett gemensamt sätt att hänvisa till resurserna som lagras på olika sätt. URL-strängar, kallas även webbadresser, är en av många nycklar till webbens framgång. URI (Uniform Resource Identifier), tidigare kallad Universal Resource Identifier URL(Uniform Resource Locator), ibland kallas den Universal Resource Locator. URN(Uniform Resource Name), är ett mer varaktigt sätt att referera till en resurs än en URL. En URL är ett specialfall av URI, där man bara har tagit med de resurser som kan nås via olika nätverksprotokoll. Där man specificerar resurserna så pass noggrant att det är lätt för till exempel en webbläsare att leta upp dem. Man kan säga att varje URI som är intressant i Internet sammanhang, också är en URL. fort

4 URN (Uniform Resource Name) Om ett HTML-dokument flyttas från en dator till en annan kommer ju dokumentet att få en ny URL, och alla referenser till den gamla platsen måste ändras. Med en URN skulle man kunna slippa detta problem. En URN är också en typen av URI (Uniform Resource Identifier). IETF (Internet Engineering Task Force) höll på i 11 år med att ta fram hur URN skulle fungera. En URN börjar med urn: och därefter kommer ett ord som berättar vilken typ av URN det rör sig om, därefter ännu ett kolon och sedan en sträng som identifierar resursen unikt. URN typen för ISBN nummer, se exemplet nedan. Exempel: urn:isbn: URN-adresser är minst sagt ovanliga.

5 URC (Uniform Resource Citation ) URC beskriver en resurs genom att använda attribut och värden. Ett attribut kan vara resursens URL, ett annat kan vara dess upphovsman och så vidare Vi säger kort och gott webbadress eller bara adress istället för URL. Sammanfattning av webbadresser: Ni ska kunna att det finns olika typer av webbadressering och dessa är: URL URI URN URC

6 Referenser mellan HTML-dokument Den lättaste formen av webbadressering är en så kallad relativ URL, en URL som pekar ut en annan resurs i förhållande till dokumentet den står i. Om du vill göra en länk från ett HTML-dokument till en annan fil som ligger i samma mapp räcker det med att ange filnamnet på den andra filen. Exempel: <html> <head> <title>fråga </title> </head> <body> <h1> Minns du förra kapitlet?</h1> <p>hur ser taggen ut som används för att Markera tangentbordsinmatning ut? Klicka på länken om du vill se <a href= fil2.html > svaret</a>.</p> </body> </html> Spara denna som fil1.html <html> <head> <title> Svar</title> </head> <body> <h1>hade du rätt?</h1> <p> Taggen är <samp>< kbd></samp>. Klicka här om du vill gå <a href= fil1.html > tillbaka till frågan </a>.</p> </body> </html> Spara denna som fil2.html

7 URL-formen Nu har du sett ett par enkla exempel på hyperreferenser. Det är dags att visa hur en URL-sträng ser ut i detalj, så att du kan lägga in referenser till vilka resurser som helst i din dokument. Den allmänna formen på en URL är: metod: adress Där metod är det sätt som används för att nå resursen (till exempel http eller ftp) och adress pekar ut exakt hur man når resursen. Adressen ser olika ut för olika metoder.

8 URL-formen - Metoder Det finns en mängd olika metoder, även kallade protokoll,för att nå resurser. Nedan finns några av de vanligaste metoderna för att komma åt en resurs: http https ftp mailto file javascript HyperText Transfer Protocol HyperText Transfer Protocol, Secure File Transfer Protocol E-postadress Filer på datorn som webbläsaren körs på En skriptfunktion

9 URL-formen - Adresser Adressen är ibland mycket enkel, som vi sett i exemplen ovan, men den kan också vara ganska komplex. Adressen kan antingen anges i förhållande till den fil som innehåller URL-strängen (relativ adress) eller direkt, med en fullständig (absolut) adress. Absoluta adresser Adressernas utseende beror av metoden som används, men för de flesta metoderna har adresser den här strukturen: //användare:lösenord@dator:port/sökväg#fragment Det går att utelämna nästan alla dessa delar, och oftast anger man bara delarna dator och sökväg. De två fälten, användare och lösenord används när det krävs en inloggning med ett speciellt användarnamn och lösenord för att komma åt resursen. För att få hämta en fil med FTP. OBS! att lösenordet står i klartext, så alla kan läsa det. fort

10 Absoluta adresser Fältet dator är domännamn eller IP-adressen till den dator resursen finns på. Den kan alltså antingen vara en vanlig adress av typen eller ett IP-nummer av typen , i vissa fallmåste man också ange ett speciellt portnummer för att komma åt en viss tjänst, och då använder man fältet port. Relativa adresser UTV cv.html I mappen UTV ligger filen cv.html, som innehåller ramdokument till dina meriter. STUDIER studier.html PROJEKT projekt.html I undermappen STUDIER finns dokumentet som handlar om dina studier. I mappen PROJEKT innehåller dina projektarbeten i dokumentet projekt.html forts..

11 Relativa adresser Hyperlänkar I mappen UTV/cv.html STUDIER UTV studier.html cv.html PROJEKT projekt.html I undermappen STUDIER/studier.html I mappen PROJEKT /projekt.html. Från cv.html finns det länkar till alla andra dokument. Länken till dokumentet studier.html görs med URL-strängen STUDIER/studier.html och länken till filen projekt.html med projekt arbeten PROJEKT/projekt.html Om man nu vill länka tillbaka till cv.html dokumentet från de olika mapparna STUDIER och PROJEKT, ser de båda länkarna lika ut:../cv.html Från filen med feriearbeten kanske du vill ha en länk till filen med din gymnasieutbildning. Den länken får då URL-strängen../STUDIER/studier.html Man kan se en relativ URL som en vägbeskrivning: följ länken, gå upp en nivå och sedan ner i mappen STUDIER och öppna dokumentet studier.html.

12 Attributen för taggen - <a> </a> I taggen <a> </a> finns det många attribut som används och de vanligaste som man använder är: Href Hypertextreferens. Värdet ska vara en URL till en resurs. Id Ger taggen en unik identitet. Name Definierar ett fragment av den fil som taggen står i som id. Target Anger vilket fönster eller i vilken fönsterram (frame) det utpekade dokumentet ska öppnas i. Class Anger taggens klass. Style Anger formatmallen för taggens innehåll.

13 Attributen för taggen - <link /> Taggen <link> får bara förekomma i sidhuvudet och definierar relationer mellan dokument och andra dokument. Taggen användes i början mest av program som skapade HTML- eller XHTML-kod automatiskt, men numera använder man <link> för att koppla formatmallar till dokumentet. <link> har många attribut gemensamt med taggen <a>: href, rel, title, hreflang, type, target, lang och dir har alla samma innebörd som attributen till taggen <a>. <link> kan dessutom ha attributet media, som anger vilka medier det inlänkade dokumentet är avsett för. Exempel: <link rel= alternate hreflang= en href= URL_till _den _engelska_varianten.html /> Nästa exempel anger en symbol för en webbsida: <link rel= icon href= logotype.png /> I HTML5 kom det till ett nytt attribut i <link> just för ikoner. Man kan nu ha flera ikoner i olika storlekar och ange storlekarna i attributet size. <link rel= icon href= liten.png size= 16x16 /> <link rel= icon href= stor.png size= 64x64 /> <link rel= icon href= skalbar.svg size= any />

14 Attributen för taggen - <meta> Hyperlänkar <meta> förekommer precis som <link> bara i sidhuvuden. <meta> innehåller metainformation, alltså information om informationen i dokumentet. Denna metainformation, eller metadata som den också kallas, kan tolkas av webbserverprogrammet och skickas till webbläsaren före resten av dokumentet, som en del av HTTP-informationen. Det kan ibland vara svårt för en webbläsare att veta vilken typ av information ett dokument innehåller. Serverprogrammet har ofta en bättre uppfattning om vad dokumenten innehåller och därför skickar servern ett HTTP-huvud innan varje dokument. I praktiken är det bara några rader kod. <meta> har ingen egen funktion, utan den är bara ett generellt sätt att ange information som kan användas av speciella program. Taggen har 4 stycken attribut. http-equiv content name charset Binder värdet till ett huvudfält i HTTP Ger fältets innehåll Ger ett namn till fältet och dess innehåll Anger vilken teckentabell dokumentet använder. Exempel: <meta http-equiv= Nyckelord content= Exempel >