HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT Mitthögskolan ITM Telefon

Transkript

1 Mitthögskolan ITM Telefon HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon

2 Laborationskompendium för konstruktion av webbsidor HTML Inledning Internet har under de senaste 15 åren vuxit fram och blivit en otroligt stor informationskälla för många. En av fördelarna med Internet är att man snabbt och enkelt kan publicera information som kan nås av de stora massorna. I den här laborationen ska Du lära dig grunderna i hur man skapar och publicerar webbsidor. På så sätt kommer Du att själv kunna publicera information som Du vill dela med dig utav. Tips! På nätet kan man hitta otroligt mycket information som handlar om att skapa webbsidor. Känner du att labhäftet inte räcker till och vill förkovra dig inom ämnet så ger en sökning på webben otroligt mycket information. Mål Efter att ha genomfört denna laboration ska du ha skaffat dig följande kunskaper: Förstå hur webbsidor är uppbyggda Känna till grunderna i HTML/XHTML Känna till webbläsarens grundläggande funktion Kunna skapa och publicera egna webbsidor

3 Teknisk ordlista HTML/XHTML Språk för att märka upp innehållet i webbsidor. Enligt en speciell standard strukturerar man innehållet i den text som ska publiceras. Det som tidigare hette HTML heter i den senaste versionen XHTML 2.0 Webbläsare Program för att läsa och ta del av den information som finns på Internet. En webbläsare bearbetar och presenterar webbsidor skrivna med XHTML. Vanliga webbläsare är Internet Explorer, Opera, Firefox. Webbsida/hemsida En fil som innehåller text uppmärkt med XHTML-kod Webbserver En särskild dator, fast ansluten mot Internet, som lagrar och sänder iväg XHTML-filer URL Adress till en källa på Internet. Med källa menas ex HTML-fil, bildfil mm. Adressen anger datorn och den fil som efterfrågas HTTP Regler för hur man skickar webbsidor mellan webbläsare och webbserver IP-adress Datorer anslutna till Internet har alla egna unika adresser Domännamn Istället för att använda IP-adresser används dessa namn eftersom IPadresserna ofta byter namn DNS Databas som innehåller aktuellt register över IP-adresser och domännamn W3C Organisation för standardisering av tekniker på Internet Vad är Internet? Man kan lite förenklat säga att Internet är ett världsomspännande nätverk bestående av en massa datorer. En del av dessa datorer innehåller material som skall publiceras på Internet, sk webbservrar. En webbserver lagrar webbsidor och skickar vid förfrågningar tillbaka de webbsidor man önskar titta på. Varje webbserver har en särskild adress för att man ska hitta dit. Denna adress kallas även för URL och består förutom av datorns namn även sökvägen till den fil man vill se. Exempel på URL Protokoll Datornamn Sökväg till fil Datornamnet kan alltså ersättas med en IP-adress, men eftersom IP-adresser byts oftare än domännamnen så används de sällan. (Exempelvis kan man byta ut portal.miun.se mot ) När du anger denna URL i webbläsarens adressfönster så kontaktas en DNS för att hitta adressen till rätt webbserver. När rätt adress funnits så skickar webbläsaren en förfrågan till webbservern som sänder tillbaka den eller de filer man önskar. Dessa filer kan utgöras av HTML-filer, bilder, ljud etc.

4 HTML/XHTML XHTML 2.0 är den senaste versionen av HTML som funnits i olika versioner sedan XHTML är ett standardiserat språk för att märka upp innehållet på en webbsida. Den organisation som ligger bakom denna standard heter W3C. Denna organisation är även ansvarig för många andra standarder som förekommer inom informationsteknologi. På deras webbsida kan man hitta dessa standarder samt deras specifikationer. De har även sidor anpassade för dem som vill lära sig dessa teknologier, ex XHTML. Så här kan XHTML-koden till en enkel webbsida se ut: <html> <head> <title>en snygg hemsida</title> </head> <body bgcolor="#ffff99"> <h1>detta är ett enkelt exempel på en hemsida!</h1> <hr /> Så här ser sidan ut sedan webbläsaren har bearbetat html-filen... <br /> och här fortsätter texten på en ny rad. <br /><br /> <img src="image1.gif" alt="bild" width="250" height="190"></img> <br /><br /><br /> <a href="mailto:jorgen.soderback@miun.se">jorgen.soderback@miun.se</a> </body> </html> Här ser man hur man har märkt upp innehållet på ett speciellt sätt med hjälp av något man kallar för taggar, även kallat element. De olika taggarna används för att märka upp olika delar av texten i en webbsida. Man kan märka upp vad som ska vara ex rubriker, tabeller, bilder etc. En tagg har i allmänhet följande utseende: <tagg attribut = värde >Innehåll</sluttagg> Om man ser i HTML-koden ovan så återfinns följande rad: <a href="mailto:jorgen.soderback@mh.se">jorgen.soderback@miun.se</a> a är alltså taggen som anger att här kommer ett sk ankare eller länk href är ett attribut som talar om vart länken skall peka och mailto:jorgen.soderback@miun.se är dess värde jorgen.soderback@miun.se är innehållet och den text som kommer att synas /a är sluttaggen som anger att nu är ankaret/länken slut Somliga taggar har inget innehåll. Titta exempelvis på raden <img src= bild.jpg alt= bild height= 200 width= 150 ></img> Denna tagg specificerar att det som följer är en bild och de olika attributen anger filens namn samt storlek. Andra taggar har varken innehåll eller attribut. Se raden nedan <br /> Taggar som saknar innehåll kan man avsluta på ett snabbare sätt som vi just sett. Ska vi vara konsekventa så ska vi ju avsluta taggen på följande sätt:

