CT30A3200 - WWW-sovellukset Luento 1 Jouni Ikonen - Jouni.Ikonen lut.fi linkki Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen
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
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, 1.-2. 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
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
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
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
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
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
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
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
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
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
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://www.it.lut.fi/kurssit/07-08/ct30a5100/lectures.html http: - kertoo käytettävän protokollan (HTTP) www.it.lut.fi - 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
HTTP-pyyntö ja -vastaus GET /kurssit/07-08/ct30a5100/lectures.html HTTP/1.1 Host: www.it.lut.fi User-Agent: Mozilla/5.0... Connection: close HTTP/1.1 200 OK Date: Thu, 09 Mar 2006 04:55:03 GMT Server: Apache/1.3.33 (Debian GNU/Linux) Last-Modified: Sun, 12 Jun 2005 12:17:44 GMT ETag: "71d77de-60c-42ac27e8" Accept-Ranges: bytes Content-Length: 1548 Content-Type: text/html; charset=iso-8859-1 Via: 1.1 www.it.lut.fi X-Cache: MISS from www.it.lut.fi Connection: close www.it.lut.fi <html>... Jouni Ikonen 14
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
HTTP-pyyntö ja -vastaus esim. kuva http://www.it.lut.fi/images/toppic_fin Pyyntö: GET /images/toppic_fin HTTP/1.1 Host: www.it.lut.fi User-Agent: Mozilla/5.0... Connection: close Vastaus: HTTP/1.1 200 OK Date: Thu, 09 Mar 2006 05:23:19 GMT Server: Apache/1.3.33 (Debian GNU/Linux) PHP/4.3.10-16 Content-Location: toppic_fin.jpg Vary: negotiate TCN: choice Last-Modified: Fri, 03 Jan 2003 09:25:06 GMT ETag: "10249a09-78a2-3e1556f2;4240741a" Accept-Ranges: bytes Content-Length: 30882 Connection: close Content-Type: image/jpeg <kuvadata> Jouni Ikonen 16
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
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
Staattinen Dynaaminen Jouni Ikonen 19
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
Historiaa, HTML:n versiot Internet Engineering Task Force (IETF) julkaisi ensimmäisen HTMLversion vedoksena 1993 HTML 2.0 julkaistiin RFC:nä 1995 HTML 3.2 1997 (W3C) HTML 4.0 1997 (W3C) HTML 4.01 1999 (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
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ä + 4.01: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
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
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
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- 8859-1" /> </head> <body> </body> </html> Jouni Ikonen 25
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
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
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
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
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
XHTML-sivun oikeellisuus XHTML-sivun oikeellisuuden voi tarkistaa osoitteessa: http://validator.w3.org/ 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
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
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
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= http://www.it.lut.fi/kurssit/06-07/ti5315100/exercises.html >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
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
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
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
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
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
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
CSS, esimerkki Jouni Ikonen 41
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
Linkkejä XHTML- ja CSS-määritykset määritellyt world wide web konsortio: http://www.w3.org/ Sivujen oikeellisuuden validointi: http://validator.w3.org http://totalvalidator.com HUOM! XHTML 1.0 validointi vaatii (vs. HTML) XHTML DOCTYPE määrityksen. <!DOCTYPE html> ei riitä html-elementtiin xmlns = http://www3.org/1999/xhtml kommentoi pois <meta characterset = utf-8 /> PHP: http://php.net/ Jouni Ikonen 43