Introduktion till praktisk HTML-kodning: skriva, spara, förhandsgranska och validera kod

Var man skriver HTML-koden för sin egen webbsida

Man kodar hemsidor i texteditorer, som t ex. Notepad, Notepad++, SublimeText, eller annat program, det finns även IDE’s (Integrated Development Environments), som stödjer HTML-kodning.

Vissa har mer funktioner och finesser än andra, själv föredrar jag att koda i Notepad++, användarvänligt, enkelt, rent och praktiskt(!) Men vanliga Notepad hade funkat lika bra till en början :)

Hur man sparar HTML-kod inför granskning

När man väl skrivit sin HTML-kod i ett textdokument så sparar man textfilen som filtyp med filändelsen .html för att göra textfilen till en webbdokuments fil, närmare bestämt en HTML-fil.

Förhandsgranskning av HTML-kod i webbläsaren

När ert textdokument med HTML-kod väl blivit sparat som en .html fil, så brukar det vara intressant att se hur koden man skrivit ser ut i en webbläsare.

Detta kan göras ganska enkelt genom att öppna den nyligen sparade .html filen med en webbläsaren – vilken ni än har tillgängligt på er dator, om det så är: Google Chrome, Mozilla Firefox, Oracle Opera, Apple’s Safari, eller annan.

Tänk dock på att olika webbläsare kan skilja sig i hur de ”översätter och tolkar” er HTML-kod.

Olika definitioner/inställningar i olika webbläsare

Detta då olika webbläsare har olika inställningar som t ex. ”hur stor är 1 enstaka pixel” (vilket kan leda till olika layouter i olika webbläsare), eller ”om inga CSS-stilar angetts, hur skall HTML-element av den typen stil-sättas?”, m.m.

Där finns vissa skillnader mellan t ex. Mozilla Firefox och Google Chrome, men sen många år tillbaka har den som orsakat mest problem p.g.a. skillnader till andra webbläsare varit (ja, ni gissade rätt): Internet Explorer..

Internet Explorer börjar dock faktiskt bli bättre när det gäller översättning och tolkning av webbkod, dock kvarstår fortfarande problem på vissa fronter när man utvecklar för att det ska se ”likadant ut i samtliga webbläsare”, då vissa fortfarande är envisa med att byta från äldre versioner av Internet Explorer..

Varierat media stöd mellan olika webbläsare

Olika webbläsare stödjer också olika mediatyper för uppspelning av film och ljud – detta kommer vi gå igenom senare när vi börjar bli lite mer avancerade om hur man kan ”komma runt” detta, men för tillfället kan det vara bra att bara känna till att det finns skillnader för detta.

Därför kan det vara smart att kontrollera hur er webbsida ser ut i flertalet webbläsare – man kan ju trots allt ha hur många olika typer av webbläsaren man än vill på en dator.

Webbverktyg för webbläsar kompabilitets kontroll

Ute på nätet finns ett antal verktyg man kan använda för att genomföra just sådana här kontroller om hur ens webbsida ser ut i andra webbläsare (tror dock att ens webbsida först måste vara uppladdad till nätet isf.), sådana verktyg kan hittas på vår: ”Länkar” sida. Kolla efter BrowserStack eller annat webbverktyg.

CSS-reset för nollställning av webbläsares standard CSS-stilar

Senare när vi kommer börja gå igenom CSS kommer vi gå igenom något som kallas för ”CSS-Reset” och detta syftar till en framtagen testad, väldigt grundläggande CSS-kod som har i uppgift att ”nollställa” alla ”standard-stilar” som webbläsare har för element som inte har fått några stilar definierade specifikt av er själva som utvecklare – detta hjälper er då att få en ”clean-slate”/”blank-canvas” så man kan börja helt från scratch :)

Validera sin HTML-kod: Vad, varför och hur?

Validering av HTML-kod är en kontroll man kan göra för att försäkra sig om att man inte kodat fel någonstans enligt vad kodningsstandarden man valt dikterar som godkänd kod.

Varför vill/behöver man då validera sin kod? Jo, det är ganska smart att göra detta för att försäkra sig om att man inte har någon felaktig bit av kod som orsakar problem som i sin tur förstör för hur besökare ser ens webbsida, eller förstör för annat man försöker koda in på sin sida.

Dessutom kan det spara en väldans massa tid ”down the road” om man regelbundet validerar sin kod för att försäkra sig om att inga misstag begåtts under utvecklingsprocessens gång.

Det är väldigt bra att försöka göra rätt från början helt enkelt, besparar en från en hel del ”huvudbry” som annars kunnat komma djupare in i utvecklingsprocessen.

Hur Validerar man då sin kod? Jo, W3C (World Wide Web Consortium) har egna validator-verktyg som ni kan hitta på: https://validator.w3.org/

Ni går bara in på den sidan och sen väljer ni om ni vill 1. validera en fil genom att ladda upp den specifika fil ni vill validera, eller väljer ni att 2. validera en redan publicerad sida som redan finns ute på nätet genom att klistra in länk-URL:en/URI:en (Uniform Resource Locator/Identifier).

För utvecklingssidor man håller på med kan man: lägga in en länk på sin sida med en ”egen-referens” till validator-verktyget, vilket i sin tur innebär att allt man behöver göra är att klicka på den länken för att direkt få just den sidan man kom ifrån – att bli validerad. Referensen i själva länken pekar på sidan man kom från med andra ord, väldigt praktiskt och användbart!

Detta är i synnerhet väldigt användbart för att ha för validering av ens egna sidor medan man håller på att utveckla! En sådan länk ser ut som följer:
<a href=”http://validator.w3.org/check/referer”>HTML5</a>

Så även detta är en God Praxis att ta efter! ;)

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *