Värit ja taustat
Lisää värejä ja taustoja, jotta sivusi erottuu edukseen
Värit ja taustat on ilmainen HTML for Kids-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu HTML for Kids-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML for Kids-kurssilla on yhteensä 4 oppituntia.
Värit ja taustat
Tervetuloa seuraavalle oppitunnille! Tänään opimme lisäämään verkkosivulle värejä ja taustoja, jotta siitä tulee elävämpi ja visuaalisesti miellyttävämpi.
Miksi käyttää värejä ja taustoja?
Värit ja taustat voivat:
- tehdä verkkosivusta houkuttelevamman.
- korostaa tärkeää sisältöä.
- luoda sivulle tietyn tunnelman tai teeman.
Opitaan käyttämään niitä tehokkaasti!
Tekstin värin muuttaminen
Voitte muuttaa tekstin väriä color-ominaisuudella. Voitte käyttää:
- värin nimiä: Esimerkkejä:
red,blue. - heksakoodeja: Esimerkkejä:
#ff0000,#0000ff. - RGB-arvoja: Esimerkki:
rgb(255, 0, 0).
Esimerkki:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
Taustavärin lisääminen
background-color-ominaisuudella muutetaan elementin taustaväriä.
Esimerkki:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
Koko sivun tausta
Voitte muuttaa koko sivun taustaväriä käyttämällä background-color-ominaisuutta <body>-tagissa.
Esimerkki:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
Taustakuvien lisääminen
Voitte asettaa kuvan taustaksi background-image-ominaisuudella.
Esimerkki:
Tässä esimerkissä:
background-size: cover;saa kuvan peittämään koko sivun.background-repeat: no-repeat;estää kuvan toistumisen.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
Tekstin ja taustavärien yhdistäminen
Voitte yhdistää tekstin ja taustan värejä visuaalisesti miellyttävien ulkoasujen luomiseksi. Varmistakaa, että teksti on helppolukuista!
Esimerkki:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
Kokeile itse
Luodaan verkkosivu väreillä ja taustoilla. Tässä on esimerkki:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
Hienoa työtä!
Onnittelut! Olette oppineet käyttämään värejä ja taustoja verkkosivujen elävöittämiseen ja visuaalisen ilmeen parantamiseen. Seuraavassa oppitunnissa perehdymme tekstin muotoiluun ja lisäämme tekstiin lihavointia, kursivointia ja muita tehosteita. Valmistautukaa kehittämään suunnittelutaitojanne!
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 16
- Oppitunnit
- 35
Usein kysytyt kysymykset
Onko oppitunti ”Värit ja taustat” ilmainen?
Kyllä – oppitunnin ”Värit ja taustat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko HTML for Kids-kurssin, päivitä CoddyKit PROhon. HTML for Kids-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Värit ja taustat”?
Lisää värejä ja taustoja, jotta sivusi erottuu edukseen Harjoittelet HTML for Kids-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML for Kids-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML for Kids-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Värit ja taustat”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML for Kids-oppitunnilla?
Kyllä. Jokainen HTML for Kids-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Inline-tyylit
- CSS:n perusteet
- Värit ja taustat
- Tekstin muotoilu