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 (unordered list) 10.Järjestetty lista (ordered list) 11.Määritelmälista (definiton list) 12.CSS ja listat: display & list-style-type 13.CSS ja listat: list-style-image 14.CSS ja listat: list-style-position & list-style 15. Taulukko table 16. Table-elementti ja sen attribuutit 17. Table-elementin alielementit 18. Esimerkki 19.tr, th ja td elementit 20. Esimerkki 21.Taulukon sijoittelu sivulla ja taulukon leveys 22.Solun sisällön vaaka- ja pystysuora tasaus 23. Taulukon ja solujen reunukset 24. Taulukon reunaviivat kiinni toisiinsa 25. Tyhjää tilaa solujen sisälle 26. Esimerkki 2
Linkki (anchor) Linkki tehdään a-elementillä, joka on inline-elementti eli et voi sijoittaa linkkiä suoraan body-elementin alle vaan sijoita linkki jonkun lohkoelementin sisälle. Linkin kohde ilmoitetaan href-attribuutilla. Absoluuttinen linkki HAAGA-HELIAn pääsivulle: <a href="http://www.haaga-helia.fi">siirry HAAGA-HELIAn sivuille</a> linkin kohde url-osoitteena linkkiteksti, joka näkyy xhtmlsivulla mailto-linkki avaa sähköpostiohjelman ja linkin kohteeksi laitetaan sähköpostiosoite: <a href="mailto:anna.malli@mallit.fi">lähetä viesti Annalle</a> 3
Suhteellinen linkki Linkki saman kansion tiedostoon: <a href="kuvat.html >Katso kuvia</a> Linkki alikansion tiedostoon: <a href="harrastukset/tanssi.html">tanssiharrastus</a> Linkki tiedostoon, joka sijaitsee hakemistossa yksi ylöspäin: <a href="../uutiset.html">uutiset</a> Kuva toimii linkkinä: <a href= index.html"><img src= logo.gif alt= yrityksen logo /></a> Voit linkittää myös muihin kuin xhtml-tiedostoihin. Esim. linkki kuvaan: <a href="maisema.jpg">maisema rannalta</a> Linkki word-dokumenttiin: <a href="ohje.doc">kameran käyttöohje</a> 4
Sivun sisäinen linkki Linkin kohde eli ankkuri sijaitsee samalla sivulla, jolloin linkissä kohde merkitään #kohdesana: <a href="#kappale2">kappale 2: Luokat</a> Linkin kohde voi sijaita myös toisella sivulla, jolloin siirrytään toiselle sivulle ankkurin osoittamaan kohtaan: <a href="mallit.html/#kappale2">kappale 2: Luokat</a> Ankkurin paikka sivulla merkitään a-elementillä käyttäen name-attribuuttia (vain xhtml 1.0:ssa). Esimerkissä viitataan sivulla olevaan otsikkoon: <h3><a name="kappale2 >Kappale 2: Luokat</a></h3> Ankkuri voidaan merkitä myös liittämällä kohteena olevaan elementtiin idattribuutti, mikä on suositeltavaa ja xhtml 1.1.:ssä ainoa tapa tehdä sivun sisäiseen linkkiin ankkuri: <h3 id="kappale2">kappale 2: Luokat</h3> 5
CSS ja linkit Pseudoluokkaa eli näennäisluokkaa käytetään linkkien tyylimäärittelyssä seuraavasti: a:link a:visited a:active a:hover linkki käyty linkki aktiivinen linkki, eri selaimilla erilainen tulkinta, esim: Opera: linkki, jonka päällä hiiri on alhaalla Mozilla: linkki, jota on juuri klikattu IE: linkki, jossa juuri on käyty hiiri linkin päällä, toimii uusimmissa selaimissa myös muilla elementeillä esim. p CSS-esimerkki: a:link {color:navy} a:active {color:#cc0033} a:visited {color:#9933ff} a:hover {color:lime; background:yellow; border:solid; text-decoration:none} 6
Tehtävä Miten teet seuraavat linkit: yritys-kansion index.html:stä linkki info.html-dokumenttiin? yritys-kansion tuotteet.html:stä linkki tuotteet-kansion osat.html-dokumenttiin? public_html-kansion index.html:stä linkki tuotteet-kansion oppaat.html:ään? yritys-kansion index.html:stä linkki public_html -kansiossa olevaan index.html-dokumenttiin? tuotteet-kansiossa olevasta oppaat.html:stä linkki public_html kansiossa olevaan index.html-dokumenttiin? yritys-kansion index.html:stä linkki kuvat-kansion logo.gif-kuvaan? tuotteet-kansion osat.html:stä linkki kuvat kansion mainos.jpgkuvaan? 7
Listat eli luettelot listaelementit ovat lohkoelementtejä: lista ja listan alkiot alkavat uudelta riviltä listan jälkeen tuleva elementti alkaa uudelta riviltä lista-alkioon voit sijoittaa tekstiä sekä lohko- ja inline-elementtejä. listan alkuun ja loppuun selain jättää tyhjää tilaa, useimmat selaimet noin rivin verran. lista-alkioiden välissä tyhjää tilaa ei ole listan vasemmassa reunassa on tyhjää tilaa tyhjää tilaa listan ja alkioiden ympärillä voidaan lisätä ja poistaa csstyylimäärittelyillä muokkaamalla margin- ja padding-arvoja <p>linkkejä kouluun:</p> <ul> <li><a href="http://www.haaga-helia.fi">haaga-helia amk</a></li> <li><a href="http://bb.haaga-helia.fi">blackboard</a></li> </ul> 8
Järjestämätön lista (unordered list) Luetelmamerkillä koottu lista, jonka jäsenet ovat toisiinsa nähden saman arvoisia lista-elementtinä toimii ul-elementti ja sen sisällä lista-alkiot merkitään lielementillä (list item), esim. <ul> <li>maito</li> <li>mehu</li> <li>kahvi</li> </ul> css-sääntö lista-merkki list-style-type: circle list-style-type: disc list-style-type: square 9
Järjestetty lista (ordered list) Käytetään kun halutaan korostaa lista-alkioiden järjestystä (esim. ohjeet) lista-elementtinä toimii ol-elementti ja sen sisällä lista-alkiot merkitään lielementillä, esim. css-sääntö numerointi <ol> list-style-type:upper-alpha A, B, C, <li>avaa editori</li> list-style-type:upper-latin <li>kirjoita koodi</li> <li>tallenna</li> list-style-type:lower-alpha a, b, c, </ol> list-style-type:lower-latin list-style-type:upper-roman I, II, III, 1. avaa editori 2. kirjoita koodi 3. tallenna list-style-type:lower-roman i, ii, iii, list-style-type:decimal 1, 2, 3,... list-style-type:decimalleading-zero list-style-type:lower-greek list-style-type:armenian list-style-type:georgian 01,02,03, α,β,γ 10
Määritelmälista (definiton list) dl-elementillä (Definition List) kootaan joukko määritelmiä listaksi dt-elementillä (Denition Term) lisätään listaan määriteltäviä termejä dd-elementillä (Definition Description) lisätään listaan termin selitys <dl> <dt>xhtml <dd> Extensible Hypertext Markup Language </dd> </dt> <dt>css <dd>cascading Style Sheet</dd> </dt> </dl> 11
CSS ja listat: display & list-style-type display:list-item oletuksena ul- ja ol-elementille halutessa voidaan laittaa myös muille elementeille esim. dt, dd tai vaikkapa p-elementille, jolloin niitä voidaan käsitellä listan tavoin display:inline käytettäessä listaelementit tulevat samalle riville peräkkäin list-style-type kertoo listan merkin (periytyy lapsielementeille) ja sopii kaikille elementeille, joille on määritelty display:list-item li-elementille CSS:llä annettu tekstin väri vaikuttaa myös listamerkkiin, mutta ei taustaväriin vaan taustaväri tulee ul- tai ol-elementin vanhempi-elementiltä 12
CSS ja listat: list-style-image list-style-image määritellään listamerkin paikalle haluttu kuva esim. ul {list-style-image:url(logo.gif)} testaa eri selaimissa selaimet sijoittavat kuvan eri korkeuksille ja eri paikkaan tekstiin nähden lisää tyhjää tilaa ainakin kuvan oikealle puolelle, jotta kuva mahtuu kunnolla Läpinäkyvä gif-kuva sulautuu parhaiten taustaan 13
CSS ja listat: list-style-position & list-style list-style-position:lla määritellään listamerkin sijoitus tekstiin nähden list-style-position:outside list-style-position:inside list-style Lyhennemerkintä, jolla voidaan elementille antaa yhdellä kertaa seuraavat ominaisuudet: list-style-type list-style-image list-style-position Käytännössä kannattaa antaa kaikki tarvittavat ominaisuudet, jotta toimisi oikein eri selaimilla. 14
Taulukko - table Www-sivuilla taulukoita käytettään taulukkomuotoisen tiedon esittämiseen asemointiin (sivun taittamiseen) www-sivujen taulukoilla ei ole taulukkolaskennallisia ominaisuuksia (vrt. excel) www-sivujen taulukoilla siis vain esitetään tietoa taulukkomuodossa Taulukko koostuu riveista (rows), jotka on jaettu soluilla sarakkeisin (colums) 15
Table-elementti ja sen attribuutit Xhtml-koodissa taulukko tehdään table-elementin sisään. Table-elementti on lohkoelementti. Table-elementin attribuutit ovat valinnaisia: <table> </table> border Reunan leveyden arvo pikseleinä (oletus 0) cellpadding cellspacing frame rules summary Sisällön ja reunan välinen tila Solujen välinen tila Mitkä taulukon reunuksista näkyvät, arvona: void (ei reunusta), above (ylä), below (ala), hsides (vasen ja oikea), lhs (vasen), hs (oikea), vsides (ylä- ja ala), box (kaikki) tai border (kaikki). Mitkä reunat näkyvät, arvona: none (ei reunusta), groups (rivi- ja sarakeryhmien välit), rows (rivien välit), cols (sarakkeiden välit) tai all (kaikki). Yhteenveto taulukon tarkoituksta width Taulukon leveys 16
Table-elementin alielementit table-elementille voidaan lisätä seuraavia alielementtejä annetussa järjestyksessä: 1. caption: seloste, jolla voidaan korvata summary-attribuutti, ei pakollinen. 2. col tai colgroup: sarakkeiden ryhmittely, ei ole pakollinen. Colgroup-elementin alielementtinä voi olla vain col-elementtejä. Col-elementti on tyhjä elementti, jonka tärkeimmät attribuutit ovat span (numero kertoo ryhmän sarakkeiden määrän, oletus 1) ja width (oletusleveys ryhmän sarakkeelle). 3. thead: määrittelee taulukon kuvailevista otsikkoriveistä (sarakeotsikot) ryhmän esim. tulostettaessa ylätunnisteeseen. Taulukossa saa olla vain yksi theadelementti. Alielementteinä tr-elementtejä. Ei ole pakollinen. 4. tfood: määrittelee taulukon kuvailevista otsikkoriveistä (sarakesummat) ryhmän, sijoitus taulukon lopussa esim. tulostettaessa alatunnisteeseen. Taulukossa saa olla vain yksi tfood-elementti. Alielementteinä tr-elementtejä. Ei ole pakollinen. 5. tbody: määrittelee ryhmän taulukon tietorivejä, alielementteinä tr-elementtejä, vähintään yksi tbody tai tr-elementti oltava taulukossa 6. tr: sisältörivi, alielementteinä th- tai td-elementtejä, vähintään yksi tbody tai tr-elementti oltava taulukossa. 17
Esimerkki <table border="1" summary= lasten iät"> <caption>ikä</caption> <thead> <tr><td>nimi</td><td>ikä</td></tr> </thead> <tfoot> <tr><td>nimet</td><td>iät</td></tr> </tfoot> <tbody> <tr><td>anna</td><td>5</td></tr> <tr><td>joel</td><td>10</td></tr> <tr><td>kaisa</td><td>9</td></tr> <tr><td>ninni</td><td>12</td></tr> <tr><td>timi</td><td>14</td></tr> </tbody> </table> 18
tr, th ja td -elementit Taulukko koostuu siis riveistä ja sarakkeissa. Rivit muodostetaan tr-elementeillä. Rivien sisällä on alielementit: th: otsikkosolu, lihavoitu- ja keskitetty teksti td: normaali solu td ja th-elementtien sisälle voit sijoittaa tekstiä sekä lohko- ja inlineelementtejä. td- ja th-elementtien tärkeimmät attribuutit ovat: colspan: kertoo monelle sarakkeelle solu laajenee <td colspan= 5 >Viisi saraketta</td> rowspan: kertoo monelle riville solu laajenee <td rowspan= 3 >Kolme riviä</td> 19
Esimerkki <table border="1"> <tr> <th colspan="3">puhelinmuistio</th> </tr> <tr> <th>sukunimi</th> <th>etunimi</th> <th>puhelin</th> </tr> <tr> <td rowspan="2">mallikas</td> <td>anna</td> <td>050-12345678</td> </tr> <tr> <td>mikko</td> <td>040-40404040</td> </tr> </table> 20
Taulukon sijoittelu sivulla ja taulukon leveys Taulukon paikka sivulla: Voit keskittää taulukon www-sivulle marginaalin avulla: table {margin-left:auto; margin-right:auto;} Voit sijoittaa taulukon tekstin viereen float-ominaisuudella table {float:right; width:300px; margin-left:10px;} Taulukolle annetaan yllä minimileveys. Jos taulukko on suurempi kasvaa taulukon leveys automaattisesti. Selain pyrkii aina asettamaan taulukon leveyden mahdollisemman pieneksi jos minimileveyttä ei ole annettu. 21
Solun sisällön vaaka- ja pystysuora tasaus text-align -ominaisuus ei vaikuta taulukon sijaintiin vaan ainoastaa taulukon solujen sisällön tasaukseen. Oletuksena th-solut ovat keskitettyjä ja td-soluissa on vasemman reunan tasaus. Seuraava tasaa th-solut vasemmalle ja td-solut oikealle: th {text-align:left;} td {text-align:right;} vertical-align -ominaisuudella annetaan solun sisällön pystysuoran sijainnin solun sisällä ja sen arvot voivat olla: baseline bottom middle top Solun sisällön 1. perusrivi on samassa tasossa kuin muissa taulukon soluissa Solun sisältö solun alareunassa Solun sisältö solun keskellä (oletusarvo) Solun sisältö solun yläreunassa 22
Taulukon ja solujen reunukset Table-elementillä voi olla border-attribuutti, joka kertoo numerolla sekä taulukon reunuksen että taulukon solujen reunuksen vahvuuden. Oletuksena border on 0, jolloin taulukon ja solujen reunat eivät tule näkyviin. Taulukon reunukset voidaan määrittää myös CSS:n avulla. Tällöin voidaan asettaa border-ominaisuusilla reunuksen paksuus, tyyli, väri ym. ominaisuuksia erikseen taulukon reunukselle, solujen reunuksille ja taulukon otsikolle eli captionelementille. table {border: medium groove #009999;} td,th,caption {border: thin solid #666666;} 23
Taulukon reunaviivat kiinni toisiinsa border-collapse ominaisuus liittää collapse-arvolla taulukon reunaviivat toisiinsa niin, ettei viivojen väliin jää tyhjää tilaa, seuraavien sääntöjen mukaan: Jos toinen reunaviivoista on määritelty hidden-tyyppiseksi, tulee lopputuloksena reunaviivasta hidden eli se ei tule näkyviin. Jos reunaviivat ovat eri levyiset tulee reunaviivasta leveämmän mukainen Jos reunaviivat ovat erityyppiset, tulee lopputuloksena se reunaviivatyyli, joka on ensimmäisenä seuraavassa listassa: double, solid, dashed, dotted, ridge, outset, groove, inset, none. Jos reunaviivojen väri on erilainen, tulee lopputuloksena väri siitä määritellystä elementistä, joka on ensimmäisenä seuraavassa listassa: solu, rivi, riviryhmä, sarake, sarakeryhmä, taulukko. Lisätään edellisen sivun esimerkkiin: table {border-collapse:collapse;} 24
Tyhjää tilaa solujen sisälle Jos käytät taulukossa reunuksia kannattaa lisätä tyhjää tilaa solujen sisälle, jotta sisältö ei ottaisi reunaan kiinni. Lisää tyhjää tilaa sisällön ympärille padding-arvolla. table {border: medium groove #009999;} td,th,caption {border: thin solid #666666; padding:5px;} 25
Esimerkki <table border="1" style="border-collapse:collapse"> <colgroup> <col style="background-color:yellow; width:50%"/> <col span="2" style="color:green; text-align:right; border:solid"/> </colgroup> <tr> <td>valtio</td> <td>väkiluku</td> <td>pinta-ala</td> </tr> <tr> <td>suomi</td> <td>5 339 870</td> <td>338 424</td> </tr> <tr> <td>islanti</td> <td>320 000</td> <td>103 125</td> </tr> </table> IE 7: Firefox 2: Col-elementin ominaisuuksia tuetaan eri selaimilla erilailla: - background-color ja width ok - border onnistuu jos taulukolle on määritelty border-collapse (ei IE) - color ja text-align vain IE:llä Lähteet: http://www.w3c.org Korpela: CSS verkkosivujen muotoilussa 26