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

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

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

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/ 1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon

Lisätiedot

Taustaa. CGI-ohjelmointi

Taustaa. CGI-ohjelmointi Taustaa CGI-ohjelmointi CGI = Common Gateway Interface Hyvin yksinkertainen ja helppo tapa toteuttaa dynaamisuutta ja interaktivisuutta htmldokumentteihin Kehitetty tiedon siirtoon palvelimen ja asiakasselaimen

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

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

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

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

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

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

Lisätiedot

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

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN Tämän tehtävän tarkoitus on tutustuttaa ympäristöön sekä tutustuttaa wwwdokumenttien tekoon php:llä. Alkutoimet Varmistetaan, että verkkolevyllä on kansio

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

T-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

T-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot T-111.361 Hypermediadokumentin laatiminen -Ohjelmointi Peruskäsitys www-ohjelmoinnin kentästä Tekniikat interaktiivisuuden toteuttamiseen tekniikat tekniikat Tietokannat Juha Laitinen TKK/TML juha.laitinen@hut.fi

Lisätiedot

1.1 Internetistä lyhyesti. Mikä Internet on? 1.2 Maailmanlaajuinen verkko

1.1 Internetistä lyhyesti. Mikä Internet on? 1.2 Maailmanlaajuinen verkko 1.1 Internetistä lyhyesti Alkuperä: - ARPAnet 1960-luvun loppu, 1970-luvun alku - Verkon luotettavuus - ARPA organisaatioit (Advanced Research Projects Agency) - BITnet, CSnet 1970-luvun loppu ja 1980-luvun

Lisätiedot

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML AJAX-konsepti AJAX Asynchronous JavaScript And XML Viimeisin muoti-ilmiö web-ohjelmoinissa, termi Ajax tuli käyttöön vuoden 2005 aikana Joukko teknologioita, joiden avulla voidaan toteuttaa uudenlaisen

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

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

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

Lisätiedot

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

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

Lisätiedot

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa

Lisätiedot

HTML perusteita (ei julkiseen jakeluun)

HTML perusteita (ei julkiseen jakeluun) HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä

Lisätiedot

582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus

582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus 582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus Sisältö Mikä on web-sovellus? Selaimen rooli web-sovelluksessa Palvelimen rooli web-sovelluksessa Aineistopyynnöt Tiedon välittäminen

Lisätiedot

Digitaalisen median tekniikat Luento 1: Intro

Digitaalisen median tekniikat Luento 1: Intro Digitaalisen median tekniikat Luento 1: Intro Web Mahtava alusta tiedon välittämiseen! Information Superhighway! Web Archive! Gutenberg! DEMO Kirjasto ja analoginen media digitaaliseksi Julkaisutekniikan

Lisätiedot

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi CT30A3200 - WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen HTML-lomakkeet HTML-lomakkeiden avulla voidaan WWW-sovelluksessa hakea käyttäjän

Lisätiedot

Tuotteiden tiedot: Lisää uuden tuotteen tiedot. Muuta tai poista tuotteen tiedot. Selaa kaikkien tuotteiden tietoja.

Tuotteiden tiedot: Lisää uuden tuotteen tiedot. Muuta tai poista tuotteen tiedot. Selaa kaikkien tuotteiden tietoja. laskutus_index http://media.stadia.fi/~0700527/laskutus/laskutus_index.html Sivu 1/1 13.12.2007 Laskutus -tietokanta Henkilöiden tiedot: Lisää uuden henkilön tiedot Muuta tai poista henkilön tiedot Selaa

Lisätiedot

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.

AT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013. AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)

Lisätiedot

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

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta. 1. Julkaisutoiminnan peruskysymyksiä a) Mieti kohderyhmät b) Mieti palvelut c) Mieti palvelujen toteutus Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta. PALVELUKOKONAISUUDET:

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

WWW-Sivustojen suunnittelu

WWW-Sivustojen suunnittelu WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi

Lisätiedot

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010 WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi

Lisätiedot

Teeman rakentaminen Wordpressiin

Teeman rakentaminen Wordpressiin 1 Teeman rakentaminen Wordpressiin Jari Sarja lokakuu 2009 Sisältö Johdanto... 2 Valmiin teeman muokkaaminen... 2 XHTML:n perussäännöt... 4 Teeman tiedostot... 5 Sanasto... 5 Hierarkia... 5 Template...

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

HTML-dokumenttien keskeiset piirteet. Keskeinen HTML-merkkaus == XHTML Basic. Hypertekstilinkit. Teksti

HTML-dokumenttien keskeiset piirteet. Keskeinen HTML-merkkaus == XHTML Basic. Hypertekstilinkit. Teksti en keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit Kuvaileva

Lisätiedot

POISSAOLOJEN SEURANTAJÄRJESTELMÄ

POISSAOLOJEN SEURANTAJÄRJESTELMÄ POISSAOLOJEN SEURANTAJÄRJESTELMÄ Opinnäytetyö PSK-Aikuisopisto Mac-datanomi, Digitaalinen viestintä Lakso Eija 15.01.2011 2 SISÄLLYSLUETTELO SISÄLLYSLUETTELO... 2 TIIVISTELMÄ... 3 1. JOHDANTO... 4 2. TYÖN

Lisätiedot

HTML-dokumenttien keskeiset piirteet

HTML-dokumenttien keskeiset piirteet HTML-dokumenttien keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit

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

WWW-sivu. Miten Internet toimii? World Wide Web. HTML-koodi. HTTP-istunto URL <#>

WWW-sivu. Miten Internet toimii? World Wide Web. HTML-koodi. HTTP-istunto URL <#> WWW-sivu Miten Internet toimii? HTML-koodi World Wide Web Nixu International

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

Lisätiedot

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.

Lisätiedot

XML Technologies and Applications - harjoitustyö -

