8 Kuvat, sovelmat ja objektit

Samankaltaiset tiedostot
Kuvat. 1. Selaimien tunnistamat kuvatyypit

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Kuva xhtml-sivulla. Mirja Jaakkola

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

ARVO - verkkomateriaalien arviointiin

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Harri Laine 1

TIEDEJUTTUKURSSI FM VILLE SALMINEN

6 Linkit ja ankkurit 69

Code Camp for Girls. Sanna Nygård. Lokakuussa

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

Tekstieditorin käyttö ja kuvien käsittely

10 Lomakkeet Kontrollit. 10 Lomakkeet

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Taulukot Päivi Vartiainen 1

Digitaalisen median tekniikat JavaScript_osa Harri Laine 1

Käyttöliittymän muokkaus

Verkkosivut perinteisesti. Tanja Välisalo

1 Yleistä Web-editorista Web-editori -dokumentin luominen Pikatoimintopainikkeet Tallenna... 3

MOODLE-OHJE: Liitetiedoston lisääminen ja päivittäminen

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

Digitaalisen median tekniikat JavaScript_osa2

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

HTML5 video, audio, canvas. Mirja Jaakkola

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

CSS - tyylit Seppo Räsänen

MOODLE-OHJE: Linkin lisääminen tehtävänannon yhteyteen. Web-linkin lisääminen

Editorin käyttö. TaikaTapahtumat -käyttöohje

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Muuttujien määrittely

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen

Käyttöohje: LAPIO latauspalvelu

TAULUKOINTI. Word Taulukot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

Skype for Business ohjelman asennus- ja käyttöohje Sisällys

Moodle 2.2 pikaohje. 1. Kirjautuminen ja omat kurssit (Työtilat) 1. Mene internet-selaimella osoitteeseen

UpdateIT 2010: Editorin käyttöohje

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

Facebook-sivun luominen

Aloitusopas verkkosivuston ylläpitoon

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

Videon tallentaminen Virtual Mapista

Skype for Business ohjelman asennus- ja käyttöohje Sisällys

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

Jypelin käyttöohjeet» Ruutukentän luominen

FrontPage Näkymät

Keravan karttapalvelun käyttöohje

3 Muotoilu 27. elementtiä käytetään ja miltä se näyttää selaimessa.

Opintokohteiden muokkaus

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

JAVA on ohjelmointikieli, mikä on kieliopiltaan hyvin samankaltainen, jopa identtinen mm. C++

elearning Salpaus Elsa-tutuksi

Jypelin käyttöohjeet» Miten saan peliin pistelaskurin?

1 Yleistä Kooste-objektista Käyttöönotto Kooste-objektin luominen Sisällön lisääminen Kooste objektiin Sivut...

Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto

Sisällysluettelo. s.1(14) CRA Computer & Robot applications Oy. v.1.2 ESITTELY TOIMINNALLISUUS... CRA-TV HALLINTA-OHJELMA...

Visma Fivaldi. Ohjeet Java web startin ja HTML5-työkalun aktivointiin

1 Dreamweaver MMX. 2 Tekstin muokkaus

Tiedostomuodon valitseminen kuville

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

Office Video, pikaopas

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA

ARVO - verkkomateriaalien arviointiin

Ensin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

KÄYTTÖOHJE LATOMO VERSO

ArchiCad:istä Inventoriin ja NC-jyrsin mallin teko

ESRC:n uusiutumassa olevat kotisivut on toteutettu WordPress-ohjelmalla (WP). Samaa ohjelmaa käyttävät menestyksellä ainakin SSql, HSRC ja JSK.

HTML elementit. Sisällys

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

Olio-ohjelmoinnissa luokat voidaan järjestää siten, että ne pystyvät jakamaan yhteisiä tietoja ja aliohjelmia.

1 YLEISTÄ 1. 2 KARTAT yleistä Avoimien aineistojen tiedostopalvelu 2 3 KARTAN TEKEMINEN JA SIIRTÄMINEN PUHELIMEEN 4

Videon tallentaminen Virtual Mapista

GeoGebra-harjoituksia malu-opettajille

Artikkelin lisääminen

Videokuvan siirtäminen kamerasta tietokoneelle Windows Movie Maker -ohjelman avulla

Pong-peli, vaihe Koordinaatistosta. Muilla kielillä: English Suomi. Tämä on Pong-pelin tutoriaalin osa 2/7. Tämän vaiheen aikana

Osallistavan suunnittelun kyselytyökalu

