3 – Länkar & listor

Första halvan av denna lektionen handlar om länkar och andra om listor.

Länken är ett av de första element som kom till i HTML. Tanken med länken är att du ska kunna koppla ihop flera olika sidor. Länken skapade Internet och har även givit webben sitt namn – World Wide Webb.

Både punktlistor och numrerade listor används flitigt på internet. Förutom i innehållet strukturerar man ofta upp menyer i listor.

Länkar

En länk skrivs med elementet <a> (eng. anchor) som knyter ihop två olika sidor. Förutom elementet behöver vi lägga till information om var länken ska peka och vad för text som ska synas. För att göra texten Google klickbar med en länk till www.google.se skriver vi följande.

<a href="http://www.google.se/">Google</a>

Läs länken noga. Vi öppnar taggen, lägger in attributet href, stänger länken och skriver in vad som ska vara klickbart.

När ni väljer ut vilken text som är klickbar är det viktigt att de orden förklarar vad som kommer på nästa sida. Ibland ser man exempel som ”Läs mer här” där ordet här pekar till en sida med mer information. Ordet här förklarar inte vad som kommer. Det vore mycket bättre om det stod tex ”Läs mer på min sida om HTML-taggar”. Då vet läsaren redan innan hen har klickat vad som kommer.

Tips: Det måste inte vara en text som är klickbar. Det går andra element också som t.ex. bilder.

Absoluta & relativa länkar

Om attributet href börjar med texten http:// betyder det att du gör en absolut länk till en sida. Webbläsaren läser då in hela länken och surfar dit.

Utan texten http:// i länken läggs istället det ni skrivit i href på sist i länken. Normalt används detta för att länka inom den egna hemsidan. Har du t.ex. en meny och vill länka till ett kontakt-formulär som ligger i HTML-filen kontakt.html behöver du inte skriva hela den absoluta sökvägen utan bara filens namn.

Är det en stor sida delar man ofta upp sina HTML-filer i flera olika mappar. Då kan man göra relativa länkar genom att lägga till mappens namn också.

För att krångla till det kan man även uppåt i mappstrukturen. Då använder vi ordet ../ istället för mappens namn.

Jämför följande fyra exempel:

<!-- Absolut länk -->
<a href="http://www.google.se/">Googles hemsida</a>

<!-- Relativ länk -->
<a href="kontakta-oss.html">Kontakta oss!</a>

<!-- Relativ länk i annan mapp -->
<a href="inkopsavdelningen/kontakt.html">Kontakta inköpsavdelningen!</a>

<!-- Relativ länk från inköpsavdelningens kontaktsida tillbaka till förstasidan -->
<a href="../index.html">Tillbaka till förstasidan</a>

Testa alltid dina länkar genom att klicka på den och se så du hamnar rätt. Läs i webbläsarens adressfält var du hamnade. Det är lätt att göra fel.

Kuriosa & överkurs
http:// betyder Hyper Text Transfer Protocol och är sättet som webbläsaren kommunicerar med webbservern. I praktiken betyder det en länk till en helt ny hemsida. Det finns även andra sorters protokoll som ni kanske hört talas om. ftp:// som står för File Transfer Protocol är ett av de andra vanliga.

Ankarpunkter

Det finns fler sätt att skriva länkar t.ex. kan du länka till en del av ett dokument.

Tänk att du har ett långt dokument och vill ha en innehållsförteckning där du kan länka ner direkt till dina olika rubriker. Rubriken måste ha en speciell ”adress” som läggs till med attributet ID (IDentifier) och i länken skriver du #slutsats som adress i HREF.

Ett exempel med en del av en innehållsförteckning.

<h1>Vår innehållsförteckning</h1>

<a href="#inledning">Inledning</a><br>
<a href="#slutsats">Slutsats</a>

<h2 id="inledning">Inledning</a>
<p>Här är brödtexten för inledningen. Lägg gärna in mycket text i ditt dokument så blir det tydligare vad som händer.</p>

<h2 id="slutsats">Slutsats</h2>
<p>Här är brödtexten för slutsatsen</p>

E-postlänkar

