Guide: Så funkar hemsidor – domän, webbhotell och FTP Exakt hur gör man en hemsida och hur hamnar den på själva internet? Det går vi igenom i denna guide.

Att skapa en hemsida är egentligen rätt enkelt – samtidigt kan det vara svårt att förstå exakt hur det här med hemsidor egentligen funkar. Hur får man upp en hemsida på sin domän? Vad är ett webbhotell? Hur och varför använder man FTP?

Detta tänkte jag gå igenom i den är guiden där du får lära dig från grunden hur en hemsida skapas, vilka delar som behövs för att lägga ut den på internet och några tips på hur du kan gå tillväga för att skapa en egen.

Grunden för en webbsida: en HTML-fil

Hela internet bygger ju egentligen på att olika datorer och servrar kopplar upp sig mot varandra och frågar efter och skickar information till varandra. En hemsida är i grund och botten en fil med text i där kod, oftast HTML, definierar vad som ska finnas på sidan.

Det kan i en väldigt enkel form se ut så här:


<!doctype html> 
<html>
<head> 
<meta charset="UTF-8"> 
<title>Elins hemsida</title> </head>
<body> 
<h1>Välkommen till Elins hemsida</h1> 
<p>Här kan du läsa mer om mig.</p>
</body>
</html>

Om du vill kan du testa att kopiera den här koden och klistra in den i ett tomt dokument i Textredigeraren (välj “Format” > “Gör om till ren textfil” på Mac). Spara den på skrivbordet och döp den till “index.html”.

Högerklicka nu på filen och välj “Öppna med” och din webbläsare.

Det som du nu ser i din webbläsare bör se ut ungefär så här:

Detta är själva grunden för vad en hemsida är. En text-fil med kod i som läses av en webbläsare som tolkar koden och visar innehållet.

Få ut webbsidan på internet: domän och webbhotell

Just nu ligger vår textfil på skrivbordet på vår dator och kan inte nås via internet på något enkelt sätt. Det vanligaste man brukar göra för att få upp sin sida på internet är att köpa utrymme på ett webbhotell och en domän.

Detta görs ofta ihop t.ex. via One, Binero, Loopia eller FSdata (som jag använder). Det finns jättemånga olika företag som säljer domäner och webbhotell så det är bara att googla runt efter det pris och paket som passar dig och dina behov bäst.

Domän

En domän är ju själva adressen till din webbsida som kommer göra det enkelt för andra att hitta fram till dig. Så när du ska köpa ett paket med webbhotell och domän brukar du oftast börja med att söka efter din önskade domän för att se om den är ledig. Du kan då få upp vilka olika alternativ som finns t.ex. .se, .nu eller .com.

I samband med att du betalar för din domän kan du oftast välja ett webbpaket. Det är hos vissa företag möjligt att köpa enbart en domän för att använda för t.ex. ompekning till en annan webbadress eller för mailadresser. Men om du vill lägga upp en webbsida på domänen så behöver du ett webbutrymme.

Webbhotell

Beroende på vad du ska ha på din hemsida kan du behöva olika stora webbutrymmen. För en enkel sida räcker några få GB långt. Ska du ha en tung sida med mycket innehåll t.ex. bild och video kanske du behöver något större.

Ska du bygga en webbshop eller ha login-möjligheter och andra funktioner kan du behöva köpa ett som har bra säkerhet (som SSL-certifikat) och hög hastighet för att göra sidan snabb för dina kunder.

Att köpa ett webbhotellspaket innebär att företaget du köper av hyr ut plats på sin server, en typ av värddator, som är uppkopplad mot internet. Du får på så vis en egen mapp på företagets värddator och mappen kopplas mot domänen du har köpt. Så när man knappar in din URL-adress så kommer webbläsaren att leta efter filer i mappen att visa upp.

