av Carl Svensson

Att göra webbsidor, eller HTML-dokument om man så vill, är mycket enklare än det låter, så länge som man inte ställer så stora krav på hur det skall se ut. Ju mer design man lägger till, ju svårare blir det.

Men för att göra en enkel HTML-sida så krävs det inte så mycket kunskaper. Man behöver dessutom inga avancerade program, det enda som behövs är programmet Anteckningar, eller Notepad som det heter på engelska, och det är ett program som följer med alla Microsofts operativsystem.

Det finns idag många avancerade program för att göra HTML-dokument, de kallas för Webb-editorer, och ett av de vanligaste är Microsoft Frontpage. Det går givetvis bra att använda dessa, och man behöver inte lära sig någon HTML-kod för att kunna skapa en webbsida, men jag föredrar ändå att arbeta med Anteckningar. Anledningen är att det är stor fördel att ha kunskap om koden genom att man kan styra utseendet på sidan mera, samt att de flesta Webb-editorer genererar mer kod än vad som är nödvändigt, vilket gör att det tar längre tid att ladda ner sidan. Ett annat problem med Webb-editorer är de inte alltid följer standarden. Det kan leda till att det inte går att se sidan i en webb-läsare.

Då skall vi titta lite på koden. Det låter väldigt komplicerat med kod, men det är egentligen bara ett antal enkla ord som man snabbt lär sig utantill. Koden skiljs från övrig text med ett "mindre än"-tecken före kodordet och ett "större än"-tecken efter. En HTML-fil börjar alltid med ordet HTML därefter följer ordet HEAD och TITLE. Efter dessa skriver man namnet på sidan. När man skrivit ett kodord måste man markera var koden skall sluta att gälla det gör man genom att skriva kodordet igen, fast med ett snedstreck framför, såhär: /TITLE. på bilden går det att se hur koden skall se ut.

Som det gå att se i bilden, så har jag även skrivit BODY. Efter det kodnamnet så skriver man den text som skall synas på sidan. Härefter följer också all kod som bestämmer hur sidan skall se ut. Tillsammans med BODY har jag även skrivit BGCOLOR="white". Denna kod är till för att bestämma bakgrundsfärgen. Vit är en mycket bra bakgrunsfärg, som jag rekomenderar att man använder. Slutligen har jag avslutat koden med /BODY och /HTML.

Nu är det dags att spara filen. Det gör man på vanligt sätt genom att gå upp i menyn och välja Arkiv och sedan spara. När man får upp rutan för spara måste man välja en lämplig katalog, och sedan måste man ange ett filnamn. Först skall man dock ändra filtyp till alla filtyper. Filnamn som skall användas på webben får inte innehålla stora bokstäver, och bokstäverna å,ä och ö får inte användas. Filnamnet skall avslutas med .htm . Denna fil kallar jag för start.htm .

Nu går det att titta på filen i en webbläsare. Det kan man göra genom att klicka på filen i den katalog den ligger, eller genom att gå via menyn Arkiv, Öppna och Bläddra. Sidan ser ut såhär i en webb-läsare:

Nu har vi kommit så långt att vi både kan skapa en fil och se på resultatet. I forsättningen kommer jag bara att demonstrera kod, och så får ni själva testa hemma, och se hur det ser ut. Nu skall vi titta på hur man lägger in en bild. Det första man måste göra är att fixa en bild-fil. Det kan man göra genom att kopiera hem en från Internet, eller så har du säker någon liggande på datorn. Observera att bildfilen måste vara av typen JPG (.jpg) eller GIF (.gif), och filnamn samt filändelse får endast innehålla små bokstäver.

Bilden måste läggas i samma katalog som HTML-filen ligger i eller i en katalog under den. Det kan vara lämpligt att ha en som heter bilder där man förvarar bilderna. Innan vi lägger till koden för bilden så skriver vi BR. Detta ger en radbrytning och vi undviker att bilden hamnar på samma rad som bilden. För BR behöver man inte ange ett slut därför skriver man aldrig /BR. För att lägga in en bild skriver man IMG SRC="bilder/bild1.jpg" och direkt efter /IMG SRC. Det som står inom situationstecken är först katalognamnet och efter snedsträcket kommer filnamnet. Nedan kan du se hur det ser ut i koden.

