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:

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.

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:

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.

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:

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

Test av HTML list elements value attribut

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:

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.

Förhandsgransknings exempel av nästlade listor.

Tjenare alla läsare!

I detta inlägg hade jag tänkt gå igenom hur vi bygger upp en webbsida från grunden utifrån en framtagen skiss steg för steg, med förklaring av var steg på vägen 🙂

Detta är en väldigt viktig kunskap att ha och känna till, speciellt om ni siktar på att jobba lite mer “professionellt” inom webbutveckling framöver.

– För att styrka vad vi tidigare visat upp med indentering för lättläsligare kod, såväl som HTML5 semantiska element för bättre markup, så kommer vi i detta inlägg använda oss av dessa principer som visats i tidigare inlägg.

Vi kommer att använda oss utav de följande HTML5-elementen för att märka upp vår sida: <header>, <nav>, <article>, <section>, <aside> och <footer>

Detta är dock bara tippen av isberget, den allra första “mallsidan” som sen kan kopieras och återanvändas till även resterande sidor för vår webbplats.

Låt oss börja med vår skiss av webbplatsens layout!

Ni kan göra er egen skiss om ni vill avvika lite från den layout jag kommer att använda här i detta exemplet. Då kan ni sedan se hur jag bygger upp min skiss i HTML, så kan ni sen göra detsamma med er egen! 🙂

Visualisera och planera hur ni vill att er webbplats layout skall vara

Wrapper-div för att binda samman alla element till samma layout

Låt oss göra en väldigt basic skiss som har en “wrapper-div” som omsluter alla våra HTML5-element som skall bygga upp vår sida så att de “binds samman” till en och samma layout-behållare (vår wrapper that is).

Sidhuvud inkluderat logotype, kontaktinfo och nav-meny

Sedan vill vi även ha en <header> överst på sidan, inuti vilken vi tänker ha en Logotype, samt den viktigaste kontaktinformationen till mig/er/ett företag, och undertill skapar vi sedan en horisontell <nav> meny.

2-kolumns layout för innehålls-delen för sidan

Därefter skall vi ha vårt innehåll, och då tänker jag köra på en 2-kolumns layout där vänster-kolumnen utgör vår sidans själva innehåll, medan högersidan utgörs av vår <aside>-sidebar.

Sidfot inkluderat Copyrighttext + eventuella “mini-knappar” till övrig info för sidan

Under dessa 2 kolumner vill jag ha min <footer> som skall innehålla bland annat en Copyrighttext och ev. “mini-knappar” till extra information om webbsidan eller relaterade delar.

Skissa…

Jag kommer att skissa upp min webbsidas layout i Microsoft Paint (mspaint CMD) i Windows 7, men ni kan likaväl använda Photoshop, GIMP, ett vanligt papper, eller annat ritprogram, eller vad ni än själva föredrar 🙂 Det viktigaste är att ni själva kan få en bild av hur ni tänkt er att sidan ska se ut, som ni sedan kan referera till under utvecklingsprocessen.

Skissen är mer för er egen skull än någon annans, det är ju trots allt er “ritning” av hur ni skall bygga upp er webbsida.

Se hur min skiss blev med inkluderade anteckningar om layoutens detaljer nedan:

Min skiss av webbsida struktur för verklig hemsida

Som ni kan se har jag inkluderat en hel del detaljer – och av dessa detaljer att döma så verkar webbsidan jag avser att skapa- likna en bloggsida/företagssida eller något i den stilen.

Hursomhelst, min skiss är detaljerad mest för er skull, men även lite för min egen så att om jag kommer på vilka detaljer av sidan som skall gälla när jag väl skissar sidan, så kan jag även komma ihåg dem/ha en referens till dessa(!). För när jag väl börjar jobba med att bygga upp strukturen för webbsidan kan det vara behändigt att ha dessa tillgängliga att referera till.

Börja realisera layouten i faktisk HTML-kod!

Steg #1 – Låna inspiration från tidigare HTML5-mall vi gjorde

