Kuva xhtml-sivulla. Mirja Jaakkola

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

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

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

Ulkoasun muokkaus CSS-tiedostossa

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

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

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

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

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

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

ARVO - verkkomateriaalien arviointiin

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

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

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

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

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 <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE=text/css> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... HTML-ohjeet Sivun perusrakenne ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset... ...tänne tulee javascript-koodi...

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4

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

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista 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

Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara

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

Lisätiedot

Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi.

Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Yleisohjeet mainosaineistoille Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Kun lähetät aineistoja sähköpostitse,

Lisätiedot

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan

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

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

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

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

3 CSS ja teknisesti laadukas Web-sivu

3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja teknisesti laadukas Web-sivu 3 CSS ja CSS ja teknisesti laadukas Web-sivu Johdanto luentokerran aihepiiriin: Nykyaikaisen Web-hypermedian toteuttaminen on HTML-kielen ja CSS-tyylien yhteispeliä

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 2000 - Näkymät FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava

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

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Digitaalisen median tekniikat xhtml Harri Laine 1

Digitaalisen median tekniikat xhtml Harri Laine 1 Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

TAULUKOINTI. Word Taulukot

TAULUKOINTI. Word Taulukot Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

KUVAT. Word 2013. Kuvat

KUVAT. Word 2013. Kuvat Word 2013 Kuvat KUVAT KUVAT... 1 Kuvatiedoston lisääminen... 1 Microsoftin-kuvien lisääminen... 1 Koon muuttaminen ja kääntäminen... 2 Kuvan siirtäminen... 2 Tekstiin tasossa... 2 Kelluva kuva, tekstin

Lisätiedot

Tekstieditorin käyttö ja kuvien käsittely

Tekstieditorin käyttö ja kuvien käsittely Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja

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

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

Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla

Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Avaa Paint.NET tuplaklikkaamalla sen pikakuvaketta. Paint.NET avautuu tämän näköisenä. Edessä on tyhjä paperi. Saadaksesi auki kuvan, jota aiot pienentää

Lisätiedot

HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko. Mirja Jaakkola

HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko. Mirja Jaakkola HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko Mirja Jaakkola Luettelot Luetteloelementillä esitetään eri tyyppisiä luetteloja ja listoja Luetteloelementeille on ominaista: luettelo ja luettelorivit

Lisätiedot

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA Aulikki Hyrskykari Antti Sand 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

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.

Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa. WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)

Lisätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti 1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23

Lisätiedot

UpdateIT 2010: Uutisten päivitys

UpdateIT 2010: Uutisten päivitys UpdateIT 2010: Uutisten päivitys Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com 2 Sisällys Uutisen lisääminen... 1

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

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen Verkkosivustojen suunnittelu ja rakentaminen CSS-perusteet Sisällysluettelo 1 Johdanto 2 CSS:n syntaksi 3 Valitsimet 4 CSS:n liittäminen dokumentteihin 4.1 CSS erillisenä tiedostona 4.2 CSS upotettuna

Lisätiedot

Taulukot. 2002 Päivi Vartiainen 1

Taulukot. 2002 Päivi Vartiainen 1 Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit

Lisätiedot

PIKI-verkkokirjasto 1 Lyhyet vinkit

PIKI-verkkokirjasto 1 Lyhyet vinkit PIKI-verkkokirjasto Kirjoittamis- ja julkaisuohje vinkkeihin LKK:n ja Nuorten Mitä lainaisin / Lasten Vinkit (johdanto ja vinkit allekkain samaan artikkeliin) PIKI-verkkokirjasto 1 Kuukauden kuusi vinkkiä

Lisätiedot

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti: HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis

Lisätiedot

Kuvat ovat tärkeä osa Espoon kaupungin viestintää, ja siksi ne on suunnitellaan ja valitaan huolellisesti.

Kuvat ovat tärkeä osa Espoon kaupungin viestintää, ja siksi ne on suunnitellaan ja valitaan huolellisesti. -verkkosivuston KUVAMAAILMAn ohjeistus JOHDANTO Kuvat ovat tärkeä osa Espoon kaupungin viestintää, ja siksi ne on suunnitellaan ja valitaan huolellisesti. Espoo.fi-sivuston kuvat tukevat kaupungin visuaalista

Lisätiedot

Tiedostomuodon valitseminen kuville