Testa att skriva in detta i koden, och se vad som händer. Spara HTML-filen och tryck på uppdatera i webb-läsaren. Givetvis skall du byta ut bild1.jpg mot filnamnet på den bild som du prövar med. Om bilden inte dyker upp så ligger inte filen på rätt plats eller så har du skrivit fel i koden.

<HTML>
<HEAD>
<TITLE> Min först sida </TITLE>
</HEAD>
<BODY BGCOLOR="white">
Här kan jag skriva den text som jag vill ha.<BR>
<IMG SRC="bilder/bild1.jpg"></IMG SRC>
</BODY>
</HTML>


Nästa steg är att lära sig att använda tabeller. Jag tycker att tabeller är bra till att strukturera upp en sida, men det tycker långt ifrån alla webbutvecklare. En tabell skapar man genom att skriva TABLE BORDER="1" därefter skriver man TR för att markera att en rad börjar. BORDER bestämmer kantlinjens tjocklek. Cellerna i tablellen börjar med TD och slutas med /TD. När det är dags att byta rad skriver man /TR och när tabellen är slut skriver man /TABLE. Detta blir en tabell med kantlinjer av standartyp. Efter varje tabell lägger jag till ett radbryt (BR).

Om man vi ha en tabell med utan kan linjer får man skriva TABLE BORDER="0". Det går att styra tabellens storlek genom att ange bredd (WIDTH) och höjd (HEIGHT), genom att skriva TABLE BORDER="0" WIDTH="200" HEIGHT="100". Siffrorna anger antal pixlar, men det går att ändra till procent av fönstret genom att skriva ett %-tecken efter. Då anpassar sig tabellen efter fönstrets storlek.

För den som vill går det även att styra utseendet på tabellens kantlinjer. Då skriver man såhär: TABLE CELLSPACING="1" CELLPADDING="4" BORDERCOLOR="#000000" BORDER="2". BORDERCOLOR bestämmer färgen på kantlinjen. Här är färgen angiven med färgkod. CELLSPACING och CELLPADDING kan man använda för att prova lite olika utseenden på tabellen. Jag har lagt till dessa tre exempel till koden nedan.

<HTML>
<HEAD>
<TITLE> Min först sida </TITLE>
</HEAD>
<BODY BGCOLOR="white">
Här kan jag skriva den text som jag vill ha.<BR>
<IMG SRC="bilder/bild1.jpg"></IMG SRC>
<TABLE BORDER="1">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
<TABLE BORDER="0" WIDTH="200" HEIGHT="100">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
<TABLE CELLSPACING="1" CELLPADDING="4"
BORDERCOLOR="#000000" BORDER="2">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
</BODY>
</HTML>


Det går bra att byta ut texten i cellerna mot en bild. Det gör man genom att skriva koden för bild i stället för texten. I nästa kod exempel har jag bytt ut texten mot en bild i sista tabellens första cell.

Standard-teckensnittet är i de flesta webb-läsare Times New Roman, och det är inte alltid det tecken snitt som är snyggast. Denna sida som du läser just nu använde ett annat teckensnitt, och för att definiera ett annat teckensnitt måste man ange koden FONT FACE="Arial". Arial är alltså teckensnittet Arial. Det går också att ange storlek på det viset FONT FACE="Arial SIZE="2". När texten är slut måste man skriva /FONT. Genom att skriva B så får man fetstil. Fetstil avslutas med /B.

Ibland vill man ha med kommentarer som inte skall synas på sidan. Då skriver man !-- --. Texten som inte skall synas skriver man emellan. Det kan också användas för att dela av sidan så att strukturen skall gå fram tydligare. I koden nedan går det se hur det ser ut, när man skriver ut det.

