Läpinäkyvyys
http://www.w3schools.com/css/css_image_transparency.asp
Multimedia
Multimedia tarkoittaa aineistoa, joka koostuu monesta esitysmediasta.
Yleisimpiä ovat ääni, videoleikkeet ja erilaiset animaatiot. Aineiston voi joko upottaa tai linkittää verkkosivuille.
Upottamisessa käytetään yleensä seuraavia elementtejä:
- Kuvien upotuksessa img-elementti
- Videoiden osalta embed-elementti
- Äänen osalta bgsound tai embed
- Java-sovelmissa applet-elementti
embed
Vaikka object-elementti on suositeltu elementti multimedian upottamisessa, embed toimii kuitenkin käytännössä laajemmin eri selaimissa.
No Format |
---|
<embed src="tiedosto.pääte" width="" height="">
|
Yksiköt
Erilaisten leveyksien, pituuksien ym. etäisyyksien esittämiseen on olemassa kahdeksan mittayksikköä:
em | fontin koko |
ex | fontin x-korkeus |
px | pikseli eli kuvapiste |
mm | millimetri |
cm | senttimetri |
in | tuuma |
pt | typografinen piste, point (n. 0.35 mm) |
pc | pica, 12 typografista pistettä (n. 4,2 mm) |
(Lähde: Jukka K. Korpela, CSS verkkosivujen muotoilussa, s. 138)
Lisäksi voidaan käyttää prosentteja (ilmoitetaan %-merkillä)
- Yksikkö on pakollinen, jos suure ei ole 0
- Yksikön edestä ei saa jättää suuretta pois
- Luku ja yksikkö kirjoitetaan aina yhteen. Esim. 5px
- CSS:ssä voidaan käyttää sekä kokonaislukuja että desimaalilukuja (käytetään desimaalipistettä, ei pilkkua). Esimerkiksi 1.2em
- Luku voidaan myös aloittaa pisteellä, jolloin kokonaisosa tulkitaan nollaksi. Esim. .55em -> 0.55em
- Luvun edessä voi olla myös negatiivinen etumerkki, esim. -1.2em. Monissa yhteyksissä negatiivisten lukujen käyttöon kielletty.
Suhteelliset yksiköt em ja ex
- Yksikkö em tarkoittaa ympäröivän lohkon fontin kokoa, joka on yleensä sama kuin fontin korkeus
- em soveltuu hyvin leveyksien ja korkeuksien esittämiseen: se mukautuu katselutilanteeseen ja käyttäjän fonttikoon valintoihin
- ex vastaa x-kirjaimen korkeutta
- useimmat selaimet eivät varsinaisesti tue ex-yksikköä, vaan toteuttavat sen em-yksikön puolikkaana
Pikseli
- pikseli tarkoittaa kuvapistettä eli pientä alkiota, josta teksti ja kuvien esitys kuvaruudulla muodostuu
- pikselin fyysinen koko riippuu näytön koosta ja erotustarkkuudesta (resoluutiosta)
- yleensä kirjoittimessa pikselit ovat huomattavasti pienempiä kuin ruudulla
- yhtälö on yleensä 1 tuuma = 96 pikseliä
Yksikön valitseminen
Laajempia sivustoja suunnitellessa kannattaa miettiä yksikön käyttö tarkkaan. Yleensä tyylisäännöt ovat riippuvaisia toisistaan, ja yhden säännön yksikön muutos vaikuttaa moneen muuhun kohtaan sivustoa. Pitkän tyylitiedoston korjailu on työlästä ja aikaa vievää.
Jukka J. Korpela suosittelee, että sivustoilla käytetään lähtökohtaisesti em-yksikköä, jolloin mitat ovat suhteessa siihen, kuinka isona teksti näkyy.
...
Tärkeimmät määritteet:
http://www.w3schoolstutorialspoint.com/Htmlhtml/html_colorsembed_multimedia.asphtm
http://verkko-opas.fi/web/css/vari/
Värin merkintätapoja
#rrggbb Esimerkiksi #6942cf
#rgb, sama kuin #rrggbb. Esimerkiksi #efc on sama kuin #eeffcc
rgb(p,v,s), jolla esitetään punaisen vihreän ja sinisen valon intensiteetit asteikolla 0-255. Esimerkiksi rgb(3,25,240)
Lisäksi voidaan käyttää erilaisia värien nimiä. Valmiit värien nimet sopivat erilaisiin kokeiluihin. Valmiit värit ovat kuitenkin yleensä kirkkaita, ja niiden käyttöä kannattaa miettiä. Valmiita, standardin mukaisia värejä on vain 16. Muut värit ovat käytössä webissä, mutta niiden standardointi on tulossa vasta CSS3-versioon.
Ks.lista nimistä
Taustaväri ja fontin väri
Sivun taustan ja fontin väri kannattaa aina asettaa yhdessä. Jos asettaa pelkän taustan tai pelkän fontin, selaimen oletusasetukset saattavat tehdä sivusta lukukelvottoman. Ei koskaan kannata luottaa siihen, että esimerkiksi valkoinen taustaväri on jokaisen selaimen oletusasetus.
Fontin väri asetetaan color-ominaisuudella ja taustaväri background-color -ominaisuudella
No Format |
---|
body {
color:#000;
backgound-color:#fff;
}
|
Kuvat
http://matriisi.ee.tut.fi/~ph/hp99/kuva/
Kuva on muotoa
No Format |
---|
<img src="kuvan osoite" alt="lyhyt kuvaus" >
|
img-elementille voidaan antaa seuraavat määritteet:
align
border
width
height
longdesc = pitkä kuvaus, jossa kerrotaan kuvan sisällöstä.
Lisäksi voidaan käyttää title-määritettä ns. lisäohjeena (tooltip), joka näkyy, kun käyttäjä vie hiiren kuvan päälle.
Läpinäkyvyys
http://www.w3schools.com/css/css_image_transparency.asp
Multimedia
Multimedia tarkoittaa aineistoa, joka koostuu monesta esitysmediasta.
Yleisimpiä ovat ääni, videoleikkeet ja erilaiset animaatiot. Aineiston voi joko upottaa tai linkittää verkkosivuille.
Upottamisessa käytetään yleensä seuraavia elementtejä:
www.htmlcodetutorial.com/embeddedobjects/_EMBED.html
bgsound
Elementti aiheuttaa taustaäänen esittämisen sivun katselun aikana. Embed-elementti on kuitenkin suositumpi tapa upottaa ääntä verkkosivuille.
No Format |
---|
<bgsound sc="osoite" loop="infinite" >
|
Määritteet:
balance | stereoäänen säätö | luku, esimerkiksi balance="1000" |
loop | toistojen määrä | luku / infinite, esimerkiksi loop="3" |
src | äänidata | URL, esimerkiksi src="aani.au" |
volume | äänenvoimakkuus | luku, esimerkiksi volume="-2000" |
http://appro.mit.jyu.fi/www/luennot/luento9/
...