Articles

Hur webben fungerar

On oktober 15, 2021 by

Nätet finns överallt!

Vi använder det mer än någonsin tidigare – även på många ställen där du kanske inte ser det. ”Webben” är nämligen mer än bara webbplatser som du besöker genom att skriva in en webbadress i din webbläsare.

Oavsett om du kollar din e-post på din mobiltelefon eller om du skickar en tweet – du använder internet (dvs. ”webben”).

Hur fungerar allt det där? Vilka tekniker är inblandade och vad behöver du lära dig (och i vilken omfattning) om du vill bli webbutvecklare?

I den här artikeln och videon (se ovan) kommer jag inte att dyka ner i alla tekniska detaljer. Detta är tänkt att vara en bra översikt över webbfunktionaliteten.

# Hur webbplatser fungerar

Vi börjar med det mest uppenbara sättet att använda internet: Du besöker en webbplats som academind.com.

I det ögonblick du skriver in denna adress i din webbläsare och trycker på ENTER händer en massa olika saker:

  1. Adressen löses upp
  2. En begäran skickas till webbplatsens server
  3. Svaret från servern analyseras
  4. Sidan renderas och visas

Faktiskt, varje enskilt steg skulle kunna delas upp i flera andra steg, men för att få en bra överblick över hur det hela fungerar kan vi bortse från det här. Låt oss ta en titt på alla fyra stegen.

Steg 1 – URL:n löses upp

Webbplatsens kod är uppenbarligen inte lagrad på din maskin och måste därför hämtas från en annan dator där den är lagrad. Denna ”andra dator” kallas ”server”. Eftersom den tjänar något syfte, i vårt fall tjänar den webbplatsen.

Du skriver in ”academind.com”. (det kallas ”en domän”) men i själva verket identifieras den server som är värd för källkoden till en webbplats via IP-adresser (= Internet Protocol). Webbläsaren skickar en ”begäran” (se steg 2) till servern med den IP-adress du angett (indirekt – du har naturligtvis angett ”academind.com”).

I verkligheten anger man också ofta "academind.com/learn" eller något liknande. "academind.com" är domänen, "/learn" är den så kallade sökvägen. Tillsammans utgör de ”URL” (”Uniform Resource Locator”).

Det går dessutom att besöka de flesta webbplatser via "www.academind.com" eller bara "academind.com". Tekniskt sett är "www" en subdomän, men de flesta webbplatser omdirigerar helt enkelt trafiken till "www" till huvudsidan.

En IP-adress ser vanligtvis ut så här: 172.56.180.5 (det finns dock även en mer ”modern” form som kallas IPv6 – men vi struntar i det för tillfället). Du kan läsa mer om IP-adresser på Wikipedia.

Hur översätts domänen ”academind.com” till sin IP-adress?

Det finns en speciell typ av server där ute på internet – inte bara en utan många servrar av den typen. En så kallad ”namnserver” eller ”DNS-server” (där DNS = ”Domain Name System”).

Dessa DNS-servrar har till uppgift att översätta domäner till IP-adresser. Man kan föreställa sig dessa servrar som enorma ordböcker som lagrar översättningstabeller: Domän => IP-adress.

När du skriver in ”academind.com” hämtar webbläsaren därför först IP-adressen från en sådan DNS-server.

Infall du undrar: När IP-adressen är känd går vi vidare till steg 2.

Steg 2 – Förfrågan skickas

När IP-adressen är löst går webbläsaren vidare och gör en förfrågan till servern med den IP-adressen.

”En förfrågan” är inte bara ett begrepp. Det är verkligen en teknisk sak som sker bakom kulisserna.

Browsern samlar ihop en massa information (Vilken är den exakta URL-adressen? Vilken typ av begäran ska göras? Ska metadata bifogas) och skickar detta datapaket till IP-adressen.

Data skickas via ”HyperText Transfer Protocol” (känt som ”HTTP”) – ett standardiserat protokoll som definierar hur en begäran (och ett svar) måste se ut, vilka data som får inkluderas (och i vilken form) och hur begäran ska skickas. Du kan läsa mer om HTTP här.

En fullständig URL ser faktiskt ut så här eftersom HTTP används: http://academind.com. Webbläsaren fyller automatiskt i den åt dig.

Och det finns också HTTPS – det är som HTTP men krypterat. De flesta moderna sidor (inklusive academind.com) använder det i stället för HTTP. En fullständig URL blir då: https://academind.com.

Då hela processen och formatet är standardiserat finns det ingen gissning om hur denna begäran måste läsas av servern.

