ATT GÖRA WEBBSIDOR. Frivillig labb

Transkript

1 Numerisk analys och datalogi KTH Stockholm Kerstin Frenckner, tel , e-post 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR Frivillig labb Bakgrund Du har säkert hört att strukturen i en text är viktig för att hjälpa läsaren att förstå innehållet i den. En hypertext (eng. hypertext) består av noder (eng. node) och länkar (eng. link). Noderna innehåller text, bilder, filmer etc. Länkarna knyter ihop noderna så att läsaren kan gå från en nod till en annan. Ett problem med hypertext är att läsaren lätt går vilse bland alla noder. Strukturen i en hypertext är än viktigare än i en traditionell text. Läsaren ska kunna veta var han är, hur han kommer tillbaka och vart han kommer om han följer en länk. Han ska också kunna bilda sig en uppfattning om textens helhet. Hypertext har fått en renässans i och med webben (eng. web) och webbläsarna (eng. web browser), ty därigenom har man fått nya sätt att skapa och sprida hypertexter. En webbplats (eng. web site) är ett hypertextdokument och varje sida är en nod i hypertexten. Den sida som är tänkt att vara webbplatsens huvudsida, den sida läsaren helst ska komma till först, brukar kallas platsens hemsida (eng. home page). En webbplats kan sedan i sin tur länka till flera webbplatser. Således har KTH en webbplats och KTH har en hemsida. Därifrån kan man nå Nadas webbplats som också har en hemsida. Och därifrån kan man nå kursen Programkonstruktion som också är en webbplats och har en hemsida. Mål Målet med den här laborationen är att du ska öva dig att tillämpa riktlinjer för hur en webbplats ska se ut och prova olika verktyg för att skapa en webbplats. Efter laborationen ska du själv kunna bygga upp en enkel webbplats med olika verktyg.

2 2 Webblabb Vad laborationen går ut på Du ska själv skapa en webbplats innehållande text, länkar och bilder. Du jobbar lämpligen ihop med din labbkompis. Du ska ha byggt upp en webbplats som på ett snyggt och logiskt sätt berättar om något som du själv väljer. Börja med att formulera webbplatsens mål och målgrupp. Webbplatsen ska följa riktlinjerna i Riktlinjer för utformning av webbplatser på de punkter där de är tillämpliga bestå av minst fem webbsidor innehålla såväl text som bilder och länkar Prova alla tre metoderna: arbeta med HTML-koden, WYSIWYG-editor och konverteringsprogram. Har du tillgång till program för att göra PDF-sidor, så testa det också. Fundera över varför du strukturerat informationen så som du gjort. Redovisning Detta är en frivillig laboration och därför görs ingen examination. Vill du kan du skicka adressen till dina sidor till kfrenck@nada.kth.se, så får du förhoppningsvis tillbaka någon kommentar. Förberedelse Förbered dig genom att läsa igenom Riktlinjer för utformning av webbplatser och fundera över vilka punkter du tycker är viktiga i olika sammanhang. Fundera över hur du skulle vilja kort presentera det du själv valt. Läs också igenom Verktyg för att göra webbsidor. Arbetsgång Gör en skiss Börja med att planera din webbplats. Tänk på att webbplatsen ska vara anpassad till den tänkta läsaren och till dess syfte. Börja med att formulera webbplatsens syfte. Gör sedan en skiss på papper. Rita ut alla sidor som ska ingå i din webbplats. För varje sida antecknar du sidans syfte och skissar sidans ungefärliga utseende. Rita också ut alla länkar.

3 Webblabb 3 Skiss över den planerade webbplatsen Välj verktyg Innan du börjar skriva den HTML-kodade sidan bör du välja verktyg för att göra det. Gör sidorna När du valt verktyg skapar du sidorna och lägger upp dem på Unix-servern. Testa och dokumentera Provkör din webbplats och kontrollera att den ser ut som du tänkt dig och att alla länkar leder till avsedd sida. Gör sedan en skiss över webbplatsen så som den verkligen blev. Jämför med den skiss du gjorde tidigare. Skiss över den verkliga webbplatsen.

4 4 Webblabb Verktyg för HTML HTML HTML betyder Hypertext Markup Language. Det är ett språk som används för att ange strukturen hos dokument som läggs på webben. Med HTML kan man ange vilka stycken som ska vara rubriker, vilka som ska vara element i en lista etc. Man kan också ange egenskaper hos enskilda ord eller tecken, t.ex. att ett ord ska vara markerat. HTML-koden anger strukturen hos dokumentet. HTML-koden anger däremot inte utseendet. För att läsa ett HTML-kodat dokument behövs ett speciellt läsprogram, t.ex. Netscape eller Explorer. Sådana läsprogram brukar kallas webbläsare (eng. browser). Det är webbläsaren som bestämmer hur dokumentet ska presenteras på skärmen, d.v.s. hur text med en viss kod ska se ut. Användaren kan i viss utsträckning styra webbläsaren. Den som skriver HTML-koden kan i viss utsträckning tvinga fram ett önskat utseende på skärmen. Detta förefaller att bli allt vanligare (även om det nog inte var meningen när HTML skapades). HTML har stora likheter med SGML, Standard Generalized Markup Language, som är en internationell standard för att koda dokument. SGML används av många stora företag för att klara av den interna dokumenthanteringen. Formatmallar i ordbehandlare anger i första hand hur texten ska se ut, inte vilken funktion den har i dokumentstrukturen. Det är alltså en väsentlig skillnad mellan formatmallar och HTML-kod. PDF PDF betyder Portable Document Format. Det är ett format skapat av företaget Adobe för att kunna utbyta dokument och titta på dokument på olika plattformar. Man behöver ett speciellt program för att konvertera sina dokument till PDFformat Acrobat Distiller. Det är ett relativt dyrt program. För att kunna läsa PDF-dokument behöver man också ett speciellt program Acrobat Reader. Det programmet är gratis. Två steg för att göra en webbsida Det behövs två steg för att göra en webbsida. 1 Skapa ett webbdokument (HTML-kodat eller i PDF-format). 2 Lägg upp dokumentet på en webbserver. Nadas vanliga Unix-datorer tjänar som webbservrar. Du lägger webbsidorna i en mapp med namnet public_html och med filskydd så att alla har rättighet att läsa filerna i mappen.

5 Webblabb 5 Innan du lägger upp något på webben Innan du lägger upp något på webben ska du läsa KTHs regler för spridning av information via Internet som finns på Egen hemsida Många studenter gör en egen hemsida. På din egen hemsida kan du lägga länkar till andra sidor du gör. Din egen hemsida bör innehålla information som du tror att andra är intresserade av att läsa om dig och vad du sysslar med. Din hemsida får inte innehålla KTHs emblem, eftersom den inte är någon officiell KTH-sida. Hemsidan ska innehålla en knapp som länkar till en standardiserad text som talar om att sidan är en personlig hemsida och att eventuella åsikter som framförs är personliga och inte representerar KTH. Din egen hemsida ska ha filnamnet index.html. Du får inte någonstans lägga upp material som är oetiskt, olagligt eller kommersiellt (kommersiell information är inte olaglig eller oetisk men spridningen ska inte bekostas av KTH). Fem metoder att skapa webbdokument Det finns fyra metoder att skapa HTML-kod 1 Skriv koden rakt in i en ordbehandlare eller editor (t.ex. Word eller Emacs). 2 Använd en speciell HTML-editor. 3 Använd ett konverteringsprogram, som konverterar text skriven i en ordbehandlare till HTML-kod. Använd ett speciellt program för att visuellt bygga upp sidan. Följande metod används för att skapa ett PDF-dokument 5 Skriv dokumentet i t.ex. Word och konvertera det till PDF-format. De fyra första metoderna kan kombineras. Det kan vara praktiskt att använda ett konverteringsprogram eller ett program för att visuellt bygga upp sidan först och sedan komplettera den HTML-kod som skapats på annat sätt. Du kan också klistra in HTML-kod som du hämtat från färdiga webbsidor och sedan modifiera den. För material som publiceras på webben gäller vanliga copyrightregler. Tänk på att sidan ska underhållas då du väljer metod för att skapa den. En del personer tycker att det är ganska roligt att arbeta direkt med HTML-koden och för dem kan metod 1 eller 2 passa bra. Andra personer ogillar att arbeta med koder och för dem kan metod 3 eller 4 passa bra. Metod 3 och 4 har nackdelen att man inte kan styra vilken HTML-kod som genereras. Om du skriver ett dokument för spridning på papper och dessutom vill lägga ut det på webben, är troligen metod 3 eller 5 bäst. Metod 5 är bra om du förväntar dig att läsaren kommer att skriva ut dokumentet på papper, knappast annars. 1 Vanlig ordbehandlare Fördelen med att arbeta med en vanlig ordbehandlare är att du arbetar med ett verktyg som du är van vid. Vanliga ordbehandlare innehåller dock inget stöd för

