Kuvat. 1. Selaimien tunnistamat kuvatyypit

Koko: px
Aloita esitys sivulta:

Download "Kuvat. 1. Selaimien tunnistamat kuvatyypit"

Transkriptio

1 Kuvat Kuvia voi liittää xhtml-sivulle <img>-elementillä <object>-elementillä <input>-elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina <body>-elementin background-attribuutilla tai CSS:n background-ominaisuuksilla ICT01D Elina Ulpovaara 1. Selaimien tunnistamat kuvatyypit Selaimet tunnistavat kuvatyypit ovat jpeg sopii kuville, joissa on paljon värisävyjä valokuville gif sopii grafiikkaan sopii kuville, joissa suuria saman sävyisiä pintoja käyttää maksimissaan 256:ta väriä, tarvitsee väripaletin tunnistaa yhden värin läpinäkyväksi png sekä jpeg:n ja gif:n korvaavaksi kehitetty kuvaformaatti

2 2. Kuvan upotus sivulle: <img> <img>-elementillä liitetään dokumenttiin sisäinen kuva. <img>-elementti kertoo kuvan osoitteen ja mahdollisesti kuvaan liittyvää muuta tietoa. Strict-kielioppi ei salli <img>-elementtiä suoraan <body>-elementin alielementiksi. Sijoita kuva esim. <p>- tai <div>-elementin sisään. Elementillä on mm. seuraavat attribuutit: src kuvan sijainti pakollinen arvona annetaan osoite, josta selain lataa kuvan <img src="omena.gif /> alt kuvan sijaan näytettävä teksti pakollinen <img src="pallo.gif" alt="kuva omenasta /> longdesc pitkä kuvaus linkki kuvasta kertovaan tekstiin selain tuki heikkoa height ja width korkeus ja leveys Kannattaa aina ilmoittaa, tällöin selain varaa kuvalle paikan ja jatkaa lopun sivun lataamista. <img src="omena.gif" alt="kuva omenasta width="150" height="148 />

3 Elementtiin voidaan liittää myös seuraavat asetteluun vaikuttavat attribuutit (Loose): align tekstin sijoittuminen kuvaan nähden arvot: top : tasaa samalle tasolle kuvan ja rivin yläreunan middle : tasaa samalle tasolle kuvan keskikohdan rivin keskikohdan kanssa bottom : tasaa kuvan ja tekstin alareunat samalle tasolle left/right : tasaavat kuvan vasempaan/oikeaan marginaaliin ja teksti sijoittuu vastaavasti oikealle/vasemmalle puolella kuvaa. Jos tekstin kierto halutaan keskeyttää, katkaisukohdassa annetaan rivinvaihtokomento parametrillä clear="right/left". <br clear= left /> border reunan leveys (Jos kuva on linkkinä ja haluat linkin aiheuttaman reunan pois, anna kuvalle border-attribuutti arvonaan 0.) hspace kuvan ja muun sisällön välinen vaakasuora etäisyys eli vasemman ja oikean reunan leveys. vspace kuvan ja muun sisällön välinen pystysuora etäisyys eli ylä- ja alareunuksen leveys.

4 <img>-elementin align-attribuuttin eri arvot: (Loose) (Loose)

5 Align-attribuutti CSS:n avulla: img {float:left} img {float:right} <img.../> <p class= alku >Omenapuut kukkivat kesällä</p><p class= loppu>ja tuottavat makoisia hedelmiä syksyllä</p> Img {float:left}.loppu {clear:left} <img>-elementin border-attribuutti (Loose) <img>-elementille saa reunaviivat border-attribuutilla <img src= omena.gif" alt= omena width="70" height="70" border="4" /> border-attribuutin arvoksi annetaan reunaviivan paksuus reunaviivanväri yleensä sama kuin elementin tekstiväri jos kuva on linkkinä, reunaviivan väri on linkkitekstin väri linkkikuvasta saa reunan pois antamalla border= 0

6 Border-attribuutti CSS:n avulla: img {border-style: solid; border-width: 3px; border-color: green;} Img {border: solid 3px green} Border-style:n arvot: none solid double groove ridge inset outset <img>-elementin attribuutit hspace ja vspace: (Loose) Kuvan vasemmalle ja oikealle puolelle 20 px tilaa. Kuvan ylä- aja alapuolelle 20 px tilaa.

