ohjeita web-sivuston tekijälle
Olet varmasti pannut merkille, että WWW-sivut ovat usein varsin värikkäitä. HTML-kielessä voidaankin lähes kaikkien elementtien väri määrittää. Esimerkkinä toimikoon nyt heti alussa itse dokumentin taustavärin määritys. Se tehdään käyttämällä <BODY>-tagissa attribuuttia BGCOLOR. Korvataan <BODY>-tagi seuraavalla:
<BODY BGCOLOR="#RRGGBB">
Mikäli olet aiemmin tutustunut tietotekniikaan tarkemmin, tuntenet miten värejä määritellään. Ne määritellään käyttämällä osavärejä.
Nyt kannattanee tutustua hieman kryptisten RRGGBB-arvojen maailmaan. RRGGBB-värimääritys koostuu, kuten antaa ulkoasullaan odottaa kolmesta osasta. Ensimmäiset kaksi kirjainta kertoo punaisen osavärin määrän, toinen vihreän ja kolmas sinisen. Kyse on siis RGB (RED-GREEN-BLUE) -väreistä. Arvot vaihtelevat välillä 0-255, mutta koska ne esitetään heksalukuina, saa RR, GG ja BB kuitenkin arvoja 00:sta FF:ään. Sallittuja ovat 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E ja F.
Arvo FFFFFF vastaa valkoista ja 000000 mustaa. Arvolla 0000FF saadaan sininen jne.
Voimme myös käyttää värien nimiä. Useimmin käytetävät värit johtuvat suoraan englannista. Seuraavassa kappaleessa annetaan muutamia värikoodeja.
Tässä on lista useimmin tarvituissa värikoodeista:
| valkoinen | white | ffffff |
| musta | black | 000000 |
| sininen | blue | 0000ff |
| punainen | red | ff0000 |
| keltainen | yellow | ffff00 |
| harmaa | gray | 808080 |
| vihreä | green | 008000 |
| oranssi | orange | ff8000 |
| violetti | violet | ee80ee |
Joskus värin määrittäminen on helpointa käyttämällä sopivaa apuohjelmaa. Lukuisat HTML-editori, kuten Arachphilia, tarjoaa mahdollisuuden RGB-arvojen helppoon määrittämiseen.
Myös kuvankäsittelyohjelmat tarjoavat vastaavia ominaisuuksia. Kuvaruutukaappaus Paint Shop Pro 5.0:sta.
Seuraava sivu: Teksti.
Moi! Toetääkö kukaan että onko mitään helppokäyttöistä suomenkielistä kotisivu tekopaikkaa???
19.8.2004 17:52Saako värikoodiin yhteyteen liitettyä jonkin koodin joka haalentaisi väriä niin, että taustaakin näkyisi?
4.1.2005 12:19kertokaa helpommin miten voi tehdä omat kotisivut!!!! en ymmärrä mitään.. mihin sivulle siis pitää mennä, mihin linkeistä jne....
15.1.2005 01:59ei voi
22.1.2005 19:21valitse himmeämpi väri :)^^
24.3.2005 22:15Miten taustabn saa yhen väriseks??? Mul on iso liuta kysymyksii mut nyt on nii myöh' et en jaksa kysellä:)
5.4.2005 17:01Millaisia muita värejä voisi laittaa..? Esim. vaalean sininen tai ruskea?
18.5.2005 12:44no mieti sitä!
18.5.2005 12:44HAISTAKAA PASKA!!
Valitettavasti 'läpinäkyvää' väriä ei ole. Tee kuva (gif), johon määrittelet jokatoisen pikselin läpinäkyväksi ja aseta se elementin (esm. solu (<td>)) taustakuvaksi (mieluiten CSS:llä):
<html>
<head>
<style type="text/css">
#elementin_yksiloiva_tunnus {backgruound: url(puolittain_lapinakyva_kuva.gif)}
</style>
</head>
<body>
...
<table>
<tr>
<td id="elementin_yksiloiva_tunnus">
tekstiä
</td>
</tr>
</table>
...
</body>
</html>
Esimerkki on vedetty ihan arvalla ulkomuistista, joten pientä säätöä voi olla. En ole ikinä kokeillut enkä kait missään nähnytkään vastaavaa, mutta uskoisin tuön toimivan kohtalaisesti vaaleilla väreillä kuvassa...
PS. Opetelkaa sisentämään jo heti alkuun... ;)
Tarkoitat varmaan, että miten kuvan tms. saa läpinäkyväksi... Haluaisin tietää sen itsekin.Jospa joku voisi kertoa, jos se yleensäkään on edes mahdollista. :)
12.11.2005 18:40sen voisi jopa tehdä mutta kun se saatanan ie ei tue sitä
30.12.2005 18:37Mitä koodia pitää käyttää, jos haluaa muuttaa tekstin värin, fontin ja koon? Esim. verdana, 7,5 ja värinä valkoinen?
17.1.2006 15:10miten saa kuvan taustaksi?
31.1.2006 01:56Sivulla puhutaan väreistä, mutta niitä ei ole käytetty? Jopa kuvat on muutettu mustavalkoisiksi? Miksi näin?
9.2.2006 21:03Käyttämällä sopivaa tiedostomuotoa voi kuviin määrittää läpinäkyvyyden - esim. gif-tiedostot tukevat yhtä läpinäkyvää väriä eli tasoa. Png-tiedostot (24-bit) jopa 256 eri läpinäkyvyyden tasoa, jolloin saadaan parempi syväys taustaan. Png-kuvien tuki on edelleen puutteellinen eri selaimissa - eli selaimet näyttävät näitä png-läpinäkyvyyksiä erilailla (googlatkaa esimerkkejä). CSS:ää käyttämällä on mahdollista myös aikaansaada läpinäkyviä elementtejä sivuille.
24.3.2006 15:14jos jakaa viivalla sivun kahtia ni pystyykö sen toisen puolen värjää eri värillä???? hei kertokaa joku!!!!!!!!!!!!!!!!!!!!!!!!!!
12.4.2006 22:40Tarvis pienen updaten nimittäiin esimerkkinä psp 5,0 En ainakaan opiskele tästä mitään ennenkuin updateet
24.10.2006 10:40vittu tätä kukaan älyä !!!! >:(
Tämähän on kivaa ^^ !
5.11.2006 18:16voiko paintin värienmuokkausohjelmaa käyttää? ja miten siitä saa sen koodin tai sen?
jee on kivaa halun lisäää
tää on kivaa =)
16.11.2006 09:13Nyt loppu tää perseily!
27.11.2006 14:41Niin voisko joku kertoa sen koodin millä sen saa sit läpinäkyväks?
7.1.2007 18:06et taida saada sitä läpinäkyväks xD
8.1.2007 11:21ei pysty on niin hapokasta
8.1.2007 11:23sä siis juot kokista ... ei oo tietoo
sasdasd
25.1.2007 12:51miten saan jonkun kuvan taustaksi? haluasin niin kuvastoi tämän kuvan http://img6.picsplace.to/img6/24/bg.jpg. vittiskö joku laittaa koko höskän.
30.1.2007 16:50miten värejä saa pieniin osiin
19.2.2007 23:53-head osioon
<style type="text/css">
body {
background: url(http://img6.picsplace.to/img6/24/bg.jpg);
}
</style>
-Paintillä ei saa selville väriä, joten kannattaa ladata jokin ilmainen ohjelma kuten GIMP tai Paint.Net
-Mitenkä värejä pienempiin osiin?
-Kuvan saa läpinäkyväksi tekemällä sen läpinäkyväksi kuvankäsittelyohjelmalla (paint ei ole kuvankäsittelyohjelma, vaan piirtelyohjelma)
Läpinäkyvyyden saa css:n opacity-määritteellä.
Esim: div { opacity:0.5; }
IE 6:ssa pitää käyttää jotain erikoisjuttua, googlettakaa.
Siis tämähän on yksinkertaista, odottakaa vaan kun css:ään pääsette tai sitten javasciptiin =D
5.3.2007 17:55Täs nyt oon jtn väsäilly, ja ongelmana on se, että miten saa tekstin väriä muutettua..
Joku voinee kertoa?
kivaa vai? no ei o ku koulus pakotetaa tekee nää hahahaha^ :DD
31.3.2007 09:52Vauude, kiitos todella paljon näistä sivuista! Semmonen onkeelma kuitenkin olisi, että miten saan laitettua kuvan taustakuvaksi? Joku jo tässä kyseli, mutta vastauksesta en tajunnut hölkäsen pöläystä... Haluisin taustakuvaksi kuvan, joka on koneellani.
Kiitos!
Kiitos näistä sivuista. On ollut todella paljon apua HTML:n aloittamisessa, kun ei jaksa alkaa tulkkaamaan amerikanenglannin überoutoja lyhenteitä. Toteutukseltaan selkeät sivut ovat aina myös mukavat käyttää eikä tämä ole poikkeus... (minkä ihmeen takia mä noin kirjotin :P)
Kiitos HTML:ään ja muutenkin vähän keskittyneempään ja järkevämpään tietokoneenkäyttöön ohjaamisesta. ;D
Jos taustakuvan haluaisi, koodiin tulisi seuraavaa:
<body background="kuva_sivulle/taustakuva.gif">
Ei kannata pistää taustakuvaksi isoja kuvia, koska niiden latautuminen kestää ikuisuuksia.....
MÄ EN TAJUA TÄSTÄ MITÄÄN.! ja mun velio ei suostu helppiin. :'(
12.6.2007 11:22Kuinka joku voi olla tajuamatta? Tää on niin simppeliä paskaa ettei oo tosikaa.
20.8.2007 12:44SKUUL ROX
Hei, kannattaa googlesta koittaa hakusanaa:
"Värikartta" Liekkö ylin linkki. Ruudulle pitäisi
ilmestyä "värikartasto" josta voit valita mieleisen
värin. Värikartan alapuolelle latautuu RGB-koodi
jonka voit vain kopioida.. Ja tietysti sivun tausta
muuttuu valitsemasi värin väriseksi.
<font color="#FF00FF"></font>
Myös värin nimen voi kirjoittaa värikoodin kohdalle,
esim.
<font color="Magneta"></font>
Niin yksinkertaista.
Tää on kyllä hyvä ohjelma. Alotin tästä ja seuraavaks aijon siirtyy php:hen, mutta harjottelen tällä nyt viä. Yks kaveri vähän neuvoo mua :D
6.2.2008 13:33<html>
<table border=1>
<tr>
<td width=25% <BODY bgCOLOR=blue>
<td width=25%><table border=1>
<tr><td><img src=call-of-duty-4.jpg>
<td><img src=cod_4b.jpg>
<tr><td><img src=cod4.jpg>
<td><img src=call_of_duty_4.jpg>
</table>
<td width=25%> oikea marginaali
</table>
Elklää tehkö näitä kun prkl koulussa pitää tehä!
20.2.2008 14:28EI JAKSA LUKIA P****A TEKSTIÄ
25.2.2008 09:25Illi haisee
3.4.2008 08:35MOI_KAIKILLE IHKUILLE ;)
23.6.2008 20:15SIIS TE OOTTEE NIIN PERSEESTÄ! Jättäkää koko homma siis ihan suosiolla jos ette osaa yksinkertaisimman kielen perusteiden perusteita.
30.8.2008 21:37Opassarja on jo vähän vanha, mutta ei se mitään. Pientä lisäinfoa kaipaisin. Esim. Miten toteutit tämän kommenttihomman? :)
