Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

Download "Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara"

Transkriptio

1 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 Elina Ulpovaara 1. Taulukon rakenne: Tässä luentomateriaalissa käsitellään pientä taulukkoa, jonka sisältönä on tietoa väreistä. Elementtejä esitellessä ei ole erikseen mainittu lähes kaikille elementeille yhteisiä attribuutteja: id, class, lang, dir, title ja style. Jos elementti kuuluu Transitional DTD:hen mutta ei Strict DTD:hen, materiaalissa on maininta Loose.

2 Taulukko määritellään <table>-elementillä, jonka sisälle tulee taulukon varsinainen sisältö. <table>... taulukon sisältö Taulukko jaetaan riveihin <tr> </tr> ja soluihin. Soluja on kahta tyyppiä: otsikkosolut <th> </th> ja tietosolut <td> </td> HUOM. Jokaisella rivillä täytyy olla yhtä monta solua, koska muuten sarakkeista ei tule suoria. <table> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> Jokainen rivi alkaa <tr>-tagilla ja loppuu </tr>-tagiin. <table border="1"> <tr> <th>väri</th> <th>rgb-arvot</th> <th>heksadesimaali</th> </tr> <tr> <td>white</td> <td>255,255,255</td><td>#ffffff</td></tr> <tr> <td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr> <tr><td>magenta</td><td>255,0,255</td><td>#ff00ff</td></tr> <tr><td>cyan</td><td>0,255,255</td><td>#00ffff</td></tr> <tr><td>yellow</td><td>255,255,0</td><td>#ffff00</td></tr>

3 Table-elementti voi sisältää seuraavia elementtejä annetussa järjestyksessä. Elementti Merkitys Pakollisuus caption taulukon otsikko ei col tai colgroup sarakkeittain ryhmittelyä ei thead tfoot tbody riviryhmittelyä: otsikkorivit riviryhmittelyä: alaotsikkorivi riviryhmittelyä: sisältörivit ei ei vähintään yksi tbody- tai tr-elementti tr sisältörivi vähintään yksi tbody- tai tr-elementti <table>-elementin attribuutit: border kehykset arvoina numeroarvot <table border="1"> attribuutilla voi määrittää myös kehysten leveyden esim. border="2 Border-attribuutti tekee reunaviivan sekä koko taulukolle että kaikille soluille. CSS:n avulla voidaan asettaa reunaviivat erikseen sekä koko taulukolle, että kaikille soluille. CSS:n ehdotukset reunaviivalle border-style - reunaviivan tyylli border-width - reunaviivan leveys border-color - reunaviivan väri

4 <style type="text/css"> <!-- table {border: 3px dotted #FF0033} th, td {border: solid #000000} --> </style> CSS2: reunojen yhdistäminen <style type="text/css"> <!-- table {border: solid #000000; border-collapse:collapse} th, td {border: solid #000000} --> </style> IE 6.0 Firefox

5 cellpadding täytteen paksuus soluissa eli kasvatetaan solujen sisällön etäisyyttä reunoista arvoina pituusarvot <table cellpadding="5" border="1"> CSS: Padding-ominaisuudella voidaan määrittää täytteen paksuus joka suunnalle erikseen. td {padding-left: 5px; padding-top: 6px; cellspacing padding-right: 7px; solujen etäisyys toisistaan padding-bottom: 8px} arvoina pituus arvot <table cellpacing="5" border="1"> Cellpaddign vaikuttaa solun sisällön ja solun reunan väliseen tilaan. Cellpacing vaikuttaa solujen väliseen tilaan.

6 rules määritellään, mitkä kehykset näkyvät eli solujen reunaviivat arvoina: none, groups - ryhmäkehykset, rows - rivikehykset, cols - sarakekehykset tai all <table rules="rows" border="1"> frame määrittää, millä eri taulukon sivuilla on kehykset Frame-attribuutin arvot: Muista CSS:n border-ominaisuus! void : ei reunoja above : yläreuna näkyy below : alareuna näkyy hsides : ylä- ja alareunat näkyvät vsides : oikea- ja vasenreuna näkyvät lhs : oikea reuna näkyy rhs :vasen reuna näkyy box : kaikki reunat näkyvät border : kaikki reunat näkyvät summary taulukon selitys <table summary= Värien nimet, rgb-arvot ja heksadesimaalit"> width taulukon leveys arvot joko mittayksikköinä tai prosentteina Jos taulukolle ei anna leveyttä, niin se varaa sisällön mukaan tarvittavan tilan. CSS: Width-ominaisuus ehdottaa taulukolle leveyden arvoina mittayksiköt tai prosentit. table {width: 100%} align (Loose): Oletusarvona taulukko sijoittuu sivun vasempaan reunaan, muu teksti asettuu taulukon ylä- tai alapuolelle arvot left/right tasaa taulukon vasempaan/oikeaan marginaaliin

7 Taulukon keskittäminen CSS:n avulla: Tapa 1: ympäröi taulukko <div>-elementillä ja anna sille text-alignominaisuus <div class= keskelle > <tähän taulukko> </div> <style type="text/css">.keskelle {text-align: center} table {text-align:left} </style> Tapa 2: <style type="text/css"> <!-- table {margin-left:auto; margin-right:auto} --> </style> Huom. Text-align-ominaisuus tableelementillä vaikuttaa taulukon sisällön sijaintiin soluissa eikä itse taulukkoon. 2. Taulukon otsikko <caption> <caption>-elementillä annetaan taulukolle otsikko. Elementti sijoittuu taulukon sisälle <table>-elementin ensimmäiseksi elementiksi. Elementin sisältönä on tekstiä tai tekstitason merkkausta. <table border="1"> <caption>värikoodeja</caption> <tr><th>väri</th> <th>rgb-arvot</th><th>heksadesimaali</th></tr> <tr> <td>white</td> <td>255,255,255</td><td>#ffffff</td></tr> <tr> <td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr>

8 <caption>-elementin attribuutit: align (Loose) sijainti suhteessa taulukkoon arvot: top, botton, left tai right selaimet tukevat vain arvoja top ja bottom CSS:ssän vastaava ominaisuus on caption-side arvot: top, bottom, left, right, inherit tuettu erittäin huonosti Käytä <caption>-elementille tavallisia CSS-ehdotuksia. <style type="text/css"> <!-- caption { text-align: left; font-family: "Times New Roman", serif; color: #FF0000;} --> </style> 3. Taulukon rivi: <tr> <tr>-elementti ilmoittaa yhden taulukon rivin. Elementti voi sisältää <th>- ja/tai <td>-elementtejä Attribuutit: align vaakasuora tasaus soluissa koko rivillä arvot: left, center, right, justify CSS: Käytä text-align -ominaisuutta. tr {text-align:left} bgcolor (Loose) taustaväri värikoodit CSS: tr {background-color:white}

9 valign pystysuoratasaus arvoina: top, middle, bottom tai baseline CSS: vertical-align -ominaisuudella taulukon yhteydessä on seuraavat arvot: top - solun sisältö on yläreunassa bottom - solun sisältö on alareunassa middle - solun sisältö on keskellä 4. Taulukon solut: <th> ja <td> <th>-elementti on otsikkotietoja varten ja <td>-elementti taulukon varsinaista tietoa varten. Useat selaimet lihavoivat <th>-elementit. Oletusarvoisesti otsikkosoluissa olevat tiedot keskitetään sekä vaakaettä pystysuunnassa ja muiden solujen tiedot keskitetään pystysuunnassa. <table border="1"> <caption>värikoodeja</caption> <tr><th>väri</th> <th>rgb-arvot</th> <th>heksadesimaali</th></tr> <tr><td>white</td> <td>255,255,255</td> <td>#ffffff</td></tr>

10 Solujen attribuutit: align vaakasuora tasaus soluissa koko rivillä arvot: left, center, right, justify CSS: Käytä text-align -ominaisuutta. td {text-align:left} bgcolor (Loose) taustaväri värikoodit CSS: td {background-color:white} height (Loose) arvot pituusmittoina CSS: Elementin height-ominaisuus asettaa sisällön korkeuden. Yleensä ei kannata käyttää vaan antaa korkeuden muotoutua sisällön mukaan. td {height: 200px} valign pystysuoratasaus arvoina: top, middle, bottom tai baseline CSS: vertical-align -ominaisuudella taulukon yhteydessä on seuraavat arvot top - solun sisältö on yläreunassa bottom - solun sisältö on alareunassa middle - solun sisältö on keskellä baseline - asettaa solun ensimmäisen rivin samalla rivillä olevan solun ensimmäisen rivin mukaan

11 width (Loose) solun leveys taulukon leveydestä riittää antaa yhteen soluun sarakkeella arvot pituusmittoina CSS: Width-ominaisuus ehdottaa solulle leveyden arvoina mittayksiköt tai prosentit. td {width: 50%} colspan usean sarakkeen yli ulottuva solu rowspan usean rivin yli ulottuva solu

12 Taulukko kirjoitetaan rivikerralla <table border="1"> 1. rivi <tr> <th colspan="4">väreistä</th></tr> 2. rivi <tr> <th colspan="2">päävärit</th> <th colspan="2">välivärit</th> </tr> 3. rivi <tr> <td rowspan="2">red</td><td>255,0,0</td> <td rowspan="2">magenta</td><td >255,0,255</td></tr> 4. rivi <tr> <td>#ff0000</td><td>#ff00ff</td></tr> <tr> <td rowspan="2">green</td><td>0,255,0</td> <td rowspan="2">cyan</td><td>0,255,255</td></tr> <tr> <td>#00ff00</td><td>#00ffff</td></tr> <tr> <td rowspan="2">blue</td><td>0,0,255</td> <td rowspan="2">yellow</td><td>255,255,0</td></tr> <tr> <td>#0000ff</td><td>#ffff00</td></tr>

13 5. Taulukon rivien ryhmittely: <thead>, <tbody>, <tfoot> Rivien ryhmittely selkeyttää taulukkoa ja tekee helpommaksi tehdä taulukon eri osille erilaiset muotoilut. <table> <caption>...</caption> <thead>...</thead> otsikkorivit <tbody>...</tbody> taulukon tietosisällön ryhmittäminen <tfoot>...</tfoot> taulukon loppuun tulostuva otsikkorivi tai ns alatunniste esitetäänn <thead>-elementin jälkeen ennen <tbody>-elementtejä <thead>...</thead> <tfoot>...</tfoot> <tbody>... </tbody> <tbody>...</tbody>. <table border="1"> <caption> Värikoodeja</caption> <thead> <tr> <th>väri</th><th>rgb-arvot</th><th>heksadesimaali</th></tr> </thead> <tfoot> <td colspan="3">kuva 3.14</td> </tfoot> <tbody> <tr><td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr> </tbody> <tbody> <tr><td>magenta</td><td>255,0,255</td><td>#ff00ff</td></tr> <tr><td>cyan</td><td>0,255,255</td><td>#00ffff</td></tr> <tr><td>yellow</td><td>255,255,0</td><td>#ffff00</td></tr> </tbody>

14 <style type="text/css"> <!--.paavarit {background-color: #FFFFCC;}.valivarit {background-color: #99FFFF;} --> </style> <tbody class= paavarit > <tr><td>red</td><td>255,0,0</td><td>#ff0000</td></tr> <tr><td>green</td><td>0,255,0</td><td>#00ff00</td></tr> <tr><td>blue</td><td>0,0,255</td><td>#0000ff</td></tr> </tbody> <tbody class= valivarit > <tr><td>magenta</td><td>255,0,255</td><td>#ff00ff</td></tr> <tr><td>cyan</td><td>0,255,255</td><td>#00ffff</td></tr> <tr><td>yellow</td><td>255,255,0</td><td>#ffff00</td></tr> </tbody>

15 6. Taulukon sarakerakenne: <col>, <colgroup> <colgroup>- ja <col>-elementtien avulla voidaan muodostaa sarakkeista ryhmiä. Ryhmiä määritellessä täytyy tietää, montako saraketta ryhmään kuuluu. Tämä annetaan <colgroup>-elementille span-attribuutilla tai käyttämällä <col>-elementtiä. <col>-elementille on määritelty align- ja valign-attribuutit sisällön tasaamista varten ja width-attribuutti määrittämään sarakkeen leveyttä. span-attribuutilla ilmaistaan yhteen kuuluvien sarakkeiden lukumäärä. <table border="1"> <caption>värikoodeja</caption> <colgroup> <col width="50%"/> <col align="center" span="2"/> 1. Sarakeen leveys on 50% koko taulukosta </colgroup> <thead> 2. ja 3. sarakkeen tiedot <tr> keskitetään. <th>väri</th><th>rgb-arvot</th><th>heksadesimaali</th>

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

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4

5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4 51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla 4.4.2013 Aulikki Hyrskykari CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla Tyylipohjakieli Nimi tulee piirteiden putousmaisesta periytymisestä o cascade = vesiputous o tyylipiirteet periytyvät

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

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

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

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

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

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

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

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

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

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Opinnäytetyö 5.4.2006 Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Sisällysluettelo 1. Johdanto... 3 2. Suunnittelu... 4 2.1. PTOPlus.net... 4 2.2. Sivujen tarkoitus ja kohderyhmä...

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

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

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

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

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.

Lisätiedot

4 Johdanto CSS-tyyleihin

4 Johdanto CSS-tyyleihin 4 Johdanto CSS-tyyleihin CSS-tyylien perusteet CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina.

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

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

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

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002 , XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi

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

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

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu

Excel-harjoitus 1. Tietojen syöttö työkirjaan. Taulukon muotoilu Excel-harjoitus 1 Tietojen syöttö työkirjaan Kuvitteellinen yritys käyttää Excel-ohjelmaa kirjanpidon laskentaan. He merkitsevät taulukkoon päivittäiset ostot, kunnostuskulut, tilapäistilojen vuokramenot,

Lisätiedot

ESIKATSELU, TULOSTAMINEN, TUNNISTEET

ESIKATSELU, TULOSTAMINEN, TUNNISTEET Excel 2013 Tulostaminen Sisällysluettelo ESIKATSELU, TULOSTAMINEN, TUNNISTEET TULOSTAMINEN JA TULOSTUSASETUKSET... 1 Esikatselu ja tulostaminen... 1 Reunuksien määrittäminen, keskittäminen... 2 Ylä- ja

Lisätiedot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot HTML-kielen alkeet Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot ovat tavallisia tekstitiedostoja, jotka selain tulkkaa

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

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

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

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

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

Verkkosivujenulkoasu

Verkkosivujenulkoasu Verkkosivujenulkoasu ulkoasu (CSS) WWW-sivujen ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Aleksi O Connor DI Pia Tukkinen laitos Mediatekniikan Mediatekniikan

Lisätiedot

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN

Lisätiedot

Jenniina Sutinen WWW-SIVUT TERVAPARTIO RY:LLE

Jenniina Sutinen WWW-SIVUT TERVAPARTIO RY:LLE Jenniina Sutinen WWW-SIVUT TERVAPARTIO RY:LLE WWW-SIVUT TERVAPARTIO RY:LLE Jenniina Sutinen Jenniina Sutinen Opinnäytetyö Kevät 2014 Tietotekniikan koulutusohjelma Oulun ammattikorkeakoulu TIIVISTELMÄ

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

Aine Määrä % happi hiili vety typpi ,6 kalsium ,4 fosfori 780 1,1

Aine Määrä % happi hiili vety typpi ,6 kalsium ,4 fosfori 780 1,1 1 Taulukot Aine Määrä % happi 43000 61 hiili 16000 23 vety 7000 10 typpi 1800 2,6 kalsium 1000 1,4 fosfori 780 1,1 SI-yksikkö Suure Nimi Tunnus pituus metri m massa kilogramma kg aika sekunti s sähkövirta

Lisätiedot

JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096

JWT 2017 luento 2. to klo Aulikki Hyrskykari PinniB1096 JWT 2017 luento 2 to 10.3.2016 klo 12-14 Aulikki Hyrskykari PinniB1096 1 Edellinen luento o Kurssin sisältö ja suoritus, Web terminologiaa, HTML-kehitys, HTMLkertausta ja julkaisu shell.sis-palvelimella,

Lisätiedot

H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet

H6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet H6: Tehtävänanto Taulukkolaskennan perusharjoitus Ennen kuin aloitat harjoituksen teon, lue siihen liittyvä taustamateriaali. Se kannattaa käydä läpi kokeilemalla samalla siinä annetut esimerkit käyttämässäsi

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

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

Aine Määrä % happi 43000 61 hiili 16000 23 vety 7000 10 typpi 1800 2,6 kalsium 1000 1,4 fosfori 780 1,1

Aine Määrä % happi 43000 61 hiili 16000 23 vety 7000 10 typpi 1800 2,6 kalsium 1000 1,4 fosfori 780 1,1 Taulukot Aine Määrä % happi 43000 61 hiili 16000 23 vety 7000 10 typpi 1800 2,6 kalsium 1000 1,4 fosfori 780 1,1 SI-yksikkö Suure Nimi Tunnus pituus metri m massa kilogramma kg aika sekunti s sähkövirta

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

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut

1 (14) Ohje. Ohje. GTK-wiki. Geologian tutkimuskeskus, Verkkosivustopalvelut 1 (14) GTK-wiki 2 (14) Sisällysluettelo 1. Wikin ylläpito... 3 1.1. Wiki-artikkelin muokkaus... 3 1.2. Wiki-artikkelin lisääminen... 3 2. Wiki-toiminnot... 4 2.1. Ristiinlinkitys... 4 2.2. Tekstin muotoilu...

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

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Pinja Hokkanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

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

Luento 2: Tulostusprimitiivit

Luento 2: Tulostusprimitiivit Tietokonegrafiikan perusteet T-111.4300 3 op Luento : Tulostusprimitiivit Lauri Savioja 11/06 D primitiivit / 1 Sisältö Mallintamisen alkeita Perusprimitiivit (GKS) attribuutteineen Näyttömuisti D primitiivit

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

1 Funktiot, suurin (max), pienin (min) ja keskiarvo

1 Funktiot, suurin (max), pienin (min) ja keskiarvo 1 Funktiot, suurin (max), pienin (min) ja keskiarvo 1. Avaa uusi työkirja 2. Tallenna työkirja nimellä perusfunktiot. 3. Kirjoita seuraava taulukko 4. Muista taulukon kirjoitusjärjestys - Ensin kirjoitetaan

Lisätiedot

Eeva Haataja

Eeva Haataja Eeva Haataja 17.03.2014 1230255 Kotitehtävä 1 Graafiset käyttöliittymät http://users.metropolia.fi/~eevaih/graaf/hw1/hw1.html HW1.html

Lisätiedot

CSS - tekstit. Tyylisivut

CSS - tekstit. Tyylisivut CSS - tekstit Sisällys: Tyylien käyttö Tekstit: Fontit, värit, korostukset Tasaus, välistykset ICT01D 28.11.2005 Elina Ulpovaara Tyylisivut Tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on

Lisätiedot

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016 Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016 1. Tunnus 1.1 Markkinointitunnus Käytetään esimerkiksi TYYn viestinnässä, esitteissä, oppaissa, julisteissa, markkinointitavaroissa, sosiaalisessa

Lisätiedot

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia XSL:n muotoiluoliot "Formatting objects" (FO) muotoiluolioita, esim. lohko, kirjainmerkki, taulukon solu, (FO:n elementtejä) muotoiluominaisuuksia, esim. kehyksen leveys, kirjasinkoko, (FO:n elementtien

Lisätiedot

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3. HTML:n perusteet Jari Sarja / Otavan Opisto 2012 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä 1 11. Sivuston taittaminen HTML:n avulla Sivuston taittaminen tarkoittaa

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

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

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Antti Tolppanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Lanuti.fi Lapin nuorisotiedotus. TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi

Lanuti.fi Lapin nuorisotiedotus. TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi Lanuti.fi 2015 Lapin nuorisotiedotus TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, 02150 Espoo Teknotie 14 16, 96930 Napapiiri, Rovaniemi Y-tunnus 1008465-8 www.tietotalo.fi Päivämäärä Versio Kuvaus

Lisätiedot

http://www.microsoft.com/expression/

http://www.microsoft.com/expression/ Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää

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

Java layoutit. Juha Järvensivu juha.jarvensivu@tut.fi 2007

Java layoutit. Juha Järvensivu juha.jarvensivu@tut.fi 2007 Java layoutit Juha Järvensivu juha.jarvensivu@tut.fi 2007 Layout Container Container LayoutManager Component Component Component Komponentin koko minimikoko setminumumsize(dimension d) Useimmat layoutmanagerit

Lisätiedot

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.

Lisätiedot

TYYLIT. Word Tyylit

TYYLIT. Word Tyylit Word 2013 Tyylit TYYLIT TYYLIT... 1 Pikatyylien käyttäminen... 1 Tyylimuotoilun poistaminen... 2 Tyylin muokkaaminen... 2 Uuden tyylin luominen muotoillusta tekstistä... 2 Uuden tyylin luominen valintataulussa...

Lisätiedot

HAAGA-HELIA ammattikorkeakoulu Ohje 1 (5) Raportin tekeminen

HAAGA-HELIA ammattikorkeakoulu Ohje 1 (5) Raportin tekeminen HAAGA-HELIA ammattikorkeakoulu Ohje 1 (5) RAPORTIN TMS. PITKÄN ASIAKIRJAN TEKEMINEN WORD:LLÄ Raportin reunukset ja sarkaimet Raportin kirjoittaminen Laita reunukset: Page Layout, Margins (Sivun asettelu,

Lisätiedot

SISÄLTÖ. FrontPage 2000 perusteet 1 FRONTPAGE KÄYTTÖLIITTYMÄ...3

SISÄLTÖ. FrontPage 2000 perusteet 1 FRONTPAGE KÄYTTÖLIITTYMÄ...3 FrontPage 2000 perusteet 1 SISÄLTÖ FRONTPAGE KÄYTTÖLIITTYMÄ...3 SIVUSTON ELI WEBIN LUOMINEN...3 Näkymät...4 Sivunäkymä (Page)...4 Kansionäkymä (Folders)...4 Raporttinäkymä (Reports)...4 Siirtymisnäkymä

Lisätiedot

Johdatus L A TEXiin. 8. Taulukot ja kuvat. Matemaattisten tieteiden laitos

Johdatus L A TEXiin. 8. Taulukot ja kuvat. Matemaattisten tieteiden laitos Johdatus L A TEXiin 8. Taulukot ja kuvat Matemaattisten tieteiden laitos Taulukot I Taulukkomaiset rakenteet tehdään ympäristöllä tabular Ympäristön argumentiksi annetaan sarakemäärittely, joka on kirjaimista

Lisätiedot

KAPPALEMUOTOILUT. Word Kappalemuotoilut

KAPPALEMUOTOILUT. Word Kappalemuotoilut Word 2013 Kappalemuotoilut KAPPALEMUOTOILUT KAPPALEMUOTOILUT... 1 Tekstin tasaaminen... 1 Sisentäminen... 1 Koko kappaleen sisentäminen... 2 Sisennyksen poistaminen... 2 Riippuva sisennys (sivuotsikko)...

Lisätiedot

1 Opinnäytetyön graafiset ohjeet. 2 Sivun asetukset. 3 Sivunumerointi. 4 Otsikot

1 Opinnäytetyön graafiset ohjeet. 2 Sivun asetukset. 3 Sivunumerointi. 4 Otsikot 1 1 Opinnäytetyön graafiset ohjeet Metropolia Ammattikorkeakoulun opinnäytetöissä noudatetaan seuraavia graafisia ohjeita. Graafiset ohjeet on tehty Metropolian opinnäytetyöryhmässä. Näiden graafisten

Lisätiedot

TAULUKON ULKONÄÖN MUOTOILU

TAULUKON ULKONÄÖN MUOTOILU Excel 2013 Taulukon ulkonäön muotoilu Sisällysluettelo TAULUKON ULKONÄÖN MUOTOILU TAULUKON ULKONÄÖN MUOTOILU... 1 Lukujen esitystavan muotoilu... 1 Lukujen muotoilu komennolla... 1 Muotoiluissa käytettäviä

Lisätiedot