<HTML>
<HEAD>
<TITLE> Min först sida </TITLE>
</HEAD>
<!--************************************************-->
<BODY BGCOLOR="white">
<!--Här går det att skriva kommentarer utan att
det syns på sidan-->
<FONT FACE="Arial" SIZE="2">
<B>Rubrik</B><BR>
Här kan jag skriva den text som jag vill ha.<BR>
<IMG SRC="bilder/bild1.jpg"></IMG SRC>
<TABLE BORDER="1">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
<TABLE BORDER="0" WIDTH="200" HEIGHT="100">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
<TABLE CELLSPACING="1" CELLPADDING="4"
BORDERCOLOR="#000000" BORDER="2">
<TR>
<TD> <IMG SRC="bilder/bild1.jpg"></IMG SRC> </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
</FONT>
</BODY>
</HTML>


Nu har vi tittat på viktig delar i vanlig HTML-kod. Detta är naturligtvis bara en liten del av vad man kan gör med HTML. Men det är omöjligt att göra en sida som omfattar allt. Därför hänvisar jag till andra webbsidor som hanlar om HTML. Dessa kan man hitta genom att söka på Evreka

Ett annat sätt är att titta på den sida som man är på. Det gör man genom att högerklicka och på popupp-menyn välja visa källa. Då kan man se koden för den aktuella sidan. Detta kan man lära sig mycket på.

Genom att använda sig av Cascading Style Sheets(CSS) kan man styra utseendet på länkar. Nedan har jag lagt till CSS i koden. CSS-koden är markerad med röd färg. Du kan läsa mer om CSS på denna sidan

<HTML>
<HEAD>
<TITLE> Min först sida </TITLE>
<style type="text/css">
<!--
BODY {MARGIN-TOP:0pt; MARGIN-LEFT:0pt; MARGIN-RIGHT:20pt}
a:active { color: #715827; text-decoration: none}
a:hover { color: #715827; text-decoration: none}
a:link { text-decoration: none}
a:visited { text-decoration: none}
-->
</style>
</HEAD>
<!--************************************************-->
<BODY BGCOLOR="white">
<!--Här går det att skriva kommentarer utan att
det syns på sidan-->
<FONT FACE="Arial" SIZE="2">
<B>Rubrik</B><BR>
Här kan jag skriva den text som jag vill ha.<BR>
<IMG SRC="bilder/bild1.jpg"></IMG SRC>
<TABLE BORDER="1">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
<TABLE BORDER="0" WIDTH="200" HEIGHT="100">
<TR>
<TD> Detta är första cellen </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
<TABLE CELLSPACING="1" CELLPADDING="4"
BORDERCOLOR="#000000" BORDER="2">
<TR>
<TD> <IMG SRC="bilder/bild1.jpg"></IMG SRC> </TD>
<TD> Detta är andra cellen </TD>
</TR>
</TABLE><BR>
</FONT>
</BODY>
</HTML>


På FK Finn´s webbsidor har vi valt att ha en speciell mall, och det är den mallen som används på dessa sidor. Därför så kan det vara bra att studera just denna sidan för er som är intresserade av att arbeta med klubbens sidor. När en webbsida är klar för publicering så måste fixa ett utrymme på någon webb-server. Det finns många som erbjuder detta gratis för privatpersoner. Två exempel är Passagen och Torget.

Dessutom behöver du ett FTP-program för att föra över filerna mellan din dator och webb-servern. Du kan läsa mer om FTP-program här. Om ni gör sidor som ni vill lägga till vår hemsida, så kontakta mig så fixar jag länkar till sidorna.

Den här sidan bör ge en bra start på arbetet med webbsidor. Jag skall försöka uppdatera den med en lista över användbar HTML-kod och nya länkar, men kom ihåg att det snabbaste sättet att lära sig HTML är att titta på hur andra gjort. På de flesta webbsidor går det att se HTML-koden genom välja visa källa. Lycka till med arbetet!!!
Om det är något du undrar över så går det bra att höra av sig till mig på e-post: