Linköpings universitet
Institutionen för datavetenskap
Kurs 725G17 - Webbpublicering : Teknik, design och kommunikation
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
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
</html>. 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">
</html>
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
Institutionen för datavetenskap
Kurs 725G17 - Webbpublicering : Teknik, design och kommunikation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="sv-se">
<head>
</head>
<body>
</body>
</html>
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).
<body>
<h1>Hej världen!</h1>
</body>
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
Linköpings universitet
Institutionen för datavetenskap
Kurs 725G17 - Webbpublicering : Teknik, design och kommunikation
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="svse">
<head>
</head>
<body>
<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>
</body>
</html>
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
Institutionen för datavetenskap
Kurs 725G17 - Webbpublicering : Teknik, design och kommunikation
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
Institutionen för datavetenskap
Kurs 725G17 - Webbpublicering : Teknik, design och kommunikation
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:
<head>
<title>Min första hemsida!</title>
</head>
Resultat
Koden ser nu ut så här (eller liknande):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="svse">
<head>
<title>Min första hemsida!</title>
</head>
<body>
<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>
</body>
</html>
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
Institutionen för datavetenskap
Kurs 725G17 - Webbpublicering : Teknik, design och kommunikation
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
