Webb­utveckling

Länkar

Vi pratade i början om hur en webbplats kan liknas vid en tidning. Och en grundläggande egenskap i en tidning är att man kan byta sida. Det kan vi också göra i HTML. Vad vi gör är att vi binder samman två sidor med hjälp av ett "ankare" (anchor), eller ett <a>-element.

Alla länk-element byggs upp på samma sätt:

1. Först öppnar vi med en <a>-tagg.
2. Sen lägger vi till adressen till det vi länkar med href som ett attribut i taggen: <a href="index.html">
3. Nästa steg är att lägga till den bit text som man ska trycka på inuti elementet: <a href="index.html">Text</a>
4. Om texten man skriver inte är självförklarande så lägger man till attributet title: <a href="index.html" title="Beskrivande text">Text</a>
5. Nu är vår länk klar: Text

<a href="index.html" title="Beskrivande text">Text</a>

Länk till den egna webbplatsen

Ska man länka till något som ligger på samma server — i vårt fall än så länge den egna datorn — så skriver man platsen på datorn i förhållande till var sidan man jobbar med är. Om filerna är i samma mapp på datorn så räcker det med att skriva filnamnet på sidan man länkar till. I exemplet ovan så länkar jag till min startsida som jag döpt till "index.html" och eftersom de ligger i samma mapp på datorn så hittar de varandra.

Hade vi velat länka till något som ligger i mappen "material" så hade vi fått skriva så här:

<a href="material/sida.html">Text</a>

Där vi har mappnamnet, ett snedstreck och sen filnamnet. Hade sidan vi vill komma åt legat i en annan mapp inuti material hade vi fått göra så här:

<a href="material/mapp/sida.html">Text</a>

Om sidan vi vill komma åt istället hade legat i en mapp tidigare än den vi är i, säg att jag har ett mappträd som ser ut något så här:

• Skola
• Programmering
• Webbutveckling
• Hemliga lärardokument
• A-betygs-sidan.html
• Lektioner
• lankar.html

Om jag vill länka till "A-betygs-sidan.html" från den här lektionen hade jag behövt skriva så här:

<a href="../Hemliga lärardokument/A-betygs-sidan.html">Text</a>

De två punkterna markerar att vi ska gå bakåt (eller uppåt som man gärna säger) en mapp. Allt detta kallas för relativ adress, eftersom man beskriver platsen utifrån vart filen man jobbar i befinner sig.

Man kan också använda så kallad absolut adress då man anger hela filvägen. I fallet med att länka till "index.html" hade jag då fått skriva så här:

<a href="C:\Users\071837\Documents\Skola\Webbutveckling\index.html">index</a>

Länk till annan webbsida

Om man vill länka till exempelvis Stackoverflow så behöver man skriva in hela adressen till hemsidan: <a href="https://stackoverflow.com/">Stackoverflow</a> vilket ger: Stackoverflow. När man länkar till en annan webbsida så är det nödvändigt att man får med hela adressen inklusive http:// eller https://

Länka till innehåll på den egna sidan

Som du kanske har märkt så kan du skapa länkar som pekar på en specifik del av sidan du befinner sig på. Du kan testa att göra det uppe i sammanfattningen här på sidan.

ID

För att länka till ett element på sidan så behöver du först på något sätt ge det en identifier (identifierare), eller ett ID. Det görs genom att du skriver till attributet id i öppningstaggen av ett element. Jag har till exempel lagt in id-attribut i de blocken som gör att det blir gult runt texten.

Om man vill ge ett element ett ID så skriver man så här:

<h2 id="cooltid">Vad varje webbutvecklare bör veta</h2>

Nu kan jag sen skapa en länk som länkar till den rubriken:

<a href="#cooltid">Till rubriken</a>

Notera att det är ett # framför identifieraren. Det markerar för webbläsaren att det är på den här sidan det gäller.

Om du vill komma till toppen av sidan kan du klicka här.

Extra information

Ofta så vill man att ens länk ska se ut som vanligt text och så kan man klicka på ett ord eller ett stycke text och så skickas man vidare. Det kan dock ofta vara schysst mot användaren att man på något sätt visar vart länken leder innan de klickar på den. Ett sätt att göra det på är att använda dig utav attributet title. Precis som i <abbr> så gör title att det dyker upp en text när du hovrar över länken.

<a href="https://sv.wikipedia.org/wiki/" title="Svenska wikipedia">Click me</a>

Click me Att använda sig av title hjälper också personer med skärmuppläsare och låter dem få information om vart länken leder.

Ny flik

Om man vill öppna länken i en ny flik i webbläsaren så kan man lägga till attributet target="_blank".

<a href="https://sv.wikipedia.org/wiki/" title="Svenska wikipedia" target="_blank">Click me</a>

Click me

Skicka mail

Om man har ett kontaktformulär eller liknande så vill man kanske att användarna ska kunna maila en direkt. Då kan man ändra länken så här:

<a href="mailto:calle.ketola@lund.se">Mail till mig</a>

Mail till mig

Övningar

1. Skapa en sida som innehåller fem rubriker.
2. Ge varje rubrik ett unikt id.
3. Gör en lista med länkar överst på sidan som länkar till de fem rubrikerna
4. Fyll på med valfri text mellan varje rubrik. Så att man måste scrolla en bit för att se hela sidan
5. Skapa en länk som länkar till den hemsidan du gjorde med ett recept.
6. Skapa en länk som länkar till din favoritfilm på IMDB
7. Se till att varje länk har en beskrivande title
8. Se till att alla länkar som går till en annan webbplats öppnas i nya flikar