8 Kuvat, sovelmat ja objektit
|
|
- Kimmo Jaakkola
- 6 vuotta sitten
- Katselukertoja:
Transkriptio
1 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
2 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:
3 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.
4 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 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>
5 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.
6 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 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
7 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 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ä
8 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="kkartta bmp" usemap="#kartta1"> <MAP name="kartta1"> <AREA href="alku.html" alt="alkuun"
9 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"
10 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"
11 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
12 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.
13 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:
14 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.
15 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.
16 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 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.
17 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= 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 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:
18 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>
19 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>
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
LisätiedotKuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
LisätiedotTee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
Lisätiedot5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4
51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja,
LisätiedotKotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 5/8: Mediaelementit Edellinen
LisätiedotDigitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
LisätiedotDigitaalisen median tekniikat xhtml Harri Laine 1
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
LisätiedotTIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
Lisätiedot6 Linkit ja ankkurit 69
69 HTML mahdollistaa käytännöllisen tavan rakenteisten dokumenttien esittämiseen, mutta mikä erottaa sen muista merkkauskielistä, on sen hypertekstiominaisuudet ja mahdollisuus toteuttaa interaktiivisia
LisätiedotCode Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/
Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,
Lisätiedot05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
Lisätiedot05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
LisätiedotDigitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne
LisätiedotCSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.
CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.
LisätiedotTekstieditorin käyttö ja kuvien käsittely
Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja
Lisätiedot10 Lomakkeet Kontrollit. 10 Lomakkeet
154 Suurin osa HTML-dokumenteista on tarkoitettu vain selailtaviksi ja katseltaviksi ilman, että katselijan rooli olisi ollut muuta kuin passiivinen. Lisäämällä dokumenttiin lomake-elementti, voidaan pieni
LisätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotTaulukot. 2002 Päivi Vartiainen 1
Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit
LisätiedotDigitaalisen median tekniikat JavaScript_osa Harri Laine 1
Digitaalisen median tekniikat JavaScript_osa2 7.4.2004 Harri Laine 1 JavaScript oliot JavaScriptissä voidaan määritellä myös luokkia ja olioita. Luokka määritellään konstruktorifunktion avulla function
LisätiedotKäyttöliittymän muokkaus
Käyttöliittymän muokkaus Ohjelman pitkän kehityshistorian takia asetukset ovat jakaantuneet useampaan eri kohtaan ohjelmassa. Ohessa yhteenveto nykyisistä asetuksista (versio 6.4.1, 2/2018). Ylä- ja sivupalkkien
LisätiedotVerkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
Lisätiedot1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
LisätiedotMOODLE-OHJE: Liitetiedoston lisääminen ja päivittäminen
etusivulta yläoikealta. Kirjauduttuasi sisään SAMK Moodleen, mene omalle opintojaksollesi ja siirry muokkaustilaan. Muokkaustila päälle painike löytyy opintojakson Kun muokkaustila on päällä, siirry sen
LisätiedotKun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.
WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)
LisätiedotMOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT
MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa
LisätiedotDigitaalisen median tekniikat JavaScript_osa2
Digitaalisen median tekniikat JavaScript_osa2 7.4.2004 Harri Laine 1 JavaScriptissä voidaan määritellä myös luokkia ja olioita. Luokka määritellään konstruktorifunktion avulla function Ympyra(x,y,r) {
LisätiedotArtikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
LisätiedotSuvi Junes Tietohallinto / Opetusteknologiapalvelut 2012
Tiedostot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi työpöydältä raahata
LisätiedotHTML5 video, audio, canvas. Mirja Jaakkola
HTML5 video, audio, canvas Mirja Jaakkola Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu
LisätiedotInternetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit
Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan
LisätiedotLuento 3. Jouni Ikonen - Jouni.Ikonen lut.fi
CT30A3200 - WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen HTML-lomakkeet HTML-lomakkeiden avulla voidaan WWW-sovelluksessa hakea käyttäjän
LisätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotCSS - tyylit. 13.11.2000 Seppo Räsänen
CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot
LisätiedotMOODLE-OHJE: Linkin lisääminen tehtävänannon yhteyteen. Web-linkin lisääminen
Web-linkin lisääminen Kirjauduttuasi sisään SAMK Moodleen, mene omalle opintojaksollesi ja siirry muokkaustilaan. Muokkaustila päälle painike löytyy opintojakson etusivulta yläoikealta. Kun muokkaustila
LisätiedotEditorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
LisätiedotTaulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
LisätiedotMuuttujien määrittely
Tarja Heikkilä Muuttujien määrittely Määrittele muuttujat SPSS-ohjelmaan lomakkeen kysymyksistä. Harjoitusta varten lomakkeeseen on muokattu kysymyksiä kahdesta opiskelijoiden tekemästä Joupiskan rinneravintolaa
LisätiedotXML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen
XML kielioppi Elementtien ja attribuuttien määrittely Ctl230: Luentokalvot 11.10.2004 Miro Lehtonen Dokumenttien mallinnus Säännöt dokumenttityypeille 3Mahdollisten dokumenttirakenteiden määrittely Samassa
LisätiedotKäyttöohje: LAPIO latauspalvelu
Käyttöohje: LAPIO latauspalvelu 24.8.2018 Sisällys 1. Yleistä... 2 2. Kartalla liikkuminen ja zoomaus:... 2 3. Aineistojen etsiminen ja katselu:... 2 4. Ladattavien aineistojen valinta ja metatiedot:...
LisätiedotTAULUKOINTI. Word Taulukot
Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...
LisätiedotHTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
LisätiedotSkype for Business ohjelman asennus- ja käyttöohje Sisällys
Skype for Business ohjelman asennus- ja käyttöohje Sisällys Kirjautuminen Office 365 -palveluun... 2 Skype for Business ohjelman asentaminen... 3 Yhteyshenkilöiden lisääminen Skype for Business ohjelmassa...
LisätiedotMoodle 2.2 pikaohje. 1. Kirjautuminen ja omat kurssit (Työtilat) 1. Mene internet-selaimella osoitteeseen
Moodle 2.2 pikaohje 1. Kirjautuminen ja omat kurssit (Työtilat) 1. Mene internet-selaimella osoitteeseen https://moodle2.pkky.fi Kirjaudu omilla kuntayhtymän verkkotunnuksilla klikkaamalla Kirjaudu linkkiä
LisätiedotUpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
LisätiedotVERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.
LisätiedotFacebook-sivun luominen
Facebook-sivun luominen Facebook-sivun luominen Etene vaihe vaiheelta 1 Kirjaudu Facebook-palveluun omalla käyttäjätunnuksellasi. Sen jälkeen sivun alareunassa näkyvät toimintolinkit, joista sinun täytyy
LisätiedotAloitusopas verkkosivuston ylläpitoon
Aloitusopas verkkosivuston ylläpitoon JPP-Soft Oy 2(13) Sisällys Tervetuloa emedia CMS verkkopalveluiden käyttäjäksi... 3 Sivuston graafinen ilme ja rakenne... 4 Sivuston ilme ja tyyli... 5 Sivupohjat...
LisätiedotHTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.
HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen
LisätiedotVideon tallentaminen Virtual Mapista
Videon tallentaminen Virtual Mapista Kamera-ajon tekeminen Karkean kamera ajon teko onnistuu nopeammin Katseluohjelmassa (Navigointi > Näkymät > Tallenna polku). Liikeradan ja nopeuden tarkka hallinta
LisätiedotSkype for Business ohjelman asennus- ja käyttöohje Sisällys
Skype for Business ohjelman asennus- ja käyttöohje Sisällys Kirjautuminen Office 365 -palveluun... 2 Skype for Business ohjelman asentaminen... 3 Yhteyshenkilöiden lisääminen Skype for Business ohjelmassa...
LisätiedotXHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),
LisätiedotJypelin käyttöohjeet» Ruutukentän luominen
Jypelin käyttöohjeet» Ruutukentän luominen Pelissä kentän (Level) voi luoda tekstitiedostoon "piirretyn" mallin mukaisesti. Tällöin puhutaan, että tehdään ns. ruutukenttä, sillä tekstitiedostossa jokainen
LisätiedotFrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
LisätiedotKeravan karttapalvelun käyttöohje
Keravan karttapalvelun käyttöohje Sisällys (klikkaa otsikkoa mennäksesi suoraan haluamaasi kappaleeseen) Keravan karttapalvelun käytön aloittaminen... 2 Liikkuminen kartalla... 2 Karttatasojen näyttäminen
Lisätiedot3 Muotoilu 27. elementtiä käytetään ja miltä se näyttää selaimessa.
27 Tässä kappaleessa käydään läpi tekstin muotoiluun liittyvät elementit ja niiden käyttö. Lisäksi käydään läpi sivun ulkonäköön liittyvät elementit kuten taustaväri sekä sivun jaotteluun käytettävät elementit,
LisätiedotOpintokohteiden muokkaus
1 Opintokohteiden muokkaus Näiden ohjeiden avulla hahmottuu kuinka opintokohteita voidaan muokata Opinto-oppaassa. Ohje on suunnattu käyttäjille, joilla on WebOodiin OpasMuokkaaja-oikeudet. WebOodin käyttölupia
LisätiedotHTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...
HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...
LisätiedotJAVA on ohjelmointikieli, mikä on kieliopiltaan hyvin samankaltainen, jopa identtinen mm. C++
JAVA alkeet JAVA on ohjelmointikieli, mikä on kieliopiltaan hyvin samankaltainen, jopa identtinen mm. C++ ja Javascriptin kanssa. Huom! JAVA ja JavaScript eivät silti ole sama asia, eivätkä edes sukulaiskieliä.
Lisätiedotelearning Salpaus http://elsa.salpaus.fi Elsa-tutuksi
elearning Salpaus http://elsa.salpaus.fi Elsa-tutuksi SISÄLLYSLUETTELO 1 MIKÄ ON ELSA, ENTÄ MOODLE?... 3 1.1 MITÄ KURSSILLA VOIDAAN TEHDÄ?... 3 2 KURSSILLE KIRJAUTUMINEN... 3 3 KURSSILLE LIITTYMINEN...
LisätiedotJypelin käyttöohjeet» Miten saan peliin pistelaskurin?
Jypelin käyttöohjeet» Miten saan peliin pistelaskurin? Pistelaskurin saamiseksi tarvitaan kaksi osaa: Laskuri, joka laskee pisteitä Olio, joka näyttää pisteet ruudulla Laskuri voi olla esimerkiksi tyyppiä
Lisätiedot1 Yleistä Kooste-objektista... 3. 1.1 Käyttöönotto... 3. 2 Kooste-objektin luominen... 4. 3 Sisällön lisääminen Kooste objektiin... 4. 3.1 Sivut...
Kooste 2 Optima Kooste-ohje Sisällysluettelo 1 Yleistä Kooste-objektista... 3 1.1 Käyttöönotto... 3 2 Kooste-objektin luominen... 4 3 Sisällön lisääminen Kooste objektiin... 4 3.1 Sivut... 5 3.2 Sisältölohkot...
LisätiedotAvaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto
Condess ratamestariohjelman käyttö Aloitus ja alkumäärittelyt Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto Kun kysytään kilpailun nimeä, syötä kuvaava nimi. Samaa nimeä käytetään oletuksena
LisätiedotSisällysluettelo. s.1(14) CRA Computer & Robot applications Oy. v.1.2 ESITTELY TOIMINNALLISUUS... CRA-TV HALLINTA-OHJELMA...
s.1(14) CRA Computer & Robot applications Oy v.1.2 Sisällysluettelo ESITTELY......2 TOIMINNALLISUUS......2 CRA-TV HALLINTA-OHJELMA......3 Ohjelman pääikkuna:...3 Kirjautuminen:...3 Rekisteröityminen:...4
LisätiedotVisma Fivaldi. Ohjeet Java web startin ja HTML5-työkalun aktivointiin
Visma Fivaldi Ohjeet Java web startin ja HTML5-työkalun aktivointiin Visma Software Oy pidättää itsellään oikeuden mahdollisiin parannuksiin ja/tai muutoksiin tässä oppaassa ja/tai ohjelmassa ilman eri
Lisätiedot1 Dreamweaver MMX. 2 Tekstin muokkaus
1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta
LisätiedotTiedostomuodon valitseminen kuville
Kuvan lisääminen sivulle Valitse työkaluriviltä Lisää Kuva tiedostosta painike 1. Ruudulle aukeaa sekä Kuva-ikkuna että Valitse tiedosto ikkuna 2. Selaa Valitse tiedosto ikkunassa esiin se kuva, jonka
LisätiedotVIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
LisätiedotOffice Video, pikaopas
Office 365 - Video, pikaopas Sisällys Palvelu... 2 Kanavan luonti... 3 Kuinka kanava kannattaa nimetä?... 4 Kanavan käyttöoikeudet... 4 Käyttöoikeustasot... 5 Videoiden lisääminen kanavalle... 6 Videon
LisätiedotKUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA
KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA Ohjeistuksessa käydään läpi kuvan koon ja kuvan kankaan koon muuntaminen esimerkin avulla. Ohjeistus on laadittu auttamaan kuvien muokkaamista kuvakommunikaatiota
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotEnsin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat
Microsoft Office 2010 löytyy tietokoneen käynnistä-valikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,
Lisätiedot,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU
,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU Tässä pääsette tutustumaan Internet Explorerin (IE) käyttöön. Muitakin selainversioita löytyy, kuten esimerkiksi Netscape, Opera ja Mozilla. Näiden muiden selainten
LisätiedotKÄYTTÖOHJE LATOMO VERSO
Kirjautuminen Kirjatuminen järjestelmään tapahtuu syöttämällä ylläpitäjältä (yleensä sähköpostilla) saatu käyttäjätunnus ja salasana niille varattuihin kenttiin. Jos olet unohtanut salasanasi voit syöttää
LisätiedotArchiCad:istä Inventoriin ja NC-jyrsin mallin teko
ArchiCad:istä Inventoriin ja NC-jyrsin mallin teko Huomattavaa! Kun tallennat archicad:issä Stl tiedoston tarkasta että mallisi on oikeassa mittakaavassa (esim. mikäli ArchiCad malli mallinnettu metrimittakaavassa
LisätiedotESRC:n uusiutumassa olevat kotisivut on toteutettu WordPress-ohjelmalla (WP). Samaa ohjelmaa käyttävät menestyksellä ainakin SSql, HSRC ja JSK.
PIKAOHJEET VIESTIEN KÄYTTÖÖN ESRC:N KOTISIVUILLA Versio 3, 27.12.2006 ESRC:n uusiutumassa olevat kotisivut on toteutettu WordPress-ohjelmalla (WP). Samaa ohjelmaa käyttävät menestyksellä ainakin SSql,
LisätiedotHTML elementit. Sisällys
HTML elementit HTML elementit 1 Tämä dokumentti sisältää useimmat HTML 4.0 suosituksen elementit attribuutteineen. Kirjoitin tämän lähinnä perusteelliseksi referenssiksi, en perinteiseksi oppaaksi. Mukana
Lisätiedotvalitsin on useimmiten html-elementti, jolle tyyli halutaan luoda
Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda
LisätiedotOlio-ohjelmoinnissa luokat voidaan järjestää siten, että ne pystyvät jakamaan yhteisiä tietoja ja aliohjelmia.
4. Periytyminen 4.1. Johdantoa Käytännössä vähänkään laajemmissa ohjelmissa joudutaan laatimaan useita luokkia, joiden pitäisi pystyä välittämään tietoa toisilleen. Ohjelmien ylläpidon kannalta olisi lisäksi
Lisätiedot1 YLEISTÄ 1. 2 KARTAT 2 2.1 yleistä 2 2.2 Avoimien aineistojen tiedostopalvelu 2 3 KARTAN TEKEMINEN JA SIIRTÄMINEN PUHELIMEEN 4
MyKartta Ohje SISÄLLYS 1 YLEISTÄ 1 2 KARTAT 2 2.1 yleistä 2 2.2 Avoimien aineistojen tiedostopalvelu 2 3 KARTAN TEKEMINEN JA SIIRTÄMINEN PUHELIMEEN 4 LIITTEET 1 1 YLEISTÄ Tähän oppaaseen on koottu suppeasti
LisätiedotVideon tallentaminen Virtual Mapista
Videon tallentaminen Virtual Mapista Kamera-ajon tekeminen Karkean kamera ajon teko onnistuu nopeimmin Katseluohjelmassa (Navigointi > Näkymät > Tallenna polku). Liikeradan ja nopeuden tarkka hallinta
LisätiedotGeoGebra-harjoituksia malu-opettajille
GeoGebra-harjoituksia malu-opettajille 1. Ohjelman kielen vaihtaminen Mikäli ohjelma ei syystä tai toisesta avaudu toivomallasi kielellä, voit vaihtaa ohjelman käyttöliittymän kielen seuraavasti: 2. Fonttikoon
LisätiedotArtikkelin lisääminen
Sisällys Artikkelin lisääminen...3 Artikkelin muokkaaminen...5 Kuvan lisääminen artikkeliin...6 Väliotsikoiden lisääminen artikkeliin...9 Navigointilinkin lisääminen valikkoon...10 Käyttäjätietojen muuttaminen...13
LisätiedotVideokuvan siirtäminen kamerasta tietokoneelle Windows Movie Maker -ohjelman avulla
Videokuvan siirtäminen kamerasta tietokoneelle Windows Movie Maker -ohjelman avulla 1. Digivideokamera liitetään tietokoneeseen FireWire-piuhalla. (Liitännällä on useita eri nimiä: myös IEEE 1394, DV,
LisätiedotPong-peli, vaihe Koordinaatistosta. Muilla kielillä: English Suomi. Tämä on Pong-pelin tutoriaalin osa 2/7. Tämän vaiheen aikana
Muilla kielillä: English Suomi Pong-peli, vaihe 2 Tämä on Pong-pelin tutoriaalin osa 2/7. Tämän vaiheen aikana Laitetaan pallo liikkeelle Tehdään kentälle reunat Vaihdetaan kentän taustaväri Zoomataan
LisätiedotOsallistavan suunnittelun kyselytyökalu
Osallistavan suunnittelun kyselytyökalu Käyttöohje ARFM- hankkeessa jatkokehitetylle SoftGIS-työkalulle Dokumentti sisältää ohjeistuksen osallistavan suunnittelun työkalun käyttöön. Työkalu on käytettävissä
LisätiedotSivuston tiedotmysiteworthcheck.com
Sivuston tiedotmysiteworthcheck.com Luotu Huhtikuu 26 2019 09:24 AM Pisteet59/100 SEO Sisältö Otsikko Check you website value Pituus : 23 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus
LisätiedotILMARI KÄYTTÖOHJE
ILMARI KÄYTTÖOHJE 7.8.2011 1. Kirjautumissivu Kirjoita selaimeen http://ilmari.vtt.fi. Täytä käyttäjätunnus ja salasana. Kirjaudu sisään painamalla login. Kuva 1. Kirjautumissivu 2. Projektilistaus Kirjautumisen
Lisätiedothelsingintaiteilijaseura.fi WordPress-pikaohjeet
1/12 helsingintaiteilijaseura.fi WordPress-pikaohjeet Sisällysluettelo 1. Ohjausnäkymä...1 2. Työkalupakki... 2 3. Artikkelit, Näyttelyt ja Sivut...3 4. Artikkelin lisäys tai muokkaus... 4 Artikkelikuvan
LisätiedotKUVAT. Word 2013. Kuvat
Word 2013 Kuvat KUVAT KUVAT... 1 Kuvatiedoston lisääminen... 1 Microsoftin-kuvien lisääminen... 1 Koon muuttaminen ja kääntäminen... 2 Kuvan siirtäminen... 2 Tekstiin tasossa... 2 Kelluva kuva, tekstin
LisätiedotMitä direktiivi käytännössä velvoittaa?
Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön
LisätiedotUlkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
LisätiedotOsaamispassin luominen Google Sites palveluun
n luominen Google Sites palveluun Mikä Osaamispassi on? Osaamispassi auttaa kertomaan taidoistasi, koulutuksestasi, työkokemuksestasi ja sinua kiinnostavista asioista työnantajalle kun haet työtä. Osaamispassi
LisätiedotSähköposti ja uutisryhmät 4.5.2005
Outlook Express Käyttöliittymä Outlook Express on windows käyttöön tarkoitettu sähköpostin ja uutisryhmien luku- ja kirjoitussovellus. Se käynnistyy joko omasta kuvakkeestaan työpöydältä tai Internet Explorer
LisätiedotPong-peli, vaihe Aliohjelmakutsu laskureita varten. 2. Laskurin luominen. Muilla kielillä: English Suomi
Muilla kielillä: English Suomi Pong-peli, vaihe 7 Tässä vaiheessa lisäämme peliin pistelaskun. Pong-pelissä pelaaja saa pisteen kun pallo ohittaa toisen pelaajan mailan. 1. Aliohjelmakutsu laskureita varten
LisätiedotKurssin asetuksista Kurssin asetukset voidaan muuttaa Kurssin ylläpidon kautta. Moodle ( Mervi Ruotsalainen)
1 Moodle 21.9.2017 ( Mervi Ruotsalainen) Sisällys Kurssin asetuksista... 1 LOHKOT... 3 Sisällön tekemisestä... 4 Lisää aktiviteetti tai aineisto AIHEESEEN... 5 Tekstin ja kuvan, videon, äänitiedoston tai
LisätiedotPurot.net Wiki. Tutkielma. Paavo Räisänen. Centria Ammattikorkeakoulu 24.10.2012
Purot.net Wiki Tutkielma Paavo Räisänen Centria Ammattikorkeakoulu 24.10.2012 Sisällysluettelo 1: Esittely 2: Perustaminen 3: Uuden sivun luonti 4: Kuvien lisääminen 5: Linkin lisääminen 6: Lopuksi 1:
LisätiedotGoogle-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
LisätiedotUpdateIT 2010: Uutisten päivitys
UpdateIT 2010: Uutisten päivitys Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Uutisen lisääminen... 1
Lisätiedot