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

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

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

Transkriptio

1 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, jotka voidaan esittää tavallisesta solusta eroavalla fontilla (alla olevassa taulukossa otsikkosolut on lihavoitu). Taulukko voi olla yksi- tai kaksiulotteinen. Tietysti se voi olla useampiulotteinenkin (kuten ohjelmointikielissä), mutta esim. kolmiulotteinen taulukko vaatisi kolmiulotteisuutta tukevan ohjelman. HTML:ssä taulukko voi siis olla yksi tai kaksiulotteinen. Alla oleva esimerkkitaulukko on kaksiulotteinen. Esimerkki yksiulotteisesta taulukosta voisi olla pelkkä alla olevan taulukon vasemman puoleisin sarake, jossa luetellaan eri yritykset. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab mk Esimerkki taulukosta. Yksinkertaisia taulukoita voi esittää luvussa esitellyn PRE-elementin avulla. Yllä oleva taulukko näyttäisi silloin seuraavanlaiselta: Taulukko PRE-elementin avulla kuvattuna. On kuitenkin helppo ymmärtää, että PRE-elementti on hyvin rajoittunut tapa esittää taulukoita. PRE-elementtiä monipuolisempia ominaisuuksia tarjoaa TABLEelementti, joka mahdollistaa mm. otsikkosolut, solujen jaon ja solukohtaisen asettelun.

2 52 HTML-kielessä TABLE-elementtiä käytetään muuhunkin kuin perinteisten taulukoiden esityksiin. Sillä voidaan esim. asetella sivulle kuvia, linkkejä, tekstiä jne. 5.1 TABLE TABLE-elementti muodostuu alku- ja lopputagista. TR-elementillä (selitetty myöhemmin tarkemmin) muodostetaan uusi rivi, TH-elementillä uusi otsikkosolu ja TD-elementillä tavallinen solu. Jotta TABLE-elementin käyttöä olisi helpompi opetella, otetaan heti alkuun yksinkertainen esimerkki elementin käytöstä. <TABLE border=1> <TR><TH></TH><TH>Sarakeotsikko1</TH> </TR> <TR><TH>Riviotsikko</TH><TD>Tekstiä</TD> </TR> </TABLE> TABLE-elementillä luotu yksinkertainen taulukko. TABLE-elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

3 53 Osa seuraavista attribuuteista on TABLE-elementin omia ja osa yhteisiä toisten elementtien kanssa. Nämä attribuutit ovat kuitenkin tärkeitä, joten niiden merkitys ja käyttö on selvitetty tässä yhteydessä: align = Määrittää taulukon asettelun dokumentissa. Mahdollisia arvoja ovat left, center ja right. Tämän attribuutin käyttö ei ole enää kovin suositeltavaa. Taulukoiden asettelu tulisi hoitaa tyylilomakkeiden avulla. border = Määrittää taulukkoa kiertävän reunan paksuuden. Arvo ilmaistaan pikseleissä. Oletuksena arvo on nolla eli taulukon ympärillä ei ole reunuksia. Border-attribuutilla saa melko mukavia efektejä aikaiseksi, kuten seuraava kuva osoittaa. Border-attribuutti määrittää taulukkoa kiertävän reunan paksuuden (border=10). cellspacing = Määrittää solujen välisen etäisyyden toisistaan. Attribuutilla on helppo vähentää taulukosta ahtauden tunnetta. Alla olevassa esimerkissä attribuutin arvoksi on laitettu 10. <TABLE border=1 cellspacing=10> <TR><TH></TH><TH>Sarakeotsikko1</TH> </TR> <TR><TH>Riviotsikko</TH><TD>Tekstiä</TD> </TR></TABLE>

4 54 Cellspacing-attribuutilla määritetään taulukon solujen välinen etäisyys toisistaan. cellpadding = Määrittää solujen tekstin ja solujen reunan välisen etäisyyden. Attribuutti kirjoitetaan HTML-koodiin, kuten cellspacingattribuuttikin, joten esimerkkikoodi ei ole tarpeen. Seuraavassa kuvassa olevan taulukon cellpadding-attribuutin arvo on 10. Cellpadding-attribuutilla määritetään solujen tekstin ja reunan välinen etäisyys toisistaan. frame = Määrittää, mitkä osat taulukon reunasta ovat näkyviä. Mahdollisia arvoja ovat void Ei reunoja. (Huom. jos border-attribuutti on määritetty, soluilla näkyvät reunat.) above Ainoastaan yläreunat näkyvät. below Ainoastaan alareunat näkyvät. hsides Ainoastaan ylä- ja alareunat näkyvät vsides Ainoastaan oikea- ja vasenreuna näkyvät.

5 55 lhs Ainoastaan oikeat reunat näkyvät. rhs Ainoastaan vasemmat reunat näkyvät. box Kaikki neljä reunaa näkyvät. border Kaikki neljä reunaa näkyvät. Jos frame-attribuutin kanssa käyttää border-attribuuttia (edellisissä esimerkeissä se on määritetty), eivät frame-attribuutin vaikutukset näy selvästi eivätkä niin kuin ne on tarkoitettu. Frames-attribuutilla voi määrittää, mitkä taulukon reunoista näkyvät. Tässä attribuutin arvona on lhs. rules = Määrittää, mitkä taulukon viivoitukset näkyvät. Mahdollisia arvoja ovat none Ei viivoituksia. groups Ryhmät erotetaan toisistaan viivoituksella. rows Viivoitukset tulevat rivien väliin. cols Viivoitukset tulevat sarakkeiden väliin. all Kaikkien rivien ja sarakkeiden väliin tulee viivoitukset. Rules-attribuutilla määritetään taulukossa näkyvät viivoitukset. Tässä attribuutin arvoksi on asetettu cols.

