Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi

Koko: px
Aloita esitys sivulta:

Download "Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi"

Transkriptio

1 CT30A WWW-sovellukset Luento 1 Jouni Ikonen - Jouni.Ikonen lut.fi linkki Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen

2 CT30A3200 WWW-sovellukset Tämän luennon aiheet: Kurssin yleiset asiat web-sovellukset yleisellä tasolla HTTP-protokollasta Web-sivun perusrakenne (XHTML) Johdanto tyylikirjastojen (CSS) käyttöön Jouni Ikonen 2

3 Kurssikuvaus Laajuus Tavoitteet Sisältö Edellytykset 7 op Opintojakson tavoitteena on tutustuttaa opiskelija WWW-ohjelmointitekniikoihin, - arkkitehtuureihin ja -toteutusvälineisiin. Opintojakso tarjoaa opiskelijalle valmiudet suunnitella ja toteuttaa vuorovaikutteisia WWW-sovelluksia, huomioiden erilaiset tavat sovellusten käyttöön. WWW-sovellusten arkkitehtuurit ja standardit. Ohjelmointikielet ja rajapinnat vuorovaikutteisten asiakas- ja palvelinsovellusten luontiin (esim. JavaScript, PHP, Ajax). WWW-sovellusten sisällön tehokas hallinta ja julkaisu (tietokannat, RSS, julkaisujärjestelmät). CT60A0200 Ohjelmoinnin perusteet, CT30A2002 Tietoliikennetekniikan perusteet. Suositellaan CT60A4301 Tietokannat. Suoritustavat Luentoja 14 h, harjoituksia 12 h, kotitehtäviä, 1. periodi. Luentoja 14 h, harjoituksia 14 h, kotitehtäviä, 2. periodi. Virtuaalitehtävät 21 h, harjoitusten teko 39 h, periodi. Harjoitustyö 61 h, demonstrointitilaisuus 7 h, 3. periodi. Kokonaismitoitus 182 h. Arvostelu 0-5. Jatkuva arviointi (kotitehtävät ja tuntikuulustelut) 20 %. Harjoitustyö 80 %. Jouni Ikonen 3

4 Käytännön asioita Kaksi harjoitustyötä Aktiivisuus: Etukäteen tekemällä, harjoituksissa olemalla, tuntikuulusteluista saa pisteitä loppuarvosanaan.tarkemmat ohjeet assistentilta. Vastaanottoaika: Jouni Ikonen ma 13-14, huone 2514, jikonen lut.fi Antti Knutas ma 15-16, huone 2517, aknutas lut.fi Jouni Ikonen 4

5 Kurssin aiheet WWW-sovellukseen osat yleisellä tasolla Sivuston rakenne ja ulkoasu Rakenne kuvataan XHTML merkkauskielen mukaisesti Sivun ulkoasu määritellään Cascading style sheet (CSS) tyylikirjastoilla Erilaiset tavat luoda dynaamisia www-sovelluksia Asiakasohjelmassa (www-selaimessa) ajettava Javascript WWW-palvelimella suoritettavat dynaamiset sivut ja ohjelmat ja skriptit, esimerkkikielenä PHP Ajax, RSS-syötteet Jouni Ikonen 5

6 Kurssin aiheet / 2 HTML / XHTML, XML, CSS, DOM, JavaSript, kirjastot (JQuery, JSON), javascript debugging, Web - palvelimet Skaalautuvuus, optimointi, Web-framworks, Web sivujen arviointi, APIt - Paikkasidonnaiset palvelut Jouni Ikonen 6

7 Kurssin aiheet Kurssin jälkeen opiskelijan tulisi osata luoda hyvärakenteisia WWW-sivuja XHTML-muodossa, käyttäen ulkoasun määrittelyyn CSS-tyylikirjastoja lisätä dynaamisuutta sivuihin selainohjelmassa ajettavalla JavaScript-koodilla kehittää WWW-palvelimella suoritettavia, selainohjelmalla käytettäviä, sovelluksia, jotka keräävät tietoa käyttäjältä sivun lomakkeiden avulla hyödyntää tietokantaa WWW-sovelluksen tietovarastona parantaa WWW-sovelluksen interaktiivisuutta Ajax-nimen alle niputettujen tekniikoiden avulla julkaista tehtyjä sivuja RSS-syötteitä hyödyntäen Jouni Ikonen 7

8 WWW-sovellus yleisellä tasolla Päätelaitteen käyttäjä määrittelee ohjelmansa (www-selain) käyttöliittymän avulla, mitä tietoa haluaa saada osoitepalkki, hyperlinkit, lomakkeet Asiakasohjelma lähettää käyttäjän pyynnön palvelimelle käyttäen sovittua protokollaa Palvelin suorittaa pyynnön ja hakee pyydetyn resurssin käyttämästään tietovarastosta Palvelin palauttaa pyydetyn resurssin (sivu, kuva, video,...) takaisin asiakasohjelmalle Haettu tieto näytetään päätelaitteen käyttäjälle käyttöliittymän kautta Jouni Ikonen 8

9 WWW-sovellus yleisellä tasolla <?php if ($_POST['foo'] > bar ) { mysql_query("select * FROM foo"); }?> Käyttöliittymä (selain) palvelin Käyttäjä tietovarasto Jouni Ikonen 9

10 Web-sovellus yleisellä tasolla, asiakasohjelmat Yleisimmin käytettäviä asiakasohjelmia on tietokoneiden graafiset wwwselaimet IE, Firefox, Opera, Safari, Chrome,... Pienten päätelaitteiden käyttö selailussa lisääntyy laitteiden ja tietoliikenneyhteyksien kehittyessä puhelinten ja PDA-laitteiden selaimet (WAP- ja XHTML-) Lisäksi käytössä myös pelkästään tekstimuotoisia asiakasohjelmia lynx, links,... Hyviä web-sivuja voidaan käyttää näillä kaikilla Jouni Ikonen 10