5 <br></br> Men då många taggar saknar innehåll så har man gjort det enklare genom att tillåta avslut på ett kortare sätt <br />. På samma sätt skulle man alltså även kunna avsluta den föregående bild-taggen: <img src= bild.jpg alt= bild height= 200 width= 150 /> Vilket man väljer är en smaksak och kommer inte att påverka webbsidans utseende. De taggar som marker upp ett dokument kommer inte att visas när man öppnar filen I en webbläsare. Internet Explorer kommer att visa ovanstående HTML-fil på följande sätt:

6 Den senaste standarden XHTML 2.0 HTML, språket som används för att strukturera information på webbsidor, skapades i början av 90-talet. Allteftersom innehåll och utseende har blivit mer avancerat än tidigare så har webbläsare och HTML utvecklats. Den sista versionen av HTML heter 4.01 och efter det så infördes istället XHTML. Det är inga större skillnader mellan de olika versionerna, men det kan vara bra att känna till följande: Alla element och attribut skrivs med små bokstäver Värden måste ligga inom citationstecken Alla element måste avslutas korrekt Element får inte ligga om lott, dvs om ett element ligger inom ett annat element så måste det inre elementet avslutas innan det yttre avslutas Att konstruera webbsidor Webbsidor kan man konstruera på två olika sätt. Antingen så använder man någon form av verktyg eller också skriver man all kod själv. Fördelen med att använda verktyg är att man inte behöver känna till HTML-koden, utan man kan koncentrera sig på själva innehållet och utseendet. I många verktyg tillåts man arbeta på båda sätten. Exempel på vanliga vertyg för att skapa webbsidor är Macromedia Dreamweaver och Microsoft Frontpage. Det finns dessutom en hel del andra program, ex ordbehandlaren Microsoft Word, som ger möjlighet att skapa hemsidor. På den här laborationen kommer Du att skriva koden själv i syfte lära dig grunderna i HTML. Då man kodar webbsidor på egen hand kan man använda vilken texteditor som helst. Från de enklare editorerna såsom anteckningar (som finns med i alla Windowsdatorer) till mer avancerade editorer som på olika sätt kan underlätta kodskrivande och publicering. Tips! Om man, av någon anledning, vill se hur en webbsida är uppbyggd så kan man klicka med höger musknapp och välja alternative Visa källa (eller liknande beroende på webbläsare, version och språk). Då öppnas ett nytt fönster innehållande den kod som webbsidan utgörs av. Publicering För att göra Din webbsida tillgänglig på Internet så måste Du placera Dina filer på en sk webbserver. En webbserver är en dator vars innehåll är tillgängligt på Internet. Som student har Du ett portalkonto. Det är ett villkor för att Du ska kunna logga in på Mittuniversitetets datorer. Till detta konto följer även ett lagringsutrymme, där Du kan lagra Dina egna filer. På detta lagringsutrymme finns en mapp som heter public_html. Allt innehåll i denna mapp är faktiskt tillgängligt på Internet.

7 Om du öppnar utforskaren och kollar i din mapp så ser Du katalogen public_html. Till en Internetuppkoppling hör oftast både e-postadresser och en begränsad mängd lagringsutrymme på en webbserver. Vill Du lägga upp dina filer där så kan olika leverantörer skilja sig åt. Hur man går tillväga brukar framgå av det avtal man har med sin Internetleverantör. Det finns dessutom en hel del platser som erbjuder gratis lagring på sina webbservrar.

