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

Relevanta dokument
FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

WEBBUTVECKLING Kursplanering

Carl-Oscar Hermansson WEBB DESIGN

TNMK30 - Elektronisk publicering

Bilder. Bilder och bildformat

Att bygga enkla webbsidor

En bortsprungen katt

Datakommunika,on på Internet

Språk för webben introduk4on 4ll HTML

F02 En första sida. Dagens agenda

Introduktion till programmering

Nätet. Uppgiften. Nivå

Välkommen som användare av medietekniks och informatiks publika studentserver

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Internets historia Tillämpningar

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, Internet började med ARPANET

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu

Forms and Favorites. Version 5.2. Administratörshandbok

Webmail instruktioner

Grundläggande datavetenskap, 4p

Datakommunika,on på Internet

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

12 Webb och kurshemsidor

SBR-Net - SBR:s informations- och mötesplats på webben! Med First Class-klientprogram

Webbserver och HTML-sidor i E1000 KI

Mappar och filer för webbsidor

Hur man lägger upp och redigerar dokument i Typo3.

Compose Connect. Hosted Exchange

Ladda upp filer fra n PLC till PC

Labora&on 7 Syfte med laborationen:

IT för personligt arbete F2

Manual för Typo3 Site-Admins version 4.04

<header> </header> <footer> </footer>

Arbeta i Sharepoint dokumenthanteringssystem

Guide för Innehållsleverantörer

Idag. Webben, HTML och CSS. Live demo. Webbens funktion

Lägga in ett protokoll i en Dokumentlista i SharePoint

Arg-administratörens guide till Umbraco v 1.2.1

Lägga till bild i e- handeln

Välkommen som anställd till Malmö högskola

Inför prov 1 i webbdesign

Manual för Typo3 version 4.2

Instruktioner för att skapa konton i MV-login

WEBDESIGN A - DTR 1210

En grundkurs i hemsidor och hur de är uppbyggda

Mer information om RefWorks, andra referenshanteringsprogram och hur man refererar hittar du på Linköpings universitetsbiblioteks webbsidor.

WebViewer Manual för administratör Nova Software AB

Laboration med Internet och HTML

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version , rev (19)

Installationsanvisningar VisiWeb. Ansvarig: Visi Closetalk AB Version: 2.3 Datum: Mottagare: Visi Web kund

Quick Start CABAS. Generella systemkrav CABAS / CAB Plan. Kommunikation. Säkerhet

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programbeskrivning. Chaos på Web. Version

Snabbguide för publicering i Drupal för ki.se

Lathund skapa och redigera sidor en projektwebb

Startanvisning för Bornets Internet

WEBBUTVECKLING CSS. Formatmallar - CSS

INSTALLATION AV KLIENT

Innehållsförteckning:

Avtal/överenskommelse för leverans till K- samsök

Innehåll. Dokumentet gäller från och med version

Internet A. HTML Grunder Maximilien Chiang 1

LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT

Föreläsning 4. CSS Stilmallar för webben

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

Manual för din hemsida

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Redaktörens Lathund för Glokala. Så här redigerar du en redan befintlig hemsida. Så här skapar du en länk till en extern hemsida

Objektorienterad Programkonstruktion. Föreläsning 10 7 dec 2015

Skärmbilden i Netscape Navigator

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

TNMK30. Elektronisk publicering

Användarguide Lathund Tema Modersmåls webbplats

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys

Användarmanual för föreningshemsidor

UochM Kundsupport 1. Du har fått ett från UochM med följande information (har du inte fått det så kontaktar du UochM):

ÄNDRA EN LÄNK. Guiden förutsätter att det finns en artikel med en redan skapad textlänk som ska ändras.

Handledning för redigering av lagsidor.

TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p

Gör en modern släktbok för CD eller webben

INSTALLATION AV KLIENT

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad ) Birger Eriksson webblots.se

Även om man placerar information kolumnvis så kommer all information att visas radvis i PDF-utskriften.

Text och galleri på fotoklubbens nya hemsida

Lägga in och publicera rapporter i rapportserien

Arbetsmaterial HTML pass 1 - Grunder

Handhavande manual problemhantering

Styrelsebloggens bruksanvisning

ORDLISTA WEBBDESIGN 100P

Hantering av hyperlänkar

FIRSTCLASS. Innehåll:

Transkript:

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.

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.

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

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:978-91-636-0994-7 URN-adresser är minst sagt ovanliga.

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

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

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.

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

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

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 www.domän.se eller ett IP-nummer av typen 123.45.67.89, 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..

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.

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.

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 />

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 >