Värvide lisamine HTML lehele toimub sildi (tag) sees käsuga style.
Näiteks tausta värvimiseks tuleb <body> sildi sisse lisada style=background-color:azure
<body style="background-color:azure"> azure on siin värvi nimetus
RGB värvikoodid:
Teksti värvi muutmiseks tuleb style-silt kirjutada kas peatüki <p> või pealkirja <h1> sildi sisse.Värvide nimed, mida toetavad kõik veebilehitsejad: http://www.w3schools.com/tags/ref_colornames.asp
Näiteks pealkirja H1 punaseks värvimiseks tuleb HTML-i muuta järgmiselt:
<h1 style="color:red">PEALKIRI</h1>
Ülesanne 1
Muuda eelmisel tunnil alustatud html-dokumenti nii, et selle taust oleks värviline (vali värvikoodide alt heledam värv) ning suur pealkiri oleks samuti värviline (vali taustavärviga sobiv toon).
PS. Teksti kirjastiili muutmiseks tuleb kasutada stiili font-family ning siis lisada kirjastiil. Kõiki kirjastiile ei ole veebilehitsejad võimelised kuvama. Veebiturvalisi stiile saad näha siit: http://www.w3schools.com/cssref/css_websafe_fonts.asp
Pealkirja kirjastiili (font) muutmine stiili Comic Sans MS tuleb lisada:
<h1 style="font-family:Comic Sans MS">
Juhul kui pealkirjale on juba lisatud näiteks värvistiil, siis saab järgmise stiili eelmise alla lisada nii:
<h1 style="color:red; font-family:Comic Sans MS">
Kopeeri eelmisel tunnid loodud html-dokumenti <body> ... </body> siltide vahele järgmine kood (võib selle kopeerida siit lehelt).
<table style="width:100%; text-align:left" border=1>
<tr style="text-align:center">
<th style="color:red; background-color:yellow">Eesnimi</th>
<th>Perenimi</th>
<th>Klass</th>
</tr>
<tr>
<td>Mari</td>
<td>Maarikas</td>
<td>2b</td>
</tr>
</table>
Salvesta dokument (jälgi, et selle faililaiend oleks html) ning ava veebilehitsejaga!
Ülesanne 2
Uuri lisatud koodi. Millised sildid tähistavad veerge, millised ridu?
Lisa tabelisse 1 rida, milles kuvatakse sinu nimi ja klass.
Lisa tabelisse 1 veerg, milles kuvatakse sinu vanus (Mari Maasika vanuse võid välja mõelda).
Täienda tabelit nii, et selle esimene rida (päiserida) kuvatakse värvilisel taustal ning päiserea test oleks samuti värviline.
Edasijõudnutele - värvi tabeli teised read samuti ära, nii et need oleksid päisereast erinevat värvi! Samuti võid värvide tabelit nii, et kaks kõrvutiolevat lahtrit poleks sama värvi! Näiteks selline:
Salvesta fail oma võrgukettal olevasse kausta ning pane talle nimeks teine.html
Kahoot HTML-i kordamiseks