Kuva xhtml-sivulla. Mirja Jaakkola

Koko: px
Aloita esitys sivulta:

Download "Kuva xhtml-sivulla. Mirja Jaakkola"

Transkriptio

1 Kuva xhtml-sivulla Mirja Jaakkola

2 Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri selaimilla 9. Tekstin vieritys kuvan suhteen 10.Taustakuva 11.Taustakuvan paikka 12.Taustakuvan toistaminen sivulla 13.Esimerkkejä CSS-koodista taustakuvalle 14.background-ominaisuus 2

3 Kuva www-sivulla Kuvalla voi olla erilaisia tehtäviä www-sivulla: kuva ohjaa lukijan huomion sivun sisältöön ja herättää lukijan mielenkiinnon kuva voi havainnollistaa asiaa kuva voi luoda tunnelman sivulle tai kertoa tarinan kuva voi katkaista pitkän tekstin kuva voi toimia symbolina tai logona kuva voi olla linkki, painonappi tai toimia listan merkkinä Kuvatekstin avulla voidaan kertoa tilannekuvan merkitys lukijalle. Www-sivulla käytettävien kuvien tiedostomuodot ovat: JPEG: valokuvat, liukuvärit GIF: kuville, joissa on suuria samansävyisiä väripintoja, kuvassa max 256 väriä, grafiikalle, esim. logot, läpinäkyvät kuvat PNG: kehitetty korvaamaan jpeg- että gif-kuvaformaatin eli esim. liukuvärit, läpinäkyvät kuvat. Huom. kaikki vanhemmat selaimet eivät tue png-kuvan kaikkia ominaisuuksia esim. läpinäkyvyyttä. 3

4 img-elementti Kuva liitetään www-sivulle xhtml-koodissa img-elementillä img-elementti on inline-elementti, joka tarkoittaa sitä, että et voi laittaa img-elementtiä suoraan body-elementin alle vaan img-elementti on aina laitettava jonkun lohko-elementin sisälle esim. div, p img-elementti on tyhjä elementti eli elementillä ei ole sisältöä <img src= nelli.jpg alt= kuva Nellistä /> img-elementti tarvitsee aina seuraavat kaksi attribuuttia (siis pakollisia): src: kertoo sivulle liitettävän kuvan nimen alt: vapaamuotoinen lyhyt kuvaus kuvasta Muita img-elementin attribuutteja ovat height (korkeus) ja width (leveys): selain varaa k.o. tilan kuvalle ja lataa ensin www-sivun muun sisällön, jolloin kuvia odotellessa lukija voi jo lukea sivun tekstisisältöä. longdesc (pitkä kuvaus): linkki kuvasta kertovaan tekstiin ismap ja usemap: kuvakarttojen tekeminen 4

5 Kuvan koko xhtml-sivu ei saa olla liian raskas latautumaan. Sivulla olevien kuvien tiedostokoot (kilotavut) vaikuttavat www-sivun latautumiseen netissä. Rajaa kuvat sopivan kokoisiksi ennen kuin tuot ne www-sivulle. Jos ilmoitat xhtml-koodissa kuvan korkeuden ja leveyden varaa selain k.o. tilan kuvalle ja lataa ensin www-sivun muun sisällön, jolloin kuvia odotellessa lukija voi jo lukea sivun tekstisisältöä. <div> <img src= nelli.jpg alt= kuva Nellistä height= 300 width= 400 /> </div> Kuva skaalautuu nyt annettujen arvojen mukaan ja ne voivat kaventaa tai leventää kuvaa jos korkeuden ja leveyden suhde ei pysy samana. Voit antaa vain toisen arvon, jolloin selaa pitää mittasuhteen alkuperäisenä. Kuvan korkeuden ja leveyden voi antaa myös CSS:n avulla. 5

6 Kuvan keskitys vaakasuoraan & kuvateksti Koska kuva on inline-elementti, vaikuttaa kuvaan css-määritys text-align (arvot left, center, right). Esim. kuvan keskittämisestä: <div style= text-align:center > <img src= nelli.jpg alt= kuva Nellistä /> </div> Voit lisätä kuvatekstin suoraan kuvan alle esim. div-elementillä: <div style= text-align:center > <img src= nelli.jpg alt= kuva Nellistä /> <div>kuva Nellistä kesältä 2009</div> </div> 6

7 Kuvan tasaus pystysuoraan Määritä tekstin ja kuvan pystysuora suhde CSS:n avulla vertical-alignominaisuudella, jonka arvoja voivat olla: baseline middle sub super text-top text-bottom top bottom Tasaa kuvan samalle tasolle tekstirivin alareunan kanssa (oletusarvo). Tasaa kuvan pystysuoraan tekstin keskitasolle. Tasaa kuvan tekstin alaindeksin tasolle. Tasaa kuvan tekstin yläindeksin tasolle. Tasaa kuvan ylälaidan tekstisisällön ylälaidan tasolle. Tasaa kuvan alalaidan tekstisisällön alalaidan tasolle. Tasaa kuvan ylälaidan tekstirivin ylälaidan tasolle Tasaa kuvan alalaidan tekstirivin alalaidan tasolle Lisäksi voit antaa arvon pituusyksikkönä (positiivinen luku nostaa, negatiivinen laskee) tai prosenttina suhteessa tekstiriviin. 7

