2 HTML ja rakenteinen merkkaus

Transkriptio

1 2 HTML ja rakenteinen merkkaus 2. HTML ja rakenteinen merkkaus Kuva tuotettu Websites as graphs työkalulla ( MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 1

2 2.1 HTML:n taustaa ja historia MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 2

3 Hypertext Markup Language HTML on laitteistoriippumaton & ja standardoitu merkintäkieli hypertekstin tekemiseen Käytössä on useita eri HTML-versioita, nykyinen suositus HTML 4.01 (uusin HTMLsuositus on XHTML 1.1) HTML-dokumentit ovat oleellisesti tekstitiedostoja, perustana tekstipohjainen kuvaustiedosto (Keskeisessä roolissa on selainohjelma) sis. viittauksia toisiin HTML-dokumentteihin (hyperteksti) sis. viittauksia myös muuntyyppisiin tiedostoihin ja resursseihin (hypermedia) sis. lukuisia yhtymäkohtia toisiin standardeihin ja järjestelmiin dokumenttien lukeminen suoritetaan erityisen selainohjelman (browser) avulla Sopivasti webbiin sijoitettuna HTML-dokumentteja on mahdollista lukea miltä tahansa selainohjelmalla Ennen kuin perehdymme HTML-kieleen, käydään lyhyesti läpi kielen kehityshistoriaa MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 3

4 HTML-historiaa: Ensimmäinen HTML-versio (SGML-sovellus) julkaistiin vuonna 1991 CERNissä (Tim Berners-Lee) Mosaic alkoi laajentaa merkintäkieltä kehitys (yleinen käyttö) HTML 2.0 (RFC 1866) esiteltiin vuonna 1994, tavoitteena tuolloin kesällä 1994 yleisesti käytössä olevien HTML-piirteiden standardointi Selainvalmistajien epästandardi kehitystyö jatkui, tuloksena Netscape, Microsoft, jne. -laajennuksia W3C:n (WWW Consortium) perustaminen vuoden 1994 lopulla hoitamaan WWW:hen liittyviä standardeja HTML 3.0 julkaistiin maaliskuussa 1995, mutta erot HTML 2.0:aan verrattuna olivat liian suuret, eikä HTML 3 koskaan oikeastaan toteutunut MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 4

5 HTML-historiaa: Marraskuussa 1995 perustettiin HTML ERB (editoral review board) - yritysosapuolten ottaminen mukaan kehitystyöhön, - tavoitteena yhdenmukaisen standardin luominen HTML 3.2 tammikuussa ERB korvattiin nykyisillä W3C:n työryhmillä Seuraava HTML-versio (4): Cougar... HTML 4.0 huhtikuussa 1998 Joulukuussa 1999 HTML 4.01 ( ) - 1) objektit ja kehykset, 2) kansainvälisyys ja monikielisyys, 3) siirtyminen tyylien käyttöön (style sheets), 4) parantunut tuki skripteille HTML 4 on käytännössä varsin laaja merkintäkieli, käsittäen kuvauksen yli 90 elementille ja 100:lle attribuutille HTML 4 on alkuperäisen HTML:n tavoin SGML-pohjainen MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 5

6 HTML-historiaa: XML alkaa yleistyä rakenteisissa dokumenteissa ja myös HTML:ään sen käyttöä aletaan pohtia 2000-luvun taitteessa XML-pohjainen versio HTML 4.01:stä julkaistaan tammikuussa 2000 nimellä XHTML 1.0 XHTML 1.0:aa jatkokehitetään "XML-mäisemmäksi" ja lopputuloksena synstyy toukokuussa 2001 XHTML 1.0 standardi "XML-leirin" työskentely jatkuu edelleen ja W3C:n työryhmä aloittaa kokonaan uuden XHTML 2.0-standardin työstämisen. Uusi kieli eroaa vanhoista HTML:istä merkittävästi: Vahvasti XML-vetoinen: XForms-lomakkeet, Xframes-kehykset, DOM Events -> XML Events Taaksepäin epäyhteensopivia muutoksia merkkauksen kieliopissa MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 6

7 HTML-historiaa: Vuonna 2004 työvaiheessa oleva XHTML 2.0 ei näytä vastaavan teollisuuden (selainvalmistajat, jne.) tarpeisiin: joukko toimijoita työstää eteenpäin HTML-kieltä itsenäisesti omassa WHATWG-työryhmässä (Web Hypertext Application Technology Working Group) Työryhmä kritisoi XHTML 2.0-kehitystä liian dokumenttikeskeiseksi ja toivoo HTML jatkokehittämistä soveltuvammaksi web-sovellusten ajoympäristönä Tammikuussa 2008 HTML 5:n ensimmäinen standardiluonnos syntyy virallisesti, kun WHATWG:n työstä tehdään W3C:n standardiluonnos (W3C First Public Working Draft of HTML 5). Kesäkuussa 2009 XHTML 2.0 kehitystyö "lakkautetaan": työryhmän työskentelyn määritellään päättyväksi vuoden 2009 lopussa -> XHTML 2.0:sta ei tule koskaan valmista standardia Syyskuussa 2009 HTML 5-standardi on vielä luonnos-vaiheessa, mutta kehittyy: Jo nyt HTML 5:n piirteille on selaintukea MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 7

8 HTML:n evoluutio pähkinänkuoressa MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 8

9 2.2 HTML-syntaksi ja terminologiaa 2. HTML ja rakenteinen merkkaus MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 9

10 Demo: HTML:n kielioppi HTML on SGML-merkintäkielen (ISO 8879:1986) pohjalta kehitetty merkintäkieli; XHTML-perhe perustuu XML-merkintäkieleen HTML-dokumentti on tekstimuotoinen Unicode-tiedosto (~ISO/IEC 10646) Tiedosto sisältää selaimen näytettäväksi tarkoitettua tekstiä ja tekstin merkitystä kuvaavia koodeja ( loogiset elementit) <h1>moi maailma!</h1> Muodollisesti jokainen HTML-tiedosto tulisi täsmällisesti HTML-määrityksessä annettujen ohjeiden mukaisesti - käytännössä näin ei kuitenkaan aina tehdä (ja WWWselaimet katsovat asian läpi sormien) Yksinkertaisten HTML-dokumenttien kirjoittaminen on erittäin helppoa, kirjoittaminen onnistuu millä tahansa tekstinkäsittelyohjelmalla MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 10

11 HTML-dokumentti Määrämuotoinen tekstitiedosto. Pääte usein.html Koostuu peräkkäisistä ja sisäkkäisistä elementeistä sekä näihin elementteihin liittyvistä attribuuteista Jäsentyy elementtien määrittelemään hierarkkien perusteella puurakenteeksi html / \ head body / title meta div \ h1 p a MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 11

12 Elementit Elementtejä on kahta perustyyppiä: 1) (epätyhjiä) elementtejä, joilla voi olla sisältönä tekstiä tai toisia elementtejä: <h1>hei Maailma!</h1> <p>hei <b>maailma</b>!</p> 2) tyhjiä elementtejä <br> Elementit merkataan dokumenttiin elementtien alku- ja lopputagien avulla HTML:ssä tyhjän elementin lopputägin voi jättää kirjoittamatta, mikäli elementti on kieliopissa määritelty tyhjäksi. XHTML-suosituksen mukaan tyhjät elementit pitäisi kirjoittaa XML-syntaksin mukaisesti erityisen tyhjän elementin koodin avulla, esim: <br/> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 12

13 Attribuutit Joillekin elementeille voidaan antaa myös attribuutteja (eräänlaisia ominaisuuksia) Attribuutit luetellaan elementin alkutagissa. Toisin kuin elementtien järjestyksellä, attribuuttien järjestyksellä ei dokumentissa ole mitään merkitystä Esimerkki: <a href="sivu.html">ks. myös toinen sivu.</a> <img src="kuva.gif" alt="esimerkki kuvan sijoittamisesta"> Jos selain ei ymmärrä tagia tai attribuuttia, se jätetään huomiotta (ongelmia tosin seuraa kuten tullaan huomaamaan) Osa elementeistä on tarkoitettu esitettäväksi lukijalle suoraan, osa ei, esim: <html> <head> <title>sivun otsikko</title> <link rel="stylesheet" href="fancy.css" type="text/css"> <head> <body> <p>check this out!</p> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 13

