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

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

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

Transkriptio

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

2 Luettelot Luetteloelementillä esitetään eri tyyppisiä luetteloja ja listoja Luetteloelementeille on ominaista: luettelo ja luettelorivit alkavat uudelta riviltä luettelon jälkeen tuleva elementti alkaa uudelta riviltä Luettelon alkuun ja loppuun selain jättää tyhjää tilaa, useimmat selaimet noin rivin verran. Luettelorivien välissä tyhjää tilaa ei ole Luettelon vasemmassa reunassa on tyhjää tilaa Tyhjää tilaa luettelon ja luettelorivien ympärillä voidaan lisätä ja poistaa css-tyylimäärittelyillä muokkaamalla margin- ja padding-arvoja 2

3 Järjestämätön luettelo (unordered list) Luettelomerkillä koottu luettelo, jonka jäsenet ovat toisiinsa nähden saman arvoisia luettelo-elementtinä toimii ul-elementti ja sen sisällä luettelorivit merkitään li-elementillä (list item). Li-elementti voidaan kirjoittaa lopputagilla tai ilman. <ul> <li>maito <li>mehu <li>kahvi </ul> css-sääntö lista-merkki list-style-type: circle list-style-type: disc list-style-type: square 3

4 Järjestetty luettelo (ordered list) Käytetään kun halutaan korostaa luettelo-alkioiden järjestystä (esim. ohjeet) luettelo-elementtinä toimii ol-elementti ja sen alielementtinä li-elementti. <ol> <li>avaa editori <li>kirjoita koodi <li>tallenna </ol> 1. avaa editori 2. kirjoita koodi 3. tallenna 4

5 Järjestetty luettelo (ordered list) Järjestetyn luettelon luettelomerkki CSS:ssä: css-sääntö numerointi list-style-type:upper-alpha A, B, C, list-style-type:lower-alpha a, b, c, list-style-type:upper-roman I, II, III, list-style-type:lower-roman i, ii, iii, list-style-type:decimal 1, 2, 3,... 5

6 Järjestetty luettelo (ordered list) ol-elementin attribuutteina ovat globaalien lisäksi: reserved: boolean-attribuutti, joka kääntää listaelementin rivien järjestyksen laskevaksi, esim. 3, 2, 1. Heikko selaintuki. start: attribuutin arvo kertoo listaelementin 1. rivin listamerkin arvon. type: mime-tyyppi Kun li-elementti on ol-elementin lapsielementtinä, voi li-elementillä olla value-attribuutti, jonka arvo on luku. Sijoitukset: <ol start="3"> <li>anna Malli <li value="7">esa Merkki <li>matti Majava </ol> 6

7 Määritelmäluettelo (definiton list) dl-elementillä (Definition List) kootaan joukko määritelmiä luetteloksi dt-elementillä (Denition Term) lisätään luetteloon määriteltäviä termejä dd-elementillä (Definition Description) lisätään luetteloon termin selitys <dl> <dt>xhtml</dt> <dd> Extensible Hypertext Markup Language </dd> <dt>css</dt> <dd>cascading Style Sheet</dd> </dl> 7

8 CSS ja luettelot: display & list-style-type Display display:list-item oletuksena ul- ja ol-elementille halutessa voidaan laittaa myös muille elementeille esim. p-elementille, jolloin niitä voidaan käsitellä luettelon tavoin display:inline käytettäessä luetteloelementit tulevat samalle riville peräkkäin display:block Luetteloelementit esitetään lohkoelementteinä, joille voit määrittää mm. leveyden ja kellutuksen float:n avulla. list-style-type kertoo luettelon 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 luettelomerkkiin, mutta ei taustaväriin. Taustaväri tulee ul- tai ol-elementin vanhempielementiltä. 8

9 CSS ja listat: list-style-image list-style-image määritellään luettelomerkin paikalle haluttu kuva 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- tai png-kuva sulautuu parhaiten taustaan 9

10 CSS ja luettelot: list-style-position & list-style list-style-position määritellään luettelomerkin 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 10

11 Luettelomerkki taustakuvana Voit liittää oman luettelomerkin myös taustakuvana: ul li {background-image:url(merkki.png); background-repeat:no-repeat; background-position:0px 6px; padding-left:20px;} Sisältö: <ul> <li>1. luku <li>2. luku <li>3. luku </ul> 11

12 Linkki (anchor) Linkki tehdään a-elementillä. a-elementillä on globaalien attribuuttien lisäksi seuraavat attribuutit href url-osoite Kohdedokumentin arvo hreflang kielikoodi Kohdedokumentin kieli media esitysmedia Mille medialle/laitteelle dokumentti on tarkoitettu rel Alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag Nykyisen dokumentin ja linkin kohteen suhde target _blank, _parent, _self, _top Mihin linkki avataan type MIME-tyyppi Kohdedokumentin MIME-tyyppi 12

13 Absoluuttinen linkki ja mailto-linkki Absoluuttisessa linkissä kerrotaan koko url-osoite: <a href=" HAAGA-HELIAn sivuille</a> linkin kohde url-osoitteena linkkiteksti, joka näkyy sivulla mailto-linkki avaa oletus-sähköpostiohjelman (esim. outlook) ja linkin kohteeksi laitetaan sähköpostiosoite: <a viesti Annalle</a> 13

14 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 html-tiedostoihin. Esim. linkki kuvaan: <a href="maisema.jpg">maisema rannalta</a> Linkki pdf-tiedostoon: <a href="ohje.pdf">kameran käyttöohje</a> 14

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

16 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 Firefox: 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} 16

17 Ulkoisen linkin muotoilu Sivuston ulkopuolelle menevä linkki halutaan usein muotoilla erilaiseksi kun sivuston sisäiset linkit. Ulkoisen linkin a-elementin rel-attribuutille voidaan antaa arvo external, josta voidaan päätellä linkin menevän sivuston ulkopuolelle. CSS:ssä voit viitata rel-määreeseen määriteselektorin avulla: [rel="external"] {background: url(nuoli.png) center right no-repeat; padding-right:25px;} <a href=" rel="external"> HAAGA-HELIA amk</a> 17

18 a-elementin vanhempi- ja lapsielementit Aikaisemmissa HTML4 Strict ja XHTML-versioissa a-elementti määritellään inline-elementiksi. Et voinut sijoittaa linkkiä suoraan body-elementin alle vaan linkki piti sijoittaa aina lohkoelementin sisälle. HTML5:ssa linkki-elementin voi sijoittaa suoraan body-elementin alle ja sen alielementteinä voi olla lohkotason elementtejä, esim. h1, p, section, lista, taulukko... Linkkielementin alielementtinä ei saa olla toista linkkielementtiä eikä painiketta. <a href="index.html" id="hh"> <img src="logo.gif" alt="logo"> <h1>haaga-helia amk</h1> </a> #HH {display:block; border: solid 3px blue;} Esimerkissä sekä logo että pääotsikko toimivat linkkinä pääsivulle. Linkkielementti on tekstitason elementti, joka ei aiheuta rivin vaihtoa. Esimerkissä linkki on muutettu lohkotason elementiksi ja sille on annettu kehys. 18

19 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 toisella sivulla suoraan ankkurin osoittamaan kohtaan: <a href="mallit.html/#kappale2">kappale 2: Luokat</a> Ankkuri merkitään liittämällä kohteena olevaan elementtiin id-attribuutti: <h3 id="kappale2">kappale 2: Luokat</h3> 19

20 CSS ja sivun sisäinen linkki Sivun sisäinen linkki voidaan kohdistaa kokonaiseen lohkoelementtiin Tällöin voit määritellä pseudoluokan :target, joka viittaa kohtaan, johon on viimeksi linkin avulla siirrytty. Esim. alla :target tekee reunuksen sivun sisäisen linkin kohteen ympärille :target {border: dotted 3px red;} <ul> <li><a href="#luku_1">1. luku</a> <li><a href="#luku_2">2. luku</a> <li><a href="#luku_3">3. luku</a> </ul> <div id="luku_2">veljesten nimet vanhimmasta nuorimpaan ovat: Juhani, Tuomas, Aapo, Simeoni, Timo, Lauri ja Eero. Ovat heistä Tuomas ja Aapo kaksoispari ja samoin Timo ja Lauri. Juhanin, vanhimman veljen, ikä on kaksikymmentä ja viisi vuotta, mutta Eero, nuorin heistä, on tuskin nähnyt kahdeksantoista auringon kierrosta. Ruumiin vartalo heillä on tukeva ja harteva, pituus kohtalainen, paitsi Eeron, joka vielä on kovin lyhyt. Pisin heistä kaikista on Aapo, ehkä ei suinkaan hartevin. Tämä jälkimmäinen etu ja kunnia on Tuomaan, joka oikein on kuuluisa hartioittensa levyyden tähden. Omituisuus, joka heitä kaikkia yhteisesti merkitsee, on heidän ruskea ihonsa ja kankea, hampunkarvainen tukkansa, jonka karheus etenkin Juhanilla on silmään pistävä. </div>

21 target-attribuutti target-attribuutti oli ei-suositeltavia (transtiotional) vielä HTML4- ja XHTML-suosituksissa. HTML5 hyväksyy taas target-attribuutin käytön. target-attribuutin arvo voi olla mikä merkkijono vaan. Alaviivalla alkavia target-attribuutin arvoja voi kuitenkin olla vain: _blank: avaa kohteen uuteen selainikkunaan tai välilehteen _self: nykyinen selainikkuna _parent: ylemmän tason selainikkuna _top: ylimmän tason selainikkuna (eli koko ikkuna) <a href=" target="_blank">haaga_helia amk</a> 21

22 a-elementti ilman attribuuttia Voit tehdä linkki-elementin ilman attribuutteja. Tällöin linkille varataan paikka, mutta linkki ei vie mihinkään. Käytetään usein silloin, kun navigoinnissa ollaan kyseisellä sivulla, eikä haluta sivulla olevan linkkiä itseensä. <nav> <ul> <li><a>etusivu</a> <li><a href="info.html">info</a> <li><a href="tuotteet.html">tuotteet</a> <li><a href="yhteystiedot.html">yhteystiedot</a> <li><a href="yhteydenotto.html">ota yhteyttä</a> </ul> </nav> nav li {display:block; list-style-type:none; padding:5px; margin:1px; border: solid 5px #666; width:7em; float:left; text-align:center; } nav a {text-decoration:none; color:#666; } 22

23 Sisäinen kehys - iframe-elementti Perinteisiä kehyksiä ei saa enää HTML5:ssa käyttää, vaikkakin selaimien tulee edelleen tukea niitä. Sisäistä kehystä eli iframe (inline frame) -elementtiä saa käyttää HTML5:ssa, vaikkakin aikaisemmin iframe-elementti oli ei-suositeltava (transitional) vielä HTML4- ja XHTML-suosituksissa. iframe-elementillä voit upottaa html-sivun sisälle ulkopuolisen dokumentin. iframe-elementillä on globaalien attribuuttien lisäksi seuraavat attribuutit: src: URL-osoite upotettavaan tiedostoon width: alueen leveys (pikseleissä) height: alueen korkeus (pikseleinä) name: ikkunan nimi sandbox: Rajoittaa millaista sisältöä ja toimintoja voidaan sivulle upottaa. Toimii jollakin tasolla chromessa. seamless: Integroi upotettavan sisällön saumattomasti sivulle. Heikko selaintuki. srcdoc: Upotettava sisältö (ei url-osoitetta), vaihtoehto src-määreelle. 23 Heikko selaintuki.

24 Esimerkki: iframe #laatikko {width:300px; heigth:200px; overflow:auto;} <iframe src="kalevala.html" id="laatikko" seamless> </iframe> chrome: firefox: 24

25 Taulukko - table Www-sivuilla taulukoita käytetään taulukkomuotoisen tiedon esittämiseen asemointiin (sivun taittamiseen). Tämä on ollut aikaisemmin hyvin yleinen tapa tehdä sivulle layout. HTML5-luonnokset aluksi kuitenkin kielsivät taulukoiden käytön sivun layoutin tekemiseen tehtiin kehotus välttämään sivun layoutin tekemiseen taulukoilla, mutta sitä ei enää kielletä. 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) 25

26 Table-elementti HTML-koodissa taulukko tehdään table-elementin sisään. <table> </table> Table-elementillä voi globaalien attribuuttien lisäksi olla borderattribuutti, joka ilmoittaa reunaviivan paksuuden. Oletuksena taulukolla ei ole reunaviivaa jos sitä ei määritellä Käytännössä reunaviivat (paksuus, väri, tyyli) kannattaa määritellä CSS:n avulla. 26

27 Table-elementin alielementit table-elementille voidaan lisätä seuraavia alielementtejä annetussa järjestyksessä: 1. caption: seloste, jolla voidaan korvata summary-attribuutti, ei pakollinen. 2. colgroup: sarakkeiden ryhmittely, ei ole pakollinen. Colgroup-elementin alielementtinä voi olla vain col-elementtejä. Col-elementti on tyhjä elementti, jonka tärkeimmät attribuutti on span (numero kertoo ryhmän sarakkeiden määrän, oletus 1). 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. 27

28 tr, th ja td -elementit Taulukko koostuu siis riveistä ja sarakkeissa. Rivit muodostetaan tr-elementeillä. Rivien sisällä on alielementit: Esim. th: otsikkosolu, lihavoitu- ja keskitetty teksti, attribuutteina: colspan, rowspan, headers, scope td: normaali solu, attribuutteina colspan, rowspan, headers colspan: kertoo monelle sarakkeelle solu laajenee <td colspan= 5 >Viisi saraketta</td> rowspan: kertoo monelle riville solu laajenee <td rowspan= 3 >Kolme riviä</td> 28

29 Esimerkki <table border="1"> <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> 29

