HTML-Standarder

HTML-Standarder
CT3620 – Vetenskapsmetodik för teknikområdet
2005-10-18
Magnus Heglert
[email protected]
Juan Maluenda Alvarez
[email protected]
Sammanfattning
Kring 1990 hade Internet börjat få fäste i världen och fler och fler ville upptäcka vad det
handlade om. Men det fanns inget i stil med dagens webbsidor utan det var antingen Telnet,
ftp eller Gopher som man använde. Utvecklingen gick framåt efterhand och man ville göra
webben mer användarvänlig. En man vid namn Tim Berners Lee fick då för sig att det
koncept han kallade för hypercards skulle kunna omvandlas till en webbstandard. Han såg att
det fanns ett arbete som handlade om att strukturera textdokument med hjälp av SGML
(Standard Generalized Markup Language). Som grund använde han detta och skapade HTML
(Hyper text markup language) som sedan fick ett stort genomslag över Internet tack vare att
http-protokollet också utvecklades.
Begreppet World Wide Web (WWW) myntades också och början till dagens webbplatser
började komma. Mycket har hänt med HTML-standarden genom åren och den första
standarden är inte alls lik den standard som användes idag. Men utan Berners Lees arbete
hade webben inte sett ut som den gör idag.
2
Innehållsförteckning
HTML Standarder ...................................................................................................................... 1
Sammanfattning ......................................................................................................................... 2
Innehållsförteckning................................................................................................................... 3
Inledning..................................................................................................................................... 4
Hypertext / hypercards ....................................................................................................... 4
Mer om HTML................................................................................................................... 5
Html – En fusion av SGML och hyperlänkar ............................................................................ 6
Bilder och länkar ................................................................................................................ 7
HTML 3.0 och HTML 3.2 ..................................................................................................... 7
HTML 4.0............................................................................................................................... 8
XHTML 1.0............................................................................................................................ 9
Framtiden ................................................................................................................................. 11
Referenser................................................................................................................................. 12
3
Inledning
Datorer har utvecklats väldigt mycket de senaste åren och vi har kommit mer och mer in i en
datorålder. Från de första datorerna som bara var stora räknemaskiner till dagens datorer som
används för allt från kommunikation till simuleringar av olika slag. Innan datorer kom skrevs
allting på papper. I och med övergången från maskinskrivna dokument till elektroniska
dokument gavs möjligheten att producera mer varierande arbeten. I de tidiga versionerna av
elektroniska dokument lades tyngdpunkten på renderingsinformationen för att visa
dokumentet. Dessa renderingsmetoder varierade kraftigt för olika datorer eftersom de hade
olika plattformar och kapacitet t.ex. typsnitt och upplösning. Detta gjorde att man var tvungen
att direkt i dokumentet tala om hur man ville att texten skulle se ut på sin dator samt hur den
skulle återskapas för att se likadan ut.
Utvecklingen fortsatte och desto fler fick tillgång till datorer och programvara för att skriva
de elektroniska dokumenten, då skapades även problemen. Ett av dessa var hur man skulle
strukturera textdokumenten så att alla fick dokument som såg lika ut, oavsett om man visade
det på sin egen dator eller någon annanstans. Man behövde ett gemensamt system för att få
detta att fungera. IBM insåg problematiken och började utveckla Generalized Markup
Language (GML) [RAGGET98] som var ett slags taggspråk (Ett språk av märkord som
definierar textformatering) som användes för att märka upp text enligt vissa regler. Detta
språk tolkades sedan av datorn där texten skulle visas. Man fick då ett dokument som såg
likadant ut på allas datorer oberoende av vilket system som låg i botten.
Man hade även ett behov av att kunna använda global hypertext för att kunna förflytta sig i
dokument på ett snabbt och effektivt sätt. Men detta ställde till problem när dokument skulle
flyttas från ett system till ett annat, då alla system har olika input/output system och
gränssnitt. Detta problem löstes med GML, vilket gjorde att alla dokument tolkades på rätt
sätt.
Det fanns dock problem med GML för det var inte tillräckligt generellt för att kunna användas
överallt. Det följde vissa strikta regler som inte gick att förändra hur som helst. Man började
då att utvecklas ett nytt språk som kallades för Standard General Markup Language (SGML).
SGML är en standard för hur grammatiken för ett taggspråk ska se ut. Det är det som styr hur
de olika taggarna ska tolkas för att texten ska få rätt utseende.
SGML bygger på att man skriver löpande text och i texten sätter man sedan in taggar för att
markera rubriker, stycken, listor och annat som man har definierat i grammatikreglerna.
SGML bygger till stor del på det arbete som bland annat IBM hade lagt ner på GML. SGML
blev en ISO standard 1986 (ISO 8879) och har sedan dess varit den standard man använt för
att utveckla dagens taggspråk.
I och med att SGML slog igenom så underlättades förflyttningen av dokument från ett system
till ett annat, då dokumentet enbart höll information om hur data skulle se ut och all
renderingsberäkning lämnades till plattformen.
Hypertext / hypercards
Konceptet hypertext myntades redan 1940 men slog inte igenom förrän persondatorernas
genombrott. Idén med hypertext var att i ett dokument ha en länk till ett annat dokument eller
en annan del av samma dokument, så att man i realtid kunde hoppa mellan dessa.
4
Detta blev officiellt känt 1980 genom det så kallade hypercards, vilka var arkiv som gick att
bläddra interaktivt i. Man kunde stega från ett ställe till ett annat utan att behöva slå upp just
det avsnittet i arkivet. Samma årtal skapade Tim Berners Lee ett eget system för privat bruk
med hyperlänkar som han kallade enquire.
Hypertextbehovet inom forskningen på Centre Européen de la Recherche Nucleaire (CERN)
ledde att Tim Berners Lee utvecklade ett system för att koppla samman andra befintliga
forskningsdokument. Berners Lee ville utveckla ett system för globala hypertextlänkar som
skulle kunna kopplas till vilket dokument som helst över hela jorden. Problemet låg i att
dokumenten varierade i format. Vilket betydde att en användare inte kunde med full säkerhet
öppna ett länkat dokument då detta kunde vara i ett format som användarens mjukvara inte
kunde läsa.
Detta behov av gemensam dokumenttyp gjorde att Berners Lee utvecklade en egen
dokumenttyp som han byggde på SGML. Det färdiga resultatet fick namnet HTML eftersom
det hanterade Hyptertext och var ett markupspråk.
Men det Internet som fanns var inte moget för att hantera HTML. Det som användes var
Telnet (Fjärranslutnings system), File Transfer Protocol (FTP) och i viss mån även Gopher
(menystyrt textbaserat informationssystem). [RAGGET98] Men då HTML gjorde sitt intåg så
behövdes ett nytt protokoll för Internet som möjliggjorde överföring av HTML över Internet.
Detta insåg Berners Lee och utvecklade då Hypertext Transfer Protocol (http). Httpprotokollet är ett protokoll som används för att hämta HTML från en server för att sedan visa
upp det i klientens webbläsare. Ett protokoll i sig är en uppsättning av regler för hur data ska
överföras mellan server och klient.
Mer om HTML
HTML är ett flexibelt och lättanvänt språk för att strukturera hur webbsidor ska se ut. Med
språket kan man göra rubriker, stycken, lägga in bilder, listor och en massa andra saker. Det
var 1995 som den första specifikationen för hur HTML ska se ut kom. Den innehöll då en
lista på hur taggarna skulle tolkas, men även en dokumentstypsdefinition som talade om vilka
taggar som var giltiga att använda. Detta blev sedan den grundläggande standarden för hur
dagens webb ska se ut.
5
Html – En fusion av SGML och hyperlänkar
Den första versionen av HTML (version 2.0) släpptes 1995. Den var ett plattformsoberoende
markup-språk (ett språk för att definiera textformatering). Det använde SGML standarden för
att skapa grammatiken i språket dvs. hur språket skulle tolkas. Det var först i HTML som
började man blanda hypertext, vanlig text och grafiska objekt. Det implementerades även
script-stöd som gjorde att man kunde använda klientens webbläsare för att förändra
webbsidornas innehåll. Även om språket inte var tänkt till att vara grafiskt så fanns det medel
för att visa upp bilder. Detta blev tillagt eftersom det var någonting som efterfrågades.
Kommandona i HTML kallas för taggar. En tagg börjar och slutar med klamrar (< & >).
Mellan klamrarna så skriver man sedan det kommando man vill utföra eller det elementnamn
man vill använda. Taggar kommer ofta i par med en starttagg och en sluttagg.
Ex 1: <b> Denna text kommer att vara fet </b>.
Elementet startar med taggen <b>, och avslutas med den annorlunda </b> där /-tecknet visar
att det är en sluttagg. Som tidigare nämnts följer alla markup-språk en viss struktur och detta
gäller även HTML.
Ex 2:
<!doctype HTML PUBLIC ”-//W3C//DTD HTML 2.0 Transitional//EN”>
<html>
<head>
<title> Detta är titel på browser fönstret </title>
</head>
<body>
Detta kommer att vara vanligt text med en radbrytning.<br>
<h1>Detta är rubrik formatering med automatisk radbrytning</h1>
</body>
</html>
Överst i ett HTML-dokument finner vi doctype; detta informerar om vilken standard HTMLkoden skall följa. Den informerar alltså webbläsaren om det är en standard som den kan förstå
och tolka eller om det är en nyare standard än den förstår. Taggen doctype är inte alltid
inkluderad i äldre html-dokument eftersom det är först i efterhand som man har kom på att det
fanns fördelar med att veta vilken standard som används på sidan.
Den första tagg som däremot alltid måste stå med i ett HTML dokument är <html> taggen.
Denna berättar för webbläsaren var början på dokumentet är. Sist i dokumentet hittar vi
</html>, denna berättar för webbläsaren att det är slutet på dokumentet.
Innehållet i ett HTML dokument separeras i två delar, huvud och kropp. Överst på
dokumentet hittar man <head> taggen [W3C HTML 2]. Denna indikerar start på
huvudsegmentet där saker som titel och allmänna inställningar finns med. I <head> hittar
man även metadata som är data som inte visas för användaren men kan tolkas av ex.
sökmotorer. Man definierar även vanligen sina script-funktioner i dokumenthuvudet. Slutet på
huvuddelen markeras av </head>. Direkt efter finner man <body>. Detta är kroppen på
dokumentet och talar om att det är detta som ska visas i webbläsaren. Detta kan vara allt från
vanlig text till bilder och scriptanrop.
6
Kontroll över den vanliga brödtexten är ett absolut måste och inom HTML 2.0 finns en rad
olika formateringstaggar. Man kan skapa automatiskt radbrytande stycken samt styra
placeringen av text t.ex. centrera, vänsterjustera och högerjustera. Det finns även taggar för
att skapa listor och citat.
Ex 3:
<center><h1>En centrerad titel</center></h1>
<p>Detta element kommer att tolkas som en paragraf.
Paragrafelementet har automatisk radbrytning</p>
<ul>
<li>List element nr1
<li>List element nr2
</ul>
Bilder och länkar
Ett av de grundläggande kraven för HTML var just hyperlänkar. Hyperlänkar inom html kan
peka till en utomstående sida eller till en viss plats på den aktiva sidan. För detta används
taggen <a> (anchor). Anchor-taggen använder sig av så kallade attribut för att tala om vad
den ska göra. Placerar man href attributet efter anchor taggen vill man utifrån det elementet
hoppa till en annan hemsida respektive hoppa inom den aktiva sidan.
Ex 4: <a href=”www.w3.org”>Klickbar text som leder till wc3s hemsida</a>
Som tidigare nämnts kan anchor även peka inom en och samma sida, för detta måste man
använda sig av name attributet som kommer att skapa en flaggad position inom HTMLkoden.
Ex 5:
<a href=”#hopp”>klicka här för att hoppa ned i texten</a>
<a name=”hopp”>Välkommen!</a>
Man är dock inte alltid tvungen att använda sig av vanlig text för hyperlänkar. En bild kan
även den fungera som en hyperlänksmarkör. Inom HTML 2.0 är man dock bunden till de
enklare bildformaten, gif och jpg. Här nedan ser vi ett exempel på hur man hyperlänkar en
bild.
Ex 6:
<center>
<a href=”www.w3.org”>
<img src=”bild.gif” alt=”Din webbläsare kan inte sen denna bild”>
</a></center>
HTML 3.0 och HTML 3.2
HTML 3.0 släpps 1997 bara några månader senare utkommer HTML 3.2 [W3C HTML 3].
Den stora pionjären inom webbläsarmarknaden var Netscape. Netscape fungerade som en
drivkraft för HTML 3.2. Nya finesser var textformatering, tabeller och möjligheten att lägga
till små program i html-sidorna (applets).
7
Möjligheten att representera text i olika stilar och färger i dokumenten kom genom
användandet av taggen <font>. Man kunde även använda sig av olika attribut i <body>
elementet [W3C HTML 3]. Det är möjligt att bestämma färg på de olika delarna i <body>
såsom hyperlänkar, vanlig text eller bakgrunden. Bildstödet var bättre och möjligheten att låta
en bild täcka bakgrunden fanns också. Här kommer ett exempel på lite av de nya taggar som
infördes i HTML 3.2 och hur de användes för att rita en tabell, samt styra backgrunden på
webbsidan.
Ex 1 HTML 3.2:
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 3.2 FINAL//EN”>
<html>
<head>
</head>
<body text=green background=”bild.gif”>
<script type=”text/javascript”>
document.write(“Hello World!”);
</script>
<p>
<font color=”#FF0000”>Detta är röd text</font>
<p>
<table border=”1”> <! – Skapar en tabell med tillhörande rader (<tr>) och kolumner (<td>) ->
<h3>En liten tabell:</h3>
<tr>
<td>Rad 1, kolumn 1</td>
<td>Rad 1, kolumn 2</td>
</tr>
<td>Rad 2, kolumn 1</td>
<td>Rad 2, kolumn 2</td>
</table>
</body>
</html>
HTML 4.0
De två största nyheterna med HTML 4.0 var frames och styles. Med styles ersatte man den
gamla font-taggen; font-inställningar gjordes antingen direkt på ett stycke inne i dokumentet
eller genom användningen av stylesheets [W3C HTML 4]. Stylesheets förflyttar fontediteringen utanför själva html-dokumentet. Standard är att man sparar informationen i egna
css-filer men styles kan även definieras i <head> taggen. Om man använder sig av externa
stylesheets kan man enkelt byta layout på hela eller flera hemsidor genom att göra
förändringar i css-filen. Det går även att hämta fontinformation från olika css-filer.
Frames är en teknik för att kunna dela upp en webbsida i mindre delar. Man kan på ett enkelt
sätt styra hur strukturen på en webbsida ska se ut och få innehållet att hamna i olika spalter.
Man skapar en separat sida som innehåller ett frameset (ramverks definition) som även
innehåller vilka sidor som ska användas i ramarna. Utifrån denna sida kan man sedan bara
ändra vilken ram (frame) som ska uppdateras med ny information.
8
Ex 1 HTML 4.0 Frames:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!—Skapar ett frameset med en 20% bred vänstermeny och en 80% bred högermeny Æ
<frameset cols="20%,80%">
<frame src="sida1.html">
<frame src="sida2.html">
</frameset>
</body>
</html>
Man utökade även script-stödet och bakåtkompabiliteten förstärktes genom bättre kontroller
om webbläsaren kunde hantera scripts. Man gjorde sidorna mer lättnavigerade för de
webbläsare som inte förstod script-koden. Ett exempel på detta med scripts ser vi här.
Ex 1 HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”minstylesheet.css”>
</head>
<body>
<!-- Detta är en kommentar kan bara ses vid editering av HTML filen -- >
<script type=”text/javascript”>
<!-document.write(“Hello World!”);
//-- >
</script>
<noscript><h1>Din webbläsare stöjder inte JavaScript</h1></noscript>
<p style=”color: red; margin-left: 50px”>
Denna text följer inga stylesheets.
</p>
</body>
</html>
I exemplet kan vi se användandet av kommentartaggen i script-elementet. Problemet låg i att
om en webbläsare inte kunde hantera script kommandon, skrevs informationen i scriptelementet ut som vanlig text på hemsidan. Genom att användanda kommentartaggen i scripten
var det bara webbläsare som kunde hantera scripts som förstod att det inom kommentar skulle
köras som script. De andra webbläsarna struntade helt enkelt i det som stod där. Men för
kunna köra alternativ HTML-kod eller ge ett felmeddelande införde man <Noscript>
elementet [W3C NOSCRIPT].
XHTML 1.0
XML (extensible markup language) är ännu en standardiserad form av ett markup-språk som
härstammar från SGML. XML används för att representera data. Innehållet i ett XML
9
dokument är omständligt och får absolut inte innehålla minsta fel. Med XML får man
bekvämligheten av en text fil och lika bra informationslagring som i en binärfil.
XHTML är HTML kombinerat med XML. [W3C XHTML]Detta ger dokument som tack vare
HTMLs bakåtkompabilitet och XMLs felfria struktur kan läsas av i princip alla webbläsare,
även på de handhållna datorer och mobiltelefoner som inte har resurser att tolka dåligt skriven
HTML.
De största nyheterna i XHTML är just att strukturen är mycket striktare. I de gamla HTML
standarderna spelade det ingen roll om taggarna var skrivna med versaler eller gemener, men i
XHTML måste taggar och attribut vara skrivna i gemener. Alla element måste ha en
avslutande tagg, vilket inte alltid var nödvändigt i de äldre versionerna, då webbläsare själva
kunde placera bortglömda taggar. Ensamma taggar måste även avslutas med /-tecknet.
Framestekniken från HTML 4.0 blev utbytt mot en ny och förbättrad version som kallades
lager. Ett lager skapas med taggen <DIV>. Medan frames delade upp en webbsida i mindre
delar använder sig lager av en teknik som skapar geometriska områden i en webbsida som kan
tilldelas olika effekter. Man kan tack varare att man har geometriska områden på skärmen få
informationen att visas precis så som man vill ha den. Dessutom kan lager dynamiskt
anpassas sig efter vilken upplösning som den aktuella webbläsaren har på sin skräm.
Ex 1 XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”minstylesheet.css”> <! -- hämtar en stylesheet ->
</head>
<body>
<div id=”main”> <! – Skapar ett lager - ->
<!-- Detta är en kommentar kan bara ses vid editering av HTML filen -- >
<script type=”text/javascript”>
<!-document.write(“Hello World!”);
//-- >
</script>
<noscript><h1>Din webbläsare stöjder inte JavaScript</h1></noscript>
<p style=”color: red; margin-left: 50px”>
Denna text följer inga stylesheets.
</p>
</div>
10
</body>
</html>
I detta exempel skapas ett lager som sedan all information skrivs ut i. En viktig skillnad är
även i vilken ordning som taggar skrivs. Man får inte avsluta en tagg inuti en annan. Den tagg
som startas först är den som ska avslutas sist. Detta ser vi ett exempel på här nedan.
Ex 2:
<h1><center>En testrubrik</h1></center> - Giltigt i alla HTML standarder under XHTML
<h1><center>En testrubrik</center></h1> - Giltig XHTML
XHTML 1.0 är den standard som bör användas på webben idag och det är även den som
World Wide Web Consortium (W3C) anser vara den officiella HTML standarden. [HTML]
Framtiden
Framtiden för HTML (XHTML) ser ljus ut. Det är någonting som är på frammarsch och
håller på att utvecklas. En Working draft [W3C XHTML 2.0] för XHTML 2.0 har släppts till
utvecklare så att dessa ska få tycka till om den nya standarden. Det är även ett nytt system för
ramar (frames) under utveckling. En av de stora nyheterna i XHTML 2.0 är att ett flertal
element tas bort för att migrera till XML. <IMG> taggen som användes för att infoga bilder
kommer tas bort. Den kommer att ersättas av <OBJECT> som sedan har ett type-attribut för
att ange vilken typ av objekt som ska infogas i dokumentet. Working Draften är ca sex
månader gammal och den nya standarden kommer antagligen att ersätta XHTML 1.0 inom en
snar framtid. Då blir HTML 4.0 helt uträknat och de aktuella standarderna kommer att vara
XHTML 1.0 och XHTML 2.0.
11
Referenser
[W3C HTML 2]
W3C “Hypertext Markup Language 2.0”
<http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.3> (15 Oct, 2005)
[W3C HTML 3]
W3C “Hypertext Markup Language 3.0”
<http://www.w3.org/MarkUp/html3/docbody.html> (15 Oct, 2005)
[W3C HTML 4]
W3C “Hypertext Markup Language 4.0”
<http://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html> (15 Oct, 2005)
[W3C NOSCRIPT]
W3C “Hypertext Markup Language 4.0”
<http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#h-18.3.1> (15
Oct, 2005)
[W3C XHTML]
W3C “XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)“
<http://www.w3.org/TR/html/> (15 Oct, 2005)
[W3C XHTML 2.0]
W3C “XHTML™ 2.0, W3C Working Draft 27 May 2005”
<http://www.w3.org/TR/2005/WD-xhtml2-20050527/> (15 Oct, 2005)
[RAGGET98]
Dave Raggett, Jenny Lam, Ian Alexander and Michael Kmiec “Raggett on HTML 4”.
Addison Wesley Longman 1998. ISBN 0-201-17805-2.
<http://www.w3.org/People/Raggett/book4/ch01.html>
12