Hur man skapar en hemsida

Denna guiden går grundligt igenom hur man skapar en hemsida. En perfekt guide för dig som precis har börjat studera webbdesign.

Notera att denna guiden är anpassad för de som använder operativsystemet Windows XP, men ni som använder andra operativsystem från Windows (till exempel Windows Vista eller Windows 7) borde kunna följa guiden utan större svårigheter, dock stämmer kanske inte alla bilder och sökvägar till program överens med vad som står.

Vanligtvis brukar man ha en mapp för varje hemsida man skapar, så börja med att skapa en mapp där du snabbt kan komma åt den, förslagsvis på skrivbordet. Det kan vara värt att påpeka att hemsidan du kommer skapa nu endast kommer finnas lokalt på din dator (och inte ute på Internet), så enda sättet att besöka den är genom att använda din dator. Hemsidor skapar man vanligtvis lokalt på en dator, och sedan när de är klara laddar man upp dem på ett webbhotell så de finns tillgängliga på Internet (lär dig mer om det en annan gång).

Bild på hur man skapar en ny mapp.

Högerklicka på skrivbordet och tryck på Mapp för att skapa en ny mapp.

Ge mappen ett passande namn. I vårt exempel döper vi mappen till Min hemsida, men du kan döpa den till något annat om du vill.

Bild på en nyskapad mapp med namnet "Min hemsida"

En helt vanlig mapp våra kommande HTML-filer kommer sparas i.

Öppna nu ditt kodningsprogram, till exempel programmet Anteckningar i Windows. Det programmet kan du öppna genom att trycka på Start, och sedan Alla Program → Tillbehör → Anteckningar.

Bild på hur man öppnar programmet "Anteckningar".

Öppna programmet Anteckningar, som vi ska använda för att koda våran hemsida.

Fyll sedan i följande kod i programmet. Denna koden kommer att visa en rubrik och en paragraf i webbläsaren.

HTML - index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min egna hemsida!</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1>Detta är min egna hemsida!</h1> <p>Välkommen till min egna hemsida.</p> </body> </html>
Bild på hur det ser ut när man har skrivit i HTML-koden i programmet "Anteckningar".

Fyll i koden ovanför bilden i programmet så att det ser ut som på bilden ovan.

Nu behöver vi bara spara filen, men det är en del saker att tänka på då. Börja med att gå till spara-sidan genom att trycka på Arkiv uppe till vänster på programmet och välj sedan Spara.

Bild på hur man kommer till spara-sidan.

Öppna spara-sidan genom att trycka på Arkiv och sedan Spara. Du kan även få fram spara-sidan genom att hålla nere [CTRL]-tangenten och sedan trycka på [S]-tangenten.

Leta upp mappen du precis skapade och gå in på den, så att filen sparas i den mappen. I rutan filnamn skriver du in namnet på filen. Filen bör heta index. Filen som heter index är den fil som hämtas då man går in på hemsidan (går du in på sidan http://www.webbguider.se så hämtas filen http://www.webbguider.se/index.php). Filändelsen på filen ska vara .html. Filändelsen .htm fungerar också bra, men det är modernare att använda .html (.htm använde man förr i tiden då filändelser enbart kunde vara 3 tecken långa). Vi skriver alltså i index.html i rutan som står vid texten "filnamn". I rutan under kan vi välja vilket filformat filen ska sparas som. Den är troligtvis inställd på Textdokument, så ändra den till Alla filer, annars kommer programmet automatiskt lägga till filändelsen .txt efter vårt filnamn, så att vi sparar filen som index.html.txt (vilket alltså är fel).

I den sista rutan (Kodning) får du välja vilken teckenkod filen ska sparas med. Ändra detta till UTF-8, som alla moderna hemsidor är sparade med. Det är bland annat en fils teckenkodning som gör att en del hemsidor har problem att visa våra svenska tecken å, ä och ö, men om du bara gör som vi beskriver kommer du inte att få problem med det. Om du vill veta mer om teckenkoder kan du läsa artikeln Olika teckenkoder, där vi ger en djupare beskrivning.

Det borde nu se ut såhär:

Bild på dina inställningar bör se ut då du sparar sidan.

Dina inställningar bör se ut såhär när du sparar sidan.

Nu är det bara att spara filen. Om du vill se hur din hemsida ser ut i webbläsaren så är det bara att öppna filen (den kommer att finnas i mappen vi precis skapade och sparade filen i). Windows öppnar alla HTML-filer med den webbläsare man har som standard, såvida du inte ändrat detta beteende.

Om du vill göra någon ändring på hemsidan, till exempel lägga till en paragraf i filen i ditt kodningsprogram, så måste du först spara filen i ditt kodningsprogram, sedan måste du även uppdatera hemsidan i webbläsaren innan du kan se någon ändring. Du kan enkelt spara om sidan i Anteckningar genom att hålla nere tangenten [CTRL] och trycka på tangenten [S], och du kan enkelt uppdatera hemsidan i din webbläsaren genom att trycka på tangenten [F5].

Om du stänger ner ditt kodningsprogram och vill vid ett senare tillfälle öppna sidan i Anteckningar kan du inte öppna den som en vanlig fil. I och med att det är en HTML-fil, och att ditt operativsystem troligtvis är inställd på att HTML-filer ska öppnas med en webbläsare, så kommer sidan att öppnas i en webbläsare. Om du vill öppna filen med Anteckningar igen så måste du högerklicka på filen, välja Öppna med i menyn och sedan Anteckningar.

Bild på hur man öppnar en HTML-fil med "Anteckningar".

Om du vill öppna filen med Anteckningar måste du högerklicka på filen och sedan välja Anteckningar i menyn Öppna med.

Du har nu den kunskap som krävs för att skapa, öppna och redigera hemsidor, nu behöver du bara lär dig hur HTML fungerar, vilket du kan göra i vår skola.