Där finns två typer av listor jag tycker man bör lära känna för HTML-kodning, det är sorterade listor, samt o-sorterade listor.

När vi pratar listor överhuvudtaget i HTML, så finns det inte längre direkt några aktuella HTML attribut som används – förutom då klass och ID för att kunna hänvisa till listorna från CSS stilmalls koden senare, då det är i denna sen alla stilarna läggs på.

Både sorterade såväl som o-sorterade listor har en typ av wrapper som skiljer sig beroende på vilken typ av lista som skall användas, men inuti wrappern sen för att skapa sina s.k. ”list-element” som då motsvarar varje individuella rad i listorna, så kodas dessa med samma typ av tagg, oavsett om det är en sorterad, eller o-sorterad lista vi har att göra med.

Allmän användning av listor i HTML för webbsidor

Listor är utmärkta att använda oavsett det gäller horisontell, såväl som vertikal typ av listformatering av innehåll. Föreställ er t ex. listande av kontaktinformation – här kan listor, såväl som HTML tabeller vara väldigt bra för att formatera innehållet på ett snyggt och proffsigt sätt.

Om ni har varit och besökt denna sidans Länkar-sida så är det o-sorterade listor jag använt mig utav där för det mesta. Jag har även nästlat dessa så att där kan finnas en hierarkisk ordning om man vill försöka skapa något i den stilen :)

När jag tänker efter använder jag faktiskt listor väldigt ofta för mina webbsidor, det är ett enkelt, praktiskt och väldigt användbart verktyg för att presentera och formatera innehåll och information på sina webbsidor!

Menyval på webbsidor brukar vara väldigt populärt att formatera med hjälp av listor, detta då menyvalen oftast ska hänga ihop till en specifik meny för sidan, och listor låter denna meny kunna då enkelt formateras till antingen horisontell, eller vertikal, vilket man än anser passa bäst för sin egen sida.

Jag själv har använt listor på webbsidor till bl. a. följande scenario: Menyval, Länklistor, ankarlänkar för sid-innehåll, Prioriteringslistor av ”to-do’s” eller liknande, m.m.

Jag klistrar här nedan in ett citat från MDN’s referenssidor för listor som kommer länkas till senare, där de skriver om när vilken av listtyperna skall användas enligt HTML synpunkt.

Usage note: The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol>element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, else the <ul> is adequate.

Sorterade listor (<ol>)

Sorterade listor kan vara bra att använda om ni har något som skall listas i en specifik ordning och ni vill definiera att något kommer före något annat, eller att något har prioritet över annat etc.

Via CSS kommer ni senare dessutom kunna avgöra mer specifikt hur ni önskar den ”ordnade”/sorterade listan att vara presenterad – om den skall lista raderna med vanliga siffror, romerska siffror, bokstäver, eller annat. Se nedan för praktiskt exempel av hur en sorterad lista kodas i HTML:

<ol> <- ol står för "ordered list" vilket på svenska är sorterad lista
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
</ol>

Om vi nu hade skrivit in det här för en webbsida hade vi fått följande resultat:

HTML <ol>-list test – hur det ser ut i webbläsaren förhandsgranskat.

Se ovan citat för HTML synpunkt för när och hur <ol> skall användas.

För referenssida se följande MDN länk för <ol> listor.

O-sorterade listor (<ul>)

O-sorterade listor är nog den typen av lista jag använder oftast då sakerna jag brukar lista inte har betydelse i vilken ordning de är placerade. Se nedan hur dessa kodas i HTML:

<ul> <- ul står för "un-ordered list" vilket på svenska är o-sorterad lista
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
</ul>

Detta ser ut som ni kan se här nedan vid förhandsgranskning i webbläsare:

HTML <ul>-list test – hur det ser ut i webbläsaren förhandsgranskat.

Själv brukar jag använda o-sorterade listor mycket för bl. a. menyval då jag inte brukar ha någon direkt prioritet för ett menyval över ett annat :)

För referenssida se följande MDN länk för <ul> listor.

De generella list-elementen oavsett listtyp (<li>)

List-element är de element som utgör själva raderna för listorna oavsett listtyp- vare sig det är sorterad, eller o-sorterad.

Förkortningen ”li” för taggen, står för ”list-item-element”.

<li> taggen har ett attribut: value, som kan användas för att indikera ett heltals värde för utefter vilket efterföljande list element skall rätta sig efter. value attributet kan alltså ändra ordningen och hoppa över värden i en sorterad lista t ex. genom att ange ett högre heltals värde innan det var tänkt att komma i den annars standard ordningen för den sorterade listan. Se nedan exempel inspirerat från MDN’s referenssida för <li> elementet:

