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 alkavat uudelta riviltä luettelon jälkeen tuleva elementti alkaa uudelta riviltä Luettelon alkuun ja loppuun selain jättää tyhjää tilaa, useimmat selaimet noin rivin verran. Luettelorivien välissä tyhjää tilaa ei ole Luettelon vasemmassa reunassa on tyhjää tilaa Tyhjää tilaa luettelon ja luettelorivien ympärillä voidaan lisätä ja poistaa css-tyylimäärittelyillä muokkaamalla margin- ja padding-arvoja 2
Järjestämätön luettelo (unordered list) Luettelomerkillä koottu luettelo, jonka jäsenet ovat toisiinsa nähden saman arvoisia luettelo-elementtinä toimii ul-elementti ja sen sisällä luettelorivit merkitään li-elementillä (list item). Li-elementti voidaan kirjoittaa lopputagilla tai ilman. <ul> <li>maito <li>mehu <li>kahvi </ul> css-sääntö lista-merkki list-style-type: circle list-style-type: disc list-style-type: square 3
Järjestetty luettelo (ordered list) Käytetään kun halutaan korostaa luettelo-alkioiden järjestystä (esim. ohjeet) luettelo-elementtinä toimii ol-elementti ja sen alielementtinä li-elementti. <ol> <li>avaa editori <li>kirjoita koodi <li>tallenna </ol> 1. avaa editori 2. kirjoita koodi 3. tallenna 4
Järjestetty luettelo (ordered list) Järjestetyn luettelon luettelomerkki CSS:ssä: css-sääntö numerointi list-style-type:upper-alpha A, B, C, list-style-type:lower-alpha a, b, c, list-style-type:upper-roman I, II, III, list-style-type:lower-roman i, ii, iii, list-style-type:decimal 1, 2, 3,... 5
Järjestetty luettelo (ordered list) ol-elementin attribuutteina ovat globaalien lisäksi: reserved: boolean-attribuutti, joka kääntää listaelementin rivien järjestyksen laskevaksi, esim. 3, 2, 1. Heikko selaintuki. start: attribuutin arvo kertoo listaelementin 1. rivin listamerkin arvon. type: mime-tyyppi Kun li-elementti on ol-elementin lapsielementtinä, voi li-elementillä olla value-attribuutti, jonka arvo on luku. Sijoitukset: <ol start="3"> <li>anna Malli <li value="7">esa Merkki <li>matti Majava </ol> 6
Määritelmäluettelo (definiton list) dl-elementillä (Definition List) kootaan joukko määritelmiä luetteloksi dt-elementillä (Denition Term) lisätään luetteloon määriteltäviä termejä dd-elementillä (Definition Description) lisätään luetteloon termin selitys <dl> <dt>xhtml</dt> <dd> Extensible Hypertext Markup Language </dd> <dt>css</dt> <dd>cascading Style Sheet</dd> </dl> 7
CSS ja luettelot: display & list-style-type Display display:list-item oletuksena ul- ja ol-elementille halutessa voidaan laittaa myös muille elementeille esim. p-elementille, jolloin niitä voidaan käsitellä luettelon tavoin display:inline käytettäessä luetteloelementit tulevat samalle riville peräkkäin display:block Luetteloelementit esitetään lohkoelementteinä, joille voit määrittää mm. leveyden ja kellutuksen float:n avulla. list-style-type kertoo luettelon 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 luettelomerkkiin, mutta ei taustaväriin. Taustaväri tulee ul- tai ol-elementin vanhempielementiltä. 8
CSS ja listat: list-style-image list-style-image määritellään luettelomerkin paikalle haluttu kuva 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- tai png-kuva sulautuu parhaiten taustaan 9
CSS ja luettelot: list-style-position & list-style list-style-position määritellään luettelomerkin 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 10
Luettelomerkki taustakuvana Voit liittää oman luettelomerkin myös taustakuvana: ul li {background-image:url(merkki.png); background-repeat:no-repeat; background-position:0px 6px; padding-left:20px;} Sisältö: <ul> <li>1. luku <li>2. luku <li>3. luku </ul> 11
Linkki (anchor) Linkki tehdään a-elementillä. a-elementillä on globaalien attribuuttien lisäksi seuraavat attribuutit href url-osoite Kohdedokumentin arvo hreflang kielikoodi Kohdedokumentin kieli media esitysmedia Mille medialle/laitteelle dokumentti on tarkoitettu rel Alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag Nykyisen dokumentin ja linkin kohteen suhde target _blank, _parent, _self, _top Mihin linkki avataan type MIME-tyyppi Kohdedokumentin MIME-tyyppi 12
Absoluuttinen linkki ja mailto-linkki Absoluuttisessa linkissä kerrotaan koko url-osoite: <a href="http://www.haaga-helia.fi">siirry HAAGA-HELIAn sivuille</a> linkin kohde url-osoitteena linkkiteksti, joka näkyy sivulla mailto-linkki avaa oletus-sähköpostiohjelman (esim. outlook) ja linkin kohteeksi laitetaan sähköpostiosoite: <a href="mailto:anna.malli@mallit.fi">lähetä viesti Annalle</a> 13
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 html-tiedostoihin. Esim. linkki kuvaan: <a href="maisema.jpg">maisema rannalta</a> Linkki pdf-tiedostoon: <a href="ohje.pdf">kameran käyttöohje</a> 14
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? 15
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 Firefox: 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} 16
Ulkoisen linkin muotoilu Sivuston ulkopuolelle menevä linkki halutaan usein muotoilla erilaiseksi kun sivuston sisäiset linkit. Ulkoisen linkin a-elementin rel-attribuutille voidaan antaa arvo external, josta voidaan päätellä linkin menevän sivuston ulkopuolelle. CSS:ssä voit viitata rel-määreeseen määriteselektorin avulla: [rel="external"] {background: url(nuoli.png) center right no-repeat; padding-right:25px;} <a href="http://www.haaga-helia.fi" rel="external"> HAAGA-HELIA amk</a> 17
a-elementin vanhempi- ja lapsielementit Aikaisemmissa HTML4 Strict ja XHTML-versioissa a-elementti määritellään inline-elementiksi. Et voinut sijoittaa linkkiä suoraan body-elementin alle vaan linkki piti sijoittaa aina lohkoelementin sisälle. HTML5:ssa linkki-elementin voi sijoittaa suoraan body-elementin alle ja sen alielementteinä voi olla lohkotason elementtejä, esim. h1, p, section, lista, taulukko... Linkkielementin alielementtinä ei saa olla toista linkkielementtiä eikä painiketta. <a href="index.html" id="hh"> <img src="logo.gif" alt="logo"> <h1>haaga-helia amk</h1> </a> #HH {display:block; border: solid 3px blue;} Esimerkissä sekä logo että pääotsikko toimivat linkkinä pääsivulle. Linkkielementti on tekstitason elementti, joka ei aiheuta rivin vaihtoa. Esimerkissä linkki on muutettu lohkotason elementiksi ja sille on annettu kehys. 18
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 toisella sivulla suoraan ankkurin osoittamaan kohtaan: <a href="mallit.html/#kappale2">kappale 2: Luokat</a> Ankkuri merkitään liittämällä kohteena olevaan elementtiin id-attribuutti: <h3 id="kappale2">kappale 2: Luokat</h3> 19
CSS ja sivun sisäinen linkki Sivun sisäinen linkki voidaan kohdistaa kokonaiseen lohkoelementtiin Tällöin voit määritellä pseudoluokan :target, joka viittaa kohtaan, johon on viimeksi linkin avulla siirrytty. Esim. alla :target tekee reunuksen sivun sisäisen linkin kohteen ympärille :target {border: dotted 3px red;} <ul> <li><a href="#luku_1">1. luku</a> <li><a href="#luku_2">2. luku</a> <li><a href="#luku_3">3. luku</a> </ul> <div id="luku_2">veljesten nimet vanhimmasta nuorimpaan ovat: Juhani, Tuomas, Aapo, Simeoni, Timo, Lauri ja Eero. Ovat heistä Tuomas ja Aapo kaksoispari ja samoin Timo ja Lauri. Juhanin, vanhimman veljen, ikä on kaksikymmentä ja viisi vuotta, mutta Eero, nuorin heistä, on tuskin nähnyt kahdeksantoista auringon kierrosta. Ruumiin vartalo heillä on tukeva ja harteva, pituus kohtalainen, paitsi Eeron, joka vielä on kovin lyhyt. Pisin heistä kaikista on Aapo, ehkä ei suinkaan hartevin. Tämä jälkimmäinen etu ja kunnia on Tuomaan, joka oikein on kuuluisa hartioittensa levyyden tähden. Omituisuus, joka heitä kaikkia yhteisesti merkitsee, on heidän ruskea ihonsa ja kankea, hampunkarvainen tukkansa, jonka karheus etenkin Juhanilla on silmään pistävä. </div>
target-attribuutti target-attribuutti oli ei-suositeltavia (transtiotional) vielä HTML4- ja XHTML-suosituksissa. HTML5 hyväksyy taas target-attribuutin käytön. target-attribuutin arvo voi olla mikä merkkijono vaan. Alaviivalla alkavia target-attribuutin arvoja voi kuitenkin olla vain: _blank: avaa kohteen uuteen selainikkunaan tai välilehteen _self: nykyinen selainikkuna _parent: ylemmän tason selainikkuna _top: ylimmän tason selainikkuna (eli koko ikkuna) <a href="http://www.haaga-helia.fi" target="_blank">haaga_helia amk</a> 21
a-elementti ilman attribuuttia Voit tehdä linkki-elementin ilman attribuutteja. Tällöin linkille varataan paikka, mutta linkki ei vie mihinkään. Käytetään usein silloin, kun navigoinnissa ollaan kyseisellä sivulla, eikä haluta sivulla olevan linkkiä itseensä. <nav> <ul> <li><a>etusivu</a> <li><a href="info.html">info</a> <li><a href="tuotteet.html">tuotteet</a> <li><a href="yhteystiedot.html">yhteystiedot</a> <li><a href="yhteydenotto.html">ota yhteyttä</a> </ul> </nav> nav li {display:block; list-style-type:none; padding:5px; margin:1px; border: solid 5px #666; width:7em; float:left; text-align:center; } nav a {text-decoration:none; color:#666; } 22
Sisäinen kehys - iframe-elementti Perinteisiä kehyksiä ei saa enää HTML5:ssa käyttää, vaikkakin selaimien tulee edelleen tukea niitä. Sisäistä kehystä eli iframe (inline frame) -elementtiä saa käyttää HTML5:ssa, vaikkakin aikaisemmin iframe-elementti oli ei-suositeltava (transitional) vielä HTML4- ja XHTML-suosituksissa. iframe-elementillä voit upottaa html-sivun sisälle ulkopuolisen dokumentin. iframe-elementillä on globaalien attribuuttien lisäksi seuraavat attribuutit: src: URL-osoite upotettavaan tiedostoon width: alueen leveys (pikseleissä) height: alueen korkeus (pikseleinä) name: ikkunan nimi sandbox: Rajoittaa millaista sisältöä ja toimintoja voidaan sivulle upottaa. Toimii jollakin tasolla chromessa. seamless: Integroi upotettavan sisällön saumattomasti sivulle. Heikko selaintuki. srcdoc: Upotettava sisältö (ei url-osoitetta), vaihtoehto src-määreelle. 23 Heikko selaintuki.
Esimerkki: iframe #laatikko {width:300px; heigth:200px; overflow:auto;} <iframe src="kalevala.html" id="laatikko" seamless> </iframe> chrome: firefox: 24
Taulukko - table Www-sivuilla taulukoita käytetään taulukkomuotoisen tiedon esittämiseen asemointiin (sivun taittamiseen). Tämä on ollut aikaisemmin hyvin yleinen tapa tehdä sivulle layout. HTML5-luonnokset aluksi kuitenkin kielsivät taulukoiden käytön sivun layoutin tekemiseen. 2011 tehtiin kehotus välttämään sivun layoutin tekemiseen taulukoilla, mutta sitä ei enää kielletä. 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) 25
Table-elementti HTML-koodissa taulukko tehdään table-elementin sisään. <table> </table> Table-elementillä voi globaalien attribuuttien lisäksi olla borderattribuutti, joka ilmoittaa reunaviivan paksuuden. Oletuksena taulukolla ei ole reunaviivaa jos sitä ei määritellä Käytännössä reunaviivat (paksuus, väri, tyyli) kannattaa määritellä CSS:n avulla. 26
Table-elementin alielementit table-elementille voidaan lisätä seuraavia alielementtejä annetussa järjestyksessä: 1. caption: seloste, jolla voidaan korvata summary-attribuutti, ei pakollinen. 2. colgroup: sarakkeiden ryhmittely, ei ole pakollinen. Colgroup-elementin alielementtinä voi olla vain col-elementtejä. Col-elementti on tyhjä elementti, jonka tärkeimmät attribuutti on span (numero kertoo ryhmän sarakkeiden määrän, oletus 1). 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. 27
tr, th ja td -elementit Taulukko koostuu siis riveistä ja sarakkeissa. Rivit muodostetaan tr-elementeillä. Rivien sisällä on alielementit: Esim. th: otsikkosolu, lihavoitu- ja keskitetty teksti, attribuutteina: colspan, rowspan, headers, scope td: normaali solu, attribuutteina colspan, rowspan, headers colspan: kertoo monelle sarakkeelle solu laajenee <td colspan= 5 >Viisi saraketta</td> rowspan: kertoo monelle riville solu laajenee <td rowspan= 3 >Kolme riviä</td> 28
Esimerkki <table border="1"> <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> 29
Esimerkki <table border="1"> <colgroup> <col span="2" style="background-color:#ccc"> <col style="background-color:#0ff"> </colgroup> <tr> <th>tunnus</th> <th>nimi</th> <th>laajuus</th> </tr> <tr> <td>ict1tn001</td> <td>orientaatio ICT-alaan</td> <td>3 op</td> </tr> <tr> <td>ict1tn002</td> <td>työasemat ja tietoverkot</td> <td>9 op</td> </tr> </table> 30
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> 31
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, kuvan tms. viereen floatominaisuudella 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. 32
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 pystysuora sijainti 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 33
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;} 34
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;} 35
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;} 36
Lähteet http://www.w3.org/tr/html5/ working draf, jota tätä kirjoittaessa käytetty versiota päiväyksellä 29 March 2012 http://www.whatwg.org/specs/web-apps/current-work/multipage/ living standard http://www.w3schools.com/ HTML5:n ja CSS:n opiskeluun Jukka K. Korpela: HTML5 uudet ominaisuudet CSS verkkosivujen muotoilussa 37