Sivuston tiedotmysiteworthcheck.com

ILMARI KÄYTTÖOHJE

helsingintaiteilijaseura.fi WordPress-pikaohjeet

KUVAT. Word Kuvat

Mitä direktiivi käytännössä velvoittaa?

Ulkoasun muokkaus CSS-tiedostossa

Osaamispassin luominen Google Sites palveluun

Sähköposti ja uutisryhmät

Pong-peli, vaihe Aliohjelmakutsu laskureita varten. 2. Laskurin luominen. Muilla kielillä: English Suomi

Kurssin asetuksista Kurssin asetukset voidaan muuttaa Kurssin ylläpidon kautta. Moodle ( Mervi Ruotsalainen)

Purot.net Wiki. Tutkielma. Paavo Räisänen. Centria Ammattikorkeakoulu

Google-dokumentit. Opetusteknologiakeskus Mediamylly

UpdateIT 2010: Uutisten päivitys

Transkriptio:

97 Tässä kappaleessa käsitellään kuvien ja sovelmien (Applets) liittämistä HTMLdokumenttiin. Kuvia on periaatteessa olemassa kolmea päätyyppiä, tekstin sisäisiä, tekstin ulkoisia ja kolmanneksi kuvakarttoina toimivia kuvia. Lisäksi käydään lyhyesti kuinka sovelmat upotetaan dokumenttiin ja kuinka sovelmille voidaan välittää parametreillä ajonaikaista tietoa. Uutena HTML-dokumentin elementtinä esitellään OBJECT, jonka avulla dokumenttiin voidaan liittää useaa eri formaattia olevia tiedostoja: kuvia, ääntä, animaatiota ja videoita. 8.1 IMG Tällä komennolla liitetään dokumenttiin tekstin sisäinen kuva. Komennolla on seuraavat omat attribuutit: src= Tämä attribuutti kertoo kuvan sijainnin. Attribuutin arvo on siis URL-osoite, josta selainohjelma lataa kuvan osaksi dokumenttia. longdesc= Pitkä kuvaus, eli linkki kuvasta kertovaan tekstiin. Tätä käytetään esimerkiksi silloin, kun kuvia ei haluta ladata latausaikojen nopeuttamiseksi ja on kuitenkin tarpeellista selittää, mitä kuva esittää. alt= height= width= Kuvan sijaan näytettävä teksti. Mikäli selain ei nouda kuvia palvelimelta näytettäväksi, kuvan paikalla esitetään tämän attribuutin sisältönä oleva teksti. Kuvan korkeus. Mikäli kuva on väärän kokoinen sille suunniteltuun paikkaan nähden, voidaan sen korkeutta muuttaa tällä attribuutilla. Attribuutin arvoksi käy mikä tahansa pituusluku. Tämä attribuutti esitellään hieman tarkemmin tämän kappaleen puolivälissä. Ei suositeltava. Kuvan leveys. Mikäli kuva on väärän kokoinen sille suunniteltuun paikkaan nähden, voidaan sen leveyttä muuttaa tällä attribuutilla. Attribuutin arvoksi käy mikä tahansa pituusluku. Tämä attribuutti esitellään hieman tarkemmin tämän kappaleen puolivälissä. Ei suositeltava. usemap= ismap= Kuva on käyttäjätyypin kuvakartta. Kuva on palvelintyypin kuvakartta

98 Lisäksi elementissä voidaan käyttää seuraavia asetteluun liittyviä attribuutteja: align, border, hspace, vspace. Elementillä on myös seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup IMG-komennon yleinen muoto on seuraavanlainen: <IMG src= kuvan_url-osoite > Kuvan URL-osoite voidaan antaa luvussa 6 esiteltyjen periaatteiden mukaisesti, suhteellisena tai absoluuttisena osoitteena. Kuva sijoitetaan suurin piirtein siihen paikkaan dokumentissa kuin se on kirjoitettu HTML-koodiin. Seuraavassa esimerkki kuvan liittämisestä: <HEAD> <TITLE> IMG-elementti </TITLE> </HEAD> <BODY> Kuva edellä mainitusta <IMG src="kuva1.bmp"> </BODY Selain asettaa kuvan tässä tapauksessa tekstin perään ja oletusarvoisesti tekstin ja kuvan alareuna asetetaan samalle tasolle:

99 IMG-elementin käyttö. Kuvien kanssa kannatta aina määritellä attribuutti alt, sillä monet netissä surffaavat kääntävät selaimensa asetuksista kuvien näyttämisen pois, kuvat kun ovat usein niin hitaita ladattavia. Kun kuvalle on annettu myös kirjoitettu kuvaus sisällöstä, voi käyttäjä mielenkiintoisen kuvan osuessa kohdalle ladata sen erikseen. <IMG src= kuva1.bmp alt= Planetaarion logo > Jos otetaan kuvien automaattilatautuminen selaimen asetuksista pois päältä näyttäisi edellisen esimerkin mukainen dokumentti tältä: Kuvan sijaan näytettävä teksti. Jotkin selaimet näyttävät alt-attribuutin sisällön ponnahdusikkunassa, kun esimerkiksi hiiren kohdistin viedään kuvan päälle.

100 Kuvista voidaan helposti tehdä linkkejä: asettaan linkkikomennossa kuuman tekstin paikalle IMG-elementti. Linkkeinä toimivilla kuvilla on helppo tehdä navigointipainikkeita isompiin nettisivukokonaisuuksiin. Tässä kuitenkin esimerkki linkkinä toimivasta kuvakkeesta: <A href="img1.html"> <IMG src="eteeppäi.bmp" alt="jatka"> </A> Selain lisää linkkinä toimivan kuvan ympärille reunukset, jotta se erottuisi muista kuvista: Kuva linkkinä. Kuvan ympärille lisättävän reunuksen leveys voidaan määrätä, jopa poistaa, border-attribuutilla tai tyylisivuja käyttämällä. On kuitenkin syytä miettiä, kannattaako reunuksia poistaa, muuten sivua katseleva joutuu hiiren kohdistinta siirtelemällä etsimään mahdolliset linkit. 8.1.1 Tekstin ulkoiset kuvat Tekstin ulkoisilla kuvilla tarkoitetaan kuvia, jotka eivät ole varsinaisesti osa dokumenttia, vaan dokumentista on pelkkä linkki kuvaan. Ulkoisten kuvien käyttö on erityisen kohteliasta tekstipohjaisia selaimia käyttäville, sillä he voivat linkin kautta noutaa kuvan omalle kiintolevylleen ja katsoa sen sitten jollain kuvankatseluohjelmalla. Sama pätee myös silloin, jos kuvan formaatti on sellainen, jota valtaosa selaimista ei osaa näyttää oikein. Kolmanneksi netti on pullollaan erilaisia kuvagallerioita tiskirättikokoelmista aasialaisarkistoihin, joissa suurimmassa osassa on ajateltu kotoaan käsin, modeemia käyttävien yhteyden tasoa: kaikista kuvista on yhdellä sivulla pienennökset kuvista ja kuvan valitsemalla vasta ladataan alkuperäiskokoinen kuva näyttöön. Ulkoinen kuva liitetään dokumenttiin siis seuraavasti: <P> Napauta kuvaa nähdäksesi sen kokonaisena <A href= turkisbig.jpg > <IMG src= turkismall.bmp > </A> </P>

101 Ensin näytetään siis kuva pienikokoisena, kuvatiedoston koko 8 kiloa: Linkki tekstin ulkoiseen kuvaan. Kun sitten valitaan esimerkiksi hiirellä napauttamalla kuva, niin täysimittainen kuva noudetaan selaimen ikkunaan. Kuvatiedoston koko tässä tapauksessa 87 kiloa ja tilansäästösyistä vain osa kuvasta näkyvissä: Tekstin ulkoinen kuva. Kuvien tiedostokokojen erosta johtuen saavutetaan latausajoissa huomattava etu.