<ol>
    <- Notera avsaknaden av "second item" samt "first item"
    <li value="3">third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ol>

Och förhandsgranskat i webbläsaren hade vi utav detta fått:

Test av HTML list elements value attribut.

Nästlade listor för hierarkiska nivåer med listor

Nästlande av listor kan exempelvis vara när man har en vertikal meny (eller horisontell för den delen, fast i det här fallet ger vertikal ett enklare exempel att visa effekten nästlande av listor ger) som består av ”huvud-menyval” och tillhörande ”under-menyval”.

Ex:

<ul> <!-- Huvud meny -->
   <li>Huvud menyval #1
      <ul> <!-- Under meny inuti huvud menyval #1 (notera ingen </li> tagg för ovan huvud menyval #1) -->
         <li>Huvud menyval #1: Under menyval #1</li>
         <li>Huvud menyval #1: Under menyval #2</li>
         <li>Huvud menyval #1: Under menyval #3</li>
      </ul>
   </li> <!-- Slut av huvud menyval #1-->
   <li>Huvud menyval #2</li>
   <li>Huvud menyval #3</li>
   <li>Huvud menyval #4</li>
</ul>

Med hjälp av lite CSS kan man senare göra om standard-stilarna för hur sådana nästlade listor blir presenterade av webbläsaren – till en väldigt snitsig Drop-down meny :) (Kommer gås igenom i framtida inlägg hur detta kan göras)

I alla scenario där ni är i behov av en lista med flera hierarkiska nivåer så är det nästlade listor ni är ute efter! :)

Se nedan exempel på ovan kods förhandsgranskning i Google Chrome:

Förhandsgransknings exempel av nästlade listor.

HTML länkar och länkning som ett koncept, är ett av de fundamentalaste koncepten för vad som är internet, utan våra länkar hade vi inte lika lätt kunnat hitta till webbplatser på ett lika effektivt sätt, eller sprida informationen så effektivt som vi kan nu.

Våra webbplatser hade haft svårt att ha menyval som ledde till andra sidor och/eller resurser utan vår förmåga att skapa länkar. Och inte heller hade vi kunnat länka till våra vänners webbsidor eller sprida/spara information vi hittat och ansett vara av värde på internet.

Länkar och länkning för webbutvecklare är ovärderliga av många anledningar, länkning används för att inkludera script, såväl som övriga resurser och filer som bilder t ex. samt för menyval som jag nämnde ovan, men även för att binda samman flertalet webbsidor vilket brukar göras för att skapa hela webbplatser.

Själva HTML länkarna däremot brukar endast användas (för min egen del iaf.) till att binda samman undersidor via menyval för en webbplats, eller för att (numera i sällsynta fall för min del) hjälpa besökare att enkelt öppna upp deras standard e-post klient för att skicka e-post meddelande till en person vars e-post adress var länkad till från en webbsida – utan att besökaren själv behöver skriva in den personens e-post adress (detta gör e-post länken såväl som att ”prompta” deras dator att öppna deras standard e-post klient, om ingen standard klient angiven så får besökaren oftast välja själv i datorns urval av e-post klienter).

Tar vi dagens bloggar som ett praktiskt exempel på användning av HTML länkar för att vägleda besökare vidare till ytterligare innehåll (så de inte ska lämna sidan oftast) – så brukar bloggar ha inlägg som besökare kommer in för att läsa, men vissa bloggar har även s.k. ”relaterade inlägg” som länkas till för att leda besökaren vidare till ytterligare innehåll.

Länkar är också förvånansvärt enkelt att lära sig i HTML, ni har redan i tidigare inlägg (URL:er och länkadresser) fått lära er de grundläggande koncepten för hur själva länkadresserna som används vid länkning är uppbyggda och fungerar för era webbsidor.

Jag är inte helt säker, men jag tror sen även att där kan förekomma en viss laddningstids skillnad om man jämför lokala länkar som direkt navigerar inuti webbserverns utrymme för sidan, respektive globala länkar som först måste slå upp domännamnet innan samma typ av webbserver utrymmes navigering för sidan kan ske som för lokala länkar. (Detta får gärna pålästa läsare kommentera och informera mig om, om ni skulle veta hur detta verkligen ligger till tillsammans med referens till källa för er information, så kan jag sedan uppdatera detta inlägg – mitt antagande här känns för mig logiskt med mina nuvarande kunskaper)

Nog om hur det funkar, vidare till hur vi gör våra länkar dårå ;)

HTML-koden för HTML länkar oavsett lokal/global länkadress