6 56 summary = width = Tällä attribuutin arvoksi kirjoitetaan yhteenveto taulukosta. Attribuutti on tehty sitä varten, että ihmiset, jotka eivät käytä visuaalisia selaimia, voisivat paremmin ymmärtää, mistä taulukko kertoo. Tällaisia selaimia ovat esim. sokeille tehdyt selaimet, jotka lukevat sivun sisällön tai muuttavat sen pistekirjoitukseksi. Määrittää taulukon leveyden. Arvo voidaan antaa joko pikseleinä tai prosenttina selaimen käyttämästä tilasta. 5.2 CAPTION CAPTION-elementti sisältää tekstinä taulukon otsikon. Elementti vaatii alku- ja lopputagin ja sen voi sijoittaa ainoastaan heti TABLE-elementin jälkeen. Elementin tulisi kuvata luontevasti taulukon sisältöä. Oletuksena otsikko sijoitetaan taulukon yläpuolelle, mutta align-attribuutilla otsikon sijoitusta voi muuttaa. Uusimman HTML-määritelmän mukaan align-attribuutin käyttöä tulisi välttää ja käyttää sen sijaan tyylilomakkeita. Tyylilomakkeiden käyttö on suositeltavaa aina. Tällöin HTML-dokumentti saadaan mahdollisimman lähelle puhdasta rakenteista dokumenttia, koska itse dokumenttiin ei ole kirjoitettu muotoiluun liittyvä tietoa. align = Määrittää otsikon sijainnin taulukkoon nähden. Mahdollisia arvoja ovat: top Otsikko on taulukon yläpuolella. bottom Otsikko on taulukon alapuolella. left Otsikko on taulukon vasemmalla puolella. right Otsikko on taulukon oikealla puolella. Align-attribuutin lisäksi CAPTION-elementillä on seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Kuten aiemmin on jo mainittu, kaikki yleiset attribuutit ja niiden käyttö on selitetty omassa luvussaan (luvussa 14). Tämä siksi, että yleisyytensä vuoksi ei ole mitään järkeä kertoa niiden merkitystä jokaisen elementin kohdalla. Seuraava esimerkki havainnollistaa CAPTION-elementin käytön.

7 57 <TABLE rules=rows> <CAPTION>Otsikko</CAPTION> <TR><TH></TH><TH>Sarakeotsikko1</TH> </TR> <TR><TH>Riviotsikko</TH><TD>Tekstiä</TD> </TR> </TABLE> CAPTION-elementillä voidaan määrittää taulukon otsikko. 5.3 Riviryhmät: THEAD, TFOOT, TBODY THEAD-, TFOOT- ja TBODY-elementtien avulla voidaan taulukoille määritellä ylä- ja alaotsikot (header ja footer). Tästä on hyötyä esim. tulostettaessa pitkiä taulukkoja, jolloin selainohjelma voi tulostaa jokaiselle sivulle ylä- ja alaotsikon. Elementtien avulla on siis mahdollista ryhmitellä taulukon rivejä Elementit eivät vaadi lopputagia, mutta selkeyden vuoksi on viisasta kirjoittaa se. Elementeille on määritelty seuraavat yleiset attribuutit. id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align, char, charoff, valign

8 58 Elementit täytyy sijoittaa TABLE-elementin sisälle tietyssä järjestyksessä: ensin THEAD, sitten TFOOT ja lopuksi yksi tai useampi TBODY. THEAD- ja TFOOT-elementit ovat toisistaan riippumattomia eli toinen voi aivan hyvin puuttua. TBODYelementeillä voidaan erotella riviryhmiä, jokainen oman TBODY-elementin sisään. Yhtä riviryhmää varten TBODY-elementtiä ei tarvitse määritellä. Eri selaimet käsittelevät THEAD-, TFOOT- ja TBODY-elementit eri tavalla ja tämä on syytä ottaa huomioon sivuja tehtäessä. Esimerkiksi seuraava esimerkki toimii Microsoftin Internet Explorer 4.0:ssa kun taas Opera 3.5 ei osaa käsitellä elementtejä. Opera näyttää myös taulukon erinäköisenä kuin Explorer. <TABLE rules=rows> <CAPTION>Otsikko</CAPTION> <THEAD><TR><TD><B>Tämä teksti on header</b></td></tr> </THEAD> <TFOOT><TR><TD><B>Tämä teksti on footer</b></td></tr> </TFOOT> <TBODY> <TR><TD>Ensimmäisen osan eka rivi</td></tr> <TR><TD>Ensimmäisen osan toka rivi</td></tr> </TBODY> <TBODY> <TR><TD>Toisen osan eka rivi</td></tr> <TR><TD>Toisen osan toka rivi</td></tr> </TBODY> </TABLE> Internet Explorerissa osaa käsitellä THEAD-, TFOOT- ja TBODY-elementtejä.

9 59 Opera 3.5 ei osaa käsitellä THEAD-, TFOOT- ja TBODY-elementtejä. 5.4 Sarakeryhmät: COLGROUP ja COL Edellisessä luvussa esiteltyjen elementtien avulla pystyi muodostamaan taulukon riveistä ryhmiä. COLGROUP- ja COL-elementtien avulla taas puolestaan voidaan muodostaa sarakkeista ryhmiä. COLGROUP-elementillä lopputagi ei ole pakollinen ja COL-elementillä se on kielletty. Luonnollisesti molemmat tarvitsevat alkutagin. Jälleen kerran on syytä kokeilemalla selvittää, kuinka eri selaimet näyttävät tehdyt sivut. Esim. Opera 3.5 ei osaa näyttää sarakkeita COLGROUP-elementin align-attribuutin määrittämällä tavalla, mutta osaa kyllä näyttää sarakkeiden pituudet oikein. Määritettäessä sarakeryhmää täytyy tietää, montako saraketta ryhmään haluaa. Ryhmien määrityksessä on kaksi keinoa, joko COLGROUP-elementin spanattribuutti tai sitten COL-elementti. COL-elementti on eräällä tavalla COLGROUPelementin alaelementti, koska se sijoitetaan COLGROUP-elementin sisään. Käydäänpä läpi COLGROUP-elementin attribuutit ennen esimerkkejä. COLGROUPelementille on määritetty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align, char, charoff, valign

10 60 Lisäksi elementille on määritetty seuraavat omat attribuutit: span = width = Kertoo kuinka monta saraketta määriteltävään sarakeryhmään kuuluu. Arvo on nollaa suurempi kokonaisluku. Jos spanattribuuttia ei ole määritelty, kuuluu sarakeryhmään oletusarvoisesti yksi sarake. Jos COLGROUP-elementin sisään on määritetty yksikin COL-elementti, jättää selain tämän attribuutin huomiotta. Määrittää sararyhmän sarakkeiden pituuden. Luku voidaan antaa pikseleinä, prosenteina (käytettävästä tilasta), suhteellisena arvona sekä kirjoittamalla attribuutin arvoksi 0*, joka tarkoittaa sitä, että sarakkeiden pituus määräytyy pisimmän sarakkeen sisällön mukaan. Ja sitten esimerkkien pariin. Seuraava esimerkki kuvaa, kuinka määritellään kaksi sarakeryhmää. Esimerkissä käytetään span-attribuuttia ryhmien määrityksessä. Kuten edellä mainittiin, jos span-attribuuttia ei ole määritetty, on sarakeryhmän leveys yksi. Koska esimerkissä span-attribuutin arvoksi on asetettu yksi, voisi attribuutin jättää aivan hyvin pois. Se onkin esimerkissä ainoastaan osoittamassa attribuutin käyttöä. <TABLE border="1"> <CAPTION>Talonrakennusohje</CAPTION> <COLGROUP span=1 width="200" align="left"></colgroup> <COLGROUP span=1 width="100" align="center"></colgroup> <TR><TD>Toimenpide</TD><TD>Hinta</TD></TR> <TR><TD>Osta tontti</td><td>90000 mk</td></tr> <TR><TD>Tilaa talopaketti</td><td>114000</td></tr> <TR><TD>Pystytä talo</td><td>100000</td></tr> <TR><TD>Osta huonekaluja</td><td>25000</td></tr> </TABLE>

11 61 COLGROUP-elementillä määriteltyjä sarakeryhmiä. Span-attribuutti on kätevä, jos sarakeryhmään kuuluu useita sarakkeita, joilla on samat muotoiluasetukset esim: <COLGROUP span= 20 width="200" align="center"></colgroup> Jos jokaisen (tai usean) taulukon sarakkeen täytyy näyttää erilaiselta, kannattaa käyttää COL-elementtiä. COL-elementillä on samat yleiset ja omat ominaisuudet kuin COLGROUP-elementilläkin. COL-elementin span-attribuutti toimii periaatteessa samalla tavalla, kuin COLGROUP-elementin span-attribuutti. Koko COL-elementin idea on se, että toisistaan eroavat sarakeryhmät voidaan määritellä kätevästi saman COLGROUP-elementin sisään. Selvyyden vuoksi edellä oleva esimerkki toteutettuna COL-elementillä. <TABLE border="1"> <CAPTION>Talonrakennusohje</CAPTION> <COLGROUP> <COL width="200" align="left"> <COL width="100" align="center"> </COLGROUP> <TR><TD>Toimenpide</TD><TD>Hinta</TD></TR> <TR><TD>Osta tontti</td><td>90000 mk</td></tr> <TR><TD>Tilaa talopaketti</td><td>114000</td></tr> <TR><TD>Pystytä talo</td><td>100000</td></tr> <TR><TD>Osta huonekaluja</td><td>25000</td></tr> </TABLE>

