HTML-Standarder. CT3620 Vetenskapsmetodik för teknikområdet Magnus Heglert

Transkript

1 HTML-Standarder CT3620 Vetenskapsmetodik för teknikområdet Magnus Heglert Juan Maluenda Alvarez

2 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

3 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 HTML XHTML Framtiden Referenser

4 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

5 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

6 Html En fusion av SGML och hyperlänkar Den första versionen av HTML (version 2.0) släpptes 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

7 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= >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= > <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

8 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

9 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

10 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" " <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

11 </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

12 Referenser [W3C HTML 2] W3C Hypertext Markup Language 2.0 < (15 Oct, 2005) [W3C HTML 3] W3C Hypertext Markup Language 3.0 < (15 Oct, 2005) [W3C HTML 4] W3C Hypertext Markup Language 4.0 < (15 Oct, 2005) [W3C NOSCRIPT] W3C Hypertext Markup Language 4.0 < (15 Oct, 2005) [W3C XHTML] W3C XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) < (15 Oct, 2005) [W3C XHTML 2.0] W3C XHTML 2.0, W3C Working Draft 27 May 2005 < (15 Oct, 2005) [RAGGET98] Dave Raggett, Jenny Lam, Ian Alexander and Michael Kmiec Raggett on HTML 4. Addison Wesley Longman ISBN < 12