2.17 Esimerkki järkevän relaatiotietokannan rakenteesta

Koko: px
Aloita esitys sivulta:

Download "2.17 Esimerkki järkevän relaatiotietokannan rakenteesta"

Transkriptio

1 Rakenteisten dokumenttien perusteet 2.17 Esimerkki järkevän relaatiotietokannan rakenteesta Peruskäsitteitä: taulu/relaatio, monikko/tietue, mallinnus ja normalisointi, kytkös vs. redundanssi, anomaliat (päivitys, poisto), avaimet, kuuma taulu, optimointi, kysely Artist aid name style a1 Dire Straits rock a2 Pet Shop Boys pop Album rid artist name year r1 a1 Dire Straits 1978 r2 a1 Alchemy 1984 r3 a2 Very 1993 Track tid album name len_ t1 r1 Sultans of Swing 5:34 t2 r1 In the gallery 6:14 t3 r3 Yesterday, when I was mad.? t4 r3 Go West.? 37

2 3 XHTML-dokumenttien anatomia XHTML tarjoaa tutun esimerkin rakenteisten dokumenttien opiskelun alkutaipaleelle. Erityisesti, koska XHTML on XML-sovellus: - havainnollistaa se tiedon teknistä merkkausta (merkkauskielioppi), - osoittaa merkkauksen ja dokumentin tyypin välisen suhteen, sekä - tarjoaa esimerkin erään dokumenttiluokan suunnittelusta....ainakin periaatteessa. Käytännössä, eri syistä johtuen, kaikki XHTMLsovellukset (esim. verkkoselaimet) eivät toteuta kaikkia XML:n edellyttämiä piirteitä, vaikka tästä olisikin soveltajalle melkoista hyötyä 38

3 3.1 Varoitus! XHTML ei ole rakenteisten dokumenttien "maali", vaan nyt "vain" hyvä opiskelun lähtökohta koska kielen sovellukset ja idea oletetaan periaatteessa tunnetuksi 95% Web-sivuja joskus tehneistä ei kuitenkaan osaa XHTML-kieltä eikä sen merkkausta pintaa syvemmältä...suhtaudu siis tähän(kin) lukuun vakavissasi, vaikka olisitkin sitä mieltä että osaat jo HTML-kielen "varsin hyvin" 39

4 3.2 Esimerkki: XHTML-dokumentti XHTML-dokumentti on XML-dokumentti joka rakenteellisesti noudattaa tiettyä dokumentin tyyppimääritystä (DTD),..joka kirjoitetaan tyyppiesittelynä (tai -deklaraationa) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>virtual Library</title> </head> <body> <p>check <a href=" </body> </html> <!-- Mod. --> XML "näkyy läpi" XHTML-sanaston pohjalla: fyysinen ja looginen rakenne (tiedosto ja elementit), kommentit yms., nimiavaruuden käsite, jne. XHTML-dokumentin kirjoittajan ei tarvitse tietää "kaikkea" XML:stä 40

5 3.3 Hypertext Markup Language, HTML HTML on tarkoitettu verkkosivujen sisällön kuvailemiseen, tehtävä on: - sisällön loogisen rakenteen kuvailu (ulkoasu on sovelluksen heiniä) Useita suosituksia (ks. - vanhat HTML-versiot (2.0, 3.2) ja HTML XHTML-perhe - XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) (Kolme versiota: Strict - Transitional - Frameset) - Modularization of XHTML - XHTML Module-based XHTML - XHTML Basic - Suositus "XHTML 2.0" kehitteillä Huom! (X)HTML on "vain julkaisuformaatti" ja hyvin rajoittunut sellainen 41

6 3.4 XHTML Basic, se pieni & järkevä XHTML-sanasto XHTML Basic määrittelee HTML:n kuvailevan ytimen Rajaus ja moduulijako on hyödyllinen, vaikkei kirjoittaisi varsinaisesti XHTML Basic - dokumentteja Jatkossa XHTML kehittynee entistä selvemmin juuri moduulien suuntaan - yhdisteltävyys ja profilointi - XML-tekniikoiden hyödyntäminen 42

7 3.5 XHTML-dokumenttityypin määrittely XHTML (DTD HTML 1.0 Strict) -tyyppisten dokumenttien elementtirakenne kerrotaan tyyppimäärityksessä formaaleina sääntöinä (ja sekä tarvittaessa esim. sanallisina, informaaleina rajoitteina), vrt. <!ELEMENT img EMPTY> <!ATTLIST img %attrs; src %URI; #REQUIRED alt %Text; #REQUIRED longdesc %URI; #IMPLIED height %Length; #IMPLIED width %Length; #IMPLIED usemap %URI; #IMPLIED ismap (ismap) #IMPLIED > Määritys kertoo asiat formaalin kielen (so. tietorakenteen) näkökulmasta, merkitys ja käyttö pitää tietenkin ohjeistaa muutenkin! 43

8 3.6 XHTML-dokumentin esittelyosa <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Huomautuksia - kertoo dokumentissa käytetyn XML-standardin version (nyt 1.0) sekä mahdollisesti tekstitiedoston merkkikoodauksen (+ muutakin) - kertoo dokumentin tyypin (nyt DTD XHTML 1.0 Strict) Huom. XML-standardin mukaan, esittelyosa voisi sisältää myös muitakin osia, esim. sisäisen DTD-osajoukon, vrt. dokumentin paloittelu <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " [ <!ENTITY copy_decl SYSTEM "copy.txt"> ]> 44

9 3.7 XHTML-dokumentin esiintymäosa <html xmlns=" xml:lang="en" lang="en"> <head> <title>virtual Library</title> </head> <body> <p>check <a href=" </body> </html> Kertoo oleellisesti dokumentin asiasisällön - yksikäsitteinen juurielementti (nyt html; vrt. tyyppiesittely) - aidosti sisäkkäinen elementtirakenne - XHTML-dokumentissa pitää kertoa myös dokumentin nimiavaruus Dokumenttiluokkakohtainen rakenne määräytyy dokumentin tyypin mukaan (tai sitten dokumentti on "virheellinen", ts. ei ole validi) - esim. XHTML-dokumentissa aina head- ja body-osat, nimi title tarkoittaa head-osassa pakollista elementtiä tai "useimpia" elementtejä kuvailevaa attribuuttia jne. 45

10 3.8 Elementtien merkkaaminen Elementti merkitsee tekstilohkon - voi sisältää merkkidataa ja toisia elementtejä (rekursio määritelmässä) - voi myös sisältää muitakin merkkausrakenteita (esim. kommentteja) - sovellus päättää tyhjämerkkien tulkinnan - alkutagi, elementin nimi, sisältö, lopputagi, tyhjän elementin tagi <head> <!-- HTML-dokumentin otsikko-osa --> <title>musiikkityyleistä</title> <link rel="stylesheet" type="text/css" href="music.css" /> </head> Tiedon mallintamisen perusidea: "elementit esittävät konkreettisia asioita, joille attribuutit antavat abstrakteja määreitä" - DTD sanoo mitkä nimet ja rakenteet nyt sallittuja, isot ja pienet kirjaimet merkitseviä, useita merkkaustapoja (muttei lyhennemerkintöjä) Huom. elementtien merkkaus varaa käyttöönsä erikoismerkin '<' 46

11 3.9 Erikoismerkeistä: entiteetit ja merkkiviittaukset Koska merkki '<' on tietenkin tarpeellinen myös asiasisällössä, pitää vastaava merkki pystyä liittämään dokumenttiin merkkauksen avulla, esim. entiteettiviittauksena HTML määrittelee suuren joukon vakioentiteettejä, mm. < ~ < > ~ > & ~ & " ~ " (vaikkei HTML määrittele, sanotaan jo nyt että &apos; ~ ') Entiteettiviittauksen saa kirjoittaa sinne minne merkkausta voi kirjoittaa (ts. elementit ja attribuutit) Yksittäisiä merkkejä voi liittää dokumenttiin myös merkkiviittausten avulla A ~ A 47

12 3.10 Attribuuttien merkkaaminen Elementin alkutagi (tai tyhjän elementin tagi) voi sisältää attribuutteja - attribuutin nimi ja arvo erotetaan '='-merkillä, arvo ympäröidään heitto- tai lainausmerkein, sovellus päättää tyhjämerkkien tulkinnan (ns. normalisointi attribuutin tyypin mukaan) - attribuutin arvo voi sisältää tekstiä (jossa siis voi esiintyä entiteetti- ja merkkiviittauksia) - attribuuteilla ei ole loogista järjestystä, attribuutti ei saa toistua <a href="list.php?id=1&cmd='a b'" title="listaus">l1</a> Attribuutit esiintyvät aina suhteessa elementteihin Huomionarvoisia attribuutteja: - id, href, lang, xml:lang, xml:space 48

13 3.11 Muu merkkaus: kommentit Koska kyse on XML-dokumentista, XHTML-dokumentista voi löytyä myös muita merkkausrakenteita, nimittäin - kommentteja - (sekä prosessointiohjeita ja merkkidatalohkoja; nämä sivuutamme toistaiseksi) Kommentti on yleensä merkkaajan oma muistiinpano, mutta saattaa välittyä myös lukijoille (sovelluksesta riippuen) <!-- Pitäisikö tämä luku poistaa? ( :ON) --> Huom. Kommentit ovat osa merkkausta ja voidaan siten jäsentää loogisena osana dokumentin asiasisältöä (!), X(HT)ML ei salli sisäkkäisiä kommentteja (!), eikä merkkijonoa "--" 49

14 3.12 HTML:n kehityksestä ja merkkauksesta (1/2) XHTML on kehittynyt rakenteiseksi dokumenttistandardiksi ajan kuluessa - esim. DTD XHTML 1.0 Strict rajaa laajemmasta (Transitional) sanastosta pois formatointiin liittyviä piirteitä (esim. elementti font) Motivaatio on se, että XHTML-dokumenteilla ja esim. CSS-tyyleillä on selvä työnjako: - XHTML sisältää dokumentin asiasisällön kuvailevan tai deskriptiivisen merkkauksen keinoin, joka kertoo mitä loogisia osia dokumentista löytyy sen asiasisällön näkökulmasta - käytännössä CSS-tyyli formatoi dokumentin, ehdottaen fontit, värit, vahvennukset, jne. Kuvaileva merkkausta pidetäänkin yleensä formatoivan merkkauksen vastakohtana (tarkka rajanveto hankalaa; suhteessa tiettyyn sovellukseen) 50

15 3.13 HTML:n kehityksestä ja merkkauksesta (2/2) Miksi pyrkimys deklaratiiviseen merkkaukseen? Hallittavuuden takia: koska... - (lähde)dokumentti voidaan mallintaa sovellusalueen luonnollisten käsitteiden näkökulmasta (nyt XHTML ~ WWW-hypertekstin julkaisukieli); tästä on hyötyä myös kirjoittamisen ja käsittelyn työnjaon näkökulmasta - sama sisältö voidaan tuotantoprosessin keinoin esittää eri tavoin (vrt. WWW-sivu [pc pda], paperituloste, PDF-sivu) -...ts. dokumenttien asiasisältö ja ulkoasu voidaan erottaa prosessoinnissa, nojautuminen formatointiin johtaa helposti informaation katoamiseen tietoa merkatessa (esim. tiedonhaku) 51

16 3.14 Rakenteiden merkitsemistapoja ja termejä (1/3) Hierarkkiset elementtirakenteet ~ sisäkkäisiä elementtimäärityksiä, joiden jäsentäminen tuottaa elementtien puurakenteen (properly nesting elements) Limittäiset lohkorakenteet ~ "päällekkäisiä rakennemääritelmiä", jotka eivät (välttämättä) määritä selvärajaisia elementtejä <b>fat</b> <i>and</i> <i><b>lean</b></i> <b>fat</b> <i>and <b>lean</i></b> <!-- ei siis XHTML-merkkausta! --> Limittäisiä lohkorakenteita käytetään toisinaan esim. hakujen ja dokumenttien elementtirajat ohittavan annotoinnin takia (ei suositeltavaa); <p>... Dire straitsin <revision/> pitkäsoitto <em>dire Straits: <revisionend/>dire Straits</em> ilmestyi jo </p> Hierarkkisuuden keskeisin etu on rakenteen selkeys käsittelyn näkökulmasta 52

17 3.15 Rakenteiden merkitsemistapoja ja termejä (2/3) Deklaratiivinen tai kuvaileva merkkaus ~ abstrakti kuvaus elementin roolista tai merkityksestä dokumentissa (siis juuri XHTML:n idea) <blockquote>think twice before walking on ice</blockquote> <!-- (1) --> Proseduraalinen tai spesifi merkkaus ~ tarkat ohjeet elementtien käsittelemiseksi tietyssä yksittäisessä sovelluksessa (tyypillinen juuri formatoinnissa) <i><font face="arial" size="12"> Think twice before walking on ice</font></i> <!-- (2) --> Erittäin hyviä huomioita: - dokumentin (1) perusteella on paljon helpompi mekaanisesti tuottaa dokumentti (2) kuin päinvastoin -...ts. "abstrakti" (1) tavoittaa tekstinpätkän merkityksen jotenkin "osuvammin ja niukemmin" kuin "konkreettinen" tai "sovelluskohtainen" (2) - tapa (2) on huono myös koska muukin kuin blockquote-tyyppinen tieto formatoidaan kenties i- ja font-elementein (..."tietoa hukkuu vahingossa") 53

18 3.16 Rakenteiden merkitsemistapoja ja termejä (2/3) Kontekstivapaa merkkaus ~ naapurielementit eivät vaikuta tulkintaan (löyhästi ymmärrettynä) <b>fat</b> <i>and</i> <i><b>lean</b></i> Kontekstuaalinen merkkaus ~ elementtien tulkinnalla on jokin tietty rakenteesta riippuva konteksti <ul> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ul> Kontekstivapaan merkkauksen verraton etu on tulkinnan helppous sekä mahdollisuus paloitella dokumentti mielekkäästi Kontekstuaalisen merkkauksen edut liittyvät lähinnä mallintamiseen (esim. attribuuttitieto voi periytyä elementin jälkeläisille, mikä vähentää esim. merkkaustyötä) 54

19 3.17 Pari sanaa CSS-tyylikielestä Kuten tunnettua Cascading Stylesheets (CSS) on tyylikieli esim. XHTMLsivujen ulkoasun määrittämiseen. Se määrittelee mm. - (formatointimallin, mediaryhmiä,...) - formatointiominaisuuksia sekä kieliopin tyylisääntöjen esittämiseen. Vaikka CSS on verraten rajoittunut tyylikieli, jo CSS-säännöt havainnollistavat XHTML-dokumentin loogisen rakenteen merkitystä konkreettisesti, vrt. seuraavien sääntöjen tulkinta: body { color: red; } p img.diagram { border: 1px solid black; } 55

20 3.18 CSS2-valitsimet pähkinänkuoressa Tässä vaiheessa on hyvä miettiä lähinnä sitä, minkälaisiin loogisiin rakenteisiin ao. valitsimet pystyvät viittaamaan X(HT)ML-dokumenteissa... (tietorakenteisiin viittaaminen on tiedonkäsittelyn perusta) * Matches any element. Universal selector E Matches any E element (i.e., an element of type E). Type selectors E F Matches any F element that is a descendant of an E element. Descendant selectors E > F Matches any F element that is a child of an element E. Child selectors E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes 56

21 E:active ja E:hover ja E:focus Matches E during certain user actions. The dynamic pseudo-classes E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class E + F Matches any F element immediately preceded by an element E. Adjacent selectors E[foo] Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning". Attribute selectors E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors E[lang ="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors DIV.warning HTML only. The same as DIV[class~="warning"]. Class selectors E#myid Matches any E element ID equal to "myid". ID selectors 57

22 3.19 Huomautuksia Kuten esimerkeistä kävi ilmi (?), XHTMLdokumenttien tekninen merkkaus on verraten yksinkertaista Haasteita syntyy lähinnä - "mallintamisesta", ts. nyt kyvystä kuvailla valittu tietosisältö XHTML-dok. tyypin mukaan niin rikkaasti kuin tarpeen (erit. elementit div, span ja class-attribuuttien käyttö?) - sovelluksista, esim. tyylien kirjoittamisesta (esim. CSS2-säännöt ovat monimutkaisempia kuin itse elementtirakenteet [esim. "seuraava sisar"]) Ts. haaste ei ole se miten merkataan, vaan mitä merkataan ja miksi Huom. dokumenttien validointikaan ei tietenkään takaa että tieto on asiasisällöllisesti virheetöntä merkkauksen sisällölliset virheet tietenkin kaivavat maata rakenteisten dokumenttien alta (kun ei tulkintaa!) 58

23 3.20 Hei, minun nimeni on Ossi. Olen tagien väärinkäyttäjä SGML-maailma tuntee leikkimielisen termin TAS: Tag Abuse Syndrome (~tagien väärinkäyttösyndrooma). "Väärinkäytön" ominaisia piirteitä ovat: 1) elementin valinta sen ulkoasun perusteella sovelluksessa (esimerkki: merkataan h3 kun tarkoitetaan vain "vahvennettua tekstiä") 2) jätetään käyttämättä spesifejä elementtejä kun niitä olisi saatavilla (esimerkki: kirjoitetaan kaikki aineisto p-elementteihin vaikka olisi käytössä myös elementit dfn, kbd, ja code) 3) käytetään sekaisin eri merkkausta saman asian esittämiseen (esimerkki: käytetään toisinaan elementtiä blockquote ja toisinaan em) 4) valitaan merkkaus väärin ymmärtämättä sen merkitystä (esimerkki: merkataan dfn kun "tarkoitettiin" var) Tunnistitko omasi? Pulmat ovat yleensä seurasta merkkauksen monimutkaisuudesta, vähäisestä koulutuksesta tai välinpitämättömyydestä 59

24 3.21 Lopuksi Myös XHTML-osaamista tarvitaan käytännössä tälläkin kurssilla...mutta osana tuotantoprosessia! Useissa sovelluksissa XHTML on julkaisuformaatti (tulosdokumentteja) joka tuotetaan ohjelmallisesti esim. muunnostyyleillä sovelluksen tietomallin perusteella, ei suoraan nodepadilla kirjoittamalla (!!) Ei-triviaalien Web-palvelujen koodaaminen XHTML-käsityönä on useimmissa tapauksissa lyhytnäköistä (turhaa käsityötä, virhealtista, tulos on heikosti hallittavissa, jne.) 60

3 XHTML-dokumenttien anatomia

3 XHTML-dokumenttien anatomia 3 XHTML-dokumenttien anatomia XHTML tarjoaa tutun esimerkin rakenteisten dokumenttien opiskelun alkutaipaleelle. Erityisesti, koska XHTML on eräs XML-sovellus: - havainnollistaa se tiedon teknistä merkkausta

Lisätiedot

2 Rakenteisten dokumenttien perusteet

2 Rakenteisten dokumenttien perusteet è è è Rakenteisten dokumenttien perusteet 2 Rakenteisten dokumenttien perusteet Kuten todettua, rakenteinen dokumentaatio tähtää tiedon mallintamiseen käytössä olevien välineiden mahdollisuudet huomioiden

Lisätiedot

3 Verkkosaavutettavuuden tekniset perusteet

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

Rakenteiset dokumentit, kevät 2006

Rakenteiset dokumentit, kevät 2006 Johdanto Rakenteiset dokumentit, kevät 2006 MATHM-47150 Rakenteiset dokumentit, 6 op, kevään 4-5 periodeilla Kotisivu: Luennot: Harjoitukset: Suoritustapa: http://matriisi.ee.tut.fi/hmopetus/rd/index.html

Lisätiedot

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

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

3 Verkkosaavutettavuuden tekniset perusteet

3 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. Tavoitteenamme

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

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

2. PEHMEÄ XHTML XRAJAHTML

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

Lisätiedot

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

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

Lisätiedot

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

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

6 DTD ja dokumentin tyyppimääritys

6 DTD ja dokumentin tyyppimääritys 6 DTD ja dokumentin tyyppimääritys Tietojenkäsittelyssä päähuomio ei yleensä ole tiedon matalan tason formaatissa vaan sovelluksissa joissa tietoa käytetään loogisesti jäsennettynä. XML-merkkaus tarjoaa

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

XHTML aloitus. Sisällys

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

Lisätiedot

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

2 Rakenteisten dokumenttien perusteet

2 Rakenteisten dokumenttien perusteet 2 Rakenteisten dokumenttien perusteet Kuten todettua, rakenteinen dokumentaatio tähtää tiedon mallintamiseen käytössä olevien välineiden mahdollisuudet huomioiden (tietokoneet!). Tavoitteet ovat yleensä

Lisätiedot

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

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

Lisätiedot

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

6 DTD ja dokumentin tyyppimääritys

6 DTD ja dokumentin tyyppimääritys 6 DTD ja dokumentin tyyppimääritys Tietojenkäsittelyssä päähuomio ei yleensä ole tiedon matalan tason formaatissa vaan sovelluksissa joissa tietoa käytetään loogisesti jäsennettynä. XML-merkkaus tarjoaa

Lisätiedot

M. Merikanto 2012 XML. Merkkauskieli, osa 2

M. Merikanto 2012 XML. Merkkauskieli, osa 2 XML Merkkauskieli, osa 2 Esimerkki: XML-dokumentti resepti maitokaakao

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

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 johdanto, uusimmat standardit ja kehitys

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

Lisätiedot

Ajatus kaiken taustalla

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

Lisätiedot

XML / DTD / FOP -opas Internal

XML / 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ätiedot

Digitaalisen median tekniikat. Luento 3: CSS

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

9 XML perusteet

9 XML perusteet 9 XML 1.0 - perusteet XML jakaa dokumenttien käsittelyn kaksitasoiseksi prosessiksi, jossa XMLprosessori ([processor]) lukee XML-tiedoston ja välittää tämän parsittuna sovellukselle ([application]). Käytännössä":

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

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

6 DTD ja dokumentin tyyppimääritys

6 DTD ja dokumentin tyyppimääritys 6 DTD ja dokumentin tyyppimääritys XML-merkkaus tarjoaa yhteensopivan ja yksinkertaisen perustan rakenteisten dokumenttien tms. rakenteisen tiedon käsittelyyn. Tietojenkäsittelyn sovelluksissa päähuomio

Lisätiedot

Ulkopuolisen tyylitiedoston käyttö

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

Lisätiedot

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

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

Lisätiedot

9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus

9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus 9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus XSL-muunnos voi tietenkin tuottaa myös tiettyyn nimiavaruuteen liittyviä kohdedokumentteja (tarvitaan aina jo esim. XHTML-sovelluksissa!) Helpoimmillaan

Lisätiedot

XML-merkkaus. Merkkidata, prosessointikomennot, kommentit

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

Lisätiedot

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

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

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

3.11 HTML-dokumentin ulkoasu?

3.11 HTML-dokumentin ulkoasu? 3.11 HTML-dokumentin ulkoasu? Rakenteisen dokumentin perusidea: - HTML-dokumentin rakenne kuvailee dokumentin tietosisällön -...jonka ulkoasun ja toiminnallisuuden (tai esitystavan!) sovellus päättää (esim.

Lisätiedot

W3C-teknologiat ja yhteensopivuus

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

Lisätiedot

3 WWW-hypermedian perusta: HTML

3 WWW-hypermedian perusta: HTML 3 WWW-hypermedian perusta: HTML Hypertext Markup Language HTML (Hypertext Markup Language) on tapa koodata (merkata) rakenteisia (teksti)dokumentteja WWW:ssä Esimerkki: Tästä kaikki alkaa

Lisätiedot

XML-pohjaiset rakennemäärittelyt

XML-pohjaiset rakennemäärittelyt -pohjaiset rakennemäärittelyt Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: -perustainen kommunikointi edellyttää

Lisätiedot

XML standardeja. nimiavaruudet, namespaces XHTML XML Schema linkitys. 26.3.2015 Jaana Holvikivi 1

XML standardeja. nimiavaruudet, namespaces XHTML XML Schema linkitys. 26.3.2015 Jaana Holvikivi 1 XML standardeja nimiavaruudet, namespaces XHTML XML Schema linkitys 26.3.2015 Jaana Holvikivi 1 Namespaces - ongelma mr. President zaphod

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

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

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset

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

Lisätiedot

Ulkoasun muokkaus CSS-tiedostossa

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

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

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

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

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

Lisätiedot

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

P e d a c o d e ohjelmointikoulutus verkossa

P e d a c o d e ohjelmointikoulutus verkossa P e d a c o d e ohjelmointikoulutus verkossa XML-kielen perusteet Teoria ja ohjelmointitehtävät XML-kielen perusteet 3 Sisältö YLEISKATSAUS KURSSIN SISÄLTÖIHIN... 7 YLEISKATSAUS KURSSIN SISÄLTÖIHIN...

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

Cascading Style Sheets

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

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

13 Tiedostot, dokumentit, tieto (&h-media)

13 Tiedostot, dokumentit, tieto (&h-media) 13 Tiedostot, dokumentit, tieto (&h-media) Esimerkki: HTML-dokumentti Tietokoneet käsittelevät tietoa tiedostojen muodossa Tietokoneiden yhteydessä dokumentilla tarkoitetaan tiedosto(je)n avulla esitettävää

Lisätiedot

QT tyylit. Juha Järvensivu 2008

QT tyylit. Juha Järvensivu 2008 QT tyylit Juha Järvensivu juha.jarvensivu@tut.fi 2008 Sisällys QStyle Style sheet Tyyli (QStyle) Kapseloi widgettien Look And Feel ominaisuudet Toteutettu QT:ssa QStyle luokkaan Sisäänrakennettuja tyylejä

Lisätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

Digitaalisen median tekniikat xhtml Harri Laine 1

Digitaalisen median tekniikat xhtml Harri Laine 1 Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa

Lisätiedot

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

Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi 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

Lisätiedot

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti

Lisätiedot

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

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

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

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

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda

Lisätiedot

Johdatusta selainohjelmointiin

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

Lisätiedot

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

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

5 Merkkaus: XML protokollana

5 Merkkaus: XML protokollana 5 Merkkaus: XML protokollana XML on siis ns. metakieli, joka käytännössä voidaan tulkita tavaksi merkitä ja tyypittää rakenteisia dokumentteja. Kuten tunnettua, se tarjoaa puitteet esim. XHTML-kielen määrittelylle

Lisätiedot

Helsingin yliopisto Tietojenkäsittelytieteen laitos XML-metakieli (2011) Harri Laine 1. Jäsennys ja sarjallistaminen

Helsingin yliopisto Tietojenkäsittelytieteen laitos XML-metakieli (2011) Harri Laine 1. Jäsennys ja sarjallistaminen Jäsennys ja sarjallistaminen Tietorakenteen määrittely Hyvinmuodostettu / validi rakenne Rakenteen määrittely DTD XML-jäsentäjä (parser) on työkalu, joka pystyy muodostamaan puurakenteen tekstuaalisesta

Lisätiedot

HTML5 -elementit jatkuu

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

Lisätiedot

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

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

Ctl160 Tekstikorpusten tietojenkäsittely p.1/15

Ctl160 Tekstikorpusten tietojenkäsittely p.1/15 Ctl160 490160-0 Nicholas Volk Yleisen kielitieteen laitos, Helsingin yliopisto Ctl160 490160-0 p.1/15 Lisää säännöllisistä lausekkeista Aikaisemmin esityt * ja + yrittävät osua mahdollisimman pitkään merkkijonoon

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

5 Merkkaus: XML protokollana

5 Merkkaus: XML protokollana 5 Merkkaus: XML protokollana XML on siis ns. metakieli, joka käytännössä voidaan tulkita tavaksi merkitä ja tyypittää rakenteisia dokumentteja. XML on kuitenkin ennen kaikkea standardimuotoinen tietorakenne

Lisätiedot

Elementtien tyyppideklaraatiot

Elementtien tyyppideklaraatiot Elementtien tyyppideklaraatiot Kuten tunnettua, XML-dokumenttien loogisen rakenteen peruspalasia ovat elementit, esim: hello world! Elementtien syntaksi seuraa suoraan XML-spesifikaation

Lisätiedot

Semanttinen Web. Ossi Nykänen. Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto

Semanttinen Web. Ossi Nykänen. Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto Semanttinen Web Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: Semanttinen Web (SW) on

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

XML - perusteet. Ctl230: Luentokalvot Miro Lehtonen

XML - perusteet. Ctl230: Luentokalvot Miro Lehtonen XML - perusteet Ctl230: Luentokalvot 4.10.2004 Miro Lehtonen Johdanto Mikä on merkkauskieli? 3Merkkaus (markup): lisätieto dokumentissa Erilaiset kirjasintyylit ja -koot 3Säännöt merkkaukselle Miten merkataan?

Lisätiedot

Tyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 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

Digitaalisen median tekniikat Harri Laine 1

Digitaalisen median tekniikat Harri Laine 1 Digitaalisen median tekniikat 30.4.2004 Harri Laine 1 Kurssin sisällöstä Digitaalinen media on laaja käsite pitäen sisällään erilaisia digitaalisessa muodossa olevia dokumentteja ja niiden käsittelyä tekstiä

Lisätiedot

XML rakenteen suunnittelu. Jaana Holvikivi

XML rakenteen suunnittelu. Jaana Holvikivi XML rakenteen suunnittelu Jaana Holvikivi XML suunnittelu Dokumentin ilmentymä elementit attribuutit (määritteet) entiteetit prosessointikäskyt 19.3.2015 Jaana Holvikivi 2 Elementtien sisäkkäisyys: säännöt

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

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

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

Lisätiedot

13 Tiedostot, dokumentit, tieto (&h-media)

13 Tiedostot, dokumentit, tieto (&h-media) 13 Tiedostot, dokumentit, tieto (&h-media) Tietokoneet käsittelevät tietoa tiedostojen muodossa Tietokoneiden yhteydessä dokumentilla tarkoitetaan tiedosto(je)n avulla esitettävää asiakokonaisuutta, joka

Lisätiedot

9 XML perusteet

9 XML perusteet 9 XML 1.0 - perusteet XML jakaa dokumenttien käsittelyn kaksitasoiseksi prosessiksi, jossa XMLprosessori ([processor]) lukee XML-dokumentin ja välittää tämän jäsennettynä sovellukselle ([application]).

Lisätiedot

9 XML perusteet

9 XML perusteet 9 XML 1.0 - perusteet XML jakaa dokumenttien käsittelyn kaksitasoiseksi prosessiksi, jossa XMLprosessori ([processor]) lukee XML-dokumentin ja välittää tämän jäsennettynä sovellukselle ([application]).

Lisätiedot

SISÄLLYSLUETTELO 1 JOHDANTO...2 2 META- JA MERKINTÄKIELI...2

SISÄLLYSLUETTELO 1 JOHDANTO...2 2 META- JA MERKINTÄKIELI...2 SISÄLLYSLUETTELO 1 JOHDANTO...2 2 META- JA MERKINTÄKIELI...2 3 SGML...2 3.1 YLEISTÄ...2 3.2 RAKENNE...3 3.2.1 Elementti...3 3.2.2 DTD...3 3.2.3 Attribuutti...4 4 HTML...4 4.1 TAUSTAA...4 4.2 RAKENNE...4

Lisätiedot

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne

Lisätiedot

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan

Lisätiedot

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml Digitaalisen median tekniikat xhtml XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan

Lisätiedot

Tiedonlouhinta rakenteisista dokumenteista (seminaarityö)

Tiedonlouhinta rakenteisista dokumenteista (seminaarityö) Tiedonlouhinta rakenteisista dokumenteista (seminaarityö) Miika Nurminen (minurmin@jyu.fi) Jyväskylän yliopisto Tietotekniikan laitos Kalvot ja seminaarityö verkossa: http://users.jyu.fi/~minurmin/gradusem/

Lisätiedot

Helsingin yliopisto/tktl XML-metakieli CSS XML-dokumenttien käsittely. XML-dokumenttien käsittely

Helsingin yliopisto/tktl XML-metakieli CSS XML-dokumenttien käsittely. XML-dokumenttien käsittely XML-dokumenttien käsittely XML-dokumenttien käsittely XML-kielten yleisrakenne mahdollistaa karkean rakennetarkistuksen suorittamisen XML-dokumenteille niitä tallennettaessa tai käyttöön otettaessa. Kielen

Lisätiedot

12 Dokumenttiluokan toteuttamisesta

12 Dokumenttiluokan toteuttamisesta 12 Dokumenttiluokan toteuttamisesta Tyypillisiä XML-sovellutuksia ovat esimerkiksi: - annettuun käyttötarkoitukseen räätälöity dokumenttityyppi (esim. painotalon ABC malli käsikirjoituksen rakenteelle)

Lisätiedot

Luento 10: XML WWW:ssä

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

Lisätiedot

XML johdatus: DTD. Jaana Holvikivi

XML johdatus: DTD. Jaana Holvikivi XML johdatus: DTD Jaana Holvikivi Dokumenttityypin rakennemäärittely DTD = kielioppi esim. XML- esitykselle Elementit Attribuutit Entiteetit ja notaatiot Prosessointikomennot DTD:n suunnittelu 19.1.2013

Lisätiedot

kansainvälistäminen ja paikallistaminen Zopessa Plonen käännöstyö Asko Soukka, Jyväskylän yliopisto asko.soukka@jyu.fi

kansainvälistäminen ja paikallistaminen Zopessa Plonen käännöstyö Asko Soukka, Jyväskylän yliopisto asko.soukka@jyu.fi kansainvälistäminen ja paikallistaminen Zopessa Plonen käännöstyö Asko Soukka, Jyväskylän yliopisto asko.soukka@jyu.fi Kääntämisvaihtoehdot Plonessa Localizer ja Translation Service käytön myötä kumuloituva

Lisätiedot