Tiedostomuodon valitseminen kuville Kuvan lisääminen sivulle Valitse työkaluriviltä Lisää Kuva tiedostosta painike 1. Ruudulle aukeaa sekä Kuva-ikkuna että Valitse tiedosto ikkuna 2. Selaa Valitse tiedosto ikkunassa esiin se kuva, jonka

Lisätiedot

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan

Lisätiedot

xhtml+css Survival Kit

xhtml+css Survival Kit xhtml+css Survival Kit xhtml:n ja CSS:n lyhyt oppimäärä OSA I: Muutama sana teoksesta 1. xhtml+css Survival Kit 2. Kiitokset ja kreditit OSA II: Alustus 1. Mitä xhtml ja CSS ovat? 2. xhtml-sivujen rakenne

Lisätiedot

Oulun yliopiston www-sivujen tekeminen

Oulun yliopiston www-sivujen tekeminen Oulun yliopiston www-sivujen tekeminen Oulun yliopiston ja sen yksiköiden www-sivuilla noudatetaan yliopiston www-politiikan peruslinjauksia sekä graafisen ohjeiston mukaista visuaalista linjaa. Yhtenäisellä

Lisätiedot

ALVin käyttöohjeet. 1. Tositteiden tallennus palveluun. 1.1 Kuvaus, rajaus ja tallennus puhelimella

ALVin käyttöohjeet. 1. Tositteiden tallennus palveluun. 1.1 Kuvaus, rajaus ja tallennus puhelimella ALVin käyttöohjeet Nämä käyttöohjeet sisältävät hyödyllisiä vinkkejä palvelun käyttöön. Ne kannattaa lukea ennen palvelun käyttöä. Jos kuitenkin kohtaat ongelmia, etkä löydä niihin ratkaisua näistä käyttöohjeista,

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

3M Online Center sivuston käyttöopas

3M Online Center sivuston käyttöopas 3M Online Center sivuston käyttöopas 1 3M 2015. All Rights Reserved. 3M Online Center -sivuston käyttöopas Tuotteiden tilaaminen...3 1. Tilaa nyt...4 2. Pikatilaus...5 3. Lataa tilaustiedosto...6 4. Ostoslistat

Lisätiedot

Tehtävänä lappilaisen elämän tiedon välitys suomen kieltä puhumattomille

Tehtävänä lappilaisen elämän tiedon välitys suomen kieltä puhumattomille MEDIA- KORTTI Tehtävänä lappilaisen elämän tiedon välitys suomen kieltä puhumattomille Lähde mukaan viemään oma viestisi heille, jotka sitä etsivät ja tarvitsevat. Kauttamme tavoitat alueesta kiinnostuneet

Lisätiedot

TUNNUS TUNNUS. Lounais-Suomen ympäristökasvatustoiminnan tunnus GRAAFINEN OHJEISTUS

TUNNUS TUNNUS. Lounais-Suomen ympäristökasvatustoiminnan tunnus GRAAFINEN OHJEISTUS Lounais-Suomen ympäristökasvatustoiminnan tunnus GRAAFINEN OHJEISTUS Tunnus - Kehrä Lounais-Suomen ympäristökasvatustoiminnan tunnukseen kuuluu kaksi osaa: kuviollinen kehrä-tunnus ja toiminnan/tapahtuman

Lisätiedot

Esitysgrafiikka (20 pistettä)

Esitysgrafiikka (20 pistettä) Esitysgrafiikka (20 pistettä) Yleistä Tehtävänäsi on rakentaa PowerPoint esitys osavuosikatsauksesta mielikuvituksellista automyyntiä tekevälle yritykselle Skills Car Turku. Käytettävät tiedostot Tiedostot

Lisätiedot

UpdateIT 2010: Editorin käyttöohje

UpdateIT 2010: Editorin käyttöohje UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...

Lisätiedot

8 Kuvat, sovelmat ja objektit

8 Kuvat, sovelmat ja objektit 97 Tässä kappaleessa käsitellään kuvien ja sovelmien (Applets) liittämistä HTMLdokumenttiin. Kuvia on periaatteessa olemassa kolmea päätyyppiä, tekstin sisäisiä, tekstin ulkoisia ja kolmanneksi kuvakarttoina

Lisätiedot

3M Toimistotuotteet. Graafinen ohjeisto / Jälleenmyyjät. Näin käytämme. logoja

