Kategori: HTML

HTML Länkar – Hur man sammanlänkar undersidor till att skapa en webbplats samt länkar till filer och resurser, såväl som hjälper besökare skicka e-post från ens webbsida

12 juni, 2015 av Trekka12·0 kommentarer

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:

_top
_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 :)

Introduktion till On-page sökmotoroptimering (SEO) – HTML5-Semantiken och vikten av det/hur det kan bidra till on-page sökmotoroptimering

5 juni, 2015 av Trekka12·0 kommentarer

I denna del av inlägget kommer jag att hänvisa till en mycket användbar och bra webb-referenssida hos learn.shayhowe.com som i detalj går igenom viktiga saker värda att ha koll på för HTML(5) semantik.

När vi pratar blockelement och en webbsidas struktur så kom HTML5’s kod-standard med en del nya tillskott som ni redan fått se som hastigast i tidigare inlägg, men som kanske inte diskuterats i detalj med fokus på deras semantiska sida.

Varför nya element med HTML5?

Utvecklarna av den nya HTML5 standarden gjorde som sagt undersökningar för att ta reda på vilka som var de vanligaste klasserna och ID som användes för strukturella element som t ex. <div> på webbsidor över hela internet. Detta ledde till att man hittade ett antal klasser och ID som återkom oftare än andra, och man beslutade därför att förenkla genom att skapa nya element för dessa typer av blockelement så att man slipper ständigt ange samma klasser och ID för massa olika webbsidor.

Då skapades:

<header></header> som ersättare till <div id="header"></div> t ex. för sidhuvud
<footer></footer> som ersättare till <div id="footer"></div> för sidfot
<aside></aside> som ersättare till <div id="aside"></div> (sidebar/sidospalt)
<article></article> som ersättare till <div id="article"></div>
<section></section> som ersättare till <div></div> eller <div id="section"></div> eller <div class="section"></div> (sektionsavdelare)
<nav></nav> som ersättare till <div id="nav"></div> (navigations område)

De nya elementen (tycker jag iaf.) är betydligt mer utvecklar-vänliga och sparar en hel del tid, såväl som förser webbdokument i allmänhet med en bättre arsenal av strukturella element. De förmedlar också på ett bättre sätt för både utvecklare, såväl som indexeringsrobotar vad elementet är till för på webbsidan (indexeringsrobotarna kunde inte läsa och förstå ID och klass attribut, däremot kan de läsa och ”förstå” taggnamn).

Därför säger jag att vi får nu ta vara på att vi äntligen fått bättre semantiskt bestyckade element att märka upp våra webbsidor med, dissa <div> taggar och extra- nu överflödiga: ID och klasser, som inte längre behövs nu när vi har våra nya element ;)

Översikt av de nya HTML5-elementen

HTML5Doctor är en bra referenssida om ni vill ha en översikt av de nya taggarna och ni kan även besöka deras HTML5-Element Index för uppsökande av specifika, eller generell översikt av samtliga nya taggar – de står listade i bokstavsordning.

Uppgradera er utdaterade element-arsenal med nya fräscha semantiska HTML5-element!

Läs gärna på lite på HTML5-Element indexet som HTML5Doctor erbjuder och fyll på ert HTML-taggs förråd med de senaste nya taggarna och börja använda de så ofta ni får möjligheten för bättre semantisk och sökmotoroptimerings anpassad HTML5-kodning.

Det finns alldeles för många nya tillskott för att hinna gå igenom i detta inlägg, dock kommer jag som jag nämnde ovan hänvisa till några väldigt användbara punkter som jag själv haft stor användning för som learn.shayhowe.com HTML5-semantics hjälpte till att förtydliga för mig.

Tips: Då HTML5 fortfarande är relativt nytt och saknar stöd i vissa webbläsare, kolla vad som funkar vart

Ett tips också innan jag går igenom det så kan jag rekommendera er att kolla upp webbläsarstöd för de nya HTML5-element ni tänker använda via antingen CanIUse.com eller QuirksMode.org Browser Compatibility Tables då vissa av de nya HTML5-elementen är bättre implementerade i somliga webbläsarna än andra!

