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
5.11.2006 18:16voiko paintin värienmuokkausohjelmaa käyttää? ja miten siitä saa sen koodin tai sen?
Niin 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
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.....
Kuinka joku voi olla tajuamatta? Tää on niin simppeliä paskaa ettei oo tosikaa.
23.8.2007 20:50Hei, 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ä!
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? :)
10.1.2009 01:17FAIL! Lukekaa nyt nuo KAIKKI ohjeet huolella läpi, jos ette löydä täältä, googlatkaa muualta.. Lopettakaa se kysely, jos kysytte jokasta eri koodia yms. nii teidän sivunne on valmiina 10 vuoden kuluttua... Ja tosiaan, tämä on erittäin simppeliä, kun sen hoksaa. Jos ei hoksaa, jättää homman siihen.
6.3.2009 14:11Tuossa teille värikoodit--> http://www.ratol.fi/opensource/xhtml/vari.htm
29.10.2009 18:36Oho. Nämä koodit toimivat foorumeilla. 8D Tosi paljon apua tästä paikasta. Oppii uutta ja jää helposti mieleen. ^__^
12.11.2009 08:44OOTTE IHA VITU IDIOOTTEJA:D:D:d.d:d.d:D:D:
lol lol lol.. vähä 69..
Hei tuossa ylemmässä kuvassa ei lue sitä RGP-värikoodia ja itse en omista alemman kuvan ohjelmaa joten pohdin miten saan selville juuri tarkalleen sen värin RGP-koodin jonka olen valinnut.
14.1.2010 12:35Katsokaa Typertester sielt voittee laittaa väri koodit tekst. koko ja kaikkee niin sielt saatte litanian koodeja joita ei tarviii muokata esim.
h1
{
font-family: ;
background-color: #28ff0a;
color: #001c1e;
text-decoration: underline;
word-spacing: normal;
text-align: left;
letter-spacing: 1px;
line-height: 1.6em;
font-size: 1.5em;
}
tollane silt tulee laittakaa ite vaan aalto {{}} helppoo on testatkaa ihmees en ite tajunnu eka mitään koko html touhust mut ei siin mitää mut menkää! TYPERTESTER.ORG <--- pienel.!.! hyvä sivu niinkuin tämäkin mutta jos on paljon ongelmia värien kanssa.
ei tajuuu........... =(
28.1.2010 12:20Tajuu tajuu ihan helppoa hommaa tämä ///typertester/// <---- GO GO GO! laitan tähän taulukko koodia laitan aina jonkun koodin kun käyn.
<html>
<head>
<style type="text/css">
div.ex
{
width:200px;
padding:60px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>
<p><b>Important:</b> This example will not display correctly in IE!<br />
However, we will solve that problem in the next example.</p>
</body>
</html>
SIITÄ VAAN ETEENPÄIN.!.
Tuo koodi olikin muuten www.w3shools.com tuo koodi on CSS Box Model.
http://www.w3schools.com/css/css_boxmodel.asp
