Webbutveckling/Skapa en Hemsida

Denna bok är bara påbörjad och saknar fortfarande mycket. Det är öppet för vem som helst att bidra till denna bok, liksom alla andra böcker. Om du märker att något saknas eller är felaktigt, tveka inte att lägga till eller redigera. Du kan träna lite i sandlådan innan du gör mer avancerade ändringar.

Inledning

Denna bok är skapad i syftet att gå igenom proceduren att skapa en egen hemsida.

Hemsida?

Vad är en hemsida?

Med hemsida menas vanligen ett HTML-dokument på WWW. Ibland betecknar ordet dock enbart den första webbsidan av flera inom en och samma webbplats, men ofta används ordet för en hel webbplats. I denna manual menas med hemsida ett HTML-dokument på WWW där man presenterar sig själv eller visar lite info om något.

Hur skapar man en hemsida?

Det finns främst tre sätt att skapa en hemsida.

1. Ena sättet är att skapa ett HTML-dokument genom att skriva ett själv i en textredigerare (den enkla textredigeraren Anteckningar följer med Windows). Nackdelen med denna metod är att man måste lära sig något om HTML först. Enkla webbsidor är ändå rätt enkla att skriva så.
2. Eller så använder man ett verktyg som omvandlar den text man skriver in till HTML-dokument. Det finns en mängd olika sådana verktyg, dels inbyggda i ordbehandlare och webbläsare, dels som självständiga datorprogram. En nackdelen med denna metod är att de flesta verktygen infogar en massa skräpdata som gör HTML-filen oläslig, onödigt stor och mindre flexibel. För mer avancerade användare tillkommer svårigheten att få webbsidan att bli exakt som man vill.
3. Det finns också ett antal innehållshanteringssystem som innebär att man skapar webbsidor genom att fylla i webbformulär. Så fungerar till exempel Wikibooks och Wikipedia. Dessa system behandlas inte här.

Var skall hemsidan sparas?

De flesta Internet-operatörer erbjuder plats för hemsidor, ofta gratis eller som en del av ett abonnemang. Det finns också oberoende webbhotell. Om man vill ha webbsidan under ett speciellt namn kan man (låta) registrera ett domännamn där sidan hittas. Då kan man byta webbhotell utan att byta sidans adress, om man sett till att få domänen i sitt eget namn. För en privat hemsida duger dock oftast en webbplats man får tillgång via bredbandsabonnemang, skola, arbetsgivare eller det projekt man vill presentera på sidan.

Man skriver ihop sidan på sin egen dator och laddar upp den till webbservern med hjälp av programmet ftp (oftast) eller scp, sftp eller liknande (mycket bättre). På vissa servrar har man möjlighet att göra ändringar i webbsidan direkt, men det vanliga är att man alltid laddar upp en ny version över den gamla.

I princip kan man publicera sin hemsida på sin egen dator. Man måste då ha serverprogramvara, eventuell brandvägg måste tillåta förbindelserna och sidan är åtkomlig bara då datorn är påslagen. Dessutom måste man se till att täppa till de säkerhetshål som ofta upptäcks i all programvara. En egen server åtkomlig endast från egna datorer är bra för testning av mer avancerade funktioner, men för enkla hemsidor behövs den inte.

Vad vill du berätta?

Den fråga det lönar sig att koncentrera sig på då man skapar hemsidan är sidans syfte: Varför vill du ha en hemsida? Vem skall besöka den? Vilken information skall där finnas? Och det som också stora institutioner ofta missar: hur du ser till att informationen hålls uppdaterad.

Om du vill berätta vem du är och hur du nås så räcker det att skriva informationen i vilket program som helst, spara den som ”ren text” och ladda upp den till webbservern under ett namn som slutar på ”.txt”. Voilà!

Nu var det antagligen inte det du ville. Du vill ha med en bild, en stilig rubrik, text som ligger vackert på en vacker bakgrund (dessutom sägs det ju att man inte skall avslöja sin adress på webben). Nästa steg är att göra en webbsida med obegriplig HTML-kod (komponerad med hjälp av något program), rader som inte ryms på en äldre skärm och text som är oläslig för den som valt en annan bakgrundsfärg på sin dator.

Tillbaka till ruta ett. Webbläsare är planerade att presentera webbsidor vackert och funktionellt, anpassade till läsarens omgivning och behov. Det enda du behöver göra är att förklara vad som är rubrik, när du vill inleda ett nytt stycke, till vilket stycke bilden hänför sig och var den kan hämtas, vilka andra webbadresser du till länka till och så vidare. Erfarna webbutvecklare kan komponera snygga webbsidor som fungerar i de flesta miljöer, men nybörjaren (och många proffs) gör det lätt svårare för användaren än om webbläsaren fått sköta jobbet.

Det är inte heller någon idé att ifråga om webbsidans utseende försöka konkurrera med professionella grafiker. Din sida är värdefull genom det du har att berätta. Koncentrera dig på det. För det räcker enkla HTML-koder.

Olika typers hemsidor

Om du inte skapar din hemsida som ett övningsprojekt för att så småningom bli expert på webbutveckling har du antagligen någon enkel orsak att ha en hemsida. Här beskriver vi några sådana.