3M Toimistotuotteet. Graafinen ohjeisto / Jälleenmyyjät. Näin käytämme. logoja 3M Toimistotuotteet Graafinen ohjeisto / Jälleenmyyjät Näin käytämme logoja Sisältö: 1 Yleistä tuotenimistä ja logoista 1 2 3M-logo 1 2.1 3M logon käyttö internetissä 3 3 Post-it -logo 4 3.1 Perusviestilaput

Lisätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne

Lisätiedot

ALVin käyttöohjeet. Kuvaus, rajaus ja tallennus puhelimella ALVin -mobiilisovelluksen avulla dokumentit kuvataan, rajataan ja tallennetaan palveluun.

ALVin käyttöohjeet. Kuvaus, rajaus ja tallennus puhelimella ALVin -mobiilisovelluksen avulla dokumentit kuvataan, rajataan ja tallennetaan palveluun. ALVin käyttöohjeet Nämä käyttöohjeet sisältävät hyödyllisiä vinkkejä palvelun käyttöön. Ne kannattaa lukea ennen palvelun käyttöä. Jos kuitenkin kohtaat ongelmia etkä löydä niihin ratkaisua näistä käyttöohjeista

Lisätiedot

Kotisivut helposti - osa 3

Kotisivut helposti - osa 3 Kotisivut helposti - osa 3 Tämän artikkelisarjan kahdessa ensimmäisessä osassa esiteltiin Internet-sivujen perusteita, kotisivujen suunnittelulähtökohtia sekä HTML/XHTML-ohjelmoinnin perusteita ja yleisimmin

Lisätiedot

Facebook-sivun luominen

Facebook-sivun luominen Facebook-sivun luominen Facebook-sivun luominen Etene vaihe vaiheelta 1 Kirjaudu Facebook-palveluun omalla käyttäjätunnuksellasi. Sen jälkeen sivun alareunassa näkyvät toimintolinkit, joista sinun täytyy

Lisätiedot

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat

Lisätiedot

GOOGLE-SIVUSTOJEN KAÄ YTTOÄ OÄ NOTTO

GOOGLE-SIVUSTOJEN KAÄ YTTOÄ OÄ NOTTO GOOGLE-SIVUSTOJEN KAÄ YTTOÄ OÄ NOTTO Suomen Partiolaiset Finlands Scouter ry 09/2012 Tämän ohjeen avulla lippukuntanne voi luoda uudet nettisivut käyttäen valmista Google sivusto mallipohjaa. OHJE: Google

Lisätiedot

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU ,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU Tässä pääsette tutustumaan Internet Explorerin (IE) käyttöön. Muitakin selainversioita löytyy, kuten esimerkiksi Netscape, Opera ja Mozilla. Näiden muiden selainten

Lisätiedot

JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 4/11/2013

JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 4/11/2013 9.4.2013 Aulikki Hyrskykari Kuvat verkkosivulla Video ja ääni verkkosivulla Mittayksiköt Tekstin muotoilu Kirjasimet Lokeromalli Bittikarttakuvan koko (dimensiot) mitataan pikseleissä o esimerkkinä "3

Lisätiedot

Digitaalisen tarinan koostaminen HTKS Tanja Välisalo

Digitaalisen tarinan koostaminen HTKS Tanja Välisalo Digitaalisen tarinan koostaminen HTKS152 17.2.2014 Tanja Välisalo Digitaalisen tarinan käytännön toteutus 1. Kuva-, ääni- ja videomateriaalin muokkaaminen 2. Digitaalisen tarinan koostaminen Editointi