Så, då t ycker jag vi är redo att påbörja arbetet 😉 Jag kommer att börja med att låna mallkoden från HTML5Doctor som vi gick igenom i inlägg: Introduktion till HTML – Basic Boilerplate/template/mall att utgå från.

 

Kom nu också ihåg att vår CSS-stilmall som inkluderas kommer att än så länge endast innehålla Eric Meyers CSS-Reset v.2.0 (vilket inkluderar HTML5Doctors-mallens On-page CSS-block kod för normalisering av HTML5-element): http://meyerweb.com/eric/tools/css/reset/.

CSS-stilarna för denna webbsidan kommer att gå igenom i ett separat inlägg för att kunna fokusera på vår struktur i det här inlägget, annars hade detta inlägg blivit alldeles för långt är jag rädd. Jag kommer att försöka länka till inlägget med CSS-stilarna för detta inläggets sida i slutet av denna post så ni med enkelhet kan hitta dit.

Steg #2 – Omsluta sid-elementen i en Wrapper

Nu när vi har vår grundmall (skönt att slippa skriva om den och googla om man glömt sen tidigare – sparar en hel del tid (dock om ni skulle vara helt nybörjare i webbdesign och webbutveckling Råder jag er att skriva mallen för hand(!), istället för att kopiera koden rakt av – gör alltid detta för moment ni är ovana vid, skriv det tillräckligt många gånger och jag lovar er att förståelsen hakar på efterhand)), så har det blivit dags för att lägga in vår “Wrapper-DIV” för sidan som skall omsluta alla våra HTML5-element som skall utgöra själva strukturen av vår uppskissade webbsida.

Det är väldigt god praxis att alltid ha en Wrapper-Div av många anledningar, varav ett exempel är att det blir enklare att styra vart var och ett av våra HTML5-Element skall placeras på skärmen med hjälp av CSS senare.

Se nedan HTML5-kod för mall + vår “Wrapper-DIV”:

Notera att kommentarer jag inkluderar är för er förståelses skull främst. Brukar normalt sett annars inte ha med dessa typer av kommentarer då jag anser att det endast brukar bli nödvändigt vid djupgående hierarkiska strukturer då man t ex. behöver förtydliga vart somliga DIV-behållare slutar, och vart andra börjar (oftast är det dock bara slutet av en behållare man är intresserad utav).

Steg #3 – Generell yttre struktur

Nice, då är vi klarar med vår Wrapper-Div, dags för nästa steg – vilket blir att skapa själva strukturen inuti denna wrapper. En struktur som utgörs av en <header> tagg, en “content-behållare-wrapper” med <article> tagg och en <aside>-sidebar, såväl som vår <footer> tagg.

Som ni kan se ovan byggde jag vidare på vår “wrapper-Div” så den nu har <header>-området, såväl som en “content-wrapper-section” där vi senare skall placera vår <article> såväl som <aside>-sidebar. Anledningen att jag lagt en “inre wrapper” även där för att omsluta även dessa på en närmare nivå, är också för hjälp med positioneringen och utökad kontroll över våra HTML5-element.

Notera att jag tilldelat båda våra Wrappers fetstil såväl som ID-attribut för att senare i CSS kunna med enkelhet urskilja dessa såväl som att mer precist kunna sikta in oss på deras barn-element som de omsluter.

Ovan kodsnutt demonstrerar även hur jag tänkt i mån av syntax highlightning för att lättare kunna visa för er de olika delarna i HTML-koden, taggarna kommer att vara fetstilsmarkerade med mörkgrå färg, textinnehåll kommer få blå färg, kommentarer kommer även dessa bli fetstilsmarkerade, fast med en mildare grå färg då kommentarerna inte är den kod av mest vikt i exemplet, och behöver därför heller inte uppmärksammas lika mycket. HTML-attributen kommer att markeras med grön textfärg, medan deras attributvärden kommer att bli svart-markerade för att lättare urskiljas.

Nu går vi vidare till att fylla vårt <header>-område med ytterligare innehåll och delar av sidan:

Steg #4 – Fylla Sidhuvud med innehåll som: Logo + slogan, Kontaktinfo & Meny