Personalsida

Din förman säger att alla i personalen skall ha en hemsida. Eller kanske är det eleverna som tycker att lärarna borde ha det. Eller kanske tycker du själv att det är ett sätt att följa tiden. Kanske har ni fått direktiv om hur hemsidan skall se ut. Om inte bör ni tillsammans fundera ut vad hemsidan skall finnas till för, kanske bland annat:

• Namn och befattning
• Bild
• Ansvarsområden
• Mottagningstider
• Telefonnummer
• Postadress
• E-postadress
• Rum
• Länkar till arbetsrelaterade dokument
• Hobbyer, familj och annan informell information

Är denna information sådan att den får läsas av vem som helst världen över? Också av skräppostfabrikörer, våldsverkare och inbrottstjuvar? Det är bra om ni inte behöver gömma något, men bered er på att filtrera e-posten, sätt inte ut telefonnummer ni inte vill ha tjänstesamtal till och berätta inte när ni tänker ha semester. Fundera igenom problematiken innan ni publicerar informationen. Eventuellt är det bättre att sidorna endast syns internt, medan den externa informationen publiceras på en skild sida av byråsekreteraren.

Sidan går lätt att konstruera med enkel HTML-kod, vid behov utgående från en färdig modell. Om ni vill kontrollera färgskalan, fonter och liknande skall ni konsultera någon webbutvecklare som är insatt i användbarhet och hinderlöshet.

Ännu mer än för de flesta andra sidor är det viktigt att sidan hålls uppdaterad. Systematiskt. Det måste finnas någon procedur som säkrar att det finns en länk till eventuell vikarie, att ändringar i kontaktuppgifter hittar till sidan (och eventuella kopior, om ni t.ex. har en skild extern sida) o.s.v. Se till att sidan kontrolleras med jämna mellanrum, till exempel inför terminens början.

Kompissida

Här betonar vi det informella. I ännu högre grad än ovan gäller det att fundera på vad man vill berätta åt hela världen och vad som kanske inte borde punliceras. Förutom problemen ovan måste man tänka något på vad en arbetsgivare tycker om materialet när han stöter på det i ett arkiv tio år senare.

För eventuella fotogallerier finns det ett antal specialiserade datorprogram. Det finns också webbplatser för personliga hemsidor med fotogalleri. Överväg om du själv vill ha full kontroll över galleriet. Vissa webbplatsers användarvillkor är hårresande (man kan ju alltid satsa på att skräckscenarierna inte förverkligas).

Hobbysida

Här berättar vi om något vi själva är intresserade av och insatta i. Det viktiga är sannolikt själva texten, eventuellt ett antal bilder av hög kvalitet. Undvik specialeffekter, som sannolikt gör sidans innehåll mer svårtillgängligt. Länka gärna till relaterade webbplatser men se i så fall till att välja bland de bästa, inte till alla du stöter på, och se till att hålla länklistan uppdaterad.

Överväg att skapa en beständig webbadress. Din webbplats kan växa med tiden och bli en viktig resurs, som inte borde försvinna för att du blir missnöjd med den du är kund hos. I Finland finns iki.fi (”evig.fi”), genom en förening för personer som vill ha ”eviga” epost- och webbadresser.

Att skapa sidan

Vi hoppas att du vet vad du vill med din sida. Du har lärt dig den grundläggande HTML-syntaxen (vilket är nyttigt också för den som använder HTML-redigerare). Du har en webbplats där du får ladda upp sidan. Du har en plan för att hålla sidan systematiskt uppdaterad. Dags att gå igenom alltsammans mer detaljerat.

HTML

HTML-koden beskrivs noggrannare i wikiboken Koda HTML. Här gör vi en enkel exempelsida. Vi har en del inledande HTML-taggar, som beskriver vilken standard och vilken teckenuppsättning vi använder (det senare bör anges av webbservern, men att ange den här skadar inte) samt namnet på hemsidan (”Pelle Svensson”). Utom namnet kan det mesta kopieras direkt. Som teckenuppsättning bör man använda Latin1, också kallad ISO 8859-1, eller utf-8 (unicode, med vilken man kan använda bokstäver från alla språk).

Själva sidan börjar med <body> och det första elementet är vanligen <h1> som anger att det som följer är sidans rubrik. Rubriken kan se alltför stor ut, men det är inget att bry sig om i det här skedet. Om man fortfarande vill ha en mindre rubrik då sidan vuxit till sig kan man sköta det med CSS. Sedan följer några stycken text (<p>). Det första stycket kombineras med en bild (<img ...) och en underrubrik före en lista (<ul>) med relaterade länkar (<li>, <a href=...).

Exempel

Kod:

...

Utskrift:

...

{{{4}}}

Med dessa koder kan man skriva enkla texter med bilder och länkar. För att kunna länka inom sidan måste man lägga in ankaren med <a name="namn">några nyckelord</a>. För att göra tabeller och andra mer avancerade strukturer hänvisas till HTML-guiden.

CSS