Servern hanterar sedan begäran på lämpligt sätt och returnerar ett så kallat ”svar”. Återigen, ett ”svar” är en teknisk sak och liknar på sätt och vis en ”begäran”. Man kan säga att det i princip är en ”begäran” i motsatt riktning.

Likt en begäran kan ett svar innehålla data, metadata osv. När man begär en sida som academind.com kommer svaret att innehålla den kod som krävs för att återge sidan på skärmen.

Vad händer på servern?

Det definieras av webbutvecklare. I slutändan måste ett svar skickas. Det svaret behöver inte innehålla ”en webbplats”. Det kan innehålla vilken data som helst – även filer eller bilder.

Vissa servrar är programmerade för att generera webbplatser dynamiskt utifrån begäran (t.ex. en profilsida som innehåller dina personuppgifter), andra servrar returnerar förgenererade HTML-sidor (t.ex. en nyhetssida). Eller så görs både och – för olika delar av en webbsida. Det finns också ett tredje alternativ: Webbplatser som är förgenererade men som ändrar utseende och data i webbläsaren.

De olika typerna av webbplatser är egentligen inte fokus för den här artikeln. Om du vill lära dig mer om det kan du kolla in den här artikeln + video.

För vårt enkla fall har vi en server som returnerar koden för att visa en webbplats. Så låt oss fortsätta med steg 3.

Steg 3 – Svaret analyseras

Browsern tar emot svaret som skickas av servern. Detta i sig visar dock ingenting på skärmen.

Istället är nästa steg att webbläsaren analyserar svaret. Precis som servern gjorde det med begäran. Återigen hjälper naturligtvis den standardisering som HTTP har framtvingat till.

Browsern kontrollerar de data och metadata som ingår i svaret. Och baserat på det bestämmer den vad den ska göra.

Du kanske har haft fall där en PDF öppnades i din webbläsare. Det hände eftersom svaret informerade webbläsaren om att data inte är en webbplats utan istället ett PDF-dokument. Och webbläsaren försöker välja den bästa hanteringsmekanismen för varje datatyp som den upptäcker.

Tillbaka till vårt webbplats-scenario.

I det fallet skulle svaret innehålla en specifik bit metadata, som talar om för webbläsaren att svarsdata är av typen text/html.

Detta gör det möjligt för webbläsaren att sedan analysera de faktiska data som är knutna till svaret som HTML-kod.

HTML är det centrala ”programmeringsspråket” (tekniskt sett är det inte ett programmeringsspråk – du kan inte skriva någon logik med det) på webben. HTML står för ”Hyper Text Markup Language” och beskriver strukturen på en webbsida.

Koden ser ut så här:

<h1>Breaking News!</h1><p>Websites work because browser understand HTML!</p>

<h1> och <p> är så kallade ”HTML-taggar” och om du vill lära dig mer om HTML är den här serien ett bra ställe att gå till.

Varje HTML-tagg har en semantisk innebörd som webbläsaren förstår, eftersom HTML också är standardiserat. Därför behöver man inte gissa vad en <h1>-tagg betyder.

Bläsaren vet hur man analyserar HTML och går nu helt enkelt igenom hela svarsdata (även kallad ”svarskroppen”) för att återge webbplatsen.

Steg 4 – Sidan visas

Som nämnts går webbläsaren igenom de HTML-data som returneras av servern och bygger upp en webbplats utifrån det.

Det är dock viktigt att veta att HTML inte innehåller några instruktioner om hur webbplatsen ska se ut (dvs. hur den ska stylas). Den definierar egentligen bara strukturen och talar om för webbläsaren vilket innehåll som är en rubrik, vilket innehåll som är en bild, vilket innehåll som är ett stycke osv. Detta är särskilt viktigt för tillgängligheten – skärmläsare får ut all användbar information ur HTML-strukturen.

En sida som bara innehåller HTML skulle dock se ut så här:

Inte så vackert, eller hur?

Det är därför som det finns en annan viktig teknik (ett annat ”programmeringsspråk”, som egentligen inte är ett programmeringsspråk): CSS (”Cascading Style Sheets”).

CSS handlar om att lägga till stil till webbplatsen. Detta görs via ”CSS-regler”:

h1 { color: blue;}

Denna regel skulle färga alla <h1>-taggar blå.

Regler som dessa kan läggas till i HTML-koden, men vanligtvis ingår de i separata .css-filer som begärs separat.

Och utan att gå in på alltför många detaljer här, har detta en viktig innebörd: En webbplats kan bestå av mer än uppgifterna i det första svaret vi får.

I praktiken hämtar webbplatser många ytterligare uppgifter (via ytterligare förfrågningar och svar) som startas när det första svaret har kommit.