11 WWW-sovellus yleisellä tasolla, palvelin Palvelimen tehtävänä on kuunnella asiakasohjelmien pyyntöjä ja palauttaa pyydetyt resurssit takaisin asiakasohjelmalle, mikäli asiakasohjelma tai sen käyttäjä on oikeutettu niitä saamaan Palvelin hakee pyydetyn tiedoston tiedostojärjestelmästä Sivu voidaan muodostaa dynaamisesti pyynnön perusteella, mikäli palvelinohjelmiston yhteydessä on käytössä palvelinpuolen skriptejä ja ohjelmia Tietolähteenä nämä palvelimella suoritettavat ohjelmat voivat tiedostojärjestelmän lisäksi tietokantaa Jouni Ikonen 11

12 Yhteydet asiakkaan ja palvelimen välillä, HTTP-protokolla WWW-selaimen ja -palvelimen välisessä kommunikoinnissa käytetään Hypertext Transfer Protocol -protokollaa (HTTP) kyseessä on tekstimuotoinen sovelluskerroksen tilaton pyyntö-vastaus -protokolla asiakasohjelma (selain) lähettää pyynnön palvelimelle palvelin palauttaa vastauksena tilaviestin ja pyydetyn resurssin (www-sivu, kuva, muu tiedosto) virheelliseen kyselyyn tulee vastauksena kuvaava virhekoodi (404 Not found, 403 Forbidden,...) Jouni Ikonen 12

13 Yhteydet asiakkaan ja palvelimen välillä, HTTP-protokolla Osoitteina käytetään HTTP URL http_url = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] http: - HTTP-protokolla host - palvelin port - valinnainen portti (oletuksena 80) abs path - resurssin sijainti palvelimella query -?-merkillä erotettu osuus sisältää resurssille välitettävän kyselytiedon esim. http: - kertoo käytettävän protokollan (HTTP) - halutun resurssin tarjoava palvelin /kurssit/07-08/ct30a5100/lectures.html - haluttu resurssi esimerkissä selain käyttää oletusporttia 80. Myös kyselyosuus on tyhjä. Jouni Ikonen 13

14 HTTP-pyyntö ja -vastaus GET /kurssit/07-08/ct30a5100/lectures.html HTTP/1.1 Host: User-Agent: Mozilla/ Connection: close HTTP/ OK Date: Thu, 09 Mar :55:03 GMT Server: Apache/ (Debian GNU/Linux) Last-Modified: Sun, 12 Jun :17:44 GMT ETag: "71d77de-60c-42ac27e8" Accept-Ranges: bytes Content-Length: 1548 Content-Type: text/html; charset=iso Via: 1.1 X-Cache: MISS from Connection: close <html>... Jouni Ikonen 14

15 HTTP-pyyntö ja -vastaus Kun selain on saanut palvelimelta vastauksena pyytämänsä sivun, se parsii sivun rakenteen ja lähettää uudet pyynnöt palvelimelle kaikista sivulla esitettävistä kuvista ja muista objekteista Palvelin lähettää jokaiseen kyselyyn vastauksina edellisen kaltaiset otsikkotiedot ja kysytyn resurssin Resurssin tyyppi ilmaistaan vastausviestin otsikkokentässä (Contenttype) Jouni Ikonen 15

16 HTTP-pyyntö ja -vastaus esim. kuva Pyyntö: GET /images/toppic_fin HTTP/1.1 Host: User-Agent: Mozilla/ Connection: close Vastaus: HTTP/ OK Date: Thu, 09 Mar :23:19 GMT Server: Apache/ (Debian GNU/Linux) PHP/ Content-Location: toppic_fin.jpg Vary: negotiate TCN: choice Last-Modified: Fri, 03 Jan :25:06 GMT ETag: "10249a09-78a2-3e1556f2; a" Accept-Ranges: bytes Content-Length: Connection: close Content-Type: image/jpeg <kuvadata> Jouni Ikonen 16

17 Staattinen vs. dynaaminen resurssi WWW-palvelimella olevat resurssit voivat olla staattisia tai dynaamisia staattinen resurssi on kyselystä toiseen samanlainen, muuttuu vain ylläpitäjän editoimana dynaaminen taas vaihtelee riippuen osoitteessa?-merkin jälkeen tulevista tai otsikkotiedoissa määritellyistä kyselytiedoista ja niiden vaikutuksesta resurssin luomiseen (kts. esimerkki) mikäli resurssin käyttämän tietolähteen (esim. tietokanta) sisältö muuttuu Tällä kurssilla olemme erityisesti kiinnostuneita erilaisista dynaamisista resursseista käydään kuitenkin staattisten sivujen perusajatukset ensin Jouni Ikonen 17

18 Staattinen vs. dynaaminen resurssi Seuraavassa esimerkissä näytetään, miten sivun sisältö muuttuu, kun haettavalle resurssille, testi.php -skriptille, annetaan osoitteessa syötteenä nimi -niminen muuttuja, jonka arvo vaihtelee esim. HTML-lomakkeiden tiedot välitetään tällä tavoin, mikäli käytetään GETmetodia (lisää lomakkeista ja niiden käsittelystä myöhemmillä luennoilla) testi.php: <?PHP print "Hello ". $_GET["nimi"]. "!";?> Jouni Ikonen 18

19 Staattinen Dynaaminen Jouni Ikonen 19

20 Sivun perusrakenne, XHTML The Extensible Hypertext Markup Language on nimensä mukaisesti merkkauskieli XHTML-tiedosto on tekstitiedosto koostuen sisäkkäisistä elementeistä Elementti alkaa merkkaustagilla (esim. <h1>), jonka jälkeen tulee elementin sisältö (esim. Sivun otsikko), ja lopuksi elementin päättävä tagi (</h1>) <h1>sivun otsikko</h1> mikäli elementti voidaan määritellä yhdellä tagilla (esim. kuva), aloituselementti päätetään muotoon />, esim. <img alt= kuvaus src= kuva.jpg /> Elementti voi sisältää sisällään muita elementtejä XHTML korvaa aikaisemman HTML 4 määrityksen Kannattaa tehdä sivuista XHTML standardin mukaisia oikeellisuuden ja yhteensopivuuden takia Jouni Ikonen 20

21 Historiaa, HTML:n versiot Internet Engineering Task Force (IETF) julkaisi ensimmäisen HTMLversion vedoksena 1993 HTML 2.0 julkaistiin RFC:nä 1995 HTML (W3C) HTML (W3C) HTML (W3C) XHTML 1.0 vuonna 2000 XHTML 1.1 vuonna 2001 XHTML 2.0 (W3C Working Draft 26 July 2006) working group closed 2010 => HTML 5 Nykytilanne XHTML ja HTML 5 käytössä. XHTML on kova juttu koska se edellyttää oikeaa syntaxia => netti on täynnä sivuja, joiden syntaksi on sinne päin, jolloin ne näytetään erilailla eri selaimilla Käyttäkää XHTML:ää myös html 5:n kanssa! Jouni Ikonen 21

22 Historiaa, HTML:n viimeiset versiot Tiedoston HTML-versio ja sen tarkempi määritys kerrotaan tiedoston ensimmäisellä rivillä. HTML 4.01 sisältää seuraavat määritykset (nämä tiedot ihan vaan viitteenä, käytetään XHTML-versioita) HTML 4.01 Strict DTD sisältää vain elementtejä ja attribuutteja, jotka eivät ole "paheksuttuja (deprecated). Kehyksiä ei sallita. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> The HTML 4.01 Transitional DTD kaiken Strict DTD:stä :n mukaan "paheksutut" elementit ja attribuutit. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> The HTML 4.01 Frameset DTD sisältää kaiken edellisestä + kehykset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Jouni Ikonen 22

23 XHTML-versiot ja määritykset Tiedoston XHTML-versio ja sen tarkempi määritys kerrotaan tiedoston alussa heti XML-määrityksen (jos on lisätty) jälkeen <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> XHTML 1.0 Strict on XML-versio HTML 4.01 strict:stä, ei salli ulkoasun määrityksiä (esim. fontin HTML-koodissa määrittelevä <font> ja monet muut on poistettu) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> XHTML 1.0 Transitional on XML-muotoinen siirtymävaiheen HTML 4.01:n johdannainen, joka hyväksyy ulkoasun määrityksiä myös suoraan tagiin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> XHTML 1.0 Frameset on XML-versio HTML 4 Frameset:sta Jouni Ikonen 23

24 XHTML-sivun vaadittu perusrakenne XHTML sisältää peruselementtejä, jotka tulisi olla kaikissa XHTML-sivuissa mukana edellisellä kalvolla ollut dokumenttityypin määritys <html></html> -elementti sisältää koko HTML-sivun, muut elementit tulevat sen sisälle <head></head> sisältää otsikkotiedot, joita ei näytetä selaimen ikkunassa, paitsi vaadittu <title>selainohjelman osoitepalkissa näkyvä otsikko</title> <body></body> sisältää viestin rungon eli sisällön, joka näkyy selaimen ikkunassa Jouni Ikonen 24

25 XHTML-sivun vaadittu perusrakenne <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>otsikkopalkin otsikko</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> </body> </html> Jouni Ikonen 25

26 XHTML-peruselementit vaadittujen lisäksi XHTML:n peruselementteihin kuuluu otsikkotagit <h1></h1>... <h6></h6> <p>kappaleiden määritys</p> ja rivin-<br /> vaihdot <!-- Kommentit, joita ei näy sivun ulkoasussa --> Sivun yhteydessä näytettävä <img alt="vaihtoehtoinen teksti" src="kuva.jpg /> <a href="toinensivu.html">linkit toiselle sivulle</a> kahdessa viimeisessä elementissä on myös mukana attribuutti (ensimmäsessä näytettävän kuvan osoite, toisessa linkin kohdeosoite) Rivinvaihdossa ja kuvanliitoselementissä ei ole elementin päättävää tagia, joten tagi päätetään /> -muotoisesti Jouni Ikonen 26

27 XHTML:n muotoilutagit XHTML sisältää tekstin muotoiluun on erilaisia tageja, kuten <strong>lihavoinnin</strong>, <i>kursiivin</i> jne. CSS-tyylikirjastojen käyttö on syrjäyttänyt viimeisimmissä määrityksissä tietyt muotoilutagit, ja sen vuoksi ne eivät ole sallittuja tiukimmissa XHTML-tyyppimäärityksissä Esim. alleviivausta ei hyväksytä Strict-määrittelyssä Suuntauksena on, että XHTML-elementeillä kuvataan sivun rakennetta ja sisältö, ja CSS määrittelee esitystavan Jouni Ikonen 27

28 XHTML:n muotoilutageja Tagi Kuvaus <b> lihavoitu <big> suurennettu <em> korostettu <i> kursiivi <small> pieni <strong> vahvennettu <sub> alaindeksi <sup> yläindeksi <ins> täydennetty teksti <del> poistettu teksti Jouni Ikonen 28

