Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information om vad för sorts dokument det är. Eftersom det här är den första upgiften på en grundkurs fördjupar vi oss inte på vad allt betyder. Det räcker om man kommer ihåg att doctype talar om för webbläsaren vad det är för typ av dokument som den skall visa. För den första webborationen och i den här guiden kommer vi använda en doctype som kallas XHTML 1.0 strict och ser ut såhär: Du kan kopiera och klistra texten i in din texteditor. html Nästa steg för att bygga en webbsida är att tala om var html börjar och slutar. Det visar man genom en starttag <html> och en sluttagg. Ofta talar man om lite mer information om vad för sorts html det är i starttaggen. Vi går inte igenom i detalj vad allt betyder eftersom detta är en guide för att komma igång. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="svse"> head och body Ett html-dokument består av två delar head och body. Lite förenklat kan man säga att head innehåller information om dokumentet och body innehåller den information om det som är synligt i webbläsaren. När vi lagt in head och body så ser vårt dokument ut som såhär: 1
Linköpings universitet <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="sv-se"> h1 Nu har det blivit dags att lägga in något som syns på webbsidan. Vi börjar med en rubrik där det står Hej världen (eller något annat). <h1>hej världen!</h1> h2 och p Vi lägger till en rubrik till. <h2>välkommen till min webbsida!</h2> Om du sparar och öppnar din fil med en webbläsare kan du se att nu syns det något på sidan. En paragraf med text lägger vi också till. Det är samma mönster som tidigare ett <p> där paragrafen börjar och ett </p> där paragrafen slutar. Mycket krångligare än så här är det inte att skriva HTML. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> (Texten i paragrafen ovan är på latin och en vanlig text när man jobbar med layout, t ex för webbsidor, men inte vet exakt vad det ska vara för innehåll. Istället för att det ska vara tomt eller att skriva 2
slumpmässiga tecken så kan det vara snyggare och enklare att använda lorem ipsum-texten.) Din html-markup borde nu se ut ungefär såhär: Linköpings universitet <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="svse"> <h1>hej världen!</h1> <h2>välkommen till min webbsida!</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Publicering med FTP Nu kan vi ladda upp vår html-fil till IDA med hjälp av FTP. Ladda upp filen till katalogen www-pub. Finns det inte någon sådan katalog måste den skapas. Känns det klurigt så gå igenom övningsuppgifterna för FTP. URL för att titta på sidan blir: http://www-und.ida.liu.se/~ditt_login/ filnamn. Om ditt login är abcde123 och din fil hette index.html blir URL således: http://www-und.ida.liu.se/~abcde123/index.html När du laddat upp så kan du titta på din sida över Internet. Skillnaden mot förut är att då tittade du på en fil på din dator. Nu ligger filen på en server på IDA och är tillgänglig för alla (med internetuppkoppling). img Nu ska vi lägga till en bild. Det gör man med img-taggen. Man behöver även specificera (tala om) vad bildfilen som ska visas heter 3
Linköpings universitet och vad det är för eventuell sökväg. Man skriver också med en beskrivning av bildens innehåll eller motiv. Skapa en katalog i www-pub som heter 'images' och ladda upp en bild som du vill visa på din webbsida. Om bilden heter exempelbild.jpg så blir sedan img-taggen såhär: <img src="images/exempelbild.jpg" alt="beskrivning av bilden" /> Observera att img-taggen "stänger sig själv". h1-taggen till exempel hade en start-tag, <h1>, och en slut-tag, </h1>. Sökvägen och namnet på bilden skriver man efter src= och mellan enkla eller dubbla raka citationstecken, det vill säga ' eller ". Lite om relativa och absoluta sökvägar Sökvägen ovan är angiven på ett så kallat relativt sett. Den anger var bilden ligger relativt till var filen med html-koden ligger. Flyttar man koden kan man behöva ändra sökvägen (eller flytta filen). Man kan även ange absoluta sökvägar. Det gör man till exempel till bilder som ligger på andra servrar. Sökvägen blir då samma adress som man använder om man tittar på bilden i sin webbläsare. En absolut sökväg till bilden i exemplet ovan blir: <img src="http://www-und.ida.liu.se/~abcde123/images/exempelbild.jpg" /> a Med a-taggen så kan man länka till andra internetadresser. Vill man bygga en länk till Linköpings universitet skriver man såhär: <a href="http://www.liu.se/">länk till LiU</a> href= anger vilken adress som man länkar till. Det som står skrivet mellan > och </a> är den som skall vara synlig länktext. Länkar kan vara relativa eller absoluta. Länkar man inom sin egen webbplats brukar man ha relativa länkar. Om inte annat så för att det blir kortare adresser att skriva när man kodar. 4
title Linköpings universitet Sista steget i den här guiden är att ändra titel på webbsidan. Titeln syns inte på sidan utan är den text som står uppe i ramen på webbläsaren. Titeln sätter man med title-taggen någonstans i head-delen av htmldokumentet. Till exempel såhär: <title>min första hemsida!</title> Resultat Koden ser nu ut så här (eller liknande): <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="svse"> <title>min första hemsida!</title> <h1>hej världen!</h1> <h2>välkommen till min webbsida!</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <img src="images/exempelbild.jpg" alt="bild på LiU" /> <a href="http://www.liu.se">linköpings universitet</a> </p> Det finns några taggar till man använder för att bygga webbsidor med HTML men de är inte krångligare att skriva än de ovan. Vilka de är finns listat i kurslitteraturen. Det finns även bra guider på webben. 5
Linköpings universitet Det som ställer till mest problem är att man råkar skriva fel eller glömmer skriva en slut-tag; glömmer stänga en tag. Om man inte är van vid datorer, och även om man är det, så kan det vara svårt att hitta var det fattas ett >, " eller / eller var det finns ett för mycket för den delen. 6