Hur man gör en enkel hemsida

Det första du bör göra när du ska skapa en egen hemsida är att tänka efter: Vad är syftet med den här sidan; vad vill jag ha sagt på den; vilken struktur vill jag ha och behöver jag ha mer än en sida? Detta för att ha grundutförandet klart för dig. Sedan kan du alltid komplettera efter hand, och bygga ut sidorna om det blir nödvändigt.

När det gäller namn på dokumenten; hemsidor och bilder, så rekommenderas starkt att dessa namn alltid anges med gemener rakt igenom, alltså ingen versal i början av ordet. Anledningen till detta är att många s.k. webbservrar (där din hemsida lagras hos din Internetleverantör) skiljer på versaler och gemener. Dokumentet Index.htm är alltså inte samma som dokumentet index.htm.

Undvik också att använda mellanslag, specialtecken (å, ä, ö, ü etc.) i namnen, eftersom dessa tecken inte finns i större delen av världen. Vissa webbläsare kan inte heller tolka dem, och då kommer din hemsida inte att vara synlig för personer som använder en sådan webbläsare. Av samma anledning bör du inte heller använda för långa filnamn.

En rekommendation är att skapa en mapp på hårddisken där du samlar dina sidor. Då undviker du risken att länkar och annat inte fungerar, för att sökvägen är annorlunda än på hårddisken, när du lagt ut dem på Internet. Dessutom underlättar det när du ska kopiera upp sidorna till ditt hemsidesutrymme på Internet.

HTML

Det ”språk” som används för att göra hemsidor är HTML, vilket betyder HyperText Markup Language. Detta är en sorts kod som talar om för webbläsaren hur texten ska presenteras på sidorna. Koderna kan skrivas antingen med versaler eller med gemener. Resultatet blir detsamma vilket man än väljer, så det är en smaksak hur man vill skriva det. Använder man versaler så är det lite lättare att skilja koderna från resten av texten, men å andra sidan är det lättare att skriva gemener.

En webbsida är inget annat än ett textdokument, som innehåller HTML-koder och där filändelsen bytts ut från .txt till .htm eller .html (båda går lika bra att använda). Du kan alltså skriva in din text direkt i Windowsprogrammet Anteckningar (notepad.exe) och sedan spara dokumentet under t.ex. namnet index.htm. Index.htm är den fil som läses in automatisk när man skriver in en adress i webbläsarens adressfönster. Det spelar alltså ingen roll om du skriver http://www.hembygdshistoria.se/ eller http://www.hembygdshistoria.se/index.htm. Båda adresserna leder till samma sida. Om det däremot inte hade funnits en index.htm-fil i http://www.hembygdshistoria.se/ så hade man fått upp en lista över alla filer och underkataloger som ligger där. Därför är det lämpligt att alltid ha en index.htm-fil som startsida.

Om man bara har några få filer så kan man lägga allihop i samma katalog, men har man många dokument och bilder så är det lämpligt att använda sig av underkataloger (om internetleverantören tillåter detta). Det är då viktigt att komma ihåg att ange rätt sökväg till filerna i underkatalogerna. Se exempel nedan, i avsnittet Underkataloger.

Koder

Det här är grundkoderna, och de måste finnas med för att webbläsaren ska kunna visa din hemsida:

<HTML>
<HEAD>
<TITLE>Namnet på sidan, som även är den text som används när man lägger sidan som bokmärke i webbläsaren, och det som sökmotorerna registrerar som klickbar länk till hemsidan</TITLE>
</HEAD>
<BODY>
Här skriver du den text du vill ha med på sidan.
</BODY>
</HTML>

Observera att de flesta av koderna kräver en “stoppkod”. Detta för att webbläsaren ska veta var koden tar slut. Stoppkoden är densamma som startkoden, men med ett / lagt in framför, t.ex. <HTML> och </HTML>.

När man skriver html-kod så gäller det att komma ihåg att den inte tar hänsyn till radmatningar och tabuleringar. Inte heller visas mer än ett mellanslag. För att få en bra layout på sidan måste man därför använda koder för olika funktioner. De vanligaste koderna är:

<H1>Rubrikstorlek 1 (Header på engelska)</H1>

<H2>Rubrikstorlek 2</H2>

<H3>Rubrikstorlek 3</H3>

<H4>Rubrikstorlek 4</H4>

<H5>Rubrikstorlek 5</H5>

<H6>Rubrikstorlek 6</H6>

<P>Stycketecken (Paragraph på engelska), behöver ingen slutkod, men det går bra att skriva in </P> om man vill ha kontroll på styckena.
Vill man bara ha en radmatning så skriver man <BR> (BReak på engelska). Här skrivs ingen slutkod, eftersom det i sig själv är en avslutad kod.