14 Muut rakenteet Elementtien ja attribuuttien lisäksi HTML-dokumentissa voi esiintyä myös: Kommentteja, jotka ohitetaan käsittelyssä: <!-- tämä on kommentti - kahden miinusmerkin sisällyttäminen kommentteihin ei ole sallittua --> Merkki- ja entiteettiviittauksia. Alkavat &-merkillä, päättyvät ;-merkkiin ä &e65; XML- ja/tai dokumentin tyyppijulistus <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <?xml version="1.0"?> <html xmlns=" MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 14

15 Esimerkki terminologiasta <a href=" tästä</a> Elementti Elementin tyypin nimi Sisältö Alkutagi Lopputagi Attribuutti 1 Attribuutin 1 nimi Attribuutin 1 arvo Merkkiviittaukset <a href= >Etusivulle tästä</a> a Etusivulle tästä <a href= > </a> href= > href Etusivulle tästä Etusivulle tästä MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 15

16 HTML-dokumentin tulkinta Kun selain lataa HTML-dokumentin, se luo siitä sisäisen mallin elementtien muodostaman hierarkkian perusteella. HTML määrittelee selaimelle dokumentin sisällön ja rakenteen HTML-dokumentin esittäminen perustuu karkeasti seuraaviin sääntöihin: Tyyppijulistus määrittelee sallitut elementit ja attribuutit sekä kieliopin Elementtien sisältö näytetään Metatietoa sisältävät elementit kuitenkin piilotetaan Jokaiselle elementille varataan oma, suorakaiteenmuotoinen alue Elementit ladotaan tyypistä riippuen joko omalle riville tai samalle riville toisten peräkkäisten elementtien kanssa Attribuutteja ei näytetä Entiteetit koodataan niitä vastaaviksi merkeiksi Esim. korvautuu -merkillä MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 16

17 Hyviä käytäntöjä HTML ei pakota seuraaviin merkkaustapoihin, mutta niitä voidaan pitää joka tapauksessa hyvinä käytäntöinä joita tulisi aina noudattaa: Kirjoita elementtien ja attribuuttien nimet pienin kirjaimin HTML 4 ei erottele isoja ja pieniä kirjaimia, mutta XHTML:t erottelevat. Pienet kirjaimet ovat aina varma vaihtoehto Merkitse elementin alku- ja lopputagit aina esille Lopputagin voi joissain kieliopeissa jättää pois, mutta tämä voi aiheuttaa tyhmään jäsennintä käyttäessä ongelmia Merkitse attribuuttien arvojen ympärille aina heitto- tai lainausmerkit HTML 4 ei tähän pakota, mutta muissa versioissa voi tulla ongelmia (tai jos attribuutin arvo sisältää välilyöntejä) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 17

18 2.3 HTML-merkkauksen perusteet 2. HTML ja rakenteinen merkkaus MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 18

19 HTML-dokumentin yleisrakenne Jokaisella HTML-dokumentilla on tietty yleisrakenne. HTML-dokumentti koostuu (lähinnä metatietoa sisältävästä) otsikko-osasta ja (varsinaisen asiasisällön sisältävästä) rungosta Esimerkki: (HTML 4.01) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>validi HTML-dokumentti</title> </head> <body> <h1>validi HTML-dokumentti</h1> <p>hei vaan, maailma!</p> </body> </html> Suurin osa HTML-koodauksesta keskittyy body-elementin sisältöön. Framesettyyppisillä dokumenteilla body-elementti korvataan frameset-elementillä. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 19