Det är fullt möjligt att ha en helt egen server men det kräver ganska mycket kunskap om både hårdvara och mjukvara för att kunna skapa och sköta den. Fördelen med att skaffa webbhotell istället är att ett företag med dedikerade tekniker sköter hela den biten åt dig.

🖥 🌎

Men hur får man då upp sin HTML-fil på webbhotellet?

Ladda upp filer till servern med FTP

För att hemsidan vi skapade i HTML-filen ska hamna i mappen på servern så kan vi använda oss av webbhotellets egen fil-överförare, en tjänst de flesta webbföretag tillhandahåller. Den kommer man åt genom att logga in på webbhotellets sajt.

Men det vanligaste sättet att komma åt sin mapp på webbhotellet är att använda sig av en FTP-klient. FTP står för “File Transfer Protocol” och är ett sätt att föra över filer till en webbserver.

För att komma åt ditt webbutrymme, alltså din mapp, på webbhotellet behöver du tillgång till dina FTP-uppgifter. Dessa brukar du antingen få i ett mail när du slutfört ditt köp eller så hittar du dem under “FTP” i adminpanelen på webbhotellets sida när du loggar in.

De FTP-uppgifter du behöver är: värd, användarnamn och lösenord. 

Jag brukar använda FTP-klienten FileZilla – det är ett gratisprogram du kan ladda ned via FileZillas hemsida.

När du öppnar upp programmet så ser du dina lokala filer, alltså filerna på din dator, i den vänstra rutan. Den högra rutan är än så länge tom eftersom vi inte anslutit till någon server.

I den övre raden skriver du in värd, användarnamn och lösenord. Port brukar du inte behöva fylla i (men det är oftast 21).

Om du lyckas ansluta till servern ska du få upp din mapp på servern nu. För vissa servrar så finns det en mapp som heter “www” eller “public” eller liknande där du ska lägga filerna du vill ha på din webbsida. På andra så är det bara att lägga dem direkt här.

Mappen där du lägger dina filer kallas för din “root”-mapp.

I det vänstra fönstret om du navigerar till Skrivbordet (desktop) hittar du vår lokala fil “index.html”. Det är filnamnet som webbläsaren kommer leta efter i mappen på servern som är kopplad till ditt webbhotell, så själva förstasidan ska alltid heta index.

Dra och släpp för att kopiera över filer till servern

Nu är det bara att dra och släppa index.html filen från det vänstra fönstret till det högra för att det ska laddas upp på servern.

När detta är klart ska du kunna navigera till din domän för att hitta din webbsida.

Om du vill ladda upp din sida på en subdomän t.ex. dindomän.se/elins-hemsida så skapar du en ny katalog (mapp) i din root-mapp som heter “elins-hemsida”. De filer du lägger i denna mapp kommer man då nå via dindomän.se/elins-hemsida.

En bra standard är att undvika mellanslag och åäö i namn på filer och mappar som laddas upp på servern.

Ladda upp vilka filer du vill

Du kan såklart ladda upp annat än HTML-filer också. T.ex. bilder, ljudfiler och PDF-dokument. Dessa får då en egen sökväg i still med: dindomän.se/filnamn.jpg. 

En snygg och modern hemsida

Ett av de absolut vanligaste sätten att bygga en snygg och modern hemsida idag är att använda en CMS, content management system. Den vanligaste varianten är WordPress.

Om du har webbhotell och domän kan du installera WordPress helt gratis. Antingen manuellt via FTP eller via en 1click-install som brukar finnas på de flesta webbhotell som en tjänst.

WordPress använder kodspråket PHP för att skapa en dynamisk webbplats. Här kan du läsa ett inlägg jag skrivit om tekniken bakom WordPress.

Det finns en uppsjö av teman att använda för sin WordPress-sida. Både gratis och som kostar. Fördelen är att du enkelt kan ändra både innehåll och design utan att kunna koda.

Andra webbtjänster