8 Esimerkki: Pystysuoratasaus eri selaimilla Eri selaimet tulkitsevat hieman erilailla vertical-align ominaisuutta, esim. IE 7: Firefox 2: 8

9 Tekstin vieritys kuvan suhteen Voit kiertää kuvan tekstillä antamalla float-ominaisuuden, jonka arvoina voi olla left tai right. Padding-arvolla saat tyhjää tilaa tekstin ja kuvan välille. <div> <img src="nelli.jpg" alt="nelli" style="vertical-align:top; float:left; padding-right:5px"/> <div> Nelli on Cavalier King Charlesin spaniel. Nellin väri on blenheim. Nelli on seurakoira.</div> </div> <div> <img src="nelli.jpg" alt="nelli" style="vertical-align:top; float:right; padding-left:5px"/> <div> Nelli on Cavalier King Charlesin spaniel. Nellin väri on blenheim. Nelli on seurakoira.</div> </div> 9

10 Taustakuva Taustakuva toimii yleensä sivulla koristeena, joka tukee sivun sisältöä. Taustakuva usein haittaa tekstin lukemista, jos taustakuva sijaitsee tekstin takana. Jos lisäät taustakuvan www-sivulle huolehdi riittävästä kontrastista taustan ja tekstin suhteen. Hillityllä taustakuvalla voit luoda yhtenäisen ilmeen sivustollesi. Taustakuvan voi lisätä mille elementille vain. Voit lisätä sivulle taustakuvan CSS:n avulla background-imageominaisuudella, jonka url-arvo kertoo taustakuva sijainnin suhteessa csstiedostoon. Jos et aseta muita taustakuvaan liittyviä arvoja, toistuu taustakuva sivulla koko sivun alueella. body {background-image: url(tausta.jpg);} h1 {background-image: url(kuvat/otsikkotausta.gif);} 10

11 Taustakuvan paikka Taustakuvan paikan elementin sisällä voit määrittää background-position ominaisuudella. Taustakuvan toiston aloituspaikka kerrotaan joko vain vaakasuorana siirtymänä (jolloin pystysuoran arvo on oletuksena 50%) tai sekä vaakaettä pystysuorana siirtymänä elementin vasemmasta yläkulmasta alkaen. Jos molemmat arvot ilmoitetaan tulee ensiksi vakaasuora ja sitten välilyönnin jälkeen pystysuora siirtymäarvo. Siirtymäarvo voidaan esittää: Sanana vaakasuorassa siirtymässä: left, center, right pystysuorassa siirtymässä: top, center, bottom Pituusmittana tai prosenttilukuna 11

12 Taustakuvan toistaminen sivulla Yhdelle elementille voit lisätä vain yhden taustakuva, jota voit toistaa useita kertoja. Taustakuvan toistuminen kerrotaan background-repeat-ominaisuudella: repeat Toistuu vaaka- ja pystysuorassa täyttäen koko elementin (oletusarvo) repeat-x repeat-y no-repeat Toistuu vaakasuorassa Toistuu pystysuorassa Taustakuva tulee vain yhden kerran elementiin inherit Periytyy ympäröivältä elementiltä Background-attachment ominaisuudella voit määrittää taustakuvan sivun mukana liikkuvaksi tai paikoilleen scroll fixed Taustakuva liikkuu sivun mukana sivua scrollattaessa Taustakuva pysyy kiinteästi paikoillaan vaikka sivua vieritetään inherit Periytyy ympäröivältä elementiltä 12

13 Esimerkkejä CSS-koodista taustakuvalle Taustakuva liitetään sivulle ja kuva toistuu koko sivun: body {background-image: url(tausta.gif); } Taustakuva toistuu yläreunassa vaakasuunnassa: body {background-image: url(tausta.gif); background-repeat: repeat-x;} Taustakuva toistuu vasemmassa reunassa pystysuunnassa: body {background-image: url(tausta.gif); background-repeat: repeat-y; background-position: left;} Taustakuva toistuu yhden kerran vasemmassa reunassa 200px yläreunasta: body {background-image: url(tausta.gif); background-repeat: no-repeat; background-position: left 200px;} 13

14 Background-ominaisuus Antamalla pelkän background-ominaisuuden, voit antaa yhdellä kertaa kaikki seuraavat ominaisuudet: background-color background-image background-position background-repeat background-attachment Voit kertoa ominaisuudet missä tahansa järjestyksessä. Eri ominaisuudet erotetaan toisistaan välilyönnillä. Kaikkia ominaisuuksien arvoja ei tarvitse kirjoittaa. background: url(tausta.jpg); background: red url(tausta.jpg) no-repeat top right; Lähde: 14

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Kuvat ja taustat ICT1TN004. Elina Ulpovaara Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

Asemointi. 1. Lohkon korkeus ja leveys

Asemointi. 1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

1. Lohkon korkeus ja leveys

1. Lohkon korkeus ja leveys Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa. TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan

Lisätiedot

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola

XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

KOTISIVUKONE ULKOASUEDITORI

KOTISIVUKONE ULKOASUEDITORI KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004

Navigointi Verkkomultimedia ICT1tn004 Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?

Lisätiedot

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

HTML-ohjeet. Sivun perusrakenne