Du kan även göra en länk till en e-postadress. Det som händer när en läsare klickar på den är att webbläsaren ser att det är en e-postadress och öppnar e-post-programmet istället för att öppna länken i ett nytt fönster.

Mail-länkar funkar men det finns två problem. Så fundera en gång extra :)

  1. Dels måste webbläsaren veta vilket mail-program den ska öppna. Tidigare var detta ett mindre problem men när många använder webbmail (som t.ex. Gmail eller Hotmail) blir det svårare för webbläsaren att veta vad den ska göra med mailadresser.
  2. Använder du en publik dator som tex på ett bibliotek blir det väldigt otydligt vem som skickar mailet. Datorn på biblioteket öppnar mailprogrammet men den kan inte skicka mail från dig.
  3. Företag vill alltid skriva ut kontaktuppgifter på hemsidan. Problemet är att det är väldigt stor risk att e-posten blir uppsugen i olika spam-system. Får man tillräckligt mycket skräppost till en e-postadress blir den i praktiken oanvändbar. Många använder e-postformulär istället för att skriva ut e-posten.

För att göra en mail-länk gör du följande:

<a href="mailto:ola@min-mail-adress.se">Maila ola@min-mail-adress.se</a>

Listor

På Internet är det ofta extra viktigt att hålla sig kortfattad. Läsare har mindre tålamod att läsa på en skärm än i en bok. Att skriva i punktform är ett sätt att förkorta innehåll.

Det finns två sorters listor som används ofta. Punktlista och en sorterad (även kallad ordnad lista). Punktlistan betyder att innehållet är uppdelat men inte prioriterat. I den sorterade listan kommer det viktigaste överst.

Båda sorters listor skrivs på liknande sätt. I båda fallen används elementet <li> för att lagra själva datan. Det som skiljer dem åt är <ul> mot <ol>.

<!-- Unordered List -->
<ul>
  <li>Första punkten skriver vi här</li>
  <li>Andra punkten</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>Nummer ett skriver vi här</li>
  <li>Nummer två</li>
</ol>

Du kan även ha en lista i en lista eller en sk. underlista. Du kan kombinera sorterade listor med punktlistor hur som helst. Titta noga. Framförallt på var den andra punkten avslutas.

<ul>
  <li>Första punkten</li>
  <li>Andra punkten
    <ol>
      <li>Första undersiffran</li>
      <li>Andra undersiffran</li>
    </ol>
  </li> <!-- Här stänger vi yttre listan -->
  <li>Tredje punkten</li>
</ul>

Det finns även en lista till som heter Defenition List. Den är ovanlig men finns. Läs gärna om den på W3Schools eller MDN.

Listor & menyer

Det är vanligt att man strukturera menyer på hemsidor som listor. Sedan ändrar man utseendet på listorna med hjälp av CSS. Mer om detta snart :)

Uppgifter

  1. Lägg in länkar till några externa hemsidor på ditt CV. Tex kan du göra så att företag du arbetat på blir klickbara (till deras respektive hemsidor).
  2. Lägg in länkar mellan olika delar på din egen hemsida. Tex kanske du förutom din CV-sida gör en portfolio-sida också?
  3. Gör om länkarna du nyss gjorde till en klickbar meny (tex längst upp) på din hemsida. Försök få den att se ut som en riktig meny.
  4. Gör så man kan klicka på en bild och komma till en ny sida.
  5. Gör en innehållsförteckning med länkar till olika rubriker.
  6. Testa att kombinera absoluta länkar med ankarlänkar för att länka från en sida direkt till en rubrik på en annan sida.
  7. Gör en mail-länk.
  8. Gör en lista.
  9. Lägg din innehållsförteckning i en ordnad lista.
  10. Gör en lista med en under-lista.

Övningar

  • Vad händer med följande länk: <a href="www.google.se/">Google</a>?
    • Testa om du inte är helt säker.
  • Vad betyder det när du skriver ../ i HREF-attributet en länk?
  • Vad är fördelen och nackdelen med relativa länkar?
  • Vad är fördelen och nackdelen med absoluta länkar?
  • Vad betyder det när du skriver <!-- text --> i HTML?

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *