Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi
|
|
- Kimmo Kokkonen
- 8 vuotta sitten
- Katselukertoja:
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 = " "//" 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: 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" " 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" " The HTML 4.01 Frameset DTD sisältää kaiken edellisestä + kehykset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 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" " 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" " 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" " 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" " <html xmlns=" <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=" <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 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotHTML & 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ätiedotH 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ätiedotHTML 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ätiedot2. 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ätiedotSisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002
, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi
LisätiedotXHTML - 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ätiedotNotepad++ 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ätiedotTaustaa. 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ätiedotTIEDEJUTTUKURSSI 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ätiedotWWW-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ätiedotXML, 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ätiedotVerkkosivut 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ätiedotLaajuus 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ätiedot3 Verkkosaavutettavuuden tekniset perusteet
3 Verkkosaavutettavuuden tekniset perusteet Saavutettavuuden toteuttaminen edellyttää lähtökohtaisesti tietoa laitteista ja sovelluksista, käyttäjistä ja käyttötavoista, sekä tekniikasta. Tekniikasta on
LisätiedotTutkitaan 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ätiedotProseduraalinen 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ätiedotCode 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ätiedotXHTML 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ätiedotInternetsivujen 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ätiedotJohdatusta 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ätiedotDigitaalisen median tekniikat. Luento 3: CSS
Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi
LisätiedotCSS - 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ätiedotKotisivuohjeet. 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ätiedotT-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ätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotAJAX-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ätiedotHTML 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ätiedotKotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com
Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#
LisätiedotVERKKOSOVELLUSTEN 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ätiedotEntiteetit 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ätiedotJä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ätiedot1.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ätiedotMiten 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ätiedotVerkkojulkaiseminen 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ätiedotvalitsin 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ätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
Lisätiedot582203 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ätiedotUlkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
LisätiedotMOBISITE-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ätiedotUlkopuolisen 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ätiedotHTML 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ätiedotTee 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ätiedotDigitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
LisätiedotCSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
LisätiedotCascading 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ätiedotDigitaalisen 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ätiedotTuotteiden 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ätiedotSivuston tiedotmysiteworthcheck.com
Sivuston tiedotmysiteworthcheck.com Luotu Huhtikuu 26 2019 09:24 AM Pisteet59/100 SEO Sisältö Otsikko Check you website value Pituus : 23 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus
LisätiedotDigitaalisen 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ätiedotXML 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ätiedotAT4-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ätiedotKun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.
WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)
LisätiedotDOCTYPE, 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ätiedotProseduraalinen 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ätiedot10 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ätiedotAulikki 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ätiedotCSS-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ätiedotAjatus 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ätiedotXML / DTD / FOP -opas Internal
XML / DTD / FOP -opas Internal Reviewed: - Status: pending approval Approved by: - Author: Sakari Lampinen Revision: 1.0 Date: 15.10.2000 1 Termit DTD (data type definition) on määrittely kielelle, niinkuin
LisätiedotLuento 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ätiedotOpinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03
Opinnäytetyö 5.4.2006 Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Sisällysluettelo 1. Johdanto... 3 2. Suunnittelu... 4 2.1. PTOPlus.net... 4 2.2. Sivujen tarkoitus ja kohderyhmä...
LisätiedotCSS 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ätiedotHarjoitustyö 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ätiedotDigitaalisen 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ätiedotHTML5 -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ätiedotXML 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ätiedotSivuston tiedotakcpshop.de.websiteoutlook.com
Sivuston tiedotakcpshop.de.websiteoutlook.com Luotu Heinäkuu 19 2019 10:32 AM Pisteet67/100 SEO Sisältö Otsikko Akcp-shop : AKCP SHOP Online Shop für sensorprobe, securityprobe und AKCP Sensoren Pituus
LisätiedotInternet-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ätiedotWWW-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ätiedotWWW-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ätiedotSivuston tiedotqbsupportcustom erservice.com
Sivuston tiedotqbsupportcustom erservice.com Luotu Kesäkuu 04 2019 09:57 AM Pisteet69/100 SEO Sisältö Otsikko Quickbooks Customer Service 800-329-0391 QB Phone Number Pituus : 58 Täydellistä, otsikkosi
LisätiedotLaajuus 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ätiedotSivuston tiedotqbooksupportpho nenumber.com
Sivuston tiedotqbooksupportpho nenumber.com Luotu Kesäkuu 07 2019 05:06 AM Pisteet74/100 SEO Sisältö Otsikko QuickBooks Support Phone Number +1-844-233-5335 Telephone Support Pituus : 67 Täydellistä, otsikkosi
LisätiedotVaasan 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ätiedotPutteri 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ätiedotSivuston tiedotwindowsrepublic.com.au
Sivuston tiedotwindowsrepublic.com.au Luotu Maaliskuu 28 2019 14:41 PM Pisteet48/100 SEO Sisältö Otsikko Windows Republic - upvc windows manufacturer and supplier in Melbourne Pituus : 70 Täydellistä,
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 7/8: Tekninen toteutus Edellinen
LisätiedotLuento 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ätiedotMiten Internet toimii. Jyry Suvilehto T Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2010
Miten Internet toimii Jyry Suvilehto T-110.1100 Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2010 Sisältö 1. Mitä Internet on syönyt 2.Internetin protokollapino 3.Katse kohti tulevaisuutta
LisätiedotSivuston tiedotwixaccounting.com
Sivuston tiedotwixaccounting.com Luotu Heinäkuu 11 2019 06:23 AM Pisteet61/100 SEO Sisältö Otsikko WIX Accounting +1-888-833-0109 Online QuickBooks Support Number Pituus : 65 Täydellistä, otsikkosi sisältää
LisätiedotPOISSAOLOJEN 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ätiedotDigitaalisen median tekniikat. JSP ja XML
Digitaalisen median tekniikat JSP ja 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ätiedotDigitaalisen 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ätiedotEditorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
LisätiedotTeeman 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ätiedotMiten 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ätiedotSivuston tiedotle-vintage.fr
Sivuston tiedotle-vintage.fr Luotu Tammikuu 12 2017 10:53 AM Pisteet56/100 SEO Sisältö Otsikko Le Vintage - Restaurant (site officiel) Pituus : 39 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta.
LisätiedotSivuston tiedotemreemir.com
Sivuston tiedotemreemir.com Luotu Maaliskuu 10 2019 18:41 PM Pisteet66/100 SEO Sisältö Otsikko Emre Emir, Full-Stack Web Developer Pituus : 35 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta.
LisätiedotSivuston tiedotpechaticentr.ru
Sivuston tiedotpechaticentr.ru Luotu Kesäkuu 03 2019 17:04 PM Pisteet59/100 SEO Sisältö Otsikko Изготовление печатей в Москве. Изготовление печати любой сложности. Pituus : 67 Täydellistä, otsikkosi sisältää
LisätiedotSivuston tiedotmp3list.pro
Sivuston tiedotmp3list.pro Luotu Kesäkuu 06 2019 13:16 PM Pisteet52/100 SEO Sisältö Otsikko Download free music - mp3 songs and Pituus : 42 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus
LisätiedotSivuston tiedotskillers.tech
Sivuston tiedotskillers.tech Luotu Maaliskuu 28 2019 16:54 PM Pisteet55/100 SEO Sisältö Otsikko Skillers - Quality IT Recruiting services Pituus : 41 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta.
Lisätiedot1 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ätiedotJWT 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ätiedotWWW-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ätiedotSivuston tiedotgoogle.com
Sivuston tiedotgoogle.com Luotu Tammikuu 14 2019 10:26 AM Pisteet37/100 SEO Sisältö Otsikko Google Pituus : 6 Ihannetapauksessa, sinun otsikkosi pitäisi sisältää väliltä 10 ja 70 kirjainta (välilyönnit
LisätiedotDigitaalisen median tekniikat. Luento 4: JavaScript
Digitaalisen median tekniikat Luento 4: JavaScript Luennot 1. Intro 2. XHTML 3. CSS 4. JavaScript Historia Syntaksi Dom Esimerkki: kuvagalleria 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus
LisätiedotHTML-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ätiedotSivuston tiedotmarking.seoonline.xyz
Sivuston tiedotmarking.seoonline.xyz Luotu Huhtikuu 08 2019 21:11 PM Pisteet59/100 SEO Sisältö Otsikko Social Bookmarking to get more Visitors Pituus : 39 Täydellistä, otsikkosi sisältää väliltä 10 ja
LisätiedotSosiaalihuollon asiakastiedon arkiston validointipalvelu. Käyttöohje
Sosiaalihuollon asiakastiedon arkiston validointipalvelu Käyttöohje Sisällys 1 Johdanto 3 2 Käyttötarkoitus 3 3 Palvelut 3 3.1 HL7 V3 Medical Records sanoman skeemavalidointi 3 3.2 HL7 V3 Medical Records
Lisätiedot