29 HTML:n muotoilutageja <code> tietokoneen koodia <kbd> näppäimistöltä kirjoitettavaa tekstiä <samp> esimerkkikoodia <var> muuttuja <pre> esimuotoiltu teksti Monet elementit eivät kuvaa pelkästään muotoilua (toisin kuin esim. b) vaan kertovat tekstin tyypin samalla (esim. käyttöohjeessa kyseessä on <kbd>näppäimistöltä kirjoitettava teksti</kbd> ) Jouni Ikonen 29

30 Eroja ja rajoituksia XHTML:n versioissa Strict-määrityksessä kiellettyjen paheksuttujen elementtien ja attribuuttien toiminnot on toteutettavissa paremmin toisella tavalla esim. CSS-tyylien avulla tapahtuva muotoilu on Strict:ssä syrjäyttänyt tietyt elementit (esim. <font></font>, <u>alleviivaus</u>, <s>yliviivattu</s> tai <center></center> eivät ole sallittuja Strict määrityksessä) Transitional on nimensä mukaisesti siirtymävaiheen määritys, jossa kuitenkin näitä laajasti käytettyjä elementtejä saa poikkeuksellisesti käyttää yleisesti ottaen nämä eivät kuitenkaan kuulu XHTML:ään XHTML ei hyväksy myöskään kehyksiä muuten kuin Frameset DTD:tä käytettäessä kehyksistä ollaankin pyrkimässä eroon WWW-sivuissa, koska ne aiheuttavat vaikeuksia kirjanmerkkauksissa ja tietyissä selaimissa Jouni Ikonen 30

31 XHTML-sivun oikeellisuus XHTML-sivun oikeellisuuden voi tarkistaa osoitteessa: sivun voi syöttää tarkistussovellukselle antamalla osoitteen tai lähettämällä tiedoston sivun versio tulee olla mainittu sivun ensimmäisellä rivillä, muuten oikeellisuuden tarkastus epäonnistuu jo siinä Oikeellisuus varmistaa, että standardia tukevat selaimet näyttävät sivun kuten on tarkoitettukin Jouni Ikonen 31

32 Muita XHTML:n sääntöjä sisäkkäiset XHTML-elementit tulee olla oikein päin <b><i>this text is bold and italic</b></i> (väärin) <b><i>this text is bold and italic</i></b> (oikein) XHTML-dokumenttien tulee olla hyvin muotoiltu <html> <head>... </head> <body>... </body> </html> Tagien nimet tulee olla kirjoitettu pienillä kirjaimilla XML:ssä (jollainen XHTML-dokumenttikin on), <tagi> ja <TAGI> tarkoittavat eri asiaa, XHTML:n tagit kirjoitetaan pienellä Elementit tulee sulkea <p>tässä on vääränlainen kappale <p>toinen väärä kappale <p>tässä on oikeanlainen kappale</p><p>ja toinen</p> Myös yksittäiset tulee sulkea, kuten <br /> rivinvaihdot ja <img src="kuva.jpg" alt="kuva" /> Jouni Ikonen 32

33 XHTML:n sääntöjä Attribuuttien nimet tulee olla pienellä kirjoitettu Attribuuttien arvot tulee olla lainausmerkeissä ei <table width=100%> vaan <table width="100%"> Attribuuttien minimointi on kielletty ei <input checked> vaan <input checked="checked" /> id-attribuutti korvaa name-attribuutin yhteensopivuuden takia voi käyttää molempia, <img src="picture.gif" id="picture1" name="picture1" /> (kertausta) XHTML DTD määrittelee pakolliset elementit minimi-xhtml: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>title goes here</title> </head> <body> Body text goes here </body> </html> Jouni Ikonen 33