102 8.2 Kuvakartat Kuvakartat ovat interaktiivisia kuvia, joihin voidaan liittää toiminnallisuutta, esimerkiksi käynnistää ohjelmia tai siirtyä johonkin toiseen dokumenttiin, linkin tavoin. Kuvakartta on periaatteessa tavanomainen kuva, jonka tietyt, dokumentin kirjoittajan määräämät alueet on asetettu vastaanottamaan käyttäjän toimenpiteitä, kuten esimerkiksi hiirenpainalluksia. Kuvakarttoja on kahden tyyppisiä: Käyttäjätyyppi (Client-side) Palvelintyyppi (Server-side) Käyttäjätyypin kartan kaikki toiminta perustuu aktiiviseen alueeseen sidottuun linkkiin, jota selain seuraa kun jokin alue kartasta valitaan. Tämän tyyppinen kuvakartta toimii niin, että käyttäjän valitseman pisteen koordinaatit lähetetään palvelimelle ja palvelin käsittelee saamansa tiedon jollain tavalla ja käynnistää siihen liittyvän toimenpiteen. Näistä kahdesta ensimmäinen on käyttökelpoisempi jälkimmäiseen verrattuna, sillä käyttäjätyypin kuvakartan toiminnot selain osaa hoitaa itse ilman, että sen tarvitsee lähettää/vastaanottaa mitään. 8.3 MAP ja AREA Kuvakartat muodostetaan komennoilla MAP ja AREA. Näistä MAP määrittää itse kuvakartan ja se sisältää yleensä yhden tai useamman AREA-elementin, joista kukin puolestaan määrittää yksittäisen aktiivisen alueen toimintoineen. 8.3.1 MAP Kuvakartan määrittävä elementti on siis MAP. Tämä elementti on periaatteessa vain aluemäärittelyt sisältävä kuori, eikä elementillä ole kuin yksi, joskin tärkeä, attribuutti: name= Kartan nimi. Kuvan, josta kartta halutaan muodostaa, täytyy sisältää määrittelyssään attribuutti usemap, jonka arvona on sama arvo kuin tällä attribuutilla. Esimerkiksi MAP-elementtiin, jonka name-arvona on

103 kartta1, liitetään haluttu kuvaelementti lisäämällä kuvan määrittelyyn attribuutti usemap= #kartta1. Menettelyssä ei muuta muistettavaa ole kuin #-merkki. MAP-elementti on lähes aina seuraavanlainen: <MAP name= kartannimi > </MAP> aluemäärittelyt tähän väliin 8.3.2 AREA Kuvakartan varsinaiset aktiiviset alueet määritellään elementillä AREA. Näitä elementtejä voi olla MAP-elementin sisällä niin monta kuin on tarpeellista. Melko monimuotoisella elementillä on useita alueen muotoon ja sijoitteluun liittyviä attribuutteja: shape= Määrää alueen muodon. Mahdollisia muotoja ovat: default: Koko käytettävissä oleva alue. rect: Määrittää suorakulmaisen alueen. circle: Määrittää ympyrän muotoisen alueen. poly: Määrittää monikulmaisen alueen. coords= Tämä attribuutti määrää alueen paikan kartassa. Se mitä koorditaatteja tarvitaan, riippuu alueen muodosta: rect: Vasemman ylänurkan (0,0) ja oikean alanurkan (100,100) koordinaatit: coords= 0,0,100,100. circle: Keskipisteen koordinaatit sekä ympyrän säde: coords= 50, 100, 45 poly: Kunkin kulman koordinaatit: alue rajataan niin, että pisteet yhdistetään toisiinsa siinä järjestyksessä kuin ne ovat: coords= x1, y1, x2, y2, x3, y3 xn, yn Kaikki koordinaatit annetaan suhteessa käytettävän kuvan vasempaan yläkulmaan. href= nohref= URL-osoite, johon alueeseen sidottu linkki osoittaa. Jos tämä on/off-tyyppinen attribuutti on alueen määrittelyssä mukana, alueeseen ei liity aktiivista linkkiä

104 accesskey= Pikanäppäin alueen aktivoimiseksi. Esitelty tarkemmin luvun 10 lopussa. target= Tämä attribuutti määrää, mihin linkin kohteena oleva objekti, esimerkiksi toinen HTML-sivu, sijoitetaan. Mahdollisia arvoja ovat: _blank: _self: _parent: _top: Kohdetta varten avataan uusi selainikkuna ja kohde avataan siihen. Kohteena oleva, esimerkiksi toinen HTML-sivu avataan siihen ikkunaan, josta linkki on valittu. Muuten sama kun _self sillä erotuksella, että mikäli linkki, josta kohdetta kutsuttiin, sijaitsee kehyksessä niin kohde avataantämän kehyksen vanhempikehyksessä. Kohteena oleva objekti avataan nykyisen dokumentin päälle. alt= Alueen sijaan esitettävä teksti. tabindex= Aktiivisuuden kohdistamisessa käytettävä järjestysluku. Tämäkin attribuutti esitelty tarkemmin luvun 10 lopussa. Lisäksi on vielä seuraavat attribuutit: id, class lang title style name onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Seuraavaksi hieman asiaa selventäviä esimerkkejä. Ensin kuvakartta, jonka korkeus on 200 pikseliä ja leveys samoin, 200 pikseliä. Kuva on jaettu neljään yhtä suureen osaan, joista kukin johtaa johonkin osaan kuvitellussa dokumenttikokoelmassa. <TITLE> Kuvakartta </TITLE> <BODY><P> <IMG src="kkartta200200.bmp" usemap="#kartta1"> <MAP name="kartta1"> <AREA href="alku.html" alt="alkuun"