Och nu för att gå vidare och kolla på textspecifika semantiska inline-element som kan vara användbart att känna till:

Förklaring och uppvisning av semantiska skillnader i HTML5-element

Två alternativ för att få fetstil på sin webbsidas text, med olika semantiska betydelser!

De två HTML(5)-element vi har att jobba med är <strong> & <b>. Dock skiljer dessa sig åt ganska mycket i mån av semantisk betydelse.

<strong> används för att markera ”Stark viktighet” / ”Strong Importance” på engelska. Medan <b> istället används för att avse en ”stilistisk fetstil” utan direkt innebörd.

Nedan kan ni se citat från hur learn.shayhowe.com förklarar detta i kod:

<!-- Strong importance -->
<strong>Caution:</strong> Falling rocks.

<!-- Stylistically offset -->
This recipe calls for <b>bacon</b> and <b>baconnaise</b>.

Två sätt för att få kursiverad text på sin webbsida, med olika semantiska betydelser!

De två HTML(5)-element vi har att jobba med för detta är istället <em> & <i>. Dessa skiljer sig på liknande sätt som ovan två valsalternativ för fetstils text-märkning.

<em> används för att markera något av ”stressad vikt/betydelse” / ”Stressed Importance” på engelska. Medan <i> hellre avser att markera en annorlunda/alternativ ”röst/ton” och används mer i dialog-sammanhang & talspråk för innehåll.

Nedan kan ni se citat från hur learn.shayhowe.com förklarade detta i kod:

<!-- Stressed emphasis -->
I <em>love</em> Chicago!

<!-- Alternative voice or tone -->
The name <i>Shay</i> means a gift.

För att läsa på mer om olika semantiska skillnader mellan liknande funktionella HTML(5)-taggar så kolla gärna vidare på learn.shayhowe.com’s genomgång av HTML5-semantik då den artikeln även går igenom saker som: Understrykning av text, Genomstrykning av text, Upplysning/Highlightning av text, Förkortnings markering i text, Upphöjning (superscript) av text och Nedsänkning (subscript) av text – t ex. nedsänkning vid representation av H2O hade blivit: H₂O, medan en upphöjning istället t ex. vid användning av kvadratmeter (m2) hade kunnat se ut som: m². Sedan går artikeln även igenom saker som: Framstegsmätare (progress-meter), semantisk uppmärkning av tid & datum, hur man presenterar kod på webben, såväl som linje- och ord-brytningar (<wbr> & <br>), Citering, m.m.

Genomgång av Semantisk märkning av textinnehåll med <h1>-rubriker och <p>-paragrafer för textstycken:

När man skriver texter så är ovan visade genomgångar av kursivering och fetstil väldigt användbara och viktiga, men det är även simplare och mer direkt semantisk uppmärkning som Rubriker (via <h1>, <h2>, <h3>, osv.), såväl som paragrafer/textstycken (<p>), sektions-avdelare/skiljestreck (<hr />) för att distinkt markera brytstället där en del av sidan övergår till en helt annan del av sidan, m.fl. andra.

Dock så tänkte jag bara snabbt gå igenom vikten av Rubriktexter och deras innehåll då även detta är en Väldigt viktig del inom On-page sökmotoroptimering!

Den ”första” rubriktexten tillgänglig är <h1> och är då den som är av störst vikt och sedan dalar viktigheten för resterande rubriktexter tillgängliga för varje steg man går – notera dock! att <h2> t ex. är en typ av underrubrik till <h1> och bör användas som sådan!

Ett praktiskt exempel – skulle ni ha en <h1> rubrik för er logotype om ni valt att köra den ”textbaserad” som jag själv brukar göra då detta är lättare att sökmotoroptimera jämfört med en bild som praktiskt taget inte går att indexera för sökmotor-bottarna så skulle <h2>-taggarna kunna användas för sid-innehållets första rubriker då de är underrubriker till sidan – men detta är lite av en tolkningsfråga och är helt upp till er hur ni väljer att tolka sidans struktur – tänk bara på att den struktur ni väljer att köra sidan utefter – är även den struktur indexeringsrobotarna kommer att uppfatta!

Men jag skulle nog annars vilja påstå att <h1>-taggen och dessa rubriktexts-elementen kommer någonstans efter <title>-taggen i vikt när det gäller On-page sökmotoroptimering!

Introduktion till On-page sökmotoroptimering (SEO) – <img> taggens ”alt”-attribut och dess funktioner/syfte för on-page sökmotoroptimering såväl som annat

4 juni, 2015 av Trekka12·0 kommentarer

HTML5-bildtaggen (<img>) har ett attribut som krävs för att få en sida validerad enligt HTML5-kodstandard, som är: ”alt”-attributet.

Detta är bra att ha med för att dels få sidan validerad – men även för två andra syften, nämligen: talsyntes och sökmotoroptimering.

Bilddata för indexeringsrobotar

För bilder på webbsidor så gäller samma sak för indexeringsrobotar såväl som blinda personer i stort sett (nästan) – de är väldigt intet-sägande såvida du inte specifikt får dina bilder att tala om för de personer utan möjlighet att se dem – just vad bilderna föreställer. Och detta kan man då göra med hjälp av ”alt”-attributet som låter dig som utvecklare ange en alternativ text till bilden utifall den inte skulle kunna laddas in, visas eller om besökaren på sidan använder talsyntes t ex.

Om ni har möjlighet och SEO är av vikt – föredra ren text över bilder med text!

När du skriver värdena till dina ”alt”-attribut för bilderna så kan det vara värt att hålla detta i åtanke. Detta är också en av anledningarna att jag själv har börjat föredra att använda HTML-Text + CSS för mina logotyper på mina webbplatser, för sökmotoroptimeringsskäl, då ”alt”-attributet är enda möjligheten att sökmotoroptimera en bild. Jag brukar sätta mina textlogotyper i sådana fall som <h1> taggar för att ge störst ”rubriktexts-vikt” sökmotormässigt på sidan. Alla andra rubriker efter logotype-rubriken följer sen med <h2> som ”underrubriker” till själva sidans logotype. Vissa kanske anser detta fel, andra kanske tycker det är OK, det funkar för mig så jag kör på det tills någon annan ger mig anledning att överväga annat tillvägagångssätt :)

Alternativ text visas vid misslyckad laddning av bild

Ni kan själva testa detta genom att med vilje, ange en felaktig src-url för bilden på er sida, har ni angett bredd och höjd då, så kommer ni i vissa webbläsare att kunna se en ruta med en tunn kantlinje med just de dimensionerna ni hade angivit för bilden, tillsammans med er ”alt”-attributs textvärde inuti rutan där bilden egentligen skulle visats.

Alternativ text hjälper blinda bilda sig en uppfattning om bilder på webben

Alternativ texten som anges till bilder är det enda hjälpmedlet blinda personer har för att förstå vad bilden ni visar på er webbsida föreställer. Utan alternativ texts attributvärdet så har de lika mycket att gå på, som om bilden inte existerat överhuvudtaget.

Alternativ text för bilder läses av indexeringsrobotar som innehåll

Alternativ texten som ni angivit till era bilder används som sagt inte bara för att visa ”fallback-innehåll” för utifall bild inte kunde visas, eller bidra med talsyntes kontext för blinda som besöker ens webbsida, utan även indexeringsrobotarna som crawlar igenom er sida i jakt på innehåll att indexera till sökmotorjättarna kommer att läsa och indexera alternativ texten för bilderna – då även indexeringsrobotarna har svårt för att tolka bilddata.

Sammanfattning – Alt text värt att ha i åtanke av många anledningar

Detta innebär att du bör skriva din alternativ-text (alt-attribut) med alla dessa 3 faktorerna i åtanke(!) – texten skall vara anpassad att beskriva bilden för blinda personer och deras talsyntes som då kommer att läsa upp bild-alternativ-texten (speciellt viktigt om du vet att din sida kommer ha blinda besökare, kan anses vara minst lika viktigt trots att ni siktar in ert innehåll på seende individer – som en artighetsgest till alla som är blinda och surfar nätet som alla andra, det är trots allt inte så mycket jobb att lägga till en alt text), såväl som för indexerings robotarna så de får ytterligare innehåll som kan indexeras till sökmotorerna och ytterligare förbättra sökmotoroptimeringen av din sida. Samt anpassa texten som substitut utifall bild skulle misslyckas att laddas in på din webbsida.

Introduktion till On-page sökmotoroptimering (SEO) – Inledning och allmän introduktion till sökmotoroptimering

2 juni, 2015 av Trekka12·0 kommentarer

Jag har de senaste åren både läst på- och provat på i praktiken olika metoder när det kommer till sökmotoroptimering (on-page), och har fått hyfsad koll på vad som håller tyngst vikt och hur sökmotorer indexerar en sida och dess innehåll utefter meta taggar, innehållsformatering, ordval, rubriker, m.m.

Jag tänkte här dela med mig av viktiga kunskaper för att ni själva sen ska ha god förståelse för vad som spelar roll för bra sökmotorresultat hos t ex. Google, och vad olika delar fyller för specifik sökmotoroptimerings funktion och för att ni själva sen ska kunna applicera dessa kunskaperna till era egna webbsidor i framtiden!

Är sökmotoroptimering något som ni finner extra intressant del av webbutveckling som ni gärna vill lära er mer om och känna till bättre bör ni läsa MOZ.com’s väldigt insiktsfulla SEO artikelsamlingsguide för området: http://moz.com/beginners-guide-to-seo

Allra första man bör tänka på: Nyckelords-research

Om du är precis i början av att skapa en egen webbplats bör du göra nyckelords-research, med vilket jag då syftar till att ni beger er ut på Google och/eller andra sökmotorer och söker på termer/ord som ni tänkt er att representera er egen webbsida. På så sätt ser ni om där redan finns mycket annat ute på webben som redan täcker dessa ord och termer, eller ej.

Detta är ett bra sätt att bilda sig en uppfattning om hur man kan på bästa sätt bygga ett starkt märke ute på webben – risken är att om era ord och termer redan får väldigt många träffar från andra webbplatser, så innebär det att att det kan bli aningen svårare att sen få er egen sida att dyka upp bland de övre resultaten som redan i nuläget visas vid sökning (eventuellt – det finns alltid undantag – t ex. om ni sökmotoroptimerar er sida bättre än de sidorna som redan ligger ute så har ni kanske fortfarande en god chans att klättra högre upp bland sökresultaten).

Om ni redan har en sida med domän, innehåll och allting som ni vill sökmotoroptimera så kan fortfarande en nyckelords-research vara smart att göra för att se vilken konkurrens ni har där ute på webben i dagsläget, ni kan också med hjälp av detta upptäcka om synonymerna för samma ord/termer är lika uppmärksammade i sökresultaten, eller ej – om inte, kanske det är värt att överväga ett byte till synonymerna att representera er sida, då mindre konkurrens på webben?

Här är det även värt att nämna att om ni skulle övergå till synonymer till era nyckelords termer/ord så bör ni vara uppmärksamma på att era besökare med stor trolighet känner till synonymerna och troligen kommer att söka på dessa – för det är ganska meningslöst att byta nyckelord/termer utifall ingen av era tänkta besökare känner till dessa (tänk vad som är vanligt känt bland era kunder/besökare).

Härnäst (speciellt för ny sida): Val av domännamn och dess vikt (SEO-mässigt)

Det som brukar ha HÖGST vikt när det gäller sökmotoroptimering är URL:en, och därmed- Domännamnet, såväl som Permalänkar och deskriptiva/informativa länkadresser.

Innan man kan göra något annat på webben, behöver man ju en webbserver/webbhotell där man har utrymme att publicera sitt webbinnehåll till, men sen underlättar det om man även har ett Domännamn som är besökar-vänligt och väl genomtänkt.

Många underskattar hur mycket domännamnet spelar in för sökmotoroptimering, det är den Allra Högsta ranken inom sökmotoroptimering, den väger in mer än rubriker, TITLE-taggen, frekvent använda ord i innehållet, meta taggar, eller något annat.

Om du t ex. vill vara ”the king of the hill” för termen: elegantclothes, så finns där inget bättre sätt att bli det på, än att köpa ett domännamn där termen elegantclothes är i fokus. T ex. http://www.elegantclothes.com <- hade varit optimalt.

Nu finns där ju förvisso även andra domäner än .com, vilket gör att man fortfarande kan få konkurrens på namnet, och folk som vet vad de gör kan säkert även få en webbsida utan termen elegantclothes i domännamnet att komma högt upp i sökresultats rankingen.

Men man måste vara vaksam när man väljer sitt domännamn, där finns mycket som väger in på vad som gör ett bra domännamn: det ska vara lagom att skriva (gärna lättare än lagom), vilket innebär: inte för långt, inte för kort (kort är OK så länge det inte är något svårförståeligt eller okänt ord/term/påhittad förkortning eller liknande – även här: tänk på vad dina besökare har kunskap om och kan skriva in för att komma till din sida). Domännamnet ska även gärna vara enkelt att memorera (idag kanske detta kvittar då de flesta (inkl. mig själv) använder Google även om man kan domännamnet om man t ex. är osäker på om det var .se eller .com, för att slippa hamna på fel sida, osv.), m.m.

Efter domännamnet kommer <title> taggen

TITLE-taggen håller också stor vikt när vi pratar sökmotoroptimering, oftast brukar den synas som rubriktext för sökresultat på t ex. Google’s sökresultat sida.

En kvick introduktion till Varför TITLE-taggen är så viktig för on-page sökmotoroptimering är då som nämnde ovan, men i och med detta så innebär det att innehåll man placerar i sin TITLE-text kommer dels att vara det första en potentiell ny besökare kommer se när de får upp sidan med sökresultaten, då rubriken av sökresultatet för din sida är just det- TITLE-taggen. Och detta innebär att man kan placera de viktigaste nyckelorden i TITLE-texten, såväl som fraser eller annat man vill skall vara fronten för ens webbsida.

För att visa med exempel och så, har jag valt att tillägna ett helt inlägg åt TITLE-taggen och dess roll inom on-page sökmotoroptimering, så vänligen se nästa inlägg för mer information ;)

I resterande inlägg för on-page sökmotoroptimering kommer jag även att gå igenom goda praktiker och rekommenderade måttstockar som kan vara goda att följa för t ex. antal tecken för TITLE-texten, meta-description, etc.

Introduktion till HTML – Hur man strukturerar upp en webbsida från scratch med skiss och HTML5-semantiska element som: header, nav, footer, aside, article och section

28 maj, 2015 av Trekka12·2 kommentarer

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:

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vår egen första HTML5 webbstandard-validerade Mallsida</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>

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”:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vår egen första HTML5 webbstandard-validerade Mallsida</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <!-- Here starts our Wrapper DIV -->
    
</div> <!-- Here ends our Wrapper DIV -->
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vår egen första HTML5 webbstandard-validerade Mallsida</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <!-- Here starts our Wrapper DIV -->
    <header> <!-- Here starts our Header -->
        
    </header> <!-- Here ends our Header -->
    <section id="content-wrapper"> <!-- Here starts our Content-Wrapper-Section -->
        
    </section> <!-- Here ends our Content-Wrapper-Section -->
    <footer> <!-- Here starts our Footer -->
        
    </footer> <!-- Here ends our Footer -->