6 6 Webblabb HTML utan du måste komma ihåg hur märkorden skrivs och skriva in dem själv. I Emacs finns dock ett visst stöd för HTML och vana Emacsanvändare föredrar ofta att använda Emacs även för att skriva HTML-kod. 2 Speciell HTML-editor Med en HTML-editor behöver du inte komma ihåg hur märkorden ser ut och inte skriva in dem själv utan kan välja formatering, märkord etc. i menyer eller verktygslister. Du kan också editera direkt i HTML-koden och styra hur den ser ut. Det finns en koppling så att du med ett kommando kan se sidan i en webbläsare. Det finns åtskilliga HTML-editorer. För PC finns t.ex. Coffee Cup och CuteHTML. För Mac finns bl.a. PageSpinner. HTML-editorn PageSpinner Olika HTML-editorer fungerar i princip likadant. När du öppnar PageSpinner får du upp ett fönster som ser ut så här: Pop-up-meny för att söka Nytt stycke Ny rad Vågrät linje Ramar HTML-Assistant Tabell Länk Bild Ankare Visa i webbläsare Centrera Fet Kursiv Gör till element i lista Du skriver in texten du vill ha på sidan. Du kan markera en rubrik och välja Header 1 i menyn Size. Eller markera ett ord och välja verktyget B på verktygslisten för att få texten i fetstil. För att skapa en länk skriver du den text du vill länka från och markerar den. Sedan väljer du länkverktyget (har en kedja som ikon) och får upp en dialogruta där du anger vart länken ska leda. Du kan se hur dokumentet kommer att se ut genom att välja verktyget med den Netscapeliknande ikonen till höger i verktygslisten. Till PageSpinner finns såväl dokumentation i datorläsbar form som hjälpfunktion och exempel.

7 Webblabb 7 Så här kan en sida se ut: och motsvarande sida i Netscape 3 Konverteringsprogram Med ett konverteringsprogram skriver du sidan i t.ex. en ordbehandlare och konverterar sedan till HTML-kod. Ofta görs konverteringen via något mellanliggande standardformat, t.ex. RTF (rich text format). Metoden är lämplig för texter som du i första hand gör för papper men där du även snabbt vill kunna fixa till en webbversion. Words konverteringsprogram I MSWord2001 finns ett kommando för att spara som webbsida. Dokumentet kommer inte att se likadant ut när man ser det i webbläsaren som det gör i Word. Möjligheterna att formatera är väsentligt mer begränsade i HTML än i Word.

8 8 Webblabb Typografi Teckensnitt Vad händer Behålls Teckenstorlek Behålls i stort sett (konverteras till HTML-storlek 1-6) Avstånd Avstånd före och efter stycken försvinner och ersätts med standard för HTML Specialtecken De flesta fungerar Spalter Försvinner Tabeller Blir standardtabeller med kantlinjer Listor Numrerade listor konverteras till listor Bilder Konverteras till gif och kommer med (men kom ihåg att lägga över dem på webbservern) Sidhuvuden, Försvinner sidfötter Tabbar Kodas som tabb, men visas oftast som blank Innehållsförteckning Konverteras Kantlinjer Försvinner Fyllning Försvinner Titel HTML-sidans titel blir första raden i texten En text som ser ut så här i Word

9 Webblabb 9 Ser ut så här i Netscape