105 shape="rect" coords="0,0,100,100"> <AREA href="seuraava.html" alt="eteenpäin" shape="rect" coords="50, 0, 200,100"> <AREA href="edellinen.html" alt="edellinen" shape="rect" coords="0,100,100,200"> <AREA href="viimeinen.html" alt="loppuun" shape="rect" coords="100,100,200,200"> </MAP> </P> </BODY> Selain näyttää edellisen näin: Kuvakartta, jonka jokainen neljännes on linkki jonnekin. Seuraavaksi kolmioita sisältävä esimerkki, muuten samalla logiikalla toimiva ja kuvan koko tässäkin 200 x 200 pikseliä: <TITLE> Kuvakartta </TITLE> <BODY><P> <IMG src="kkkolmio.gif" usemap="#kartta2"> <MAP name="kartta2"> <AREA href="alku.html"

106 alt="alkuun" shape="poly" coords="100,0,150,100,50,100"> <AREA href="edellinen.html" alt="taaksepäin" shape="poly" coords="50,100,100,200,0,200"> <AREA href="seuraava.html" alt="seuraava" shape="poly" coords="150,100,100,200,200,200"> </MAP> </P> </BODY> Selain tulkitsee dokumentin näin: Kuvakartta monikulmioita käyttämällä. Vielä yksi esimerkki, jossa käytetään ympyröitä. Ulompi rengas on oma linkkinsä ja sisällä oleva pyörylä omansa: <TITLE> Kuvakartta </TITLE> <BODY> <P> <IMG src="pyoryla.bmp" usemap="#kartta3"> <MAP name="kartta3"> <AREA href="alku.html" alt="alkuun" shape="circle" coords="100,100,25"> <AREA href="loppu.html" alt="loppuun"

107 shape="circle" coords="100,100,60"> </MAP> </P></BODY> Selain näyttää tämän tällä tavalla: Kuvakartta ympyröitä käyttäen. Taitavaa kuvankäsittelyohjelman käyttöä hyväkseen käyttäen voi luoda mitä moninaisimpia kuvia ja ilmaisohjelminakin löytyy useita ohjelmia, joilla voidaan piirtää aluerajat suoraan kuvan päälle ilman, että tarvitsee määrätä kaikkia koordinaatteja käsin. Kuvakartoilla voidaan helposti lisätä sivujen näyttävyyttä, mutta se on tehtävä niin, ettei kenenkään tarvitse etsiä linkkejä sivulta päästäkseen eteenpäin. Yllä oleva kuva ympyröitä käyttävästä kuvakartasta on erinomainen esimerkki siitä, minkälaisia ei pitäisi tehdä: ei mitään selitystä, sille mihin kartasta oikein voisi päästä, ja mistä kohtaa hiirellä pitäisi napauttaa. 8.4 OBJECT Objektit ovat elementtejä, jotka voivat sisältää kuvia ja sovelmia siinä kuin IMGja APPLET-elementitkin. Kehitys on liikkunut eteenpäin valtavalla nopeudella ja on tullut tarpeelliseksi pystyä liittämään HTML-dokumentteihin mitä moninaisimpia tiedostotyyppejä olevia lisukkeita. Jottei jokaiselle erityyppiselle lisukkeelle tarvitsisi määritellä omaa liittämiselementtiään, on päädytty käyttämään kaikkien ulkoisten tiedostojen liittämiseen yhtä ja samaa elementtiä. Tämä tekee elemetistä sikäli monimutkaisen, että aina kun jokin tiedosto liitetään, täytyy myös kertoa sen tyyppi. Kuitenkin päästään dokumenttien