Det finns många webbtjänster t.ex. hemsida24, Wix och Squarespace där man kan bygga en hemsida via ett grafiskt interface som de sedan publicerar. Det är också möjligt att köpa en domän att koppla till sidan.

Dessa tjänster kräver alltså inget webbutrymme, så du behöver inget webbhotell för att använda dem. Utan det är en tjänst där du betalar en månadskostnad till företaget för att sidan ska finnas uppe på webben. Fördelen med detta är att det är ganska enkelt att få upp en hemsida snabbt. Nackdelen är att du inte har något eget webbutrymme, så du kan inte ladda upp andra filer, skapa subdomäner och så vidare. Du är också väldigt låst till plattformen och vad den erbjuder.

Sammanfattningsvis

  • En hemsida är i grunden filer med kod (ofta HTML).
  • En webbläsare kan tolka koden för att visa sidan.
  • För att sidan ska vara tillgänglig via Internet måste den ligga i en mapp på en server.
  • Ett webbhotell hyr ut utrymme på sin server.
  • Din mapp är ditt webbutrymme, grundmappen kallas “Root”.
  • En domän kopplas till mappen för att göra innehållet lättare att hitta.
  • Du för över filer till servern med hjälp av en FTP-klient.
  • Du kan lägga vilka filer du vill i din mapp på servern.
  • För att skapa subdomäner skapar du nya mappar i root-mappen.
  • Du kan installera en CMS som WordPress på ditt webbutrymme för att göra en hemsida utan att koda.
  • Om du använder en tjänst som Squarespace, Wix eller Hemsida24 har du inget eget webbutrymme utan köper en tjänst.

Om det är något mer du undrar om de grundläggande delarna i hur det funkar att lägga upp en egen webbsida på nätet – tveka inte att ställa dom här nedanför i kommentarerna 👇

Detta inlägg är skapat efter önskemål från er läsare. Har du något du vill lära dig mer om? Hör av dig i så fall!

Om du gillade det här inlägget så får du gärna visa det genom att klicka på hjärtat, så jag vet vad jag ska göra mer av!

7
(Visited 2 305 times, 2 visits today)