Jag kommer här visa er själva HTML elementet som utgör HTML länkar på webbsidor, såväl som vilka attribut vi bör fokusera på för våra länkar för att kontrollera hur de fungerar. Se nedan kodexempel för en lokal respektive en global HTML länk.

<a href="subpages/undersida1.html" target="">Länktext placeras häremellan (kan vara bild såväl som text)</a>

<a href="http://www.domain.se/subpages/undersida1.html" target="">Länktext...</a>

Notera ovan hur vår globala länkadress har med http://www. såväl som: domain.se, trots att man idag oftast endast behöver ange domain.se för att nå sina eftersökta webbsidor i själva webbläsaren. (Jag skulle gissa på att anledningen att man idag ofta kan komma undan utan att behöva ange http://www. är då webbläsarna antar att man är ute efter en webbsida när de identifierar ord i URL:en)

För att läsa på ytterligare om HTML-länkar ta en titt på: MDN’s referenssida för a-taggen.

Anledningen till att vi måste ange detta för globala länkar är för att informera webbläsare att länken leder till en utanförstående webbsida (oftast, kan även leda till samma sida trots global länkformatering – ett scenario då detta kan förekomma är för dynamisk PHP-kodning av webbsidor), webbsidor hämtas och presenteras med hjälp av det s.k. Hyper Text Transfer Protokollet vilket http indikerar, och www står för World Wide Web som är lite mer komplicerat att beskriva varför den står med i URL:en, man skulle kunna tro att det är någon form av ”rotmapp” till alla Internets existerande domännamn, fast är ni intresserade av att verkligen veta mer om vad det fyller för funktion så hittade jag följande superuser forumpost som kanske kan förklara det lite mer i detalj.

