www.dumell.net / tidningsartiklar / Hufvudstadsbladet / Gör en egen hemsida
Publicerad i Hufvudstadsbladet 15.09.1996
Gör en egen hemsida


Om du har möjlighet att se på andras www sidor så har du antagligen också möjlighet att göra dina egna. När du läst den här artikeln vet du hur.

Nästan alla företag som erbjuder privatpersoner Internetanslutningar ger kunderna möjlighet att ha egna webbsidor, hemsidor. Likaså erbjuder även de flesta universitet och högskolor sina elever denna möjlighet. Hittills har det främst varit företag och datorintresserade ungdomar som haft webbsidor men att göra webbsidor behöver inte vara svårare än att textbehandla. Kanske vill du göra en hemsida om någon exotisk hobby du har, kanske vill du göra dina dikter tillgängliga för allmänheten eller kanske du bara vill sätta upp bilder av dig själv på Internet.

<B> som i Bold

Webbsidor är egentligen rena texter som man kan skapa med "Notepad" i Windows eller med vilket textbehandlingsprogram som helst. Speciella effekter på webbsidan åstadkoms med engelska kodord, HTML koder, som markeras med < och > så att datorn vet att ordet är ett kodord och inte ett ord som skall skrivas ut på skärmen. Om du till exempel vill att ett ord skall skrivas ut med fetstil sätter du in ett <B> framför ordet och ett </B> bakom ordet (B står för Bold). Du slår alltså på "fetstil-läget" med <B> och stänger av det med </B>. På samma vis kan du använda <I> och </I> för att få kursiv text. Kodorden kan också vävas in i varandra enligt exempel 1. Alla kodord är dock inte sådana som slås på och av, till exempel <BR> som betyder ny rad (break) används endast som sådant. Notera att eventuella nya rader du skjuter in med "enter" tangenten när du skriver texten inte kommer att synas när texten ses med en webbläsare. För att tvinga in en radbrytning måste du använda <BR> (ny rad) eller <P> (ny paragraf/stycke, lämnar en tom rad).
Om du skriver webbsidorna med ett textbehandlingsprogram måste du komma ihåg att spara texterna som rena texter och inte som Word eller WordPerfect dokument. I Word väljer du att spara texten som "enbart text / text only" och i WordPerfect som "ANSI-text". Enklast är det att skriva texterna i det enkla textbehandlingsprogrammet Notepad som följer med Windows för det sparar alltid texterna i "ren" form.

Den enklaste hemsidan

Helt rakt upp och ned kan man ändå inte skriva en webbsida utan den måste följa en viss form. I exempel 2 ser du en extremt enkel men fullt fungerande hemsida. Hela texten inleds med <HTML> och avslutas med </HTML>, det här betyder att texten är en HTML text, dvs en webbsida. Själva texten är sedan indelad i två delar: <HEAD> (huvud) och <BODY> kropp. Huvudet innehåller vissa tekniska saker, till exempel dokumentets namn som skrivs mellan <TITLE> och </TITLE>. Dokumentets namn visas vanligtvis uppe i webbläsarens ram. I <BODY> finns sidans egentliga material, dvs den text du vill att skall synas på webbsidan. I det här fallet kommer texten "Välkommen till min hemsida" att skrivas ut centrerat och med fet stil. Texten "här kommer snart att finnas mängder av information om mig." skrivs ut med normal stil och från vänstra kanten. Koden <P> i slutet av rubriken betyder nytt stycke och innebär att det blir en tom rad mellan de två meningarna. Huruvida koderna skall skrivas ut på samma rader som texterna är smaksak och har ingen betydelse för hur sidan kommer att se ut, de kan lika väl skrivas ut på skilda rader.
Om du använder en PC kan pröva att skriva in exempel 2 i Notepad och spara det som C:\TEST.HTM. Webbsidor brukar sparas med suffixet HTM eller HTML och inte TXT eller DOC som vanliga textfiler. Starta sedan din webbläsare och skriv in adressen C:\TEST.HTM så kommer läsaren att ladda in sidan och visa den. Eftersom sidan laddas in från din hårdskiva behöver du naturligtvis inte vara ansluten till Internet.
Pröva att i Notepad ändra på texten i exempel 2, skjut in ett <I> någonstans, ta bort </B> eller flytta </CENTER>, spara texten på nytt med samma namn och klicka på Refresh/Reload i din läsaren så visas sidan med dina förändringar.
Bara för att du sparar sidorna på din hårdskiva blir de naturligtvis inte tillgängliga för alla Internetanvändare. När du har en webbsida du vill göra tillgänglig på nätet skall du ta kontakt med din Internetleverantör eller läroinrättningen där du studera och fråga var du skall spara sidan och under vilket namn. I de flesta fall är det tillräckligt att spara sidan under ett visst namn på Internetleverantörens dator.

Länkar

Nu har du sett hur enkelt det är att göra en webbsida som innehåller text. Nästa steg är att ta med länkar, för länkar är ju en viktig del av webb. Om du till exempel bor i Ekenäs så kanske du vill ha med en länk till din hemstads officiella hemsida. Pröva att lägga till raden <A HREF="http://www.surfnet.fi/ekenas">Ekenäs</A> någonstans mellan <BODY> och </BODY> i vår experimentsida. Skriv in det som en rad trots att raden kanske är bruten här i tidningen. Nu borde ordet "Ekenäs" ha dykt upp, understruket och med en annan färg än den övriga texten. Ordet "Ekenäs" är nu alltså en länk till Ekenäs hemsida på adressen www.surfnet.fi/ekenas.
De här koderna för länkar kan du skjuta in på samma vis som <I> eller <B> i en text.
Koden <A HREF=""> slår på "länkläget" så att orden därefter, framtill </A>, går att klicka på och adressen dit användaren skall länkas skrivs mellan citationstecknen precis som webb adresser normalt skrivs. Observera dock att http:// obligatoriskt i början av adressen. Om du lämnar bort http:// leder länken inte till en annan adress utan endast till en annan fil. På det här viset kan du dela upp din hemsida på flera sidor. Du kan till exempel skriva <A HREF="hemsida2.htm">gå till del två</A> för att skapa en länk som leder till en annan av dina webb sidor.

Bilder

Text i all ära, men bilder tar din hemsida till nya nivåer. Med koden <IMG SRC=""> kan du skjuta in en bild på sida, bildens namn skrivs mellan citationstecknen. Till exempel <IMG SRC="jag.gif"> sätter in bilden JAG.GIF på din hemsida, förutsatt att en sådan bild existerar. De två bildformat som används är GIF (för illustrationer) och JPG (för fotografiska bilder). Om du har tillgång till en scanner kan du scanna in din bild och spara den i JPG format och kopiera den till samma plats där du har html texten, till exempel C:\. Du kan också rita bilder i till exempel Corel PhotoPaint. Windows egna PaintBrush klarar inte av att spara bilderna i GIF eller JPG format.
Kom dock ihåg den gyllene regeln: "en bild säger mer än tusen ord, men tar tiotusen gånger längre tid att överföra". Gör inte bilderna onödigt stora och om du använder JPG så spara bilden med kraftig packning (till exempel "low quality" i PhotoShop). Ju kraftigare packning du använder för JPG desto mer kommer detaljerna att förvrängas. Det är ändå bättre med en aningen förvrängd bild som någon ser än en bild av hög kvalitet som ingen ids vänta på att få se. Tumregeln är att ett vanligt modem överför en kB per sekund så det tar över en och en halv minut innan en vanlig surfare kan se den fina bilden på 100 kB som du har på din hemsida. En vanlig bild av ett ansikte borde gå att få ned till under 10 kB utan större förluster i bildkvaliteten. Bildens storlek får du ju enkelt reda på med DIR kommandot i DOS eller genom att klicka på bilden i Windows FileManager / WindowsExplorer.

Färger

Färger i webb är en knepig sak. Färgerna anges med hjälp av de tre grundfärgerna rött, grönt och blått. På grund av vårt vattenfärgscentrerade skolsystem är de flesta i detta skede beredda att utbrista något om rött, gult och blått och då kan det vara på sin plats att ta och kika på TV-rutan eller monitorn med ett förstoringsglas. I webb sammanhang, och datorsammanhang överlag, anges färger som styrkan av rött, grönt och blått där 255 betyder maximal styrka och 0 total frånvaro av färgen. Total frånvaro av alla tre färgerna resulterar naturligtvis i svart och full styrka av de tre färgerna resulterar i motsatsen: vitt. Färgerna anges på detta vis i siffror enligt formatet RGB (Rött, Grönt och Blått). Rött är alltså 255, 0, 0 och grönt 0, 255, 0. Gult igen är inte en av grundfärgerna utan en blandning av rött och grönt, dvs 255, 255, 0. Mörkgult igen kan vara till exempel 130, 130, 0 och riktigt mörk orange 50, 30, 0. Tyvärr används vårt vanliga talsystem inte utan talen anges hexadecimalt, dvs i ett talsystem med talbasen 16 (0, 1, 2 ... 9, A, B, C, D, E, F). Följaktligen skrivs 255 som FF och till exempel 130 som 82. Miniräknaren som följer med Windows klarar av att överföra mellan de två talsystemen: skriv in det vanliga talet och aktivera sedan "Hex" istället för "Dec" för att konvertera. Talen skrivs dessutom ihop utan kommatecken så att grönt blir 00FF00. Hur du blandar färgerna ser du i figur 1.
Till exempel webbsidans bakgrundsfärg och textens färg kan du bestämma med <BODY> koden. I vår experimentsida stod <BODY> koden för sig själv men ändra den till <BODY TEXT="#FFFFFF" BGCOLOR="#FF0000" LINK="#000000"> så får du en webbsida med vit text, röd bakgrund och svarta länkar.

Speciellaverktyg

Det finns naturligtvis speciella program för att konstruera webbsidor men fram tills nyligen har de varit mycket dåliga. Det kanske bästa programmet är inbyggt i "guldversionen" av Netscapes webbläsare, dvs Netscape Navigator 3.0 Gold som kan laddas ner gratis från www.netscape.com. Genom att välja "Edit Document" i "File" menyn i Netscape överförs sidan du ser på till webb-konstruktionsprogrammet där du kan klicka på ikoner för att skapa länkar eller foga in bilder. Själv föredrar jag att skapa sidorna "manuellt" för jag tycker det ger mig större kontroll och är snabbare men det är naturligtvis en vanesak. För de som föredrar att skriva sidorna för hand är Microsofts InternetExplorer ett bra val för där överför "view source" sidan kvickt till Notepad-programmet där man direkt kan införa ändringarna eller tilläggen. Jag har även gjort omfattande kommersiella sidor på det här viset och det beskriver hur pass enkelt HTML egentligen är.
Oberoende av om vi skapar sidorna manuellt eller med något speciellt program så är det bra att känna till HTMLs grunder för då förstår vi begränsningarna och möjligheterna med webb och kan göra så bra sidor som möjligt.


exempel 1:

Det är <I>enkelt att göra <B>webb</B> sidor</I>. resulterar i :
Det är enkelt att göra webb sidor.


exempel 2:

<HEAD>
<TITLE>Gör en egen hemsida</TITLE>
</HEAD>

<BODY>
Massor med text
</BODY>




Carl-Magnus Dumell
Observera att den här texten är rätt gammal - det betyder dock inte automatiskt att den är föråldrad.

I många fall är texterna här relevanta och hjälpfulla också idag och de ger alltid en intressant tillbakablick över ämnet.

Carl-Magnus Dumell
Oktober 2011