Introduktion till HTML - Grunder Kursmål Att ge kunskaper och färdigheter om hur man utformar en Webbsida. Kännedom om multimediala programvaror. Att använda text och bild (även ljud) för att förstärka förmedling av information. Att söka information på internet för att följa utvecklingsprocessen inom Webb. Vad är HTML? Förkortningen HTML står för Hyper Text Markup Language. HTML är ett sidbeskrivningsspråk och används alltså för att bestämma hur hemsidor på Internet skall se ut. HTML skapades i datorernas barndom och är därför både inexakt och svåranvänt. Hypertext Hypertext är TEXT som innehåller aktiva kommandon till annan text. Dessa kommandon kallas hyperlänkar eller enklast Länkar. I länkarna finns osynlig information om vart de leder. Genom att välja en sådan länk instrueras Webbläsaren att visa det HTMLdokument som länken hänvisar till. Varför är HTML bra? HTML är grunden för Internets genomslagskraft. Att koppla ihop datorer till nätverk är inget nytt, men HTML är en standard för att presentera information som används över hela världen. En hemsida som följer den standarden ser i princip likadan ut över hela världen. Eftersom HTML egentligen bara består av text kan vem som helst med en dator och kunskap göra hemsidor. Med andra ord är HTML lika tillgängligt för den fattige studenten i Filippinerna som för Bill Gates i egen hög person. Att kunna kommunicera med alla är det som gör HTML unikt. Varför är HTML dåligt? HTML är gjort för att kunna användas av alla oavsett vilken typ av dator man sitter vid. Priset för det är att det inte finns särskilt många finesser eller möjligheter för t.ex. avancerad och exakt layout. Dessutom tar det ganska lång tid att lära sig. HTML-språket utökas hela tiden med nya möjligheter. Nackdelen är att nyheterna inte förstås av alla. Det betyder att det visserligen är möjligt att göra otroligt avancerade hemsidor men att det också utestänger många från att ta del av informationen. Därmed förvandlas hela idén med Internet till en klubb för inbördes beundran av de som kan skriva de "häftigaste" koderna. 1
Vad behövs? Det du behöver bäst är kanske tålamod. Däremot behöver du inte några dyra program eller avancerad utrustning. Du behöver bara ett redigeringsprogram. Det räcker utmärkt med en enkel ordbehandlare. Om du har Windows/Windows 95 kan du t.ex. använda "Anteckningsblocket/Notepad/Wordpad". Om du har Macintosh kan du använda "Texthanteraren/Skriv Text". Det finns också många program som är specialgjorda för att göra hemsidor, t.ex. Netscape Navigator Gold, Microsoft Frontpage, Macromedia DreamWeaver, Adobe Go Alive. Dessa program försöker underlätta tillverkningen av hemsidor genom att efterlikna traditionella layoutprogram. Dessutom brukar det finnas inbyggd hjälp för filöverföring, länkkontroll m.m. I dagsläget kan specialprogram inte helt ersätta kunskap om HTML-kod för att göra riktigt bra hemsidor. För att titta på sidorna du gjort behövs en webbläsare, t.ex. Microsoft Internet Explorer (gratis) eller Netscape Navigator (gratis för studenter). HTML-språk När man skriver i HTML-språk specifierar man hur olika delar av texten skall visas genom att märka den (MARKUPP). Märkning sker med TAGS <> som på svenska kallas Taggar eller Tag. Man skriver en Taggs namn inom tecken mindre än [<] och större än[>]. Hur man skriver taggarna är valfritt, men det gäller att vara konsekvent och alltid använda antingen gemener eller versaler. Detta för att känna igen taggkommandot från övrig text. Start och sluttagg definierar kommandots start och avslutande. Du definierar ett HTMLdokument med <HTML> och avslutar med </HTML>. Som du ser har jag valt att definiera mina taggar med versaler. En tagg kan även kompletteras med ett attribut, dvs ett värde inom citattecken Ex med tagg <FONT FACE> anges vilket teckensnitt man vill ha. (Jag väljer Verdana som Attribut. Taggen ser ut så här: <FONT FACE= Verdana > HTML-dokumentets beståndsdelar HTML-dokument definieras med tagg <HTML> som start tagg. DEN formas av ett huvud och en kropp, liknande ett vanligt brev eller trycksak där kroppen definieras av satsytan. I HTML:s Huvud <HEAD> står vad dokumentet skall heta och i kroppen <BODY> finns innehållet i själva sidan. Det utgör grunprincipen och alla taggar skall avslutas med sluttagg: </HEAD>; </BODY>; </HTML>. Vi undersöker nu hur en webbsida kan byggas. Märket <HTML> definierar vilket språk och dokument vi jobbar med. (Numera finns även som första taggen <!DOCTYPE> som informerar om HTML-standard. Vi återkommer senare om detta.) 2
Märket <HEAD> markerar början av dokument-huvudet. Det är den del som skickas först till webbläsaren och i det skickas viktig information om sidans innehåll. <TITLE> är den titel Du ger ditt dokument som besökarna kommer att se och som syns i webbfönstret och som kan läggas i sökmotorer för att hitta din webbsida i www. <BODY> Här läggs innehållet, text, tabeller, bilder. En (enkel) HTML-Mall <HTML> <HEAD><TITLE>..</TITLE></HEAD> <BODY>.</BODY> </HTML> Vi stannar här. Vi kommer senare att arbeta med en enkel webbsida och fördjupa kunskaperna. 3
Hur är HTML uppbyggt? HTML består av en uppsättning koder som styr hur sidans innehåll skall presenteras. Varje textutseende och layout har sin egen kod. När du har angett en kod gäller den ända tills du avslutar den. Varje kod har alltså två delar en startkod och en slutkod. Start-koden är omgiven av <> och slutkoden är omgiven av </> Nästan alla koder fungerar på samma sätt även om några undantag finns. Titta t.ex. på följande exempel: <B> </B> är startkoden för fet stil och gäller för all text som följer efter den. är slutkoden för fet stil och gör att startkoden slutar gälla. Om du t.ex. vill att namnet "Kalle" skall stå i fet stil måste du alltså skriva <B>Kalle</B> Det går också att lägga flera koder i följd, om du t.ex. skulle vilja ha texten både fet och understruken. Använder man flera koder i följd bör man avsluta dem i motsatt ordning från hur man startade dem. Titta på exemplet nedan: <B><U>Kalle</U><B> Eftersom koderna följer en standard måste de skrivas exakt. Det är alltså ingen idé att hitta på egna koder som man tycker skulle vara bra. Skriver du fel ignoreras helt enkelt koden. Däremot spelar det ingen roll om skriver med små eller stora bokstäver eller om du har flera koder på samma rad. Många tycker att det är lättast att läsa om det är en kod per rad. Som du kommer att få se längre fram kan koder också ha ett eller flera attribut som i sin tur kan anta ett värde. Det ger möjlighet till fininställningar. Om vi t.ex. vill ha ett nytt stycke som är centrerat måste vi lägga till koden för nytt stycke <P> och till det lägga attributel ALIGN som skulle få värdet CENTER. Alltihop skulle se ut som här nedan: <P ALIGN="CENTER"> Om övningarna i detta häfte Du är ansvarig hos cyberföretaget Website och har fått i uppdrag att presentera företaget och dess produkter och tjänster på Internet. Övningarna visar dig steg för steg hur du bör gå tillväga. Redan efter första delen har du en fungerande hemsida. I del två och tre får du lära dig fler finesser. Den färdiga "sajten" kommer att bestå av tre separata dokument "index.htm", "tjanster.htm" och "produkt.htm". 4
Enkel HTML Filnamn Hemsidor består av ett eller flera dokument. Dokumenten lagras som filer på en server, d.v.s. en dator som är uppkopplad till Internet dygnet runt. Oftast fungerar det så att du får använda en katalog på den datorn till att lägga hemsidans filer i. Servrar kan ha olika regler för hur du skall namnge filerna, men med tanke på de som vill använda hemsidan bör du begränsa sig till max 8+3 tecken t.ex. "bil.htm" (OBS små bokstäver). Filändelsen visar vilken typ av dokument det handlar om. Alla HTML-filer bör ha filändelsen ".htm". Andra vanliga filändelser är t.ex. ".gif", ".jpg" ".mid", ".wav". I vissa fall måste det dokument som du vill använda som startsida för besökaren ha filnamnet "index.htm". Starta redigeringsprogrammet och skapa ett nytt dokument. Spara det med namnet "index.htm" i katalogen "hemsida". När din "sajt" är helt färdig kommer den att bestå av tre separata dokument "index.htm", "tjanster.htm" och "produkt.htm". Du kan dock tills vidare vänta med att skapa dem. Obligatoriska koder <HTML><HEAD><TITLE><BODY> Alla hemsidor bör inledas med koden som talar om för webbläsaren att dokumentet i fråga är ett HTML-dokument. Skriv in koden: <HTML> Nästa obligatoriska kod talar om att det som följer är sidhuvudsinformation. Det som skrivs här visas inte i direkt i läsaren, men kan ha andra funktioner. Det får bara finnas en gång per dokument. Skriv in sidhuvudskoden: <HEAD> 5
Direkt efter följer koden för den text som skall hamna i fönstrets titelrad. Det du skriver här blir också den texten som syns i bokmärken. Dessutom använder Internets sökmotorer informationen här. Man bör med andra ord ha en titel som säger något om vad dokument faktiskt handlar om. Skriv in titelkoden: <TITLE>Website Hammarbyhamnen</TITLE> Avsluta sedan hela sidhuvudet med: </HEAD> Nu är det dags att påbörja den del av sidan som kommer att synas i webbläsaren - sidkroppen. Skriv in koden för sidkropp: <BODY> Text <Hn> (H=heading) <B> (B=bold) <I>(I=italic) <U> (U=underlined). Eftersom webbläsare tolkar koderna lite olika är det omöjligt att bestämma exakt hur texten skall se ut i mottagarens läsare. Däremot kan du ange vilken text som skall betonas, och ungefär hur detta ska ske. Rubriker Rubriker är egna stycken med större teckengrad. De skapas med koden <Hn> där "n" kan vara ett nummer från 1-6. <H1> är den största rubriknivån och <H6> den minsta. Senare kan du prova de olika storlekarna. Skriv in rubriken på följande sätt: <H1>Välkommen till Website</H1> Titta hur det ser ut i läsaren 6
Fet, kursiv och understruken text Text kan göras fet kursiv eller understruken. Understruken text används dock inte så ofta på Internet eftersom den är lätt att förväxla med länkar, som också är understrukna. Skriv in nedanstående text direkt efter rubriken: <B>Website</B> är ett nystartat företag i Hammarbyhamnen med 15 anställda. Företagets namn kommer från det latinska ordet <I>Webus situs</i> som betyder <I>dator</I> eller <I>nätverk</I>. Företaget har inspirerats av den låga nivån i samhället och på <U>Internet</U> i synnerhet. Titta hur det ser ut i läsaren Radbrytningar och stycken <BR> (BR=break) <P> (P=paragraph). <HR> (HR=horisontal ruler) Det är möjligt att dela in text med hjälp av radbrytningar och stycken Skillnaden mellan radbrytningar och stycken är att stycken alltid har ett avstånd före. Det passar bra för att skapa mer luft i texten. (OBS! Notera att dessa koder inte behöver någon slutkod) Lägg till följande stycke efter texten du nyss skrev: <P>Vår dynamiska VD, <B>Gill Bates</B> har två stora passioner i livet. <BR>Hon skriver dikter och romaner, men skapar också spännande hemsidor. Titta hur det ser ut i läsaren Horisontell linje Som dekoration, och för att hjälpa betraktaren att orientera sig på sidan ska du föra in en horisontell linje. (OBS denna kod behöver ingen slutkod) Lägg till följande kod till din sida: <HR> Titta hur det ser ut i läsaren 7
Länkar <A> (A=anchor) Det som gör Internet och HTML så fantastisktt är möjligheten att länka hemsidor till andra hemsidor. På det sättet kan all nödvändig information bli tillgänglig genom ett musklick. Vanligtvis visas länkar genom att vissa ord blir blå och understrukna. När du sedan klickar på länken hämtar din webbläsare in denna information. Länkar till andra sidor Koden för att göra länkar är lite annorlunda än de koder du hitintills stött på. Anledningen är att du både måste ange att det skall vara en länk och var den länken skall gå. Skapa länkar till sidorna "produkt.htm" och "tjanster.htm" som senare ska ingå i sajten genom att skriva in följande: Lägg också in kod för radbrytningar. <A HREF="produkt.htm">Produkter</A> som gör människor effektivare.<br> <A HREF="tjanster.htm">Tjänster</A> som gör att produkterna fungerar bättre.<br> Titta hur det ser ut i läsaren. Om du har gjort rätt är orden "Produkter" och "Tjänster" blå och understrukna. Du kan dock ännu inte klicka på dem eftersom de övriga dokumenten i sjaten ännu inte är färdiga. Infoga bilder <IMG SRC="filnamn"> (IMG=image SRC=source) Bilder som visas på en hemsida ingår inte i själva dokumentet. Istället fungerar det så koden talar om för webbläsaren att den skall visa en bild och var den bilden kan hittas. (OBS denna kod behöver ingen slutkod) Internet är väldigt, väldigt stort och därför kan det vara mycket besvärligt att ange var bilden finns. Om du vill göra det enkelt lägger du bilden i samma katalog som själva hemsidan. Då behöver du nämligen inte ange var bilden finns utan webbläsaren hittar den själv. Alla bilder måste ha formatet ".jpg" eller ".gif". Om du gör något fel visar webbläsaren att bilden inte kan hittas. Infoga bilden "line.gif" längst upp på sidan (mellan <BODY> och <H1>) på följande sätt: <IMG SRC="line.gif"> 8
Titta hur det ser ut i läsaren Avsluta sida och dokument Avsluta sidan genom att skriva: </BODY> Slutligen avslutar du hela dokumentet med: </HTML> Spara dokumentet 9
Fler övningar produkt.htm Skapa ett nytt dokument och spara det som "produkt.htm". Skriv in följande: <HTML> <HEAD> <TITLE>Websites produkter</title> </HEAD> <BODY> <IMG SRC="line.gif"> <H1>Websites produkter</h1> <HR> <P> <B>Macintosh</B> - för den kräsne<br> <B>Power Tools</B> - för kreatören<br> <B>SIMM-line Art Gallery</I></B> - för skribenten<br> <B>Anti-DOS tools</b> - för humanisten<br> <B>Doktor Max</B> - Hjälpredan som håller din dator i trim<br> <P> <HR> <A HREF="tjanster.htm">Tjänster</A> som gör att produkterna fungerar effektivare. <BR> <A HREF="index.htm">Tillbaka</A> till första sidan </BODY> </HTML> Spara dokumentet 10
tjanster.htm Skapa ett nytt dokument och spara det som "tjanster.htm". Skriv in följande: <HTML> <HEAD> <TITLE>Tjänster</TITLE> </HEAD> <BODY> <IMG SRC="line.gif"> <H1>Websites tjänster</h1> <HR> <P> <B>Nätverksterapi</B> - för Internetberoende<BR> <B>Sjukgymnastik</B> - för musarmbågar<br> <B>Rekreationsresor</B> - surfa till Honolulu<BR> <P> <HR> <A HREF="produkt.htm">Produkter</A> som gör människan effektivare<br> <A HREF="index.htm">Tillbaka</A> till första sidan </BODY> </HTML> Spara dokumentet 11
Medelsvår HTML Färger och bakgrunder <BODY BGCOLOR, TEXT, LINK, ALINK, VLINK, BACKGROUND> Färg på bakgrund och text Som du har sett blir hemsidans bakgrundsfärg automatiskt grå och texten svart. Om du vill ha andra färger måste du lägga till attribut och värden till <BODY>. Det kan vara ganska krångligt att ange exakta färger i HTML eftersom man måste använda speciella koder. Det finns som tur är 16 fördefinierade färger som du kan använda om du anger deras namn på engelska. De färger du kan välja mellan är: Engelskt namn Svenskt namn Hexadecimal Kod BLACK Svart #000000 GREEN Grön #008000 SILVER Grå #C0C0C0 LIME Klargrön #00FF00 GRAY Mörkgrå #808080 OLIVE Olivgrön #808000 WHITE Vit #FFFFFF YELLOW Gul #FFFF00 MAROON Rödbrun #800000 NAVY Marinblå #000080 RED Röd #FF0000 BLUE Blå #0000FF PURPLE Lila #800080 TEAL Blågrön #008080 FUCHSIA Cerise #FF00FF Öppna dokumentet "index.htm" och ändra bakgrundsfärgen till gult genom att lägga till följande attribut och värde till body: <BODY BGCOLOR="YELLOW"> 12
Titta hur det ser ut i läsaren Ändra nu också texten till röd genom att lägga till attributet "TEXT" med värdet "RED" i <BODY> <BODY BGCOLOR="YELLOW" TEXT="RED"> Länkfärger Det är också möjligt att ändra på länkarnas färger genom att lägga till fler attribut och värden. Attributet "LINK" ändrar färgen på länkar, innan man klickat på dem. Attributet "ALINK" ändrar på färgen precis medan man klickar på länken. Attributet "VLINK" slutligen påverkar färgen på de länkar man redan besökt. Ändra länkfärger genom att modifiera <BODY> på följande sätt <BODY BGCOLOR="YELLOW" TEXT="RED" LINK="GREEN" ALINK="LIME" VLINK="OLIVE"> Bilder som bakgrund Det går bra att lägga in bilder som bakgrund. Observera dock att det är omöjligt att ha bakgrundsbild och bakgrundsfärg samtidigt. Om bilden inte är stor nog för att täcka hela sidan kommer den att repeteras ända tills sidan är fylld. Tänk på att bakgrunder inte syns vid utskrift. Ändra nu <BODY> på följande sätt <BODY BACKGROUND="jazzbkgd.gif"> Text <FONT COLOR,FACE,SIZE> Textfärg Som du redan har sett kan man byta textfärg i hela dokumentet genom att ange det i <BODY>. Det går också att byta textfärg på enstaka ord och stycken. 13
Ändra textfärg på namnet "Gill Bates" på följande sätt: <FONT COLOR="TEAL">Gill Bates</FONT> Byta teckensnitt Det går rent teoretiskt att välja vilket teckensnitt som helst. Du måste dock vara medveten om att mottagaren kanske inte har dessa teckensnitt installerade i sin dator och därför inte kommer att kunna se sidan på samma sätt som du gör. Du kan därför också ange två alternativa teckensnitt. Finns inte heller de kommer standardteckensnitt att användas Ändra teckensnitt på rubriken "Välkommen till Website" på följande sätt <FONT FACE=Braggadoccio,Arial,Helvetica>Välkommen till Website</FONT> Ändra teckenstorlek Du kan också ändra storleken på text genom att lägga till attributet SIZE och ett värde mellan 1 (minst) och 7 (störst) i <FONT>. Ändra storlek på ordet "VD" på följande sätt: <FONT SIZE="7">VD</FONT> Stycken <P ALIGN> <CENTER> <UL> <OL> <DL> Vänsterställa, högerställa eller centrera stycken Om du inte gör någonting vänsterställs automatiskt alla stycken. Ibland kan högerställd eller centrerad text vara att föredra. Det åstadkommer du lätt genom att lägga till attributet ALIGN och något av värdena LEFT, RIGHT eller CENTER till <P>. (Dessa attribut kan även användas i rubriker) Högerställ stycket som handlar om den dynamiska VD:n genom att lägga till attribut och värde i styckekoden, på följande sätt: <P ALIGN="RIGHT"> Det finns också ett annat alternativ för att centrera text eller bilder. 14
Centrera rubriken "Välkommen till Website" på följande sätt: <CENTER>Välkommen till Website</CENTER> 15
Listor Att läsa sida efter sida med vanlig text är jobbigt för betraktaren. Ett sätt att bryta upp texten är att använda olika typer av listor. Det finns flera olika typer av listor. Listor behöver två koder - en som talar om vilken typ av lista det är fråga om, och för varje ny punkt. Punktlista Öppna dokumentet "produkt.htm" och ändra produktlistan till följande <UL> <LI><B>Macintosh</B> - för den kräsne<br> <LI><B>Power Tools</B> - för kreatören<br> <LI><B>SIMM-line Art Gallery</I></B> - för skribenten<br> <LI><B>Anti-DOS tools</b> - för humanisten<br> <LI><B>Doktor Max</B> - Hjälpredan som håller din dator i trim<br> </UL> Numrerade listor Öppna dokumentet "index.htm" och lägg till följande lista längst ner på sidan (före </BODY>) <OL> <LH>Personal <LI>Agnes Winterknapp, 32, civilekonom och pingislirare <LI>Werner Bontron, 45, civilingenjör och smörgåsfanatiker <LI>Bengt Olivetti, 38, jägare på jakt <LI>Sara Sahara, 26, ostälskare och konfigureringsexpert <LI>Vilgot Pardon, 32, rutinerad soffliggare <LI>Ezra Swärd, 23, receprion och växel <LI>Mats Swärd, 30, kabeldragre från Minsk <LI>Niklas Plååt, 23, viruskontrollant och hacker. <LI>Lina Styyf, 22, matematiker och analytiker <LI>Per Garthon, 52, Styrelseproffs och miljövän <LI>Wolfgang Makadam, 47, termineringsingenjör <LI>Gertrud Svensson, 49, mogen ordbehandlare <LI>Karl P Dahl, 36, kalkylering och offertskrivning <LI>Minna Laaksonen, 34, ingenjör och gympaledare <LI> Vesa Kangas, 32, systemerare på halvtid </OL> 16
Definitionslistor Öppna dokumentet "tjanster.htm" och ändra det på följande sätt: <DL> <DD><B>Nätverksterapi</B> - för Internetberoende<BR> <DD><B>Sjukgymnastik</B> - för musarmbågar<br> <DD><B>Rekreationsresor</B> - surfa till Honolulu<BR> </DL> Bilder <IMG,ALT,WIDTH,HEIGHT,BORDER,ALIGN> Ange dimensioner Det är egentligen inte nödvändigt att ange en bilds dimensioner för att använda den. Ibland kan det ändå vara bra att göra det eftersom sidan då kan kännas lite snabbare. En annat tillfälle då det skulle kunna vara användbart är om man vill ta fram en hemsidas layout, men ännu inte har fått tag i alla bilder - då kan man åtminstone se en tom bildram i rätt storlek. Bildens dimensioner anges i "pixlar" d.v.s. bildpunkter. I bildbehandlingsprogram, typ Photoshop, har du alltid möjlighet att ta reda på detta. Du anger bilddimensioner genom att lägga till attributen "HEIGT" respektive "WIDTH" som i exemplet nedan. Öppna dokumentet "index.htm" och infoga en bild med angivna dimensioner genom att lägga till följande rad längst ner på sidan (precis före slutkoden </BODY>) <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188"> Alternativtext De flesta webbläsare ger användaren möjlighet att stänga av bildvisningen för att göra surfandet snabbare. När man gör hemsidor måste du tänka på det. Det gäller särskilt om du använder bilder som länkar, eftersom det måste gå att klicka på dem även om bilden inte visas. Du bör därför lägga till en alternativtext som visas även om bilden inte skulle göra det. Du anger alternativtext genom att lägga till attributet ALT till <IMG>. Lägg till alternativtext till den bild du nyss infogade genom att ändra koden på följande sätt <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188" ALT="Här skall det vara en bild på en telefon"> 17
Bildram Ibland kan det se trevligt ut att ha en ram runt bilder. Det åstadkommer man genom att lägga till attributet BORDER till <IMG>. Ramens tjocklek anges i pixlar. Lägg till en ram på två pixlar till den bild du nyss infogade genom att ändra koden på följande sätt: <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188" BORDER="2" ALT="Här skall det vara en bild på en telefon"> Justera bildpositionen Man kan justera bildens position i sidled på sidan genom att lägga till attributet ALIGN som kan anta värdet "LEFT", "RIGHT" eller "CENTER". Högerjustera bilden "telefon.gif" genom att ändra koden på följande sätt: <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188" BORDER="2" ALIGN="RIGHT" ALT="Här skall det vara en bild på en telefon"> Justera avståndet runt bilden Det är möjligt att ange hur mycket fritt utrymme som skall omge en bild. Man anger avståndet i höjdled genom attributet VSPACE och i sidled genom attributet HSPACE. Avståndet anges i pixlar. Så här skulle det t.ex. kunna se ut: <IMG SRC="telefon.gif" HSPACE="20" VSPACE="20"> 18
Länkar <A HREF NAME, MAILTO> Länkar inom den egna sidan Om man har en lång sammanhängande hemsida kan det vara praktiskt att skapa länkar mellan olika delar av sidan. För att göra det måste du ange en startplats och en landningsplats i dokumentet. Det gör du i två steg. För att ange startplats skall du, i dokumentet "index.htm", leta reda på orden "15 anställda" och skriva in följande kod framför och bakom: <A HREF="#GÄNGET">15 anställda.</a> Nästa steg är att skapa en landningsplats precis före listan med de anställda (före <OL>) genom att skriva in följande kod. <A NAME="GÄNGET"> Länkar för E-post En användbar möjlighet är att lägga in en länk för e-post på hemsidan. På det sättet blir det lätt för besökaren att få kontakt med dig. Längst ner i dokumentet "index.htm" (före slutkoden </BODY>) lägger du till följande text och kod för att skapa en e-postlänk: Vill du skicka <A HREF="MAILTO:gill.bates@website.se">E-post</A> Länkar till andras hemsidor Att länka till sidor någonstans på nätet är inte svårare än att länka till ens egna sidor. I <A> skriver du helt enkelt in adressen (URL) till sidan du vill gå. SÅ här kan det t.ex. se ut: <A HREF="http://www.microsoft.se"> Till Microsofts hemsida</a> Tabeller <TABLE, TR,TD> (TR=TableRow) (TD=TableData) Tabller låter kanske inte så upphetsande men faktum är att de kan användas till mer än det traditionella. Framför allt är det ofta det enda sättet att placera bild och text exakt där man vill 19
ha dem. Dessutom är det enda sättet att skriva text i kolumner. När man gör tabeller krävs det att man håller tungan rätt i mun. Det tar ett tag innan man kommer underfund med hur det fungerar. Ett bra sätt är att låna inspiration från andras tabeller som man ser på internet. Koden för tabell är <TABLE> och den måste alltid två andra koder, nämligen <TR> som ger ny rad, och <TD> som ger ny cell. Alla koder måste också avslutas i rätt ordning. En enkel tabell Öppna dokumentet "produkt.htm" och skapa en tabell med en pixel tjock ramlängst ner på sidan (före slukoden </BODY>. Skriv in följande kod och attribut: <TABLE BORDER="1"> Lägg sedan till en ny rad genom koden. <TR> Nästa steg är att lägga till två celler med innehåll. Skriv: <TD>Produkt</TD><TD>Pris</TD> Avsluta nu raden genom att skriva in följande slutkod: </TR> Lägg ny till ytterligare en rad med två celler genom att skriva in följande kod: <TR> <TD>Doktor Max</TD><TD>999,50</TD> Avsluta nu även denna rad genom: </TR> 20
Avsluta nu hela tabellen genom: </TABLE> Titta hur det ser ut i läsaren Justera storleken Normalt sett anpassar sig cellens storlek så att innehållet precis ryms. Det går också att själv bestämma bredd och höjd genom att lägga till attributen WIDTH och/eller HEIGHT. Alla storleksangivelser sker i pixlar - bildpunkter. Justera tabellens bredd och de olika cellernas höjd på följande sätt: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30">Produkt</TD><TD HEIGHT="30">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50">999,50</TD> </TR> </TABLE> Justera cellinnehåll Cellens innehåll kan justeras i sidled genom attributet ALIGN (möjliga värden: LEFT, RIGHT, CENTER) och i höjdled genom attributet VALIGN (möjliga värden: TOP, BOTTOM, MIDDLE) Justera "Pris" och "999,50" så att de hamnar längst till höger i sina celler. Gör följande ändringar: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30">Produkt</TD><TD HEIGHT="30" ALIGN="RIGHT">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50" ALIGN="RIGHT">999,50</TD> </TR> </TABLE> 21
Justera "Produkt" och "Pris" så att de hamnar längst ner i sina celler. Gör följande ändringar: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30" VALIGN="BOTTOM">Produkt</TD><TD HEIGHT="30" ALIGN="RIGHT" VALIGN="BOTTOM">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50" ALIGN="RIGHT">999,50</TD> </TR> </TABLE> Bakgrundsfärg Det går även att ändra bakgrundsfärg genom attributet BGCOLOR. Om man ger attributet till <TABLE> får hela tabellen samma bakgrundsfärg, men man kan också ge attributet till enstaka celler. Ändra bakgrundsfärg i de två cellerna i den översta raden genom att införa följande ändringar: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30" VALIGN="BOTTOM" BGCOLOR="#FFFF00">Produkt</TD><TD HEIGHT="30" ALIGN="RIGHT" VALIGN="BOTTOM" BGCOLOR="#FFFF00">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50" ALIGN="RIGHT">999,50</TD> </TR> </TABLE> Bilder i tabellen Den stora fördelen med tabeller är att man kan placera innehållet nästan exakt där man vill ha dem. Det fungerar också med bilder. Enkelt är det också. Det enda du behöver göra är att byta ut orden mot bilder, d.v.s. du lägger in <IMG SRC="filnamn"> i en cell. 22
Avancerad HTML Färger och bakgrunder Allt du ser på en bildskärm byggs upp av tre färger, eller för att vara mer exakt ljus med tre våglängder- Rött, Grönt, Blått- s.k. RGB-färg. Som du redan vet finns det 16 fördefinierade färger men naturligtvis finns det ännu fler färger att välja mellan, närmare bestämt 1.658.1375 stycken. Även om det fanns så många namn på färger skulle det nog ta ganska lång tid att lära sig dem. Genom att ange mängden av respektive färg kan du dock själv blanda till en nyans som passar. När man ska blanda färg anger man färgmängd med numeriska benämningar i stället för namn. Det som krånglar till det är att man använder sig av det hexadecimala talsystemet i stället för det vanliga decimala. Ett hexadecimalt värde kan t.ex. se ut så här #5F89E2 Trots att det hexadecimala systemet verkar omständigt är det faktiskt inte så besvärligt att förstå hur det fungerar. Om du tänker på vårt vanliga decimala talsystem vet du att det har tio olika siffror (0-9). Genom att låta siffrornas position avgöra huruvida det rör sig om ental, tiotal, hundratal, etc. kan vi med enbart dessa tio siffror ändå beskriva stora tal. Se t.ex. på hur man skriver talet 255 nedan Hundratal Tiotal Ental 2 5 5 2 5 5 Det hexadecimala talsystemet däremot har sexton siffror först 0-9 och sedan A-F. Tänk dig att du har räknat till F (15 decimalt) och att du sedan vill fortsätta räkna. Då måste du göra som i det decimala systemet och låta siffrornas position bestämma dess värde. För att räkna till 16 decimalt skulle du hexadecimalt behöva skriva 10. Genom att fortsätta på det sättet kan man räkna ut att det hexadecimala systemet FF motsvarar 255 i det decimala systemet. Titta på tabellen nedan för att se vad respektive siffra motsvarar i det decimala talsystemet. Hexadecimalt 0 1 2 3 4 5 6 7 8 9 A B C D E F Decimalt 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 23
Tänk dig nu att du ska beskriva en RGB-färg. För varje delfärg kan du använda hexadecimala tal mellan 00-FF (motsvarande 0-255 decimalt). Om du inte skulle vilja ha någon färg alls (total frånvaro av ljus/svart) skulle du vara tvungen att ange följande värden Rött=00, Grönt=00 och Blått=00. När man skriver in dessa värden i ett HTML-dokument blir det #000000 För att på motsvarande sätt ta maximalt av varje delfärg, och därmed åstadkomma vitt ljus, skulle du få skriva #FFFFFF. Klarrött blir #FF0000. Klargrönt blir #00FF00. Klarblått blir #0000FF Det tråkiga med alltihop är att många mäniskor har skärmar som inte kan visa mer än 256, men det förändras nu i rask takt då bildskärmar och grafikort blir allt bättre till ett lägre pris. För de som bara kan se 256 färger kan den färg du mödosamt har blandat ihop framstå som en kornig röra. För att slippa detta finns det framtaget 216 färger som är allmänt vedertagna. S.kl. websäkra färger. Håll dig till dem om du vill att alla betraktare av din websida ska se samma sak. Text och stycken Specialtecken Så länge du enbart håller dig till bokstäverna A-Z och siffrorna 0-9 så är allt frid och fröjd. Vill du däremot använda specialtecken, som t.ex. Å,Ä,Ö,&,Ç,Ã,Ñ,ü, eller liknande måste du byta ut alla sådana tecken mot en kod. Har du Windows som operativsystem kan du klara dig, men för att vara på den säkra sidan bör du ändå använda specialkoderna. Nödvändigt för oss svenskar är framför allt följande teckenkoder: Å å Ä ä Ö ö Å å Ä ä Ö ö Teckensnitt I dagsläget är de enda teckensnitten man kan vara säker på att mottagaren har Times/Times New Roman, Hevetica/Arial och Courier/Courier New. Microsoft har också börjat sprida vissa gratisteckensnitt; Om några år är de förmodlöigen global de facto-standard. Indrag Det finns inga bra sätt att göra indragna stycken med hjälp av HTML, men ett ofta använt sätt är att använda koden <BLOCKQUOTE> 24
Cascading Style sheets framtiden? De möjligheter som moderna ordbehandlare har att formatera text är på väg att bli en del av HTML. Med hjälp av det som kallas Style Sheets - ungefär formatmallar - kommer det att på ett snabbt och enkelt sätt bli möjligt attformatera alla stycken i ett eller flera dokument samtidigt. De senaste versioner av såväl Netscapes som Microsofts läsare stödjer CSS, om än på olika sätt. Det kommer säkert att dröja ytterligare några år in tekniken är fullt genomförd. Bilder Rätt upplösning På grund av bildskärmars låga upplösning bör man sträva efter att använda bilder med en upplösning på 72dpi. Högre kvalitet än så ger inte bättre bild men ökar däremot tiden det tar att ladda ner bilden. Rätt färgdjup Antalet färger i en bild (GIF) anges med hjälp av s.k. bitdjup. Minska det så mycket du kan utan att kvaliteten försämras. Välj rätt bildformat Det finns två olika bildformat, GIF och JPG. Ofta är der bästa sättet att välja bildformat helt enkelt att prova spara i båda formaten och sedan välja det som blev minst med acceptabel kvalitet. GIF-bilder GIF-bilder kan innehålla max 256 nyanser. För färgfotografier är det oftast i minsta laget. Med andra ord lämpar sig GIF bäst för bilder med få nyanser. GIF-filer kan vara s.k. "interlaced", vilket gör att de växer fram gradvis för betraktaren. Dessutom kan de vara rörliga. JPG-bilder (JPEG) JPG (JPEG) kan innehålla miljontals nyanser. Det ger möjlighet att få en bra färgåtergivning på fotografiska motiv. Genom att komprimera JPG-bilder kan du få dem att krympa avsevärt. Om du komprimerar för mycket försämras dock kvalitén. Prova dig fram till lagom komprimeringsgrad. Ett bra tips är att jobba med kopior eftersom för en hårt komprimerad JPG-fil aldrig kan återfå orginalkvalitén. Kanske en lågupplöst variant? Om du vill ha både hög kvalitet och snabb nedladdning kan du prova att använda en bra JPGbild och sedan spara en svartvit kopia i GIF-format (1-bits) om du kodar rätt laddas först den lilla GIF-filen in för att sedan ersättas av JPG-bilden med högre kvalitet. Se exemplet nedan: <IMG SRC=filnamn.jpg" lowsrc="filnamn.gif"> 25
Inbäddade objekt Inbädade objekt kan vara t.ex. ljud eller filmer. Tänk på att mottagaren förutom ljudkort och dylikt även måste vara utrustad med en mycket stor portion tålamod, eftersom även mycket korta ljud kan ta flera minuter att ladda hem. Korta ljud kan loopas, d.v.s repeteras så att det känns längre än vad de egentligen är. Ljud som inte kan stängas av kan vara ett av de bästa sätten att få betraktaren vansinnig och de bör därför användas med besinning. Ljud Liksom som det finns olika bildformat finns det olika ljudformat. De vanligast är.wav,.au,.aif. Välj.AU om du har möjlighet eftersom det ger bäst kompabilitet. Det finns flera sätt att lägga in ljud på en hemsida. Antingen i form av en länk som man måste klicka på för att höra ljudet, som ett bakgrundsljud,e ller också som ett "inbäddat objekt". För att ljud skall fungera i både Netscape Navigator och Internet Explorer (även IE 2.0) måste man använda alla teknikerna. Så här kan det t.ex. se ut: <BGSOUND SRC="filnamn"> <EMBED SRC="filnamn" WIDTH="146" HEIGHT="16" AUTOSTART=True CONTROLLER=True CONTROLS=SMALLCONSOLE VOLUME="90"> <NOEMBED><A HREF="filnamn">[Play Sound]</A></NOEMBED> Midi-filer I stället för ljud kan du använda dig utav s.k. "midi"-filer (.MID). Midifiler innehåller inga ljud i sig själv utan bara en instruktion om hur ljud skall spelas upp, ungefär som notskrift. T.ex. kan en midifil innehålla anvisningar om att ett visst parti skall spelas upp med pianoljud. Exakt hur pianot skall låta bestäms däremot av ljudkortet i mottagarens dator. Enklaste sättet att förstå principen är förmodligen att tänka på de rullar som fanns till självspelande pianon förr i tiden. Fördelen med midifiler är att de tar liten plats och därmed går snabbt att överföra. nackdelen är att kvaliteten blir beroende av mottagarens utrustning. För att lägga in en midifil går du till väga på exakt samma sätt som med en ljudfil, men byter bara ut filnamn. Filmer Det är teoretiskt möjligt att lägga in filmer på en hemsida. På grund av att internets långsamhet är det dock i det närmaste oanvändbart. Skulle du ändå vilja ha en film finns det tre vanliga format: Video för Windows (.AVI), QuickTime (.MOV), och MPEG (.MPG). Vart och ett av formaten har olika fördelar vad gäller kompabilitet, flexibilitet, prestanda. Ramar (Frames) Som du säkert har sett kan man dela in en hemsida i flera mindre delar, s.k. ramar (frames). T.ex. är det vanligt att man har en del till vänster med en innehållsförteckning. När man klickar på en länk där visas innehållet i den högra ramen. Ramar är praktiskt om man har stora mängder information som ska systematiseras. Ofta ger ramar dock ett stelt och lite tråkigt intryck. Är de dessutom dåligt kodade kan de vara en riktig pina för betraktaren. Tänk också på att äldre webbläsare inte kan hantera ramar över huvud taget.. 26
Dela in sidan Grunden för en sida med ramar är att första sidan enbart har till syfte att skapa en grundstruktur och dela upp fönstret i rader och/eller kolumner. Varje ram ges ett namn och dessutom finns det en referens till de.htm-dokument som skall visas i respektive ram. Observera att <BODY> inte ska finnas då man använder ramar. Så här kan en typisk första sida se ut: <HTML> <HEAD> <TITLE>index.htm</TITLE> </HEAD> <FRAMESET Cols="25%,75%"> <FRAME Name="contents" SRC="innehall.htm" Scrolling="Yes"> <FRAME Name="main" SRC="about.html" Scrolling="Yes"> </FRAMESET> </HTML> Länkar Om du har en sida med ramar måste du tänka på var du vill att en länks innehåll ska visas upp när du klickar på länken. I exemplet ovan skulle det ju inte vara så festligt om länken visades upp i den vänstra ramen istället för den högra. För att länken skall visas på rätt ställe anger du dess mål, eller som det heter på HTML-språk, dess "Target". Om länkinnehållet skulle visas i höger ram måste du i exemplet ovan skriva så här: (observera strecket) <A HREF="filnamn/URL" target=main>klicka här</a> Javascript Java är ett sätt att utöka Internets möjligheter. HTML i sig själv ger nämligen mycket små möjligheter till interaktivitet med användaren. Med Javascript kan man t.ex. konstruera olika fält där användaren fyller i uppgifter vilka sedan kan behandlas t.ex. matematiskt. Om du har konstruerat en internetbutik kanske du vill att kunden hela tiden ska se hur mycket varorna som ligger i "korgen" kostar sammanlagt. Nackdelen med Javascript är att det är mycket svårt att lära sig att göra egna scripts. Vill man inte det så finns det massor med användbara scripts, som ofta är gratis, tillgänliga på internet. Hittar man ett bra script brukar det för det mesta inte vara svårare att lägga in det på hemsidan än vanlig HTML-kod. Något man ska tänka på är att det är många webbläsare som inte stödjer Javascripts, och att vissa som påstår sig göra det i praktiken är funktionsodugliga - t.ex. alla versioner av Internet Explorer utom den senaste (version 4). 27
Java Trots namnlikheten har Javascript och Java inte särskilt mycket med varandra att göra. Java är ett programspråk utvecklat av SUN som är tänkt att vara plattformsoberoende, d.v.s. det skall gå att använda oavsett vilken sorts dator mottagaren har. Med Java kan man göra det mesta som avancerade programspråk kan. T.ex. kan man göra spel, ritprogram, animationer etc. som ligger inlagda som en del av hemsidan. Java är extremt svårt att lära sig. Därför nöjer många sig med att kopiera s.k. "applets", d.v.s. små miniprogram skrivna i Java, och lägga in dem på den egna hemsidan. Såna program finns det gott om på Internet. Tänk på att alla inte är gratis. Trots att Java just nu är inne så ska man ändå tänka sig för innan man använder det. För att Java ska bli acceptabelt snabbt krävs en snabb dator och många väljer därför att stänga av Javatolkningen i sina webbläsare. CGI-script I vissa fall kan en "webmaster" behöva hjälp från servern för vissa uppgifter. Det kan t.ex. gälla att ta reda på hur många besökare som varit in på sidan. För att lösa den uppgiften behöver man ofta ett "CGI-script". Om man är duktig programmerare kan man skriva egna, men annars brukar serveroperatören tillhandahålla ett urval som fritt kan användas. Det krävs nästan alltid tillstån från operatören för att få använda egna CGI-scripts. Hos t.ex. Tele2 lägger du in följande kod i hemsidan för att få en besöksräknare. <!--#exec cgi="/cgi-bin/counter"--> 28