Jag ville ha en Logotype såväl som ett litet område där jag kan placera kontaktinformation som kan vara lättillgängligt för alla besökare att ta del av – och det är dessa delar vi skall koda i denna del av inlägget.

Jag väljer också att ha en Text-&-CSS-Baserad Logotype på sidan med <h1> tagg för sökmotoroptimeringens skull såväl som en liten tillhörande “slogan” undertill vår logga.

När det gäller kontaktinformationen så kommer denna att omslutas inuti en <section> där själva kontaktinfon kommer att formateras som antingen en <table> tagg eller <ul>-lista eller <p> tagg som håller informationen.

Alla val jag gör av att presentera HTML5-Struktur kommer vara för att kunna göra det på ett så tydligt sätt för er som läsare som möjligt såväl som att demonstrera lite varierande kod av hur det kan skrivas 🙂

Låt oss börja, se nedan:

För mer info om t ex. <strong> och övrigt om HTML5-semantik och hur man på bästa sätt nyttjar och kan använda det för att ge sitt webbinnehåll en starkare och mer betonad betydelse- se: learn.shayhowe.com – HTML5 Semantics.

Som ni ser ovan tog jag mig även friheten att fylla mitt <header>-område med det jag önskar ha där – såsom h1-logo, p-slogan, samt kontaktinfo formaterat i en ul-lista och även våra huvud-menyval som skall hjälpa våra besökare att navigera till sidans undersidor 🙂

Kontaktinfon är förgylld med HTML5-semantik för “mini-headlines”/de viktiga delarna, och har även lagt in ett väldigt basic fix för att robotar som crawlar in på sidan inte skall bara kunna sno en e-post adress rakt av och lägga till i kedjebrevs mejl-listor etc. (se <span>-taggen för E-mail). <span>-taggen är väldigt bra för att göra “inline-justeringar” av innehåll typ som att lägga till tillfälliga inline-CSS-stilar för testing eller annat, eller som ovan lägga till title-text för ett specifikt textstycke, osv.

Fick även lägga in en clearfix innan vår meny börjar då jag tänker flyta ut vår logo till vänstersidan, och vår kontaktinfo-område till högersidan – medan huvudmenyn är tänkt att sträcka sig över hela bredden och Inte flyta någonstans. Då måste man “återställa”/”resetta” vår float-egenskap som CSS kommer använda sig av för att flyta ut logo och cInfo områdena vid positionering av dessa. Och det görs via ett attribut i CSS kallat “clear” och man brukar ofta använda denna metodik för utflytnings positionering av HTML-element och därför brukar man ha en klass kallad “clearfix” som man bara kan lägga på ett <div>-element eller liknande för att återställa allting innan nästföljande element som skall vara utan float kommer – detta måste göras då float-attributet “smittar av sig” till nästföljande attribut om det inte blir stoppat innan!

Hoppas ni har hyfsat enkelt att följa med än så länge, vet att det kan bli lite rörigt 🙂

Vidare till nästa moment: vår innehålls del med vänsterspalts <article> och högerspalts <aside> sidospalt:

Steg #5 – Fylla vår innehålls-del av webbsidan

Vi skapar här en <article> för vår vänsterspalt inuti vår content-wrapper-div, såväl som en <aside> (HTML5-Semantisk) sidospalt för vår högerspalt.

Se nedan:

Phew det var inte nådigt ;o

Dummytexten ni kan se fåtalet meningar av ovan var genererad från Lipsum.org – Lorem Ipsum generator, som även kan hittas på vår Länkar-sida – väldigt användbart webbverktyg för att fylla ut sina annars tomma hemsidor och prototypsidor.

Blev en hel där när vi nu gjort både en vänsterspalt, såväl som en högerspalt 😛

Nu har vi bara den absolut sista delen kvar – nämligen footern/sidfoten:

Steg #6 – Footer med Copyrighttext + 3 st. sektioner för övrigt innehåll

Vi skall här lägga till en paragraf med Copyrighttext i sidfoten av vår sida, såväl som 3 st. sektioner undertill som i framtiden kan hålla länkar, eller övrig data.