20 HTML-dokumentin tyyppimäärittely HTML-kieli on syntaktisesti määritelty kielen määrittelyssä käytetyn dokumentin tyyppikuvauksen (document type definition, DTD) avulla. Dokumenttityyppejä on useita erilaisia, dokumentin perustyypistä ja HTML-version standardiasteesta riippuen - HTML DTD (ks. ) - XHTML DTD (ks. ) HTML-dokumentti voi olla jotain kahta perustyypistä - (sisältö)dokumentti, ts. dokumentti joka on tarkoitettu esitettäväksi & luettavaksi selaimessa (olennaisena sisältönä BODY-elementti) - kehysrakenteen kuvaava dokumentti, ts. kuvaus selainikkunan rakenteesta (olennaisena sisältönä FRAMESET-elementti) Dokumentin tyyppimäärittely on geneerinen malli, jota jokaisen (oikeanmuotoisen eli validin) HTML-dokumentin tulisi noudattaa Käytännössä tyyppimäärittelyn voi jättää poiskin (mutta tyyppimäärityksen merkitys rakenteisessa dokumentissa on syytä ymmärtää) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 20

21 HTML-dokumenttien keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit Kuvaileva merkkaus vs. formatoitu teksti HTML-spesifikaatio olettaa erityisesti tyylien (esim. CSS) ja skriptien (esim. JavaScript) olemassaolon (vrt. XHTML Basic) Tapahtumankäsittely MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 21

22 HTML:n keskeiset elementit HTML 4 on varsin laaja spesifikaatio -- no mikäs sitten on keskeisin osa HTML:ää? (kohtuullisen hyvä) vastaus: XHTML Basicin sisältämä merkkaus: Structure module body, head, html, title Text module abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Hypertext Module a List Module dl, dt, dd, ol, ul, li Basic Forms Module form, input, label, select, option, textarea Basic Tables Module caption, table, td, th, tr Image Module img Object Module object, param Metainformation Module meta Link Module Link Base Module base EI MUKANA b, i, map, frame, style, MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 22

23 Teksti Tekstin esittämistavat: tekstin merkitystä kuvaavat merkinnät vs. tekstin ulkoasua kuvaavat merkinnät, vrt: <del>xhtml 1.0</del><ins>XHTML 1.1</ins> on HTML:n uusin virallinen versio. <small>tavallista pienempää tekstiä.</small> <code> function tervehdi() { alert( Moro nääs! ); } </code> Tekstin jako, kappaleet ja otsikot (p, div, h1-h6, ), tekstin merkitystä kuvaavat elementit (abbr, acronym, cite, code, dfn, rm, 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, ) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 23

24 Hypertekstilinkit Hypertekstiä syntyy erityisen ankkuri-elementin avulla. <a href=" kotisivu</a> <a href="../index.html"><< Etusivulle</a> <a href="sarjat/julmahuvi/">studio Julmahuvi</a> ei jätä kylmäksi! Nimetyt ankkurit: linkin kohteen osoittaminen HTML-dokumentin sisällä <p><a name="lasi">lasi</a> on vauhdikas neuvostoliittolainen toimintajännäri entisen KGB-agentin odysseiasta...</p> <a href= elokuvat.html#lasi >Lasi</a> Oleellisesti samaan päästään myös id-attribuutin käytöllä nimeämällä elementti <p id="lasi">lasi on vauhdikas neuvostoliittolainen toimintajännäri entisen KGB-agentin odysseiasta...</p> HTML-dokumenttien ohella linkit voivat viitata myös muihin tiedostoihin, tällöin tiedostojen käsittely riippuu selainohjelmasta (plugins, helper applications, ): Vilkaise myös <a href="viruscontainer.doc">virustiedote</a>! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 24

25 Entiteetit, merkkiviittaukset, metatieto ja objektit HTML-dokumentin sisään voi upottaa myös (korvattavien elementtien avulla) objekteja, joita HTML ei suoraan sisällä kuten kuvia sekä entiteetti- ja merkkiviittauksia, esim: <img src="pic.jpg" alt="kuva"> Hyvää yötä ABC HTML-metatiedon avulla taas voidaan toteuttaa esim. client pull -operaatio tai vain kuvailla dokumentin sisältöä: <meta http-equiv="refresh" content="0;url=./dir.cgi"> <meta name="keywords" lang="en" content="mathm-37000, hmp"> Objektien käsittely HTML-kielen ulkopuolella (object- ja embed-tagit) Lisää ominaisuuksia: skriptit (script) ja appletit (applet& object) - Java, JavaScript, VBScript, MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 25