30 Esimerkki <table border="1"> <colgroup> <col span="2" style="background-color:#ccc"> <col style="background-color:#0ff"> </colgroup> <tr> <th>tunnus</th> <th>nimi</th> <th>laajuus</th> </tr> <tr> <td>ict1tn001</td> <td>orientaatio ICT-alaan</td> <td>3 op</td> </tr> <tr> <td>ict1tn002</td> <td>työasemat ja tietoverkot</td> <td>9 op</td> </tr> </table> 30

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

32 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, kuvan tms. viereen floatominaisuudella 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. 32

33 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 pystysuora sijainti 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 33

34 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;} 34

35 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;} 35

36 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;} 36

37 Lähteet working draf, jota tätä kirjoittaessa käytetty versiota päiväyksellä 29 March living standard HTML5:n ja CSS:n opiskeluun Jukka K. Korpela: HTML5 uudet ominaisuudet CSS verkkosivujen muotoilussa 37

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

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

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

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

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

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

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

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

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

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

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

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

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

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

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

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

XHTML - 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: 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ä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

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

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

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

CSS 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

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

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

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

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

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)

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

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

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

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

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

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

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

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

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

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

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

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

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

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

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

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

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

KÄYTTÖOHJE. Servia. S solutions

KÄ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ä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

6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)

6.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ätiedot

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3

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

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

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

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

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

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

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

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

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

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

Kyläsivujen InfoWeb-ohje

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

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

Uutiskirjesovelluksen käyttöohje

Uutiskirjesovelluksen 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ätiedot

Ylläpitoalue - Etusivu

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

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

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

XHTML - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim.

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

Nvu 1.0. by Sami Mäkinen

Nvu 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ätiedot

ez Publish ja Toolbar yleisohjeet

ez 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ätiedot

Työvälineohjelmistot KSAO Liiketalous 1

Työvälineohjelmistot KSAO Liiketalous 1 KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana

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

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

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

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

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

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

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

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

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

Google-dokumentit. Opetusteknologiakeskus Mediamylly

Google-dokumentit. Opetusteknologiakeskus Mediamylly Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan

Lisätiedot

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000

Lisätiedot

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

VIENET 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ätiedot

HTML editorin käyttö - 1

HTML editorin käyttö - 1 HTML editorin käyttö KompoZer sivustoeditorin pikaopas (hae editori osoitteesta: http://kompozer.net/) KompoZer editori Kompozer on sivustoeditori, jolla voit koostaa sivustoasi (useamman sivun linkitetty

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

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

Johdatus L A TEXiin. 7. Taulukot ja kuvat. Dept. of Mathematical Sciences

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

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

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

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

Tietosuoja-portaali. päivittäjän ohje

Tietosuoja-portaali. päivittäjän ohje Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan

Lisätiedot

HTML5 & CSS3 perusteet

HTML5 & CSS3 perusteet Verkkokurssin tuotantoprosessi kurssin harjoitustyönä suunniteltu toteutettavissa oleva verkkokurssi. HTML5 & CSS3 perusteet Sisältö: 1. Ideointi 2. Tausta-analyysi 3. Sisällön suunnittelu 4. Pedagoginen

Lisätiedot

JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/26/2013. Otsikko osan elementit: <base> <link> <script> <style> <title> <meta>

JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/26/2013. Otsikko osan elementit: <base> <link> <script> <style> <title> <meta> 26.3.2013 Aulikki Hyrskykari sisällön ryhmittelyä lohkotasolla Tekstitason semanttisia elementtejä Linkit Taulukot Otsikko osan elementit: Dokumentin runko:

Lisätiedot

Tekstinkäsittelyn jatko KSAO Liiketalous 1. Osanvaihto näkyy näytöllä vaakasuorana kaksoispisteviivarivinä ja keskellä riviä lukee osanvaihdon tyyppi

Tekstinkäsittelyn jatko KSAO Liiketalous 1. Osanvaihto näkyy näytöllä vaakasuorana kaksoispisteviivarivinä ja keskellä riviä lukee osanvaihdon tyyppi KSAO Liiketalous 1 Osat Tiedosto voidaan jakaa osiin ja jokainen osa muotoilla erikseen. Osa voi olla miten pitkä tahansa, yhdestä kappaleesta kokonaiseen tiedostoon. Osanvaihto näkyy näytöllä vaakasuorana

Lisätiedot

1 www-sivujen teko opetuksessa

1 www-sivujen teko opetuksessa RäsSe, Tekniikka/Kuopio Sivu 1 1 www-sivujen teko opetuksessa 1.1 Yleistä Mitä materiaalia verkkoon? Tyypillisesti verkossa oleva materiaali on html-tiedostoja. Näitä tiedostoja tehdään jollakin editorilla

Lisätiedot