3 HTML 4 pintaa syvemmältä Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Not my first HTML document</title> </HEAD> <BODY BGCOLOR="white"> <! insert your example here --> <P>Simon says: <Hello <B>world</B>!> </BODY> </HTML> Kerrataan HTML-dokumenttien käsitteitä ja syntaksia (oletetaan esim. HTML 3.2 perusteiltaan jo tunnetuksi). Mitä yllä oleva oikeastaan tarkoittaa? 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 42
Mikä tai mitä HTML on? HTML (Hypertext Markup Language) on hypertekstin merkkaamiseen tarkoitettu merkintäkieli HTML:n ensimmäiset versiot ovat ns. SGML-sovelluksia, viimeisimpänä HTML 4.01 (edelliset merkittävät saman linjan versiot ovat HTML 4.0, HTML 3.2 ja HTML 2.0) - HTML on kuvattu SGML:lla; syntaksi siten SGML:n mukaista - dokumenttien tyyppi on määritelty standardoidun & julkisen SGML-DTD:n muodossa - tyypillistä: kovakoodattu elementtien formatointi vs. tyylit Nykyään HTML:ää kehitetään XML:n kautta "seuraavan sukupolven HTML:nä": tuloksena XHTML 1.0, joka on ns. XML-sovellus Uusin HTML:n versio on XHTML 1.1 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 43
HTML-dokumentin esittelyosa HTML-dokumentti alkaa esittelyosalla (joka voi myös puuttua, tällöin "oletuksena on HTML 2.0"), esim: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Kyseessä on SGML-dokumentin "DTD:n ilmoittaminen" ([DOCTYPE declaration]), joka kertoo SGML-prosessorille sovitulla tavalla, että kyseessä on "HTML-tyyppinen dokumentti" yleensä HTML-dokumentteja lukevat ohjelmat ovat kuitenkin yleisiä SGML-prosessoreita huomattavasti spesifimpiä!! Viittaukset ISO-standardeihin (esim. +/- -liput ja kielikoodit) Ongelma: mitä DOCTYPEen tulee kirjoittaa, jos kuitenkin aiotaan käyttää esim. HTML:n Netscape-laajennuksia?? 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 44
HTML-dokumentin yleisrakenne HTML-dokumentin rakenne on määritelty HTML:n DTD:ssä tarkkaan, mutta syntaksi sallii runsaasti SGML:lle tyypillisiä lyhenne- ja sievennysmerkintöjä (esim. HTML-tagit[!] tai HEAD-osa voivat puuttua yms.) HTML-dokumentin yleisrakenne: - "prologi" DOCTYPE - "esiintymä" HTML HEAD BODY Selaimet tosin hyväksyvät melkein mitä vain (periaatteessa strict-muoto estää tämän) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 45
HTML-elementin attribuutit - DIR (ltr/rtl=tekstin suunta) - LANG (ISO-639-kielikoodi, esim. "en-us") - VERSION (kuten DOCTYPEssä, esim. "-//W3C//DTD HTML 4.0//EN", VERSION on poistuva ([deprecated]) HTML-piirre) HEAD-elementin attribuutit - DIR ja LANG kuten HTML-elementissä - PROFILE (URL-viittaus "profiilitiedostoon", jonka ideana on korvata META-koodien joukko) HEAD-elementin lapsielementit ovat käytännössä: BASE, LINK, TITLE, META, ISINDEX, NEXTID, SCRIPT, STYLE, OBJECT joista elementit SCRIPT ja STYLE voivat sijaita myös BODY-elementissä Kaikki loput HTML-elementit sijaitsevat BODY-elementissä Elementtien sijoittelulle ja kontekstille on olemassa erilaisia sääntöjä 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 46
Elementit ja attribuutit HTML-dokumentin rakenne muodostuu pääasiassa elementeistä Lailliset elementit ja niiden korrekti käyttö on kuvattu HTML-spesifikaatiossa (HTML 2.0, 3.2, 4.0, 4.01, jne.) Ks. HTML-esim: <BODY BGCOLOR="white"> <P>Ks. kuva <I>tyttö ja joutsen</i>: <IMG SRC="gspic.jpg" BORDER=0> </BODY> Elementtejä rajaavat alku- ja lopputagit, poikkeuksena tyhjät elementit Joidenkin elementtien, esim. tyhjien, lopputagi voidaan jättää pois Tagien tulee määrittää aidosti sisäkkäinen elementtirakenne ([proper nesting]) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 47
Osa elementeistä on tarkoitettu esitettäväksi lukijalle "suoraan", osa ei, esim: <HEAD> <TITLE></TITLE> <LINK REL=stylesheet HREF=fancy.css TYPE=text/css> <HEAD> <BODY> <P>Check this out!</p> Esitettävät (display-tyyppiset) elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) tai listatyylisiä objekteja ([list item]), vrt. esim: <h3>heading</h3> <b>plump</b> Fiction <ol> <li>one</li> <li>two</li> <li>three</li> </ol> Lohkotyyliset objektit esitetään suorakaiteena (margin/border/padding - attribuutit), tekstityyliset merkkivirtana ja listatyyliset lohkotyylin erikoistapauksena suorakaiteena 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 48
Jotkut HTML-tagit ovat käytännössä redundantteja; esim. seuraava vastaa selaimessa yleensä vain yhtä kappalemerkintää: <P><P><P><P>Paragraph Huomaa termien elementti ja tagi eri merkitys: tagit merkitsevät elementin (elementtien merkitseminen tagien avulla parantaa niiden luettavuutta, toki myös muut menetelmät olisivat periaatteessa mahdollisia) Elementeille voidaan antaa sisällön lisäksi myös attribuutteja, joiden arvo määrätään tutun "="-operaation avulla elementin alkutagissa. Attribuuttien arvot ympäröidään lainaus- tai heittomerkein jos arvo ei sisällä tyhjämerkkejä ([white space]), voi lainausmerkit jättää pois Attribuuttimääritysten järjestyksellä ei ole merkitystä Jos selain ei ymmärrä tagia tai attribuuttia, jätetään se huomiotta (tästä seuraa kaikenlaisia ongelmia) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 49
Peruspalaset: teksti Tekstin esittämistavat: tekstin merkitystä kuvaavat merkinnät vs. tekstin ulkoasua kuvaavat merkinnät, vrt: <CITE>I'll be back!</cite> <SMALL>You just can't go around killing people</small> <CODE> for (i=0; I<foesInSight; ++i) { killfoe(i);} </CODE> Tekstin jako, kappaleet ja otsikot (P, DIV, H1-H6, ), tekstin merkitystä kuvaavat elementit (ABBR, ACRONYM, CITE, CODE, DFN, EM, KBD, SAMP, STRONG, VAR, ) Tekstin ulkoasua kuvaavat muotoilut (B, BIG, I, SMALL, STRIKE, SUB, SUP, TT, U, ), värien ja efektien käyttö Poistuva fontinkäsittely (BASEFONT, FONT), tekstin välistys ja asemointi (BR, PRE, CENTER, ), listarakenteet (UL, OL, DL) + muuta (BLOCKQUOTE, ADDRESS, HR, ) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 50
Entiteetit, merkkiviittaukset, metatieto ja objektit HTML-dokumentin sisään voi upottaa myös objekteja, joita HTML "ei sinällään tunne" (ks. "dokumenttijärjestelmistä"), esim. entiteettejä ja merkkiviittauksia, esim: <IMG SRC="pic.jpg"> Hyv&aml;&aml; y&oml;t&aml; ABC Myös vakiintunutta metatietoa käytetään laajasti, esim: <meta http-equiv=refresh content=0;url=./dir.cgi> <meta name="keywords" lang="en" content="73275, rakdok"> Objektien käsittely HTML-kielen ulkopuolella (OBJECT ja EMBED -tagit) Lisää ominaisuuksia: skriptit (SCRIPT) ja appletit (APPLET & OBJECT) - Java, JavaScript, VBScript, 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 51
Kommentit Myös kommenttien käyttö on mahdollista (ei sisäkkäisyyttä, eikä merkkijonoa "- -"), esim: <!-- fix this when the address changes! --> Kommenttien syntaksi tulee suoraan DTD-määritysten syntaksista (tämä käy selvemmin ilmi myöhemmin XML:n yhteydessä) Alkuperäisen tarkoituksen lisäksi kommentteja on alettu laajasti käyttää myös prosessointiohjeiden ([processing instruction]) tavoin Tällöin tyypillistä on kommenttien käyttö esim. ohjauskoodeina, tyyliin Server Side Include (SSI): <!--#komento määrittely1="arvo1" määrittely2="arvo2"--> Esim. <!--#echo var="document_name"--> 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 52
Myös täysin mielivaltainen käyttäminen on mahdollista, totta kai: <!--MYCODE1 MYPARAM1 MYCOMMENT1 MYJOKE1 MYCODE2 MY --> HTML 4 pintaa syvemmältä Kommenttien käyttö prosessointiohjeina aiheuttaa yleensä päänvaivaa kun ohjelmistoja päivitetään tai muutetaan (osittaisen pelastuksen tuo kuitenkin se, että kommentit välittyvät sellaisenaan niitä käsittelevälle sovellukselle) Kommentteja voidaan käyttää myös omien rakenne-elementtien määrittelyyn Kommenttimerkinnät ovat erittäin laajasti käytössä (esim. MS & Macromedia) Jatkuva omien koodien kirjoittaminen kommenttien muodossa on hyvä merkki siitä, että työtä ei ehkä kannattaisikaan tehdä HTML-dokumenttina, vaan esim. XML-dokumenttina (jos mahdollista) ja määritellä omat elementit XML:llä Jos HTML:ää kuitenkin halutaan, tai on pakko käyttää, voidaan HTML käytännössä laajentaa tyylien avulla "köyhän miehen XML:ksi" (esim. DIV- ja SPAN-tageilla [tähän palataan myöhemmin]) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 53
Hypertekstilinkit Hypertekstiä syntyy erityisen ankkuri-elementin avulla. <A HREF="http://www.fi/path/page.html">Hello</A> <A HREF="../pervious.html">again Hello again</a> <A HREF="./homepage/">Hello again even once more</a> Nimetyt ankkurit: linkin kohteen osoittaminen HTML-dokumentin sisällä <A NAME="funny1">Once</A> upon a time in a country far from See <A HREF="destfile.html#funny1">the rude joke</a> about two thousand rabbits and a vacuum cleaner. HTML-dokumenttien ohella linkit voivat viitata myös muihin tiedostoihin, tällöin tiedostojen käsittely riippuu selainohjelmasta (plugins, helper applications, ): Read about <A HREF="./viruscontainer.doc">Y2K</A> now! 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 54
Kehykset Selaimen hierarkkisen ikkunarakenteen määrittäminen tapahtuu kehysten avulla (~linkkikontekstit; kehykset näkyvät yleensä ruudukkona yhden fyysisen käyttöliittymätason ikkunan sisällä) Määritys tapahtuu BODY-elementin korvaavan FRAMESET-elementin avulla, esim: <HTML> <TITLE>My Frame layout<title> <FRAMESET COLS="150,*"> <FRAME SRC="menu.html" NAME="menuwindow"> <FRAME SRC="intropage.html" NAME="contentwindow"> <NOFRAMES> Oh dear, it seems that your browser doesn't support frames </NOFRAMES> </FRAMESET> </HTML> 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 55
Linkkien avautumisikkunan osoittaminen tapahtuu TARGET-attribuutilla <A HREF="story1.html" TARGET="contentwindow">Hello</A> Ellei toisin määrätä, linkit aukeavat siihen ikkunaan, jossa linkin alkupää sijaitsee. Oletuskohteen uudelleen määrittäminen tapahtuu BASE-elementillä: <HEAD><BASE TARGET="contentwindow"></HEAD> HTML 4.0:n myötä myös ns. inline-kehysten (ns. kelluva kehys) käyttö on periaatteessa mahdollista IFRAME-koodin avulla: <P>Please select a category and read the description: <IFRAME SRC="myframes.html" WIDTH="150" HEIGHT="100" ALIGN="RIGHT"> Sorry, your browser doesn't support inline frames! (What if you visited <A HREF="www.disney.com">Disney.com</A> while waiting the next software version?) </IFRAME> 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 56
Muita ominaisuuksia Kuvakartat, esim: <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> </OBJECT> <MAP name="map1"> <A href="guide.html" shape="rect" coords="0,0,118,28">access Guide</A> <A href="search.html" shape="circle" coords="184,200,60">search</a> </MAP> Lomakkeet, esim: <FORM action="http://site.com/prog/comment" method="post"> <P> First name: <INPUT type="text" name="name"><br> Last name: <INPUT type="text" name="comment"><br> <INPUT type="submit" value="send"> <INPUT type="reset"> </P> </FORM> 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 57
Taulukot, esim: <TABLE border="1" summary="some statistics"> <CAPTION><EM>A test table with merged cells</em></caption> <TR><TH>Males<TD>1.9<TD>0.003<TD>40% <TR><TH>Females<TD>1.7<TD>0.002<TD>43% </TABLE> HTML 4.0 "uutuutena" myös esim. INS ja DEL -tagit (ns. editorimerkinnät) Tyylit ja skriptit: <P style="font-size: 12pt; color: fuchsia"> Aren't style sheets wonderful? - Yes but not like this!</p> <a href="topic.html" onclick="myfun();">see stats</a> for more Pyrkimys kohti deklaratiivista merkkausta ja proseduraalisten ulkoasumääritysten erottamista HTML-dokumenteista ("esiintymä"-osasta)! 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 58
Yleisiä huomioita HTML-dokumenteista ja niiden kirjoittamisesta Osa määrityksestä olettaa toisten spesifikaatioiden olemassaolon (kielikoodit ja linkkiviittaukset, tagit IMG, FORM, SCRIPT, APPLET, OBJECT, ) Osa tageista voidaan pudottaa pois, lopputagien käyttö ei ole aina pakollista, attribuuttien arvot eivät tarvitse aina lainausmerkkejä Elementtien järjestys ei ole aina tarkkaa ja isot ja pienet kirjaimet eivät ole merkittäviä elementtien nimissä Ns. tyhjämerkit normalisoidaan HTML-dokumentteja parsittaessa; esim. elementtien sisennys välilyönneillä tai tabulaattoreilla ei vaikuta koodeihin (poikkeuksena selainparserien pikkumokat) Esitysvaiheessa tyhjämerkit sievennetään elementtien sisällön osalta vastaavasti (+poikkeukset, kuten esim. PRE-tagi) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 59
Osa elementeistä on kontekstisidonnaisia, osa ei, vrt. esim: <HR> <B>moi</B> <TABLE><TR><TD>Cell</TABLE> <ul> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ul> HTML 4 pintaa syvemmältä Selain päättää viime kädessä dokumentin ulkoasusta, tosin ulkoasumääritykset voidaan irrottaa dokumenteista tyylimääritysten (CSS, JSS, ) avulla Palstoitus yms. sivuntaitto tehdään usein taulukoiden avulla (vaikka ei pitäisi) Yleisesti käytössä oleva "HTML"-koodisto on käytännössä varsin kirjavaa - Sekaisin rakenne-, ulkoasu- ja metakoodeja - HTML-version 4.0 mukaiset koodit vs. vanhempien HTML-versioiden koodit, joista osa on poistumassa standardista ([deprecated]) - esim. META-koodin kautta välitettävät sovelluskohtaiset koodit - HTTP-palvelinohjelmien tunnistama (esim. kommentti)koodaus - suurten palveluntarjoajien ja ohjelmistotalojen käyttämät, "selainlaajennukset", kommenttikoodit ja omat mv. koodit 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 60
Käytössä on virallisestikin eri HTML-versioita (läh. HTML 3.2, 4.0, 4.01 ja XHTML 1.0) ja näiden tyyppimäärityksiä (strict, transitional, loose) Uusia ominaisuuksia ja käyttötapoja tulee koko ajan lisää vielä erilaisten selainlaajennusten (plug-in, ActiveX yms.) ja integroitujen WWWylläpitotyökalujen kautta Kaikkia HTML 4.0 -standardissa esitettyjä osia ei tueta yleisesti lainkaan, ei ainakaan oikein Harkitut "selainsodat" haittaavat "cross-platform" -kehittäjän työtä joskus tarkoituksellisestikin (osa ongelmista tosin ratkennee "itsestään") - HTML-dokumenttien "oikein muodostettu rakenne" - Java-virtuaalikoneet ja JavaScript vs. VBScript - dokumenttimallien eroavaisuudet eri selaimissa - tyylikielten eri tulkinnat - Java, ActiveX, JavaBean, yms. sotkut - IE5:n rooli osana Windows-käyttöjärjestelmää (esim. ohjelmien päivitys) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 61
HTML-parsereista Vanhan käytännön mukaisesti HTML-dokumentteja parsitaan "ymmärtäväisellä" asenteella - selaimet ohittavat virheet ja tuntemattomat koodit ellei toisin määrätä - "luovat arvaukset" (esim. "<" ja ">" -merkit) - selainten ja selainversioiden erot! On kuitenkin olemassa myös validoivia HTML-parsereita, joiden avulla myös HTML-dokumenttien kielioppi ja rakenne on mahdollista tarkastaa: ks. esim: - W3C HTML Validation Service ( http://validator.w3.org/ ) Validius ei kuitenkaan takaa sitä, että elementtejä on käytetty deklaratiivisen merkkauksen hengessä "oikein"! Koska HTML 4.01 on SGML-sovellus, onnistuu validien HTML-dokumenttien käsittely myös "yleisillä" SGML-editoreilla ja selaimilla Koska XHTML 1.0 on XML-sovellus, onnistuu validien XHTML-dokumenttien käsittely myös "yleisillä" XML-editoreilla ja selaimilla 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 62
Miten HTML-kieli on määritelty? Laillinen elementtirakenne annetaan HTML 4.01 DTD:ssä SGML:n tyyppimäärityskielen mukaisina "sääntöinä" tyyliin: <!ENTITY % attrs "%coreattrs; %i18n; %events;"> <!-- Unordered Lists (UL) bullet styles --> <!ELEMENT UL - - (LI)+ -- unordered list --> <!ATTLIST UL %attrs; -- %coreattrs, %i18n, %events -- > Idea on selvä: määrityksessä esitellään HTML-dokumentin looginen kielioppi Se, miten koodeja "pitää käyttää" tai mitä ne "tarkoittavat" kerrotaan sanallisesti tai esitetään esimerkkien avulla Yo. esimerkissä on helposti tunnistettavia osia: elementtimerkinnät (erityisesti "<"- ja ">"-merkit) kommentit, elementtien nimet, säännölliset lausekkeet, Yksinkertaisten omien elementtien määrittely olisi käytännössä hyödyllistä ja periaatteessa helppoa, mutta HTML 4.01 ei tähän mahdollisuutta tarjoa 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 63
Katso myös Simppeli HTML-tutoriaali aloittelijoille, "Getting started with HTML" (ks. http://www.w3.org/markup/guide/ ) HTML 4.01 (ks. http://www.w3.org/tr/html4/ ) josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" (ks. http://www.w3.org/tr/html4/intro/sgmltut.html ) XHTML 1.0 (ks. http://www.w3.org/tr/xhtml1/ ) HTML 3.2 (ks. http://www.w3.org/tr/rec-html32.html ) Vaikka selaimet eivät HTML-dokumentteja kriittisesti parsikaan, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. http://validator.w3.org/ ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. http://www.w3.org/history/19921103- hypertext/hypertext/www/markup/markup.html ) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 64
HTML ja XHTML 4 HTML ja XHTML Ensimmäinen XML-kieliopin mukainen HTML-versio on XHTML 1.0 (Extensible HyperText Markup Language) - XHTML 1.0 on HTML 4 -kuvauskielen XML-kieliopin mukainen uudelleenmuotoilu - kärjistys: XHTML säilyttää HTML 4-kuvauskielen elementtien nimet ja tulkinnan entisellään XHTML 1.0 jakaantuu (HTML 4.01:n tapaan) kolmeen dokumenttityyppiin: - XHTML 1.0 Strict koostuu pelkästään rakenteen kuvaamiseen tarkoitetuista elementeistä ja attribuuteista (ulkoasu määritellään tyylitiedostoilla) - XHTML 1.0 Transitional sisältää edelleen joukon dokumentin ulkoasuun liittyviä ominaisuuksia (esimerkiksi body-elementin bgcolor-, text- ja linkattribuutit) - XHTML 1.0 Frameset on identtinen Transitional-määrityksen kanssa, paitsi: kehysten määrittelemiseen tarvittava frameset-elementti korvaa bodyelementin 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 65
HTML ja XHTML Miksi XHTML? XHTML on XML-sovellus - suuri osa W3C:n uusista suosituksista perustuu XML:ään yhteensopivuus XHTML mahdollistaa XML:n uusien ominaisuuksien hyödyntämisen - erityisesti uusien elementtien esittely (ei mahdollista SGML-pohjaisissa HTML-versioissa, paitsi DIV- ja SPAN-tagit sekä class-attribuutti) laajennettavuus W3C:n "Modularization of XHTML" määrittelee HTML-sanaston jakamisen tarkoituksenmukaisiin osiin (moduuleihin) - yksittäisessä dokumentissa käytetyt tai tietyn sovelluksen (esim. selain) tukemat HTML-kielen ominaisuudet voidaan yksilöidä tarkemmin modulaarisuus profilointi 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 66
HTML ja XHTML XHTML Basic pienin yhteinen tekijä XHTML Basic kokoaa yhteen joukon moduuleita siten, että - moduuleiden sisältämät ominaisuudet on mahdollista toteuttaa myös yksinkertaisessa päätelaitteessa (kännykkä, PDA, digi-tv-päätelaite) - moduuleiden sisältämien ominaisuuksien avulla on mahdollista toteuttaa järkeviä sivustokokonaisuuksia XHTML Basic mahdollistaa esimerkiksi nämä: - perusteksti (sisältäen otsikot, kappaleet ja listat) - hyperlinkit ja linkit esim. tyylitiedostoihin - yksinkertaiset lomakkeet - yksinkertaiset taulukot - kuvat - metatieto 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 67
HTML ja XHTML Huomioita XHTML:n kirjoittamisesta Elementtirakenteiden on oltava aidosti sisäkkäisiä, esim: <p>very <em>important</em> text.</p> - HUOM: sääntö on voimassa myös SGML:n mukaisissa HTML-versiossa mutta selaimet eivät tuota yleensä tarkasta Elementtien ja attribuuttien nimet kirjoitetaan pienellä (XML erottelee isot ja pienet kirjaimet) Elementin lopputagi on aina lisättävä, esim: <ul> <li>eka</li> </ul> Vaihtoehtoisesti käytetään tyhjän elementin tagia, esim: <hr /> - HUOM: tyhjän elementin tagissa kannattaa lisätä rivinvaihto ennen "/"- merkkiä (parantaa yhteensopivuutta vanhojen selainten kanssa) 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 68
Attribuutin arvon ympärillä on aina käytettävä lainausmerkkejä, esim: <td colspan="3"> Yksinkertainen XHTML-dokumentti: HTML ja XHTML <?xml version="1.0" encoding="iso-8859-1"?> <!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="en"> <head> <title>virtual Library</title> </head> <body> <p>moved to <a href="http://example.org/">example.org</a>.</p> </body> </html> Huomaa: dokumentin syntaksi on XML:n mukainen mutta elementtien ja attribuuttien nimet (muutamaa lukuun ottamatta) ovat tuttuja vanhoista HTMLversioista. Loput opitaan XML:n mukana. 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 69
HTML ja XHTML XHTML on HTML:n tulevaisuus Nykyinen ja tuleva W3C:n tekemä HTML-kuvauskielen kehitystyö liittyy pelkästään XHTML:ään Uusin HTML-kielen versio on XHTML 1.1 - perustuu XHTML 1.0 Strict dokumenttityyppiin ja moduuleihin - suunniteltu toimimaan pohjana tuleville XHTML-perheen määrityksille XHTML 2.0 on jo kehitteillä Lisätietoa: - XHTML 1.0: http://www.w3.org/markup/#xhtml1 - XHTML Basic: http://www.w3.org/markup/#xhtml-basic - Modularization of XHTML: http://www.w3.org/markup/#xhtml-modularization - XHTML 1.1: http://www.w3.org/markup/#xhtml11 73275 RAKENTEISET DOKUMENTIT (kevät 2003) luentorunko ON 70