26 Taulukot, kuvat, kuvakartat, table (taulukko), esim. <table> <thead><tr><td>nimi</td><td>sijainti</td></tr></thead> <tbody><tr><td>miska</td><td>helsinki</td></tr></tbody> </table> img (kuva) map (selainpäässä toimivan kuvakartan tekeminen) <img src="miska.jpg" usemap="miskamap" alt="miska, Martti ja James"> <map name="miskamap"> <area shape="rect" coords="20,50,170,300" href="martti.html" alt="martti valmiina"> <area shape="circle" coords="220,220,50" href="jousi.html" alt="nuolessa on nukutusainetta"> </map> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 26

27 Palvelinpään kuvakartan toteuttaminen onnistuu myös (edellyttäen tosin CGI-skriptin tms. kirjoittamista) <p> <a href=" <img src="kisa.gif" ismap alt="missä jallu luuraa?"></a> </p> Sovelman lisääminen sivulle onnistuu applet- ja object-elementtien avulla: <applet code="nervoustext.class" width="375" height="50"> <param name=text value="hypermedian perusteet"> </applet> <object codetype="application/java" classid="java:nervoustext.class" width="375" height="50"> <param name="text" value="hypermedian perusteet"> </object> object-elementin avulla HTML-dokumenttiin voidaan periaatteessa upottaa mitä tahansa (toinen HTML-dokumentti, appletti, kuva, tai jokin muu, läh. pluginin tulkitsema & ymmärtämä resurssi) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 27

28 Kehykset Varoituksen sana heti alkuun: kehysten käyttö on teknisesti mahdollista ja helppoa, käytännön sovellustyössä niitä kannattaa kuitenkin välttää (keksitkö miksi?). Selaimen hierarkkisen ikkunarakenteen määrittäminen tapahtuu kehysten (frame) 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>hmp05 kehyksillä <title> <frameset cols="150,*"> <frame src="valikko.html" name="valikkokehys"> <frame src="etusivu.html" name="sisaltokehys"> <noframes> Selaimesi ei tue kehyksiä, valitse <a href= eikehyksia.html >kehyksetön versio</a>. </noframes> </frameset> </html> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 28

29 Linkkien avautumisikkunan osoittaminen tapahtuu target-attribuutilla 2. HTML ja rakenteinen merkkaus Takaisin <a href="etusivu.html" target="sisaltokehys">etusivulle</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="sisaltokehys"></head> HTML 4.0:n myötä myös ns. inline-kehysten (ns. kelluva kehys) käyttö on periaatteessa mahdollista iframe-koodin avulla (selaintuki tiettyjen ominaisuuksien suhteen vaihtelee!): <p>ajankohtaista: <iframe src="ajankohtaista.html" width="150" height="100" align="right"> <p> Selaimesi ei tue kelluvia kehyksiä, valitse <a href="ajankohtaista.html">ajankohtaista</a> nähdäksesi tuoreimmat kuulumiset. </p> </iframe> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 29

30 Kuvaileva vai formatoiva merkkaus? HTML-kielen avulla voi tehdä sekä kuvailevaa että formatoivaa merkkausta Kuvaileva merkkaus pyrkii esittämään tiedon rakennetta Formatoiva merkkaus pyrkii esittämään paitsi tiedon rakenteen niin myös sen esitystavan HTML:ää käyttäessä tavoitteena tulisi pääsääntöisesti olla kuvaileva merkkaus: Kuvailevassa HTML-merkkauksessa ei kerrota mitään dokumentin tyyleistä, vaan ainoastaan sen rakenteesta ja sisällöstä Tyyli liitetään dokumenttiin erillisellä tyylitiedostolla (näistä tuonnempana) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 30

