3 WWW-hypermedian perusta: HTML

Transkriptio

1 3 WWW-hypermedian perusta: HTML 3 WWW-hypermedian perusta: HTML HTML (Hypertext Markup Language) on tapa koodata (merkata) rakenteisia (teksti)dokumentteja WWW:ssä Esimerkki: Tästä kaikki alkaa <HTML> <HEAD> <TITLE>Ensimmäinen HTML-dokumentti</TITLE> </HEAD> <BODY bgcolor="#ffff80"> <H1>Preludi</H1> <P>Moi maailma!</p>  <P>Lisää aiheesta löydät osoittesta <A href=" Home Page</A>.</P> <P><img src="logo.gif"></p> <HR> <P>Tämän dokumentin kirjoitti <cite>ossi</cite>, </BODY> </HTML> Huomioita: rakenne, elementit, tagit, attribuutit, (puutteellinen merkkaus!) HYPERMEDIAN PERUSTEET (syksy 2004) 66

2 Hypertext Markup Language HTML on laitteistoriippumaton & standardi merkintäkieli WWW-hypermedian tekemiseen Käytössä on useita eri HTML-versioita, nykyinen suositus HTML 4.01 (viimeisin syntaktinen suositus 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, user agent, web client) avulla Sopivasti WWW:hen sijoitettuna HTML-dokumentteja on mahdollista lukea miltä tahansa WWW:hen kytketyltä selaiohjelmalta (Web ~ HTTP-palvelinten verkosto) HYPERMEDIAN PERUSTEET (syksy 2004) 67

3 HTML:n historia on lyhyt ja menestyksekäs 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. - laajennuksa 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 Marraskuussa 1995 perustettiin HTML ERB (editoral review board) - yritysosapuolten ottaminen mukaan kehitystyöhön - tavoitteena yhdenmukaisen standardin luominen HYPERMEDIAN PERUSTEET (syksy 2004) 68

4 HTML 3.2 tammikuussa 1997 (~parhaiten tuettu HTML-versio?) 1997 ERB korvattiin nykyisillä W3C:n työryhmillä Seuraava HTML-versio (4): Cougar... HTML 4.0 huhtikuussa 1998 Joulukuussa 1999 HTML 4.01 ( ) - kehykset - objektit - kansainvälisyys ja monikielisyys - siirtyminen tyylien käyttöön (style sheets) - parantunut tuki skripteille 3 WWW-hypermedian perusta: HTML HTML 4 on käytännössä varsin laaja merkintäkieli, käsittäen kuvauksen yli 90 elementille ja 100:lle attribuutille Nykypäivän HTML = HTML 4 (pilkottavissa XHTML:n myötä osiin) - SGML-syntaksi (HTML 4.01) - XML-syntaksi (XHTML 1.0) HTML-jatkokehitys HYPERMEDIAN PERUSTEET (syksy 2004) 69

5 HTML-evoluutio pähkinänkuoressa HTML 4.01 CSS2 CSS1 HTML 4.0 HTML 3.2 Modularization of XHTML XHTML 1.0 HTML 3.0 XHTML 1.1 XSL... HTML XML Namespaces HTML-kivikausi SGML XML XML HYPERMEDIAN PERUSTEET (syksy 2004) 70

6 HTML:n tulevaisuus Viimeisin HTML-sukupolvi poikkeaa nykyisestä SGML-kehityskaaresta: XHTML 1.0 (ks. ) - HTML 4:n semantiikka - perustana XML ja sitä kautta syntaksin täsmentäminen & uudelleenmuotoilu - päämääränä modulaarinen (X)HTML - XML-laajennusosat ja XML-stdperhe, tietokantojen käytön huomioiminen, jne. HTML on ollut ja tulee olemaan WWW:n kehityksen aallonharjassa. Haasteita: - ohjelmistotuotteiden rinnakkainen Web-kehitys - uudet laitteet: verkkotietokoneet, matkapuhelimet, Netti-TV, - WAP & WML, jne. HTML tulee jatkamaan olemassaoloaan suuren suosionsa, levinneisyytensä ja helppoutensa ansiosta (arvio: 2002 lopussa 75% UA:ista ei enää pöytämikr.) HYPERMEDIAN PERUSTEET (syksy 2004) 71