34 XHTML -hyperlinkit Hyperlinkki tehdään XHTML-sivuun a-elementillä, jossa on määritelty href-attribuutti elementin sisältö (teksti, kuva) toimii linkkinä Linkki voi viitata tiedoston lisäksi hakemistoon, jolloin käytetään oletustiedostoa (usein index.html), tai se voi viitata jopa sivun tietynnimiseen (määritelty id-attribuutilla) elementtiin (linkissä #). <a href= sivu.html#elementti >Linkki elementtiin</a> Linkki voi olla suhteellinen tai absoluuttinen absoluuttinen: <a href= >Harjoitukset</a> suhteellinen: <a href= exercises.html >Harjoitukset</a> Suhteellisessa voi käyttää apuna viittauksia alihakemistoon, alihakemisto/index.html, yhtä ylempään hakemistoon../index.html tai palvelimen juurihakemistoon /index.html Jouni Ikonen 34

35 XHTML, elementtien attribuutit Elementeille voidaan määritellä attribuutteja, joiden käyttötapoina on esim. edellisellä kalvolla mainitut linkin osoitteet, samoin kuin img-elementin src eli kuvan lähde nimi id -attribuutilla, luokka class -attribuutilla, elementin yhteydessä määritellään tyyli style attribuutilla <p id= kappaleentunnus >kappaleen teksti</p> <img alt= kuvan tekstimuotoinen kuvaus src= kuva.jpg /> Jouni Ikonen 35

36 HTML sivun perusrakenne <!DOCTYPE html> <-- määrittelee SGML dokumentti tyypin määrityksen (DTD) --> <! Tiedoston nimi ja tarkoitus --> <html lang="en"> <head> <title>otsikkopalkin otsikko</title> <meta charset= "utf-8" /> <-- valittu merkistö --> </head> <body> </body> </html> Footer

37 Cascading Style Sheets (CSS) Cascading Style Sheet -tyylien avulla on tarkoitus erottaa toisistaan sivun sisältö ja esitystapa Määrittelee kuinka XHTML-elementit näytetään Otettu käyttöön HTML 4.0:ssa Tyylit tallennettu usein ulkoisiin CSS-tyylitiedostoihin Useita sisäkkäisiä tyylejä voi olla määritelty: käsittelyjärjestys: 1. XHTML-elementin yhteydessä mainittu tyyli, 2. XHTML-sivun sisäisessä tyylimäärityksessä (<head>elementissä), 3. ulkoisessa (linkitetyssä) ja lopuksi 4. selaimen oletustyyli Jouni Ikonen 37

38 CSS:n käyttö CSS voi olla määritetty erillisessä tyylitiedostossa: <head>... <link rel="stylesheet" type="text/css" tyyli.css: href="tyyli.css" />... </head> CSS voi olla sisällytetty tiedostoon: <head>... <style type="text/css"> p {margin-left: 20px} </style>... </head> p {margin-left: 20px} CSS voi olla määritetty elementin yhteydessä: <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> Jouni Ikonen 38

39 CSS:n käyttö CSS:n avulla voidaan määritellä tietylle elementtityypille muotoilu, voidaan luoda muotoiluluokkia (nimi alkaa pisteellä), tai tietyn tunnisteen (#): p { } {margin-left: 20px}.marginaali { } {margin-left: 20px} Mitä koskee? kaikki <p></p>-elementit, ellei elementeissä ole muuta määritelty, kuten esim. <p class= marginaali >teksti</p> #nimi { text-decoration: underline; } <p id= nimi >Alleviivaus</p> Jouni Ikonen 39

40 CSS, esimerkki punainen.html <html> <head> <link rel="stylesheet" type="text/css" href="puna.css" /> </head> <body> <p>tässä linkitetty punaisen taustavärin määrittelevä CSS.</p> </body></html> sininen.html <html> <head> <link rel="stylesheet" type="text/css" href="sini.css" /> </head> <body> <p>tässä linkitetty sinisen taustavärin määrittelevä CSS.</p> </body></html> puna.css: p { color: #FFFFFF; } body { background-color: red; } sini.css: p { color: #FFFFFF; } body { background-color: blue; } Jouni Ikonen 40

41 CSS, esimerkki Jouni Ikonen 41

42 Yhteenveto Käytiin läpi vähän perusasioita www-sovelluksista WWW-sovellus yleisellä tasolla Asiakasohjelman/laitteen ja palvelimen välillä HTTP pyyntövastaus -protokolla Palvelimelta haettavat resurssit joko staattisia tai dynaamisia Merkkauskieli XHTML:n peruselementit ja säännöt CSS-tyylikirjastojen perusasiat Jouni Ikonen 42

43 Linkkejä XHTML- ja CSS-määritykset määritellyt world wide web konsortio: Sivujen oikeellisuuden validointi: HUOM! XHTML 1.0 validointi vaatii (vs. HTML) XHTML DOCTYPE määrityksen. <!DOCTYPE html> ei riitä html-elementtiin xmlns = kommentoi pois <meta characterset = utf-8 /> PHP: Jouni Ikonen 43

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

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

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

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

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

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

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

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

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

Järjestelmäarkkitehtuuri (TK081702)

Järjestelmäarkkitehtuuri (TK081702) Järjestelmäarkkitehtuuri (TK081702) yleistyvät verkkopalveluissa Youtube Google... Avaavat pääsyn verkkopalvelun sisältöön. Rajapintojen tarjoamia tietolähteitä yhdistelemällä luodaan uusia palveluja,

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

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

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

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

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

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

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

Miten Internet toimii. Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2013

Miten Internet toimii. Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2013 Miten Internet toimii Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2013 Luennon sisältö 1. Esimerkki 1: nettiselailu 2. Esimerkki 2: sähköposti 3. Internetin protokollapino 2 ESIMERKKI 1: NETTISELAILU

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

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely. XML prosessointi Miten XML dokumentteja luetaan ja kirjoitetaan XML prosessori lukee ja välittää XML dokumentin sovellukselle. Se sisältää entieettikäsittelijän (mahdollisesti) XML jäsentimen Sovellus

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

Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript)

Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript) Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript) Kurssin toisessa harjoitustyössä tutustutaan verkkosivujen toiminnallisuuden toteuttamiseen JavaScript:n avulla. Lisäksi käydään läpi verkkosivuston

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

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

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

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

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

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

10 Nykyaikainen WWW-arkkitehtuuri

10 Nykyaikainen WWW-arkkitehtuuri 10 Nykyaikainen WWW-arkkitehtuuri è è è 10 Nykyaikainen WWW-arkkitehtuuri WWW on ylivoimaisesti suosituin hypertekstijärjestelmä. Käydään seuraavaksi läpi nykyaikaisen WWW-arkkitehtuurin perusteet. Vuonna

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

Internet-pohjaisen oppimisympäristön laadinta. Luento 3

Internet-pohjaisen oppimisympäristön laadinta. Luento 3 Internet-pohjaisen oppimisympäristön laadinta Luento 3 Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista 31.01.2013 IPOPPLA 2 Toteutustekniikoista

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

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

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

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

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

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

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

Dokumentin nimi LOGO:) Tampereen teknillinen yliopisto. Ryhmä XXX: Projektiryhmän nimi Projektin nimi

Dokumentin nimi LOGO:) Tampereen teknillinen yliopisto. Ryhmä XXX: Projektiryhmän nimi Projektin nimi Tampereen teknillinen yliopisto Ohjelmistotekniikan laitos OHJ-3500 Ohjelmistotuotannon projektityö LOGO:) Ryhmä XXX: Projektiryhmän nimi Projektin nimi Dokumentin nimi Jakelu: (Ryhmä) (Kurssihenkilökunta)

Lisätiedot