21 kommentarer

  1. Sofia 20 september, 2017 at 19:15

    Hej!!

    Hittade din blogg nu via Slow Fashion Johanna Nilsson och älskar båda era bloggar!! GRYMMA INITIATIV BÅDA TVÅ!!! 😀 😀

    Reply
  2. Agnes {Cashew Kitchen} 21 september, 2017 at 12:30

    Så bra och grundläggande guide! Har ju gått igenom den här processen nyligen men kan ändå ibland känna att jag inte har nån aning om hur allt hänger ihop. Och när det kommer till ens egna hemsida och business så vill en ju ha stenkoll liksom! Därför supergrymt med repetition 😀

    Reply
    1. Elin Häggberg // Teknifik 21 september, 2017 at 12:34

      Tack snälla! Jag kommer ihåg när jag själv höll på och lärde mig detta för typ 6-7 år sedan. Var sååå förvirrad. Men det är kul när man känner att man börjar få lite kläm på läget. Sen är det ju såklart massa väldigt tekniska saker i detta som jag själv inte riktigt förstår till 100% heller men man behöver inte kunna allt här livet.. tänker jag. 😰☺️

      Reply
  3. Wilda 21 september, 2017 at 15:27

    Verkligen bra och pedagogiskt skrivet och förklarat! Känner att du direkt fyllde i mina luckor. 😀

    Reply
  4. jessica 23 september, 2017 at 07:10

    Jag undrar om det finns några nackdelar med att byta webbhotell? (har förstått att det jag har inte är vidare bra). Men förlorar man länkar, plats på google eller annat tråkigt som kan hända vid byte? Något jag behöver tänka på? Man är ju lite rädd för att flytta när man inte riktigt förstår processen 🙂

    Reply
    1. Elin Häggberg // Teknifik 23 september, 2017 at 08:08

      Om du flyttar från ditt webbhotell och tar med dig din domän så ska det inte påverka din Google-trafik så länge så sätter upp allt exakt lika dant på den nya servern (samma URL-struktur). Ibland kan det snarare ha en positiv effekt eftersom det nya hotellet kanske är bättre och snabbare!

      Reply
      1. jessica 26 september, 2017 at 19:23

        Tack för ditt svar <3

        Reply
  5. Pingback: STJÄRNÖGONBLICK #38 | kattunge, guldljus och klotter. | REAKTIONISTA

  6. Ann Ekman 11 februari, 2018 at 14:43

    Jag vill bara tacka för allt bra du lägger upp på Teknifik. Tex denna guide!

    /kram från Ann( 74 år)

    Reply
  7. Maja 16 maj, 2018 at 22:08

    Hej!
    Googlade runt för att hitta mig ett svar på en fråga. Hittade hit men funderar fortfarande och tycker inte jag hittar något på one.com:s hemsida så jag testar att fråga dig! 🙂
    Har en hemsida (på one.com och har wordpress) som handlar om mitt yrke. Har även en blogg på blogg.se som jag nu skulle vilja göra om till wordpress med webbhotell osv. samt att rikta om url:en från blogg.se till min egna. KAN jag bara lägga till en till domän på one.com, betala för den å så blir det två olika? Jag vill ju inte att det ena ska försvinna..
    Mvh
    Maja

    Reply
    1. Elin Häggberg // Teknifik 16 maj, 2018 at 22:22

      Hej! Du kan ha flera domäner med webbhotell på one.com. Du får då skaffa ett nytt paket helt enkelt men du kan administrera dom via samma konto. Hör av dig till supporten så kan de säkert hjälpa dig.

      Reply
      1. Maja 17 maj, 2018 at 21:41

        Tusen tack för svar! Var som jag trodde men skönt att få det bekräftat så jag inte skulle göra något dumt. Man lär sig så mycket när man fixar med sånt här, nu ska jag försöka få blogg.se att skicka mig min auktoriseringskod för att kunna flytta yttersttrivsamt.se därifrån. Får se hur det går, annars får jag väl starta om med .com istället. 🙂

        Reply
  8. Tess 29 augusti, 2018 at 08:02

    Hej Elin!
    Jag ska lägga upp en ny hemsida men tycker det är en djungel att hitta rätt mallar. Vill inte bygga själv för jag vill inte lägga tiden att lära mig igen, även om jag för länge sedan byggde upp en företagssida i Dreamweaver (minns inte längre hur:) Vad jag undrar är finns det paneler att lägga in i efter hand oavsett vilken mall jag väljer? Vill kunna utöka till en liten shop, ha blogg, portfolio och bra utrymme för bildbank.
    Alla rekommenderar WP, men jag vill gärna ha färdig mall att utgå i från även om jag kan göra vissa justeringar själv.
    Hur vet jag vilka mallar som erbjuder det jag säker utan att sitta och gå igenom alla?
    Tack på förhand!

    Tess

    Reply
    1. Elin Häggberg // Teknifik 29 augusti, 2018 at 08:18

      Hej Tess!
      Med WordPress kan du börja med en enkel sida och bygga på med blogg, shop och portfolio etc i efterhand ja. Det går jättebra!
      Det går att göra med dom flesta teman men jag skulle kolla upp ett som har en bra portfolio-sida iallafall.
      Du kan enkelt byta tema utan att det påverkar innehållet också med WordPress så det är verkligen flexibelt. Finns dessutom massor med tips och hjälp att få på nätet vilket också är en av styrkorna med WordPress. Lycka till!

      Reply
  9. Carl 29 augusti, 2018 at 09:39

    Hej Elin och Tess!

    En bra början kan ju vara att besöka https://wpsv.se/ – Där hittar du mycket info, Tess..
    Lycka till!

    Reply

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *