3 Sivupolku: metaforat & selittäminen 3 Sivupolku: metaforat & selittäminen Ennen WWW:n sisältötuotannon perustekniikoiden esittelyä luonnehditaan lyhyesti metafora-käsitettä. Yhteys aiheeseen löytyy ajatuksesta, jonka mukaan ei-triviaalin WWW-sivujen tekemistä voi verrata käyttöliittymän suunnitteluun ja toteuttamiseen (hyperdokumentin lukemisen vuorovaikutteisen perusluonteen ansiosta). Tällöin "pelkän asiasisällön esittämisen" ohella merkittävää on ilmeisesti myös se tapa, jolla asiat jäsennetään & esitetään. Metaforan rooli kaikessa tässä on tarjota käyttäjälle käsitteelliset välineet uuden oppimiseen. Tietojenkäsittely ja ohjelmistotyökalujen käyttö ja (miksei myös muiden asioiden ymmärtäminen) perustuvat käsitteellisesti metaforien käyttöön Metaforalla tarkoitetaan kuulijalle entuudestaan tuttua tai ymmärrettävää vertauskuvaa, esimerkkiä tai analogista mallia jonka kautta uuden käsitteen tai prosessin ymmärtäminen helpottuu Usein ohjelmistojen käyttöliittymät, työkalut (miksei myös teoriat) muotoillaan siten, että ne on mahdollista helposti ymmärtää joidenkin entuudestaan tuttujen käsitteiden avulla 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 66
3 Sivupolku: metaforat & selittäminen Tekeminen jäsentyy symbolien ja metaforan kautta > << > >> 12:45.00 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 67
3 Sivupolku: metaforat & selittäminen Esimerkkejä - hypertekstin intuitiivinen selittäminen onnistuu helpoimmin kartta&paikkametaforan avulla (tai suoraan sanan "verkko" avulla) - puun (graafin erikoistapaus) metafora puolestaan on puu - WYSIWYG-tekstieditorin avulla tapahtuva kirjoitustyö perustuu pitkälle ajatukseen paperille tapahtuvasta kirjoitustyöstä (+uusia ominaisuuksia) - graafisen käyttöliittymän malli tulee "toimiston pöydästä" (mukana myös selviä ristiriitoja!) - verkossa välitetään tietoa "ilmoitustaulujen", "sähköpostin" ja "kotisivujen" avulla - hyperdokumenteissa "navigoidaan" ja sähköisen kaupan sivuilta ostokset kerätään "ostoskoriin" - laskutoimituksia suoritetaan "avaruudessa", funktion integroiminen tarkoittaa "pinta-alan" laskemista, lukujono saattaa olla "suppeneva", predikaattilogiikan lauseiden "totuusarvo" selviää "mallien" avulla, jne. 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 68
3 Sivupolku: metaforat & selittäminen Huomaa: - metaforan nimi näkyy usein sovelluksen nimessä (usein metaforan käyttöä ei edes huomaa ajatella) - metaforat lisääntyvät kulttuuris-teknillisten muutosten myötä; tänä päivänä CD-soittimen ohjauspaneli sopii jo metaforaksi länsimaissa - tietokoneet ja näihin liittyvät asiat myös muuttavat vanhoja metaforia; vrt. "toimisto"-metaforan muuttuminen (arkistokaapit? kortistot? ) - esim. hyperteksti alkaa toimia jo omana metaforanaan Metaforien käyttö perustuu ajatukseen, jonka mukaan ymmärtäminen on karkeasti sanottuna kyky mallintaa (uudelleenmuotoilla) jokin ilmiö entuudestaan tuttujen käsitteiden avulla ("riittävän yhtäpitävässä" muodossa) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 69
3 Sivupolku: metaforat & selittäminen Metaforien käytön hyviä puolia: - uusia sanoja (termejä) tarvitaan vähemmän! - uusien käsitteiden omaksuminen on nopeampaa - jos metafora on soveltuva, työskenteleminen on alusta alkaen "loogista" - samantyyppisten metaforien käyttäminen eri sovelluksissa mahdollistaa tietojen ja taitojen monipuolisen käytön (ja tietämyksen "siirtämisen") Metaforien käytön huonoja puolia: - sanat (termit) voivat mennä myös sekaisin! - metaforan kautta ilmiöön saatetaan liittää vääriä olettamuksia - ilmiö saatetaan olettaa liian suppeaksi tai monimutkaiseksi - jos metaforan ymmärtämiseen liittyy "virheitä" tai huonoja työtapoja, siirtyvät samat ongelmat myös uuteen sovellukseen "Hypertekstijärjestelmän" paras käyttömetafora EI aina ole hyperteksti (!) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 70
4 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> <!-- klassinen alku, vai mitä... --> <p>lisää aiheesta löydät osoittesta <a href="http://www.w3.org/markup/">html Home Page</a>.</p> <img src="logo.gif"> <hr> <p>tämän dokumentin kirjoitti <cite>ossi</cite>, 2000. </body> </html> Huomioita: rakenne, elementit, tagit, attribuutit, (puutteellinen merkkaus!) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 71
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 ertyisen 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) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 72
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 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 73
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 ( http://www.w3.org/tr/html4/ ) - kehykset - objektit - kansainvälisyys ja monikielisyys - siirtyminen tyylien käyttöön (style sheets) - 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 Nykypäivän HTML = HTML 4 (pilkottavissa XHTML:n myötä osiin) - SGML-syntaksi (HTML 4.01) - XML-syntaksi (XHTML 1.0) HTML-jatkokehitys 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 74
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 2.0... XML Namespaces HTML-kivikausi SGML XML XML 1.0 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 75
HTML:n tulevaisuus Viimeisin HTML-sukupolvi poikkeaa nykyisestä SGML-kehityskaaresta: XHTML 1.0 (ks. http://www.w3.org/tr/xhtml1/ ) - 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.) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 76
HTML:n syntaksi 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 muotoilukomentoja ( loogiset elementit) <h1>moi maailma!</h1> HTML-koodien perusideana on merkata dokumentin looginen rakenne - tekstin merkitystä kuvaileva merkkaus; ulkoasumääritykset määr. 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 WWW-selaimet katsovat asian läpi sormien) Yksinkertaisten HTML-dokumenttien kirjoittaminen on erittäin helppoa, kirjoittaminen onnistuu millä tahansa tekstinkäsittelyohjelmalla 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 77
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 loppukoodien (tagien) avulla. Poikkeuksena tyhjät elementit merkataan tyhjän elementin koodilla Esimerkki: <p>elementti p merkkaa kappaleen</p> <img src="kuva.gif" alt="jostain syystä kuvaa ei näy?"> 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="jostain syystä kuvaa ei näy?" /> 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 78
Joillekin elementeille voidaan antaa myös attribuutteja ("abstrakteja" ominaisuuksia/parametreja) 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="jostain syystä kuvaa ei näy?"> 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> 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 79
Esimerkki: HTML-elementtiin liittyvät termit tarkemmin <p align="left">elementti p merkkaa kappaleen</p> 4 WWW-hypermedian perusta: HTML 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 Esitettävät elementit ovat joko lohkotyylisiä objekteja ([block item]), tekstityylisiä objekteja ([inline item]) (tai lohkotyylin erikoistapauksena listatyylisiä objekteja ([list item])), vrt. esim: <h3>heading</h3> <p><b>plump</b> Fiction is yet another movie with a funny name.</p> <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 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 80
Yleisiä HTML-ohjeita & -nyrkkisääntöjä: - 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 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 81
- alussa dokumentin tyyppijulistus (kerrotaan dokumentin DTD) - mahdollisesti XML-julistus & nimiavaruuden ilmoittava parametri (tosin vain XHTML-dokumenteissa) Esimerkki: Kommentti & merkki- ja entiteettiviittaukset <!-- tämä on kommentti kahden miinusmerkin sisällyttäminen kommentteihin ei ole sallittua --> 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="http://www.w3.org/1999/xhtml">... 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 82
Nimiavaruudet yms. liittyvät XML-määritystaustaan (näihin ei vielä HTMLopiskelun alkuvaiheessa tarvitse kiinnittää vielä yksityiskohtaista huomioita) HTML-dokumentin sisältö parsitaan & tulkitaan merkatusta tekstistä - merkkaukseen varatut erikoismerkit on koodattava (esim. "<"-merkki ei saa esiintyä sisällössä, vaan on annettava esim. < -entiteettiviittauksella) - 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 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 83
HTML-dokumentin yleisrakenne Jokaisella HTML-dokumentilla on tietty yleisrakenne. HTML-dokumentti koostuu (lähinnä metatietoa sisältävästä) otsikko-osasta ja (varsinaisen "asian" sisältävästä) vartalosta Esimerkki: (HTML 4.01) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>my first HTML document</title> </head> <body> <h1>heading</h1> <p>hello world!</p> <p>much a do about nothing, aye?</p> </body> </html> Suurin osa HTML-koodauksesta keskittyy body-elementin sisältöön. Framesettyyppisillä dokumenteilla body-elementti korvataan frameset-elementillä. 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 84
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 HTMLversion standardiasteesta riippuen ( ) - HTML DTD (ks. http://www.w3.org/tr/html4/ ) - XHTML DTD (ks. http://www.w3.org/tr/xhtml1/ ) 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ää) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 85
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 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 86
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 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 87
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, ) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 88
Hypertekstilinkit Hypertekstiä syntyy erityisen ankkuri-elementin avulla. <a href="http://www.fi/path/page.html">hello</a> <a href="../previous.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. Oleellisesti samaan päästään myös id-attribuutin käytöllä nimeämällä elementti <div id="funny1">once upon a time in a country far from</div> 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! 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 89
Entiteetit, merkkiviittaukset, metatieto ja objektit HTML-dokumentin sisään voi upottaa myös (korvattavien elementtien avulla) objekteja, joita HTML "ei sinällään tunne" 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öä ("kielen std-laajennukset") <meta http-equiv="refresh" content="0;url=./dir.cgi"> <meta name="keywords" lang="en" content="73270, hp"> Objektien käsittely HTML-kielen ulkopuolella (OBJECT ja EMBED -tagit) Lisää ominaisuuksia: skriptit (SCRIPT) ja appletit (APPLET & OBJECT) - Java, JavaScript, VBScript, 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 90
Taulukot, kuvat, kuvakartat, TABLE, esim. <table> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> IMG MAP (selainpäässä toimivan kuvakartan tekeminen) <img src="hmlogo.gif" usemap="#mymap" border="0"> <map name="mymap"> <area shape="rect" coords="0,0,50,50" href="koe.html" title="suorakaide"> <area shape="circle" coords="150,150,50" href="koe.html" title="ympyrä"> </map> 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 91
Palvelinpään kuvakartan toteuttaminen onnistuu myös (edellyttäen tosin CGIskriptin tms. kirjoittamista) <p><a href="http://www.acme.com/cgi-bin/competition"> <img src="game.gif" ismap alt="target"></a> Appletin 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) 73270 HYPERMEDIAN PERUSTEET (syksy 2003) 92