gå direkt till:
kapitel 1
>Inledning
>Ordlista
>Hur...börja?
kapitel 2
>Att göra en sida
>Ordlista
>Förberedelser
>Sidegenskaper
>Text
>Textlänkar
>Bilder
>Bildlänkar
>Bakgrund
>Tabeller
>Infoga tabell
>Avslutning

hemsideverkstad

1 Inledning
Det är roligt att göra hemsidor! Oavsett om man publicerar sin hemsida på Internet eller bara har den på sin egen dator, är det lätt att bli fast i knep och knåp så att tiden bara försvinner.

Allt är möjligt och det enda sättet att lära sig och vilja lära sig mer är att praktiskt bygga hemsidor. Genom att ständigt förbättra och förändra lär man sig så mycket mer än genom att bli instruerad av någon som redan kan. Att prata eller läsa om teorierna och tekniken bakom hemsidesnickeri är ungefär som att träna torrsim på landbacken. Kanske nödvändigt, men ändå inte alls samma sak som att dyka i en sommarljum insjö och glida fram genom vattnet.

Detta är en handledning att göra hemsidor med hemsideredigerare, så kallade WYSIWYG-program (WhatYouSeeIsWhatYouGet). Dessa program förenklar på så sätt att man hela tiden kan se vad man håller på med till skillnad från ren HTML-programmering.

överst

1.1 Ordlista
För att hänga med i snacket kan det vara bra att känna till vissa ords betydelse. Läs ordlistan i den ordning den presenteras, för att få största möjliga behållning av den.

Hemsida: En eller flera sidor som har HTML-kod och därför går att läsa med en nätbläddrare via Internet.

Sida: En sida i en hemsida.

Internet: Det globala nätverk som kopplar samman datorer som är anslutna till det. Även kallat nätet eller webben.

HTML: Den speciella kod som används för att utforma hemsidor. Förkortningen står för Hypertext Markup Language.

Knacka kod: Använda sig av ett enkelt textprogram och skriva den kod som nätbläddraren tolkar till en hemsida.

Nätbläddrare: Program som gör om HTML till attraktiva hemsidor. Dessa program kallas även för browsers eller webbläsare. De mest kända är Netscape Navigator och Microsoft Internet Explorer (IE) och dessa finns i en mängs varianter från version 1-4.5 (Navigator) och 1-5 (IE). Ju högre version, desto bättre.

WYSIWYG: Ett program som är gjort för att man skall slippa knacka kod. Det finns en mängd WYSIWYG-program och både Navigator och IE har gratisprogram som är användbara. Man kan lägga in text och bilder och direkt se hur sidan ser ut i en nätbläddrare.

Länk: Genom att klicka på en bild eller en text kommer man direkt till en förutbestämd hemsida. Dessa klickbara ytor kallas för länkar eller hyperlänkar.

Adress: En hemsida måste ha en adress. Om sidan finns tillgänglig på Internet börjar adressen med http://

Bilder: Bilder går utmärkt att publicera på hemsidor, men de måste vara i antingen GIF eller JPG (JPEG) format.

GIF: Ett bildformat som går att visa i nätbläddrare. Detta format lämpar sig bäst för bilder med få nyanser.

JPG: Ett annat bildformat som går att visa i nätbläddrare. Detta format lämpar sig bäst för bilder med många nyanser och toningar. Kallas ibland JPEG.

Java: Ett programmeringsspråk som gör det möjligt att få sidan mer dynamisk och interaktiv.

CSS: Betyder Cascading Style Sheets och förenklar möjligheterna att styra en stor hemsidas utseende i fråga om text och layout.

Det var en liten början. Fler ord förklaras efter hand. Ordlistorna är främst till för att du som vill ska ha en chans att hänga med i snacket runt fika-bordet, så att säga.

överst

1.2 Hur ska man börja?
När du väl har bestämt dig för att du ska göra en hemsida, har du troligen redan funderat på många viktiga detaljer:

* Vad är det jag vill förmedla?
* Vem är sidan till för?
* Vad har de för utrustning?
* Vilken kunskapsnivå ligger de på?
* Varför kommer de att söka upp din sida på Internet?

När du besvarat dessa frågor är det dags att gå vidare med planeringen av sidans uppbyggnad. Ett mål som alla sidor på Internet borde ha är att besökarens insats skall vara minimal för att tillgodogöra sig innehållet. Om detta mål står i centrum kommer du att skapa en sida som är välstrukturerad med ett relevant innehåll presenterat i en välorganiserad och attraktiv layout.