CSS är det sätt på vilket man kan påverka hur olika element skall se ut. Ifråga om enkla hemsidor skall man undvika alltför mycket sådan kod och konstruktionerna beskrivs inte här, annat än för vissa situationer som ofta dyker upp.

Bilder

Bilder kan lätt länkas in i en HTML-sida med taggen <img ... >. Själva bildfilen måste också laddas upp, ofta antingen i samma katalog som den där HTML-filen finns eller i en skild bildkatalog. Man kan länka till bilder på andra webbplatser, men en del webbläsare kan tolka en sådan extern bild som en reklamlänk. Att utan tillstånd länka till en bild så att den syns som en del av ens egna sida uppfattas av många som upphovsrättsbrott.

Ofta skapar man en mindre bild som länkas direkt. Bildelementet kan göras till en länk till en bild i full eller större storlek. Bildhanteringsprogram har i allmänhet funktioner för att minska bildens mått och öka kompressionen. Experimentera så att du får en bild som fungerar bra på skärmen. I allmänhet bör man omvandla bilden i så få steg som möjligt och utan att använda versioner sparade som halvfärdiga, för att inte i onödan förlora bildkvalitet (detta gäller alltså den slutgiltiga versionen, experimentera fritt).

De bildformat som har bäst stöd är jpeg för fotografier och liknande bilder och gif och png för diagram och andra bilder med få färgnyanser.

Program för HTML-redigering

Enkla textredigerare

Dessa textredigerare är enkla att använda. De gör ungefär vad du väntar dig, men inte särskilt mycket annat. De är lämpliga om du vill skriva HTML utan att använda tid på att lära dig ett nytt verktyg.

• Anteckningar (Notepad), följer med Windows
• Pico, Nano, finns ofta i GNU/Linux-system
• ...

Avancerade textredigerare

Avancerade textredigerare har ofta funktioner som hjälper en att arbeta effektivt. De har avancerade sök och ersätt-funktioner, makron, syntaxfärgläggning och annat stöd för ett antal filformat och kan ofta integreras med andra verktyg. Räkna med att använda en del tid på att bli bekant med programmet. Många proffs använder dessa som sitt primära verktyg.

• Emacs, standardredigerare i GNU-systemet, finns för de flesta datortyper
• vi, standardredigerare i Unix, finns för de flesta datortyper
• ...

Ordbehandlare

Ordbehandlare tillåter ofta att dokumentet sparas som en HTML-sida eller som ett webbarkiv (som också innehåller bilderna). Problemet är främst de detaljerade formatteringsanvisningarna, som inte lämpar sig för nätet. Det finns program för att städa koden.

Ordbehandlare lämpar sig inte för egentlig webbutveckling, men om du är ovan med andra verktyg eller hur som helst skriver texten med något av dessa så är det bättre att använda dem än att dokumentet blir opublicerat. Tänk efter i vilket format du vill spara dokumentet:

• Ren text (text/plain, *.txt): antingen med ett stycke per rad eller med forcerade radbrytningar, kan användas som sådant eller ändras till HTML genom att lägga in de behövliga koderna, för hand eller med hjälp av något program. Radbyten påverkar i allmänhet inte tolkning av HTML-kod.
• PDF (portable document format, *.pdf): stöds av de flesta webbläsare och ger goda utskrifter, men är otympligt på skärmen och kan i allmänhet inte redigeras i efterhand.
• HTML (hypertext, *.htm, *.html): i princip vad vi talar om här, men koden ordbehandlarna producerar är ofta mycket otymplig. Kan hanteras av webbläsare, men till exempel färgerna kan ställa till problem. För att få koden begriplig behövs i allmänhet något skilt städprogram.
• Ordbehandlaren egna format (*.doc, *.odt, *.rtf, ...): med dessa format kan man ofta arbeta vidare på dokumentet där man slutade utan förlorad information. Räkna inte med att andra har möjlighet att öppna dessa filer (ofta behövs samma eller nyare version av samma ordbehandlare). Det är också möjligt att filen innehåller gömd information du inte hade tänkt dig att publicera. Om du publicerar dokument i dessa format bör du publicera dem också i något av de ovannämnda andra formaten.

Några ordbehandlare:

• Microsoft Word, finns på de flesta Windows-maskiner för proffsbruk
• Openoffice Writer, fritt alternativ, finns åtminstone för Unix, Linux och Windows
• LyX, en fri ordbehandlare som bygger på LaTeX; det finns många hjälpprogram för att åstadkomma olika filformat
• ...

Kom ihåg att använda de logiska beteckningarna för rubriker och annan struktur. Glöm fonter, extra blankrader och liknande.

Att städa ordbehandlarnas HTML-kod

HTML-redigerare

...specialiserade HTML-redigerare

• Mozilla
• Dreamweaver
• ...

Program för omvandling till HTML

I synnerhet i GNU/Linux-omgivning finns ett otal program för att omvandla dokument från ett format till ett annat. Många av programmen är också tillgängliga för Windows.

...

En relaterad grupp datorprogram är de som städar i eller på andra sätt manipulerar färdig HTML-kod ...

Domännamn och webbadresser

Uppladdning, rättigheter och säkerhetskopior

Vad sedan?

Underhåll av sidan

Vidare studier