DOCTYPE, DTD JA DOKUMENTIN METATIEDOT HTML- JA XHTML-DOKUMENTEISSA

DOCTYPE, DTD JA DOKUMENTIN METATIEDOT HTML- JA XHTML-DOKUMENTEISSA DOCTYPE, DTD JA DOKUMENTIN METATIEDOT HTML- JA XHTML-DOKUMENTEISSA Yleistä Suuri osa Clt132-kurssin asioista on opiskelijan omatoimisen selvittämisen varassa eikä niistä ole mielekästä laatia erityistä

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

Johdatus rakenteisiin dokumentteihin

Johdatus rakenteisiin dokumentteihin -RKGDWXVUDNHQWHLVLLQGRNXPHQWWHLKLQ 5DNHQWHLQHQGRNXPHQWWL= rakenteellinen dokumentti dokumentti, jossa erotetaan toisistaan dokumentin 1)VLVlOW, 2) UDNHQQHja 3) XONRDVX(tai esitystapa) jotakin systemaattista

Lisätiedot

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto/Opetusteknologiapalvelut 2014 Tietokanta Tietokanta on työkalu, jolla opettaja ja opiskelijat voivat julkaista tiedostoja, tekstejä, kuvia ja linkkejä alueella. Opettaja määrittelee lomakkeen muotoon kentät, joiden kautta opiskelijat

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

Uutisjärjestelmä. Vaatimusmäärittely. Web-palvelujen kehittäminen. Versio 1.3

Uutisjärjestelmä. Vaatimusmäärittely. Web-palvelujen kehittäminen. Versio 1.3 Uutisjärjestelmä Vaatimusmäärittely Versio 1.3 Sisällys 1 Muutoshistoria... 4 2 Viitteet... 4 3 Sanasto... 4 3.1 Lyhenteet... 4 3.2 Määritelmät... 4 4 Johdanto...5 4.1 Järjestelmän yleiskuvaus... 5 4.2

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

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

Hakukoneoptimoinnin ABC

Hakukoneoptimoinnin ABC Hakukoneoptimoinnin ABC Sisältö Mitä on hakukoneoptimointi? Miten hakukoneoptimointia tehdään? Miten valitset oikeat hakusanat? Miten pääsee Googlen hakutuloksissa ensimmäiselle sivulle? Mitä on hakukoneoptimointi?

Lisätiedot

Järjestelmäarkkitehtuuri (TK081702) AJAX, Asynchronous JavaScript And XML. AJAX, Asynchronous JavaScript And XML