Som ni kan se i ovan kod använder jag mig av 2 st. olika HTML-Special characters som är &copy; <- som ger oss det där ©-tecknet, såväl som &bull; som ger mig en fin • <- prick-ikon som man kan använda t ex. som avskiljare “inline”.

Såja, då tror jag vi nästan är klara med detta inlägget – nu har vi gått igenom steg för steg hur man kan skapa en hel struktur för en HTML5-Webbsida – vad som återstår nu dock för att vara korrekta – är att validera vår sida i W3C HTML5-Validator så vi är säkra på att koden inte är fel på något ställe.

Steg #7 – Validera HTML5-koden så att den följer standarden och inte är felkodad på något ställe!

Vår inklistring av HTML5-koden i W3C HTML5-Validator gav oss följande för ovan webbsida:

W3C HTML5 Validation av webbsida strukturs kod

Dock skriver den att vi fick 9 stycken “varningar” – dessa brukar vara av typen som man kan strunta i oftast – då man får många varningar om man använt saker som kanske ännu inte fullt ut blivit antaget till HTML5-standarden utan kanske bara är experimentellt, eller om man avviket för hur standarden tänkt att ett element avses att användas – det var detta vi fick varningar för – se nedan:

HTML5 Validation warnings

Dock som ni även kan notera så är alla varningarna för hur vi har använt sections – dock under varningarna står det att vi ändå fått validerat till HTML5, alltså är det inga problem. Och i felmeddelandet kan vi också se att de bara antagit att eftersom vi använde <section> så borde dessa inkludera någon form av underrubriker – men det skulle vi ju inte ha, så allt är lugnt.

Skulle det dock vara som så att ni stör er på dessa “varningar” så kan ni ersätta våra <section>:s med <div>-element istället.

Steg #8 – Förhandsgranska er sida och se resultatet av ert hårda arbete 🙂

Som ett litet extra “treat” så kommer jag visa på hur sidan kan komma att se ut senare med CSS-stilar såväl som hur den ser ut just nu utan några som helst CSS-stilar, för det se nedan:

Första webbsidan förhandsgranskning utan några som helst CSS-stilar

Om vi lägger på ett lager med CSS-stilar hade sidan istället kunna se ut något liknande det ni kan se nedan:

Förhandsgranskning av första sida Med* CSS-Stilar

Det viktigaste verktyget för en webbdesigner och webbutvecklare tror jag är att kunna visualisera sig hur sidan skall se ut innan man börjar bygga den!

Speciellt om du siktar på att bli framgångsrik inom området.

CSS gör skillnad som ni kan se ovan ^^ Väldigt kraftfullt att lära sig för webbutveckling och webbdesign! Ett Måste att lära sig för webbdesign och webbutveckling om du frågar mig :)!

Tidigare i inlägget lovade jag att delge er CSS-stilarna som gjorde ovan HTML-kod till sidan ni kunde se med CSS-stilar nu här på slutet, dessvärre upptäckte jag nyss att dessa stilar förmodligen tappats bort, då jag inte verkar kunna hitta dem någonstans överhuvudtaget. CSS-stilar för hela webbsidor (eller kanske till och med återskapandet av CSS-stilarna för ovan webbplats utseende kan komma att dokumenteras för er att ta del av i framtida inlägg om CSS-kodning).

Slutkläm

I detta inlägg har jag använt mig av många taggar, attribut och attributvärden som vi inte ännu gått igenom, och för den ambitiösa kanske detta kvittar då ni förmodligen redan kollat upp vad allting gör och hur det kan användas, men för alla andra som hade behövt kanske lite extra hjälp att komma in i allting så lovar jag att gå igenom alla saker vi använt oss utav här idag i andra inlägg framöver. Syftet med detta inlägget var ju trots allt att få se en demonstration av processen att skapa en webbsida från scratch, och det tycker jag ändå vi har lyckats täcka med det här inlägget.

Tack för ert tålamod att följa med under hela detta långa inlägg 🙂 Tills nästa gång – experimentera själva och koda på bara 😉

Practice makes perfect.