HTML är ett sidbeskrivningsspråk. Från början var det tänkt att användas för vetenskapliga dokument inom forskarvärlden. Tack vare tekniker som DNS och HTTP, så kunde man skriva ett enkelt märkspråk som kunde koplla ihop ett dokument med andra. Vi kallar dessa kopplingar för länkar. HTML i sig utläses Hyper Text Markup Language. Hyper Text
i namnet står alltså för förmågan att länka, eftersom hypertext är just ett annat ord för länkning. Markup
betyder uppmärkning och det görs med speciella taggar
.
Dokumentets grundläggande delar
Ett HTML-dokument är i grund och botten ett textdokument. Det som skiljer det från andra textdokument är taggarna. Med hjälp av dessa taggar kan man dela in dokumentet i tre delar:
- Först bör man ha en så kallad doctype. Med den kan både människor och datorprogram se vilken version av HTML det rör sig om. I strikt teknisk mening är doctypen inte en del av HTML-koden, utan en instruktion som föregår den. Lägg ordet på minnet, men strunta i dess betydelse tills vidare. Minns bara att man skall ha en doctype först.
- HTML-kodens första del är dokumenthuvudet. Det
som står i huvudet kommer inte direkt att visas i webbläsarens
fönster, men kan påverka hur visningen kommer att gå
till och se ut. En tagg är obligatorisk och skall stå
först i huvudet, nämligen taggen
<title>. Det som anges där kommer att dyka upp på webbläsarens namnlist, den vanligtvis blå raden ovanför menyerna. Taggen<head>ringar in huvudet, men den föregås av taggen<html>, som ringar in hela dokumentet (utom dess doctype). - Större delen av ett HTML-dokument utgörs normalt av dess
kropp
. Denna anges med taggen<body>.
Nu kan vi med våra fyra taggar (<html>, <head>,
<title> och <body>) göra ett minimalt
HTML-dokument. Några saker du kommer se i koden nedan är
ännu inte förklarade. Vill du testa själv, så skriv
bara av dem så länge. De förklaras längre fram.
Ett minimalt dokument
<!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" lang="sv">
<head>
<title>Ett tomt dokument</title>
</head>
<body>
</body>
</html>
Skulle du titta på detta dokument i en webbläsare blir det
bara vitt. På namnlisten kommer det stå Ett tomt
dokument
, men annars har vi inte gjort något som syns
ännu. Låt oss därför lägga till några
taggar till. Här kommer några taggar till som vi kan komma
igång med:
-
<h1>som är dokumentets huvudrubrik. -
<h2>som är därpå följande underrubriker. -
<h3>som följaktligen blir ytterligare en rubriknivå ner i hierarkin. Vi pratar alltså inte om den tredje rubriken, utan den tredje nivån på rubriker. -
<p>som anger stycken (eng: paragraph).
Låt oss nu ge vårt dokument lite innehåll!
<!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" lang="sv">
<head>
<title>Ett ej längre tomt dokument</title>
</head>
<body>
<h1>Hipp hurra, ett dokument ida!</h1>
<p>
Detta är måhända det första dokument jag testat att göra, men
något skall det innehålla och här skriver jag det.
Tjosan, hejsan, o.s.v.
</p>
<p>
Här kommer det andra stycket. I denna HTML-kod finns det
också indrag i koden som markerar vilka delar som hör ihop.
De påverkar inte funktionen i sig, utan gör bara koden lättare
att läsa. Tag för vana att alltid skapa indrag i din kod. Två
blanksteg per nivå, som här, brukar vara lagom.
</p>
<h2>ännu mera info här</h2>
<p>
Där kom alltså underrubriken, och detta är ett nytt stycke. Så värst
mycket mer orkar jag dock inte skriva nu. Här blev det därför slut.
</p>
</body>
</html>
Vill du testa att göra ett doument själv så starta
anteckningar och kopiera koden ovan. Spara det du skrivit med
ändelsen html
och se till att Windows (om du använder
det) inte själv lägger på .txt
. jag har sett
åtskilliga nybörjare vars dokument heter saker i stil med
foobar.html.txt
. än så länge ser vårt
dokument också väldigt tråkigt ut.
Nybörjare ställer därför snabbt frågor som:
-
Hur kan jag byta typsnitt och/eller ändra färg och storleken på texten?
-
Hur kan jag få en annan bakgrundsfärg eller en bakgrundsbild?
-
Hur kan man centrera texten?
Just här skall du tacka din lyckliga stjärna att du läser min webbskola och ingen annan ;-) Allt för många nybörjarkurser börjar nämligen redan nu introducera taggar och andra delar av HTML-koden som kan användas för att styra just dessa saker. Men detta är inte frågor som handlar om innehåll, utan om utseende. Utseendet skall inte styras med HTML över huvud taget. En gång i tiden gjorde man det, men det var dumt och vi som jobbar med webbteknik har alla fått lida för denna dumhet. Utseende skall styras med CSS och du får ge dig till tåls. Vi kommer dit!
Attribut och element
Det som vi hittills kallat taggar kallar de mer bevandrade för element. En tagg är vad som startar och avlsutar ett element. Det kallas för start-tagg respektive slut-tagg. Ett elementet är: start-tagg + innehåll (inklusive ev. andra element) + slut-tagg.
Somliga saker vill vi kunna berätta om det som visas och till det har vi bland annat attribut. Attribut skrivs i start-taggen och i texten ovan hade vi följande exempel på attribut, vilka alla fanns på html-taggen:
-
xmlns="http://www.w3.org/1999/xhtml" -
xml:lang="sv" -
lang="sv"
Med det första av dessa attribut angav vi att dokumentets
namnrymd är http://www.w3.org/1999/xhtml
.
Glöm tills vidare ordet namnrymd, utan lägg i stället till
hur attributet skrevs. Skriv alltid attribut så här:
attributnamn="attributvärde". Du bör alltid ha citationstecken
runt attributvärdet. I somliga versioner av HTML är det inte en
lag, men det är ändå en god vana. I den version av HTML
som vi använder i denna kurs, XHTML så
måste man ha citationstecken runt
attributvärdet - och det är en god sak. Strängare regler
visar sig nämligen möjliggöra större
konstnärliga möjligheter!
De andra två attributen anger båda två samma sak,
nämligen vilket (mänskligt) språk hemsidan har. Här
är det roligt att se nybörjare som kopierar andras kod
från nätet och anger lang="en" trots att deras
dokumement är på svenska (eller tyska eller danska eller..)
Vilken slags HTML?
Alldeles nyss så infördes begreppet XHTML. Det är ju så att webben utvecklas i en rasande fart och den HTML-kod som var bra för fem år sedan är förlegad idag. Vi kan något förenklat tala om tre nuvarande generationer (X)HTML och en framtida:
- HTML 3.2, som fastslogs 14 januari 1997.
- HTML 4.01, som fastslogs 24 januari 1999 (ja, på julafton!)
- XHTML 1.0 och XHTML 1.1, som fastslogs 26 januari 2000 respektive 31 maj 2001.
- XHTML 2.0, som fortfarande är under utarbetning.
Någon kanske undrar vad som fanns före HTML 3.2 och svaret är att fram till dess hade inga standarder fått något egentligt genomslag. HTML 4.0 är också en standard, men den innehåller några buggar och kan enklast läggas i glömskans kammare.
Vilken slags HTML man använder sig av skall anges med hjälp av dokumentets doctype. Använder man sig av någon slags XHTML, så skall man också ange dokumentets namnrymd. Namnrymder är än så länge att betrakta som överkurs och skulle du glömma att ange den kommer dokumentet fortfarande fungera oklanderligt. Du kan dock nöta in en dålig vana och vill du fördjupa dig i webbteknik kommer den att straffa sig längre fram. Du behöver alltså inte veta vad en namnrymd är ännu, kom bara ihåg att de skall anges!
Sammanfattning
Vi har alltså konstaterat att en hemsida består av tre delar:
doctype
, head
och body
. Dokumentet märks upp
med det som i dagligt tal kallas taggar
, men som mer teknsikt
korrekt bör kallas för element
. Element kan ha attribut,
vilka skrivs inuti start-taggen enligt formeln
attributnamn="attributvärde". Från början
var HTML inte ämnat att innehålla information om hur
innehållet skulle presenteras rent visuellt. Efter hand uppstod det
både speciella element och attribut vars syfte var att styra
designen. I modern kodning skall man undvika sådana taggar och
sådana attribut. Det jobbet lämnas över till CSS-koden i
stället.
Innan vi lär oss mer (X)HTML, så måste vi bestämma oss för vilken slags (X)HTML vi bör välja. Näst-nästa kapitel förklarar skillnaderna mellan HTML 4.0 och XHTML, samt deras respektive undergrupper. Kapitlet som nu följer kommer att berätta för dig hur man kan se skillnad på välskriven HTML-kod och illa skriven dito.