8 Grunderna i HTML Öppna anteckningar eller din favoritredigerare och skapa ett nytt dokument. Skriv din kod och spara filen med namnet index.html. (Filer med namnen index.htm och index.html kommer att visas utan att man anger den fullständiga adressen dit. De flesta webbservrar är inställda på att visa dessa filer om man inte explicit anger filnamn. Spara filen i mappen public_html på ditt studentkonto. Om Du nu öppnar Internet Explorer och anger URL till din mapp så kommer webbläsaren att bearbeta och visa sidan. där du istället för xxxxnnnn anger ditt kontonummer. <html> När du har öppnat din redigerare och har ett stort vitt tomrum framför dig där du skall skapa din första HTML-fil skall du börja med att skriva taggen <html>. Det är det första du alltid skall skriva i alla dina dokument, det är ett sätt för webbläsaren att förstå att det på följande rader är HTML-kod. Nästan alla kommandon som man skriver går också att "stänga av" dvs få dem att inte längre utföra den funktion som de är till för. För att stänga av ett kommando skriver du det igen på det ställe där du vill att det skall sluta fungera, du lägger också till ett snedstreck (slash, shift + 7) efter första taggen, så här: </ html>. Det sista du skall göra i alla dina dokument är att avsluta HTML-språket genom att stänga av det på det sätt som jag nyss beskrev för dig, alltså: </html>. Om du nu har gjort rätt skall ditt dokument se ut så här: <html> </html> Mellan dessa två taggar skall du nu skriva all övrig kod. <head> Man kan även komplettera sina sidor med en head. I denna tagg anger man vilka egenskaper dokumentet har såsom titel och vem som är författare. Efter att ha skrivit <html> skall vi nu lägga till ett element som kallas för <head>. Mellan <head> och </head> skall vi sedan lägga till ytterligare ett flertal andra element, som kommer att förse dokumentet med viktig information. För att fortsätta skall ditt dokument nu se ut så här: <html> <head> </head> <body> </body> </html> head är alltså endast ett element där man placerar andra element emellan.

9 <title> Titeln är förmodligen det mest inkluderade element i <head>. Elementet ser ut så här: <title> och stängs av så här: </title>. Titeln har inga attribut utan det som du skriver mellan här, är det som kommer att visas uppe i namnlisten på din webbläsare. Om man inte inkluderar en titel kommer endast filens namn att visas i namnlisten på webbläsaren. Ex: <head> <title>min första hemsida med en titel</title> </head> <body> Denna tagg låter dig bl a bestämma över vad det skall vara för färg på text, länkar och bakgrund, med det här kommandot kan du också infoga bilder som bakgrund och bestämma om ditt dokument skall ha en scroll eller hur stora marginaler det skall vara i kanterna. För att åstadkomma alla numera upprabblade inställningar krävs det ett flertal olika underkommandon som du skall ange olika värden i. body är, precis som <html>, en huvudtagg som måste finnas med i alla dokument för att du skall kunna ha kontroll över vissa formateringar. body behöver därför också stängas av. Det gör du alltid näst sist i alla dina dokument, dvs alldeles innan </html>. Börja därför alltid i dina dokument att skriva så här: <html> <body> </body> </html> Vi skall nu nedan gå igenom en del underkommandon/attribut som finns tillgängliga i body-taggen. bgcolor Denna låter dig bestämma vad det skall vara för färg på bakgrunden i dokumentet, för att ange färg kan du antingen ange en särskild färgkod för exakt nyans på en färg, eller så kan du skriva färgens namn på engelska, t ex "black" eller "white". Ex: <body bgcolor="black"> Genom att skriva så här kommer bakgrunden i webbläsaren att bli helt svart. text Det här bestämmer vilken färg texten skall ha, tänk på att du alltid bör välja en färg som skär sig bra med bakgrundsfärgen, om du exempelvis har valt svart som bakgrundsfärg måste du välja en ljus färg på texten för att den skall synas bra i dokumentet. Ex: <body text="white"> När du skriver som ovan kommer all text i dokumentet att vara vit. link Link betyder länk, och representerar färgen på alla länkar i dokumentet. Ex: <body link="blue"> Detta indikerar att alla länkar kommer att ha blå färg.

10 vlink Vlink betyder "visited link" (man har klickat på den innan) och bestämmer vad det skall vara för färg på besökta länkar. Ex: <body vlink="pink"> Ovanstående kod betyder att alla länkar som man klickar på kommer att byta färg till rosa. alink Alink betyder "active link" (aktiv länk) och aktiveras när någon håller musknappen intryckt på en länk i dokumentet. Ex: <body alink="red"> Detta betyder att alla aktiva länkar kommer att byta färg till röd. background Med denna tagg kan man infoga en bild som bakgrund över hela dokumentet, om du exempelvis väljer att infoga en liten bild som kanske inte är större än tjugo gånger tjugo pixlar, kommer denna bild att ritas upp flera gånger över hela dokumentet tills den täcker hela ytan. Du kan också infoga en stor bild som bara skall ritas upp en gång, alla bilder som infogas ritas alltid upp jämte varandra tills de täcker all synlig yta. Ex: <body background="bakgrundsbild.gif"> Tänk på att du bara kan infoga bilder i GIF-, JPG- och PNG-format. Alla dessa kommandon kan alltså rymmas i body-taggen. Den skulle kunna se ut såhär: <body bgcolor="black" text="white" link="blue" vlink="red" alink="pink" background="bild.jpg" > Länkar Du kan skapa länkar både inom ditt egna dokument och till andra dokument. <a> a står för "anchor" eller "ankare" på svenska, med denna tagg kan man länka mellan olika sidor och även till och från olika ställen på samma sida. Ankaret används alltid då du skall länka någonstans, oavsett om du skall länka med vanlig text eller med bilder. Kommandot tillsammans med dess underkommandon är mycket lätthanterligt och mycket användbart. Ankaret kräver dock minst ett underkommando för att kunna fungera eller rättare sagt kunna fylla någon funktion. Vi skall titta närmare på de fem viktigaste och mest användbara underkommandon som hör till ankaret. Med ankaret kan du länka både till enskilda filer som hör till din egen sida, eller till helt andra webbplatser. När du gjort alla inställningar i ankaret och skrivit ut ändtaggen (>), skriver du sedan länktexten, dvs den som kommer att synas, eller så infogar du en bild, när du inte längre vill att materialet skall länka mer eller skall länka någon annanstans avslutar du ankaret genom att skriva endast </a>

11 href För att skapa en länk måste du inkludera detta attribut, när du gjort det skriver du sedan in adressen. När det är klart lägger du till länktexten, dvs det som du vill skall synas i webbläsaren, länktexten behöver inte alls vara samma som adressen. Ex: <a href=" här för att komma till Google</a> eller <a href="index.html">klicka här för att gå tillbaka till huvudsidan</a> Dessa två länkar aktiveras i webbläsaren då man klickar på dem och i webbläsaren ser de ut så här: Klicka här för att komma till Google eller Klicka här för att komma tillbaks till huvudsidan Det är även möjligt att ha länkar inom samma dokument. Detta kan vara användbart när du vill göra en innehållsförteckning eller liknande. <a href="#nfo">info</a> talar om för användaren att det finns information längre ned på sidan. För att hoppa till det ankaret skriver du <a name="nfo">dit dit du vill hoppa Som du ser står länktexten inte inom taggarna utan skrivs istället mellan start- och slutkommandot. Om du exempelvis vill att det är en bild som skall länkas istället infogar du bara bildkommandot istället för länktexten, glöm bara inte att avsluta ankaret med </a> <a href="../index.html"><img src="bild.jpg" border="0"></a> Om man skriver../ framför länken medför det att du hoppar upp ett steg i mappstrukturen. Om du skall länka till en sida som ligger på ditt eget konto kan detta sätt vara att föredra. Glöm inte att skriva </a> efter bildkommandot. Man kan också få ankaret att utföra andra saker med hjälp av href, du kan bl a få den att starta ett e-postprogram med förbestämd adress ifylld. Ex: <a href="mailto:adress@server.se">skicka brev till mig</a> När du skriver så här kommer webbläsarens e-postprogram att startas med den adress du nyss fyllde i. Vill du dessutom att brevets ämne skall vara förbestämt lägger du till?subject=. Ex:

12 <a >Kontakta mig</a> När någon klickar på en länk som ser ut som ovan kommer både e-postadress och brevets ämne att vara förbestämt och ifyllt. Texthantering Det finns mycket man kan göra med texter på en hemsida. Nedan finns några saker presenterade. <h?> h står för "heading", vilket betyder rubrik eller överskrift. Du anger med detta kommando hur stor stil du skall ha på dina rubriker och även vanliga texter. Att använda heading är det enklaste och mest simpla sätt att bestämma hur stor stil du skall ha på din text. De olika storlekarna ser ut så här: <h6>rubrik 6</h6> <h5>rubrik 5</h5> <h4>rubrik 4</h4> <h3>rubrik 3</h3> <h2>rubrik 2</h2> <h1>rubrik 1</h1> Kom ihåg att så fort du vill att storleken på texten skall upphöra eller bytas stänger du först av den 'gamla' storleken genom att skriva kommandot igen och sedan skriva önskad stil på nytt. align En annan fördel är att du kan lägga till en marginaltagg i varje H, där du kan bestämma till vilken marginal texten skall vara justerad. I align kan du välja mellan tre justeringar, till vänster (left), till höger (right) och centrerad (center). <h4 align="right">denna text ligger till höger</h4> <center> Med center centrerar du texten. Ex: <center>den här texten blir centrerad</center > Ser ut så här: Den här texten blir centrerad

13 <p> Betyder paragraf. När man använder kommandot är det ungefär samma sak som att trycka på enter två gånger i en ordbehandlare. Det här kommandot behöver du vanligtvis inte stänga av. Enda gången du behöver 'stänga av' P är då du marginaljusterar med align. Mer om detta längre ner. Den vanligaste användningen av P är att bara skriva just <p>, detta gör du varje gång du vill att en styckeindelning skall ske i din text. p används så här: Stycke ett <p> Stycke två <p> Stycke tre I webbläsaren ser ut så här: Stycke ett Stycke två Stycke tre  Med kommentar i ett HTML-dokument menas att texten du skriver mellan kommentartaggarna inte kommer att påverka den övriga koden i dokumentet. Du använder alltså kommentarer till att skriva små meddelanden till dig själv, bara för att vid senare tillfällen kunna hitta bättre i dokumentet då det blir dags att ändra koden. Ex:

14 <b> b står för bold och betyder fetstil, du använder med andra ord denna tagg då du vill att texten skall visas som fet i dina dokument. Ex: <b>den här texten blir fet</b> Den här texten blir fet <i> i betyder Italic, dvs kursiv stil, du använder taggen då din text skall vara kursiv. Ex: <i>det här är kursiv stil</i> Det här är kursiv stil <u> u betyder underline, eller understruken text, för att tillämpa det gör du så här: <u>den här text blir understruken</u> Den här text blir understruken <br> br betyder Line Break, fungerar i praktiken på samma sätt som ett enterslag i en ordbehandlare, dvs den byter rad åt dig. Ex: Rad 1<br /> Rad 2<br /> Rad 3<br /> Rad 1 Rad 2 Rad 3 <font> font är idag det mest effektiva, enklaste och bästa sättet att hantera saker såsom storlek, typsnitt och färg. För att font skall få någon funktion måste du inkludera minst en undertagg. Om du inte använder font på dina sidor kommer webbläsaren automatiskt att skriva all text med typsnittet Times New Roman, stil 12. Alla font-taggar kan avslutas, så här: </font>. Du använder alltså font så här: <font>text som du vill skall formateras med font.</font> När du stänger av font formateras texten utanför font med standardvärdena.

15 size Med size bestämmer du vilken storlek du vill ha på texten, du kan ange värden mellan 1 och 7, där ett är det minsta och 7 det största. Du kan också sätta ett minus- eller plustecken framför siffran, för att på så sätt få större variation. Ex: <font size="3">denna text har fontsize 3</size> <font size="+3">å denna text har fontsize +3</font> Med följande formatering blir resultatet så här: Denna text har fontsize 3 Denna text har fontsize +3 face Med face anger du vilket typsnitt du skall ha på din text, du kan använda alla typsnitt som är standard i Windows, plus de som du själv har installerade på din dator, dessvärre kan inte andra se dessa typsnitt, ifall de inte har de installerade på sin dator. Därför bör man endast använda Times New Roman, Arial, Arial Narrow och Courier New. Typsnitten Comic Sans och Verdana, är visserligen inte standard, men alla som har Microsoft Office installerat har dessa fonter. För att ange vilket typsnitt du skall ha skriver du bara namnet på det, utan några sökvägar eller liknande. Ex: <font face="times New Roman">Texten här är Times New Roman</font> Texten här är Times New Roman Du kan också rangordna olika typsnitt som skall användas, dvs, om inte typsnitt nummer ett, som du tycker passar bäst finns på besökarens hårddisk, kan den använda ett annat mer vanligt typsnitt, som tex Arial eller Times New Roman. För att rangordna skriver du mellan typsnitten endast ett komma (,) och ett mellanslag. Ex: <font face="verdana, Arial, Times New Roman">Nu presenteras eventuellt Verdana</font> Nu presenteras eventuellt Verdana Beroende på om du har Verdana installerat på din dator eller inte så kommer du nu att se texten med något av de tre typsnitten vi angav ovan. Dvs, finns inte Verdana, letar den efter Arial, finns inte den tar den Times New Roman osv. Du kan rangordna hur många fonter som helst.

16 color Som du säkert redan listat ut använder du denna tagg till att bestämma vilken färg du vill ha på texten. Du kan antingen använda RGB-koder eller helt enkelt skriva färgens namn på engelska. Ex: <font color="blue">den här texten är blå</font> Den här texten är blå Bildhantering För att göra sin hemsida snyggare kan det vara en idé att lägga in bilder. <img> Förmodligen en av de mer vanliga elementen i HTML. När en bild skall infogas använder du detta. IMG är som du säkert redan listat ut en förkortning för image, eller bild. För att infoga en bild måste du använda minst en attribut till för att det skall fungera. src Denna attribut är obligatorisk, src står för source, eller källa. Här skriver du in namnet på den bild som du vill infoga, plus eventuell sökväg. Ex. <img src="bild.gif" /> align Om du exempelvis placerar en bild mitt i en text, kontrollerar du var någonstans i texten som den skall ligga med hjälp av detta. Du kan välja mellan följande: left [till vänster] right [till höger] top [överst] texttop [allra överst i ett helt textstycke] middle [i mitten] Ex: <img src="bild.gif" align="left"> alt Alt betyder alternate, dvs alternativ. Med hjälp av denna attribut bestämmer du vad som skall poppa upp då man drar markören över bilden. Den här texten kommer också fram innan bilden är laddad. Ex.

17 <img src="bild.gif" alt="alternativ text" /> Resultat (håll markören över bilden): width & height Självklart kan du också bestämma hur bred och lång bilden skall vara. Om du inte använder dessa attribut infogas bilden exakt så stor som den är. Det finns dock en anledning till att använda dessa, börja med att ta reda på exakt hur många pixlar hög och bred bilden är. Ange nu dessa värden. Varför man skall ange hur stor bilden är, fast den fixar det automatiskt, beror på att innan bilden laddas så skall det komma fram en ruta som är reserverad för bildens plats. På så sätt slipper webläsaren rendera sidan på nytt, när bilden är färdigladdad. Ex. <img src="bild.gif" width="50" height="50"> border Då du länkar en bild får du automatiskt en två pixlar bred linje runt bilden. För att få bort denna anger du värdet noll här. Vill du ha en gräns, även om bilden inte är länkad, anger du bara önskat värde. Färgen på linjen är densamma som på texten eller som på de övriga länkarna. Ex. <img src="bild.gif" border="5"> Listor Här kommer vi att gå igenom hur du skapar siffror- och punktlistor. För att infoga en punkt i ett dokument skriver du helt enkelt <LI> där du vill att punkten skall uppenbara sig. För att få punkterna indragna en bit, eller rättare få flera punkter att hänga hop använder du <ul> Betyder unordered list vilket skulle kunna vara synonymt med punktlista. T ex <ul> </ul> <li>punkt 1 <li>punkt 2

18 Punkt 1 Punkt 2 Du kan också skapa nya listor i en annan lista, det viktiga är bara att du håller reda på hur många <ul> som du har startat. Här är ett exempel på hur flera listor ihophängande listor kan se ut: <ul> <li>punkt 1 <ul> <li>del A <li>del B </ul> <li>punkt 2</li> <li>punkt 3 </li> </ul> o Punkt 1 Del A Del B o Punkt 2 o Punkt 3 <ol> Om du hellre vill ha listor ordnade med siffror byter du ut <ul> till <ol> istället. ol står för ordered list Ex. <ol> </ol> <li>första punkten <li>andra punkten Ger resultatet 1. Första punkten 2. Andra punkten

19 Dokumenthantering Texten kan du separera och placera mha olika kommandon. Det bästa sättet att styra text och bilder är att använda tabeller. <table> Det enklaste sättet att snyggt kunna placera sina objekt är att använda sig utav tabeller. Att skapa tabeller är absolut inget som är svårt, vilket också du kommer att komma underfund med efter att ha läst en bit i den här delen. Det första man gör då man skall skapa en tabell är att skriva just <table>, och avsluta med </table> då tabellen är slut. Börja alltså med att skriva: <table> </ table > Observera att vi inte visar resultaten av koden ännu, eftersom det krävs minst två ytterligare element för att det skall bli en synlig tabell. border Bestäm med denna hur tjock linjen runt tabellen skall vara. Det vanligaste är idag att man ger den värdet noll, dvs osynlig. Ex: < table border= 0 > </ table > cellpadding En tabell kan innehålla massor av olika celler, eller sk rutor. Med hjälp av cellpadding bestämmer du hur mycket fri marginal som skall lämnas fri i varje ruta. Du anger värdet i antal pixlar. Ex: < table cellpadding= 3 > </ table > cellspacing Du anger här hur mycket mellanrum som skall skapas mellan varje cell/ruta. Värdet anges i antal pixlar. Ex: < table cellspacing= 0 > </ table >

20 width Anger hur bred tabellen skall vara. Antingen i antal pixlar eller i procent, som anpassar sig efter hur mycket plats som finns ledigt. Ex: < table width= 300 > </ table > height Anger höjden på tabellen. Antingen i antal pixlar eller i procent, som anpassar sig efter hur mycket plats som finns ledigt. Ex: < table height= 300 > </ table > align Här avgör du var någonstans i webläsaren som tabellen skall placeras. Dvs antingen till höger eller till vänster. (RIGHT/LEFT). < table align= right > </ table > valign Bestäm om tabellen skall placeras längst upp, ner eller i mitten av sidan. (top/bottom/center). Ex: < table valign= center > </ table > bgcolor Fungerar på samma sätt som då du använder attributen i body, dvs du anger bakgrundsfärgen på tabellen. Antingen med hjälp av de engelska namnen på färgerna, eller med hexkoder. Ex: < table bgcolor= blue > </ table > bordercolor Om du har borders, eller synliga linjer som markerar tabellen och rutorna, kan du ange vilken färg de skall ha, med hexkoder eller med de engelska namnen på färgerna. Ex. <table border= 2 bordercolor= blue > </table>

21 background Om du vill infoga en bild som bakgrund i hela tabeller använder du detta attribut. Ex. <table background= bild.gif > </table> <tr> Nu skall vi titta på det första obligatoriska elementet som måste vara med i en tabell för att det skall kunna bli en tabell. TR representerar en rad som kan innehålla ett obegränsat antal celler. För varje ny rad man skall ha i en tabell lägger man till en TR. Vill man då ha en tabell som innehåller tre rader skriver man följande: <table> <tr></tr> <tr></tr> <tr></tr> </table> Vi visar inte ännu resultatet eftersom det krävs ytterligare ett element för att det skall fungera, men vi nöjer oss med detta så länge. Det du ser ovan representerar alltså en tabell som innehåller tre rader. bgcolor Bestämmer bakgrundsfärgen på just den rad som du placerar den i. En tabell med två rader kanske skall ha olika färger. Då skriver du så här: <tr bgcolor= blue ></tr> <tr bgcolor= red ></tr> background Fungerar på samma sätt som då du placerar den i table, fast den infogar en bakgrundsbild i raden enbart, istället för i hela tabellen. Ex. <tr background= bild.gif >

22 <td> Med hjälp av table, tr och td kan du nu skapa fullständiga tabeller. Vi börjar med ett exempel och förklarar sedan vad vi gjort. Ex. <table border= 2 > <tr> <td>ruta 1</td> <td>ruta 2</td> </tr> <tr> <td>ruta 3</td> <td>ruta 4</td> </tr> </table> Det vi nu skrivit kommer att skapa en tabell som ser ut så här. Resultat R u t a 1 R u t a 2 R u t a 3 R u t a 4 Som du ser hittar vi två rader, som är skapade med tr och två rutor i varje rad som är skapade med td. Tänk på att du måste ha lika många rutor i varje i varje rad för att det skall fungera. Dvs lika många td per tr. valign Bestäm var någonstans innehållet i raden skall dras vertikalt. Alternativen är följande: top, middle, bottom och baseline. Dvs överst, mitten, botten och baslinjen. align Bestäm var innehållet skall dras horisontellt. Alternativen är följande: left, center och right. Dvs vänster, mitten och höger. width Självklart kan du också bestämma hur breda rutorna skall vara. Det gör du med width, du anger bredden i pixlar. Ex.

23 <td width= 300 > Ovanstående ruta kommer alltså att vara 300 pixlar bred. height På samma sätt som du kan ange bredden kan du också ange höjden. Värdet anger du i antal pixlar. Ex. <td height= 30 > Ovanstående kod representerar en ruta som är 30 pixlar hög. bgcolor Bestämmer bakgrundsfärgen på just den ruta som du placerar den i. En tabell med två rutor kanske skall ha olika färger. Då skriver du så här: <td bgcolor= blue ></td> <td bgcolor= red ></td> background Fungerar på samma sätt som då du placerar den i table, fast den infogar en bakgrundsbild i rutan enbart, istället för i hela tabellen. Ex. <td background= bild.gif > colspan I tidigare stycken sa vi att man alltid är tvungen att ha lika många rutor på alla raderna i en tabell. Vill man exempelvis ha olika antal rutor i raderna löser man det med hjälp av colspan. Vi tar först ett exempel och tittar sedan på hur det fungerar. Ex. <table border= 2 > <tr> <td>ruta 1</td> <td colspan=2>ruta 2, med två rutor under sig på nästa rad</td> </tr> <tr> <td>ruta 3</td> <td>ruta 4</td> <td>ruta 5</td> </tr> </table>

24 u t Ruta 2, med två rutor under sig på nästa rad u t Ruta 4 Ruta 5 Som du ser kan du infoga colspan i hur många rutor som helst, och ange vilket antal extrarutor som helst. rowspan Fungerar precis på samma sätt som colspan, men med skillnaden att man kan infoga olika antal rader i olika rutor på samma rad. Vi tar ett exempel: <table border= 2 > <tr> <td rowspan=2>ruta 1, som har en extra rad med två rutor i</td> <td>ruta 2, övre ruta 1</td> <td>ruta 3, övre ruta 2</td> </tr> <tr> <td>ruta 4, nedre ruta 1</td> <td>ruta 5, nedre ruta 2</td> </tr> </table> Ruta 1, som har en extra rad med två rutor i Ruta 2, övre ruta 1 Ruta 4, nedre ruta 1 Ruta 3, övre ruta 2 Ruta 5, nedre ruta 2 Som du ser, samma princip som colspan, fast på andra hållet.

25 <hr> Presenterar även ett sätt att "bara" infoga ett vågrätt sträck på skärmen. Hr betyder "horizontal rule", dvs horisontell linje, du använder alltså denna tagg för att dra horisontella linjer i dina dokument. Användningen är ganska simpel, genom att skriva endast hr, får du ett streck draget tvärs över dokumentet, med alla standardvärden inställda. Denna tagg använder du lämpligen längst ner på alla dina sidor och under detta streck skriver du exempelvis vem som skrivit dokumentet eller liknande. Du kan också använda linjen mellan olika stycken i ett dokument. Ex: Skriv så här: <hr /> Resultatet blir: size När du infogar ett streck tvärs över dokumentet blir det automatiskt två punkter brett, detta kan du med hjälp av size välja själv istället, alltifrån en punkt och uppåt. Ex: <hr size="1" /> width Alla streck som saknar denna inställning blir automatiskt lika breda/långa som dokumentet är på bredden, med width ställer du in hur långt du vill att strecket skall vara, detta anger du vanligtvis i antal punkter, men du kan också ange det i procent, dvs om du skriver 50% kommer linjen att vara hälften så lång som bredden på dokumentet. Ex: Med punkter: <hr width="200" /> Med procent (%) <hr width="30%"> align Om du inte använder denna undertagg kommer alla dina streck som infogas att vara centrerade, eftersom det är standardinställningen. Om du istället vill att strecket skall ligga till vänster eller höger anger du i denna attribut left eller right. Ex: <hr align="right" WIDTH="40" />

26 noshade Alla linjer infogas med en inställning kallad shade, dvs skugga, om du inte vill att linjen skall vara skuggad utan endast vara dragen som ett vanligt streck, lägger du bara till noshade. Noshade har inga värden, denna har du bara med eller inte. Ex: <hr noshade size="1">

27 Uppgifter Nu när de vanligaste taggarna är presenterade är det dags att pröva sina kunskaper rent praktiskt. Nedan finns ett antal uppgifter som borde gå att lösa mha labbhäftet. Ett tips är att du använder samma dokument hela tiden. Detta gör att du i slutet av alla övningar kanske har fått till en snygg och trevlig hemsida om dig själv. Du hittar till din egen hemsida genom att skriva in adressen på Grundläggande begrepp Skapa ett HTML-dokument enligt standardmallen, dvs <html> <head> <body> med motsvarande sluttaggar. Lägg till en titel på sidan Skriv in en text som handlar om dig själv. Det kan vara dina fritidsintressen vad du läst tidigare eller kanske vad du vill bli när du blir stor Publicera hemsidan och studera resultatet i en webbläsare Skapa en passande rubrik, centrera densamma och se till att den skiljer sig från den övriga texten. Radbryt texten på lämpliga ställen. Prova att göra detta både med <p> och <br> taggarna och se vad det blir för skillnad Ändra bakgrundsfärgen till någon du tycker är snygg Ändra textfärgen så att din text syns bra gentemot den nya bakgrundsfärgen Skapa länkar Skapa en länk som leder till Mittuniversitetet ( länknamnet skall vara Mittuniversitetet Skapa en länk som leder till institutionens hemsida. Adressen dit är Skapa ett nytt HTML-dokument. Detta kan innehålla vad du vill. Kanske kan det vara en sida med personliga fakta. Längd, vikt (om du vågar), hårfärg osv Spara sidan på webbservern. Du får själv hitta på vad den skall heta Koppla ihop dina två sidor med länkar Lägg till information om när sidan skapades och när den senast uppdaterades. Denna text kan med fördel vara mindre än löptexten Skapa en innehållsförteckning som hoppar inom samma dokument. För att detta skall ge någon effekt kan det vara bra om du skriver ganska mycket text på hemsidan Bildhantering Lägg in en bild på dig själv. Om du inte har någon bild på dig själv, vilket kanske är troligt, får du välja en annan bild. Surfa ut på nätet och leta efter en som du tycker liknar dig. Spara bilden genom att klicka på den men höger musknapp och välj därefter save image as

28 Placera bilden intill texten och försök att få texten att ligga till höger om bilden Lägg in en bild som bakgrund i ditt dokument. Det bästa sättet är återigen att surfa på nätet och leta efter en bild som du tycker är fin. Bakgrundsbilder sparar man på ungefär samma sätt som andra bilder, dvs genom att högerklicka på bakgrunden och sedan välja save background as Lägg in en bild i dokumentet som fungerar som en länk till en valfri sida. Se till att bilden inte får en border (ram) Lägg till ett sträck som delar av dokumentet i lämpliga delstycken Blandade övningar Skapa en rankinglista över dina favoritglassar. Ge listan en rubrik Leta reda på en bild över en glass och lägg in den på hemsidan Tabeller Skapa en tabell som innehåller ditt för- och efternamn i två separata kolumner Lägg till en rad där du anger telefonnummer Ändra storleken så att den sträcker sig över hela skärmbredden Centrera ditt förnamn och högerjustera ditt efternamn Komplettera uppgifterna med din adress Lägg till bilden som skulle föreställa dig (se punkt 16) i en kolumn och lägg texten i en annan kolumn Bild Förnamn Efternamn Adress Telefon Laborera med de olika inställningarna för border osv Gör så att rubriken hänger ihop med tabellen. Rubriken bör vara stor och sträcka sig över alla kolumner Rubrik Bild Förnamn Efternamn Adress Telefon