<B>Fetstil (Bold på engelska)</B>
<I>Kursiv (Italics på engelska)</I>
<U>Understrykning</U> (Underline på engelska) Det är dock bäst att inte använda detta alternativ, efter det då är lätt att förväxla texten med en länk, som ju visas med understrykning.

Länkar och bilder

För att skriva en länk så används koden A samt parametern HREF (vet inte vad dessa står för). Slutkoden är dock alltid bara </A>.
Exempel: Här hittar du <A HREF="http://www.hembygdshistoria.se/">hembygdshistoria.se</A>.
Observera att adressen till hemsidan ska skrivas inom citationstecken.

Vill du att dina besökare på hemsidan ska kunna skicka e-post till dig, genom att klicka direkt på en länk på sidan, så skriver du den här koden:
<A HREF="mailto:min.epostadress@minleverantor.se">Skicka e-post till mig.</A>

För bilder används koden IMG (image) + SRC (source). De enda bildtyper som kan användas på en hemsida är de som har ändelserna .jpg, .gif och .png. Jpg-formatet används oftast för foton och är ”förstörande”, d.v.s. det komprimerar bilden genom att ta bort snarlika färger, vilket gör att om man senare vill ändra storlek på bilden så blir den väldigt suddig. Gif-formatet används oftast för datorgrafik och är begränsat till en färgskala om 256 färger. Png-formatet är en ersättare för gif, men har inte gifs begränsningar.
Koden skrivs <IMG SRC="bild.jpg" WIDTH="143" HEIGHT="146">. Här behövs inte någon slutkod eftersom det är en avgränsad del av dokumentet.

Width och Height anger bildens bredd och höjd i pixlar. Dessa mått får du reda på genom att öppna bilden i webbläsaren, högerklicka på bilden och välja Egenskaper. Width och Height kan uteslutas, men de gör att utrymmet för bilden ”reserveras” när sidan läses in i webbläsaren. Då laddas texten först, så att man kan läsa den medan bilderna växer fram på skärmen.

Vill du ha en ram runt bilden så lägger du till attributet BORDER="1". Ju högre siffra desto tjockare ram, och vill du inte ha någon ram alls, ange värdet 0 (eller ta bort Border-attributet).

Om du inte har någon förklarande text till bilden så lägger du till attributet ALT och skriver in en text där, t.ex.
<IMG SRC="mormor.jpg" WIDTH="143" HEIGHT="146" ALT="Den här bilden föreställer min mormor">.
Det du skriver in här syns inte på bilden, mer än om du håller markören över den. Det är däremot en hjälp för synskadade, eftersom denna text läses upp för dem som har datorer med tal. (Har du t.ex. en sida med bara en enda bild på, utan varken text eller ALT-attribut, så är den sidan fullständigt obegriplig för en synskadad.)

När det gäller bilder, så är det bäst att bestämma sig från början hur stor bilden ska vara, och göra denna inställning redan i bildbehandlingsprogrammet. Det går att minska storleken genom att skriva in önskad storlek i Width och Height, men detta är inte att rekommendera, eftersom det dels tar lika lång tid att läsa in bilderna på skärmen som om de visats i originalstorlek, och det dels är risk för att bilden blir förvrängd.

Det går även att kombinera länk- och bildkoderna för att få en klickbar bild, som leder till en annan sida.
Då skriver du så här: <A HREF="annansida.htm"><IMG SRC="bild.gif" BORDER="1" WIDTH="143" HEIGHT="146"></A>.
Här är det lämpligt att använda Border-attributet, eftersom det då syns att bilden är klickbar, men man kan naturligtvis utelämna det.

Underkataloger

Ligger dina bilder i en underkatalog så måste korrekt sökväg anges till bildfilen. Detta görs genom att skriva katalognamn/ före filnamnet.
Koden blir då istället <IMG SRC="bilder/bild.jpg" WIDTH="143" HEIGHT="146"> (om mappen du har bilderna i heter "bilder").

Exempel på katalogstruktur:
Grundkatalog, där index.htm-filen ligger
Underkatalog bilder
Underkatalog anor (t.ex.)
Skulle du i katalogen anor ha dokumentet mormor.htm i vilket du vill ha med ett foto på mormor, så skriver du
<IMG SRC="../bilder/mormor.jpg" WIDTH="143" HEIGHT="146">.
../ indikerar att dokumentet finns ett steg upp i katalogstrukturen, och det är ju där katalogen som heter bilder finns.

