KL00CT67
Web-ohjelmoinnin perusteet
Tehtävä 4
Tekstin muotoilua ja monimutkaisempi taulukko
a) Tee HTML-tiedosto muotoiluja.html, joka selaimessa avattaessa tuottaa
alla olevan kuvan 1 mukaisen sivun (suunnilleen; voit muuttaa tekstiä yms.
sisältöä halutessasi).
Linkitä sivu myös portfoliosi etusivulle eli lisää linkki sivulle
muotoiluja.html tiedostoon index.html.
b) Lisää tiedostoon muotoiluja.html HTML-taulukko (<table>), joka
on maaliskuun 2026 kalenteri ja jonka jälkeen sivu näyttää selaimessa
avattaessa taulukon osalta alla olevan kuvan 2 mukaiselta.
Ohjeita
Kohdan a) kuvan 1 mukaisessa toteutuksessa “HTML-muotoiluja” on tason 1 otsikko ja “Teksti” on tason 2 otsikko. Muotoiluja sisältävä teksti on seuraava:
HTML:ssä on paljon muotoiluelementtejä. Tekstiä voi esimerkiksi lihavoida
(b) tai vahventaa (strong). Teksti voi olla pientä (small) tai se voi olla
alaviite (sub) tai yläviite (sup). On myös mahdollista merkitä lisätty teksti
(ins) ja vastaavasti poistettu teksti (del). Tekstiä voi myös korostaa (mark).
"Aika hienoa" (i), sanoi tietotekniikan opettaja.
"Mutta pitää painottaa, että liiat muotoilut vaikeuttavat tekstin lukemista"
(em), sanoivat viestinnän opettaja ja erityisopettaja kuin yhdestä suusta.
Muotoillun tekstin jälkeen suluissa on kyseinen elementti. Esimerkiksi (b)
tarkoittaa elementtiä <b>.
Kohdan b) kuvan 2 mukaisessa toteutuksessa “Taulukko” on tason 2 otsikko.
Kohdassa b) voit laittaa taulukon reunaviivat päälle lisäämällä attribuutin
border="1" elementtiin <table>. Huomaa kuitenkin, että jatkossa taulukon
reunat määritellään CSS:llä (, jonka vuoksi myös VS Code merkitsee attribuutin
punaisella).
Tarvitset kohdassa b) aiemmin käytettyjen elementtien <table>, <tr>,
<th> ja <td> lisäksi elementtejä <colgroup> ja <col>. Kuukauden ja
viikkojen taustavärin saat laittamalla elementille <col> attribuutin
style="background-color: #D6EEEE" (tämä on HTML:ään upotettua CSS:ää;
jatkossa CSS-määrittely ovat omassa tiedostossaan). Taulukon sarakkeiden
(<td>) yhdistämiseen tarvitset puolestaan attribuuttia colspan sopivalla
arvolla (yhdistettävien sarakkeiden määrä).
Materiaalin ja tekoälyn käyttö
Hyödynnä tässä tehtävässä W3C:n HTML-tutoriaalin kohtia tekstin muotoilu ja taulukot.
Voit halutessasi kokeilla käyttää tässä tehtävässä tekoälyä, esimerkiksi jotakin laajaa kielimallia (ChatGPT, Microsoftin Copilot tms.) tai VS Coden Copilotia, mutta tämä ei ole pakollista.
Kuvat
Kuva 1. Esimerkki sivun muotoiluja.html sisällöstä, kun kohta a) on tehty.
Kuva 2. Esimerkki sivun muotoiluja.html sisällöstä, kun kohta b) on tehty.