Hur fungerar det?

Nja, HTML-koden för det första svaret innehåller helt enkelt instruktioner om att hämta mer data via nya förfrågningar – och webbläsaren förstår dessa instruktioner:

<link rel="stylesheet" href="/page-styles.css" />

Ja, jag kommer inte att dyka ner i fler detaljer här. Om du vill lära dig mer om CSS kommer vår kompletta guide att vara till stor nytta!

Tillsammans med CSS kan webbläsaren visa webbsidor så här:

Det finns faktiskt ytterligare ett programmeringsspråk inblandat (den här gången är det verkligen ett programmeringsspråk!): JavaScript.

Det syns inte alltid, men allt dynamiskt innehåll som du hittar på en webbplats (t.ex. flikar, överlagringar etc.) är faktiskt bara möjligt tack vare JavaScript. Det gör det möjligt för webbutvecklare att definiera kod som körs i webbläsaren (inte på servern), och därför kan JavaScript användas för att ändra webbplatsen medan användaren tittar på den.

Som tidigare, om du vill lära dig mer, kan du kolla in våra JavaScript-resurser, till exempel vår kompletta kurs.

Detta är de fyra steg som alltid är inblandade när du anger en sidadress som academind.com och du därefter ser webbplatsens innehåll i din webbläsare.

# Server-side vs Browser-side

Från de fyra stegen ovan har du lärt dig att vi kan skilja på två centrala ”sidor” när vi talar om webben: Om du är intresserad av att bli webbutvecklare är det viktigt att veta att du använder olika tekniker och programmeringsspråk för dessa sidor.

Server-sidan

Du behöver programmeringsspråk på serversidan – dvs. språk som inte fungerar i webbläsaren men som kan köras på en vanlig dator (en server är i slutändan bara en vanlig dator).

Exempel skulle kunna vara:

  • Node.js
  • PHP
  • Python

Viktigt: Med undantag för PHP kan du också använda dessa programmeringsspråk för andra syften än webbutveckling.

Men Node.js faktiskt främst används för programmering på serversidan (även om det tekniskt sett inte är begränsat till det) är Python också mycket populärt för datavetenskap och maskininlärning.

Browsersidan

I webbläsaren finns det exakt tre språk/tekniker som du behöver lära dig. Men medan språken på serversidan var alternativ, är dessa tre språk på webbläsarsidan alla obligatoriska att känna till och förstå:

  • HTML (för strukturen)
  • CSS (för formgivningen)
  • JavaScript (för dynamiskt innehåll)

# ”Bakom kulisserna” Internet

Därför har vi diskuterat webbplatser. D.v.s. det fall där du skriver in en URL (t.ex. ”academind.com/learn”) i webbläsaren och du får en webbplats i gengäld.

Men internet är mer än så. Du använder det faktiskt för mer än så varje dag!

Den centrala idén med förfrågningar och svar är alltid densamma. Men alla svar är inte nödvändigtvis en webbplats. Och inte alla förfrågningar vill ha en webbplats.

De metadata som bifogas förfrågningar och svar styr vilka data som önskas och returneras. Naturligtvis måste båda parter som är inblandade (dvs. klient och server) stödja de begärda och skickade uppgifterna.

Du kan till exempel inte begära en PDF från "academind.com". Du skulle kunna skicka en sådan begäran, men du skulle inte få tillbaka en PDF – helt enkelt för att vi inte stöder denna typ av begärda data för denna specifika URL.

Men det finns många servrar som specialiserar sig på att tillhandahålla URL:er som returnerar vissa delar av data. Sådana tjänster kallas också ”API:er” (”Application Programming Interface”).

Mobilappar skickar till exempel ”osynliga” HTTP-förfrågningar till sådana API:er (till specifika URL:er som är kända för dem) för att hämta eller lagra data. Twitter hämtar till exempel tweetflödet.

Och även på webbsidor skickas sådana ”osynliga” förfrågningar. Om du anmäler dig till vårt nyhetsbrev (vilket du naturligtvis ska göra!) laddas ingen ny sida. Eftersom data utbyts bakom kulisserna. Även om klienten i det här fallet är webbläsaren vill den begäran som skickas inte ha någon webbplats i gengäld. Och serverns URL som tar emot den erbjuder ingen webbplats – istället vet servern hur den ska hantera din e-postadress.

Vi skulle kunna gå in på mycket mer detaljer här, men detta är redan en lång artikel. Du bör nu ha en god förståelse för hur webben fungerar och vilka kärntekniker som är inblandade.

Lämna ett svar

Din e-postadress kommer inte publiceras.