Har du ytterligare underkataloger så lägger du till ett ../ för varje steg, d.v.s. om du har delat upp dina dokument så att du under katalogen anor har en katalog som heter mormor, då blir sökvägen från dokumentet mormor.htm i katalogen anor/mormor följande:
<IMG SRC="../../bilder/mormor.jpg" WIDTH="143" HEIGHT="146">.
Detta låter krångligare än det är. Om du provar dig fram så förstår du snart hur det fungerar.

Om du vill ha en annan bakgrundsfärg på sidan än vit, så anges det i BODY-attributet. Färgkoden är sammansatt av tre delar; R, G och B (= Röd, Grön, Blå) och varje del anges med ett hexadecimalt tal för att få rätt färgnyans. Dessa färger (RGB) har vardera ett tal mellan 0 och 255.

I de flesta bildbehandlingsprogram går det att få fram dessa tal, för att omvandla dem till det hexadecimala talet, med hjälp av kalkylatorn som följer med Windows (calc.exe). Om det t.ex. står R(öd): 255, G(rön): 255, B(lå): 204, så gör du så här: öppna kalkylatorn och växla till den tekniska kalkylatorn (scientific), skriv in talet för Röd och välj Hex. Du får då fram det första hexadecimala numret, bestående av två tecken (kan vara siffror och bokstäver kombinerat).

I det här exemplet blir koden R=FF G=FF B=CC (= färgkod FFFFCC), vilket blir den ljusgula färg som den här sidan har. Vit bakgrund får du fram genom att skriva <BODY BGCOLOR="#FFFFFF"> och för svart bakgrund ändrar du till <BODY BGCOLOR="#000000">.

Exempel på färgkoder:
Gul = FFFF80
Grön = 008000
Blå = 0000FF
Sedan finns det ett stort antal nyanser däremellan. Många redigeringsprogram för HTML innehåller färdiga färgkartor, så att man bara behöver välja nyans och klicka på den för att rätt färg ska läggas in på hemsidan.

Dessa färgkoder kan även användas om du vill byta färg på texten. Attributet för text är FONT och för färg COLOR, och du skriver så här:
<FONT COLOR="#FF0000">Den här texten är röd.</FONT>
Det går även att skriva färgens engelska namn. Då skriver du:
<FONT COLOR="red">Den här texten är också röd.</FONT>.
Det är dock inte alla webbläsare som kan tolka denna kod korrekt, och det är ju inte heller säkert att det är just den nyansen du vill ha.

Det går även att byta storlek och teckensnitt på texten. Attributen för att göra detta är SIZE och FACE, och de skrivs så här:
<FONT COLOR="#FF0000" SIZE="+2" FACE="arial">Detta är röd text, teckensnitt Arial och två storlekar större än normalt.</FONT>

Specialtecken

Specialtecken, som å, ä och ö, tolkas olika av olika webbläsare, t.ex. beroende på vilket land läsaren befinner sig i. För att vara helt säker på att alla ska kunna läsa texten så bör man koda om dessa specialtecken, om detta inte sker automatiskt i HTML-redigeringsprogrammet du använder. Använd gärna sök&ersätt-funktionen i programmen, och försäkra dig om att alternativet för att matcha gemener/versaler är inkopplat. Här skiljer man nämligen också på dessa. Detta är de vanligaste tecknen:

å = å
Å = Å
ä = ä
Ä = Ä
ö = ö
Ö = Ö
æ = æ
Æ = Æ
ø = ø
Ø = Ø
Ü = Ü
ü = ü
é = é
– = 

Till slut

Därefter är det bara för dig att lägga in text och bilder, samt prova dig fram till vilket utseende du vill ha på din sida. Du sparar HTML-filen på hårddisken och kan sedan öppna den i webbläsaren, för att se hur den blev. Ett tips: stavningskontrollera texten. Man blir ”hemmablind” för en text man läst igenom flera gånger, och då ser man inte felen.

När du är nöjd med resultatet, så är det dags att publicera hemsidan på Internet. För att du ska kunna göra det så måste du ha någonstans att lägga den. I många internetabonnemang ingår utrymme för en egen hemsida. Om inte din leverantör tillhandahåller hemsidesutrymme så finns det ett antal olika platser där du kan beställa det.

För att lägga ut dina sidor på Internet använder du ett s.k. FTP-program (FTP = File Transfer Protocol = filöverföringsprotokoll). Det finns några olika att välja emellan och för att få reda på hur programmet fungerar kan du gå till respektive programtillverkares hemsida och läsa om det där. Ett annat alternativ är om du har någon i bekantskapskretsen som använder ett FTP-program. Då kan det vara lämpligt att använda samma program, så att du kan få hjälp vid behov.

Kommen så här långt har du nu din egen hemsida på Internet, och jag önskar dig lycka till med den.
Upp