Kun haluat lisää väriä ja erottuvuutta Canvas-kurssillesi, monissa tapauksissa voit käyttää tekstilaatikkoja. Tekstilaatikoita voi käyttää erottamaan tekstikappaleita toisistaan ja korostamaan tiettyjä asioita sivulla. Tekstilaatikot kannattaa tehdä siinä vaiheessa, kun kaikki muu sisältö on valmista. Näin sisällön muokkaaminen ei muutu tarpeettoman hankalaksi, vaikka se on kuitenkin vielä mahdollista. Tekstilaatikot tehdään suoraan Canvasin HTML-editorissa ja tyylit muokataan CSS-kieltä hyödyntämällä.

Tekstilaatikoita pääset rakentamaan näin:

1. Navigoi haluamallesi sivulle ja valitse muokkaa.

2. Kun muokkaa-sivu aukeaa, pääset HTML-tekstieditoriin painamalla allaolevan kuvan mukaisesti oikeanpuoleista ympyröityä nappulaa. Editori aukeaa vakiona Pretty-HTML -tilassa, joka saattaa vaikuttaa sekavalta. Vasemmanpuoleisesta nappulasta saat HTML-raakaeditorin päälle. Kumpikin toimii, mutta mielestäni raakaeditori on selkeämpi.

Muokkaa HTML

3. Etsi HTML-editorista haluamasi tekstin osa. Pituudella ei ole väliä. Tekstin alussa ja lopussa pitäisi olla <p> ja </p> -tägit. Voit halutessasi painaa Enter ennen ja jälkeen näitä tageja, jotta hahmotat paremmin mitä olet tekemässä.

Muokkaa HTML 2

4. Lisää seuraava teksti ennen ensimmäistä <p>-tägiä: <div style="background: #CD9FCC;"> Lisää tämän jälkeen </div>-tägi </p>-tägin jälkeen.

html 3

Tuloksen pitäisi näyttää nyt tältä, kun painat uudestaan HTML-nappia oikeasta alakulmasta:

html 4

5. Tämä on tekstilaatikko yksinkertaisimmillaan. Sitä voi jatkokehittää monella tapaa. Monet CSS-tehosteet toimivat editorissa. Tässä tapoja, jotka koin toimiviksi ja helpoiksi toteuttaa. Huomiona se, että jos olet painanut Enter editorissa ja käyt välillä katsomassa tulosta, lisäämäsi rivinvaihdot katoavat kun menet takaisin HTML-editoriin.

Muuta ensimmäinen div-tagi seuraavanlaiseksi: <div style="background: #CD9FCC; padding: 10px; border: 2px solid black; border-radius: 12px;"> Näitä osia voi siis muuttaa kaikkia erikseen (padding, border, background...).

Tekstilaatikon pitäisi nyt näyttää tältä:

muokkaa html 5.png

Laatikon väriä voit muuttaa muokkaamalla sen hex-koodia. Esimerkiksi background: #219EBC muuttaa taustan turkoosiksi. Voit löytää hex-värejä netistä loputtomasti. Esimerkiksi https://coolors.co/ -sivulta löydät näitä. Muista lisätä # aina ennen värin koodia esimerkin mukaisesti. Värejä valittaessa täytyy myös muistaa tekstin ja taustan värien välinen kontrasti, jotta sisältö pysyy helposti luettavana. Äärimmäisten / liian kirkkaiden värien käyttöä tulisi välttää. Muista lopuksi tallentaa työsi.

muokkaa html 6.png

Mikäli teet muutoksia tekstiin jälkikäteen ja huomaat olevasi tekstilaatikossa "jumissa" kun kirjoitat, tarkista HTML-editorista, että kohta johon yrität kirjoittaa ei ole tekstilaatikon div-tagien sisällä.

Käytetyt CSS-tyylit.

-background, tällä muutetaan suoraan väriä

-padding, tällä muutetaan tekstin ja laatikon välistä etäisyyttä. Se "täyttää" laatikkoa tyhjällä tilalla.

-border, tällä luodaan reunus. Saatavilla eri tyylejä.

-border-radius, kulmien pyöristys. Kulmaa säädetään numeroarvoa muuttamalla. Esim. border-radius: 6px;

Lisää ohjeita HTML ja CSS peruskäyttöön:

https://www.w3schools.com/html/default.asp

https://www.w3schools.com/css/default.asp

Mikäli koodauksesta kiinnostuu enemmänkin, w3schools on loistava resurssi. ChatGPT tietää myös vastauksia monenlaisiin koodaukseen liittyviin kysymyksiin, kunhan kysymyksen osaa muotoilla oikein.