</div> <!-- Here ends our Wrapper DIV -->
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vår egen första HTML5 webbstandard-validerade Mallsida</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <!-- Here starts our Wrapper DIV -->
    <header> <!-- Here starts our Header -->
        <section id="logoSection"> <!-- Here starts our Logo Section Wrapper -->
            <h1 id="logo">Logo-text goes here</h1>
            <p id="slogan">This is our Company/Blog Slogan.</p>
        </section> <!-- Here ends our Logo Section Wrapper -->
        <section id="cinfoArea"> <!-- Here starts our contact info area Wrapper -->
            <ul id="cinfo">
                <li><strong>E-mail:</strong> test<span title="exchange -[at]- with @">-[at]-</span>dummy.com</li>
                <li><strong>Skype:</strong> testing_dummy</li>
                <li><strong>City:</strong> TestingTown</li>
            </ul>
        </section> <!-- Here ends our contact info area Wrapper -->
        <div class="clearfix"></div> <!-- Necessary to clear any floats (CSS-positioning) from earlier elements -->
        <nav id="mainMenu"> <!-- Here starts our MainMenu Wrapper in HTML5-Semantic -->
            <ul>
                <li><a href="#">Menyval #1</a></li>
                <li><a href="#">Menyval #2</a></li>
                <li><a href="#">Menyval #3</a></li>
                <li><a href="#">Menyval #4</a></li>
            </ul>
        </nav> <!-- Here ends our MainMenu Wrapper in HTML5-Semantic -->
    </header> <!-- Here ends our Header -->
    <section id="content-wrapper"> <!-- Here starts our Content-Wrapper-Section -->
        
    </section> <!-- Here ends our Content-Wrapper-Section -->
    <footer> <!-- Here starts our Footer -->
        
    </footer> <!-- Here ends our Footer -->
</div> <!-- Here ends our Wrapper DIV -->
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vår egen första HTML5 webbstandard-validerade Mallsida</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <!-- Here starts our Wrapper DIV -->
    <header> <!-- Here starts our Header-wrapper for Entire Header -->
        <section id="logoSection"> <!-- Here starts our Logo Section Wrapper -->
            <h1 id="logo">Logo-text goes here</h1>
            <p id="slogan">This is our Company Slogan.</p>
        </section> <!-- Here ends our Logo Section Wrapper -->
        <section id="cinfoArea"> <!-- Here starts our contact info area Wrapper -->
            <ul id="cinfo">
                <li><strong>E-mail:</strong> test<span title="exchange -[at]- with @">-[at]-</span>dummy.com</li>
                <li><strong>Skype:</strong> testing_dummy</li>
                <li><strong>City:</strong> TestingTown</li>
            </ul>
        </section> <!-- Here ends our contact info area Wrapper -->
        <div class="clearfix"></div>
        <nav id="mainMenu"> <!-- Here starts our MainMenu Wrapper in HTML5-Semantic -->
            <ul>
                <li><a href="#">Menyval #1</a></li>
                <li><a href="#">Menyval #2</a></li>
                <li><a href="#">Menyval #3</a></li>
                <li><a href="#">Menyval #4</a></li>
            </ul>
        </nav> <!-- Here ends our MainMenu Wrapper in HTML5-Semantic -->
    </header> <!-- Here ends our Header -->
    <section id="content-wrapper"> <!-- Here starts our Content-Wrapper-Section -->
        <section class="leftColumn"> <!-- Here starts our leftColumn Wrapper -->
            <article> <!-- Here starts our Wrapper for article #1 -->
                <h2 class="post-headline">Test Headline-text for Post #1</h2>
                <p class="post-details"><strong>Date:</strong> 2014-09-10 &bull; <strong>Author:</strong> Trekka12</p>
                <p class="post-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
            </article> <!-- Here ends our Wrapper for article #1 -->

            <article> <!-- Here starts our Wrapper for article #2 -->
                <h2 class="post-headline">Test Headline Text for Post #2</h2>
                <p class="post-details"><strong>Date:</strong> 2014-09-12 &bull; <strong>Author:</strong> Trekka12</p>
                <p class="post-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non orci eleifend dui vehicula cursus. 
                </p>
            </article> <!-- Here ends our Wrapper for article #2 -->
        </section> <!-- Here ends our leftColumn Wrapper -->
        <aside> <!-- Here starts our rightColumn sidebar Wrapper -->
            <h3>Test-headline-text for latest post sidebar "widget"</h3>
            <ul>
               <li><a href="#">post #1 - date: 2014-09-10</a></li>
               <li><a href="#">post #2 - date: 2014-09-12</a></li>
            </ul>
        </aside> <!-- Here ends our rightColumn sidebar Wrapper -->
    </section> <!-- Here ends our Content-Wrapper-Section -->
    <footer> <!-- Here starts our Footer -->
        
    </footer> <!-- Here ends our Footer -->
