HTML5 alkaa. Mirja Jaakkola

Koko: px
Aloita esitys sivulta:

Download "HTML5 alkaa. Mirja Jaakkola"

Transkriptio

1 HTML5 alkaa Mirja Jaakkola

2 W3C Word Wide Web Consortiumin (W3C) perustettiin 1994 kehittämään yhteisiä ja yhteensopivia Webin pelisääntöjä ja teknologioita. W3C:n muodostavat sen jäsenet (W3C members). Nykyisin W3C:llä on n. 400 jäsenorganisaatiota ympäri maailmaa (The list of current W3C Members). W3C tuottaa runsaasti erilaisia dokumentteja ja asiakirjoja. Työryhmän teknisestä dokumentista voi tulla W3C-suositus alla olevaa suosituspolkua noudattaen (W3C Recommendation Track Process): 1. working draft (WD) 2. candidate recommendation (CR) 3. proposed recommendation (PR) 4. W3C-suositus eli recommendation 2

3 Historiaa 1989 Tim Berners-Lee alkoi kehittämään nettiä ja ensimmäisen selaimen prototyyppi saatiin aikaan 1990 HTML ensimmäiset kuvaukset v HTML 2.0 luonnos v ja suositus v HTML 3.0 luonnos v ja HTML 3.2 suositus v (tammikuu) HTML 4 suositus v (joulukuu) ja HTML 4.01 suositus v XML suositus v XHTML 1.0 suositus v ja XHTML 1.1. suositus v XHTML 2.0 luonnos v HTML 5 luonnos v Tarkemmin 3

4 HTML:n aikaisempien versioiden ongelmat HTML:n aikaisempien versioiden ongelmat: Aluksi HTML-kieli muuttui eri selainten tekijöiden visioiden mukaan Eri selaimet tekivät omia elementtejä, jotka eivät ole W3C:n suosituksien mukaisia eivätkä toimi muissa selaimissa Selaimet näyttävät sivut, vaikka ne eivät olisi W3C:n suosituksien mukaisia ja eivät siis myöskään ole valideja Eri selaimet tulkitsevat koodia & virheitä erilailla Ulkoasu tehtiin varhaisissa HTML-versioissa elementtien ja attribuuttien avulla. Myöhemmin kehitettiin CSS-kieli ulkoasun määritykseen. Siirtymävaiheessa HTML 4:een määriteltiin kolme erilaista dokumentintyyppi- eli DOCTYPE-määritystä: Strict: elementit kuvaavat vain rakennetta, ulkoasu CSS:n avulla Transitional: sisältää vielä ei-suositeltavat ulkoasuun vaikuttavat määritykset Frameset: sisältää vielä ei-suositeltavien ulkoasuun vaikuttavien määritysten lisäksi kehysrakenteen. 4

5 XHTML XHTML:n tarkoitus oli korvata HTML:n aikaisemmat versiot ja tehdä XHTML:stä formaali sivunkuvauskieli XHTML 1.0 on HTML4:n elementit sisältävä sivunkuvauskieli kirjoitettuna XML:n syntaksin mukaisesti dokumentti on hyvin muodostunut: elementit sijaitsevat sisäkkäin ja kaikilla elementeillä on alkutagin lisäksi myös lopputagi elementit ja attribuutit kirjoitetaan aina pienillä kirjaimilla attribuuttien arvot erotetaan lainausmerkein XHTML 1.0 sisältää vielä samat dokumenttityyppimääritykset (DOCTYPE) kuin HTML 4: Strict, Transitional ja Frameset XHTML 1.1. ei enää salli ulkoasuun liittyvä määreitä vaan ulkoasu muodostetaan CSS-tyylikielen avulla 5

6 XHTML:n ongelmat XHTML:n ongelmat: XHTML ei tue aikaisemmin webbiin tuotettua sisältöä XHTML keskittyy virheenkäsittelyyn ja MIME-tyypeihin (application/xhtml+xml): pienikin virhe XHTML-koodissa olisi XML-syntaksiin perustuen estänyt sivun sisällön näytön selaimessa XHTML-sivujen tekijät siirtyivät käyttämään MIME-tyyppiä txt/html, jolloin virheellisten sivujen näyttö selaimessa onnistui. 6