7 HTML:n kielioppi HTML on SGML-merkintäkielen (ISO 8879:1986) pohjalta kehitetty merkintäkieli; uusin 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> HTML-koodien perusideana on merkata dokumentin looginen rakenne - tekstin merkitystä kuvaileva merkkaus; ulkoasu määritellään tyyleillä 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 HYPERMEDIAN PERUSTEET (syksy 2004) 72

8 Merkkauksen perusteet HTML-merkkauksen perusta on HTML-dokumenttien hierarkkinen elementtirakenne Dokumentti muodostaa puumaisen, aidosti sisäkkäisen elementtirakenteen, joka elementtien esiintymäkohdat merkataan elementtien alku- ja loppukoodeilla (tai tyhjän elementin koodeilla) - tuloksena puurakenne Elementtejä on kahta perustyyppiä: 1) (epätyhjiä) elementtejä, joilla voi olla sisältönä tekstiä tai toisia elementtejä ja 2) tyhjiä elementtejä Elementit merkataan dokumenttiin elementtien alku- ja lopputagien avulla. Poikkeuksena tyhjät elementit merkataan tyhjän elementin tagi Esimerkki: <P>Elementti p merkkaa kappaleen</p> <IMG src="kuva.gif" alt="esimerkki kuvan sijoittamisesta"> XHTML-suosituksen mukaan tyhjät elementit pitäisi kirjoittaa XML-syntaksin mukaisesti erityisen tyhjän elementin koodin avulla, siis muodossa (pulmat!) <img src="kuva.gif" alt="esimerkki kuvan sijoittamisesta" /> HYPERMEDIAN PERUSTEET (syksy 2004) 73

9 Joillekin elementeille voidaan antaa myös attribuutteja (abstrakteja ominaisuuksia/parametreja) 3 WWW-hypermedian perusta: HTML 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, jätetään se huomiotta (tästäkin seuraa kaikenlaisia ongelmia) 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> HYPERMEDIAN PERUSTEET (syksy 2004) 74

10 Esimerkki: HTML-elementtiin liittyvät termit tarkemmin <p align="left">elementti p merkkaa kappaleen</p> Termit: elementti: <p align="left">elementti p merkkaa kappaleen</p> elementin (tyypin) nimi: p " sisältö: Elementti p merkkaa kappaleen " alkutagi: <p align="left"> " lopputagi: </p> attribuutti: align="left" attribuutin nimi: align " arvo: left 3 WWW-hypermedian perusta: HTML Esitettävät elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) (tai lohkotyylin erikoistapauksena listatyylisiä objekteja ([list item])), vrt. esim: <H3>Otsikko</H3> <P>STRONG on <STRONG>tekstityylinen</STRONG> elementti.</p> <ol> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ol> Lohkotyyliset objektit esitetään suorakaiteena (margin/border/padding -attribuutit), tekstityyliset merkkivirtana ja listatyyliset lohkotyylin erikoistapauksena suorakaiteena Yleisiä HTML-ohjeita & -nyrkkisääntöjä: HYPERMEDIAN PERUSTEET (syksy 2004) 75

11 - huomaa termien "elementti" ja "tagi" ero - elementtien ja attribuuttien nimet kannattaa kirjoittaa pienillä kirjaimilla (siitäkin huolimatta, että HTML 4 ei erottele isoja ja pieniä kirjaimia) - elementin alku- ja lopputagit tulee aina merkitä näkyviin, vaikka ne saisikin lyhennysmielessä jättää pois - attribuuttien arvot tulee aina ympäröidä heitto- tai lainausmerkein (siitäkin huolimatta, että HTML 4 ei sitä aina pakota) - <-merkki (kun ei merkkausta) pitää aina esittää muodossa < vaikka selain sen halutulla tavalla tulkitsisikin - HTML-spesifikaatio luettelee kaikki sallitut elementit ja attribuutit (näitä kutsutaan HTML-sanastoksi) Elementtien lisäksi HTML-dokumentissa esiintyy muutakin merkkausta; - kommentteja - merkkiviittauksia - entiteettiviittauksia - alussa dokumentin tyyppijulistus (kerrotaan dokumentin DTD) HYPERMEDIAN PERUSTEET (syksy 2004) 76

12 - mahdollisesti XML-julistus & nimiavaruuden ilmoittava parametri (tosin vain XHTMLdokumenteissa) Esimerkki: Kommentti & merkki- ja entiteettiviittaukset  Seuraavaan kohtaan kirjoitetaan iso A-kirjain: A Seuraavaan kohtaan kirjoitetaan pieni ä-kirjain: ä Esimerkki: Dokumentin alusta voi löytyä tyyppijulistus <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html>... Esimerkki: Dokumentin alusta voi löytyä myös XML-julistus ja nimiavaruuden määrittävä attribuutti <?xml version="1.0"?> <html xmlns=" Nimiavaruudet yms. liittyvät XML-määritystaustaan (näihin ei vielä HTML-opiskelun alkuvaiheessa tarvitse kiinnittää vielä yksityiskohtaista huomioita) HYPERMEDIAN PERUSTEET (syksy 2004) 77

13 HTML-dokumentin sisältö jäsennetään & tulkitaan merkatusta tekstistä - merkkaukseen varatut erikoismerkit on koodattava (esim. "<"-merkki ei saa esiintyä sisällössä, vaan se on korvattava esim. < -entiteettiviittauksella, vastaavasti & on korvattava & -entiteettiviittauksella) - myös muut merkkaukseen varatut merkit (>, ja ) kannattaa korvata niitä vastaavilla entiteettiviittauksilla (>, " ja ') - rakenteinen ajattelu: tekstinpätkän merkitys riippuu elementistä, jonka sisällä se sijaitsee - tyhjämerkkien tulkinta & normalisointi (myös attribuuttien arvoissa) - XHTML-dokumenteissa erikoismerkit on koodattava myös attribuuttien arvoissa (ongelmia luvassa nykyselaimille, tämänkin voi aluksi jättää huomiotta) HTML-kieli sisältää karkeasti luokiteltuna kolmentyyppistä merkkausta liittyen dokumentin loogiseen rakenteeseen, ulkoasuun ja formatointiin ja dokumentista ilmi käyvään tai sen tulkitsemisessa tarvittavaan metatietoon HYPERMEDIAN PERUSTEET (syksy 2004) 78

14 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ä HYPERMEDIAN PERUSTEET (syksy 2004) 79

15 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ää) HYPERMEDIAN PERUSTEET (syksy 2004) 80

16 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 HYPERMEDIAN PERUSTEET (syksy 2004) 81

17 Keskeinen HTML-merkkaus == XHTML Basic HTML 4 on varsin laaja spesifikaatio -- no mikäs sitten on keskeisin osa HTML:ää? (kohtuullisen hyvä) vastaus: XHTML Basicin sis. 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, Sitten takaisin koko HTML-merkkauksen esittelyyn HYPERMEDIAN PERUSTEET (syksy 2004) 82

18 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 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, 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, ) HYPERMEDIAN PERUSTEET (syksy 2004) 83

19 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>! HYPERMEDIAN PERUSTEET (syksy 2004) 84

20 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"> Hyv&aml;&aml; y&oml;t&aml; 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=" , hp"> Objektien käsittely HTML-kielen ulkopuolella (OBJECT ja EMBED -tagit) Lisää ominaisuuksia: skriptit (SCRIPT) ja appletit (APPLET & OBJECT) - Java, JavaScript, VBScript, HYPERMEDIAN PERUSTEET (syksy 2004) 85

21 Taulukot, kuvat, kuvakartat, TABLE, esim. <TABLE> <THEAD><TR><TD>Nimi</TD><TD>Sijainti</TD></TR></THEAD> <TBODY><TR><TD>Miska</TD><TD>Helsinki</TD></TR></TBODY> </TABLE> IMG MAP (selainpäässä toimivan kuvakartan tekeminen) <IMG src="miska.jpg" usemap="miskamap" alt="miska ja tutkijat"> <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"> HYPERMEDIAN PERUSTEET (syksy 2004) 86

22 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) HYPERMEDIAN PERUSTEET (syksy 2004) 87

23 Kehykset 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>HyPer -04 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> HYPERMEDIAN PERUSTEET (syksy 2004) 88

24 Linkkien avautumisikkunan osoittaminen tapahtuu TARGET-attribuutilla 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 on tosin rajallinen): <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> HYPERMEDIAN PERUSTEET (syksy 2004) 89

25 Skriptit Skriptit (script) tarjoavat HTML-kehittäjälle keinon ohjelmoida dokumenttien käyttäytymistä (ellei toisin mainita, yleensä HTML:n yhteydessä skripteistä puhuttaessa tarkoitetaan poikkeuksetta selainpäässä toteutettavia skriptejä) Skriptikieliä on useita erilaisia, skriptien käyttö on kuitenkin taas mahdollista vain, mikäli käytettävä selainohjelma skriptikielen toteuttaa Yleisimpiä skriptikieliä ovat (kutakuinkin tässä järjestyksessä): JavaScript ja Visual Basic Script (VBScript) ( ECMAScript) Skriptit ovat erityisesti dynaamisen HTML:n (DHTML) perusta; ideana on skriptien avulla tuottaa HTML-dokumentteja (dokumenttien osia) dynaamisesti ja manipuloida dokumentteja niiden käytön aikana DHTML:ää ei kuitenkaan ole standardoitu, vaan eri selainvalmistajat toteuttavat dynaamista HTML:ää hieman eri tavoin (DOMin käytön yleistyminen tuo kuitenkin asiaan helpotusta) Suomeksi sanottuna: esim. eri selaimissa toimivien monipuolisten JavaScriptohjelmien kirjoittaminen on yleisesti ottaen (turhan) hankalaa HYPERMEDIAN PERUSTEET (syksy 2004) 90

26 Skriptejä käyttäessä on hyvä pitää mielessä: - HTML ei määrittele yhtään skriptikieltä (joskin JavaScript ~ oletus) - HTML-dokumentin käsittely ja elementteihin viittaaminen tapahtuu jonkin muun kuin suoraan HTML-spesifikaation mukaan (yleensä jokin skriptikielen/selainvalmistajan oma rajapinta, tai jokin std-rajapinta, esim. DOM (Document Object Model)) - skriptikieli voi sisältää myös omia HTML:ään kuulumattomia selainkohtaisia käyttöliittymäkomponentteja - paljaan skriptikielen avulla (ilman esim. DOM-rajapintaa) ei selaimessa voida tehdä yleensä mitään kovin järkevää JS sisältää tyypilliset ohjelmointirakenteet sekä mahdollisuuden objektien määrittelyyn HYPERMEDIAN PERUSTEET (syksy 2004) 91

27 Esimerkkejä: C-kieltä tai Javaa hallitseville JavaScriptin perussyntaksi on tuttua; var m="merkkijono",k=1.2; if (condition) { statements1; } else { statements2; } for (initial-statement; test; increment) { statements; } k = Math.floor(k); Jne. Ks. esim. Ks. esim. Esimerkkejä, ks. esim. Bookmarkletit ovat JavaScriptillä toteutettuja selaimen kirjanmerkkeihin tallennettavia toimintoja, ks. & JavaScript on olennaisilta osiltaan standardoitu ECMAScriptin muodossa (ks HYPERMEDIAN PERUSTEET (syksy 2004) 92

28 Laajempi esimerkki: funktio, parametrit, vertailua & ikkunoiden avaamista <HTML> <HEAD><TITLE>Arvaa numero!</title> <SCRIPT type="javascript"></SCRIPT></HEAD> <BODY> <FORM name="guessform" action=""> <P> <INPUT type="text" value="1" name="guessfield"> <INPUT type="button" value="kokeile" onclick="check( guessfield.value, 3)"></P> </FORM> </BODY></HTML> HYPERMEDIAN PERUSTEET (syksy 2004) 93

29 DOM DOM (Document Object Model) ei sisälly HTML-määritykseen, vaan kyseessä on oma standardinsa Skriptien yhteydessä DOM on erittäin keskeinen määritys sillä käytännössä kaikki järkevä HTML-prosessointi perustuu standardimuotoisen dokumenttiobjektimallin käyttöön DHTML DOM, W3C DOM MS DHTML, ks. entry.asp W3CDOM, ks. & HUOM: Nykyisten JavaScript- ja DOM-toteutusten kirjavuus eri selaimissa tekee JavaScriptin käytännössä lähes hyödyttömäksi tekniikaksi (valtava ylläpito & tutkimustyö jotta toimisi asiakkailla luotettavasti) HYPERMEDIAN PERUSTEET (syksy 2004) 94

30 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 (esim. JavaScript, VBScript, CGI, Servlet) Esimerkki: <FORM action=" " method="post"> <P><LABEL for="firstname">etunimi: </LABEL> <INPUT type="text" id="firstname"><br> <LABEL for="lastname">sukunimi: </LABEL> <INPUT type="text" id="lastname"><br> <INPUT type="radio" name="sex" checked="checked" value="female"> Nainen<BR> <INPUT type="radio" name="sex" value="male"> Mies<BR> <INPUT type="submit" value="lähetä"> </P> </FORM> HYPERMEDIAN PERUSTEET (syksy 2004) 95

31 CGI-standardin idea & perusrakenne (Common Gateway Interface) GET & POST, uploading, tiedon koodaus, yms. CGI-skriptien kirjoittaminen Esimerkki: #!/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>" Tietoturvariskit! (mieti yo. esimerkkiä ) 3 WWW-hypermedian perusta: HTML Skriptit, cgi-bin-hakemistot ja HTTP-palvelimet (fiksumpi tapa? PHP, ASP, ColdFusion, Zope, Servletit, ) Ks. esim HYPERMEDIAN PERUSTEET (syksy 2004) 96

32 Tyylien käyttö Tyylien (style) ideana on HTML:n tapauksessa erottaa toisistaan dokumentin rakenne ja ulkoasu Tavoitteena on, että dokumentin loogisen rakenteen ja ulkoasun koodaus erotetaan toisistaan fyysisesti, mikä tehostaa ja helpottaa dokumentin ylläpitoa helpottaen esim. systemaattisten ulkoasullisten muutosten tekemistä Tyylikieliä on olemassa useita erilaisia; perusidea on kuitenkin (rakenteisen dokumentin elementtien) formatointiominaisuuksien määrittäminen ja tyylikielen syntaksin kuvaileminen Tyylikielen X käyttö sovelluksessa Y on mahdollista vain mikäli sovelluksessa käytettävä selainohjelma Z tyylin toteuttaa (tai: muuntaminen) Ulkoiseen tyylitiedostoon viittaaminen tapahtuu HEAD-elementtiin sijoitettavan LINKelementin avulla: <LINK href="mobiili.css" rel="stylesheet" type="text/css"> HYPERMEDIAN PERUSTEET (syksy 2004) 97

33 Dokumenttikohtainen tyylimääritys HEAD-elementtiin sijoitettavan STYLE-elementin avulla, esimerkkinä CSS-sääntö <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> Lisäksi mahdollisuus myös elementtikohtaisten tyylimääritysten antamiseen (inline), mutta käyttöä ei suositella, koska tyylien käytön perusidea on erotella HTMLdokumentin rakenne ja ulkoasu <P style="font-size: 12pt; color: fuchsia">asiaa!</p> Tyylien käyttö edellyttää tietenkin käytetyn tyylikielen osaamista. Ed. esim. ovat CSStyylistandardin mukaisia (ks. ) - formatoitava elementti valitaan säännöllä (valitsimet) - säännön valitsemien elementtien formatointi annetaan ominaisuusmääritteillä (+limitys & perintä) HYPERMEDIAN PERUSTEET (syksy 2004) 98

34 Tyylien käytön perusidea HTML:n yhteydessä tyylien käytön perusidea on dokumentin HTML-merkkauksen ja dokumentin ulkoasun erottaminen toisistaan (syy: ylläpito) - dokumentin asiasisältö merkataan kuvailevan merkkauksen keinoin (esim. h1, p, address, ei b, i tai font) - ja merkattujen HTML-elementtien ulkoasu kuvataan CSS-sääntöinä (vieläpä siten, että yhtä tyylitiedostoa käytetään monen HTML-dokumentin yhteydessä) dokumentin ulkoasun CSS-koodaus CSS-tiedosto asiasisältö CSS-tiedosto CSS-tiedosto asiasisällön (rakenteen) HTML-merkkaus HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HYPERMEDIAN PERUSTEET (syksy 2004) 99

35 Esimerkki tyylien käytöstä Seuraava dokumentti koostuu kolmesta tiedostosta: esim.html (sisältö & rakenne), kuva.gif (dokumenttiin upotettu kuva) ja esim.css (ulkoasun määrittely): tiedosto esim.css BODY { background: white; } H1 { color: black; font-size: 20pt; font-weight: bold; } P { color: blue; font-size: 12pt; } tiedosto esim.html: <HTML> <HEAD><TITLE>Moi maailma!</title> <LINK rel="stylesheet" type="text/css" href="basic.css"> </HEAD> <BODY> <H1>Esimerkki</H1> <P><IMG SRC="lamppu.gif" alt="syttynyt lamppu">dokumenttien kirjoittaminen on oikeastaan aika helppoa.</p> </BODY> </HTML> HYPERMEDIAN PERUSTEET (syksy 2004) 100

36 HTML-jäsentimistä Vanhan käytännön mukaisesti HTML-dokumentteja jäsennetään 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-jäsentimiä, joiden avulla myös HTMLdokumenttien kielioppi ja rakenne on mahdollista tarkastaa: ks. esim: - W3C HTML Validation Service ( ) Validius ei kuitenkaan 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, HYPERMEDIAN PERUSTEET (syksy 2004) 101

37 Yleisiä huomioita HTML-dokumenteista ja niiden kirjoittamisesta Osa määrityksestä olettaa toisten spesifikaatioiden olemassaolon (kielikoodit ja linkkiviittaukset, tagit IMG, FORM, SCRIPT, APPLET, STYLE, OBJECT, ) Osa tageista voidaan käytännössä pudottaa pois, lopputagien käyttö ei ole aina pakollista, attribuuttien arvot eivät tarvitse aina lainausmerkkejä (mutta näin ei PITÄISI tehdä) Elementtien järjestys ei ole aina tarkkaa ja isot ja pienet kirjaimet eivät ole merkittäviä elementtien nimissä (XHTML:n myötä kaikki pitäisi kirjoittaa pienellä) 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) HYPERMEDIAN PERUSTEET (syksy 2004) 102

38 Osa elementeistä on kontekstisidonnaisia, osa ei, vrt. esim: 3 WWW-hypermedian perusta: HTML <HR> <B>Hei vaan!</b> <TABLE><TR><TD>Esimerkkisolu</TD></TR></TABLE> <UL> <LI>inkkari</LI> <LI>astronautti</LI> <LI>vompatti</LI> </UL> 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 HYPERMEDIAN PERUSTEET (syksy 2004) 103

39 Käytössä on virallisestikin eri HTML-versioita (läh. HTML 3.2 ja 4.01 sekä XHTML 1.0 ja Basic) ja näiden (HTML 4.01 & XHTML 1.0) vaihtoehtoisia tyyppimäärityksiä (Strict, Transitional, Loose) Uusia ominaisuuksia ja käyttötapoja tulee koko ajan lisää vielä erilaisten selainlaajennusten (plug-in, ActiveX yms.) ja integroitujen WWW-ylläpitotyökalujen kautta Kaikkia HTML standardissa esitettyjä osia ei tueta yleisesti lainkaan, ei ainakaan oikein Harkitut selainsodat haittaavat laajaan käyttäjäkuntaan tähtäävän kehittäjän työtä joskus tarkoituksellisestikin (ongelma on tosin pienenemään päin) - HTML-dokumenttien oikein muodostettu rakenne - Java-virtuaalikoneet ja JavaScript vs. VBScript - dokumenttimallien eroavaisuudet eri selaimissa - tyylikielten eri tulkinnat - Java, ActiveX, JavaBean, yms. sotkut - IE:n rooli osana Windows-käyttöjärjestelmää (esim. ohjelmien päivitys) HYPERMEDIAN PERUSTEET (syksy 2004) 104

40 Mitä HTML:llä saa aikaan? Tekstiä, hypertekstiä ja hypermediaa sen mukaisesti, mitä laajennuksia otetaan käyttöön Perus-HTML: muotoiltua (hyper)tekstiä, jonka seassa - kuvia, taulukoita, listoja, - lomakkeita, symboleita,... Laajennettuna lisäksi - toimintaa lomakkeisiin (CGI, PHP, ASP, ), erikoisia fontteja (CSS1), - monipuolisia animaatioita & ääniä (pluginit), ohjelmia (objektit & sovelmat), - älykkäitä komponentteja (objektit), tietokantoja (objekteihin ja sovelmiin liittyvät standardit), HYPERMEDIAN PERUSTEET (syksy 2004) 105

41 Mitä perus-html:llä ei yksin oikein saa aikaan? Monipuolinen sivuntaitto (CSS2 tarjoaa ratkaisun tähän ainakin periaatteessa) Dynaamiset HTML-sivut Monipuolinen multimedia WWW-ohjelmat...mutta näihin kaikkiin löytyy sopivia laajennuksia sekä HTML:n että WWWpalvelimien taholta Osa HTML-koodeista itse asiassa olettaa HTML:n ulkopuolisten mekanismien käyttöä (OBJECT, SCRIPT, STYLE, ) Käytännössä esim. videoleikkeiden esittämiseen & ohjelmien ja skriptien ajamiseen vaadittava tekniikka löytyy suosituimmista selainohjelmista (tai on lisättävissä näihin selainlaajennusten muodossa) HYPERMEDIAN PERUSTEET (syksy 2004) 106

42 HTML-dokumenttien kirjoittaminen ja tuottaminen HTML:n tuottaminen valmiista lähdemateriaalista: RTFtoHTML yms. skriptit Yksinkertainen tuottaminen ja editointi (koodi suoraan HTML-muodossa) - MS Frontpage Express (ilmaisohjelma; jakelu Internet Explorerin mukana) - Mozilla Composer (ilmaisohjelma; Mozillan mukana) Kehittyneempi editointi (koodi muussa kuin perus-html-muodossa) - Macromedia Dreamweaver (ks. ) - Microsoft Frontpage 2003 (ks. ) HTML:n generointi (tieto jossain muussa muodossa kuin HTML-muodossa): dynaamiset HTML-sivut (esim. CGI, ASP & PHP) ja HTML:n tuottaminen tietokannoista ja rakenteisisita dokumenteista (esim. XML&XSLT) HYPERMEDIAN PERUSTEET (syksy 2004) 107

43 XHTML Ensimmäinen XML-kieliopin mukainen HTML-versio on XHTML 1.0 (Extensible HyperText Markup Language) - XHTML 1.0 on HTML 4 -kielen XML-kieliopin mukainen uudelleenmuotoilu - kärjistys: XHTML säilyttää HTML 4-kuvauskielen elementtien ja attribuuttien nimet ja tulkinnan entisellään, kielioppi vaihtuu XML:sta SGML:iin 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 link-attribuutit) - XHTML 1.0 Frameset on identtinen Transitional-määrityksen kanssa, paitsi: kehysten määrittelemiseen tarvittava frameset-elementti korvaa body-elementin HYPERMEDIAN PERUSTEET (syksy 2004) 108

44 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 HTMLversioissa, paitsi div- ja span-elementtien sekä class-attribuutin yhteiskäyttö): 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 HYPERMEDIAN PERUSTEET (syksy 2004) 109

45 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 tarkoituksenmukaista hypertekstiä 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 HYPERMEDIAN PERUSTEET (syksy 2004) 110

46 Huomioita XHTML:n kirjoittamisesta Elementtirakenteiden on oltava aidosti sisäkkäisiä, esim: <p><em>tärkeää</em> ja vähemmän tärkeää tekstiä.</p> - sääntö on voimassa myös SGML:n mukaisissa HTML-versiossa mutta selaimet eivät tätä (edelleenkään) yleensä tarkasta Elementtien ja attribuuttien nimet kirjoitetaan pienellä (XML erottelee isot ja pienet kirjaimet toisistaan) SGML:n lyhennemerkinnät eivät ole käytössä, joten 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ä välilyönti ennen "/"-merkkiä (parantaa yhteensopivuutta vanhojen selainten kanssa) HYPERMEDIAN PERUSTEET (syksy 2004) 111

47 Attribuutin arvon ympärillä on aina käytettävä lainaus- tai merkkejä, esim: <a href=" kotisivu</a> <img src="televisio.gif" alt='televisio, 28"'/> Yksinkertainen XHTML-dokumentti: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>taas yksi (X)HTML-esimerkki</title> </head> <body> <p>jälleen yksi <a href=" </body> </html> Huomaa: dokumentin kielioppi on XML:n mukainen mutta elementtien ja attribuuttien nimet (muutamaa lukuun ottamatta) ovat tuttuja vanhoista HTML-versioista HYPERMEDIAN PERUSTEET (syksy 2004) 112

48 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 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: - XHTML Basic: - Modularization of XHTML: - XHTML 1.1: HYPERMEDIAN PERUSTEET (syksy 2004) 113

49 HTML-resursseja verkossa Simppeli HTML-tutoriaali aloittelijoille, "Getting started with HTML" (ks. ) HTML 4.01 (ks. ) josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" (ks. ) XHTML 1.0 (ks. ) HTML 3.2 (ks. ) Vaikka selaimet eivät HTML-dokumentteja kriittisesti jäsennäkään, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. ) HYPERMEDIAN PERUSTEET (syksy 2004) 114