12 TR, TH, TD TR- TH- ja TD-elementit ovat tulleetkin jo tutuksi aikaisemmista esimerkeistä. Niiden avulla määritellään taulukon rivejä (TR), otsikkosoluja (TH) sekä tavallisia soluja (TD). TR-elementillä ei ole mitään yllättäviä ominaisuuksia, toisin kuin THja TD-elementeillä, joten käydään TR-elementin perustiedot läpi ennen TH- ja TDelementteihin siirtymistä. TR-elementin lopputagi ei ole pakollinen, joskin se toisten mielestä helpottaa koodin ymmärtämistä. TR:lle on määritelty määritetty samat yleiset attribuutit kuin melkein kaikille elementeille eli: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align, char, charoff, valign TH- ja TD-elementeillä on myös edellä luetellut attribuutit sekä lisäksi vielä yksi: bgcolor, jolla voi asettaa solun taustavärin TH-elementin avulla määritellään taulukoon otsikkosoluja. Selain voi korostaa otsikkosoluja esim. lihavoimalla niiden tekstin. TH- ja TD-elementeillä on seuraavat omat attribuutit: headers = scope = Kertoo, minkä nimisestä solusta löytyy kyseisen solun otsikko. Attribuutin arvo on välilyönneillä eroteltuja solun nimiä (yksi tai useampi). Otsikkosolut täytyy nimetä id-attribuutin avulla. Tätä attribuuttia käytetään, jotta sokeille tehdyt selaimet voisivat esim. lukea oikean otsikon ennen solun sisältöä. Tämä attribuutti toimii päinvastoin, kuin headers-attribuutti. Tämän attribuutin avulla voidaan määritellä, mille soluille otsikkosolu toimii otsikkona. Attribuutin arvo voi olla yksi seuraavista: row Otsikkosolu toimii otsikkona lopulle riville. col Otsikkosolu toimii otsikkona lopulle sarakkeelle. rowgroup Otsikkosolu toimii otsikkona lopulle riviryhmälle. colgroup Otsikkosolu toimii otsikkona lopulle sarakeryhmälle.

13 63 abbr = axis = rowspan = Tämän attribuutin avulla voi kertoa solun sisällön lyhennettynä. Esim. puhesyntetisaattorilla varustettu selain voisi lukea solun lyhenteen ennen solun varsinaista sisältöä. Tämän attribuutin avulla solu voidaan asettaa kuulumaan johonkin käsitteelliseen luokkaan eli kategoriaan, joiden avulla voidaan muodostaa n-ulotteisen avaruuden akselit. Yksi solu voi kuulua useaan kategoriaan, tällöin kategorioiden nimet erotetaan toisistaan pilkulla. Näkörajoitteisten selaimet (miksei tietysti muutkin selaimet) voivat käyttää näitä kategorioita hyväkseen niin, että selaimelta voi kysyä esimerkiksi tietyn tai tiettyjen kategorioiden solujen sisältöä. Tämän attribuutin avulla voi jakaa taulukon soluja eri riveille. Seuraava esimerkki havainnollistaa attribuutin käyttöä: <TABLE border="1"> <CAPTION>Huuhaa-taulu</CAPTION> <TR><TD rowspan="2">jaettu</td><td>jakamaton</td></tr> <TR><TD>Kuten myös</td></tr> </TABLE> Rowspan-attribuutilla voi jakaa taulukon soluja eri riveille. colspan = Tämän attribuutin avulla voi jakaa taulukon soluja eri sarakeille. Seuraava esimerkki havainnollistaa attribuutin käyttöä: <TABLE border="1">

14 64 <CAPTION>Huuhaa-taulu</CAPTION> <TR><TD colspan="2">jaettu</td></tr> <TR><TD>Jakamaton</TD><TD>Kuten myös</td></tr> </TABLE> Rowspan-attribuutilla voi jakaa taulukon soluja eri sarakkeille. nowrap = width = height = Estää tekstin jakamisen usealle riville solun sisällä. Tämän attribuutin käyttö ei ole suositeltavaa, sillä huolimattomasti käytettynä yhdessä solussa oleva pitkä teksti voi muuttaa koko taulukon ulkoasun sekavaksi tekemällä koko kyseisestä sarakkeesta pitkän. Jos attribuuttia kuitenkin haluaa käyttää, sitä käytetään kirjoittamalla pelkkä attribuutti elementin sisään, sillä attribuutti on niin sanottu boolean-attribuutti. Tämän attribuutin avulla voi asettaa solun toivotun pituuden. Attribuutin käyttö ei ole suositeltavaa, vaan solujen pituudet tulisi asettaa COLGROUP-elementin avulla. Tämän attribuutin avulla voi asettaa solun toivotun pituuden. Vaikka useissa kirjan esimerkeissä TH- ja TD-elementeillä on käytetty lopputagia, se ei ole pakollinen. Lopputagin käyttö on hyvin käyttäjäkohtainen asia, toiset tykkäävät, että koodi on luettavampaa lopputagien kanssa ja toisten mielestä se on selvempää ilman niitä.

15 5.6 Taulukoiden käyttö 65 Taulukoita käytetään paljon, luonnollisesti taulukoiden esittämiseen, mutta myös toisten elementtien sijoitteluun HTML-dokumentissa. Taulukot tarjoavat näppärän keinon asetella kuvia ja tekstiä vierekkäin, palstoittaa tekstiä, esittää useita kuvia rinnakkain, jne. Tässä luvussa käydään läpi näitä keinoja sekä esitellään muutamia esimerkkejä taulukoiden käytöstä Asettelu HTML-kielessä ei ole palstoittamista varten olevaa elementtiä, joten palstoitus tehdään usein TABLE-elementillä. Kuten edellä on käynyt ilmi, sarakkeiden eli palstojen määrä ei ole rajoitettu. Sarakkeita voi olla kuinka paljon tahansa. Kuten aina, myös tässä tapauksessa on syytä muistaa sivujen katsojaa: kukaan ei jaksa lukea epäselvää tai huonosti tehtyä sivua. Internetin käyttäjät suhtautuvat nykypäivänä melko kriittisesti www-sivuihin eivätkä esim. jaksa odottaa kauaa sivun latautumista. Suurin osa internet-yhteyksistä on vielä modeemiyhteyksiä, joten suuren taulukon täyttäminen isoilla kuvilla ei ole kovinkaan järkevä idea Taulukon käyttö asettelussa Seuraava hieman laajempi esimerkki havainnollistaa taulukon käyttöä pienimuotoisen julkaisun teossa. Esimerkin uutiset ovat täysin fiktiivisiä. <TABLE cellpadding="5" border="1"> <CAPTION>Paikallisuutisia</CAPTION> <COLGROUP> <COL width="300" align="left" valign="top"> <COL width="300" align="left" valign="top"> </COLGROUP> <TR> <TD rowspan="2"> Tänään perjantaina aurinko nousee Kuopiossa klo. 4.13, muttei se kuitenkaan näy koko päivänä, koska etelästä tullut matalapaine toi mukanaan kuuden viikon sadekuurot. Hyvää kesälomaa.<br> <IMG src="kartta.bmp"> <TD> Vapaana juoksevat koirat ja lapset tekevät ulkona liikkumisen vaaralliseksi,lähes mahdottomaksi. Asiaa ajamaan on perustettu Calmarin Unioni ry, johon voi ottaa yhteyttä

16 66 puhelimella. </TR> <TR> <TD> Suomen LekaUlkona ry on jakanut stipendit seuraaville innokkaille kätensä tuulettajille: Pekka Ripa, Kimmo Näsä, Ansa Vaappu ja Kaisa Rapa. Stipendi on ajelu autolla, josta ei voi sulkea ikkunoita. </TR> </TABLE> Esimerkki taulukon käytöstä. Soluille on saatu väljyyttä cellpadding-attribuutin avulla. Toinen vaihtoehto olisi ollut cellspacing-attribuutin käyttö, mutta se olisi tehnyt tyhjän tilan solujen väliin eikä sisälle. Sarakkeiden koko ja asettelu on määritelty sarakeryhmien avulla. Sarakkeen leveydeksi asetettiin 300, vaakatasaukseksi (align) left sekä pystytasaukseksi (valign) top. Tällöin teksti alkaa solun vasemmasta yläreunasta.

17 67 Taulukon ensimmäisessä sarakkeessa on yhdistetty kaksi ensimmäistä riviä. Näin saatiin oikealla oleva hukkatila toisen uutisen käyttöön. Ilman rivinjakoa olisi Calmarin Unioni uutisen alle jäänyt iso tyhjä tila. Tilanne on aivan samanlainen, kuin rowspan-esimerkissä aiemmin. Koska toisen rivin ensimmäinen solu on jo käytössä, ei toiselle riville määritellä kuin yksi solu. Jos toisellekin riville määriteltäisiin kaksi solua, tulisi taulukosta kolmesarakkeinen taulukko. Kuvaelementistä ei kannata välittää tässä vaiheessa, sillä siitä kerrotaan enemmän luvussa Taulukko, joka sisältää linkkejä Taulukkojen avulla on hyvä organisoida linkkejä. Jos linkki-elementit (niistä enemmän seuraavassa luvussa) laittaa suoraan HTML-dokumenttiin, saattaa sivusta tulla helposti pitkä ja käyttäjän kannalta hankala hahmottaa. Taulukon tai taulukoiden avulla linkit saa helposti järjestettyä loogisiin ryhmiin eli kategorioihin, joita on helppo lukea ja myös helppo ylläpitää. Seuraavassa esimerkissä on havainnollistettu taulukon käyttöä linkkikokoelmana. Pankkien linkit ovat fiktiivisiä, kun taas hakukoneiden linkit ovat oikeita. Itse linkkielementtiin ei kannata kiinnittää enempää huomiota tässä vaiheessa, sillä siitä kerrotaan enemmän luvussa 6. <TABLE border="1"> <CAPTION>Linkkejä</CAPTION> <TR><TD>Pankkeja</TD><TD>Hakukoneita</TD></TR> <TR> <TD><A href=" <A href=" <A href=" </TD> <TD> <A href=" <A href=" <A href=" </TD></TR> </TABLE>

18 68 Esimerkin taulukossa on kaksi riviä ja kaksi saraketta. Ylempi rivi toimii otsikkona alemmassa rivissä oleville linkeille. Tämä ei ole tietystikään ainut eikä ehkä paraskaan tapa, mutta ylläpidon kannalta se ainakin on selkeä. Toinen tapa ratkaista ongelma olisi nimittäin laittaa jokainen linkki omaan soluunsa. Koodista tulisi kuitenkin erittäin sekavaa, eikä yhden linkin lisääminen kokoelmaan olisi enää kovin helppoa. Taulukko, joka sisältää linkkejä.

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 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ätiedot

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

Tee 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ätiedot

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista

Lisätiedot

H 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 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ätiedot

H 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 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ätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen 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ätiedot

Digitaalisen median tekniikat xhtml Harri Laine 1

Digitaalisen 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ätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

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ätiedot

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

3 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ätiedot

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

HTML-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ätiedot

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

Entiteetit 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ätiedot

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 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ätiedot

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

CSS-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ätiedot

TAULUKOINTI. Word Taulukot

TAULUKOINTI. 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ätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen 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ätiedot

Code 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/ 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ätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva 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ätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin 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ätiedot

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

Artikkelien 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ätiedot

8 Kuvat, sovelmat ja objektit

8 Kuvat, sovelmat ja objektit 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

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen 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ätiedot

TAULUKKO, KAAVIO, SMARTART-KUVIOT

TAULUKKO, KAAVIO, SMARTART-KUVIOT PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden

Lisätiedot

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

Kotisivuohjeet. 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ätiedot

Ulkoasun muokkaus CSS-tiedostossa

Ulkoasun 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ätiedot

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

Editorin 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ätiedot

1. Lohkon korkeus ja leveys

1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt

Lisätiedot

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

VERKKOVELHO-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ätiedot

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

Kun 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ätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet

H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet H6: Tehtävänanto Taulukkolaskennan perusharjoitus Ennen kuin aloitat harjoituksen teon, lue siihen liittyvä taustamateriaali. Se kannattaa käydä läpi kokeilemalla samalla siinä annetut esimerkit käyttämässäsi

Lisätiedot

10 Lomakkeet Kontrollit. 10 Lomakkeet

10 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ätiedot

HTML perusteita (ei julkiseen jakeluun)

HTML perusteita (ei julkiseen jakeluun) HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä

Lisätiedot

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

HTML & 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ätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut 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ätiedot

1 Dreamweaver MMX. 2 Tekstin muokkaus

1 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ätiedot

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

,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ätiedot

Taulukot. 2002 Päivi Vartiainen 1

Taulukot. 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ätiedot

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

Pong-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ätiedot

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut 1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 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ätiedot

JAVA-OHJELMOINTI 3 op A274615

JAVA-OHJELMOINTI 3 op A274615 JAVA-OHJELMOINTI 3 op A274615 Layoutit Teemu Saarelainen teemu.saarelainen@kyamk.fi Lähteet: http://java.sun.com/docs/books/tutorial/index.html Vesterholm, Kyppö: Java-ohjelmointi, Talentum 2004. Layout

Lisätiedot

7 Vapaus. 7.1 Vapauden määritelmä

7 Vapaus. 7.1 Vapauden määritelmä 7 Vapaus Kuten edellisen luvun lopussa mainittiin, seuraavaksi pyritään ratkaisemaan, onko annetussa aliavaruuden virittäjäjoukossa tarpeettomia vektoreita Jos tällaisia ei ole, virittäjäjoukkoa kutsutaan

Lisätiedot

Osaamispassin luominen Google Sites palveluun

Osaamispassin 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ätiedot

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

Luento 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ätiedot

KÄYTTÖOHJE. Servia. S solutions

KÄYTTÖOHJE. Servia. S solutions KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - 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ätiedot

1 Opinnäytetyön graafiset ohjeet. 2 Sivun asetukset. 3 Sivunumerointi. 4 Otsikot

1 Opinnäytetyön graafiset ohjeet. 2 Sivun asetukset. 3 Sivunumerointi. 4 Otsikot 1 1 Opinnäytetyön graafiset ohjeet Metropolia Ammattikorkeakoulun opinnäytetöissä noudatetaan seuraavia graafisia ohjeita. Graafiset ohjeet on tehty Metropolian opinnäytetyöryhmässä. Näiden graafisten

Lisätiedot

Sivueditorin käyttöohje

Sivueditorin käyttöohje Sivueditorin käyttöohje Voit tehdä tyylikkäät nettisivut yrityksellesi sivueditorilla. Sivueditorin avulla on helppoa päivittää ja ylläpitää sivuja silloin, kun sinulle parhaiten sopii. Aloittaaksesi tarvitset

Lisätiedot

HTML 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. 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ätiedot

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu Excel-harjoitus 1 Tietojen syöttö työkirjaan Kuvitteellinen yritys käyttää Excel-ohjelmaa kirjanpidon laskentaan. He merkitsevät taulukkoon päivittäiset ostot, kunnostuskulut, tilapäistilojen vuokramenot,

Lisätiedot

Rekursiolause. Laskennan teorian opintopiiri. Sebastian Björkqvist. 23. helmikuuta Tiivistelmä

Rekursiolause. Laskennan teorian opintopiiri. Sebastian Björkqvist. 23. helmikuuta Tiivistelmä Rekursiolause Laskennan teorian opintopiiri Sebastian Björkqvist 23. helmikuuta 2014 Tiivistelmä Työssä käydään läpi itsereplikoituvien ohjelmien toimintaa sekä esitetään ja todistetaan rekursiolause,

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti 1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004

Navigointi Verkkomultimedia ICT1tn004 Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?

Lisätiedot

Opinnäytetyön mallipohjan ohje

Opinnäytetyön mallipohjan ohje Opinnäytetyön mallipohjan ohje Sisällys 1 Johdanto 1 2 Mallin käyttöönotto 1 3 Otsikot 2 3.1 Luvun otsikko 3 3.2 Alalukujen otsikot 5 4 Tekstikappaleet 5 5 Kuvat ja kuviot 6 6 Taulukot 6 7 Lainaus 7 8

Lisätiedot

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

Pong-peli, vaihe Aliohjelman tekeminen. Muilla kielillä: English Suomi. Tämä on Pong-pelin tutoriaalin osa 3/7. Tämän vaiheen aikana Muilla kielillä: English Suomi Pong-peli, vaihe 3 Tämä on Pong-pelin tutoriaalin osa 3/7. Tämän vaiheen aikana Jaetaan ohjelma pienempiin palasiin (aliohjelmiin) Lisätään peliin maila (jota ei voi vielä

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. 3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Lisätiedot

Java layoutit. Juha Järvensivu juha.jarvensivu@tut.fi 2007

Java layoutit. Juha Järvensivu juha.jarvensivu@tut.fi 2007 Java layoutit Juha Järvensivu juha.jarvensivu@tut.fi 2007 Layout Container Container LayoutManager Component Component Component Komponentin koko minimikoko setminumumsize(dimension d) Useimmat layoutmanagerit

Lisätiedot

Kiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen

Kiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen Kiipulan ammattiopisto Liiketalous ja tietojenkäsittely Erja Saarinen 2 Sisällysluettelo 1. Johdanto... 3 2. Hyvät internetsivut... 3 3. Kuvien koko... 4 4. Sivujen lataus... 4 5. Sivukartta... 5 6. Sisältö...

Lisätiedot

Kyläsivujen InfoWeb-ohje

Kyläsivujen InfoWeb-ohje Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina

Lisätiedot

NTG CMS. Julkaisujärjestelm. rjestelmä

NTG CMS. Julkaisujärjestelm. rjestelmä NTG CMS Julkaisujärjestelm rjestelmä NTG CMS julkaisujärjestelmän avulla voit päivittää ja ylläpitää internetsivujen sisältöä helppokäyttöisen webkäyttöliittymän kautta, ilman minkäänlaista html-osaamista.

Lisätiedot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot HTML-kielen alkeet Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot ovat tavallisia tekstitiedostoja, jotka selain tulkkaa

Lisätiedot

ARVO - verkkomateriaalien arviointiin

ARVO - 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ätiedot

Turun yliopiston Nelli ohje käyttöönottoon

Turun yliopiston Nelli ohje käyttöönottoon Turun yliopiston Nelli ohje käyttöönottoon Perusajatus Perusajatus on sulkea metalib sivu sarakkeeseen, jonka vierelle toiseen sarakkeeseen sijoitetaan hakemistovalikko. Metalib sivujen muokkaus Metalib

Lisätiedot

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN

Lisätiedot

Lanuti.fi Lapin nuorisotiedotus. TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi

Lanuti.fi Lapin nuorisotiedotus. TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi Lanuti.fi 2015 Lapin nuorisotiedotus TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, 02150 Espoo Teknotie 14 16, 96930 Napapiiri, Rovaniemi Y-tunnus 1008465-8 www.tietotalo.fi Päivämäärä Versio Kuvaus

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

http://www.microsoft.com/expression/

http://www.microsoft.com/expression/ Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA

Lisätiedot

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

1 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ätiedot

KAPPALEMUOTOILUT. Word Kappalemuotoilut

KAPPALEMUOTOILUT. Word Kappalemuotoilut Word 2013 Kappalemuotoilut KAPPALEMUOTOILUT KAPPALEMUOTOILUT... 1 Tekstin tasaaminen... 1 Sisentäminen... 1 Koko kappaleen sisentäminen... 2 Sisennyksen poistaminen... 2 Riippuva sisennys (sivuotsikko)...

Lisätiedot

Digitaalisen median tekniikat JavaScript_osa2

Digitaalisen 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ätiedot

Digitaalisen median tekniikat JavaScript_osa Harri Laine 1

Digitaalisen 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ätiedot

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti: HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis

Lisätiedot

Johdatus L A TEXiin. 8. Taulukot ja kuvat. Matemaattisten tieteiden laitos

Johdatus L A TEXiin. 8. Taulukot ja kuvat. Matemaattisten tieteiden laitos Johdatus L A TEXiin 8. Taulukot ja kuvat Matemaattisten tieteiden laitos Taulukot I Taulukkomaiset rakenteet tehdään ympäristöllä tabular Ympäristön argumentiksi annetaan sarakemäärittely, joka on kirjaimista

Lisätiedot

TEKSTINKÄSITTELY Aloitusharjoitus

TEKSTINKÄSITTELY Aloitusharjoitus TEKSTINKÄSITTELY Aloitusharjoitus Kirjoita teksti, jossa kerrot lyhyesti, max. ½ sivua, mitä kaikkea olet tietokoneiden kanssa tähän mennessä puuhastellut. Mitä jo osaat ja mitä tarvitsisi vielä oppia?

Lisätiedot

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut.

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut. Kotisivu ohje Kotisivu - ohjelmisto on webbipohjainen kotisivujen julkaisujärjestelmä jossa käyttäjä ei tarvitse erityistaitoja kyetäkseen julkaisemaan webbisivuja. Jos osaat käyttää Microsoft Word tekstinkäsittelyohjelmaa,

Lisätiedot

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja HTML ja CSS T-111.4360 WWW-palvelun suunnittelu Mikko Pohja Sisältö HTML XHTML CSS DOM DHTML Käytännön esimerkkejä Kuka tahansa pystyy tekemään yksinkertaisen dokumentin HTML Hyper Text Markup Language

Lisätiedot

Johdatus L A TEXiin. 7. Taulukot ja kuvat. Dept. of Mathematical Sciences

Johdatus L A TEXiin. 7. Taulukot ja kuvat. Dept. of Mathematical Sciences Johdatus L A TEXiin 7. Taulukot ja kuvat Dept. of Mathematical Sciences Taulukot I Taulukkomaiset rakenteet tehdään ympäristöllä tabular Ympäristön argumentiksi annetaan sarakemäärittely, joka on kirjaimista

Lisätiedot

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit Android ohjelmointi Tunti 2 Käyttöliittymät ja resurssit Debug Log luokka mahdollistaa debug tulostamisen ADB:n kautta konsoliin (esim. DDMS:ään) esim. Log.println(Log.INFO, TAG, Tämä on println ); Voidaan

Lisätiedot

M. Merikanto 2012 XML. Merkkauskieli, osa 2

M. Merikanto 2012 XML. Merkkauskieli, osa 2 XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao

Lisätiedot

ESIKATSELU, TULOSTAMINEN, TUNNISTEET

ESIKATSELU, TULOSTAMINEN, TUNNISTEET Excel 2013 Tulostaminen Sisällysluettelo ESIKATSELU, TULOSTAMINEN, TUNNISTEET TULOSTAMINEN JA TULOSTUSASETUKSET... 1 Esikatselu ja tulostaminen... 1 Reunuksien määrittäminen, keskittäminen... 2 Ylä- ja

Lisätiedot

HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko. Mirja Jaakkola

HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko. Mirja Jaakkola HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko Mirja Jaakkola Luettelot Luetteloelementillä esitetään eri tyyppisiä luetteloja ja listoja Luetteloelementeille on ominaista: luettelo ja luettelorivit

Lisätiedot

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) 6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