108 kirjoittamisessa melkoiseen yksinkertaisuuteen, kun tiedoston esittäminen jätetään lähes kokonaan selainohjelman harteille. Toistaiseksi selaimet ovat selviytyneet vallan hyvin. OBJECT-elementin avulla on suurin piirtein yhtä helppoa dokumenttiin liittää kaikenlaisia multimediaominaisuuksia kuten kuvat, sovelmat, plug-ineja vaativat esitykset, CAD-tyyppiset piirrokset jne. Tällä elementillä on seuraavanlainen liuta ominaisuuksia: declare= Eräänlainen on/off kytkin. Jos tämä attribuutti on objektin määrittelyssä, objektia ei luoda/näytetä. classid= Määrittää objektin sijainnin. URL-osoite siis, ja voi joissakin tapauksissa korvata attribuutin data. codebase= Määrää jonkin perusosoitteen, jonka perusteella suhteelliset URLviittaukset tehdään. Oletuksena on nykyisen dokumentin sijainti. Periaate muutoin samanlainen kuin luvun 6 BASE-elementillä. data= type= archive= standby= height= width= usemap= name= Määrää sen osoitteen, jossa objektin tarvitsema tieto sijaitsee. Kertoo objektin tietotyypin (kuva, sovelma, MIME-tyyppi). Tätä attribuuttia kannattaa käyttää, sillä tällöin selaimet turhaan lataa sellaisia objekteja, joita ne eivät osaa käsitellä oikein. Tämän attribuutin arvoksi voidaan kirjoittaa välilyönnillä eroteltuna lista niistä URL-osoitteista, joiden sisältämistä tiedosta voisi olla hyötyä kyseiselle objektille. Teksti, joka näytetään silloin kun objektia ladataan palvelimelta selaimeen. Objektin korkeus. Ei siis käytetä objektin alkuperäistä korkeutta vaan tämän attribuutin määräämää. Objektin leveys. Kuten yllä. Objekti on käyttäjätyypin kuvakartta. Objektin nimi, mikäli objekti lähetetään lomakkeen mukana. tabindex= Aktiivisuuden kohdistamisessa käytettävä järjestysluku. Katso tarkempi kuvaus luvusta 10. Lisäksi elementille voidaan asettaa seuraavia asetteluun liittyviä attribuutteja: align, border, hspace, vspace.

109 Elementillä on myös seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup OBJECT-elementtiä käytetään periaatteessa hieman samoin kuin IMGelementtiäkin, paitsi että esitettävän tiedoston nimen/sijainnin lisäksi täytyy määrittää tiedoston tyyppi, jotta selainohjelma tietää käyttää sopivaa menetelmää tiedoston käyttämiseen/esittämiseen. Edellä esitetty kuvan liittäminen dokumenttiin voitaisiin tehdä OBJECT-elementillä seuraavasti: <HTML> <TITLE> OBJECT </TITLE> <BODY> <OBJECT </OBJECT> </BODY> </HTML> type="image/jpeg" data="turkisbig.jpg" heigth=200 widht=200> Amaya-selain näyttää kuvaobjektin näin (kuvan koon takia pienennetty selainikkuna): Kuvatiedoston liittäminen OBJECT-elementillä. Myös videotiedostoja on yksinkertaista liittää dokumentteihin OBJECT-elementin avulla. Tarvitaan vain tiedoston sijainti ja tyyppi. Näin liitetään esimerkiksi QuickTime-tyyppinen video dokumenttiin:

110 <HTML> <TITLE> Videotiedoston lisääminen </TITLE> <BODY> <OBJECT type="video/quicktime" data="tiedosto.mov"> </OBJECT> </BODY> </HTML> Samalla logiikalla liitetään myös äänitiedostot. Tässä esimerkki WAV-muotoisen äänitiedoston liittämisestä: <HTML> <TITLE> Videotiedoston lisääminen </TITLE> <BODY> <OBJECT type="audio/x-wav" data="tiedosto.wav"> </OBJECT> </BODY> </HTML> Selain näyttää ja soittaa videot ja äänet, mikäli siihen on asennettu sopivat ominaisuudet päälle. Esimerkiksi jälkimmäisessä tapauksessa Netscape näyttää dokumentissa eräänlaisen wav-soittimen, josta käyttäjä voi itse valita soitetaanko tiedosto vai ei: Äänitiedoston soittava Plug-in. OBJECT-elementissä tarvittavan type-attribuutin mahdolliset arvot löytyvät Liitteestä 2 MIME-tyypit. Juuri type-arvon perusteella selain yrittää käyttää oikeaa menetelmää tiedoston esittämiseksi, joten on tärkeää pyrkiä aina löytämään oikea MIME-tyyppi attribuutin arvoksi.

