En lathund i XHTML

1 av 4
HTML
Redan på 1940-talet funderade Vanevar Bush på hur man kunde länka olika dokument, böcker osv. med
varandra. Han ritade Memex – ett skrivbord som fungerade som ett slags mekaniskt World Wide Web. I slutet
på 1960-talet skapades Internet, då för militära och akademiska ändamål. Inte förrän ca. 1994 kunde man enas
om gemensam standard för Internet - TCP/IP - varvid Internet fick sin explosionsartade utveckling. Ett sätt att
använda (en ”tjänst” på) Internet, var World Wide Web (WWW), som utvecklades av Sir Tim Berners Lee på det
schweiziska forskningsorganet CERN. Standarden blev http (hyper text transfer protocol) och mest
kännetecknande egenskap var möjligheten att klicka på en [hyper]länk (ett ord, eller en bild) och därigenom
hämta (”gå till”, ”surfa” till) en annan sida länkad till den ursprungliga. Kodspråket för att skriva webbsidor
blev HTML – Hyper Text Markup Language, med vilket webbsidans textinnehåll märks upp med tags (märkord,
taggar) som bestämmer sidans struktur och format. En webbplats (website, webbsajt) består av flera
webbsidor. Hemsida används ofta i svenskan felaktigt som synonymt med webbsida och betyder egentligen
första sidan i en webbplats. Ett annat ord är startsida, som också kan betyda den webbsida man valt till att
komma upp automatiskt när man startar sin webbläsare (browser), alltså programvaran för att visa webbsidor.
I skrivande stund är Internet Explorer, Firefox, Opera och Safari de vanligaste webbläsarna. De visar ibland
sidor olika, beroende på i vilken utsträckning de stöder standarder som XHTML och CSS. Microsoft har
också/har haft egna märkord, som inte ingår i standarder.
XHTML
XHTML är en striktare och renare form 1 , en vidareutveckling, av HTML som bl.a. innebär att alla märkord
måste skrivas med gemener och stängas och att formateringen inte görs i XHTML-koden utan i CSS (se
särskild lathund).
Stomme
Grundstrukturen i en XHTML-sida kan se ut så här, där den markerade delen av koden utgör den s.k.
Document Type Declaration (DTD), som talar om för webbläsaren vilken typ av kod som används.
Chocolate World
Förutom Strict finns Transitional, ung. övergångsvariant,
1 XHTML Tutorial. http://www.w3schools.com/xhtml/default.asp. 26 november 2007
29 mars 2008, 17:42

och Frameset, för webbplatser som använder frames (ramar).
2 av 4
Märkord
Tags (taggar, märkord) består av starttagg, sluttagg, innehåll, och eventuella attribut med värden, exempel:
Telia
Starttagg
Attri-
but
Värde Attri-
but
Värde Inne-
håll
En del märkord har inte sluttagg, men måste ”stängas” ändå. Det görs som i exemplet nedan:
Nedan följer utvalda märkord för vår kurs:
Kategori Märkord Kommentarer Exempel
Sidstruktur Anger helt enkelt om att det är en HTML-sida.
Får hoppas över i HTML, men krävs i
XHTML.
Sidstruktur ”Sidhuvud”. Innehåller bl.a. och
(se nedan).
Sidstruktur ”Länk”. För att länka till ex. stilmall Placeras
inuti .
Sidstruktur Metadata. Information om sidan, t.ex.
nyckelord för sökmotorer. Placeras inuti
.
Sidstruktur Titel (visas högst upp i webbläsarfönstret)
Sidstruktur ”Sidkropp”
Sidstruktur Delar upp webbläsarfönstret i flera
”fönsterrutor” och kan användas för sidmallar,
där innehållet i vissa frames alltid är likadant
(t.ex. navigationskolumn, banner) men
varierar i en annan frame (t.ex. olika sidor för
huvudinnehållet).
Frames var vanligt förekommande i webbens
begynnelse, men har allt mer ersatts av andra
tekniker. Därför behöver du inte behärska
frames i denna kurs.
Textstruktur Stycke
Textstruktur Radbrytning. Byter rad i ett stycke.
29 mars 2008, 17:42
Slut-
tagg

3 av 4
Kategori Märkord Kommentarer Exempel
Textstruktur Rubrik på översta nivån. Andra rubriknivåer: , osv.
Textstruktur Ung. avsnitt. Indelning av texten på högre
nivå än stycke. En kan bestå av flera
.
Textstruktur Ung. omfattning. För att avgränsa t.ex. delar
av -elementet
Textredigering
å
Å
ä
Ä
ö
Ö
Specialtecken
å
Å
ä
Ä
ö
Ö
Specialtext Tabell: grundstruktur
Specialtext Tabellrad
Specialtext Tabelldata
29 mars 2008, 17:42
Kan användas för layout (positionering).
Se häftet om CSS.
Se häftet om CSS för formatering av delar
av ett stycke.
Kol. 1
Kol. 2
Specialtext Punktlista (unordered list)
Mörk
Ljus
Specialtext Listelement (list item) Se ovan.
Specialtext Nummerlista (ordered list)
Mörk
Ljus
Specialtext Flernivålista (definition list)
H0
Skala
1:87
N
Skala
1:160
Specialtext Definition data. Listelement i flernivålista. Se ovan.
Bilder/Grafik Bild (image). Attributet alt möjliggör text
som alternativ till bilden och är obligatoriskt i
XHTML.
Multimedia Ej standard enl W3, men vanlig och fungerar i
både IE och NN.
• Mörk
• Ljus
1. Mörk
2. Ljus
H0
Skala 1:87
N
Skala 1:160
Multimedia Standard enl W3, men fungerar inte i alla webbläsare. Uppfattas inte sällan som svår att lära
sig. I vår kurs lär vi oss i stället.
Interaktivitet Hyperlänk. Det första exemplet öppnar Telias
sajt i ett nytt fönster.
Det andra exemplet länkar från en sida till ett
annat avsnitt på samma sida.
Telia
Se kapitel 5
...
Kapitel 5

4 av 4
Viktiga skillnader mellan HTML och XHTML
Märkord måste vara korrekt
kapslade
Märkord måste alltid stängas Ett stycke
Ett till stycke
Det gäller även ”tomma” element Radbrytning:
Gemener (små bokstäver) måste
användas
Ej korrekt XHTML Korrekt XHTML
lite text lite text
Horisontell linje:
Bild:
Ett stycke
29 mars 2008, 17:42
Ett stycke
Ett till stycke
Radbrytning:
Horisontell linje:
Rotelementet måste vara med
Källor
Bild:
Ett stycke
http://www.w3.org/ The World Wide Web Consortium (W3C). Utvecklar (X)HTML och andra standarder
för Internet.
http://www.w3schools.com Omfattande sajt med tutorials för flera områden.
http://www.webdesignskolan.com Omfattande svensk sajt med både bra instruktioner och hög grafisk kvalitet. Innehåller
också lektioner i Dreamweaver, Flash, Photoshop, Illustrator, Acrobat och PHP.
http://www.html.net Enkla, tydliga grunder i XHTML och CSS
http://validator.w3.org/ Validera din XHTML-kod och se om den följer standarden.