31 Dokumentin validointi ja sen merkitys Varsinkin HTML:ää käsin kirjoittaessa virheitä tulee helposti tehtyä. Kaikki virheet eivät kuitenkaan näy selaimella. Selaimet jäsentävätkin HTMLdokumentteja usein hyvin ymmärtäväisellä asenteella: - selaimet ohittavat virheet ja tuntemattomat koodit ellei toisin määrätä - luovat arvaukset (esim. "<" ja ">" -merkit) Eri selaimet voivat kuitenkin tulkita virheellisesti kirjoitetun merkkauksen eri tavalla: tällöin sivu näyttää eri selaimilla erilaiselta ja ongelmia tulee HTML:n voi kuitenkin tarkastaa validoivan HTML-jäsentimen avulla. Validoiva HTMLjäsennin tarkistaa, että kirjoitetun dokumentin kielioppi ja rakenne vastaavat standardia: Verkko on saatavilla erityisesti W3C:n HTML validaattori-palvelu: MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 31

32 Demo: Validaattorin käyttö Kokeillaan HTML:n validointia W3C:n HTML Validator palvelun avulla Huomaa: Validius ei takaa sitä, että elementtejä on käytetty kuvailevan 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, MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 32

33 2.4 HTML-lomakkeet ja palvelinohjelmointi MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 33

34 Lomakkeet Lomakkeet (form) tarjoavat HTML-kehittäjälle keinon rakentaa yksinkertaisia HTMLperustaisia käyttöliittymiä jotka koostuvat nappuloista, tekstikentistä, edit-ikkunoista jne. Lomakkeet eivät sellaisenaan tee yhtään mitään; lomakkeiden toiminnallisuuden määrittely tehdään käytännössä joko selain- tai palvelinpään skriptien avulla Käydään seuraavaksi läpi lomakkeiden toteuttamista sekä lyhyesti sitä kuinka lomakkeita voidaan periaatteessa käsitellä MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 34

35 Demo: Lomakkeen elementit HTML 4.01 ja XHTML 1.0 määrittelevät seuraavat lomake-elementit: form input button select, optgroup, option textarea isindex label fieldset, legend Käydään näistä läpi keskeisimpiä MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 35

36 Demo: Pieni lomake-esimerkki Esimerkki: <form action=" method="post"> <p><label> Nimi: <input type= text name= firstname > </label></p> <p> <input type="radio" name="sex" checked="checked" value="female">nainen <br> <input type="radio" name="sex" value="male">mies </p> <p><input type="submit" value="lähetä"></p> </form> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 36

37 Lomakkeen toimintaperiaate Lomakkeeseen määritellyt syötekentät annetaan käyttäjälle täytettäväksi Valmis lomake lähetetään eteenpäin käsiteltäväksi Normaalisti lähetys tehdään merkkaamalla lomakkeeseen submit-nappi Lomakekäsittelijä määritellään form-elementin action-attribuutilla Lomakkeeseen syötetyt tiedot välittyvät annettuun kohteeseen lomake itsessään ei käsittele tulosta vaan ainoastaan mahdollistaa tietojen täyttämisen MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 37

38 Lomakevastauksen koodaus Lomakkeeseen syötetyt tiedot lähetetään HTTP-viestinä käsittelijänä. Lomakkeen tiedot tallentuvat avain-arvo -pareina: Avain = lomakekentän nimi (name-attribuutti) Arvo = lomakkeen sisältö (usein value-attribuutti) Viestin koodaustapa riippuu valitusta lähetystavasta (form:n method-attribuutti) Vaihtoehtoja ovat GET ja POST Oletusarvo on GET Oikean metodin valinta ei ole yksinkertaista. Eräs nyrkkisääntö (ks. 1 ): GET jos lomaketta käytetään kysymys-tyyppisesti (esim. Hakukoneessa) POST jos lomake on enemmänkin kertaluontoinen tilaus 1 MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 38

39 Lomakkeen lähetys GET-metodilla (syventävää tietoa) <form action=... method= GET > Käsittelijälle lähetetään tavallinen sivunhakupyyntö (GET) Lomakkeelle annetut parametrit koodataan suoraan palvelimelta pyydettävään URLosoitteeseen: Rajallinen kapasiteetti (yli 2048 merkkiä pitkä URL ei välttämättä toimi) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 39

