Din startsida, index-sidan är den sida som laddar först när du skriver in en webbadress i webbläsaren, exempelvis http://www.dinhemsida.se. Vanligast är att filen index.html laddar först men detta beror på webbhotellets serverinställningar. Ibland kan exempelvis filen index.php ha företräde och då är det enklaste att ta bort den helt och hållet.

Din webbplats förstasida ska alltså alltid ha namnet index.html om du gör en vanlig enkel, statisk och "traditionell" webbsida. Senare när du kanske blivit lite mer avancerad och bestämmer dig för att göra en webbplats i PHP så kommer startsidan istället att heta index.php. You get it.

Därför ska vi nu skapa en startsida, index.html som vi senare kan bygga vidare på.

Skapa index.html

1. Starta EVRSoft First Page 2006.

2. Du får upp nedanstående ruta. Välj XHTML 1.0 Transitional. Det betyder förenklat att vi kommer att skriva kod som kan avvika något från perfekt skriven XHTML (strict xhtml) men detta har inget med kvalitén att göra. Din webbsida kommer inte att ha några nackdelar som är värda att nämnda.

3. Nu får du upp en kodvy XHTML Transitionaldär du ser XHTML-koden som du kan redigera.

Vi börjar med att göra ett minipill i DOCTYPE. Lägg till till det som jag rödmarkerat i koden nedan.

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">


Lägg till följande i head taggen, mellan <head> och </head>.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="sv" />

Detta innebär:

- Att vi kan använda svenska tecken i koden.
- Att vi talar om att innehållet är svenska.

4. I taggen title, mellan <title> och </title> skriver du in en beskrivande titel. Här ska de viktigaste sökorden ingå för de sökningar som du vill att din hemsida ska synas på i Google (OBS! Det ska vara relevant - inget spam!) HTML-title är också det som visas som rubrik i sökmotorlistningar samt längst upp i ditt webbläsarfönster och bör högst vara 70 tecken lång.

Exempel-titel: "Min Webbsida - Övning i att Skapa Webbsida i XHTML"

5. Skriv in en exempeltext mellan <body> och </body> för att göra en liten kontroll att allting fungerar.

Exempel: "<p>Hello World - jag kan skriva å ä och ö!</p>"

Taggen p talar om att texten är ett stycke.

6. Så här ska din kod se ut nu:

Startsida - Index - Kod

5. Spara din webbsida som index.html i en mapp som du själv väljer och som du hittar. Jag valde mappen "hemsidatest".

6. Om du klickar på index.html så bör din startsida nu öppnas felfritt i din webbläsare.

Skapa en stilmall

1. Välj "File > New > Blank Document" för att skapa en tom sida.

2. I detta dokument ska du än så länge bara skriva in en sak:

* {margin:0; padding:0;}

Detta gör att alla fördefinierade marginaler för olika webbläsare tas bort och således får vi samma utgångsläge att bygga vidare på i alla webbläsare, även om avvikelser webbläsare emellan iallafall kommer att uppstå senare.

2. Spara denna blivande stilmall som "style.css" i samma katalog som index.html. Stilmallen kan egentligen döpas till vad som helst så länge den bara innehåller bokstäverna a-z och siffrorna 1-9 men i exempelt använder vi style.css.

Länka till en CSS-fil

Eftersom vi vill kunna styra utseendet på alla element som vi lägger in på webbsidan så måste vi koppla XHTML-koden till CSS-filen ovan.

1. Välj "File > New > Blank Document" för att skapa en tom sida.

2. Spara denna blivande stilmall som "style.css" i samma katalog som index.html.

3. Från filen index.html länkar du till css-dokumentet med nedanstående kod. Koden ska ligga någonstans mellan <head> och </head>

<link href="style.css" rel="stylesheet" type="text/css" />

Slutresultat - koden för index.html

Startsida kod 2

Obs! Filerna som du jobbar och uppdaterar i takt med varje artikel kommer i hela guiden att heta "index.html" och "style.css". Ingenting annat.

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)