8.5 Kuvien asettelu 111 Kaikki seuraavat kuvien asetteluun liittyvät attribuutit ovat siirtyneet HTML 4 määrittelyn ei-suositeltavien listalle ja asetteluun liittyvät toimenpiteet suositellaan tehtävän tyylisivujen avulla. Nämä attribuutit esittelyineen koskevat vain elementtejä IMG, APPLET ja OBJECT. width= height= vspace= hspace= border= align= Tämä määrää elementin leveyden pituuslukuna tai prosentteina ilmaistuna. Yliajaa alkuperäisen koon. Jos vain width asetetaan, skaalataan elementin korkeus niin, että alkuperäinen mittasuhde säilyy. Pienentäminen onnistuu helposti, mutta suurentaminen johtaa esimerkiksi kuvien tapauksessa kuvan laadun heikkenemiseen. Kuitenkaan ei ole järkevää pienentää kuvia vasta selaimessa, sillä vaikka skaalattaisiin koko ruudun kokoinen kuva muutaman pikselin kokoiseksi, täytyy kuitenkin koko kuva ladata, mikä suurten kuvien tapauksessa kestää huomattavan kauan. Sama pätee seuraavana esiteltävään attribuuttiin. Tämä määrää elementin korkeuden pituuslukuna tai prosentteina ilmaistuna. Yliajaa alkuperäisen koon. Jos vain height asetetaan, skaalataan elementin korkeus niin, että alkuperäinen mittasuhde säilyy. Pienentäminen onnistuu helposti, mutta suurentaminen johtaa esimerkiksi kuvien tapauksessa kuvan laadun heikkenemiseen. Tämä attribuutti määrää, paljonko tyhjää tilaa asetetaan elementin ylä- ja alapuolelle. Attribuutin arvo annetaan pituuslukuna. Oletusarvoisesti tätä lukua ei ole määrätty mutta se yleensä selaimesta riippuva pieni luku. Tämä attribuutti määrää, paljonko tyhjää tilaa asetetaan elementin vasemmalle ja oikealle puolelle. Attribuutin arvo annetaan pituuslukuna. Oletusarvoisesti tätä lukua ei ole määrätty mutta se yleensä selaimesta riippuva pieni luku. Tällä attribuutilla voidaan asettaa elementin ympärille reunus. Reunuksen paksuus asetetaan lukuna, joka kertoo paksuuden pikselien määränä. Eli esimerkiksi border= 5 olisi viisi pikseliä. Tämä attribuutti asettaa tasauksen, eli kuinka ympärillä oleva teksti asettuu elementin suhteen. Attribuutti voi saada jokin seuraavista kolmesta arvosta: bottom: Tasaa tekstin ja kuvan alalaidat samalle tasolle. Tämä arvo on oletusarvo.

112 middle: top: Tämä arvo tasaa kuvan ja tekstin keskilinjat keskenään samalle tasolle. Tasaa elementtien yläreunat samalle tasolle. Paljon monipuolisemman elementtientasausmahdollisuuden tarjoavat Tyylisivujen käyttö, jotka on tarkemmin esitelty luvussa 9. 8.6 PARAM PARAM-elementin avulla voidaan välittää APPLET ja OBJECT-elementeille arvoja eli parametrejä, joita elementit voivat tarvita esimerkiksi sovelman suorituksen aikana. PARAM-elementit sijoitetaan aina joko APPLET- tai OBJECT-elemettien alkuja loppukomentojen väliin. Mikäli PARAM-elementtejä on useita, ei niiden keskinäisellä järjestyksellä ole merkitystä. Elementillä on seuraavat attribuutit: name= value= Tämä attribuutti määrää parametrin nimen. Tämän nimen perusteella esimerkiksi sovelma ottaa PARAM-elementin sisältämän arvon käyttöönsä. Tämä attribuutti sisältää PARAM-elementin arvon. Tämän arvon sovelma ottaa käyttöönsä edellä mainitun name-attribuutin perusteella valuetype= Tämä attribuutti kertoo, minkä tyyppistä PARAM-elementin sisältämä tieto, eli value-attribuutin arvo, on. Mahdollisia arvoja on kolme: data: object: ref: Tämä on oletusarvo, eli value-attribuutin sisältämä arvo annetaan sovelmalle sellaisenaan, merkkijonona. Jos tätä arvoa käytetään, viittaa value-attribuutin arvo silloin johonkin samassa dokumentissa sijaitsevaan objektiin, esimerkiksi toiseen sovelmaan. Viittaaminen objektiin tapahtuu id-attribuutin perusteella, eli objektille, johon halutaan viitata täytyy määrittää idattribuutti. Mikäli attribuutin arvo on ref, value-attribuutin sisältämän arvon tyyppi on URL-osoite. type= Tämä attribuutti sisältää value-attribuutin arvon MIME-tyypin siinä tapauksessa, että valuetype-attribuutin arvo on ref eli URL-osoite. Attribuutti kertoo siis URL-osoitteen osoittaman kohteen tyypin.

