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

Transkriptio

1 TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan HTML-sivulle <table>-elementillä. <tr>-elementti (table row)tekee taulukon rivin ja <td>-elementti (table data )taulukon solun. border-attribuutilla saadaan näkyville taulukon reunat. <th> - elementillä (table headings) taulukkoon saa otsikkotietoja. <th>-elementti näkyy oletusarvoisesti keskitettynä ja lihavoituna tekstinä. Perustaulukko Taulukko, jossa on kaksi riviä ja otsikot Tehtävä 1. Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. Laadi lisäksi taulukko, joka on kuvattuna alla.

2 Jos taulukon solusta, tai rivistä halutaan tehdä esimerkiksi kahden solun kokoinen, niin tämä toteutetaan <td>-elementin colspan- tai rowspan-attribuuteilla. 2 colspan = yhdistää tässä kaksi saraketta yhdeksi soluksi colspan rowspan = yhdistää tässä kaksi riviä yhdeksi soluksi rowspan Tehtävä 2. a) etsi esim. W3C sivustolta <table>-elementille attribuutit, jotka tekevät seuraavat toiminnot: määrittelee taulukon sijainnin sivulla taulukon taustakuvan ja taustavärin taulukon reunan väri ja paksuus b) etsi esim. W3C sivustolta <tr>ja <td>-elementeille attribuutit, jotka tekevät seuraavat toiminnot: taustakuva ja taustaväri sisällön paikka solun sisällä c) kokeile a ja b kohtia html-sivullasi. cellpdding ja cellspacing attribuutit Jos solujen sisään halutaan tyhjää tilaa, niin se voidaan tehdä <table>-elementin cellpadding-attribuutilla.

3 Jos halutaan solun reunan ja sisällön väliin tyhjää tilaa, niin se voidaan tehdä <table>-elementin cellspacing-attribuutilla. Attribuutin arvoksi annetaan luku (=pikseleitä) 3 Muutamia taulukon <table>-elementin attribuutteja: attribuutti selitys esimerkki align määrittele taulukon sijainnin <table align="center"> center, left, right sivulla background taustakuva taulukolle <table background="nalle.png"> bgcolor taustaväri taulukolle <table bgcolor="#00ff00"> border taulukon reunan paksuus <table border="2"> bordercolor taulukon reunan väri <table border="1" bordercolor="# 0000FF"> valign top, bottom sisällön paikka solun sisällä koko taulukossa <table cellspacing="2" valign="top"> width n,n, n,n% taulukon vähimmäisleveys pikseleinä ja prosentteina <table width="50%"> Tehtävä 3. Myös <tr> ja <td> -elementeillä on attribuutteja. Etsi W3C-sivustolta muutama molemmista. Tehtävä 4. Luo html-sivusto, jossa on alla näkyvä taulukko. Tallenna se index.html. Värityksen ym. voit päättää itse. Tallenna sivusi. sitä tarvitaan vielä tehtävässä 6. Linkit tehdään myös myöhemmin.

4 (HYPER)LINKIT 4 Hyperlinkki voi olla kuva, sana tai teksti, jonka avulla pääsee siirtymään yhdeltä hypertekstisivulta toiselle tai vaikka kokonaan toiselle sivustolle. Lisäksi linkki voi viitata tiettyyn osaan dokumentissa. Tällöin nimetään erikseen kohta (ankkuri) dokumentissa, johon linkki viittaa ja tähän kohtaan pääsee linkkiä napsauttamalla. Linkki luodaan <a>-tagilla (anchor) ja href-attribuutilla (hyperlink reference) ja url on osoite/tiedostopolku, johon linkki osoittaa. <a href= url > </a> <a href= >KSAO></a> Linkin osoitteen voi kirjoittaa kahdella tavalla. On olemassa relatiivinen ja absoluuttinen tapa linkittää. Yllä olevassa esimerkissä on käytetty absoluuttista tapaa, jolloin linkin osoite kirjoitetaan kokonaisena osoitteena. Relatiivisessa tavassa otetaan lähtökohdaksi kansio, jossa dokumentti linkkeineen sijaitsee ja viitataan ylös- tai alaspäin hakemistorakenteessa. Tämä tapa on yleisesti käytössä oman sivuston hakemiston sisälle linkitettäessä. Alla olevissa on viitattu tiedostoihin, jotka ovat samassa hakemistossa kuin linkin sisältävä dokumentti. <a href="materiaali.html">materiaali</a> <a href="teksti.pdf">toimintakertomus</a> <a>-elementillä on attribuutti target, joka määrittää, avataanko linkki samaan selainikkunaan vai kokonaan uuteen ikkunaan. Yleensä sivuston ulkopuolelle avautuvat linkit avataan uuteen selainikkunaan. Jos target-attribuuttia ei määrittele, linkki avataan samaan selainikkunaan. target= _blank -> avaa uuden välilehden <a href=" target="_blank">google</a Tekstin lisäksi voi vaikkapa kuvasta tehdä linkin toiselle sivustolle. Alla olevat rivit tekevät nallen kuvasta linkin Kontion kahvilaan. Kokeile omalla sivullasi. <p>kuva linkkinä: <a href=" <img border="0" alt="kontion kahvila" src="nalle.png" width="100" height="100"></a></p> Tältä näyttää selaimessa, kun vie hiiren kuvan päälle. Ankkuri Usein esimerkiksi pitkän dokumentin sisällysluettelossa käytetään ankkuria, joka nopeuttaa sivulla liikkumista, kun ei tarvitse rullata sivua ylös ja alas. <a id="ankkurin_nimi">viitesana</a> Siihen voidaan viitata seuraavasti: <a href="tiedosto.html#ankkurin_nimi">viittaus</a>

5 Tehtävä 5. 5 Mene Wikipediaan ( ja etsi hakusanalla METAR. Löydät sisällysluettelon, jonka linkkejä napsauttamalla pääset nopeasti liikkumaan sivulla haluamasi paikkaan. Napsauta esim. linkkiä Sateet. Siirryt suoraa sivulla kohtaan, jossa puhutaan sateesta. Katso nyt selaimen osoiteriville. Tässä on käytetty ankkuria, mistä sen tietää? Tehtävä 6. Viimeistele Witriinin etusivu: lisää yritykselle logo (piirrä itse tai tallenna jokin kuva netistä), käytä värejä ja käytä tekstin muotoilua sekä eri fonttia. Tee sekä kuvalinkki että tekstilinkki soluihin, joissa lukee linkki kirjaan. Linkit avaavat Joonatan.html ja Prinssi.html sivut. Muista tehdä paluulinkit takaisin etusivulle em. tiedostoihin. Tee linkit siten, että ne avautuvat samaan ikkunaan. Poista lopuksi etusivulta taulukon reunat.