Om du skall presentera så mycket information att denna inte skulle rymmas på en A4, med text och bilder, är det värt att dela upp din sida i flera mindre. Då är det viktigt att du gör en logisk indelning som läsaren lätt kan förstå.

Sätt dig ner med ett tomt ark i A3-format framför dig. Rita upp en innehållsstruktur med en entrésida högst upp. Från denna sida länkar du sedan till sidor som ligger under i hierarkin. Skriv kort vad sidorna skall innehålla.

När du är "klar" med den innehållsliga strukturen är det dags att ta itu med den utseendemässiga. Om din hemsida innehåller fler än en sida (vilket nästan alltid är fallet) är det viktigt att läsaren känner igen sig i layouten när han eller hon bläddrar mellan dina sidor. Placera alltid länkarna på samma ställe på sidan. Fundera på eventuella utsmyckningar av sidan, som bakgrund, teckensnitt och bilder. Skissa upp en mall hur "typsidan" skall se ut.

Nu har du något att jobba med framför WYSIWYG-programmet. Det som återstår är att försöka få det färdiga resultatet att se ut som dina idéer.

överst

2 Att göra en sida
Om du har en idé är det bara att sätta dig framför datorn och använda dig av "learning-by-doing-pedagogiken". I början kommer det att kännas trögt men efterhand börjar du tänka i hemsidetermer. Instruktioner och ordlista utgår från Navigators Composer, men dessa kan ganska lätt föras över till IE:s FrontPage Express eller liknande.

överst

2.1 Ordlista
Composer: Netscapes WYSIWYG-program, som följer med Netscape Navigator.

FrontPage Express: Microsofts WYSIWYG-program, som följer med Internet Explorer.

Bakgrund: Som bakgrund till en sida kan man antingen lägga en färg eller en bild. Om man väljer att lägga en bild dupliceras den över hela sidan. Gör man bilden med eftertanke kan man få den att dupliceras så att ett visst mönster på sidan, exempelvis som en blå list längst ut till vänster.

Tabell: Om man vill styra sidans layout, så att den i princip skall se likadan ut för alla besökare, oavsett skärmstorlek och dator, skall man använda sig av tabeller. En tabell med valfritt antal kolumner och rader kan läggas in och på så sätt styr man var text och bild placeras på sidan.

Cell: En cell är en ruta i en tabell.

Pixel: En måttenhet, som anger bildpunkter.

överst

2.2 Förberedelser
Tänk igenom en hemsidestruktur och hur sidorna ska se ut. Sedan ska du skapa en ny mapp, förslagsvis i mappen "Mina dokument". Det gör du enklast genom att öppna "Mina dokument", klicka på "Arkiv", dra ner pekaren till "Nytt", föra ut pekaren på "mapp" och klicka där. Du får då en mapp längst ner som heter "Ny mapp". Klicka två gånger på texten och döp den till, förslagsvis, "Hemsidan". I denna mapp skall du spara alla HTML-dokument och bilder som hör till din hemsida.

Nu kan du starta din WYSIWYG.

överst

2.3 Färger och egenskaper för sida
Du börjar med en vit tom sida. Det första du kan göra är att välja färger på text, länkar och bakgrund. Har du en bild som du vill ha som bakgrund måste du börja att spara den i mappen "Hemsidan".

Högerklicka på den tomma sidan och välj "Sidegenskaper". Välj först en bakgrundfärg och anpassa sedan textfärgerna så att dessa stämmer överens med bakgrundsfärgen. Klicka på "OK".

Spara sidan i mappen "Hemsidan" och välj ett valfritt namn. Använd dock endast små bokstäver a-z, eller siffror. Använd högst åtta tecken.

överst

2.4 Skriv text
Nu kan du skriva text, ändra storlek, teckensnitt och justering precis som i ett vanligt ordbehandlingsprogram. Mitt förslag är att du skriver en rubrik som du centrerar och ökar i storlek. Du kan använda vilket teckensnitt som helst, men du måste vara medveten om att för att teckensnittet skall bli det önskar måste den som tittar på sidan ha det valda teckensnittet på sin dator. Det är därför bra att undvika ovanliga teckensnitt.

överst