Lisätiedot

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten: CSS CSS on merkintäjärjestelmä, jolla voidaan esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia. Yhtä kokonaisuutta sanotaan tyyliohjeeksi eli tyylisäännöstöksi, englanniksi style sheet. (Korpela

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

Graafinen ohjeisto 1

Graafinen ohjeisto 1 Graafinen ohjeisto 1 Sisältö Tunnuksista yleisesti... 3 Tunnuksen versiot ja rakenne.... 4 Merkin värit.... 5 Tunnuksen värivaihtoehtoja... 7 Tunnuksen suoja-alue.... 8 Tunnuksen sijoittelu.... 9 Pienen

Lisätiedot

ESRC:n uusiutumassa olevat kotisivut on toteutettu WordPress-ohjelmalla (WP). Samaa ohjelmaa käyttävät menestyksellä ainakin SSql, HSRC ja JSK.

ESRC:n uusiutumassa olevat kotisivut on toteutettu WordPress-ohjelmalla (WP). Samaa ohjelmaa käyttävät menestyksellä ainakin SSql, HSRC ja JSK. PIKAOHJEET VIESTIEN KÄYTTÖÖN ESRC:N KOTISIVUILLA Versio 3, 27.12.2006 ESRC:n uusiutumassa olevat kotisivut on toteutettu WordPress-ohjelmalla (WP). Samaa ohjelmaa käyttävät menestyksellä ainakin SSql,

Lisätiedot

Ilmainen ja helppo tapa luoda verkkosivut omalle lionsklubillesi! Tervetuloa

Ilmainen ja helppo tapa luoda verkkosivut omalle lionsklubillesi! Tervetuloa Ilmainen ja helppo tapa luoda verkkosivut omalle lionsklubillesi! Tervetuloa Yleistä Sekä tämä materiaali että tämän hetken ohjeistukset löytyvät piirin www-sivuilta http://e-district.org/sites/107g/.

Lisätiedot

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015 Suomi Finland 100 -tunnus Graafinen ohjeisto Lokakuu 2015 Tunnus Tämä on Suomen itsenäisyyden satavuotisjuhlavuoden tunnus perusmuodossaan. Se on juhlavuoden visuaalisen ilmeen arvokkain elementti, jota

Lisätiedot

Digitaalisen median tekniikat. Luento 3: CSS

Digitaalisen median tekniikat. Luento 3: CSS Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi

Lisätiedot

VERKKOKIRJOJEN JA DIGILEHDEN KÄYTTÖOHJE

VERKKOKIRJOJEN JA DIGILEHDEN KÄYTTÖOHJE VERKKOKIRJOJEN JA DIGILEHDEN KÄYTTÖOHJE Huom! Tämä käyttöohje koskee seuraavia verkkokirjoja ja digilehtiä: Joka kodin huoltovihko, Osakkaan remontit taloyhtiössä, Suomen Kiinteistölehti, Taloyhtiön vastuunjakotaulukko

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

Listat eli luettelot. Järjestämätön lista (unordered list)

Listat eli luettelot. Järjestämätön lista (unordered list) Listat eli luettelot listaelementit ovat lohkoelementtejä: lista ja listan alkiot alkavat uudelta riviltä listan jälkeen tuleva elementti alkaa uudelta riviltä listan alkuun ja loppuun selain jättää tyhjää

Lisätiedot

Tunnuksen päivitys 19.9.2012

Tunnuksen päivitys 19.9.2012 Tunnuksen päivitys 19.9.2012 2 Tampereen yliopiston tunnus Tampereen yliopiston tunnus Tuhannet ihmiset näkevät Tampereen yliopiston tunnuksen päivittäin lomakkeissa, nettisivuilla, raporteissa, esitteissä.

Lisätiedot

Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen:

Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen: Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen: http://www.kamera73.fi/kuukaudenkuvaaja Kukin seuran jäsen voi laittaa

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan

Lisätiedot

Ohjeistus yhdistysten internetpäivittäjille

Ohjeistus yhdistysten internetpäivittäjille Ohjeistus yhdistysten internetpäivittäjille Oman yhdistyksen tietojen päivittäminen www.krell.fi-sivuille Huom! Tarvitset päivittämistä varten tunnukset, jotka saat ottamalla yhteyden Kristillisen Eläkeliiton

Lisätiedot

TAULUKKO, KAAVIO, SMARTART-KUVIOT

TAULUKKO, KAAVIO, SMARTART-KUVIOT PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden

Lisätiedot

HTML perusteita (ei julkiseen jakeluun)

HTML perusteita (ei julkiseen jakeluun) HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä

Lisätiedot

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.

Lisätiedot

Ohje Laurean logojen käyttöön 2018

Ohje Laurean logojen käyttöön 2018 Ohje Laurean logojen käyttöön 2018 1. Yleistä logon käytöstä 2. Minimikoko ja suoja-alue 3. Pystyversiot 4. Vaakaversiot 5. Sidosryhmälogo 6. Kielletyt käyttötavat 7. Muistilista 1. Yleistä LOGON käytöstä

Lisätiedot

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot