Skapa hemsida – Den avancerade guiden

Det är enkelt och roligt att skapa en hemsida. Har du viljan men inte riktigt kunskapen? Då har du hittat rätt.

Skapa en hemsida med WordPress – Avancerad guide

Ett bra sätt för att få upp en hemsida på internet snabbt är att använda WordPress. WordPress är ett gratis så kallat publiceringsverktyg som gör att man kan komma igång med enkelt med grunden till en hemsida utan att kunna något om programmering eller HTML. Du kan läsa mer om vad WordPress är här.

Om du inte vill använda WordPress för att skapa en hemsida så går det även utmärkt att koda själv. Läs mer om vad du behöver och hur du gör i slutet på denna artikel.

Välja ett webbhotell

För att man ska kunna lägga upp en hemsida på en domänadress och göra den nåbar för omvärlden så behöver man ett webbhotell. Idag finns många olika webbhotell, och det kan vara klurigt att veta vilket man ska välja. Wordpresguider har skrivit ett bra inlägg om att välja webbhotell för WordPress.

Vad behöver jag?

I de flesta fall räcker det med en Linux-server med stöd för PHP, åtkomst till en MySQL-databas, e-poststöd samt FTP-åtkomst. Detta kan låta som krångliga termer för en nybörjare som vill skapa hemsida, men du kan vara trygg i vetskapen att de allra flesta webbhotell inkluderar dessa funktioner som standard.

Vad skiljer webbhotellen åt?

De flesta webbhotell erbjuder det mesta man behöver till ett bra pris, så hur ska man skilja dem åt för att kunna göra ett bra val? Sanningen är att det är svårt, nästan omöjligt, att göra ett dåligt val av webbhotell i Sverige idag. Det har inte alltid varit så; oseriösa aktörer kom och försvann under åren kring sekelskiftet, men idag är marknaden så mogen och utvecklad och konkurrensen så stor att webbhotellen inte har råd att missköta sig alltför illa eftersom de då snabbt försvinner.

Det man får titta på är en kombination av pris, mängd lagring och trafik, eventuella begränsningar på antal domäner man får ha, kvaliteten på support samt kvaliteten på kontrollpanelen som används för inställningar och administration. De två sistnämna faktorerna kan vara svåra att avgöra utan att vara kund, så vill man veta mer får man söka efter lite kundåsikter på nätet.

Lista över svenska webbhotell i bokstavsordning

• Egen Sajt
• Inleed Webbhotell
• Loopia
• Miss Hosting
• Oderland
• One.com
• Strato

Välja en domän

Ett domännamn, ofta förkortat en ”domän”, är webbadressen till en hemsida. Det finns flera olika ändelser på domännamn, såsom .se eller .com, och dessa ändelser heter egentligen TLD:er, vilket står för Top Level Domain. Ett domännamn med en vanlig TLD kostar omkring en hundralapp i Sverige.

Vilken domän ska jag ha?

– Om jag har ett företag med namnet Mitt Företag och det finns flera passande domännamn lediga, vilket ska jag då välja?

Först och främst så är .se den bästa TLD:n att ha om företaget är svenskt och riktar sig mot svenska kunder. Anledningarna är flera, men främst är det för att man idag antar att ett svenskt företags hemsida slutar med .se, och adressen blir därför enklast att komma ihåg om den slutar med .se.
Har man ett eller ett par ganska vanliga ord i namnet så finns risken att domännamnet man vill ha är upptaget. Då kan man välja .com eller .nu som också är populära. Finns inte heller dessa kan man behöva välja .net eller org.

Med eller utan prickar?

Om både mittföretag.se (med prickar) och mittforetag.se (utan prickar) är lediga, vilken ska jag välja?

Det är egentligen en smakfråga, men de flesta tycker nog att exempelföretaget.se låter bäst och är lättast att komma ihåg. Å, ä och ö ställer inte till med några problem i moderna webbläsare, och Google har inga problem att ”läsa” dessa bokstäver. Därför finns ingen negativ effekt vad gäller sökmotoroptimering i välja ett domännamn med åäö. Om man vill kan man registrera båda domännamnen och ställa in så att man kommer till exempelföretaget.se om man skriver in exempelforetaget.se i adressfältet.

Sökmotoroptimering

Det finns en del faktorer att fundera över om man är ute efter det perfekta domännamnet i sökmotoroptimerings-syfte när man ska skapa hemsida. En takläggare som verkar i Stockholm skulle kunna överväga att registrera takläggare.se eller takläggarestockholm.se, då dessa domäner skulle ge sidan en liten skjuts upp i Googles sökresultat på sökninngar som ”takläggare” och ”takläggare Stockholm”. Eftersom dessa domäner är så pass attraktiva så är de redan registrerade, men detta kanske inte är fallet för just dig och ditt företag eller projekt.

FTP-program, FileZilla

Ett FTP-program används för att flytta filer mellan din dator och servern/webbhotellet som din hemsida ligger på. Om du använder WordPress är det möjligt att du inte behöver ett FTP-program och du kan antagligen hoppa över den här delen. Om du kodar själv så behöver du dock ett FTP-program om du vill kunna ladda upp din skapade hemsida på ett webbhotell.
Det finns många bra och gratis FTP-program, men det mest populära och använda FTP-programmet heter FileZilla och går att ladda ner gratis från den officiella hemsidan här.

För att ansluta till ditt webbhotell med FileZilla så behöver du inloggningsuppgifter för FTP, vilket du får från ditt webbhotell.

För att öppna den så kallade platshanteraren i FileZilla så kan du använda kortkommandot CTRL + S. Klicka sen på Ny plats, och skriv in dina uppgifter. Du kommer antagligen att behöva ändra inloggningstyp från anonym till normal så att du kan skriva in användare och lösenord.

För att föra över en fil från t.ex. skrivbordet till din server så kan du dra och släppa filen, dubbelklicka på den eller högerklicka på den och välja Skicka i menyn. På samma sätt för du över filer åt andra hållet, från servern till din dator.

Skapa din hemsida genom att koda själv

Att använda WordPress är idag ett enkelt och smidigt sätt att snabbt komma igång med att skapa en egen hemsida. Dock går det naturligtvis utmärkt att skapa en hemsida genom att koda ”för hand”. Du har antagligen redan de program du behöver installerade på datorn. Du behöver ett textredigeringsprogram för att skriva HTML-koden i. I Windows finns t.ex. Anteckningar inbyggt och duger utmärkt till att skriva HTML i. Förutom detta behöver du en webbläsare för att kunna se ditt verk, och det har du antagligen också redan installerat i datorn, annars hade du inte kunnat surfa hit och läsa detta!

Öppna Anteckningar så får du upp ett helt tomt dokument. Du kan spara på en gång genom att klicka på Arkiv och sen Spara som… Välj Alla filer i valet för filmformat. Spara dokumentet som index.html på skrivbordet.

Lägg märke till hur dokumentet som sparas får din webbläsares ikon. Detta betyder att om du dubbelklickar på ikonen så öppnas ditt dokument som en hemsida i din webbläsare.

Du är nu reda att börja skapa din hemsida och skriva din första HTML-kod. Gå gärna till våran HTML 5-guide och fortsätt lär dig!

Applikationer/program

Det finns program och applikationer som kan gör arbetet lite enklare när man skapar hemsidor. Använder man ett publiceringsverktyg som WordPress så behövs antagligen ingen sådan mjukvara eftersom man inte kodar så mycket själv, men lite mer avancerade användare samt utvecklare/programmerare brukar använda program för att underlätta och snabba på arbetet.

Exempel på populära program

Exempel på populära program för att skapa hemsidor är Adobe Dreamweaver, Adobe Brackets och Notepad++. Vissa program kostar och vissa är gratis. Det är svårt att säga vilket val som är det bästa, men de tre just programmen nämnda är alla mycket bra och värda att testa på.
Ett program kan hjälpa till med så kallad synax highlighting vilket färggrupperar olika sorters kod så att koden blir enklare att läsa. En annan vanlig funktion är också att kod ”autokompletteras” på det sätt att om man t.ex. skriver <p> så lägger programmet till </p> automatiskt.
Mer avancerade program som Dreamweaver har också en FTP-klient inbyggd som automatiskt laddar upp en fil som sparas till servern så att man inte behöver göra detta manuellt när man skapar hemsidan.

Bädda in YouTube

Att ha filmklipp på sin hemsida kan vara bra att ha av många anledningar. Som bekant så är YouTube det som gäller när det kommer till filmklipp på webben. YouTube har funktioner som gör det enkelt att bädda in filmklipp på sin hemsida eller blogg. Detta är naturligtvis gratis att göra.

Mobilanpassa hemsidan

Idag är det väldigt viktigt att man mobilanpassar hemsidan eftersom mobilsurfandet på telefoner och surfplattor ökar hela tiden. En mobilanpassad hemsida ändrar storlek på och omplacerar bilder, text pch annat innehåll beroende på vilken enhet som man använder för att besökan hemsidan. Detta för att det ska bli lättare att använda, läsa och navigera en hemsida när man använder en mobil enhet.

Om du inte använder WordPress behöver du antagligen behöva ha sysslat med att bygga hemsidor tidigare, annars kommer förklaring nedan att vara för avancerad.

WordPress gör det enkelt

Området med mobilanpassade hemsidor är ännu ett där WordPress blir väldigt smidigt att använda eftersom bra och moderna designteman idag är mobilanpassade i grunden.
Om temat man använder inte är bra på mobilanpassning så finns det väldigt bra och gratis plugins som t.ex. TouchWP som snabbt och enkelt mobilanpassar hemsidan.

@media

Om man vill mobilanpassa hemsidan så är så kallade media queries i CSS3 det bästa och enklaste sättet att komma igång. Med media queries så kan man ha olika regler för hur innehåll ska presenteras beroende på hur stor skärmen är som används för att besöka din hemsida.

Exempel:

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) {
#content {
font-size: 20px;
}
}

Med koden ovan i ditt CSS-dokument så kommer reglerna för #content-div:en bara att köras om bredden på upplösningen på skärmen som besökaren använder är över 560px och mindre än 1136x.

Test detta när du skapar din hemsida och prova med att ändra reglerna och surfa sen in på sidan med en mobil eller surfplatta för att se ändringarna.