2.4.1 Textlänkar
Om du vill att ett eller flera ord skall vara en länk är det enkelt att ordna. Markera det eller de ord du vill skall fungera som länk, klicka på länk-knappen och skriv vilken sidadress länken skall leda till. Här kan du välja att leda länken till en av dina egna sidor eller till en sida på nätet. Om du väljer det förra skall du skriva namnet på sidan följt av ".html", exempelvis "familjen.html". Om du väljer det senare måste hela adressen skrivas, exempelvis "http://www.skolan.hudiksvall.se/laroverk". Du kan också välja att länka till en e-postadress och då skall sidadressen anges som följer: "mailto:fornamn.efternamn@school.hudiksvall.se".

Spara sidan.

överst

2.5 Infoga bilder
För att kunna infoga en bild på din sida behöver du ha en bild i GIF- eller JPG-format i mappen "Hemsidan". Om du har det ser du till att markören blinkar där du vill ha din bild. Därefter klickar du på knappen för bild och skriver in namnet på den bild du vill placera där, exempelvis "ansikte.jpg".

Om du vill att sidan skall fungera på andra datorer än din egen, är det viktigt att du skriver in bildens namn i stället för att du bläddrar fram den med knappen och öppnar den. Om du gör på det senare sättet kommer inte bildens adress att stämma på någon annan dator än din.

Undvik att överlasta en sida med bilder. Begränsa den totala bildstorleken per sida till ca 30 kB. Varje extra kB betyder extra nerladdningssekunder.

2.5.1 Bildlänkar
Precis som ett eller flera ord kan vara en länk, kan också en bild vara en länk till en annan sida. Klicka på den bild du vill ska fungera som en länk och klicka sedan på länkknappen. Skriv in sidadressen till den sida du vill att länken skall leda till (se 2.4.1)

överst

2.5.2 Bakgrundsbild
Det kan hända att du tycker att det känns tråkigt med en enfärgad sida. Du kan då lägga in en bakgrundsbild i stället. Viktigt att tänka på när man lägger bakgrundsbilder är att nätbläddraren duplicerar bilden så att den fyller ut hela sidan oavsett hur stor skärm man har. Lägger man in en liten bild, fylls rutan av massor av likadana små bilder bredvid varandra.

Om du vill ha en bakgrund med en färgad kant på vänster sida och ett vitt fält på resten av sidan, skall du göra en remsa, som är 1200 pixlar bred och 25 pixlar hög, i ett ritprogram. Om du låter 100 pixlar från vänster sida vara ett blått fält och resten vitt, kommer denna remsa dupliceras så att det ser ut som om ett 100 pixlar brett fält tillvänster på sidan är blått.

Spara bilden i GIF- eller JPG-format i mappen "Hemsidan", förslagsvis med namnet "bakgrund".

Kom ihåg att spara sidan med jämna mellanrum.

överst

2.6 Tabeller
Tabeller är det mest effektiva sättet att styra över din hemsidas utseende. Genom att låsa texters och bilders lägen på en sida i tabeller, kan du med ganska stor säkerhet förutsäga hur sidan kommer att se ut, oberoende av vad läsaren använder för nätbläddrare och dator.

En tabell begränsar en sidas mått och styr text och bild till bestämda positioner på sidan.

Tabellen delar in sidan i ett rutnät. Du väljer själv hur många rader och kolumner tabellen ska. Rutorna som tabellen består av kallas celler. En tabell består alltså av en eller flera celler.

Tabellens storlek kan bestämmas exakt. För att sidan skall bli överskådlig bör bredden på tabellen bestämmas till maximalt 650 pixlar. När du sedan bestämmer cellbredden, se då till att summan av cellernas bredd blir densamma som tabellbredden.

överst

2.6.1 Infoga en tabell
Börja om med en tom sida. Det går bra att ha en bakgrundsfärg eller bakgrundsbild. Klicka på tabellknappen. Nu får du upp en ruta där du kan bestämma antalet rader och kolumner, samt en hel del annat. Testa olika varianter och se hur det färdiga resultatet ser ut genom att klicka på "ratten".

I varje cell kan du lägga in text eller bild på samma sätt som beskrivits i 2.4 - 2.5. För att ändra cell- eller tabellegenskaperna högerklickar du i cellen/tabellen och väljer tabellegenskaper. Nu kan du justera cellers och tabellens utseende.

2.7 Att bygga en hemsida
Nu kan du hemsidebyggandets tre ackord. Med denna kunskap kan du komma långt. Men det finns mycket mycket mer spännande att lära. Som ramar och CSS till exempel. Men mer om det senare...

överst