7 Hspace ja vspace-attribuutit CSS:n avulla: Kaikille kuvan reunoille (vasen,oikea, ylä ja ala) voi antaa erikseen marginaalit eli miten kuva sijoittuu ympärillä oleviin muihin elementteihin. img {margin-left: 20px; margin-top: 30px; margin-right:40px: margin-top:50px} Kaikilla sama: img {margin: 20px} 3. Kuva linkkinä Kuvaa voi käyttää yhtälailla linkkinä kun tekstiäkin. Linkkitekstin paikalle laitetaan <img>-elementti. <a herf="index.html"><img src="paluu.gif" alt="kotisivulle /></a> Sinisen kehyksen saa pois esim. CSS-ehdotuksella: <style type="text/css"> <!-- img {border-style: none} --> </style> tai pelkästään: border:none Loose: <img>elementtiin voi liittää attribuutin border= 0.

8 4. Taustakuvat XHTML-dokumentin taustakuva (Loose): Kuvaa voi käyttää sivun taustana. Tausta täytetään kuvalla siten, että kuvaa toistetaan sarakkeittain ja rivittäin selaimen ikkuna täyteen. Body-elementtiin lisätään background-attribuutti, jonka arvoksi annetaan kuvan osoite. <body background="taustat/omena.gif"> Taustavärit ja -kuvat CSS:n avulla: Elementin taustaväri Ominaisuus: background-color Arvoina värit red, rgb(255,0,0), #ff00000 transparent: isäntäluokka-laatikossa olevan tausta näkyy läpi body {background-color: yellow} p {background-color: rgb(204,204,204)} Koko dokumentin taustan väri on keltainen. Tekstikappaleen tausta on harmaa.

9 Elementin taustakuva Ominaisuus: background- image URL-osoite Koko dokumenttiin taustakuva body {background-image: url(omena.gif)} Taulukon taustalle kuva table {background-image: url(tausta.gif)} Taustakuvan toistaminen Ominaisuus: background- repeat Arvot: repeat toistetaan vaakasuunnassa: repeat-x toistetaan pystysuunassa: repeat-y ei toistoa, vain yksi kuva: no-repeat Toistetaan taustakuva pystysuunnassa: body {background-image: url(omena.gif); background-repeat: repeat-y}

10 Kuvan paikka ominaisuus: background- position taustakuvan sijainti elementin sisällä paikka mitataan vasemmasta yläkulmasta arvot mittayksiköt vasemmalta ylhäältä vasemmalta, jolloin pystysuunnassa kuva asettuu keskelle top, center, bottom, left, right (+yhdistelmät) prosentit: annetaan x%y%-arvoin Sijoitetaan taustakuva siten,että se on vaakasuunnassa 100px vasemmalta ja pystysuunnassa 200px ylhäältä. body {background-image: url(omena.gif); background-repeat: no-repeat; background-position:100px 200px}

11 Kiinteä taustakuva Normaalisti taustakuva siirtyy sisällön mukana, kun sisältöä liikutetaan vierityspalkin avulla. Ominaisuudella background-attachment voidaan kiinnittää taustakuva Arvot: vieritys:scroll kiinnitys:fixed Dokumentin taustakuva siirtyy vierityksen mukana: body {background-image: url(tausta.gif); background-attachment: scroll }

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

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

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola 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

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

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

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

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

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

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

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. 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

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen tyylitiedoston käyttö 1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit

Lisätiedot

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

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 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

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin) 23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

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

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

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

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#

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

Editorin käyttö. TaikaTapahtumat -käyttöohje

Editorin käyttö. TaikaTapahtumat -käyttöohje Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan

Lisätiedot

CSS tyyliä sivuihin osa II. Elina Ulpovaara

CSS tyyliä sivuihin osa II. Elina Ulpovaara CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration

Lisätiedot

QT tyylit. Juha Järvensivu 2008

QT tyylit. Juha Järvensivu 2008 QT tyylit Juha Järvensivu juha.jarvensivu@tut.fi 2008 Sisällys QStyle Style sheet Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä

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

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

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

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014 1.4.2014 Aulikki Hyrskykari Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

Lisätiedot

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8. Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.

Lisätiedot

1 Dreamweaver MMX. 2 Tekstin muokkaus

1 Dreamweaver MMX. 2 Tekstin muokkaus 1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

HTML-ohjeet. Sivun perusrakenne