XML Technologies and Applications - harjoitustyö - XML Technologies and Applications - harjoitustyö - TURUN YLIOPISTO Informaatioteknologian laitos Tietojenkäsittelytiede Harjoitustyö Helmikuu 2009 Jyri Lehtonen (72039) jyri.lehtonen@utu.fi (yksin tehty

Lisätiedot

ICT1TN004. Lomakkeet. Heikki Hietala

ICT1TN004. Lomakkeet. Heikki Hietala Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen

Lisätiedot

HTTP-välityspalvelimen käyttö tapahtumien keräämiseen

HTTP-välityspalvelimen käyttö tapahtumien keräämiseen HTTP-välityspalvelimen käyttö tapahtumien keräämiseen Tero Tähtinen Teknillinen korkeakoulu Tietoliikenneohjelmistojen ja multimedian laboratorio Diplomityöesitelmä 29.11.2004 1 Johdanto Diplomityössä

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

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

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 1 WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY 10.4.2015 Lounea Oy Tehdaskatu 6, 24100 Salo Puh. 029 707 00 Y-tunnus 0139471-8 www.lounea.fi Asiakaspalvelu 0800 303 00 Yrityspalvelu 0800 303 01 Myymälät 0800 303

Lisätiedot

3 Sivupolku: metaforat & selittäminen

3 Sivupolku: metaforat & selittäminen 3 Sivupolku: metaforat & selittäminen 3 Sivupolku: metaforat & selittäminen Ennen WWW:n sisältötuotannon perustekniikoiden esittelyä luonnehditaan lyhyesti metafora-käsitettä. Yhteys aiheeseen löytyy ajatuksesta,

Lisätiedot

1 www-sivujen teko opetuksessa

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

Lisätiedot

Tikon Web-sovellukset

Tikon Web-sovellukset Toukokuu 2015 1 (11) Tikon Web-sovellukset Toukokuu 2015 2 (11) 1 Johdanto... 3 2 Silverlight sovellukset... 3 2.1 Windows... 3 2.1.1 Microsoft Silverlight... 3 2.1.2 Tablet-laitteet... 4 2.1.3 Selaimet...

Lisätiedot

MITÄ JAVASCRIPT ON?...3

MITÄ JAVASCRIPT ON?...3 JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3

Lisätiedot

Pedacode Pikaopas. Web-sovelluksen luominen

Pedacode Pikaopas. Web-sovelluksen luominen Pedacode Pikaopas Web-sovelluksen luominen Pikaoppaan sisältö Pikaoppaassa kuvataan, miten Netbeans-työkalulla luodaan uusi yksinkertainen web-sovellus ja testataan sen toiminta. Opas kattaa kaiken aiheeseen

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

Miten Internet toimii. Jyry Suvilehto T-110.1100 Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2014

Miten Internet toimii. Jyry Suvilehto T-110.1100 Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2014 Miten Internet toimii Jyry Suvilehto T-110.1100 Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2014 Sisältö 1. Internet ylhäältä alas 2. Esimerkki median tallentamisesta tietokoneelle 3. Sovelluskerros

Lisätiedot

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio 1 PROJEKTIN KUVAUS... 3 1.1 Projektin aloitus... 3 1.2 Aikataulu... 4 1.3 Kustannusarvio... 4 2 ULKOASU... 5 2.1

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

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

HTML editorin käyttö - 1

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

Lisätiedot

K U U L A L A A K E R I LUOTTAMUKSELLINEN 1(6)

K U U L A L A A K E R I LUOTTAMUKSELLINEN 1(6) K U U L A L A A K E R I LUOTTAMUKSELLINEN 1(6) Messto HTTP API Messto HTTP API on sovelluskehittäjiä varten kehitetty helppo tapa toteuttaa tekstiviesti- ja multimediaviestisovelluksia. Rajapinnan avulla

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

Tiedonhallinnan perusteet. Viikko 1 Jukka Lähetkangas

Tiedonhallinnan perusteet. Viikko 1 Jukka Lähetkangas Tiedonhallinnan perusteet Viikko 1 Jukka Lähetkangas Kurssilla käytävät asiat Tietokantojen toimintafilosofian ja -tekniikan perusteet Tiedonsäilönnän vaihtoehdot Tietokantojen suunnitteleminen internetiä

Lisätiedot

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

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

Lisätiedot

Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi.

Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Yleisohjeet mainosaineistoille Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Kun lähetät aineistoja sähköpostitse,

Lisätiedot

ISACA Finland 24.1.2008 OWASP 24.1.2008. The OWASP Foundation. Timo Meriläinen Antti Laulajainen. http://www.owasp.org

ISACA Finland 24.1.2008 OWASP 24.1.2008. The OWASP Foundation. Timo Meriläinen Antti Laulajainen. http://www.owasp.org ISACA Finland 24.1.2008 Timo Meriläinen Antti Laulajainen 24.1.2008 Copyright The Foundation Permission is granted to copy, distribute and/or modify this document under the terms of the License. The Foundation

Lisätiedot

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

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:

Lisätiedot

Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome

Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn

Lisätiedot

Johdatus XML teknologioihin

Johdatus XML teknologioihin Johdatus XML teknologioihin Metropolia J. Holvikivi XML metakieli Extensible Markup Language rakenteellinen esitystapa tiedon vaihtoon, talletukseen, yhdistämiseen ja julkaisemiseen yleinen rakenteenkuvauskieli,

Lisätiedot

KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille

KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille KServer Etäohjaus 1 (5) KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille Palvelimen toteutuksen ollessa versio 1.0, spesifikaation versio 1.0.0. 2009, Riku Eskelinen/ KServer Software Development

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 2000 - Näkymät FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava

Lisätiedot

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

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

Paavo Räisänen. WampServer palvelimen asennus ja käyttö Eclipsen kanssa, sekä ensimmäinen FTP yhteys. www.ohjelmoimaan.net

Paavo Räisänen. WampServer palvelimen asennus ja käyttö Eclipsen kanssa, sekä ensimmäinen FTP yhteys. www.ohjelmoimaan.net Paavo Räisänen WampServer palvelimen asennus ja käyttö Eclipsen kanssa, sekä ensimmäinen FTP yhteys www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida, tulostaa ja levittää ei kaupallisissa tarkoituksissa.

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

SeaMonkey pikaopas - 1

SeaMonkey pikaopas - 1 SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston

Lisätiedot

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Kuvat ja taustat ICT1TN004. Elina Ulpovaara Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa

Lisätiedot

CMS Made Simple Perusteet

CMS Made Simple Perusteet CMS Made Simple Perusteet 1. Hallintaan kirjautuminen Kirjautumisruutuun pääset lisäämällä osakaskuntasi www-osoitteen perään liitteen /admin. Käyttäjätunnuksena toimii onkija ja salasanana postitse saamasi

Lisätiedot

Helsingin Sanomat ipad

Helsingin Sanomat ipad Helsingin Sanomat ipad Sovelluksen mainosaineistojen tekniset ohjeet: kokosivu ja etusivu 13.5.2013 SISÄLLYS ipad-mainokset 2 Tekniikka ja tiedostokoot 3 Orientaatio 4 Linkit: richie-modal-browser 4 Gesture

Lisätiedot

Internet ja tietoverkot 2015 Harjoitus 7: Kertaus

Internet ja tietoverkot 2015 Harjoitus 7: Kertaus Internet ja tietoverkot 2015 Harjoitus 7: Kertaus Tämän harjoituksen tarkoituksena on hieman kerrata TCP/IP-kerrosmallin sovelluskerroksen, kuljetuskerroksen, internet-kerroksen ja siirtoyhteyskerroksen

Lisätiedot

Tehtävä: FIL Tiedostopolut

Tehtävä: FIL Tiedostopolut Tehtävä: FIL Tiedostopolut finnish BOI 2015, päivä 2. Muistiraja: 256 MB. 1.05.2015 Jarkka pitää vaarallisesta elämästä. Hän juoksee saksien kanssa, lähettää ratkaisuja kisatehtäviin testaamatta esimerkkisyötteillä

Lisätiedot

Sivupohjien täyttö suppeat sivupohjat

Sivupohjien täyttö suppeat sivupohjat Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat

Lisätiedot

W3C & verkkojulkaisun standardit

W3C & verkkojulkaisun standardit W3C & verkkojulkaisun standardit Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: World Wide Web Consortium (W3C)

Lisätiedot

Tikon Web-sovellukset

Tikon Web-sovellukset Marraskuu 2014 1 (9) Tikon Web-sovellukset Marraskuu 2014 2 (9) 1 Johdanto... 3 2 Windows... 3 2.1 Microsoft Silverlight... 3 3 Tablet-laitteet... 4 4 Selaimet... 5 4.1 Yleiset asetukset (kaikki selaimet)...

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

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

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

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3 Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...

Lisätiedot

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

Poikkeusinfo XML-rajapinnan kuvaus, rajapinnan versio 2 Seasam Group

Poikkeusinfo XML-rajapinnan kuvaus, rajapinnan versio 2 Seasam Group 1.10.2010 1(15) Poikkeusinfo XML-rajapinnan kuvaus, rajapinnan versio 2 Seasam Group Graanintie 7 Tel. + 358 15 338 800 FIN-50190 MIKKELI Fax + 358 15 338 810 VERSIOHISTORIA Versio Pvm Tekijä Selite 1.0

Lisätiedot

Paperiton näyttösuunnitelma

Paperiton näyttösuunnitelma Paperiton näyttösuunnitelma Käyttöohje opettajalle ja työpaikkaohjaajalle Koonnut: Jarkko Lehmuskenttä Turun sivistystoimiala, Suunnittelu- ja kehittämispalvelut 18.10.2015 Versio 2.0 Ohje on koottu OPH:n

Lisätiedot

Mobiili ennen desktoppia!

Mobiili ennen desktoppia! Liiketoiminta kehittyy, kehity sinäkin! Mobiili ennen desktoppia! Helsinki, Tampere, Turku, Tukholma, Göteborg www.tieturi.fi Copyright Tieturi 10.1.2011 1 Kysymys Pitääkö web-sivuston näyttää täsmälleen

Lisätiedot

Tiedonsiirto- ja rajapintastandardit

Tiedonsiirto- ja rajapintastandardit Tiedonsiirto- ja rajapintastandardit Viitekehys Julkishallinnon perustietovarantojen rajapinnat (PERA) työryhmän tulokset valmiit syksyllä 2011 Määrittelee teknisen arkkitehtuuriratkaisun tietovarantojen

Lisätiedot

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista

Lisätiedot

Microsoft Outlook Web Access. Pikaohje sähköpostin peruskäyttöön

Microsoft Outlook Web Access. Pikaohje sähköpostin peruskäyttöön Microsoft Outlook Web Access Pikaohje sähköpostin peruskäyttöön 1 Käyttö työpaikalla (Hallinto-verkossa) Käynnistetään sähköposti Työpöydällä olevasta Faiposti-pikakuvakkeesta (hiirellä kaksoisklikkaamalla).

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

VERKKOKÄYTTÄJÄN OPAS. Tulostuslokin tallennus verkkoon. Versio 0 FIN

VERKKOKÄYTTÄJÄN OPAS. Tulostuslokin tallennus verkkoon. Versio 0 FIN VERKKOKÄYTTÄJÄN OPAS Tulostuslokin tallennus verkkoon Versio 0 FIN Oppaassa käytetyt kuvakkeet Tässä käyttöoppaassa käytetään seuraavaa kuvaketta: Vinkki kertoo, miten toimia tietyissä tilanteissa, tai

Lisätiedot