MITÄ JAVASCRIPT ON?...3

MITÄ JAVASCRIPT ON?...3 JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3

Lisätiedot

Graafinen ohjeisto 1

Graafinen ohjeisto 1 Graafinen ohjeisto 1 Sisältö Tunnuksista yleisesti... 3 Tunnuksen versiot ja rakenne.... 4 Merkin värit.... 5 Tunnuksen värivaihtoehtoja... 7 Tunnuksen suoja-alue.... 8 Tunnuksen sijoittelu.... 9 Pienen

Lisätiedot

Graafiset käyttöliittymät Sivunparantelu

Graafiset käyttöliittymät Sivunparantelu Graafiset käyttöliittymät Sivunparantelu Johdanto Tarkoituksenamme on parantaa Konebox.fi-verkkokaupan nettisivuja. Ensivaikutelman perusteella sivusto tuntuu todella kömpelöltä ja ahdistavalta. Sivu on

Lisätiedot

Suomen Akatemian verkkoasioinnin käyttöohje toimikuntien ja muiden valmistelu- ja päätöksentekoelinten jäsenille

Suomen Akatemian verkkoasioinnin käyttöohje toimikuntien ja muiden valmistelu- ja päätöksentekoelinten jäsenille Verkkoasioinnin käyttöohje 10.2.2011 v1.0 FI Suomen Akatemian verkkoasioinnin käyttöohje toimikuntien ja muiden valmistelu- ja päätöksentekoelinten jäsenille Tämä ohje koskee lokakuun 2010 haussa käyttöönotettua

Lisätiedot

Asemointi. 1. Lohkon korkeus ja leveys

Asemointi. 1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

Internetin hyödyt ja vaarat. Miten nettiä käytetään tehokkaasti hyväksi?

Internetin hyödyt ja vaarat. Miten nettiä käytetään tehokkaasti hyväksi? Internetin hyödyt ja vaarat Miten nettiä käytetään tehokkaasti hyväksi? Linkit Chrome https://www.google.com/intl/fi/chrome/browser/ Firefox http://www.mozilla.org/fi/ Opera http://www.opera.com/fi Vertailu

Lisätiedot

ez Publish ja Toolbar yleisohjeet

ez Publish ja Toolbar yleisohjeet ez Publish ja Toolbar yleisohjeet SISÄLLYSLUETTELO: 1. Perustyökalut 2 1.1 Sivupohjan valinta ja sivun lisäys 2 1.2 Sivun muokkaus, siirto ja poisto 2 1.3 Puurakenne, aakkospainike, TR-painike ja F-painike

Lisätiedot

eperusteet julkiset rajapinnat

eperusteet julkiset rajapinnat eperusteet julkiset rajapinnat Yleiset käytännöt Rajapinnat on toteutettu ns. REST rajapintoina ja niissä käytetään JSON-kuvausta tietojen esittämiseen. Merkistökoodauksena käytetään UTF-8:i a. Sisäiset

Lisätiedot

MICROSOFT EXCEL 2010

MICROSOFT EXCEL 2010 1 MICROSOFT EXCEL 2010 Taulukkolaskentaohjelman jatkokurssin tärkeitä asioita 2 Taulukkolaskentaohjelmalla voit Käyttää tietokonetta ruutupaperin ja taskulaskimen korvaajana Laatia helposti ylläpidettäviä

Lisätiedot

Työvälineohjelmistot KSAO Liiketalous 1

Työvälineohjelmistot KSAO Liiketalous 1 KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana

Lisätiedot

XHTML - 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: 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ätiedot

Tietosuoja-portaali. päivittäjän ohje

Tietosuoja-portaali. päivittäjän ohje Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan

Lisätiedot

Google-dokumentit. Opetusteknologiakeskus Mediamylly

Google-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ätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aineisto-valikon tai Add an activity or resource valikon (Asetukset lohko Activity chooser on toiminnon ollessa päällä). Valitse

Lisätiedot