Gör din egen hemsida (Utskriftsversion) Detta är en utskriftsversion av kursen "Gör din egen hemsida". Online-versionen hittar du på "http://www.ronningborg.com/webbkurs/". Viktiga delar i online-versionen, t ex länkar till exempelsidor och övriga resurser har av naturliga anledningar tagits bort i denna version. Inledning | webbsidor | Alternativ | Mål Inledning Det är svårt att göra hemsidor. Men svårigheten ligger inte, som många tror, i det rent tekniska arbetet att skapa en webbsida med text, bilder och länkar som du sedan för över till en server för allmän beskådan. Nej, den biten är lätt, vilket den här kursen kommer visa. Däremot är det svårt att skapa en funktionell plats på internet som är lätt att använda och förstå. En plats som inte förvirrar besökarna med ologisk struktur och/eller störande grafiska element. Listan med vanliga fel och misstag kan göras lång och det är viktigt att man på ett tidigt stadium lär sig undvika fällorna och bli medveten om begränsningarna så att man fullt ut kan börja applicera den egna kreativiteten på webmediets möjligheter. webbsidor Det finurliga med webbsidor till skillnad från vanliga Desk Top Publishing sidor är möjligheten att skapa länkar (klickbara ord eller bilder) som kopplar ihop en webbsida med en annan. Denna extra dimension (hypertext) skapar otroliga möjligheter att presentera information. Men vad är egentligen en webbsida? En webbsida är i grund och botten inget annat än ett vanligt textdokument som sedan läses och tolkas av en webläsare (t ex Netscape och Internet Explorer). Det är därför även fullt möjligt att använda ett vanligt ordbehandlingsprogram (t ex MS Word) för att skapa dina webbsidor. När du gör dina webbsidor i en ordbehandlare eller i något annat textredigeringsverktyg måste du dock manuellt skriva in vissa ord (märken, tags) som talar om för webläsaren att en text skall vara kursiv, att ett ord skall vara en länk till en annan sida eller att du vill visa en bild på din katt o.s.v. Dessa beskrivningsord kallas med ett samlingsnamn för HTML (HyperText Markup Language). Alternativ Om jag inte kan HTML då, kanske du frågar dig. HTML är inte särskilt svårt att lära sig. Allt som egentligen krävs är lite investerad tid tillsammans med en gnutta koncentration och vilja. Precis som alltid när man skall lära sig något nytt alltså. Det finns dock alternativ för den som inte vill eller inte har tid att lära sig HTML. På senare år har det kommit fram en hel del program på marknaden som låter dig skapa hemsidor utan att du behöver kunna ett enda HTML-märke. De fungerar i princip som ett ordbehandlingsprogram där du kan skriva in text direkt i dokumentet. Sedan kan du med hjälp av diverse menyer och knappar formatera texten (fet, kursiv osv) eller lägga in bilder och skapa länkar. Programmet skriver all HTML-kod åt dig i bakgrunden. Låter enkelt, eller hur? Denna typ av program kallas för WYSIWYG-verktyg (What You See Is What You Get), d.v.s. det du ser framför dig på skärmen när du gör sidan är också det resultat du kommer få när sidan visas i en webläsare (på ett ungefär i alla fall). I den här kursen kommer vi använda oss av ett sådant WYSIWYG-verktyg för att skapa våra egna hemsidor. Främsta anledningen till valet av denna metod är att vi då på snabbaste och enklaste sätt får känna på hur det är att göra en första hemsida som vi senare kan utveckla vidare. Jag vill verkligen uppmuntra alla till att på egen hand försöka lära sig lite HTML. Det är nämligen bra att känna till vilka begränsningar HTML sätter för ditt skapande eller vilka möjligheter du erbjuds för att tillmötesgå ditt kreativa sinne. I slutet av denna kurs kommer du få tips om bra HTML-kurser som hjälper dig att komma igång. Mål Målet med denna kurs är inte att du skall bli en dedikerad webbdesigner med kunskaper att skapa komplexa webplatser och WWW-strukturer. Snarare är det så att kursen skall ge dig grundläggande kunskaper om "god" design och struktur på WWW. Dessa kunskaper kommer vi sedan tillämpa praktiskt genom att du skall få lära dig hur man skapar och publicerar en enkel hemsida med text, bilder, bakgrundsfärg och länkar. Kursen skall även vara en sporre för dig att på egen hand gå vidare och inhämta mer djupgående information och kunskaper om produktion av hemsidor. Inledning | Struktur | Text | Grafik | Tabeller Inledning När man talar om layout och design på internet så är det viktigt att komma ihåg att WWW från början inte var avsett att användas på det sätt som det görs idag. Det språk (HTML) som ligger i botten av alla webbdokument skapades som ett verktyg att beskriva den logiska strukturen av ett dokument i termer av t ex rubriker och stycken. En standard för att göra det lättare att hitta och organisera information. Att jobba med grafisk design och layout på internet handlar därför till stor del om att töja, dra och lirka med ett ganska primitivt sidbeskrivningsspråk för att få det att tjäna syften det inte är tänkt att göra. Ett annat stort problem när det gäller att skapa grafiskt tilltalande sidor på internet är att det inte finns någon enhetlig standard för hur webläsare skall tolka detta sibeskrivningsspråk. Idag använder programtillverkarna sina egna standarder vilket leder till att en webbsida som ser bra ut i en läsare kan se väldigt "annorlunda" ut i en läsare av ett annat märke. Ofta är skillnaderna små, men det kan tyvärr slå ganska olyckligt. De framtida besökarna på din hemsida kommer inte bara passivt läsa den information som finns tillgänglig där, de kommer interagera med den på ett sätt som inte har någon direkt motsvarighet i de traditionella medierna. Din uppgift blir att presentera materialet på ett estetiskt tilltalande sätt, men också att se till att den del av cyberrymden som din hemsida utgör upplevs som välstrukturerad och lätt att hitta i. Besökarna skall snabbt kunna bilda sig en uppfattning om innehållet och hur man navigerar för att hitta det man söker. Ett ord att ha med sig på vägen är att det enkla och funktionella ofta är vackert medan det tillkrånglade och komplexa upplevs som oestetiskt. Struktur Hemsidan: En webplats kan bestå av många webbsidor (hur många som helst faktiskt, det finns ingen övre gräns), men bara en hemsida. Hemsidan är den webbsida man utgår ifrån när man skall utforska en webplats, den sida man kommer till först. Detta är den viktigaste sidan på en webplats eftersom den skall förmedla så mycket. Den skall vara designmässigt tilltalande så att besökarna blir intresserade och stannar på din sida. Den skall förmedla den image som du vill att besökarna skall få av din webplats när de först ser den. Men det kanska viktigaste av allt är att en besökare redan här skall få en uppfattning om vad man kan hitta på din webplats och hur man hittar det, dvs hur skall man gå härifrån för att komma dit. Allt detta skall alltså hemsidan förmedla och den skall göra det på enbart en skärmbild, dvs en besökare skall inte behöva skrolla ner för att ta del av all information på hemsidan. Första intrycket är viktigt och avgör ofta om besökaren kommer ge sidan en chans eller genast gå vidare till nästa hållplats i cyberrymden. Det som inte är synligt på den första skärmbilden finns inte - mindre än 10% av de oerfarna användarna skrollar ner från toppen av sidan. Om någon viktig information inte får plats på denna yta kan du istället göra en synlig länk och presentera informationen på en undersida. Eftersom länken kan ses av besökaren på första skärmbilden kommer han/hon vara medveten om att informationen finns och var den finns att hämta. Du skall alltid göra det enkelt för dina besökare att ta sig tillbaka till hemsidan, att komma hem till tryggheten när de känner sig lite vilsna och inte riktigt vet var de befinner sig i webplatsens struktur. Detta gör du genom att på varje underliggande sida ha en länk som går till hemsidan. Undersidor: Om du nu med din hemsida lyckats skapa ett intresse hos besökaren kommer denne alldeles säkert klicka sig in till undersidorna på din webplats. Här får du inte göra besökaren besviken, om du på hemsidan lovat ett visst innehåll så skall det också finnas tillgänligt. Länka aldrig till en webbsida som är "under konstruktion", det skapar enbart frustration hos besökaren som känner att han/hon låtit sig luras att slösa på sin dyrbara surftid. Erbjud dina besökare en meny på undersidorn, dvs länkar till övriga sidor på din webplats (åtminstone de viktigaste). Alternativet är att enbart lägga in en länk till hemsidan eller någon annan indexsida som besökaren sedan kan fortsätta ifrån. Denna metod är dock inte att föredra eftersom målet skall vara att minimera antalet steg (nivåer) från en sida till en annan. Menyn kan vara iform av grafiska knappar eller textlänkar, den kan ligga i sidfoten, som sidhuvud eller någon annanstans, men den bör vara med. Undersidor helt utan länkar till sidor inom den egna webplatsen får inte förekomma. Alla webbsidor på din webplats måste innehålla åtminstone en länk, om en sida bara innehåller en länk skall denna gå till hemsidan. Det handlar om att försöka behålla besökarna inom den egna webplatsen, finns inga länkar som leder inåt har besökaren ofta inget annat val än att fortsätta utåt. Skapa igenkänning på dina undersidor. Om du på hemsidan försökt förmedla en viss "stil" skall denna genomsyra hela webplatsen. Var konsekvent med färger och typsnitt. Använder du dig av knappar för navigering skall dessa se likadana ut överallt. Repetition är inte tråkigt, det ger din webplats en konsekvent grafisk identitet som förstärker känslan av att veta var man befinner sig och det gör det även lättare att komma ihåg just din webplats vilket leder till att besökarna återvänder. Text Rader och stycken: Att skriva in text på en webbsida är egentligen mycket enkelt. Ändå lyckas många skapa de mest svårlästa texter. Kom ihåg att alltid se dina egna webbsidor med besökarnas ögon och ställa dig själv frågor som; är texten lätt att läsa, lätt att förstå och lätt att navigera i? Misstagen är ofta enkla och lätta att rätta till. Ett vanligt misstag är att göra för omfattande länkmarkeringar. Om du gör en hel mening till en textlänk blir texten svår att läsa samtidigt som det kan vara svårt att veta vart länken leder. Välj istället ut ett eller ett par ord ur meningen som bäst representerar innehållet på den länkade sidan. Ett annat vanligt misstag är att man gör textraderna för långa. Om en textrad är längre än ögonens spännvidd på normalt läsavstånd tvingas läsaren vrida lite på huvudet för att läsa hela raden. Detta ökar risken för att läsaren tappar bort sig i texten och t ex börja läsa på fel rad. Dessa regler gäller även för text på tryckta medier (som t ex tidningar) och borde inte vara så svåra att undvika. Som tumregel kan man säga att en radlängd på 40-60 tecken ger en mer lättläslig text. Ett liknande misstag är att man inte delar upp text i stycken utan istället presenter alltför stora och omfattande textblock. En lång textramsa utan rubriker och radbrytningar är väldigt svår att läsa. Problemet t o m förvärras på webben eftersom de flesta uppfattar det som svårare att läsa text på en bildskärm än på papper. Formateringar: I skapandet av webbsidor på internet erbjuds möjligheter att formatera text på ungefär samma sätt som i ett ordbehandlingsprogram. Dessa möjligheter skall dock användas sparsamt och enbart när sådan formatering fyller något slags syfte. Vissa funktioner bör du t o m undvika helt och hållet - använd t ex aldrig understruken text även om den möjligheten finns, surfare utvecklar nämligen snabbt en instinkt som säger att om något är understruket sä är det en länk. Kom ihåg att surfare är ett lättfrustrerat folk. Undvik att förstora text alltför mycket, detta är annars ett av de absolut vanligaste nybörjar-misstagen. Vill du markera något i en text (t ex en rubrik) går det lika bra att använda funktionerna för fet eller kursiv text. Väldigt stor text kan lätt ge ett groteskt intryck och fyller ingen som helst funktion. På senare tid har webben börjat erbjuda möjligheten att ändra typsnitt på text. Problem uppstår dock eftersom dessa formateringar bygger på att din besökare har det valda typsnittet installerat på sin egen dator, har han/hon inte detta visas istället ett "default"-typsnitt. Times, Arial och Helvetica är några typsnitt som är vanligt förekommande och som stöds av de flesta datorer och plattformar. Grafik En stor del av arbetet med att bygga en webbsida går ut på att kompromissa mellan en tilltalande grafisk design som fångar besökarna och långa nerladdnigstider som frustrerar besökare och håller dem borta. webbsidor som innehåller stora bilder tar lång tid att ladda in i webläsaren och tvingar besökarna att använda sin dyrbara surftid till att sitta och vänta. Detta är inte särskilt populärt och faktum är att de flesta ger upp ganska snabbt (ca 15 sekunder) när de konfronteras med en "tung" sida. De klickar på back-knappen och går någon annanstans istället. Bildformaten GIF och JPEG används idag flitigt på internet eftersom dessa format innehåller algoritmer som komprimerar bilder mycket effektivt. Men en väldig stor bild kommer fortfarande vara alldeles för stor även om den är sparad i något av dessa format. Så var försiktig med bilder på dina sidor. En bild bör inte vara större än 20 kb om du vill behålla dina besökares intresse. Var försiktig vid den grafiska utsmyckningen av dina webbsidor. Använd inte animerade bilder om det inte är särskilt motiverat. Undvik grälla bakgrundsfärger eller grafiska bakgrundsbilder. Horisontella linjer och ikoner bör användas sparsamt. Det finns gott om skräckexempel på hur det kan se ut om man använder dessa element utan ett moget och förnuftigt övervägande om vad det egentligen gör för en webbsida. Det är lätt att bli hänförd inför nyinskaffade kunskaper om hur man lägger in en bakgrundsbild på en webbsida, eller hur enkelt det är att få webbsidan att sjuda av liv och rörelse med 50 animerade bilder. Kom dock ihåg att ingen kommer bli imponerad, alla vet hur enkelt det är att få fram sådana effekter. Vill du imponera på dina besökare skall du göra det med en smakfullt elegant färgsammansättning eller en genomtänkt grafisk komposition. Det syns direkt om en webbsida är skapad av en nybörjare/amatör eller en skicklig grafiker, du kommer inte kunna lura någon genom grafiska effekter. Tabeller Som nämndes tidigare är det sidbeskrivningsspråk som ligger till grund för alla webbsidor inte framställt med tanke på att det skall användas för grafisk layout och design. Det är t ex svårt att placera text och bild var man vill på en webbsida. Tekniken går idag framåt inom detta område, men fortfarande är användandet av tabeller den säkraste och bästa metoden. Detta element var från början skapat för att kunna presentera skriftlig information i rader och kolumner vilket är så populärt i den akademiska världen. Vi kommer däremot använda tabeller till något de inte är tänkta att användas till, nämligen för att få kontroll över placeringen av grafiska element och texter på webbsidan. Inledning | Nu börjar vi | Skriv text | Infoga tabell | Bakgrundsfärg | Infoga bild | Länkar | Till sist Inledning Ja, då sätter vi väl igång med att producera vår första hemsida. För detta ändamål ska vi använda oss av ett WYSIWYG - verktyg som heter "FrontPage Express". Detta är en gratis-version av Microsofts kommersiella "Front Page" och finns med i "MS Internet Explorer 4"-paketet (även senare versioner). Om du ännu inte har Internet Explorer kan du ladda ner den gratis från www.microsoft.com/downloads/. När du installerar programmet skall du vara noga med att du väljer alternativet "fullständig installation", annars kommer inte "FrontPage Express installeras" De olika WYSIWYG-verktygen som finns idag fungerar på ungefär samma sätt och mycket känner man igen från ett program till ett annat. Vill du hellre välja ett annat program att jobba med, t ex "Dreamweaver" (www.macromedia.com/software/dreamweaver/), så går detta naturligtvis bra. Jag kommer däremot enbart gå igenom "FrontPage Express" funktioner och använder du ett annat program kan det kanske ibland vara svårt att hänga med. Nu börjar vi Det första vi gör är att skapa kataloger (mappar) på hårddisken där vi kan lägga våra webbsidor och bilder under tiden vi jobbar med hemsidan. Det är viktigt att vi från början har klart för oss hur vi vill organisera de olika filerna. Skulle vi senare vilja flytta om dessa måste vi även gå in på webbsidorna och ändra sökvägen, vilket är onödigt omständigt. Skapa en ny katalog någonstans på din hårddisk och döp den till "hemsida". I denna katalog skapar du en ny katalog och döper denna till "bilder". För vår relativt enkla hemsida kommer strukturen inte vara mer komplicerad än så. Öppna programmet "FrontPage Express" och välj "ny" i "arkiv-menyn". I den rutan som dyker upp på skärmen väljer du "normal sida" och trycker "ok". Nu har vi framför oss en tom webbsida som bara väntar på att få fyllas med underbar information och grafik. Men innan vi gör något mer sparar vi sidan. Välj "spara som" i "arkiv-menyn". Klicka på knappen "som fil" i rutan som dyker upp. Leta upp katalogen "hemsida" på hårddisken och dubbelklicka på denna. Döp den nya filen till "index.html", klicka "spara". Skriv text Nu kan vi börja skriva in text på den tomma sidan. Detta fungerar precis som i ett ordbehandlingsprogram och borde således inte innebära några svårigheter. Prova att skriva en rubrik på din hemsida och använd de olika knapparna för textformatering så att texten blir som du vill ha den. Spara sidan genom att välja "spara" i "arkiv-menyn" och öppna sedan filen med en webläsare för att kontrollera resultatet. I Internet Explorer öppnar du en fil på hårddisken genom att välja "öppna" i "arkiv-menyn". Klicka "bläddra" och leta sedan upp din hemsida på hårddisken. Klicka "öppna" och "ok". Andra webläsare fungerar på ungefär samma sätt. Skriv nu in en inledningstext under rubriken. Om du vill gör en enkel radbrytning så håll ner "skift"-tangenten samtidigt som du trycker på "enter". Trycker du enbart ner "enter"-knappen kommer du få ett mycket större mellanrum än önskvärt. Infoga tabell Tabeller är ett nödvändigt hjälpmedel när man jobbar med layout på internet. Tabellen utgör en ram och vi använder tabellens celler och rader för att placera text och grafik med någorlunda kontroll. Gör ett par radbrytningar efter inledningstexten och gå sedan upp i "Tabell-menyn" och välj "infoga tabell". Fyll i dialogrutan som nedan och tryck "ok". Detta ger mig en centrerad tabell som innehåller 2 rader och 2 kolumner och som upptar 80% av bildskärmens bredd. Jag kommer inte få någon ram på tabellen men däremot kommer det bli ett utrymme på 2 pixlar mellan tabellens celler och jag har även gjort cellerna lite "luftigare" genom att ge cellen 1 pixels marginal från alla sidor. Markera inledningstexten och dra in den i cellen på första raden i första kolumnen. Anledningen till att vi har gjort 2 kolumner är att vi senare skall kunna lägga in en bild till höger om texten. Lägg nu tabellen under rubriken genom att radera radbrytningarna och spara sidan. Du kan nu lägga in mer text i cellen eller ändra utseendet på tabellen, celler och kolumner. Prova detta genom att högerklicka på en cell och sedan välja något av de alternativen som kommer upp. Jag väljer att låta min sida vara som den är så länge, för jag är så ivrig att komma vidare till nästa steg. Det går alltid att justera layouten senare. Bakgrundsfärg Om du surfat runt en del på internet så har du säkert noterat att väldigt många webbsidor har svart text på vit bakgrund. Varför? En anledning bland många är att färger är ett väldigt svårt kapitel. Det är svårt att kombinera färger på ett smakfullt sätt om man inte vet vad man håller på med. En annan anledning är att det ofta blir stilfullt med en vit bakgrund och att det då går att göra mycket mer med övrig grafik på sidan. Vi skall detta till trots lägga in en bakgrundsfärg på vår första hemsida, men kom ihåg att vara försiktiga med vilka färger ni väljer. Vi vill ju att våra besökare faktiskt skall kunna läsa texten på sidan. Gå upp i menyn "format" och välj "bakgrund". Öppna drop-down menyn "bakgrund", och välj en färg. Om ingen av dessa färger skulle falla dig i smaken kan du välja "anpassad" längst ner i menyn, då kommer det upp ett nytt fönster med fler färger samt en möjlighet att blanda ihop din egen favoritfärg. Infoga bild Då var det dags att blåsa liv i vår hemsida, vi skall lägga in en bild. Alla bilder du använder på din sida skall placeras i mappen "bilder" (du vet...den vi skapade tidigare). Placera markören på den plats du vill att bilden skall ligga. Jag vill lägga in bilden i cellen till höger om inledningstexten i min tabell. Gå upp i menyn "infoga" och välj "bild", eller använd "bild-knappen" i knappraden. Välj "bläddra" och leta dig fram till "bilder"-mappen där du väljer en bild. Sådärja, bilden dyker upp på din sida exakt där du vill ha den. Nu är det klart. Men jag är inte riktigt nöjd med layouten på min sida, därför tar jag nu och justerar tabellen en aning: Jag högerklickar någonstans i tabellen och väljer "tabellegenskaper", ändrar tabellens bredd till 65%. Sedan högerklickar jag i cellen med inledningstexten och väljer "cellegenskaper", ändrar "lodrät justering" till "överkant". Nästa steg är att ändra bildens placering i cellen till höger; högerklickar, väljer "cellegenskaper" igen och ändrar "vågrät justering" till "centrera" och "lodrät justering" till "överkant". Nu tror jag vi är redo att jobba lite på egen hand. Använd dina nyförvärvade kunskaper, snygga till hemsidan och gör den mer personlig. Jag tror att du har massor av idéer om hur du vill göra, så sätt igång, experimentera!. Det är så man lär sig. Gå gärna tillbaka i kursen om det är något du inte kommer ihåg. Länkar Möjligheten att skapa länkar är det som har gjort WWW så användbart som det är idag. Naturligtvis ska vi även lära oss hur man gör detta. Men först ska vi skapa några undersidor som vi sedan kan länka till från hemsidan. Har du glömt hur man gör kan du gå tillbaka till "Nu börjar vi" där vi går igenom förfarandet. Skapa så många sidor du behöver och spara dom i "hemsida"-katalogen. Jag skapade tre sidor; cv.html, intresse.html och lankar.html. Gå nu tillbaka till hemsidan och markera det eller de ord du vill göra till en länk. Gå upp till "infoga-menyn" och välj "hyperlänk", eller klicka på knappen för länk i knappraden. I det fönster som dyker upp skall du nu välja vilken typ av länk du vill skapa. Välj "file" om du vill länka till en annan av dina webbsida, "http" om du vill länka till en annan sida på www och "mailto" om du vill göra en länk för att skicka e-post. Jag vill skapa en länk till en undersida så därför skriver jag på följande sätt: Vill du istället länka en bild markerar du bilden (genom att klicka på den) och går sedan till väga på samma sätt som med en textlänk. Var bara noga med att värdet för bild-ram (border) är ställt till "0". Detta kontrollerar du genom att högerklicka på bilden och välja "bildegenskaper". Plocka sedan fram fliken "utseende" och kontrollera rutan för "ramtjocklek". Om ramen inte är 0 kommer du få en ful ram runt bilden om den är länkad...det vill vi inte ha. Prova nu att skapa övriga länkar själv. Använd även gärna några av de andra länktyperna, t ex: - E-post "mailto:ronningborg@swipnet.se" - WWW "http://www.nerikes.se" Till sist Känns det som om du börjar få kläm på det nu? Tappa inte modet om alla detaljer inte blir precis som du vill. Vi har nu gjort ett första upplägg av vår hemsida och det finns alltid möjlighet att gå tillbaka och göra justeringar. Allteftersom du jobbar med programmet kommer du hela tiden lära dig nya funktioner och nya knep för att få bättre kontroll över placering av grafik, text mm. Var inte rädd för att prova dig fram, det är så du lär dig. Det vi gått igenom i den här kursen är bara de enklaste grundläggande funktionerna för att du skall kunna göra en funktionell hemsida som innehåller de viktigaste elementen. Om du har surfat en del på internet redan så vet du att det finns så oändligt mycket mer man kan göra med webbsidor. Var inte orolig...du kommer också kunna göra allt det där som alla andra kan, men det kommer krävas en hel del av dig för att komma dit. Har du tålamod, envishet och en riktigt stark vilja kan du dock komma långt. Har du inte gjort klar din sida än så är det en bra idé att göra det nu. Du behöver inte ha den slutliga versionen helt klar, men det viktigaste är att det finns någon information på samtliga undersidor så att dina besökare inte möts av tomma sidor eller sidor som inte säger någonting. Inledning | Program | Uppgifter | Överföringen Inledning Nu när du är klar med din hemsida vill du naturligtvis visa upp den för hela världen, eller? Om du inte är intresserad av att andra skall se vad du har gjort kan du hoppa över detta kapitel och istället gå till kapitlet om hur du går vidare för att få mer kunskap. Jag tänkte väl det, klart att du är stolt över din nya hemsida och vill att andra skall få se den nu...direkt...så fort som möjligt. Förutsättningen för att detta ska fungera är att du har tillgång till utrymme på en webbserver där du kan placera dina sidor. Har du ett vanligt internetabonnemang så är det mycket troligt att din internetleverantör erbjuder sådant utrymme på sin server åt alla sina kunder. Då är bara att ta kontakt med dem och fråga efter de uppgifter du behöver för att lägga upp dina sidor. Har du inte tillgång till något serverutrymme hos leverantören så finns det olika tjänster på internet som kan erbjuder detta gratis, t ex torget (http://www.torget.se) och passagen (http://www.passagen.se). Det här kapitlet kommer grundligt gå igenom hur du går till väga för att föra över dina filer från din hårddisk till en webbserver någonstans i världen så att din hemsida blir tillgänglig för alla (som har din adress) att besöka. Men vi börjar med att kolla på vad du behöver för verktyg. Program Jag antar att du inte blir förvånad om jag säger att det finns många olika verktyg att välja mellan som alla är till för att på ett så enkelt eller smart sätt som möjligt föra över filer till en webbserver. Regeln när man väljer ett program är att det skall passa just dig och dina behov. Det ska kännas naturligt att arbeta med och erbjuda den mängd av logik som du eftersträvar hos ett program. Det är omöjligt för mig att lämna förslag på - och skriva en guide för - program som täcker alla olika behov och preferenser. Vad jag istället gör är att erbjuda en beskrivning över hur man använder det program som är det mest använda och omtyckta inom just detta område. Rimligtvis borde detta program också tillmötesgå de flestas behov. Det program jag syftar på är "WS FTP". Förkortningen "FTP" står för File Transfer Protocol och är det protokoll (språk) som används av datorer för att flytta filer mellan varandra. WS FTP är gratis att använda för hemmabruk eller för studerande (kanske därför det är så populärt när allt kommer omkring). Skall det användas inom ett företag får man betala en liten summa. Har du inte redan programmet kan du ladda ner det från www.ipswitch.com. Installera det sedan på din hårddisk så att vi kan gå vidare till nästa avdelning. Vill du ändå använda något annat program så går det naturligtvis bra, principen bakom FTP-verktygen är den samma. Uppgifter Innan vi startar programmet och börjar överföringen av dina filer bör du kontrollera att du har samtliga uppgifter om serverutrymmet där du skall placera filerna. Uppgifterna du behöver är: 1. Namn på servern 2. Användarnamn 3. Lösenord Dessa uppgifter bör du hålla hemliga. Kommer någon annan över dem kan han/hon gå in och ändra på dina webbsidor, skulle inte vara så kul...eller hur? Överföringen Starta programmet WS FTP (glöm inte att du måste vara uppkopplad mot internet om överföringen skall fungera). I fönstret som dyker upp på skärmen skall du fylla i de uppgifter som vi talade om i föregående avdelning - Host name (server namn), User ID (användarnamn) och Password (lösenord). I den första rutan "Profile Name" kan du skriva in vad du vill. Rutan "Host type" kan du ställa på "automatic detect" så sköter sig programmet med automatik. När du trycker "OK" kommer programmet logga in sig på den server där du vill placera dina filer. När detta är gjort har du en annan ruta framför dig: Den består av två fönster; det till vänster visar filerna på din hårddisk och fönstret till höger visar innehållet på webbservern. Leta nu reda på katalogen med din hemsida i det vänstra fönstret (c:\hemsida). Kontrollera att fönstret till höger visar katalogen på webbservern där du vill lägga dina filer. Markera de filer du vill flytta över genom att klicka på dem en gång, när filen är markerad trycker du på pilen som pekar åt höger. Nu förflyttas den valda filen genom cyberspace och lägger sig i det högra fönstret, d vs på webbservern. Du kan flytta över en hel katalog på en gång om du vill. När överflyttningen av filerna är klar kan vem som helst komma åt dina sidor via internet. Hör med din internetleverantör (den som administrerar webbservern) vilken adress din hemsida har, sedan är det bara att sprida den till alla du känner. Nu finns du på internet, alltså existerar du! Inledning | Tips Inledning Det är nu, i slutet av kursen, som jag ska tala om för dig att du har väldigt mycket kvar att lära. Du har en egen hemsida...det är bra, men du kommer säkert vilja utveckla denna. Du vill göra det där som du sett att andra kan och du har säkert massor av kreativa idéer som du vill förverkliga men inte vet hur. Den goda nyheten är att all kunskap du nånsin kan drömma om finns där ute på webben. Den dåliga nyheten är att det är en djungel. Jag har i nästa avdelning ställt samman några länkar till sidor på internet som jag tycker ger det mesta av vad man behöver...i dagsläget. Internet förändras snabbt som bekant och nya tekniker och språk dyker upp hela tiden. Vill man hänga med på det senaste finns det oftast inget annat att göra än att säga upp sig från jobbet, hoppa av skolan och kedja fast sig framför skärmen, det finns så mycket. Jag kan dock ge dig två tips om vad som gäller och vad du skall kunna för att bli framgångsrik i ditt hemsidessnickrande: Lär dig design, vad som funkar på webben och vad som inte funkar. Kan du tillräckligt på det området kommer det inte spela så stor roll vilket verktyg du använder. Dina webbsidor kommer att se bra ut ändå. Lär dig HTML för att få kontroll över det du gör. Även om det dyker upp en hel del nya språk och tekniker så är det ändå HTML som alltid ligger i botten. De nya språken är ofta bara tillägg som jobbar parallellt med HTML. Ett säkert tips är att HTML kommer hänga med ett bra tag till. Tips - webbdesign - Yale C/AIM Web Style Guide http://info.med.yale.edu/caim/manual/contents.html Webpages That Suck http://www.webpagesthatsuck.com webbdesign för designers http://www2.sbbs.se/hp/ason/webd/web.html - HTML - Skolverkets HTML-guide http://www.skolverket.se/skolnet/htmlkurs/ Annica Tigers HTML-skola http://www.atiger.pp.se The Bares Bones guide to HTML http://werbach.com/barebones Copyright ©1998 Christer Rönningborg, christer@ronningborg.com http://www.ronningborg.com/webbkurs/