7 W3C & WHATWG 2004 Apple, Mozilla ja Opera perustivat WHATWG-yhteisön ja esittivät uuden web-sovelluksen toteuttamista seuraavin periaattein: Yhteensopivuus aiempien toteutusten kanssa Hyvin määritelty virhetilanteiden hallinta Käyttäjän suojaaminen sivuston virheiltä Käytännöllisyys Skriptaus Laitetasoista profilointia tulee välttää Spesifikaation kehittäminen avointa Tämän perusteella alettiin kehittää HTML5:sta Kehitysryhmänä oli WHATWG (http://www.whatwg.org/news/start) Vuonna 2007 W3C tuli mukaan HTML5:n kehitystyöhön lopettaen samalla XHTML 2.0:n kehittämisen Vuonna 2008 tammikuussa julkaistiin W3C:n ensimmäinen HTML5-luonnos HTML5:n kehitys jatkuu yhä ja kestänee vielä useita vuosia. 7

8 HTML5 ja vanhat webbisivut Webbisivut ovat perinteisesti olleet joko vanhempaa HTML4-koodia tai uudempaa XHTML-koodia Voit siirtyä HTML4.01 strict:sta ja XHTML:stä suoraan HTML5 :seen, koska HTML5:lle on määritelty kaksi erilaista esitysmuotoa: HTML ja XHTML. Vanhat HTML4.01 strict:ssa ja XHTML:ssä käytetyt elementit ovat täysin tuettuja tehdessäsi HTML5-sivuja HTML4.01 strict:ssä ja XHTML:ssä elementit jaotellaan lohko (block) ja sisä (inline ) elementteihin. Lohko (block) elementit muodostavat XHTML:ssä web-sivun rakenteen ja sisä (inline) elementit sijoitetaan aina lohkoelementtien sisälle. HTML5 sallii myös joitakin sellaisia elementtien sijoitteluja, jotka ovat HTML4.01 strict:ssä ja XHTML:ssä kiellettyjä. 8

9 HTML5 elementtien pääryhmät Elementtien pääryhmiä kuvaa alla oleva W3C:n esittämä kuva osoitteesta Elementti voi kuulua useampaan ryhmään. Jotkut elementit kuuluvat ryhmiin, joita viereisessä pääryhmiä esittävässä kuvassa ei esiinny. HTML5 elementtien tarkempi ryhmittely ja mitä attribuutteja voit liittää eri elementille on esitetty W3C:n sivulla: HUOM! Tarkista webbisivusi koodin oikeellisuus aina validaattorin avulla: 9

10 HTML5 uudet piirteet HTML5:n uusia ominaisuuksia ovat: Rakenteiset elementit, joilla merkitään sivun jakautuminen eri osiin Uusia lomake-elementtejä ja tiedon tarkistukset Videon ja äänen esittäminen omilla elementeillä Piirtoalue canvas-elementillä ja piirtotoimintojen & vuorovaikutuksen lisääminen javascriptin avulla Paikkatiedot (geologation), joiden avulla sivun sisältö voidaan toteuttaa käyttäjän sijainnin mukaisesti. Tosin tämä on erillinen kehityshanke, mutta usein liitetään html5:seen. Selaimen muisti, kehittyneempi tiedon tallennustapa kuin evästeissä (cookies). Offline-sovellukset, voidaan ladata tarvittavat tiedot etukäteen selaimeen offline käyttöä varten 10

11 Selaimet ja HTML5:n uudet piirteet Selaimet tukevat vaihtelevasti HTML5:n uusia piirteitä. Eri selainten tuen uusille HTML5 elementeille näet sivustolta. Testaa sivuja eri selaimilla ja mahdollisesti myös eri selainversioilla. Tärkeimmät selaimet ovat IE, Firefox, Opera, Safari, Chrome IE9 tukee hyvin uusia piirteitä, vanhemmat versiot eivät tue. IE9:ssä saat F12-näppäimellä käyttöösi sivunkehitystyökalut. Firefoxissa on saatavilla lisäosia asenna Työkalut-valikosta esim. Web Developer Extension sivun muokkaamiseen Firebug virheiden etsintään. Pienten laitteiden selaimet (esim. Android, iphone) tukevat yleensä hyvin HTML5:sta 11

12 Uudet elementit ja vanha IE IE:n vanhempien versioiden käyttäjiä on vielä paljon, koska uusinta IE9- versioita ei voida asentaa vanhoihin koneisiin & käyttöjärjestelmiin (esim. xp). IE9 käy siis vain vistaan ja windows 7:aan. Vanhat IE-selaimet eivät ymmärrä uusia elementtejä ja sivua muodostaessaan sijoittavat sille oudot elementit sivun loppuun. Vanhemmat IE-selaimet versioon 8 asti voivat muodostaa uudet elementit seuraavan javascript-koodin avulla: <!-- [if lt IE 9]> <script> document.createelement("header"); document.createelement("nav"); document.createelement("article"); document.createelement("footer"); </script> <![endif] --> 12

13 Uudet elementit ja vanha IE Webistä löydät valmiin javascript-funktion, jonka avulla voit tehdä uudet HTML5-elementit niille, jotka käyttävät vanhaa IE:tä. <!-- [if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5-els.js"> </script> <![endif] --> Jos haluat varmistaa funktion toimivan aina (webissä oleva sivu voi joskus olla tavoittamattomissa) voit kopioida tuon javascript-funktion omalle palvelimellesi osoitteesta ja käyttää sitä suoraan omalta palvelimeltasi. 13

14 Selainten tuki HTML5:lle Ominaisuuksien tunnistustekniikkaan voit käyttää javascript-kirjastoa Lataa kirjasto sivustosi yhteyteen ja liitä se html-sivun head-osioon: <script src="modernizr.min.js"></script> ominaisuuden voit nyt tarkistaa javascript-ehtolauseella, esim.: if(modernizr.canvas){ // true, voidaan käyttää canvas-elementin lauseita. } else { //false, ei tukea canvas-elementille. Muu esitystapa tai selite. } 14

15 HTML 5 merkkaus HTML 5 sallii sekä HTML-muotoisen merkkauksen että XHTML-muotoisen merkkauksen. Sekä isot että pienet kirjaimet ovat sallittuja elementtien nimissä. Voit jättää halutessasi seuraavista elementeistä lopputagin pois: body, colgroup, dd, dt, head, li, optgroup, option, p, rp, rt, tbody, td, tfoot, th, thead ja tr Voit jättää halutessasi (ei kuitenkaan suositeltavaa) seuraavista elementeistä alkutagit pois: body, colgroup, head, html ja tbody Tyhjän elementin voi kirjoittaa sekä lopputagin kanssa tai ilman lopputagia esim. <br> on sallittu HTML:n aikaisemmissa versioissa ja HTML5:ssa <br/> on sallittu XHTML:ssä ja HTML5:ssa <br></br> on kielletty HTML5:ssa vaikka se on sallittu XHTML:ssä 15

16 Elementin rakenne Elementti alkaa alkutunnisteella eli tagilla, sitten tulee elementin sisältö ja lopuksi mahdollinen lopputunniste Elementin määrittely kertoo millainen elementin sisältö voi olla, millaisia attribuutteja elementtiin voi liittää, mitä alielementtejä elementillä voi olla, pitääkö elementillä olla lopputagi jne. Elementti voi olla myös tyhjä ts. elementillä ei ole sisältöä eikä erillistä lopputagia. Lopputagimerkin voi halutessa kirjoittaa alkutagiin tunnisteen jälkeen, mutta se ei ole pakollista HTML5:ssa. elementti <tunniste>sisältö</tunniste> alkutagi sisältö lopputagi 16

17 Attribuutti Elementin määrite eli tarkennin Kirjoitetaan aina elementin alkutunnisteeseen Nimi-arvo -pari W3C:n suositus kertoo mitä attribuuttia eri elementteihin voi liittää elementti <tunniste nimi="arvo">sisältö</tunniste> attribuutti sisältö lopputagi alkutagi 17

18 HTML 5 merkkaus: attribuutit HTML 5 sallii sekä HTML-muotoisen merkkauksen että XHTML-muotoisen merkkauksen. Sekä isot että pienet kirjaimet ovat sallittuja attribuuttien nimissä. Attribuuttien kirjoittamisessa ei kirjaisinkoolla ole merkitystä Attribuutin arvo voidaan laittaa lainausmerkkien sisälle tai arvo voi olla ilman lainausmerkkejä. Lainausmerkit pitää kuitenkin laittaa jos attribuutin arvossa on välilyönti, lainausmerkki (" tai ), gravis (`), yhtäsuuruusmerkki (=) tai pienempi (<) tai suurempi (>) kuin merkki. Boolean-attribuutit voidaan kirjoittaa joko arvon kanssa tai ilman arvoa Esim. checked="checked" voidaan kirjoittaa ilman arvoa eli käyttäen pelkästään boolean-attribuutin nimeä checked. 18

19 Globaalit attribuutit Seuraavat globaalit attribuutit voidaan liittää kaikkiin html-elementteihin: accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title translate pikanäppäin luokka (CSS) sisällön muokattavuus tilannekohtaisen komentovalikon menu kirjoitussuunta hiirellä siirto pudotuksen vaikutus piilotus yksilöivä tunniste sisällön kieli kielen tarkastus tyyli järjestysnro otsikko käännös 19

20 Tapahtuma-attribuutit Seuraavat tapahtuma-attribuutit voidaan liittää osaan elementteistä: onafterprint onbeforeprint onbeforeunload onblur onerror onfocus onhashchange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onresize onscroll onstorage onunload 20

21 HTML5 HTML 4 strict:sta ja XHTML:stä voidaan siirtyä suoraan HTML5 :seen, koska HTML5:lle on määritelty kaksi erilaista esitysmuotoa: HTML ja XHTML. Dokumentissa kannattaa valita toinen noista esitystavoista, jotta koodaus lopputageineen olisi johdonmukaista. Molemmat esitystavat ovat yhtä oikeita. Selainten tuki kannattaa tarkistaa uusille elementeille esim. osoitteesta: HTML5 elementtejä voi lisätä jo olemassa oleviin vanhoihin sivuihin. Tällöin sivun DOCTYPE-määritys kannattaa muuttaa HTML5:n mukaiseksi. HTML5:n DOCTYPE määritys on yksinkertaisesti: <!DOCTYPE html> 21

22 html-elementti Toimii html-dokumentin juurielementtinä ts. kaikki muut dokumentin elementit tulevat juurielementin sisälle Alku- ja lopputagin voi jättää pois ei kuitenkaan suositeltavaa Attribuutteina globaalit attribuutit. Alielementteinä on ensin head-elementti ja sitten body-elementti. head html body <!DOCTYPE html > <html > <head> head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html> 22

23 head-elementti Muodostaa html-dokumentin otsakeosan Sisältöä ei yleensä näytetä selain-ikkunassa Alku- ja lopputagin voi jättää pois ei kuitenkaan suositeltavaa Alielementit määrittelevät metatietoa ja scriptausta: base link meta script style title url-osoite dokumentin suhteellisiin viittauksiin linkki toiseen dokumenttiin, esim. CSS metatietoa dokumentista selaimella suoritettavaa scriptiä (javascript) dokumentin sisäinen tyyliohje dokumentin ulkoinen otsikko, pakollinen (yleensä) Attribuutit: globaalit attribuutit 23

24 title-elementti Pakollinen Attribuutit: globaalit Lisää sivua kuvaavan otsikon selainikkunan yläreunaan ja näkyy myös hakukoneiden hakutuloksissa Ohjeena max 64 merkkiä, koska selain voi katkaista pidemmän otsikon <title>haaga-helia ammattikorkeakoulu</title> 24

25 meta-elementti meta-elementtejä voi olla useita yhdessä dokumentissa meta-elementistä on neljä erilaista vaihtoehtoa: <meta http-equiv=" " content=" " > sisältää tietoa, joka ohjaa selainta. Tätä kutsutaan HTML5:ssa pragmaksi. <meta charset=" "> ilmoittaa lyhyesti merkistökoodauksen <meta name=" " content=" "> kertoo sivukohtaisia metatietoja <meta itempromp=" " content=" " > kertoo mikrotietomäärittelyn 25

26 Koodiston ilmoittaminen Merkistökoodaus ilmoitetaan yksinkertaisemmin meta-elementissa: <meta charset="windows-1252"> Windows-1252 on ISO :n laajennus. Toinen vaihtoehto koodaukseksi on UTF-8, joka mahdollistaa kaikkien Unicode-merkkien esittämisen suoraan. Tällöin muista tarkistaa sivua tallennettaessa myös koodaus, jotta ääkköset tulevat selainikkunassa oikealla tavalla. <meta charset="utf-8"> 26

27 meta-elementti name-attribuutin arvoja (standardi): application-name: web-sovellus author: tekijä description: kuvaus generator: millä sivu on tehty keywords: avainsanat, erota pilkulla Muita name-attribuutin arvoja: http-equiv attribuutin arvoja: content-language: kieli HUOM: käytä mieluummin lang-attribuuttia content-type: mitä merkistöä koodauksessa käytetään default-style: oletustyyli refresh: päivitys, uudelleen ohjaus set-cookie : HTTP-evästeet päälle 27

28 meta-elementin käyttöesimerkkejä Metatietoa html-dokumentista: <meta name="author" content="mirja" > <meta name="description" content="html-luento 2.4."> <meta name="keywords" content="html-dokumentin rakenne, ulkoinen ja sisäinen tyylitiedosto, html, css" > Käyttäjän siirtäminen toiseen osoitteeseen: <meta http-equiv="refresh" content="10; URL=uusi_sivu.html"> Sivun päivitys 2 minuutin välein: <meta http-equiv="refresh" content="120"> 28

29 base-elementti elementillä määritellään web-sivulle url-osoite, johon kaikki web-sivun suhteelliset viittaukset osoitetaan käyttökelpoinen silloin kun web-sivu on irti ympäristöstään, esim. sähköpostilla lähetetty web-sivu, jolla ei ole url-osoitetta ollenkaan. Sijainti head-elementissä ennen viitauksia ulkopuolisiin lähteisiin. Web-sivulla voi olla vain yksi base-elementti. Tyhjä elementti Pakollisena attribuuttina href, jossa ilmoitetaan web-sivun absoluuttinen url-osoite. Lisäksi voi olla globaaleja attribuutteja target-attribuutti. Esim. web-sivun normaali sijaintipaikka, johon web-sivun suhteelliset viittaukset osoitetaan: <base href="http://myy.haaga-helia.fi/~ict1tn004/tehtavat/tehtavat.html"> 29

30 link-elementti link-elementti: Voidaan liittää html-dokumenttiin ulkopuolinen tiedosto Esim. tyyliohjeen liittäminen, jolloin useampi html-dokumentti voi käyttää samaa tyyliohjetta. <link rel="stylesheet" href="tyyli.css" type="text/css"> Globaalien attribuuttien lisäksi voit liittää seuraavat attribuutit: href : kohdetiedoston url-osoite rel : nykyisen ja kohdetiedoston suhde media : mille medialle, esim. eri tyyliohje näytölle, tulostukseen hreflang : kohdetiedoston kieli type : kohdetietoston mime-tyyppi sizes : koko title : kohdetiedoston title 30

31 style-elementti Lisätään dokumentin sisäinen tyyliohje Ohittaa ulkoisessa css-tiedostossa tehdyt määritykset Globaalien attribuuttien lisäksi voi olla type, media ja scoped -attribuutit <style> body {font-family:verdana,sans-serif; color: navy;} h1 {color:red;} </style> Aikaisemmin style-elementin yhteydessä piti ilmoittaa type="text/css" - attribuutti, mutta HTML5:ssa se ei ole enää pakollista ja voit siis jättää sen pois. Selain siis automaattisesti ymmärtää style-elementissä käytettävän css:ää. 31

32 script-elementti Liitetään javascript-koodia tai tiedosto (käsitellään myöhemmin) Globaalien attribuuttien lisäksi voit liittää seuraavat attribuutit: src : tiedoston nimi async : jos true niin scripti suoritetaan asynkronisesti heti kun se on saatavilla defert: jos true ja async false niin odotetaan kunnes sivu on valmis ennen scriptin suoritusta. Jos defert false ja async on myös false suoritetaan scripti välittömästi. type : tiedoston tyyppi charset: merkkien koodisto Myös script-elementissä ei enää tarvitse kirjoittaa type="javascript" attribuuttia. Selain automaattisesti ymmärtää script-elementissä kirjoitetun scriptin olevan javascriptiä. Noscript-elementillä voidaan antaa vaihtoehtoinen sisältö sellaisille selaimille, jotka eivät tue javascriptiä tai joissa javascript on estetty selainasetuksin. 32

33 body-elementti Selaimessa näkyvän html-dokumentin sisältö html-elementillä voi olla vain yksi body-elementti Attribuutteina globaalit attribuutit ja tapahtuma (event) -attribuutit Alku- ja lopputagin voi jättää pois ei kuitenkaan suositeltavaa Alielemetit muodotavat web-sivun rakenteen ja sivulla näkyvät osat. <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>html esimerkki</title> </head> <body> sivun sisältö </body> </html> 33

34 h1, h2, h3, h4, h5, h6 -otsikot Muodostaa otsikon, jonka suuruusluokka määräytyy numeron mukaan (h1 suurin) Attribuutteina globaalit attribuutit <h1>rakenteiset dokumentit</h1> <h3>rakenne, sisältö ja ulkoasu erillään</h3> <h6>esimerkkinä XHTML-dokumentti</h6> 34

35 p-elementti Muodostaa tekstissä kappaleen (paragraph) tai muun tekstilohkon Alkaa aina uudelta riviltä. Selaimet erottaa tekstilohkon muista lohkoista tyhjällä rivillä. Vain globaalit attribuutit. P-elementin alkutagi on pakollinen, mutta lopputagi ei ole. On suotavaa lisätä myös lopputagi. Jos lopputagi puuttuu selain tulkitsee p-elementin loppuvan seuraavaan sivun rakennetta kuvaavan elementin alkuun. P-elementin sisälle et voi sijoittaa sivun rakennetta kuvaavia elementtejä kuten otsikko (h1, h2, ), div, article, header, footer, nav <p>html-koodin kirjoittamiseen voidaan käyttää mitä tahansa tekstieditoria. HTML-tiedoston loppupäätteeksi tulee.html tai.htm.</p> <p> WYSIWYG ( what you see is what you get ) -editorin avulla voit myös tehdä webbisivuja. Luokan koneissa on Adoben Dreamweaver, joka ymmärtää jo jollakin tasolla HTML5:n uusia elementtejä.</p> 35

36 pre pre-elementti tekee valmiiksi muotoillun tekstin ts. jättää kaikki tyhjät merkit ja rivinvaihdot paikoilleen. Oletusfontti on tasalevyinen (monospace), jotta tekstinmuotoilun tulos olisi mahdollisimman yhdenmukainen. Lopputagi pakollinen Vain globaalit attribuutit <pre> XHTML The Extensible HyperText Markup Language The E x tensible H yper T ext M arkup L anguage </pre> XHTML 1.0, XHTML 1.1: recommendations XHTML 2.0: working draft 36

37 div div: sivuston sisältö voidaan jakaa osiin. Lopputagi pakollinen. Vain globaalit attribuutit. Nykyään hyvin suosittu sivun kokoamisväline, jossa eri div-lohkot yksilöidään käyttäen id-attribuuttia Tulevaisuudessa uusien semanttisten elementtien käytön toivotaan vähentävän div-elementin käytön tarvetta. <h1>värit</h1> <div id="web_varit" style="margin-left:20%"> <h3>web-turvalliset värit</h3> <p>web-turvallisia värejä on 216 ja ne muodostetaan heksadesimaaleina, jotka sisältävät vain seuraavia perusvärien arvoja: 00, 33, 66, 99, CC, FF, esim. #3366FF. </p> </div> 37

38 Semanttiset rakenne-elementit Uusien HTML5:n semanttisten rakenne-elementtien avulla voidaan tehdä sivulle sisällön kannalta mielekäs rakenne Uusia elementtejä kehiteltiin sen perusteella, minkä nimisiä divelementtien id- ja class-tunnuksia sivustoilla eniten käytettiin. Näille semanttisille elementeille voit antaa vain globaaleja attribuutteja. <article>: Artikkelin tulee olla kokonainen, itsekseen julkaistavissa oleva kokonaisuus Artikkelin sisällä voi olla toinen artikkeli <aside> Sivupalkki, sisältönä esim. kuvia, mainosbanneri <footer> Alatunniste, esim. yhteystiedot, copyright 38

39 Semanttiset rakenne-elementit <header> Ylätunniste, otsikkolohko, esim. logo ja pääotsikko <hgroup> Otsikkoryhmä, esim. otsikko ja alaotsikko <nav> navigointipalkki <section> Sivun rakenteen jakamiseen osiin tai artikkelin koostamista osista, joilla on oma otsikko 39

40 Sivurakenne esim.1. Uusien elementtien tarkoitus on kuvata sivun rakennetta korvaten divelementin. header nav article article footer 40

41 Sivurakenne esim.2. header nav article section section section footer 41

42 Sivurakenne esim.3. nav header article header section aside section footer footer 42

43 Semanttisten rakenne-elementtien merkitys Miten article ja section eroavat toisistaan? Section on osa dokumenttia Article on itsenäinen tekstikokonaisuus, artikkeli, uutinen, blogi Section-elementin sisällä voi olla article-elementti tai useampia Article-elementin sisällä voi olla section- tai article-elementtejä Uusien semanttisten rakenne-elementtien merkitys tulevaisuudessa riippuu miten niitä aletaan käyttämään ja käytetäänkö niitä oikein. Selaimet eivät näytä semanttisia rakenne-elementtejä toisistaan poikkeavasti eli niillä ei ole vaikutusta sivun ulkoasuun. Ulkoasu täytyykin siis määritellä CSS:n avulla. Elementit on hyvä myös määritellä CSS:ssä lohkolementeiksi, esim.: article, header, footer, nav, section {display:block;} 43

44 address address-elementillä lisätään html-dokumentin tekijän yhteystiedot sivulle näkyviin Oma address-elementti voisi olla myös article-elementillä, aikaisemmin address ajateltiin sivukohtaiseksi. Attribuutteina vain globaalit attribuutit. Address-elementin sisällä pitää XHTML:ssä olla vain tekstitason merkkausta, HTML5:ssa sisältönä voi olla muutakin, esim. lista tai taulukko. <address>esa Merkki, 44

45 blockquote ja cite blockquote-elementtiä käytetään lainauksen osoittamiseen. Selaimet yleensä sisentävät blockquote-elementillä erotetun tekstin. Käytännössä blockquote-elementtiä on aikaisemmin käytetty tekstin sisentämiseen. Tämä ei ole HTML-suositusten mukaista, vaan sisennys pitää aina tehdä CSS:n avulla. Attribuuttina globaalien lisäksi cite, joka ilmoittaa lainauksen kohteen urlosoitteen Lainauksen kohde, teoksen nimi, ilmoitetaan usein tekstitason cite-elementillä. Lopputagi on pakollinen molemmilla elementeillä. <h3>aleksis Kivi: kirjoituksia</h3> <blockquote>jukolan taloeteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä, liki Toukolan kylää. <br><span style="font-size:12px">aleksis Kivi: <cite> Seitsemän veljestä</cite></span> </blockquote> 45

46 hr hr-elementti Lyhenne sanoista horizontal rule Käytännössä lisää vaakasuoran väliviivan Semanttinen merkitys html5:ssa: tarkoittaa aiheen vaihtumista kappaletasolla Tyhjä elementti, esitysmuoto joko <hr> tai <hr /> Attribuutteina globaalit attribuutit. CSS ei tue kovinkaan hyvin hr-elementin ulkoasun muotoilua. CSS antaa enemmän mahdollisuuksia ulkoasunmuokkaukseen jos teet poikkiviivan elementteihin liitetyllä ala- tai yläreunuksella eli border-määreellä. <p>mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemahan, sukuvirttä suoltamahan, lajivirttä laulamahan. Sanat suussani sulavat, puhe'et putoelevat, kielelleni kerkiävät, hampahilleni hajoovat. </p> <hr> 46

47 br br tekee pakollisen rivinvaihdon Suositellaan vain tilanteisiin, jossa rivinvaihto kuuluu tekstin sisältöön. Ei kovinkaan hyödyllinen rivityksessä, koska selainikkunan koko vaihtelee. Ongelmia voi tulla myös jos tekstiä tai palstan leveyttä muutetaan Globaalit attribuutit Tyhjä elementti, esitystapa joko <br> tai <br /> <p> Nimi: Mikko Mallikas <br /> Osoite: Majavakatu 3, Oulu </p> Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu 47

48 span span: elementti, jolla voit erottaa tekstin osan erikseen. Tekstitason elementtinä ei aiheuta rivinvaihtoa. Globaalit attribuutit Käytetään kun halutaan joku tekstin osa erilaiseksi muusta tekstistä esim. CSS-määrittelyn avulla <p><span style="color:red">v</span><span style="color:blue">ä</span> <span style="color:#f90">r</span><span style="color:rgb(185,0,185)">i</span> <span style="color:#48e41b">t</span> voidaan ilmoittaa sanalla, heksadesimaalikoodina tai rgb-arvona. </p> 48

49 Tekstielementtejä Tekstisisällön loogista merkitystä voidaan ilmaista seuraavilla elementeillä: abbr: tekstisisältö on lyhenne em: ilmausta painottava korostus strong: painottaa asian tärkeyttä cite: viittaa lähdeteoksen nimeen dfn: tekstisisältö on määriteltävä termi Tekstielementit, jotka kuvaavat tietokoneen käyttöä: code: koo di kbd: syöte samp: tuloste var: muuttuja 49

50 Tekstielementtejä Aikaisemmin tekstin fyysistä merkkausta korostavat elementit ovat saaneet uusia semanttisia merkityksiä: b: lihavointi. Uusi semanttinen merkitys: esiin nostettu teksti. i: kursivointi. Uusi semanttinen merkitys: erilainen teksti, erottuu ympäristöstä ilman korostusta tai tärkeyttä. s: yliviivaus. Uusi semanttinen merkitys: teksti, joka ei enää pidä paikkansa ts. on vanhentunutta. small: pienempi fontti. Uusi semanttinen merkitys: sivuhuomautus. sub: alaindeksi, käytettävä vain sisällölliseen merkkaukseen. sup: yläindeksi, käytettävä vain sisällölliseen merkkaukseen. u: alleviivaus. Uusi semanttinen merkitys: merkitty teksti, kuitenkin suositus varoittaa erityisesti, että useimmiten jokin muu elementti sopii paremmin u-elementin tilalle. Suositus myös kehottaa välttämään alleviivausta jos se voidaan tulkita väärin linkiksi. 50

51 HTML5: Uusia tekstielementtejä HTML5:ssä on määritelty seuraavat uudet tekstielementit: bdi: isolaatti, tekstin ladonnan suunta erillisessä saarekkeessa. Olematon selaintuki vielä. details: kontrolli, esim. painike, jolla saa lisätietoa. Ei selaintukea vielä. mark: tekstin merkkaus. meter: suureen arvon esitys graafisesti. nobr: kieltää rivivaihdon elementin sisällä. progress: prosessin edistymisen kuvaus graafisesti. ruby: Ruby-merkintä, käytetään lähinnä itä-aasialaisten kielten tekstiin liittyviin pieniin huomautuksiin time: ajanilmaus wbr: kohta, josta rivinvaihto on suositeltavaa 51

52 mark Mark-elementillä voidaan korostaa tekstiä kuten korostuskynällä tehdään. Käytännössä usein määritellään tekstinosalle CSS:n avulla korostava taustaväri. <p> Tämä teksti on <mark>nyt korostettu</mark> ja tässä on taas normaalia tekstiä. <p> 52

53 meter Graafinen esitys jollekin suurelle. Suure ilmaistaan joko lukuna tai prosentteina. Elementti esittää yhtä arvoa value-attribuutilla, jota päivitetään tarvittaessa javascriptin avulla. Min- ja max-attribuuteilla annetaan rajat. Elementin sisältö toimii varasisältönä, joka esitetään vain jos selain ei tue meter-elementin graafista näyttöä. Käyttöaste: <meter value="70" min="0" max="100">70%</meter> Chrome: Matkasta suoritettu 30 km<meter value="30" min="0" max="150"></meter> Chrome: 53

54 progress Toimii samalla lailla kuin meter, tarkoituksena kuitenkin on progresselementillä kuvata vain prosessin edistymistä. Päivittäminen javascriptin avulla tarpeen, jotta prosessin edistymisestä saadaan todellinen kuva. Attribuutit: globaalien attribuuttien lisäksi value ja max. Minimiarvoa ei anneta vaan se oletetaan olevan aina nolla. Odota, tietojen haku on käynnissä: <progress value="60" max="100">60%</progress> Chrome: 54

55 time Ajan ilmaisu kelloajan ja/tai päivämäärän mukaan. <time datetime=" ">30. lokakuuta 2011</time> Datetime-attribuutti kertoo ISO-standardin mukaisen päivämäärän Jos time-elementin sisältö on ISO-standardin mukainen ei tarvita datetime-attribuuttia. <time> </time> Jos time-elementin sisältö on muussa muodossa on datetime-attribuutin käyttö pakollista. Lisäksi on pubdate-attribuutti (boolean), joka ilmoittaa kyseessä olevan julkaisemisajankohdan. <time pubdate datetime=" "> </time> 55

56 wbr wbr ilmoittaa sallitun rivinvaihtokohdan eli kohdan, josta teksti voidaan jakaa tarvittaessa useammalle riville. Automaattisesti selaimet jakavat tekstin välilyönnin kohdalta. Useat selaimet jakavat myös = merkin kohdalta ja jotkut myös muiden erikoismerkkien kohdalta Parantaa sivun asettelua jos tekstissä on pitkiä merkkijonoja ja/tai erikoismerkkejä Tyhjä elementti, esitystapa joko <wbr> tai <wbr/> Esim. Kurssisivut 56

57 Merkkiviittaukset Seuraavat erikoismerkit täytyy html-dokumentissa korvata merkkiviittauksilla: < < > > & & " " Ylimääräinen välilyönti Tavutusvihje, kannattaa käyttää mm. pitkissä sanoissa ja otsikoissa Löydät lisää merkkiviittauksia osoitteesta: 57

58 Kommentit <!-- tämä on HTML-koodin kommentti --> Kommentoi HTML-dokumenttisi hyvin Kommentteja ei voi asettaa elementin tunnisteen sisälle Kommentit eivät näy www-sivulla 58

59 Lähteet working draf, jota tätä kirjoittaessa käytetty versiota päiväyksellä 29 March living standard HTML5:n opiskeluun Jukka K. Korpela: HTML5 uudet ominaisuudet kattava teos HTML5:n tämän hetkiseen kehitystilanteeseen 59

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

XHTML aloitus. Sisällys

XHTML aloitus. Sisällys XHTML aloitus XHTML-dokumentin rakenne, metatieto, kommentit, tekstit Mirja Jaakkola Sisällys 3. Taustaa 4. Selain palvelin 5. Elementin rakenne 6. Attribuutti 7. XHTML-dokumentin rakenne 8. XHTML:n DOCTYPE-määrittely

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

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Laajuus 5 op Luennot: 12 x 2t 11.3.2014 29.4.2014 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Aulikki Hyrskykari

Lisätiedot

Aulikki Hyrskykari Antti Sand

Aulikki Hyrskykari Antti Sand Aulikki Hyrskykari Antti Sand Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista,

Lisätiedot

2. PEHMEÄ XHTML XRAJAHTML

2. PEHMEÄ XHTML XRAJAHTML Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &

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

Johdatusta selainohjelmointiin

Johdatusta selainohjelmointiin Johdatusta selainohjelmointiin Ohjelmat ja tyylit selaimessa ja HTML Jaana Holvikivi Selaimet ja HTML Selaimet: Internet Explorer, Exchange Firefox, Chrome Opera 10 Safari 4 Lukevat HTML sivuja ja asettelevat

Lisätiedot

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja HTML ja CSS T-111.4360 WWW-palvelun suunnittelu Mikko Pohja Sisältö HTML XHTML CSS DOM DHTML Käytännön esimerkkejä Kuka tahansa pystyy tekemään yksinkertaisen dokumentin HTML Hyper Text Markup Language

Lisätiedot

HTML5 -elementit jatkuu

HTML5 -elementit jatkuu HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1 Digitaalisen median tekniikat xhtml - jatkuu 30.4.2004 Harri Laine 1 XHTML lomakkeet Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012 Tiedostot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi työpöydältä raahata

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset 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

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

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

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

Lisätiedot

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Laajuus 5 op Luennot: 12 x 2t 17.3.2015 30.4.2015 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Antti Sand Taru

Lisätiedot

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1 Digitaalisen median tekniikat JSP ja XML 28.4.2004 Harri Laine 1 JSP hyvin lyhyesti JSP on Java-pohjainen skriptikieli JSP:llä laadittu sivu käännetään java-servletiksi (sivun toteutus vastaa servlettiluokan

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

Digitaalisen median tekniikat css tyylimääritykset

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

Lisätiedot

XML & CSS. WWW-sovellus??

XML & CSS. WWW-sovellus?? XML & Näkökulmia WWW-ympäristön sovelluksiin ja käyttöliittymiin ILKKA PALOLA Citec Information WWW-sovellus?? Informaationhallinta, julkaisutoiminta Verkkoviestintä ESIMERKKEJÄ käyttäjistä ja käyttökohteista:

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

Cascading Style Sheets

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

Lisätiedot

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

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

Lisätiedot

Juricon Nettisivu Joomlan käyttöohjeet

Juricon Nettisivu Joomlan käyttöohjeet Juricon Nettisivu Joomlan käyttöohjeet Sisällysluettelo Julkaisujärjestelmä hallinta... 3 Joomla-järjestelmän ylävalikolla on seuraavia:... 3 Valikot... 4 Kategoriat ja artikkelit... 5 Lisäosat ja moduulien

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

Lumme-verkkokirjaston tiedonhaun opas Pieksämäen kaupunginkirjasto

Lumme-verkkokirjaston tiedonhaun opas Pieksämäen kaupunginkirjasto Lumme-verkkokirjaston tiedonhaun opas Pieksämäen kaupunginkirjasto Tervetuloa Lumme-kirjastojen verkkokirjastoon! Ilman kirjautumista voit selata aineistotietokantaa tarkistaa onko teos hyllyssä vai lainassa

Lisätiedot

JWT Hyrskykari, SIS, Tampereen yliopisto 3/19/2013

JWT Hyrskykari, SIS, Tampereen yliopisto 3/19/2013 19.3.2013 Aulikki Hyrskykari HTML dokumentin ensimmäisenä rivinä annetaan dokumenttityypin määrittely HTML5 dokumentti koostuu selementtien hierarkiasta, joista juuri elementti sisältää kaikki muut

Lisätiedot

Worldpress ohje. Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen

Worldpress ohje. Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen Worldpress ohje Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen Kun päivität sivuja, kirjaudu omalla salasanalla ja lisäksi jäsenten yhteisellä

Lisätiedot

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen XML kielioppi Elementtien ja attribuuttien määrittely Ctl230: Luentokalvot 11.10.2004 Miro Lehtonen Dokumenttien mallinnus Säännöt dokumenttityypeille 3Mahdollisten dokumenttirakenteiden määrittely Samassa

Lisätiedot

W3C-teknologiat ja yhteensopivuus

W3C-teknologiat ja yhteensopivuus W3C-teknologiat ja yhteensopivuus Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: W3C asettaa

Lisätiedot

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016

KÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016 / / WordPress KÄYTTÖOHJE Sotkamo 2016 Sisältö Sisältö 1. Yleistä 2. Kirjautuminen ylläpitoon 2.1. Kirjaudu osoitteessa: http://sotkamo.valudata.fi/admin Myöhemmin: http://www.sotkamo.fi/admin 2.2 Salasana

Lisätiedot

Toimeentulotuen sähköinen asiointi - Käyttöohje 29.1.2016 1

Toimeentulotuen sähköinen asiointi - Käyttöohje 29.1.2016 1 Toimeentulotuen sähköinen asiointi - Käyttöohje 1 Tuetut selaimet Internet Explorer 11 tai uudempi. Microsoft on päättänyt Internet Explorerin (IE) versioiden 8, 9 ja 10 tuen. Mozilla Firefox 3.5. tai

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

vakuutuslaitosten ja TAMLAn välillä

vakuutuslaitosten ja TAMLAn välillä Asioiden välittämien työeläkealan toimijoiden ja TELKin sekä vakuutuslaitosten ja TAMLAn välillä Työeläkealan XML-käytäntöjen soveltaminen Taustaa, tämän dokumentin tarkoitus Asioiden välittäminen tapahtuu

Lisätiedot

Aloitusopas verkkosivuston ylläpitoon

Aloitusopas verkkosivuston ylläpitoon Aloitusopas verkkosivuston ylläpitoon JPP-Soft Oy 2(13) Sisällys Tervetuloa emedia CMS verkkopalveluiden käyttäjäksi... 3 Sivuston graafinen ilme ja rakenne... 4 Sivuston ilme ja tyyli... 5 Sivupohjat...

Lisätiedot

Toimeentulotuen sähköinen asiointi - Käyttöohje

Toimeentulotuen sähköinen asiointi - Käyttöohje Toimeentulotuen sähköinen asiointi - Käyttöohje 1 Huomioitavaa palvelun käytöstä Tämä käyttöohje koskee ainoastaan Espoon sosiaalipalveluista haetun toimeentulotuen sähköistä asiointia. Kelasta haetun

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

4. Lausekielinen ohjelmointi 4.1

4. Lausekielinen ohjelmointi 4.1 4. Lausekielinen ohjelmointi 4.1 Sisällys Konekieli, symbolinen konekieli ja lausekieli. Lausekielestä konekieleksi: - Lähdekoodi, tekstitiedosto ja tekstieditorit. - Kääntäminen ja tulkinta. - Kääntäminen,

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

HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari

HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit Aulikki Hyrskykari 1332014 Aulikki Hyrskykari HTML / DOM / CSS perusperiaatteita HTML syntaksista Elementtien luokittelu ja sisältömallit ensimmäinen kokeilu

Lisätiedot

Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin

Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin Ossi Nykänen Tampereen teknillinen yliopisto, Hypermedialaboratorio, W3C Suomen toimisto Terveyden

Lisätiedot

PIKI-verkkokirjasto 1 Lyhyet vinkit

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

Lisätiedot

Etäkokousohjeet HUS:n ulkopuolisille ammattilaisille, joilla on käytössä VRK-kortti

Etäkokousohjeet HUS:n ulkopuolisille ammattilaisille, joilla on käytössä VRK-kortti Etäkokousohjeet HUS:n ulkopuolisille ammattilaisille, joilla on käytössä VRK-kortti Tämä ohje on tarkoitettu HUS:n ulkopuolella, muussa sairaanhoitopiirissä työskentelevälle ammattilaiselle, jolla on käytössä

Lisätiedot

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

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

Lisätiedot

Putteri Käyttöliittymä ja ulkoasu

Putteri Käyttöliittymä ja ulkoasu Putteri Käyttöliittymä ja ulkoasu Jukka Värri 15.10.2007 Versio: 1.0 Yleistä järjestelmästä Järjestelmän merkistö on UTF-8 (Unicode). Käyttöliittymä tulee järjestelmän mukaan. Uusia käyttöliittymiä ei

Lisätiedot

Harjoitus 1 -- Ratkaisut

Harjoitus 1 -- Ratkaisut Kun teet harjoitustyöselostuksia Mathematicalla, voit luoda selkkariin otsikon (ja mahdollisia alaotsikoita...) määräämällä soluille erilaisia tyylejä. Uuden solun tyyli määrätään painamalla ALT ja jokin

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

Kopiodaksesi, leikataksesi ja liittääksesi helpointa on käyttää näppäimistön pikavalintoja:

Kopiodaksesi, leikataksesi ja liittääksesi helpointa on käyttää näppäimistön pikavalintoja: Ohjeita järjestöpankin käytön tueksi Huomioitavaa:... 1 1 Sisäänkirjautuminen... 2 2 Sivun/henkilökortin muokkaaminen... 2 3 Uutisen/sivun/tapahtuman, tms. lisääminen... 3 4 Uutisen/tapahtuman saaminen

Lisätiedot

Käyttöohje - Sanoma Pro digikirjat verkkopalvelu v 1.0 2013-07- 10. Sanoma Pro digikirjat verkkopalvelu... 2. Yleistä... 2. Laitteistovaatimukset...

Käyttöohje - Sanoma Pro digikirjat verkkopalvelu v 1.0 2013-07- 10. Sanoma Pro digikirjat verkkopalvelu... 2. Yleistä... 2. Laitteistovaatimukset... - 1 - Käyttöohje - Sanoma Pro digikirjat verkkopalvelu v 1.0 2013-07- 10 Sanoma Pro digikirjat verkkopalvelu... 2 Yleistä... 2 Laitteistovaatimukset... 2 Sisäänkirjautuminen... 2 Uloskirjautuminen... 3

Lisätiedot

Luento 10: XML WWW:ssä

Luento 10: XML WWW:ssä Luento 10: XML WWW:ssä AS-0.110 XML-kuvauskielten perusteet Janne Kalliola XML WWW:ssä XHTML versiot modularisointi XForms edut XForms vs. HTML-lomakkeet RSS 2 1 XHTML XHTML HTML on standardointityössä

Lisätiedot

Sisällys. 1. Omat operaatiot. Yleistä operaatioista. Yleistä operaatioista

Sisällys. 1. Omat operaatiot. Yleistä operaatioista. Yleistä operaatioista Sisällys 1. Omat operaatiot Yleistä operaatioista. Mihin operaatioita tarvitaan? Oman operaation määrittely. Yleisesti, nimeäminen ja hyvä ohjelmointitapa, määreet, parametrit ja näkyvyys. HelloWorld-ohjelma

Lisätiedot

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne Selkoheuristiikat 1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne 1.1 Onko informaation määrä sivua kohti riittävän pieni? 1.2 Onko sivupohja rakenteet ja toiminnot toteutettu niin, että

Lisätiedot

Webinaariin liittyminen Skype for

Webinaariin liittyminen Skype for Webinaariin liittyminen Skype for Business Web Appin kautta Ohjeet Sähköpostin Liity webinaariin tästä -linkki Kun klikkaat Osallistumisohjeet webinaariin -sähköpostiviestissä olevaa Liity webinaariin

Lisätiedot

HTML 5 Johdanto. Mikä on HTML 5

HTML 5 Johdanto. Mikä on HTML 5 HTML 5 Johdanto Antti-Jussi Lakanen Mikä on HTML 5 HTML 5 on uusistandardihtml-, XHTML-ja HTML DOM-määrittelyille HTML 4 tuliulosvuonna1999. Webbion muuttunut paljon niistä ajoista HTML 5:n speksion kesken.

Lisätiedot

1. Omat operaatiot 1.1

1. Omat operaatiot 1.1 1. Omat operaatiot 1.1 Sisällys Yleistä operaatioista. Mihin operaatioita tarvitaan? Oman operaation määrittely. Yleisesti, nimeäminen ja hyvä ohjelmointitapa, määreet, parametrit ja näkyvyys. HelloWorld-ohjelma

Lisätiedot

HTML5 video, audio, canvas. Mirja Jaakkola

HTML5 video, audio, canvas. Mirja Jaakkola HTML5 video, audio, canvas Mirja Jaakkola Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu

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

Vaihdoitko puhelinta? Yhteystietojen siirto Lumian, iphonen ja Androidin välillä käy näin

Vaihdoitko puhelinta? Yhteystietojen siirto Lumian, iphonen ja Androidin välillä käy näin Vaihdoitko puhelinta? Yhteystietojen siirto Lumian, iphonen ja Androidin välillä käy näin Tekniikka 11.10.2015 10:45 Olavi Koistinen, Helsingin Sanomat Yhteystietojen siirto Androidista iphoneen kuin Gmail-käyttäjätunnus.

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

Etäkokousohjeet ammattilaisille, jotka eivät työskentele HUS:n palveluksessa ja eivät omista VRK-korttia

Etäkokousohjeet ammattilaisille, jotka eivät työskentele HUS:n palveluksessa ja eivät omista VRK-korttia Etäkokousohjeet ammattilaisille, jotka eivät työskentele HUS:n palveluksessa ja eivät omista VRK-korttia Tämä ohje on tarkoitettu ammattilaisille, jotka työskentelevät HUS:n ulkopuolella ja eivät omista

Lisätiedot

Tentti erilaiset kysymystyypit

Tentti erilaiset kysymystyypit Tentti erilaiset kysymystyypit Kysymystyyppien kanssa kannatta huomioida, että ne ovat yhteydessä tentin asetuksiin ja erityisesti Kysymysten toimintatapa-kohtaan, jossa määritellään arvioidaanko kysymykset

Lisätiedot

Skype for Business pikaohje

Skype for Business pikaohje Skype for Business pikaohje Sisällys KOKOUSKUTSU... 2 ENNEN ENSIMMÄISEN KOKOUKSEN ALKUA... 4 LIITTYMINEN KOKOUKSEEN SKYPE FOR BUSINEKSELLA... 5 LIITTYMINEN KOKOUKSEEN SELAIMEN KAUTTA... 6 LIITTYMINEN KOKOUKSEEN

Lisätiedot

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012 Aineistot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi tiedostot siirtää

Lisätiedot

OPINNÄYTETYÖRAPORTTI WEB-STANDARDIT JA NIIDEN SOVELTAMINEN. Timo Sulanne Kimmo Tapala

OPINNÄYTETYÖRAPORTTI WEB-STANDARDIT JA NIIDEN SOVELTAMINEN. Timo Sulanne Kimmo Tapala OPINNÄYTETYÖRAPORTTI WEB-STANDARDIT JA NIIDEN SOVELTAMINEN Timo Sulanne Kimmo Tapala Tietojenkäsittelyn koulutusohjelma Joulukuu 2005 Työn ohjaaja: Rami Lehtinen TAMPERE 2005 Tekijät Koulutusohjelma Tutkintotyön

Lisätiedot

Finnan ja kirjaston palveluiden ohjeita

Finnan ja kirjaston palveluiden ohjeita Finnan ja kirjaston palveluiden ohjeita Sisältö 1. Kirjautuminen Haka-kirjautumisella... 2 2. Kirjastokortin liittäminen... 6 3. Lainojen uusiminen... 7 4. Teoksen varaaminen... 8 5. Hyllyvarauksen tekeminen...

Lisätiedot

helsingintaiteilijaseura.fi WordPress-pikaohjeet

helsingintaiteilijaseura.fi WordPress-pikaohjeet 1/12 helsingintaiteilijaseura.fi WordPress-pikaohjeet Sisällysluettelo 1. Ohjausnäkymä...1 2. Työkalupakki... 2 3. Artikkelit, Näyttelyt ja Sivut...3 4. Artikkelin lisäys tai muokkaus... 4 Artikkelikuvan

Lisätiedot

Väitöskirja -mallipohja

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

10 yleistä hakukoneoptimointivirhettä

10 yleistä hakukoneoptimointivirhettä 10 yleistä hakukoneoptimointivirhettä Petteri Erkintalo Kehitysjohtaja Klikkicom Oy 2011-09-27 2 1. Hakukoneiden pääsy sivustolle on estetty Hakukoneiden pääsyn sivustolle voi estää usein eri keinoin Yllättävän

Lisätiedot

AVOIMEN YLIOPISTON MOODLE-OPAS OPISKELIJALLE

AVOIMEN YLIOPISTON MOODLE-OPAS OPISKELIJALLE AVOIMEN YLIOPISTON MOODLE-OPAS OPISKELIJALLE OHJEITA MOODLEN KÄYTTÖÖN Moodle on avoimeen lähdekoodiin perustuva verkko-oppimisympäristö. Omalta Moodlealueeltasi löydät kurssin materiaalit, tehtävät, uutiset/tiedotteet,

Lisätiedot

Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi

Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 2015 Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 1 Sisällysluettelo 1. Sivustolle rekisteröityminen... 2 2. Yrityksen lisääminen... 3 2.1. Yritystiedot...

Lisätiedot

Ajatus kaiken taustalla

Ajatus kaiken taustalla HTML ja tyylit Ajatus kaiken taustalla Perimmäisenä tarkoituksena tarjota formatointi- ja taittokieli, jonka avulla elementtirakenteisten dokumenttien ulkoasun määrittely voidaan irrottaa sisällön ja rakenteen

Lisätiedot

WordPress. Kysyy. Sähköpostiosoitteen Tulee aktivointi viesti. Käyttäjänimen vähintään 4 merkkiä. Salasanan

WordPress. Kysyy. Sähköpostiosoitteen Tulee aktivointi viesti. Käyttäjänimen vähintään 4 merkkiä. Salasanan WordPress 1 Tulostettu 1.11.2012 WordPress Ilmainen blogi-sivusto. Voi tehdä blogin. Täytyy vain luoda käyttäjätunnus ja salasana. Osoite on http://fi.wordpress.com/. Paina Get Started Kysyy Sähköpostiosoitteen

Lisätiedot

XML johdanto, uusimmat standardit ja kehitys

XML johdanto, uusimmat standardit ja kehitys johdanto, uusimmat standardit ja kehitys Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: on W3C:n suosittama

Lisätiedot

Mitkä ovat suurimmat muutokset yritysverkkopankissa? / Mikä yritysverkkopankissa muuttuu?

Mitkä ovat suurimmat muutokset yritysverkkopankissa? / Mikä yritysverkkopankissa muuttuu? Säästöpankin yritysverkkopankin uudistaminen Usein kysytyt kysymykset Yleistä Mitkä ovat suurimmat muutokset yritysverkkopankissa? / Mikä yritysverkkopankissa muuttuu? Verkkopankkiin kirjautuminen muuttuu

Lisätiedot

GroupWise Calendar Publishing Host User

GroupWise Calendar Publishing Host User GroupWise 8 Calendar Publishing Host User 8 17. lokakuu 2008 Novell GroupWise Calendar Publishing Host User PIKAKÄYNNISTYS www.novell.com YLEISTÄ Novell GroupWise Calendar Publishing Host User on Web-pohjainen

Lisätiedot

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti

Lisätiedot

Edico Lite ja S Käyttöohje istunnon pitäjälle ja kutsutulle

Edico Lite ja S Käyttöohje istunnon pitäjälle ja kutsutulle Edico Lite ja S Käyttöohje istunnon pitäjälle ja kutsutulle Sisältö: sivu Käyttäjäroolit Edico-istunnoissa 1 Istuntoon kutsutun kirjautuminen 1 Edico Lite, istunnon avausnäkymä 2 Edico S, istunnon avausnäkymä

Lisätiedot

OHJEET HOPSIN TEKEMISEEN KYVYT- PALVELUSSA:

OHJEET HOPSIN TEKEMISEEN KYVYT- PALVELUSSA: Kyvyt.fi-ohjeita / MR 22.12.2011 1(21) OHJEET HOPSIN TEKEMISEEN KYVYT- PALVELUSSA: HOPS-RYHMÄÄN LIITTYMINEN, HOPS-POHJIEN KOPIOINTI, SIVUSTON TEKEMINEN JA HOPSIN MUOKKAAMINEN SISÄLLYS JAMK HOPS-RYHMÄÄN

Lisätiedot

YH2: Office365 II, verkko-opiskelu

YH2: Office365 II, verkko-opiskelu Aulikki Hyrskykari, Antti Sand, Juhani Linna YH2: Office365 II, verkko-opiskelu Huom. Suosittelemme tämän yksilöharjoituksen 2 tekemistä mikroluokassa, jotta yliopiston mikroluokat tulevat edes hieman

Lisätiedot

Harjoitus 1 -- Ratkaisut

Harjoitus 1 -- Ratkaisut Kun teet harjoitustyöselostuksia Mathematicalla, voit luoda selkkariin otsikon (ja mahdollisia alaotsikoita...) määräämällä soluille erilaisia tyylejä. Uuden solun tyyli määrätään painamalla ALT ja jokin

Lisätiedot

zotero www.zotero.org

zotero www.zotero.org zotero www.zotero.org Viitteidenhallintajärjestelmä Zotero toimii Firefox-selaimessa. Muita ilmaisia viitteidenhallintajärjestelmiä ovat esimerkiksi EndNote ja Mendeley. Näissä ohjeissa on kuvataan Zoteron

Lisätiedot

Verkkosivujen Rakenne (HTML)*

Verkkosivujen Rakenne (HTML)* Verkkosivujen Rakenne (HTML)* Hanna Hämäläinen Mediatekniikan laitos *Perustuu Antti Tolppasen, Pia Tukkisen ja Hannu Järvisen kalvoihin Luennon jälkeen osaan tehdä yksinkertaiset verkkosivut sekä lisätä

Lisätiedot

2 Konekieli, aliohjelmat, keskeytykset

2 Konekieli, aliohjelmat, keskeytykset ITK145 Käyttöjärjestelmät, kesä 2005 Tenttitärppejä Tässä on lueteltu suurin piirtein kaikki vuosina 2003-2005 kurssin tenteissä kysytyt kysymykset, ja mukana on myös muutama uusi. Jokaisessa kysymyksessä

Lisätiedot

Orio Portaali Käyttäjäopas v1.0

Orio Portaali Käyttäjäopas v1.0 Orion Orio Portaali Käyttäjäopas v1.0 SISÄLLYS Liity asiakkaaksi 02 Kirjautuminen 03 Tuotehaku 03 Ostoskori 05 Normaalin tilauksen tekeminen 06 Tilaushistoria 08 Asiakaspalvelu ja yleistä tietoa 09 orio.com

Lisätiedot

OMAPALVELU / YLEISTÄ TIETOA. Omapalvelun tuetut selaimet:

OMAPALVELU / YLEISTÄ TIETOA. Omapalvelun tuetut selaimet: OMAPALVELUN KÄYTTÖ OMAPALVELU / YLEISTÄ TIETOA Omapalvelun tuetut selaimet: Internet Explorer 11 eteenpäin Firebox 3.5 eteenpäin Opera 10.5 eteenpäin Safari* ja Chrome uusimmat versiot *Ipad versiolle

Lisätiedot

Yrityspalvelujärjestelmä

Yrityspalvelujärjestelmä Yrityspalvelujärjestelmä Voit tehdä tyylikkäät nettisivut yrityksellesi YPJ:n sivueditorilla. Sivueditorin avulla on helppoa päivittää ittää ja ylläpitää sivuja silloin, i kun sinulle parhaiten sopii.

Lisätiedot

ETÄPALVELU. HALTIK Videoportaali - osallistujan ohje

ETÄPALVELU. HALTIK Videoportaali - osallistujan ohje ETÄPALVELU HALTIK Videoportaali - osallistujan ohje 19.5.2015 Laitevaatimukset Tietokoneessa tulee olla asennettuna: Web-kamera Mikrofoni ja kaiuttimet tai kuulokkeet Tietokoneen internet selaimen tulee

Lisätiedot

Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle

Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle Versio 2008.1 15.10.2008 ohje 15.10.2008 Asennus, käyttöönotto ja päätoiminnot Ohjelmiston tarkoitus Ohjelmiston tarkoitus on yhdistää Peltotuki

Lisätiedot

T2V2 Vaaratilanneilmoitussanomakuvaus

T2V2 Vaaratilanneilmoitussanomakuvaus Versio: 0.3 Muokattu: 23.6.2008 2(10) SISÄLLYS 1 Tarkoitus...3 1.1 Rajaus...3 1.2 Dokumentaatio...3 2 Tietojen esitystavat...3 2.1 Numeerinen tieto...3 2.2 Päivämäärät ja kellonajat...3 2.3 Totuusarvot...4

Lisätiedot

MOODLE 2.5 OPISKELIJAN PIKAOPAS. Hyvinkään lukiot. Versiota päivitetään myöhemmin

MOODLE 2.5 OPISKELIJAN PIKAOPAS. Hyvinkään lukiot. Versiota päivitetään myöhemmin MOODLE 2.5 OPISKELIJAN PIKAOPAS Hyvinkään lukiot Versiota päivitetään myöhemmin Sisältö 1 Yleistä Moodlen käytöstä 1.1 Oma kotisivu 1.2 Profiilin muokkaaminen 1.3 Viestintäasetukset 1.4 Kurssille rekisteröityminen

Lisätiedot

10 yleistä hakukoneoptimointivirhettä

10 yleistä hakukoneoptimointivirhettä 10 yleistä hakukoneoptimointivirhettä Markus Ossi SEO Technician Klikkicom 2011-05-26 2 Henkilökuva Markus Ossi 32 vuotias ekonomi Tehnyt hakukoneoptimointia vuodesta 1998 Hakukoneoptimointiteknikk o Klikkicomissa

Lisätiedot

Sähköinen kuljetuspalveluhakemus - Käyttöohje

Sähköinen kuljetuspalveluhakemus - Käyttöohje Sähköinen kuljetuspalveluhakemus - Käyttöohje Tuetut selaimet Internet Explorer 11 tai uudempi. Microsoft on päättänyt Internet Explorerin (IE) versioiden 8, 9 ja 10 tuen. Firefox 3.5 eteenpäin Opera 10.5

Lisätiedot

Sangen lyhyt L A T E X-johdatus

Sangen lyhyt L A T E X-johdatus Sangen lyhyt L A T E X-johdatus Lari Koponen ja Eetu Ahonen 23.1.2013 Koulutuksen tavoitteet Koulutuksen jälkeen pystyy kirjoittamaan työselostuksen L A T E X:illa, eli Dokumentin rakenne tutuksi Tekstin

Lisätiedot

Mark Summary. Taitaja2015. Skill Number 206 Skill Verkkosivujen tuottaminen. Competitor Name

Mark Summary. Taitaja2015. Skill Number 206 Skill Verkkosivujen tuottaminen. Competitor Name Summary Skill Number 206 Skill Verkkosivujen tuottaminen ing Scheme Lock 08-04-2015 17:32:54 Final Lock 07-05-2015 14:59:04 Criterion Criterion Description s Day 1 Day 2 Day 3 Day 4 Total Award A B C D

Lisätiedot

Ohje Tutkintopalveluun rekisteröitymiseen. Osaamispalvelut

Ohje Tutkintopalveluun rekisteröitymiseen. Osaamispalvelut Ohje Tutkintopalveluun rekisteröitymiseen Osaamispalvelut 1.2.2008 2 (9) Ohje tutkinnon suorittajan rekisteröitymiseen Tutkintopalveluun TIEKEn tutkintoja hallinnoidaan Tutkintopalvelussa, jonka osoite

Lisätiedot

Keski-Suomen Yhteisöjen Tuki Graafinen ohjeistus 2014. www.kyt.fi

Keski-Suomen Yhteisöjen Tuki Graafinen ohjeistus 2014. www.kyt.fi Keski-Suomen Yhteisöjen Tuki Graafinen ohjeistus 2014 1 www.kyt.fi Keski-Suomen Yhteisöjen Tuki on keskisuomalainen kansalaistoiminnan ja sitä edustavien yhteisöjen kehittäjä. Keski-Suomen Yhteisöjen Tuen

Lisätiedot

Pääkäyttäjäkoulutus 5.3.2013 Jarno Malaprade

Pääkäyttäjäkoulutus 5.3.2013 Jarno Malaprade Pääkäyttäjäkoulutus 5.3.2013 Jarno Malaprade Toiveita agendaksi Sivuston asetusten Lisäasetuksetvälilehden eri kenttien merkitys ja niiden sisällön optimointi Yleisesti tietoa, mitä pääkäyttäjä voi kotisivuille

Lisätiedot

KULTTUURIYMPÄRISTÖN TEKIJÄT KILPAILU 2016 MEIDÄN PAIKKA: KILPAILUTYÖN LATAUSOHJEET -SIVUSTOLLE

KULTTUURIYMPÄRISTÖN TEKIJÄT KILPAILU 2016 MEIDÄN PAIKKA: KILPAILUTYÖN LATAUSOHJEET  -SIVUSTOLLE KULTTUURIYMPÄRISTÖN TEKIJÄT KILPAILU 2016 MEIDÄN PAIKKA: KILPAILUTYÖN LATAUSOHJEET WWW.EUROPEANHERITAGEDAYS.COM -SIVUSTOLLE Kansainvälinen sivusto www.europeanheritagedays.com on helppokäyttöinen. Parhaimmillaan

Lisätiedot

XML-merkkaus. Merkkidata, prosessointikomennot, kommentit

XML-merkkaus. Merkkidata, prosessointikomennot, kommentit XML-merkkaus Merkkidata, prosessointikomennot, kommentit Merkkidata Elementtien ja attribuuttien arvot 3Merkkijonot elementtien tunnisteiden välissä 3Attribuuttien arvot 3Kielletyt merkit < & Voidaan korvata

Lisätiedot