Järjestelmäarkkitehtuuri (TK081702) AJAX, Asynchronous JavaScript And XML. AJAX, Asynchronous JavaScript And XML Järjestelmäarkkitehtuuri (TK081702) Ajax 2000-luvun alkuvuosina selainsotien rauhoituttua ohjelmistotalot alkoivat kehittää selainten luoman uuden ohjelmointiympäristön käyttötapoja. Syntyi AJAX (Asynchronous

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

Tyylien käyttö. 5 WWW-hypermedian perusta: HTML

Tyylien käyttö. <LINK href=mystyle.css rel=stylesheet type=text/css> 5 WWW-hypermedian perusta: HTML Tyylien käyttö Tyylien (style) ideana on HTML:n tapauksessa erottaa toisistaan dokumentin rakenne ja ulkoasu Tavoitteena on, että dokumentin loogisen rakenteen ja ulkoasun koodaus erotetaan toisistaan

Lisätiedot

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit

Android ohjelmointi Tunti 2. Käyttöliittymät ja resurssit Android ohjelmointi Tunti 2 Käyttöliittymät ja resurssit Debug Log luokka mahdollistaa debug tulostamisen ADB:n kautta konsoliin (esim. DDMS:ään) esim. Log.println(Log.INFO, TAG, Tämä on println ); Voidaan

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

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

DOM ja Ajax. Jaana Holvikivi Metropolia. J.Holvikivi

DOM ja Ajax. Jaana Holvikivi Metropolia. J.Holvikivi DOM ja Ajax Jaana Holvikivi Metropolia Sisältö Client - server communication Javascriptin käyttö DOM XMLHTTP pyyntö Ajaxin toiminta Esimerkkitapauksia Sivujen haku HTTP:llä Selain: HTML, Skriptit, Plug-in

Lisätiedot

Tentti erilaiset kysymystyypit

Tentti erilaiset kysymystyypit Tentti erilaiset kysymystyypit Monivalinta Monivalintatehtävässä opiskelija valitsee vastauksen valmiiden vastausvaihtoehtojen joukosta. Tehtävään voi olla yksi tai useampi oikea vastaus. Varmista, että

Lisätiedot

Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä.

Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeet Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeen tyylit kannattaa määritellä omaan, eriliseen,

Lisätiedot

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

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

Lisätiedot

Vineyard Koulutus. Verkkopalvelut

Vineyard Koulutus. Verkkopalvelut Vineyard International Oy versio 2014/09 1(8) Vineyard Koulutus Verkkopalvelut Vineyard International Oy versio 2014/09 2(8) 1. Koulutusten julkaisu 1.1. Koulutuslistan valinta Koulutuksia voi palvelussa

Lisätiedot

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa WWW ja tietokannat WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa tekstiä, kuvia, hyperlinkkejä Staattiset sivut kirjoitettu kerran, muuttaminen käsin ongelmana pysyminen ajantasalla Ylläpito hankalaa,

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

Miten Internet toimii. Tuomas Aura T Johdatus tietoliikenteeseen kevät 2010

Miten Internet toimii. Tuomas Aura T Johdatus tietoliikenteeseen kevät 2010 Miten Internet toimii Tuomas Aura T-110.2100 Johdatus tietoliikenteeseen kevät 2010 Outline 1. Esimerkki 1: nettiselailu 2. Esimerkki 2: sähköposti 3. Internetin protokollapino 2 ESIMERKKI 1: NETTISELAILU

Lisätiedot

Action Request System

Action Request System Action Request System Manu Karjalainen Ohjelmistotuotantovälineet seminaari HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos 25.10.2000 Action Request System (ARS) Manu Karjalainen Ohjelmistotuotantovälineet

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

Toimintaympäristön kuvaus. LTC-Otso Myyjän työkalu (POC)

Toimintaympäristön kuvaus. LTC-Otso Myyjän työkalu (POC) LTC-Otso Myyjän työkalu (POC) Toimintaympäristön kuvaus 21 toukokuu, 2015 Sisältö 1 Johdanto... 3 1.1 Dokumentin tavoite... 3 1.2 Dokumentin yleiskuvaus... 3 2 Järjestelmälle asetetut vaatimukset... 3

Lisätiedot

Miten Internet toimii?

Miten Internet toimii? Miten Internet toimii? WWW-sivu 2 HTML-koodi Nixu International Nixu

Lisätiedot

Miten Internet toimii. Jyry Suvilehto T Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2013

Miten Internet toimii. Jyry Suvilehto T Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2013 Miten Internet toimii Jyry Suvilehto T-110.1100 Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2013 Sisältö 1. Internet ylhäältä alas 2. Internetin protokollapino 3. Katse kohti tulevaisuutta

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

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

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

Heikki Helin Metatiedot ja tiedostomuodot

Heikki Helin Metatiedot ja tiedostomuodot Heikki Helin 6.5.2013 Metatiedot ja tiedostomuodot KDK:n metatiedot ja tiedostomuodot KDK:n tekniset määritykset ja niiden väliset suhteet Aineistojen valmistelu ja paketointi on hyödyntäville organisaatioille

Lisätiedot

KURSSIX: KURSSIEN HALLINTA -OHJELMA. Kurssix-ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3

KURSSIX: KURSSIEN HALLINTA -OHJELMA. Kurssix-ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3 1 KURSSIX: KURSSIEN HALLINTA -OHJELMA -ohjelman esittely 2 Kirjautuminen 2 Käyttöliittymä 3 Kurssin luominen Kurssin lisääminen 4 Kurssitietojen muuttaminen 5 Kurssin poistaminen 5 Kurssin opettajan määrittely

Lisätiedot

Toimita nämä mainosmuodot 3 arkipäivää ennen kampanjan alkua: JPG, GIF, PNG, Flash ja kolmannen osapuolen tagin takaa ladattavat aineistot

Toimita nämä mainosmuodot 3 arkipäivää ennen kampanjan alkua: JPG, GIF, PNG, Flash ja kolmannen osapuolen tagin takaa ladattavat aineistot Onlineaineisto Onlineaineiston toimitus: onlinetrafiikki@aller.fi Toimita nämä mainosmuodot 3 arkipäivää ennen kampanjan alkua: JPG, GIF, PNG, Flash ja kolmannen osapuolen tagin takaa ladattavat aineistot

Lisätiedot

Datanhaku www-käyttöliittymästä Mikko Parviainen, Ilmatieteen laitos / tietojärjestelmät mikko.parviainen@fmi.fi

Datanhaku www-käyttöliittymästä Mikko Parviainen, Ilmatieteen laitos / tietojärjestelmät mikko.parviainen@fmi.fi Helsinki Testbed tutkijankäyttöliittymä Datanhaku www-käyttöliittymästä Mikko Parviainen, Ilmatieteen laitos / tietojärjestelmät mikko.parviainen@fmi.fi 7.4.2006 Taustaa Helsinki Testbed on Ilmatieteen

Lisätiedot

Asko Ikävalko, k0201291 22.2.2004 TP02S-D. Ohjelmointi (C-kieli) Projektityö. Työn valvoja: Olli Hämäläinen

Asko Ikävalko, k0201291 22.2.2004 TP02S-D. Ohjelmointi (C-kieli) Projektityö. Työn valvoja: Olli Hämäläinen Asko Ikävalko, k0201291 22.2.2004 TP02S-D Ohjelmointi (C-kieli) Projektityö Työn valvoja: Olli Hämäläinen Asko Ikävalko LOPPURAPORTTI 1(11) Ratkaisun kuvaus Käytetyt tiedostot Tietuerakenteet Onnistuin

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

VAATIMUSMÄÄRITTELY. Polku http://code.google.com/p/polku-projekti/ Versio 1.2. Projektiryhmä

VAATIMUSMÄÄRITTELY. Polku http://code.google.com/p/polku-projekti/ Versio 1.2. Projektiryhmä VAATIMUSMÄÄRITTELY Polku http://code.google.com/p/polku-projekti/ Versio 1.2 Projektiryhmä Janne Pihlajaniemi Antti Jämsén Maria Hartikainen Pekka Kallioniemi Jorma Laajamäki Panu Tunttunen Nina Tyni Joonas

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

Osallistavan suunnittelun kyselytyökalu

Osallistavan suunnittelun kyselytyökalu Osallistavan suunnittelun kyselytyökalu Käyttöohje ARFM- hankkeessa jatkokehitetylle SoftGIS-työkalulle Dokumentti sisältää ohjeistuksen osallistavan suunnittelun työkalun käyttöön. Työkalu on käytettävissä

Lisätiedot

Alkuun HTML5 peliohjelmoinnissa

Alkuun HTML5 peliohjelmoinnissa Paavo Räisänen Alkuun HTML5 peliohjelmoinnissa www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida ja levittää ei kaupallisissa tarkoituksissa. Sisällysluettelo 1: Alkusanat 2: Alkuun 3: Pelinäkymä

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

www.solita.fi solita@solita.fi

www.solita.fi solita@solita.fi www.solita.fi solita@solita.fi JAVA-SOVELLUSTEN RAKENTAMINEN INTEGROITUUN YMPÄRISTÖÖN Jarno Peltoniemi Solita Oy 10.5.2005 Aiheet Johdanto Portaalit, portletit Oracle Portal Java-sovelluksen rakentaminen

Lisätiedot

2. Sovelluksia ja sovellusprotokollia

2. Sovelluksia ja sovellusprotokollia 2. Sovelluksia ja sovellusprotokollia 2.1. WWW (World Wide Web) 2.2. Sähköposti 2.3. DNS (Domain NameSystem) 23.1.2002 1 Verkkosovellus sovellusprotokolla Sovellusprotokolla on vain osa hajautettua

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

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

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

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

OHJE 1 (14) Peruskoulun ensimmäiselle luokalle ilmoittautuminen Wilmassa

OHJE 1 (14) Peruskoulun ensimmäiselle luokalle ilmoittautuminen Wilmassa OHJE 1 (14) Peruskoulun ensimmäiselle luokalle ilmoittautuminen Wilmassa Wilman hakemukset ja muut lomakkeet EIVÄT NÄY mobiililaitteisiin asennettavissa Wilma-sovelluksissa. Huoltajan tulee siis käyttää

Lisätiedot

Satakunnan ammattikorkeakoulu. Joona Vaurio OPEROINTIPANEELI WWW-PALVELIMENA

Satakunnan ammattikorkeakoulu. Joona Vaurio OPEROINTIPANEELI WWW-PALVELIMENA Satakunnan ammattikorkeakoulu Joona Vaurio OPEROINTIPANEELI WWW-PALVELIMENA Tekniikka ja merenkulku Pori Tietotekniikan koulutusohjelma Ohjelmointitekniikan suuntautumisvaihtoehto 2008 OPEROINTIPANEELI

Lisätiedot

Luento 12: XML ja metatieto

Luento 12: XML ja metatieto Luento 12: XML ja metatieto AS-0.110 XML-kuvauskielten perusteet Janne Kalliola XML ja metatieto Metatieto rakenne sanasto Resource Description Framework graafikuvaus XML Semanttinen Web agentit 2 1 Metatieto

Lisätiedot

BlueJ ohjelman pitäisi löytyä Development valikon alta mikroluokkien koneista. Muissa koneissa BlueJ voi löytyä esim. omana ikonina työpöydältä

BlueJ ohjelman pitäisi löytyä Development valikon alta mikroluokkien koneista. Muissa koneissa BlueJ voi löytyä esim. omana ikonina työpöydältä Pekka Ryhänen & Erkki Pesonen 2002 BlueJ:n käyttö Nämä ohjeet on tarkoitettu tkt-laitoksen mikroluokan koneilla tapahtuvaa käyttöä varten. Samat asiat pätevät myös muissa luokissa ja kotikäytössä, joskin

Lisätiedot

Ohjelmistojen mallintamisen ja tietokantojen perusteiden yhteys

Ohjelmistojen mallintamisen ja tietokantojen perusteiden yhteys Ohjelmistojen mallintamisen ja tietokantojen perusteiden yhteys Tällä kurssilla on tutustuttu ohjelmistojen mallintamiseen oliomenetelmiä ja UML:ää käyttäen Samaan aikaan järjestetyllä kurssilla on käsitelty

Lisätiedot

Valppaan asennus- ja käyttöohje

Valppaan asennus- ja käyttöohje Versio Päiväys Muokkaaja Kuvaus 0.9 16.2.2006 Tuukka Laakso Korjattu versio 0.1 Antti Kettunen Alustava versio Sisällysluettelo 1 Johdanto...2 2 Valppaan asennus...3 2.1 Valppaan kääntäminen...3 2.2 Valmiiksi

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

OSI ja Protokollapino

OSI ja Protokollapino TCP/IP OSI ja Protokollapino OSI: Open Systems Interconnection OSI Malli TCP/IP hierarkia Protokollat 7 Sovelluskerros 6 Esitystapakerros Sovellus 5 Istuntokerros 4 Kuljetuskerros 3 Verkkokerros Linkkikerros

Lisätiedot

TIETOKANNAT: MYSQL & POSTGRESQL Seminaarityö

TIETOKANNAT: MYSQL & POSTGRESQL Seminaarityö TIETOKANNAT: MYSQL & POSTGRESQL Seminaarityö Tekijät: Eemeli Honkonen Joni Metsälä Työ palautettu: SISÄLLYSLUETTELO: 1 SEMINAARITYÖN KUVAUS... 3 2 TIETOKANTA... 3 2.1 MITÄ TIETOKANNAT SITTEN OVAT?... 3

Lisätiedot

T harjoitustyö, kevät 2012

T harjoitustyö, kevät 2012 T-110.4100 harjoitustyö, kevät 2012 Kurssiassistentit T-110.4100@tkk.fi Tietotekniikan laitos Perustieteiden korkeakoulu Aalto-yliopisto 31.1.2012 Yleistä Kurssin osasuoritteita ovat kaksi osatenttiä,

Lisätiedot

Pikaohjeet A&O oppimisympäristön käytön aloittamiseen

Pikaohjeet A&O oppimisympäristön käytön aloittamiseen Pikaohjeet A&O oppimisympäristön käytön aloittamiseen 1. Kirjaudu A&O-ympäristöön Verkkopalvelun sisällöntuotanto kurssilla käytettävä A&O alusta löytyy verkko-osoitteesta: http://ao4.ee.tut.fi/hypermedia/

Lisätiedot