Brädstreck (#) som ”Dummy-URL” för testsyfte- eller tills riktig URL skall läggas in

Brädstrecket kan anges till <a> taggens href attribut för att hänvisa till den egna sidan man befinner sig på! Vilket kan vara användbart om man ska testa CSS-stilar för de olika ”lägena” en HTML länk kan befinna sig i (mer om detta i inlägg om CSS framöver). Om man inte skulle ange # som ”dummy-URL” för en HTML länks href attribut, så finns risken att det blir svårt att testa länkarna och man blir hänvisad till felmeddelande-sidor då länkadress saknas och ens besökare i värsta fall blir allmänt förvirrade av hur de kastas omkring till sidor som inte existerar (om testsidan t ex. av någon anledning skulle vara publicerad för allmänheten/utvalda få att ta del av). Då är det betydligt bättre att låta länkarna hänvisa till den egna sidan som man befinner sig på, så kommer inte potentiella besökare bli lidande av att man testar eller har ”icke-aktiva” HTML länkar.

Praktiskt exempel på hur jag menar att man använder brädstreck som ”Dummy-URL” kan ses nedan:

<a href="#" target="_top">Länktext placeras här (eller länkbild)</a>

Ni kan även se i tidigare inlägg där jag skrev om hur ID attributet kan hänvisas till som ankarlänkar på specifika sidor, och att dessa kan besökas genom att ange URL:en för sidan där ID attributet existerar, tillsammans med ett brädstreck (#) direkt efter URL:en för sidan, tillsammans med värdet för ID attributet.

Till exempel: http://www.min-webbsida.se/index.html#paragraph2

Där index.html är sidan där ID attributet för en paragraf är ”paragraph2”.

Detta kanske förklarar lite vad brädstrecket är till för när vi talar om länkadresser.

HTML-länkars ”target”-attribut och funktionen det fyller

Notera i ovan textstycke att jag lämnade target attributet utan värde, detta var av anledning att jag inte ännu förklarat vad attributet gör/fyller för funktion.

Där var lite debatt för target som ett länkattribut när HTML5 skulle introduceras, tydligen så togs attributet bort under en tid från specifikationen, vilket gjorde att man fick krångla till det med massa JavaScript för att efterapa samma funktion som tidigare fyllts av ett väldigt simpelt attribut som target faktiskt är och har varit i alla år.

Vad target attributet då gör är alltså att tala om för webbläsaren hur en specifik länk är tänkt att öppnas… Skall den öppnas som ersättande av den sidan som besökaren befinner sig på, eller ska länken öppnas i en ny flik/nytt fönster?

Där finns sammanlagt 4 st. värden för attributet, dock har jag någonsin endast behövt använda mig utav 2 av dessa. För att läsa på om samtliga attribut och allmänt få mer information om dem, så kan ni se ovan länkade MDN referenssida.

Anledningen att jag bara använt- och använder mig av 2 av de 4 tillgängliga attributvärdena, är då de resterande 2 attributvärdena som jag inte använder fyller funktioner som jag ännu inte stött på ett behov av för mina webbsidor jag skapat tidigare. Vad jag kan förstå från MDN’s referenssidan så kan de resterande två attributen vara användbara för länkar från inuti ramar/frames av olika typer som behöver förmedla länkadresserna till ramar/frames utanför den ramen som länken är placerad i. Och idag används knappt (om ens alls) ramar överhuvudtaget, finns bättre och flexiblare sätt att koda webbsidor på idag.

Undantaget är väl kanske iFrames som vi kommer skriva om lite mer i detalj framöver, för att kort bara nämna vad skillnaden mellan iFrames och Frames är, så kan jag ju säga att iFrames är en typ av ”ram” som man lägger på sin webbsida – lite som om ni tänker er en sandlåda som läggs på er tomt (webbsidans body är tomten), därefter har man möjlighet att visa andra webbsidor, PDF:er eller liknande inuti den ramen, medan Frames förr istället användes mycket för att bygga upp strukturen för hela webbsidor som täckte hela webbläsarfönstret (oftast).

Det kan vara bra att veta översiktligt att där finns 4 st. attributvärden för target, och vad respektive gör, men jag kommer bara gå igenom de två som brukar vara populärast att utvecklare använder, nämligen:

1. _top
2. _blank

Det första attributvärdet _top ersätter den sidan besökaren tittar på just nu med den sidan som länken leder till.

Det andra attributvärdet _blank öppnar istället upp länken i en ny flik/nytt fönster, sen flikar introducerades och blev desto populärare för modern webbläsare-browsing så är det mer sällan att _blank länkar öppnas i nya webbläsarfönster, oftast öppnas de till nya flikar! Själv är jag inte helt säker på utifall det går eller ej utan JavaScript, att tala om för en länk via HTML att en länk skall öppnas exklusivt i en helt ny webbläsarfönster hellre än en enkel ny flik. Kan hända att jag kollar upp även detta till framöver inlägg som jag tänkt skriva till den här sidan :)

Mailto URL – För att hjälpa besökare skicka e-post med HTML-länkar från ens webbsida

Där finns ett sätt att hjälpa besökare lättare kontakta webbplatsens ägare och liknande, och det är genom att ange en länkadress med inledningen mailto: följt av en giltig e-post adress till webbplats administratören/ägaren. Se praktiskt exempel på en länk som kan hjälpa att skicka e-post till adressen adress@mail.com:

<a href="mailto:adress@mail.com">Nå mig på e-post</a>

Vad som då kommer hända när en sådan länk klickas, är att besökarens dator kommer försöka öppna vilket än program som datorn har angivet som ”standard e-post klient”, för att kunna göra ett nytt e-post meddelande att skicka, och i ”Till:”-fältet för det e-post meddelandet kommer där att vara förifyllt den e-post adressen som ni kodade in i er mailto-länk.

Webbsidor som inte använder PHP och där denna typ av begränsad kontaktmöjlighet/hjälp på traven är OK, duger detta, däremot om man vill ha lite mer sofistikerade sätt att skicka e-post på från sin webbsida, bör man läsa på om PHP eller liknande back-end språk som kan behandla kontaktformulär och skicka ifylld data direkt från webbservern till en inprogrammerad e-post adress.

Slutkläm

Jag ser nu att där finns en hel del attribut som jag inte går igenom här för HTML-länkar på MDN’s referenssida, och anledningen till det är dels för att detta skall vara pure basics, och dels för att jag själv ännu inte använt något annat än det jag gått igenom i detta inlägget för mina egna sidor genom åren, och därför tror jag det kan räcka med att bara gå igenom dessa detaljer för HTML länkar för den här gången :)

Kan hända att vi går in lite mer på djupet i framtida inlägg om ni skulle vara intresserade av detta, men annars tror jag att jag kommer gå vidare och fokusera på att få klart inlägg om grunderna först och främst.

Kunskaperna vi gått igenom i detta inlägg bör vara tillräckliga för att ni själva ska kunna sammanlänka era egna undersidor, såväl som att länka till era kompisars eller andra utanförstående webbsidor från era egna webbplatser! Samt hjälpa era besökare någotsånär enklare skicka e-post från era webbsidor.

Länkar är väldigt bra att känna till och ni kommer att ha användning för kunskapen genomgången i detta inlägg för samtliga av era egna webbsidor ni själva utvecklar i framtiden.

Alla webbsidor jag själv stött på såhär långt har haft någon form av länkning på ett eller annat vis, och för detta används alltid HTML-länkar som grund! Enjoy :)