XHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola
|
|
- Petri Hiltunen
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola
2 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 (unordered list) 10.Järjestetty lista (ordered list) 11.Määritelmälista (definiton list) 12.CSS ja listat: display & list-style-type 13.CSS ja listat: list-style-image 14.CSS ja listat: list-style-position & list-style 15. Taulukko table 16. Table-elementti ja sen attribuutit 17. Table-elementin alielementit 18. Esimerkki 19.tr, th ja td elementit 20. Esimerkki 21.Taulukon sijoittelu sivulla ja taulukon leveys 22.Solun sisällön vaaka- ja pystysuora tasaus 23. Taulukon ja solujen reunukset 24. Taulukon reunaviivat kiinni toisiinsa 25. Tyhjää tilaa solujen sisälle 26. Esimerkki 2
3 Linkki (anchor) Linkki tehdään a-elementillä, joka on inline-elementti eli et voi sijoittaa linkkiä suoraan body-elementin alle vaan sijoita linkki jonkun lohkoelementin sisälle. Linkin kohde ilmoitetaan href-attribuutilla. Absoluuttinen linkki HAAGA-HELIAn pääsivulle: <a href=" HAAGA-HELIAn sivuille</a> linkin kohde url-osoitteena linkkiteksti, joka näkyy xhtmlsivulla mailto-linkki avaa sähköpostiohjelman ja linkin kohteeksi laitetaan sähköpostiosoite: <a viesti Annalle</a> 3
4 Suhteellinen linkki Linkki saman kansion tiedostoon: <a href="kuvat.html >Katso kuvia</a> Linkki alikansion tiedostoon: <a href="harrastukset/tanssi.html">tanssiharrastus</a> Linkki tiedostoon, joka sijaitsee hakemistossa yksi ylöspäin: <a href="../uutiset.html">uutiset</a> Kuva toimii linkkinä: <a href= index.html"><img src= logo.gif alt= yrityksen logo /></a> Voit linkittää myös muihin kuin xhtml-tiedostoihin. Esim. linkki kuvaan: <a href="maisema.jpg">maisema rannalta</a> Linkki word-dokumenttiin: <a href="ohje.doc">kameran käyttöohje</a> 4
5 Sivun sisäinen linkki Linkin kohde eli ankkuri sijaitsee samalla sivulla, jolloin linkissä kohde merkitään #kohdesana: <a href="#kappale2">kappale 2: Luokat</a> Linkin kohde voi sijaita myös toisella sivulla, jolloin siirrytään toiselle sivulle ankkurin osoittamaan kohtaan: <a href="mallit.html/#kappale2">kappale 2: Luokat</a> Ankkurin paikka sivulla merkitään a-elementillä käyttäen name-attribuuttia (vain xhtml 1.0:ssa). Esimerkissä viitataan sivulla olevaan otsikkoon: <h3><a name="kappale2 >Kappale 2: Luokat</a></h3> Ankkuri voidaan merkitä myös liittämällä kohteena olevaan elementtiin idattribuutti, mikä on suositeltavaa ja xhtml 1.1.:ssä ainoa tapa tehdä sivun sisäiseen linkkiin ankkuri: <h3 id="kappale2">kappale 2: Luokat</h3> 5
6 CSS ja linkit Pseudoluokkaa eli näennäisluokkaa käytetään linkkien tyylimäärittelyssä seuraavasti: a:link a:visited a:active a:hover linkki käyty linkki aktiivinen linkki, eri selaimilla erilainen tulkinta, esim: Opera: linkki, jonka päällä hiiri on alhaalla Mozilla: linkki, jota on juuri klikattu IE: linkki, jossa juuri on käyty hiiri linkin päällä, toimii uusimmissa selaimissa myös muilla elementeillä esim. p CSS-esimerkki: a:link {color:navy} a:active {color:#cc0033} a:visited {color:#9933ff} a:hover {color:lime; background:yellow; border:solid; text-decoration:none} 6
7 Tehtävä Miten teet seuraavat linkit: yritys-kansion index.html:stä linkki info.html-dokumenttiin? yritys-kansion tuotteet.html:stä linkki tuotteet-kansion osat.html-dokumenttiin? public_html-kansion index.html:stä linkki tuotteet-kansion oppaat.html:ään? yritys-kansion index.html:stä linkki public_html -kansiossa olevaan index.html-dokumenttiin? tuotteet-kansiossa olevasta oppaat.html:stä linkki public_html kansiossa olevaan index.html-dokumenttiin? yritys-kansion index.html:stä linkki kuvat-kansion logo.gif-kuvaan? tuotteet-kansion osat.html:stä linkki kuvat kansion mainos.jpgkuvaan? 7
8 Listat eli luettelot listaelementit ovat lohkoelementtejä: lista ja listan alkiot alkavat uudelta riviltä listan jälkeen tuleva elementti alkaa uudelta riviltä lista-alkioon voit sijoittaa tekstiä sekä lohko- ja inline-elementtejä. listan alkuun ja loppuun selain jättää tyhjää tilaa, useimmat selaimet noin rivin verran. lista-alkioiden välissä tyhjää tilaa ei ole listan vasemmassa reunassa on tyhjää tilaa tyhjää tilaa listan ja alkioiden ympärillä voidaan lisätä ja poistaa csstyylimäärittelyillä muokkaamalla margin- ja padding-arvoja <p>linkkejä kouluun:</p> <ul> <li><a href=" amk</a></li> <li><a href=" </ul> 8
9 Järjestämätön lista (unordered list) Luetelmamerkillä koottu lista, jonka jäsenet ovat toisiinsa nähden saman arvoisia lista-elementtinä toimii ul-elementti ja sen sisällä lista-alkiot merkitään lielementillä (list item), esim. <ul> <li>maito</li> <li>mehu</li> <li>kahvi</li> </ul> css-sääntö lista-merkki list-style-type: circle list-style-type: disc list-style-type: square 9
10 Järjestetty lista (ordered list) Käytetään kun halutaan korostaa lista-alkioiden järjestystä (esim. ohjeet) lista-elementtinä toimii ol-elementti ja sen sisällä lista-alkiot merkitään lielementillä, esim. css-sääntö numerointi <ol> list-style-type:upper-alpha A, B, C, <li>avaa editori</li> list-style-type:upper-latin <li>kirjoita koodi</li> <li>tallenna</li> list-style-type:lower-alpha a, b, c, </ol> list-style-type:lower-latin list-style-type:upper-roman I, II, III, 1. avaa editori 2. kirjoita koodi 3. tallenna list-style-type:lower-roman i, ii, iii, list-style-type:decimal 1, 2, 3,... list-style-type:decimalleading-zero list-style-type:lower-greek list-style-type:armenian list-style-type:georgian 01,02,03, α,β,γ 10
11 Määritelmälista (definiton list) dl-elementillä (Definition List) kootaan joukko määritelmiä listaksi dt-elementillä (Denition Term) lisätään listaan määriteltäviä termejä dd-elementillä (Definition Description) lisätään listaan termin selitys <dl> <dt>xhtml <dd> Extensible Hypertext Markup Language </dd> </dt> <dt>css <dd>cascading Style Sheet</dd> </dt> </dl> 11
12 CSS ja listat: display & list-style-type display:list-item oletuksena ul- ja ol-elementille halutessa voidaan laittaa myös muille elementeille esim. dt, dd tai vaikkapa p-elementille, jolloin niitä voidaan käsitellä listan tavoin display:inline käytettäessä listaelementit tulevat samalle riville peräkkäin list-style-type kertoo listan merkin (periytyy lapsielementeille) ja sopii kaikille elementeille, joille on määritelty display:list-item li-elementille CSS:llä annettu tekstin väri vaikuttaa myös listamerkkiin, mutta ei taustaväriin vaan taustaväri tulee ul- tai ol-elementin vanhempi-elementiltä 12
13 CSS ja listat: list-style-image list-style-image määritellään listamerkin paikalle haluttu kuva esim. ul {list-style-image:url(logo.gif)} testaa eri selaimissa selaimet sijoittavat kuvan eri korkeuksille ja eri paikkaan tekstiin nähden lisää tyhjää tilaa ainakin kuvan oikealle puolelle, jotta kuva mahtuu kunnolla Läpinäkyvä gif-kuva sulautuu parhaiten taustaan 13
14 CSS ja listat: list-style-position & list-style list-style-position:lla määritellään listamerkin sijoitus tekstiin nähden list-style-position:outside list-style-position:inside list-style Lyhennemerkintä, jolla voidaan elementille antaa yhdellä kertaa seuraavat ominaisuudet: list-style-type list-style-image list-style-position Käytännössä kannattaa antaa kaikki tarvittavat ominaisuudet, jotta toimisi oikein eri selaimilla. 14
15 Taulukko - table Www-sivuilla taulukoita käytettään taulukkomuotoisen tiedon esittämiseen asemointiin (sivun taittamiseen) www-sivujen taulukoilla ei ole taulukkolaskennallisia ominaisuuksia (vrt. excel) www-sivujen taulukoilla siis vain esitetään tietoa taulukkomuodossa Taulukko koostuu riveista (rows), jotka on jaettu soluilla sarakkeisin (colums) 15
16 Table-elementti ja sen attribuutit Xhtml-koodissa taulukko tehdään table-elementin sisään. Table-elementti on lohkoelementti. Table-elementin attribuutit ovat valinnaisia: <table> </table> border Reunan leveyden arvo pikseleinä (oletus 0) cellpadding cellspacing frame rules summary Sisällön ja reunan välinen tila Solujen välinen tila Mitkä taulukon reunuksista näkyvät, arvona: void (ei reunusta), above (ylä), below (ala), hsides (vasen ja oikea), lhs (vasen), hs (oikea), vsides (ylä- ja ala), box (kaikki) tai border (kaikki). Mitkä reunat näkyvät, arvona: none (ei reunusta), groups (rivi- ja sarakeryhmien välit), rows (rivien välit), cols (sarakkeiden välit) tai all (kaikki). Yhteenveto taulukon tarkoituksta width Taulukon leveys 16
17 Table-elementin alielementit table-elementille voidaan lisätä seuraavia alielementtejä annetussa järjestyksessä: 1. caption: seloste, jolla voidaan korvata summary-attribuutti, ei pakollinen. 2. col tai colgroup: sarakkeiden ryhmittely, ei ole pakollinen. Colgroup-elementin alielementtinä voi olla vain col-elementtejä. Col-elementti on tyhjä elementti, jonka tärkeimmät attribuutit ovat span (numero kertoo ryhmän sarakkeiden määrän, oletus 1) ja width (oletusleveys ryhmän sarakkeelle). 3. thead: määrittelee taulukon kuvailevista otsikkoriveistä (sarakeotsikot) ryhmän esim. tulostettaessa ylätunnisteeseen. Taulukossa saa olla vain yksi theadelementti. Alielementteinä tr-elementtejä. Ei ole pakollinen. 4. tfood: määrittelee taulukon kuvailevista otsikkoriveistä (sarakesummat) ryhmän, sijoitus taulukon lopussa esim. tulostettaessa alatunnisteeseen. Taulukossa saa olla vain yksi tfood-elementti. Alielementteinä tr-elementtejä. Ei ole pakollinen. 5. tbody: määrittelee ryhmän taulukon tietorivejä, alielementteinä tr-elementtejä, vähintään yksi tbody tai tr-elementti oltava taulukossa 6. tr: sisältörivi, alielementteinä th- tai td-elementtejä, vähintään yksi tbody tai tr-elementti oltava taulukossa. 17
18 Esimerkki <table border="1" summary= lasten iät"> <caption>ikä</caption> <thead> <tr><td>nimi</td><td>ikä</td></tr> </thead> <tfoot> <tr><td>nimet</td><td>iät</td></tr> </tfoot> <tbody> <tr><td>anna</td><td>5</td></tr> <tr><td>joel</td><td>10</td></tr> <tr><td>kaisa</td><td>9</td></tr> <tr><td>ninni</td><td>12</td></tr> <tr><td>timi</td><td>14</td></tr> </tbody> </table> 18
19 tr, th ja td -elementit Taulukko koostuu siis riveistä ja sarakkeissa. Rivit muodostetaan tr-elementeillä. Rivien sisällä on alielementit: th: otsikkosolu, lihavoitu- ja keskitetty teksti td: normaali solu td ja th-elementtien sisälle voit sijoittaa tekstiä sekä lohko- ja inlineelementtejä. td- ja th-elementtien tärkeimmät attribuutit ovat: colspan: kertoo monelle sarakkeelle solu laajenee <td colspan= 5 >Viisi saraketta</td> rowspan: kertoo monelle riville solu laajenee <td rowspan= 3 >Kolme riviä</td> 19
20 Esimerkki <table border="1"> <tr> <th colspan="3">puhelinmuistio</th> </tr> <tr> <th>sukunimi</th> <th>etunimi</th> <th>puhelin</th> </tr> <tr> <td rowspan="2">mallikas</td> <td>anna</td> <td> </td> </tr> <tr> <td>mikko</td> <td> </td> </tr> </table> 20
21 Taulukon sijoittelu sivulla ja taulukon leveys Taulukon paikka sivulla: Voit keskittää taulukon www-sivulle marginaalin avulla: table {margin-left:auto; margin-right:auto;} Voit sijoittaa taulukon tekstin viereen float-ominaisuudella table {float:right; width:300px; margin-left:10px;} Taulukolle annetaan yllä minimileveys. Jos taulukko on suurempi kasvaa taulukon leveys automaattisesti. Selain pyrkii aina asettamaan taulukon leveyden mahdollisemman pieneksi jos minimileveyttä ei ole annettu. 21
22 Solun sisällön vaaka- ja pystysuora tasaus text-align -ominaisuus ei vaikuta taulukon sijaintiin vaan ainoastaa taulukon solujen sisällön tasaukseen. Oletuksena th-solut ovat keskitettyjä ja td-soluissa on vasemman reunan tasaus. Seuraava tasaa th-solut vasemmalle ja td-solut oikealle: th {text-align:left;} td {text-align:right;} vertical-align -ominaisuudella annetaan solun sisällön pystysuoran sijainnin solun sisällä ja sen arvot voivat olla: baseline bottom middle top Solun sisällön 1. perusrivi on samassa tasossa kuin muissa taulukon soluissa Solun sisältö solun alareunassa Solun sisältö solun keskellä (oletusarvo) Solun sisältö solun yläreunassa 22
23 Taulukon ja solujen reunukset Table-elementillä voi olla border-attribuutti, joka kertoo numerolla sekä taulukon reunuksen että taulukon solujen reunuksen vahvuuden. Oletuksena border on 0, jolloin taulukon ja solujen reunat eivät tule näkyviin. Taulukon reunukset voidaan määrittää myös CSS:n avulla. Tällöin voidaan asettaa border-ominaisuusilla reunuksen paksuus, tyyli, väri ym. ominaisuuksia erikseen taulukon reunukselle, solujen reunuksille ja taulukon otsikolle eli captionelementille. table {border: medium groove #009999;} td,th,caption {border: thin solid #666666;} 23
24 Taulukon reunaviivat kiinni toisiinsa border-collapse ominaisuus liittää collapse-arvolla taulukon reunaviivat toisiinsa niin, ettei viivojen väliin jää tyhjää tilaa, seuraavien sääntöjen mukaan: Jos toinen reunaviivoista on määritelty hidden-tyyppiseksi, tulee lopputuloksena reunaviivasta hidden eli se ei tule näkyviin. Jos reunaviivat ovat eri levyiset tulee reunaviivasta leveämmän mukainen Jos reunaviivat ovat erityyppiset, tulee lopputuloksena se reunaviivatyyli, joka on ensimmäisenä seuraavassa listassa: double, solid, dashed, dotted, ridge, outset, groove, inset, none. Jos reunaviivojen väri on erilainen, tulee lopputuloksena väri siitä määritellystä elementistä, joka on ensimmäisenä seuraavassa listassa: solu, rivi, riviryhmä, sarake, sarakeryhmä, taulukko. Lisätään edellisen sivun esimerkkiin: table {border-collapse:collapse;} 24
25 Tyhjää tilaa solujen sisälle Jos käytät taulukossa reunuksia kannattaa lisätä tyhjää tilaa solujen sisälle, jotta sisältö ei ottaisi reunaan kiinni. Lisää tyhjää tilaa sisällön ympärille padding-arvolla. table {border: medium groove #009999;} td,th,caption {border: thin solid #666666; padding:5px;} 25
26 Esimerkki <table border="1" style="border-collapse:collapse"> <colgroup> <col style="background-color:yellow; width:50%"/> <col span="2" style="color:green; text-align:right; border:solid"/> </colgroup> <tr> <td>valtio</td> <td>väkiluku</td> <td>pinta-ala</td> </tr> <tr> <td>suomi</td> <td> </td> <td> </td> </tr> <tr> <td>islanti</td> <td> </td> <td> </td> </tr> </table> IE 7: Firefox 2: Col-elementin ominaisuuksia tuetaan eri selaimilla erilailla: - background-color ja width ok - border onnistuu jos taulukolle on määritelty border-collapse (ei IE) - color ja text-align vain IE:llä Lähteet: Korpela: CSS verkkosivujen muotoilussa 26
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ätiedotListat 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ätiedotTaulukot. 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ätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotHTML-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ätiedotKuva 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ätiedotTee 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ätiedot5 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ätiedotCSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
LisätiedotEntiteetit 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ätiedotH 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ätiedotH 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ätiedotUlkopuolisen 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ätiedotProseduraalinen 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ätiedotCSS 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ätiedotCSS-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ätiedotNavigointi 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ätiedotCode 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ätiedotAsemointi. 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ätiedotKuvat 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ätiedotHTML & 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ätiedotUpdateIT 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ätiedotKotisivuohjeet. 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ätiedotWritten 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ätiedotCSS 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ätiedotNavigointi 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ätiedot1. 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ätiedotXHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),
LisätiedotCSS - 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ätiedotXHTML - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim.
XHTML - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Taustaa Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti tieto halutaan esittää samalla tavoin kuin se on tallennettu
LisätiedotKyläsivujen InfoWeb-ohje
Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina
LisätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedothttp://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ätiedotUlkoasun 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ätiedot1 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ätiedotNavigointi 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ätiedotCSS. 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ätiedot6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)
6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren
Lisätiedot1 (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ätiedotvalitsin 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ätiedotDigitaalisen 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ätiedotDigitaalisen 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ätiedotHTML 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ätiedotCSS-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ätiedotEditorin 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ätiedotKÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
LisätiedotHTML: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ätiedotArtikkelien 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ätiedotTaulukot. 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ätiedotez Publish ja Toolbar yleisohjeet
ez Publish ja Toolbar yleisohjeet SISÄLLYSLUETTELO: 1. Perustyökalut 2 1.1 Sivupohjan valinta ja sivun lisäys 2 1.2 Sivun muokkaus, siirto ja poisto 2 1.3 Puurakenne, aakkospainike, TR-painike ja F-painike
Lisätiedotselector { 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ätiedotCascading 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ätiedotTAULUKKO, 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ätiedotDigitaalisen 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ätiedotTAULUKOINTI. 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ätiedotVerkkosivut 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ätiedotUutiskirjesovelluksen käyttöohje
Uutiskirjesovelluksen 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 2 Sisällys Johdanto... 1 Päänavigointi...
LisätiedotDigitaalisen 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ätiedotInternetsivujen 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ätiedotTutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.
LisätiedotAT4-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ätiedotDigitaalisen 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ätiedotSivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)
1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 4 2. Ruudukkopohjainen taitto... 5 2.1. 960 Grid System... 5 2.2.
Lisätiedot05/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ätiedot05/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ätiedotDigitaalisen 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ätiedotKopseptisuunnittelu Verkkomultimedia ICT1tn004
Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat
LisätiedotWWW-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ätiedot1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
LisätiedotHTML 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ätiedotKotisivut helposti - osa 4
Kotisivut helposti - osa 4 Artikkelisarjan kolmessa ensimmäisessä osassa esiteltiin Internet-siviuihin sekä XHTML- ja CSS-ohjelmointikieliin liittyviä perusteita. Tässä osassa kerrotaan, miten aiemmin
LisätiedotVERKKOVELHO-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ätiedotVIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
LisätiedotVäitöskirja -mallipohja
JYVÄSKYLÄN YLIOPISTO Väitöskirja -mallipohja Word 2007/2010 IT-palvelut hannele.rajaniemi@jyu.fi https://koppa.jyu.fi/avoimet/thk/vaitoskirja sovellustuki@jyu.fi Sisältö Miten toimii väitöskirja/asiakirjamallipohja?
LisätiedotJohdatus L A TEXiin. 7. Taulukot ja kuvat. Dept. of Mathematical Sciences
Johdatus L A TEXiin 7. Taulukot ja kuvat Dept. of Mathematical Sciences Taulukot I Taulukkomaiset rakenteet tehdään ympäristöllä tabular Ympäristön argumentiksi annetaan sarakemäärittely, joka on kirjaimista
LisätiedotTärkeimmät toiminnot. Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta. Tärkeimmät toiminnot jatkuu...
Tärkeimmät toiminnot Kertausta ja uusia toimintoja Wordistä sekä tiedostonhallinnasta Kun hiiren jättää kuvakkeen päälle vähäksi ajaksi Word selittää toiminnon Avaa tiedosto Tallenna Kumoa, nuolesta aiemmat
LisätiedotYlläpitoalue - Etusivu
Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut
LisätiedotTämä dokumentti on tehty pohjaan Muistiopohja_logolla.ott
Muistio 1 (5) Asiakirjapohjien dokumentaatio Asiakirjapohjien tiedostot Tämä dokumentti kuvaa joukon SFS 2487 -standardin mukaisia OpenOfficeasiakirjapohjia. Pohjat on laatinut Martti Karjalainen oikeusministeriön
Lisätiedotxhtml+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ätiedotAine 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ätiedotEnsin klikkaa käynnistä-valikkoa ja sieltä Kaikki ohjelmat valikosta kaikki ohjelmat
Microsoft Office 2010 löytyy tietokoneen käynnistä-valikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,
LisätiedotTekstinkäsittelyn jatkokurssi
TAMPEREEN KAUPUNKI Kasvatus- ja opetustoimiala @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Tekstinkäsittelyn jatkokurssi Word Error! Not a valid link. Sisällys 1 Tekstin asettelu 1 1.1 Sarkaimet 1 1.2 Sivun
LisätiedotLisä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ätiedotTIEDEJUTTUKURSSI 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ätiedotSen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat
Microsoft Office 2010 löytyy tietokoneen käynnistävalikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,
LisätiedotKatsotaan 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ätiedotExcel Perusteet. 2005 Päivi Vartiainen 1
Excel Perusteet 2005 Päivi Vartiainen 1 SISÄLLYS 1 Excel peruskäyttö... 3 2 Fonttikoon vaihtaminen koko taulukkoon... 3 3 Sarakkeen ja rivin lisäys... 4 4 Solun sisällön ja kaavojen kopioiminen... 5 5
LisätiedotKUVAT. 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ätiedotKotisivujen 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ätiedotAulikki 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ätiedot1 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ätiedotTaulukkolaskennan perusteet Taulukkolaskentaohjelmat
Taulukkolaskennan perusteet Taulukkolaskentaohjelmat MS Excel ja LO Calc H6: Lomakkeen solujen visuaalisten ja sisältöominaisuuksien käsittely ja soluviittausten perusteet Taulukkolaskennan perusteita
LisätiedotNvu 1.0. by Sami Mäkinen
Nvu 1.0 by Sami Mäkinen Sisällysluettelo HTML... 1 Yleistä Nvusta... 3 Apua... 3 Sivun ja sivuston rakentamisesta... 3 Tiedostojen nimeämisestä... 3 Uuden sivun aloittaminen... 3 Näkymät... 3 Sivun tallentaminen
LisätiedotTEKSTINKÄSITTELY Aloitusharjoitus
TEKSTINKÄSITTELY Aloitusharjoitus Kirjoita teksti, jossa kerrot lyhyesti, max. ½ sivua, mitä kaikkea olet tietokoneiden kanssa tähän mennessä puuhastellut. Mitä jo osaat ja mitä tarvitsisi vielä oppia?
LisätiedotH6: 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/ * PROSESSORIN C-KIELINEN OHJELMA */
/ * PROSESSORIN C-KIELINEN OHJELMA */ #define AVR_ATtiny2313 #define F_CPU 12000000UL #include #include #include void InitUART (unsigned char baudrate); unsigned
LisätiedotTaulukkolaskennan perusteet Taulukkolaskentaohjelmat
Taulukkolaskennan perusteet Taulukkolaskentaohjelmat MS Excel ja LO Calc H6: Lomakkeen solujen visuaalisten ja sisältöominaisuuksien käsittely ja soluviittausten perusteet Taulukkolaskennan perusteita
LisätiedotUpdateIT 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ätiedotProseduraalinen 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