Tyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 5 WWW-hypermedian perusta: HTML

Transkriptio

1 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 fyysisesti, mikä tehostaa ja helpottaa dokumentin ylläpitoa helpottaen esim. systemaattisten ulkoasullisten muutosten tekemistä Tyylikieliä on olemassa useita erilaisia; perusidea on kuitenkin (rakenteisen dokumentin elementtien) formatointiominaisuuksien määrittäminen ja tyylikielen syntaksin kuvaileminen Tyylikielen X käyttö sovelluksessa Y on mahdollista vain mikäli sovelluksessa käytettävä selainohjelma Z tyylin toteuttaa (tai: transformointi) Ulkoiseen tyylitiedostoon viittaaminen tapahtuu HEAD-elementtiin sijoitettavan LINK-elementin avulla: <LINK href="mystyle.css" rel="stylesheet" type="text/css"> HYPERMEDIAN PERUSTEET (syksy 2002) 117

2 Dokumenttikohtainen tyylimääritys HEAD-elementtiin sijoitettavan STYLEelementin avulla, esimerkkinä CSS-sääntö <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> Lisäksi mahdollisuus myös elementtikohtaisten tyylimääritysten antamiseen (inline), mutta käyttöä ei suositella, koska tyylien käytön perusidea on erotella HTML-dokumentin rakenne ja ulkoasu <P style="font-size: 12pt; color: fuchsia">hiphei</p> Tyylien käyttö edellyttää tietenkin käytetyn tyylikielen osaamista. Ed. esim. ovat CSS-tyylistandardin mukaisia (ks. ) - formatoitava elementti valitaan säännöllä (valitsimet) - säännön valitsemien elementtien formatointi annetaan ominaisuusmääritteillä (+limitys & perintä) HYPERMEDIAN PERUSTEET (syksy 2002) 118

3 Tyylien käytön perusidea HTML:n yhteydessä tyylien käytön perusidea on dokumentin HTMLmerkkauksen ja dokumentin ulkoasun erottaminen toisistaan (syy: ylläpito) - dokumentin asiasisältö merkataan kuvailevan merkkauksen keinoin (esim. h1, p, address, ei b, i tai font) - ja merkattujen HTML-elementtien ulkoasu kuvataan CSS-sääntöinä (vieläpä siten, että yhtä tyylitiedostoa käytetään monen HTML-dokumentin yhteydessä) dokumentin ulkoasun CSS-koodaus CSS-tiedosto asiasisältö CSS-tiedosto CSS-tiedosto asiasisällön (rakenteen) HTML-merkkaus HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HTML-dokumentti HYPERMEDIAN PERUSTEET (syksy 2002) 119

4 Esimerkki tyylien käytöstä Seuraava dokumentti koostuu kolmesta tiedostosta esim.html (sisältö & rakenne), kuva.gif (dokumenttiin upotettu kuva) ja esim.css (ulkoasun määrittely): tiedosto esim.css BODY { background: white; } H1 { color: black; font-size: 20px; font-weight: bold; } P { color: blue; font-size: 12px; } tiedosto esim.html: <HTML> <HEAD> <TITLE>Moi maailma</title> <LINK REL="stylesheet" TYPE="text/css" HREF="red.css"> </HEAD> <BODY> <H1>Esimerkki</H1> <P><IMG SRC="kuva.gif">Dokumenttien kirjoittaminen on oikeastaan aika helppoa.</p> </BODY> </HTML> HYPERMEDIAN PERUSTEET (syksy 2002) 120

5 Kehykset Selaimen hierarkkisen ikkunarakenteen määrittäminen tapahtuu kehysten (frame) avulla (~linkkikontekstit; kehykset näkyvät yleensä ruudukkona yhden fyysisen käyttöliittymätason ikkunan sisällä) Määritys tapahtuu BODY-elementin korvaavan FRAMESET-elementin avulla, esim: <HTML> <TITLE>My Frame layout<title> <FRAMESET COLS="150,*"> <FRAME SRC="menu.html" NAME="menuwindow"> <FRAME SRC="intropage.html" NAME="contentwindow"> <NOFRAMES> Oh dear, it seems that your browser doesn't support frames </NOFRAMES> </FRAMESET> </HTML> HYPERMEDIAN PERUSTEET (syksy 2002) 121

6 Linkkien avautumisikkunan osoittaminen tapahtuu TARGET-attribuutilla <A HREF="story1.html" TARGET="contentwindow">Hello</A> Ellei toisin määrätä, linkit aukeavat siihen ikkunaan, jossa linkin alkupää sijaitsee. Oletuskohteen uudelleen määrittäminen tapahtuu BASE-elementillä: <HEAD><BASE TARGET="contentwindow"></HEAD> HTML 4.0:n myötä myös ns. inline-kehysten (ns. kelluva kehys) käyttö on periaatteessa mahdollista IFRAME-koodin avulla (ei tosin "vielä" toimi): <P>Please select a category and read the description: <IFRAME SRC="myframes.html" WIDTH="150" HEIGHT="100" ALIGN="RIGHT"> Sorry, your browser doesn't support inline frames! (What if you visited <A HREF=" while waiting the next software version?) </IFRAME> HYPERMEDIAN PERUSTEET (syksy 2002) 122

7 Skriptit Skriptit (script) tarjoavat HTML-kehittäjälle keinon ohjelmoida dokumenttien käyttäytymistä (ellei toisin mainita, yleensä HTML:n yhteydessä skripteistä puhuttaessa tarkoitetaan poikkeuksetta selainpäässä toteutettavia skriptejä) Skriptikieliä on useita erilaisia, skriptien käyttö on kuitenkin taas mahdollista vain, mikäli käytettävä selainohjelma skriptikielen toteuttaa Yleisimpiä skriptikieliä ovat (kutakuinkin tässä järjestyksessä): JavaScript ja Visual Basic Script (VBScript) ( ECMAScript) Skriptit ovat erityisesti "dynaamisen HTML:n" (DHTML) perusta; ideana on skriptien avulla tuottaa HTML-dokumentteja (dokumenttien osia) dynaamisesti ja manipuloida dokumentteja niiden käytön aikana DHTML:ää ei kuitenkaan ole standardoitu, vaan eri selainvalmistajat toteuttavat dynaamista HTML:ää hieman eri tavoin (DOMin käytön yleistyminen tuo kuitenkin asiaan helpotusta) Suomeksi sanottuna: esim. eri selaimissa toimivien monipuolisten JavaScriptohjelmien kirjoittaminen on yleisesti ottaen (turhan) hankalaa HYPERMEDIAN PERUSTEET (syksy 2002) 123

8 Skriptejä käyttäessä on hyvä pitää mielessä: 5 WWW-hypermedian perusta: HTML - HTML ei määrittele yhtään skriptikieltä (joskin JavaScript ~ oletus) - HTML-dokumentin käsittely ja elementteihin viittaaminen tapahtuu jonkin muun kuin "suoraan" HTML-spesifikaation mukaan (yleensä jokin skriptikielen/selainvalmistajan oma rajapinta, tai jokin std-rajapinta, esim. DOM (Document Object Model)) - skriptikieli voi sisältää myös omia HTML:ään kuulumattomia selainkohtaisia käyttöliittymäkomponentteja - paljaan skriptikielen avulla (ilman esim. DOM-rajapintaa) ei selaimessa voida tehdä yleensä mitään kovin järkevää JS sisältää tyypilliset ohjelmointirakenteet sekä mahdollisuuden objektien määrittelyyn HYPERMEDIAN PERUSTEET (syksy 2002) 124

9 Esimerkkejä: C-kieltä tai Javaa hallitseville JavaScriptin perussyntaksi on tuttua; var m="merkkijono",k=1.2; if (condition) { statements1; } else { statements2; } for (initial-statement; test; increment) { statements; } k = Math.floor(k); Jne. Ks. Esim. Esimerkkejä, ks. esim. JavaScript on "olennaisilta osiltaan standardoitu" ECMAScriptin muodossa (ks. ja etsi ECMA-262) Laajempi esimerkki: funktio, parametrit, ynnäämistä & ikkunoiden avaamista HYPERMEDIAN PERUSTEET (syksy 2002) 125

10 <html> <head> <title>javascript-esimerkki</title> <script language="javascript">  </script> </head> <body> <form name="laskin"> <input type="text" value="1" name="numero"> <input type="button" value="kasvata" onclick="laske(numero,3)"> </form> </body> </html> HYPERMEDIAN PERUSTEET (syksy 2002) 126

11 DOM DOM (Document Object Model) ei sisälly HTML-määritykseen, vaan kyseessä on oma standardinsa Skriptien yhteydessä DOM on erittäin keskeinen määritys sillä koska käytännössä kaikki järkevä HTML-prosessointi perustuu standardimuotoisen dokumenttiobjektimallin käyttöön DHTML DOM, W3C DOM Javascript ja DOMit, esimerkkejä MS DHTML, ks. W3CDOM, ks. (+ uudemmat ver.) HUOM: Nykyisten JavaScript- ja DOM-toteutusten kirjavuus eri selaimissa tekee JavaScriptin käytännössä lähes hyödyttömäksi tekniikaksi (valtava ylläpito & tutkimustyö jotta toimisi asiakkailla luotettavasti) HYPERMEDIAN PERUSTEET (syksy 2002) 127

12 Lomakkeet Lomakkeet (form) tarjoavat HTML-kehittäjälle keinon rakentaa yksinkertaisia HTML-perustaisia käyttöliittymiä jotka koostuvat nappuloista, tekstikentistä, edit-ikkunoista jne. Lomakkeet eivät sellaisenaan tee yhtään mitään; lomakkeiden toiminnallisuuden määrittely tehdään käytännössä joko selain- tai palvelinpään skriptien avulla (esim. JavaScript, VBScript, CGI, Servlet) Esimerkki: <FORM action=" method="post"> <LABEL for="firstname">first name: </LABEL> <INPUT type="text" id="firstname"><br> <LABEL for="lastname">last name: </LABEL> <INPUT type="text" id="lastname"><br> <INPUT type="radio" name="sex" value="male"> Male<BR> <INPUT type="radio" name="sex" value="female"> Female<BR> <INPUT type="submit" value="send"> <INPUT type="reset"> </FORM> HYPERMEDIAN PERUSTEET (syksy 2002) 128

13 CGI-standardin idea & perusrakenne (Common Gateway Interface) GET & POST, uploading, tiedon koodaus, yms. CGI-skriptien kirjoittaminen Esimerkki: #!/bin/sh echo "Content-type:text/html" echo "" echo "<html><title>skriptidokumentti</title><body>" date echo "<hr>parametri: <b>" echo $QUERY_STRING echo "</b>" echo "</html></body>" Tietoturvariskit! (mieti yo. esimerkkiä ) Skriptit, cgi-bin-hakemistot ja HTTP-palvelimet (fiksumpi tapa? PHP, ASP, ColdFusion, Zope, Servletit, ) Ks. esim HYPERMEDIAN PERUSTEET (syksy 2002) 129

14 HTML-parsereista Vanhan käytännön mukaisesti HTML-dokumentteja parsitaan "ymmärtäväisellä" asenteella - selaimet ohittavat virheet ja tuntemattomat koodit ellei toisin määrätä - "luovat arvaukset" (esim. "<" ja ">" -merkit) - selainten ja selainversioiden erot! On kuitenkin olemassa myös validoivia HTML-parsereita, joiden avulla myös HTML-dokumenttien kielioppi ja rakenne on mahdollista tarkastaa: ks. esim: - W3C HTML Validation Service ( ) Validius ei kuitenkaan takaa sitä, että elementtejä on käytetty deklaratiivisen merkkauksen hengessä "oikein"! Koska HTML 4.01 on SGML-sovellus, onnistuu validien HTML-dokumenttien käsittely myös "yleisillä" SGML-editoreilla ja selaimilla Koska XHTML 1.0 on XML-sovellus, HYPERMEDIAN PERUSTEET (syksy 2002) 130

15 Yleisiä huomioita HTML-dokumenteista ja niiden kirjoittamisesta Osa määrityksestä olettaa toisten spesifikaatioiden olemassaolon (kielikoodit ja linkkiviittaukset, tagit IMG, FORM, SCRIPT, APPLET, STYLE, OBJECT, ) Osa tageista voidaan käytännössä pudottaa pois, lopputagien käyttö ei ole aina pakollista, attribuuttien arvot eivät tarvitse aina lainausmerkkejä (mutta näin ei PITÄISI tehdä) Elementtien järjestys ei ole aina tarkkaa ja isot ja pienet kirjaimet eivät ole merkittäviä elementtien nimissä (XHTML:n myötä kaikki pitäisi kirjoittaa pienellä) Ns. tyhjämerkit normalisoidaan HTML-dokumentteja parsittaessa; esim. elementtien sisennys välilyönneillä tai tabulaattoreilla ei vaikuta koodeihin (poikkeuksena selainparserien pikkumokat) Esitysvaiheessa tyhjämerkit sievennetään elementtien sisällön osalta vastaavasti (+poikkeukset, kuten esim. PRE-tagi) HYPERMEDIAN PERUSTEET (syksy 2002) 131

16 Osa elementeistä on kontekstisidonnaisia, osa ei, vrt. esim: 5 WWW-hypermedian perusta: HTML <HR> <B>moi</B> <TABLE><TR><TD>Cell</TABLE> <ul> <li>yksi</li> <li>kaksi</li> <li>kolme</li> </ul> Selain päättää viime kädessä dokumentin ulkoasusta, tosin ulkoasumääritykset voidaan irrottaa dokumenteista tyylimääritysten (CSS, JSS, ) avulla Palstoitus yms. sivuntaitto tehdään usein taulukoiden avulla (vaikka ei pitäisi) Yleisesti käytössä oleva "HTML"-koodisto on käytännössä varsin kirjavaa - Sekaisin rakenne-, ulkoasu- ja metakoodeja - HTML-version 4.0 mukaiset koodit vs. vanhempien HTML-versioiden koodit, joista osa on poistumassa standardista ([deprecated]) - esim. META-koodin kautta välitettävät sovelluskohtaiset koodit - HTTP-palvelinohjelmien tunnistama (esim. kommentti)koodaus - suurten palveluntarjoajien ja ohjelmistotalojen käyttämät, "selainlaajennukset", kommenttikoodit ja omat mv. koodit HYPERMEDIAN PERUSTEET (syksy 2002) 132

17 Käytössä on virallisestikin eri HTML-versioita (läh. HTML 3.2, 4.0 ja 4.01) ja näiden tyyppimäärityksiä (strict, transitional, loose) Uusia ominaisuuksia ja käyttötapoja tulee koko ajan lisää vielä erilaisten selainlaajennusten (plug-in, ActiveX yms.) ja integroitujen WWWylläpitotyökalujen kautta Kaikkia HTML 4.0 -standardissa esitettyjä osia ei tueta yleisesti lainkaan, ei ainakaan oikein Harkitut "selainsodat" haittaavat "cross-platform" -kehittäjän työtä joskus tarkoituksellisestikin (osa ongelmista tosin ratkennee "itsestään") - HTML-dokumenttien "oikein muodostettu rakenne" - Java-virtuaalikoneet ja JavaScript vs. VBScript - dokumenttimallien eroavaisuudet eri selaimissa - tyylikielten eri tulkinnat - Java, ActiveX, JavaBean, yms. sotkut - IE5:n rooli osana Windows-käyttöjärjestelmää (esim. ohjelmien päivitys) HYPERMEDIAN PERUSTEET (syksy 2002) 133

18 Mitä HTML:llä saa aikaan? Tekstiä, hypertekstiä ja hypermediaa sen mukaisesti, mitä laajennuksia otetaan käyttöön Perus-HTML: muotoiltua (hyper)tekstiä, jonka seassa - kuvia, taulukoita, listoja, - lomakkeita, symboleita,... Laajennettuna lisäksi - toimintaa lomakkeisiin (CGI, PHP, ASP, ), erikoisia fontteja (CSS2), - monipuolisia animaatioita & ääniä (pluginit), ohjelmia (objektit & sovelmat), - älykkäitä komponentteja (objektit), tietokantoja (objekteihin ja sovelmiin liittyvät standardit), HYPERMEDIAN PERUSTEET (syksy 2002) 134

19 Mitä perus-html:llä ei yksin oikein saa aikaan? Monipuolinen sivuntaitto Dynaamiset HTML-sivut Monipuolinen multimedia WWW-ohjelmat...mutta näihin kaikkiin löytyy sopivia laajennuksia sekä HTML:n että WWWpalvelimien taholta Osa HTML-koodeista itse asiassa olettaa HTML:n ulkopuolisten mekanismien käyttöä (OBJECT, SCRIPT, STYLE, ) Käytännössä esim. videoleikkeiden esittämiseen & ohjelmien ja skriptien ajamiseen vaadittava tekniikka löytyy suosituimmista selainohjelmista (tai on lisättävissä näihin selainlaajennusten muodossa) HYPERMEDIAN PERUSTEET (syksy 2002) 135

20 HTML-dokumenttien kirjoittaminen ja tuottaminen ( ) HTML:n tuottaminen valmiista lähdemateriaalista: RTFtoHTML yms. skriptit Yksinkertainen tuottaminen ja editointi (koodi suoraan HTML-muodossa) - MS Frontpage Express (ilmaisohjelma; jakelu Internet Explorerin mukana) - Netscape Composer (ilmaisohjelma; Netscape Communicatorin mukana) Kehittyneempi editointi (koodi muussa kuin perus-html-muodossa) - MS Frontpage (löytyy TTKK:lla mikroluokasta Sb204, ks. ) - Macromedia Dreamweaver (ks. ) HTML:n generointi (tieto jossain muussa muodossa kuin HTML-muodossa): dynaamiset HTML-sivut (esim. CGI, ASP & PHP) ja HTML:n tuottaminen tietokannoista ja rak.dokumenteista (esim. XLST) HYPERMEDIAN PERUSTEET (syksy 2002) 136

21 HTML-resursseja verkossa Simppeli HTML-tutoriaali aloittelijoille, "Getting started with HTML" (ks. ) HTML 4.01 (ks. ) josta SGML:n ja HTML:n suhteesta kiinnostuneiden kannattaa tutustua osaan "On SGML and HTML" (ks. ) XHTML 1.0 (ks. ) HTML 3.2 (ks. ) Vaikka selaimet eivät HTML-dokumentteja kriittisesti parsikaan, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. hypertext/hypertext/www/markup/markup.html ) HYPERMEDIAN PERUSTEET (syksy 2002) 137

22 Ettei totuus unohtuisi: käytettävyys (tähän palataan vielä) WWW-sivujen kanssa kikkailu ei aina ole sama asia kuin hyvän hypermedian tekeminen. Monipuolisen hypermedian tekeminen muistuttaa käyttöliittymäsuunnittelua. Käytettävyyden muistilista kannattaa pitää mielessä (Nielsen): - järjestelmän tila (jos on pakko käyttää) pitää olla aina käyttäjän tiedossa - järjestelmän käsitteiden tulee vastata sovellusalueen käsitteitä - ei-toivotut komennot on voitava selkeästi peruuttaa - käsitteiden ja toimintojen tulee olla systemaattisia ja odotusten mukaisia - käyttövirheet tulee ennakoida ja ennaltaehkäistä virheiden tekeminen - käytön tulee olla havaitsemista ulkoamuistamisen sijaan - tehokäyttäjille on tarjottava tehokkaita menetelmiä (optiot ja adaptiivisuus) - pieni on kaunista - toteuta selkeät virheviestit jotka ehdottavan ongelman korjaamista - ohjeet ja dokumentaatio tulisivat aina olla tarvittaessa saatavilla HYPERMEDIAN PERUSTEET (syksy 2002) 138