Hemsidor för nybörjare - del 1: Introduktion

Välkommen till vår guide för nybörjare som vill lära sig göra hemsidor från grunden.

Innan man blir vild och kodar som en galen oxe så bör man känna till en mängd tråkiga men viktiga termer, samt vad de betyder:

Filstruktur
Serversidan vs Klientsidan
W3C
Utvecklingsmiljöer

Man kan självklart göra hemsidor utan någon kunskap om detta, men allt blir så mycket lättare och många frågetecken försvinner när man lärt sig dessa termer. Som du kanske redan listat ut så är dessa punkter just vad den första delen i vår nybörjarguide handlar om.

Filstruktur

Med filstruktur menas hur alla filer på din webbplats är lagrade och sorterade. En hemsida är ju inte en enda stor fil, utan är uppdelad i exempelvis flera sidor, stilmallar och bilder.

Alla filer på nätet är lagrade på en server. Man kan installera en server på sin egen dator, eller hyra en på nätet, ifall man inte vill ha en dator igång dygnet runt (vilket krävs ifall man vill ha besökare). Att ha en egen server installerad på sin dator kan vara jättebra för att lära sig hur de fungerar och längre fram i den här artikeln installerar vi en server för testbruk.

En webbserver är i de flesta fall som standard inställd på att följa normal trädstruktur. Detta innebär alltså att du kan ha en mapp som heter bilder, där du lägger dina bilder och en mapp som heter dokument, där du lägger dina dokument. För att sedan komma åt din senaste semesterbild från din server kan du använda exempelvis följande adress:

minwebbplats.se/bilder/Tailand_7.jpg

Viktigt att notera är att servrar på *NIX-plattformar (vilket de ofta är ifall du köpt ett webbhotell) är känsliga för stora och små bokstäver. Man brukar också försöka undvika bokstäver som Å, Ä och Ö, eftersom servern kan få problem att förstå dem.

Servern är också inställd på att söka efter filer som heter exempelvis index.html. Det är därför hemsidans startsida hamnar i index-filen. Låt oss säga att jag vill göra en simpel sida om mig själv. Då skulle jag troligtvis ha strukturerat det såhär:

Men hallå, här sitter jag och skriver om serverns standard-inställningar? Servern är inställd till att leta filer som ett vanligt filsystem, men detta går att ändra på med exempelvis mod_rewrite i Apache, men det är överkurs och får hamna i en egen artikel.

Serversidan vs Klientsidan

Oj oj, nu går det fort framåt. Vad jag har skrivit om till nu är egentligen vad som händer mellan servern (som innehåller din webbplats) och klienten (din webbläsare). Nu går vi in mer på vad servern egentligen gör och vilken uppgift klienten har.

Ifall du är bra på engelska så kanske du redan förstår att servern delar ut information, som klienten kan förstå och visa för användaren. I de flesta fall innebär detta att servern har en statisk fil som den på en gång skickar vidare till klienten.

Det finns dock mer avancerade exempel, när man använder ett serverbaserat scriptspråk för att göra sin webbplats mer dynamisk. En dynamisk webbplats innehåller kod som genererats automatiskt av servern och sedan översatts till det klienten kan förstå.

Som exempel tar vi en simpel textfil med texten Hello World!. I en statisk textfil skulle det se ut så här ifall du öppnade den i exempelvis anteckningar:

Hello World!

Ifall man använder ett serverspråk som PHP, skulle det kunna se ut på följande sätt istället, notera att detta är vad du ser om du öppnar filen direkt från servern:

<?php $text = "Hello World!"; echo $text; ?>

Ifall du öppnade båda dessa via din webbläsare skulle du få samma resultat.

Vid en första blick känns detta nog helt onödigt, men PHP innehåller en mängd funktioner som gör att du kan hämta och spara i databaser och liknande, så du kan uppdatera din webbplats direkt online istället för att måsta ändra manuellt hela tiden.

Klienten däremot är inte lika dynamisk av sig. Den klarar av ett visst antal scriptspråk. Till skillnad från servrar, som kan ha olika scriptspråk, använder klienterna specifika scriptspråk som bestäms utav W3C (som vi kommer till senare).

Klienterna är som sagt olika webbläsare. De mest populära idag är Microsoft Internet Explorer, Mozilla Firefox, Opera och Apple Safari, men det finns en hel del. Vad dessa har gemensamt är att de är gjorda för att läsa den information som servern skickar ut och presentera den för användaren.

W3C

Webbläsarna klarar ett par olika språk. För information används oftast HTML eller XHTML, som du kan se genom att exempelvis visa källan för W3Sidan.net. HTML står för övrigt för HyperText Markup Language.

För att få dessa HTML-sidor någorlunda snygga används något som kallas för CSS, som står för Cascading StyleSheets. Det finns även ett tredje språk, som heter JavaScript, som används för att få lite mer dynamisk känsla på hemsidan, utan att behöva använda serverspråk.

Eftersom det finns flera webbläsare är det svårt att få alla webbläsare att kunna samma saker och just därför finns W3C, World Wide Web Consortium. De bestämmer olika standarder för hur klientspråken på webben borde se ut och sedan får webbläsarna försöka stödja så många av dessa som möjligt.

De senaste åren har W3C växt sig större, Microsoft har legat efter en hel del med stöd för olika tekniker, medan konkurrenterna har blivit bättre och bättre. De så kallade webbläsarkrigen är egentligen ganska spännande och verkar aldrig ta slut.

Utvecklingsmiljöer

Det sista jag tänkte ta upp innan vi kan börja koda är utvecklingsmiljöer. För det första rekommenderar jag att man installerar en lokal webbserver som man kan testa saker och ting på.

En WAMP/LAMP/MAMP-server är en god start. Det står för Windows/Linux/Mac OS X + Apache + MySQL + PHP och är alltså en bladning av dessa mjukvaror. Vi kommer i den här artikelserien troligtvis bara behöva Apache men en del MySQL- och PHP-exempel kan dyka upp.

En trevlig textredigerare gjord för kod kan också vara bra att ha. Vilken man vill använda beror helt på hur stor webbplats man arbetar med. För stora webbplatser använder jag själv Aptana, men den kan bara lite overkill för nybörjare.

Ifall du använder Windows så kan jag rekommendera InType som är en helt okej redigerare, som i skrivande stund är gratis eftersom den fortfarande är i Alpha-version. För Linux-användare rekommenderar jag GEdit som följer med Gnome eller Kate som följer med KDE och Mac OS X användare kan säkert gilla Smultron.

Det var allt för introduktionen. I nästa del börjar vi skapa innehåll med HTML.