113 Muualla määritelty attribuutti: id PARAM-elementtit sijoitetaan siis aina OBJECT- tai APPLET-elemettien sisään: <TITLE> Dok. Nimi </TITLE> <BODY> <OBJECT type= data= > <PARAM name= value= > <PARAM name= value= > <PARAM name= value= > </OBJECT> </BODY> Seuraavassa esimerkki, jossa oletetaan olevan jonkinlaiseen kuvankäsittelyyn pystyvä sovelma rotate ja jolle annetaan käsiteltävä kuva hevonen.gif PARAMelementin välityksellä: <TITLE> Kuvanpyörittäjä </TITLE> <BODY> <OBJECT classid= http://www.nullplace.com/rotate standby= Ladataa > <PARAM </OBJECT> </BODY> name= kuva value=.tiedostot/kuvat/hevonen.gif valuetype= ref > 8.7 Mitä sovelmat ovat? Sovelmat ovat ohjelmia, jotka toimivat selaimessa. Ne ovat yleensä Javalla tehtyjä, joten niiden ohjelmoimiseen tarvitaan ainakin jonkinlainen ohjelmointitaito ja aihe on alkeiltaankin niin laaja, ettei sitä kannata lähteä käymään läpi tässä. Valmiita sovelmia löytää kyllä helposti netistäkin. 8.7.1 APPLET Sovelma liitetään HTML-dokumenttiin elementillä APPLET. Uusimman määritelmän mukaan tämä elementti on siirtynyt ei-suositeltavien listalle ja tästä syystä se tulisikin pyrkiä korvaamaan OBJECT-elementillä. Mutta jos haluat vanhempienkin selainten ymmärtävän sivujasi, kannattaa käyttää toistaiseksi APPLET-elementtiä sovelmien upottamiseen. Elementillä on seuraavanlaiset attribuutit:

114 archive= Tämän attribuutin arvoksi voidaan asettaa joukko URL-osoitteita, joiden sisältämiä tiedostoja (resursseja) tarvitaan määriteltävänä olevan sovelman käynnistämiseksi. URL-osoitteet kirjataan pilkulla toisistaan erotettuina. Suhteelliset viittaukset tehdään codebaseattribuutin sisältämän osoitteen mukaan. codebase= Tämä attribuutti kertoo URL-osoitteen, jossa solvelma sijaitsee. Mikäli tätä attribuuttia ei ole määrätty oletetaan, että osoite on sama kuin nykyisellä dokumentilla. code= name= object= width= height= Tämä attribuutin arvoksi sijoitetaan halutun sovelman nimi. Sovelman täytyy käännetty luokkatiedosto. Esimerkiksi Javalla tehdyt ja käännetyt ovelmat ovat muotoa tiedosto.class. Arvona voidaan käyttää myös hakemistopolkua sovelmaan, mikäli se sijaitsee jossain alihakemistossa. Tällöin viittaukset on tehtävä suhteessa codebase-attribuutin arvoon. Joko tämä tai jäljempänä esiteltävä attribuutti object täytyy asettaa. Tämä attribuutti nimeää sovelman ilmentymän. Nimen avulla esimerkiksi samalla sivulla sijaitsevat sovelmat voivat kommunikoida keskenään. Applet oliotiedoston nimi. Sovelmalle varatun näyttöalueen leveys. Sovelmalle varatun näyttöalueen korkeus. Elementillä on lisäksi seuraavat muualla määritellyt attribuutit: id, class title style alt align, hspace, vspace Sovelman liittäminen <APPLET>-komennolla tapahtuu yleisessä muodossaan seuraavasti: <TITLE> Dokumentin nimi </TITLE> <BODY> <APPLET code= tiedosto.class width=luku height=luku> </APPLET> </BODY>

115 Koska APPLET-elementti on uuden määrittelyn ei suositeltava tapa sovelmien liittämiseen, kehotetaankin käyttämään sen sijaan OBJECT-elementtiä. Suositeltava menetelmä sovelmien liittämiseen olisi siis seuraavanlainen: <TITLE> Dokumentin nimi </TITLE> <BODY> <OBJECT </OBJECT> codetype= application/java classid= java:tiedosto.class width=luku height=luku> </BODY>