</div> <!-- Here ends our Wrapper DIV -->
</body>
</html>

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 :P

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vår egen första HTML5 webbstandard-validerade Mallsida</title>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <!-- Here starts our Wrapper DIV -->
    <header> <!-- Here starts our Header-wrapper for Entire Header -->
        <section id="logoSection"> <!-- Here starts our Logo Section Wrapper -->
            <h1 id="logo">Logo-text goes here</h1>
            <p id="slogan">This is our Company Slogan.</p>
        </section> <!-- Here ends our Logo Section Wrapper -->
        <section id="cinfoArea"> <!-- Here starts our contact info area Wrapper -->
            <ul id="cinfo">
                <li><strong>E-mail:</strong> test<span title="exchange -[at]- with @">-[at]-</span>dummy.com</li>
                <li><strong>Skype:</strong> testing_dummy</li>
                <li><strong>City:</strong> TestingTown</li>
            </ul>
        </section> <!-- Here ends our contact info area Wrapper -->
        <div class="clearfix"></div>
        <nav id="mainMenu"> <!-- Here starts our MainMenu Wrapper in HTML5-Semantic -->
            <ul>
                <li><a href="#">Menyval #1</a></li>
                <li><a href="#">Menyval #2</a></li>
                <li><a href="#">Menyval #3</a></li>
                <li><a href="#">Menyval #4</a></li>
            </ul>
        </nav> <!-- Here ends our MainMenu Wrapper in HTML5-Semantic -->
    </header> <!-- Here ends our Header -->
    <section id="content-wrapper"> <!-- Here starts our Content-Wrapper-Section -->
        <section class="leftColumn"> <!-- Here starts our leftColumn Wrapper -->
            <article> <!-- Here starts our Wrapper for article #1 -->
                <h2 class="post-headline">Test Headline-text for Post #1</h2>
                <p class="post-details"><strong>Date:</strong> 2014-09-10 &bull; <strong>Author:</strong> Trekka12</p>
                <p class="post-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
            </article> <!-- Here ends our Wrapper for article #1 -->

            <article> <!-- Here starts our Wrapper for article #2 -->
                <h2 class="post-headline">Test Headline Text for Post #2</h2>
                <p class="post-details"><strong>Date:</strong> 2014-09-12 &bull; <strong>Author:</strong> Trekka12</p>
                <p class="post-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non orci eleifend dui vehicula cursus. 
                </p>
            </article> <!-- Here ends our Wrapper for article #2 -->
        </section> <!-- Here ends our leftColumn Wrapper -->
        <aside> <!-- Here starts our rightColumn sidebar Wrapper -->
            <h3>Test-headline-text for latest post sidebar "widget"</h3>
            <ul>
               <li><a href="#">post #1 - date: 2014-09-10</a></li>
               <li><a href="#">post #2 - date: 2014-09-12</a></li>
            </ul>
        </aside> <!-- Here ends our rightColumn sidebar Wrapper -->
    </section> <!-- Here ends our Content-Wrapper-Section -->
    <footer> <!-- Here starts our Footer -->
        <p id="copyright-text">&copy; Copyright Year CompanyName. All rights reserved.</p>
        <section id="sectionWrapper"> <!-- Here starts our section-wrapper -->
            <section id="sectionBox1">
            </section>

            <section id="sectionBox2">
            </section>

            <section id="sectionBox3">
            </section>
        </section> <!-- Here ends our section-wrapper -->
    </footer> <!-- Here ends our Footer -->
</div> <!-- Here ends our Wrapper DIV -->
</body>
</html>

Som ni kan se i ovan kod använder jag mig av 2 st. olika HTML-Special characters som är © <- som ger oss det där ©-tecknet, såväl som • 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:

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:

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:

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:

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.