40 Lomakkeen lähetys POST-metodilla (syventävää tietoa) POST-metodi: <form action=... method= POST > Lähetetään GET-hakupyynnön sijaan POST-pyyntö Lomakkeen data koodataan HTTP-viestin sisällöksi URL taas ei muutu POST / HTTP/ Content-Type: application/x-www-form-urlencoded Content-Length: 25 firstname=matti&sex=male Suuriakin määriä dataa voidaan siirtää. Palvelin usein määrittelee kuitenkin maksimin mitä se suostuu ottamaan vastaan (usein 10 megatavua) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 40

41 Lomakekäsittelijän toteuttaminen: idea HTML ei määrittele tapaa, jolla lomakkeenkäsittelijä toteutetaan. Lomakkeiden käsittelyyn tarvitaan ohjelmointia! Idea on seuraava: Kun tavallisesti web-palvelimen saa sivupyynnön, se lähettää vastauksena staattisen HTML-dokumentin (tai kuvan) Kun kyseessä on lomakkeen käsittelijä, haluttaisiin kuitenkin staattisen dokumentin lataamiseen sijaan ajaa ohjelma, joka käsittelee lomakkeen Kun ohjelma on valmis, se palauttaa lopputuloksena esimerkiksi HTMLdokumentin. Kaikki käsittely tapahtuu palvelinpäässä asiakaspäässä mikään ei näennäisesti muutu MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 41

42 CGI Ohjelman ajamiseen palvelinpäässä on useita vaihtoehtoja yksi niistä on CGI CGI (Common Gateway Interface) on standardi menettely ulkoisten ohjelmien ajamiseen web-palvelimella CGI ei rajoita ajettavien ohjelmien toteutustekniikkaa. Ohjelmat voidaan kirjoittaa esim. C:llä ja kääntää palvelimella ajettaviksi komentoriviohjelmiksi. Usein CGI-ohjelmat kirjoitetaan jotain skriptikieltä käyttäen. Tällöin vältytään kääntämiseltä ja ohjelmia on nopea kokeilla ja muuttaa MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 42

43 Demo: Lomakkeenkäsittelijän toteuttaminen sh-skriptillä Koodataan käsittelijä (handler.cgi) #!/bin/sh echo "Content-type:text/html" echo "" echo "<html><title>skriptidokumentti</title><body>" date echo "<hr>parametri: <b>" echo $QUERY_STRING echo "</b>" echo "</html></body>" Käytännön vinkkejä: Tavallisesti staattiset HTML-dokumentit sijoitetaan palvelimella public_htmlkansioon CGI:n kautta ajettavat ohjelmat sijoitetaan tavallisesti puolestaan cgi-bin-kansioon.cgi-päätteen käyttäminen takaa, että tiedosto varmasti ajetaan ohjelmana (ei näytetä sellaisenaan käyttäjälle) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 43

44 Parempia vaihtoehtoja CGI:lle? (syventävää tietoa) CGI:n avulla on helppo esitellä periaate, kuinka palvelinohjelmat toimivat Käytännössä CGI ei kuitenkaan ole tehokkain tai paras vaihtoehto Vaihtoehtoja CGI:lle: FastCGI CGI:ssä jokainen palvelupyyntö on oma prosessi. FastCGI-rajapinnassa ongelma korjautuu ja pyyntöjen käsittely on tehokkaampaa Skriptitulkin ajo suoraan web-palvelimella Toteutusteknologiakohtainen ratkaisu: esimerkiksi Python-koodia voi ajaa Apache-palvelimella mod_python-laajennuksella MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 44

45 Muutamia skriptikieliä palvelinohjelmointiin (syventävää tietoa) PHP ( Erittäin suosittu Perl ( Vanhempi skriptikieli. Nykyään vähemmän käytössä Python ( Erityisesti isoissa sovellusprojekteissa käytetään skriptikielen lisäksi soveltuvaa web-ohjelmointikehystä (esim. Pythonilla TurboGears tai Django) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 45

46 HTML-resursseja verkossa W3C:n johdanto HTML-kieleen Ks. Kohta Getting started with HTML HTML 4 spesifikaatio josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" XHTML 1.0 spesifikaatio HTML validaattori-palvelu Toisin kuin selaimet, validaattori löytää pienimmätkin merkkausvirheet. 2 2 Kuva: jesper / Flickr.com ( Joitain oikeuksia pidätetään. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 46