Kuva xhtml-sivulla. Mirja Jaakkola
|
|
- Kauko Nieminen
- 2 vuotta sitten
- Katselukertoja:
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 Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
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
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.
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ö
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
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.
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
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
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
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
Ulkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
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
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,
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
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
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
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
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
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 5/8: Mediaelementit Edellinen
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ö,
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
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
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?
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
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