HTML-dokumenttien keskeiset piirteet

Transkriptio

1 HTML-dokumenttien keskeiset piirteet HEAD-osa BODY-osa HTML:n ydinattribuutit ([core attributes]) Keskeiset kieleen liittyvät attribuutit, kansainvälisyys Lohkotyyliset elementit & tekstityyliset elementit Kuvaileva merkkaus vs. formatoitu teksti HTML-spesifikaatio olettaa erityisesti tyylien (esim. CSS) ja skriptien (esim. JavaScript) olemassaolon (vrt. XHTML Basic) Tapahtumankäsittely MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 81

2 Keskeinen HTML-merkkaus == XHTML Basic HTML 4 on varsin laaja spesifikaatio -- no mikäs sitten on keskeisin osa HTML:ää? (kohtuullisen hyvä) vastaus: XHTML Basicin sisältämä merkkaus: Structure module body, head, html, title Text module abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Hypertext Module a List Module dl, dt, dd, ol, ul, li Basic Forms Module form, input, label, select, option, textarea Basic Tables Module caption, table, td, th, tr Image Module img Object Module object, param Metainformation Module meta Link Module Link Base Module base EI MUKANA: b, i, map, frame, style, Sitten takaisin koko HTML-merkkauksen esittelyyn MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 82

3 Teksti Tekstin esittämistavat: tekstin merkitystä kuvaavat merkinnät vs. tekstin ulkoasua kuvaavat merkinnät, vrt: <del>xhtml 1.0</del><ins>XHTML 1.1</ins> on HTML:n uusin versio <small>tavallista pienempää tekstiä</small> <code> function tervehdi() { alert( Moro nääs! ); } </code> Tekstin jako, kappaleet ja otsikot (p, div, h1-h6, ), tekstin merkitystä kuvaavat elementit (abbr, acronym, cite, code, dfn, rm, kbd, samp, strong, var, ) Tekstin ulkoasua kuvaavat muotoilut (b, big, i, small, strike, sub, sup, tt, u, ), värien ja efektien käyttö Poistuva fontinkäsittely (basefont, font), tekstin välistys ja asemointi (br, pre, center, ), listarakenteet (ul, ol, dl) + muuta (blockquote, address, hr, ) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 83

4 Hypertekstilinkit Hypertekstiä syntyy erityisen ankkuri-elementin avulla. <a href=" kotisivu</a> <a href="../index.html"><< Etusivulle</a> <a href="sarjat/julmahuvi/">studio Julmahuvi</a> ei jätä kylmäksi! Nimetyt ankkurit: linkin kohteen osoittaminen HTML-dokumentin sisällä <p><a name="lasi">lasi</a> on vauhdikas neuvostoliittolainen toimintajännäri entisen KGB-agentin odysseiasta...</p> <a href= elokuvat.html#lasi >Lasi</a> Oleellisesti samaan päästään myös id-attribuutin käytöllä nimeämällä elementti <p id="lasi">lasi on vauhdikas neuvostoliittolainen toimintajännäri entisen KGB-agentin odysseiasta...</p> HTML-dokumenttien ohella linkit voivat viitata myös muihin tiedostoihin, tällöin tiedostojen käsittely riippuu selainohjelmasta (plugins, helper applications, ): Vilkaise myös <a href="viruscontainer.doc">virustiedote</a>! MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 84

5 Entiteetit, merkkiviittaukset, metatieto ja objektit HTML-dokumentin sisään voi upottaa myös (korvattavien elementtien avulla) objekteja, joita HTML ei suoraan sisällä kuten kuvia sekä entiteetti- ja merkkiviittauksia, esim: <img src="pic.jpg" alt="kuva"> Hyvää yötä ABC HTML-metatiedon avulla taas voidaan toteuttaa esim. client pull -operaatio tai vain kuvailla dokumentin sisältöä: <meta http-equiv="refresh" content="0;url=./dir.cgi"> <meta name="keywords" lang="en" content="mathm-37000, hmp"> Objektien käsittely HTML-kielen ulkopuolella (object- ja embed-tagit) Lisää ominaisuuksia: skriptit (script) ja appletit (applet& object) - Java, JavaScript, VBScript, MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 85

6 Taulukot, kuvat, kuvakartat, table (taulukko), esim. <table> <thead><tr><td>nimi</td><td>sijainti</td></tr></thead> <tbody><tr><td>miska</td><td>helsinki</td></tr></tbody> </table> img (kuva) map (selainpäässä toimivan kuvakartan tekeminen) <img src="miska.jpg" usemap="miskamap" alt="miska, Martti ja James"> <map name="miskamap"> <area shape="rect" coords="20,50,170,300" href="martti.html" alt="martti valmiina"> <area shape="circle" coords="220,220,50" href="jousi.html" alt="nuolessa on nukutusainetta"> </map> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 86

7 Palvelinpään kuvakartan toteuttaminen onnistuu myös (edellyttäen tosin CGI-skriptin tms. kirjoittamista) <p> <a href=" <img src="kisa.gif" ismap alt="missä jallu luuraa?"></a> </p> Sovelman lisääminen sivulle onnistuu applet- ja object-elementtien avulla: <applet code="nervoustext.class" width="375" height="50"> <param name=text value="hypermedian perusteet"> </applet> <object codetype="application/java" classid="java:nervoustext.class" width="375" height="50"> <param name="text" value="hypermedian perusteet"> </object> object-elementin avulla HTML-dokumenttiin voidaan periaatteessa upottaa mitä tahansa (toinen HTML-dokumentti, appletti, kuva, tai jokin muu, läh. pluginin tulkitsema & ymmärtämä resurssi) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 87

8 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>hmp05 kehyksillä <title> <frameset cols="150,*"> <frame src="valikko.html" name="valikkokehys"> <frame src="etusivu.html" name="sisaltokehys"> <noframes> Selaimesi ei tue kehyksiä, valitse <a href= eikehyksia.html >kehyksetön versio</a>. </noframes> </frameset> </html> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 88

9 Linkkien avautumisikkunan osoittaminen tapahtuu target-attribuutilla 4 Johdanto CSS-tyyleihin Takaisin <a href="etusivu.html" target="sisaltokehys">etusivulle</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="sisaltokehys"></head> HTML 4.0:n myötä myös ns. inline-kehysten (ns. kelluva kehys) käyttö on periaatteessa mahdollista iframe-koodin avulla (selaintuki tiettyjen ominaisuuksien suhteen vaihtelee!): <p>ajankohtaista: <iframe src="ajankohtaista.html" width="150" height="100" align="right"> <p> Selaimesi ei tue kelluvia kehyksiä, valitse <a href="ajankohtaista.html">ajankohtaista</a> nähdäksesi tuoreimmat kuulumiset. </p> </iframe> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 89

10 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 MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 90

11 Skriptejä käyttäessä on hyvä pitää mielessä: - 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 Ks. esim. Ks. esim. Esimerkkejä, ks. esim. JavaScript on olennaisilta osiltaan standardoitu ECMAScriptin muodossa (ks. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 91

12 Laajempi esimerkki: funktio, parametrit, vertailua & ikkunoiden avaamista <html> <head><title>arvaa numero!</title> <script type="text/javascript"><!-- function check( guess, number) { if (guess == number) { alert( "Oikein!") window.open( " } else if (guess > number) { alert ( "Pienempi!"); } else { alert( "Suurempi!"); } document.guessform.guess.focus(); } --></script></head> <body> <form name="guessform" action=""> <p> <input type="text" value="1" name="guessfield"> <input type="button" value="kokeile" onclick="check( guessfield.value, 3)"></p> </form> </body></html> 4 Johdanto CSS-tyyleihin MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 92

13 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ä käytännössä kaikki järkevä HTML-prosessointi perustuu standardimuotoisen dokumenttiobjektimallin käyttöön DHTML DOM, W3C DOM MS DHTML, ks. entry.asp W3CDOM, ks. & 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) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 93

14 Ajax Javascriptin ensimmäinen killerisovellus? Asynchronous JavaScript and XML eli Ajax on teknologiaperhe, joka mahdollistaa monipuolisempien Web-selaimissa toimivien käyttöliittymien toteuttamisen. Perinteisen DHTML-patterin (HTML, CSS, DOM & JavaScript) ohella Ajaxin ytimeen kuuluu selaimien Ajax-soveltajille tarjoama XMLHttpRequest-rajapinta, joka mahdollistaa XML-muotoisen tiedon välittämisen JavaScriptillä toteutetun toiminnallisuuden ja palvelimen välillä. Ajax on perinteistä JavaScript-ohjelmointia parempi vaihtoehto paristakin syystä: - XMLHttpRequest mahdollistaa informaation noutamisen palvelimelta ilman, että HTML-dokumentti on ladattava kokonaisuudessaan uudestaan. - Sovelluksen tila on talletettu XMLHttpRequest-rajapinnan avulla palvelimelle sen sijaan, että tilaa ylläpidettäisiin selaimen muistissa: tiedot eivät häviä selaimen sulkeutuessa. Ajaxilla toteutettuja palveluita ovat esimerkiksi Google Suggest ( Protopage ( ja Backpack ( MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 94

15 Lomakkeet Lomakkeet (form) tarjoavat HTML-kehittäjälle keinon rakentaa yksinkertaisia HTMLperustaisia 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"> <p><label for="firstname">etunimi: </label> <input type="text" id="firstname"> <br> <label for="lastname">sukunimi: </label> <input type="text" id="lastname"> <br> <input type="radio" name="sex" checked="checked" value="female">nainen <br> <input type="radio" name="sex" value="male">mies <br> <input type="submit" value="lähetä"> </p> </form> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 95

16 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ä ) 4 Johdanto CSS-tyyleihin Skriptit, cgi-bin-hakemistot ja HTTP-palvelimet (fiksumpi tapa? PHP, ASP, ColdFusion, Zope, Servletit,, J2EE,...) Ks. esim. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 96

17 HTML-jäsentimistä Vanhan käytännön mukaisesti HTML-dokumentteja jäsennetään 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-jäsentimiä, joiden avulla myös HTMLdokumenttien kielioppi ja rakenne on mahdollista tarkastaa: ks. esim: - W3C HTML Validation Service ( ) Validius ei kuitenkaan takaa sitä, että elementtejä on käytetty kuvailevan 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, MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 97

18 Yleisiä huomioita HTML-dokumenteista ja niiden kirjoittamisesta Osa määrityksestä olettaa toisten spesifikaatioiden olemassaolon (kielikoodit ja linkkiviittaukset, elementit img, form, script, applet, style, object, ) Osa elementeistä 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 jäsennettäessä; esim. elementtien sisennys välilyönneillä tai tabulaattoreilla ei vaikuta koodeihin (poikkeuksena selainjäsentimien pikkumokat) Esitysvaiheessa tyhjämerkit sievennetään elementtien sisällön osalta vastaavasti (+poikkeukset, kuten esim. pre-tagi) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 98

19 Osa elementeistä on kontekstisidonnaisia, osa ei, vrt. esim: 4 Johdanto CSS-tyyleihin <hr> <strong>hei vaan!</strong> <table><tr><td>esimerkkisolu</td></tr></table> <ul> <li>inkkari</li> <li>astronautti</li> <li>vompatti</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 MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 99

20 Käytössä on virallisestikin eri HTML-versioita (läh. HTML 3.2 ja 4.01 sekä XHTML 1.0 ja Basic) ja näiden (HTML 4.01 & XHTML 1.0) vaihtoehtoisia tyyppimäärityksiä (Strict, Transitional, (Loose)) Uusia ominaisuuksia ja käyttötapoja tulee koko ajan lisää vielä erilaisten selainlaajennusten (plug-in, ActiveX yms.) ja integroitujen WWW-ylläpitotyökalujen kautta Kaikkia HTML standardissa esitettyjä osia ei tueta yleisesti lainkaan, ei ainakaan oikein Harkitut selainsodat haittaavat laajaan käyttäjäkuntaan tähtäävän kehittäjän työtä joskus tarkoituksellisestikin (ongelma on tosin pienenemään päin) - HTML-dokumenttien oikein muodostettu rakenne - Java-virtuaalikoneet ja JavaScript vs. VBScript - dokumenttimallien eroavaisuudet eri selaimissa - tyylikielten eri tulkinnat - Java, ActiveX, JavaBean, yms. sotkut - IE:n rooli osana Windows-käyttöjärjestelmää (esim. ohjelmien päivitys) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 100

21 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 kirjasimia (CSS1), - monipuolisia animaatioita & ääniä (pluginit), ohjelmia (objektit & sovelmat), - älykkäitä komponentteja (objektit), tietokantoja (objekteihin ja sovelmiin liittyvät standardit), -... MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 101

22 Mitä perus-html:llä ei yksin oikein saa aikaan? Monipuolinen sivuntaitto (CSS2 tarjoaa ratkaisun tähän ainakin periaatteessa) 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) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 102

23 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) - Mozilla Composer (ilmaisohjelma; Mozillan mukana) Kehittyneempi editointi (koodi muussa kuin perus-html-muodossa) - Macromedia Dreamweaver (ks. ) - Microsoft Frontpage 2003 (ks. ) HTML:n generointi (tieto jossain muussa muodossa kuin HTML-muodossa): dynaamiset HTML-sivut (esim. CGI, ASP & PHP) ja HTML:n tuottaminen tietokannoista ja rakenteisisita dokumenteista (esim. XML&XSLT) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 103

24 XHTML Ensimmäinen XML-kieliopin mukainen HTML-versio on XHTML 1.0 (Extensible HyperText Markup Language) - XHTML 1.0 on HTML 4 -kielen XML-kieliopin mukainen uudelleenmuotoilu - kärjistys: XHTML säilyttää HTML 4-kuvauskielen elementtien ja attribuuttien nimet ja tulkinnan entisellään, kielioppi vaihtuu XML:sta SGML:iin XHTML 1.0 jakaantuu (HTML 4.01:n tapaan) kolmeen dokumenttityyppiin: - XHTML 1.0 Strict koostuu pelkästään rakenteen kuvaamiseen tarkoitetuista elementeistä ja attribuuteista (ulkoasu määritellään tyylitiedostoilla) - XHTML 1.0 Transitional sisältää edelleen joukon dokumentin ulkoasuun liittyviä ominaisuuksia (esimerkiksi body-elementin bgcolor-, text- ja link-attribuutit) - XHTML 1.0 Frameset on identtinen Transitional-määrityksen kanssa, paitsi: kehysten määrittelemiseen tarvittava frameset-elementti korvaa body-elementin MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 104

25 Miksi XHTML? XHTML on XML-sovellus - suuri osa W3C:n uusista suosituksista perustuu XML:ään: yhteensopivuus XHTML mahdollistaa XML:n uusien ominaisuuksien hyödyntämisen - erityisesti uusien elementtien esittely (ei mahdollista SGML-pohjaisissa HTMLversioissa, paitsi div- ja span-elementtien sekä class-attribuutin yhteiskäyttö): laajennettavuus W3C:n "Modularization of XHTML" eli XHTML-moduulit määrittelee HTML-sanaston jakamisen tarkoituksenmukaisiin osiin (moduuleihin) - yksittäisessä dokumentissa käytetyt tai tietyn sovelluksen (esim. selain) tukemat HTML-kielen ominaisuudet voidaan yksilöidä tarkemmin: modulaarisuus, profilointi MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 105

26 XHTML Basic pienin yhteinen tekijä XHTML Basic kokoaa yhteen joukon moduuleita siten, että - moduuleiden sisältämät ominaisuudet on mahdollista toteuttaa myös yksinkertaisessa päätelaitteessa (kännykkä, PDA, digi-tv-päätelaite) - moduuleiden sisältämien ominaisuuksien avulla on mahdollista toteuttaa tarkoituksenmukaista hypertekstiä XHTML Basic mahdollistaa esimerkiksi nämä: - perusteksti (sisältäen otsikot, kappaleet ja listat) - hyperlinkit ja linkit esim. tyylitiedostoihin - yksinkertaiset lomakkeet - yksinkertaiset taulukot - kuvat - metatieto MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 106

27 Huomioita XHTML:n kirjoittamisesta Elementtirakenteiden on oltava aidosti sisäkkäisiä, esim: <p><em>tärkeää</em> ja vähemmän tärkeää tekstiä.</p> - sääntö on voimassa myös SGML:n mukaisissa HTML-versiossa mutta selaimet eivät tätä (edelleenkään) yleensä tarkasta Elementtien ja attribuuttien nimet kirjoitetaan pienellä (XML erottelee isot ja pienet kirjaimet toisistaan) SGML:n lyhennemerkinnät eivät ole käytössä, joten elementin lopputagi on aina lisättävä, esim: <ul> <li>eka</li> </ul> Vaihtoehtoisesti käytetään tyhjän elementin tagia, esim: <hr /> - HUOM: tyhjän elementin tagissa kannattaa lisätä välilyönti ennen "/"-merkkiä (parantaa yhteensopivuutta vanhojen selainten kanssa) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 107

28 Attribuutin arvon ympärillä on aina käytettävä lainaus- tai merkkejä, esim: <a href=" kotisivu</a> <img src="televisio.gif" alt='televisio, 28"'/> Yksinkertainen XHTML-dokumentti: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>taas yksi (X)HTML-esimerkki</title> </head> <body> <p>jälleen yksi <a href=" </body> </html> Huomaa: dokumentin kielioppi on XML:n mukainen mutta elementtien ja attribuuttien nimet (muutamaa lukuun ottamatta) ovat tuttuja vanhoista HTML-versioista MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 108

29 XHTML on HTML:n tulevaisuus Nykyinen ja tuleva W3C:n tekemä HTML-kuvauskielen kehitystyö liittyy pelkästään XHTML:ään Uusin HTML-kielen versio on XHTML perustuu XHTML 1.0 Strict dokumenttityyppiin ja moduuleihin - suunniteltu toimimaan pohjana tuleville XHTML-perheen määrityksille XHTML 2.0 on jo kehitteillä Lisätietoa: - XHTML 1.0: - XHTML Basic: - Modularization of XHTML: - XHTML 1.1: MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 109

30 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 jäsennäkään, voi omia (ja miksei muidenkin) dokumentteja validoida W3C:n HTML Validation Servicellä (ks. ) Lopuksi nyanssi WWW-kivikaudelta: ensimmäinen HTML-versio (ks. ) MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 110

31 4 Johdanto CSS-tyyleihin CSS (Cascading Style Sheets) on dokumenttien ulkoasun määrittelyyn (formatointi) käytettävä tyylikieli. CSS-tyylejä käytetään yleisesti HTML-kielen parina. CSS on ns. koristeleva (dressing-up) tyylikieli: sen avulla määritellään dokumentin ulkoasun, ei muokata dokumentin rakennetta. Tämä asettaa tietyt reunaehdot CSStyylien käytölle: dokumenttien rakenne on suunniteltava huolellisesti etukäteen. CSS on yleinen tyylikieli, jonka käyttö ei rajoitu pelkästään HTML-dokumentteihin: CSS-tyylien avulla voidaan määritellä myös XML-dokumenttien ulkoasu. XML:n yhteydessä käytetään yleensä XSL-tyylikieltä (Extensible Stylesheet Language). Cascading Style Sheets tarkoittaa suomeksi limittyviä tyylitiedostoja. Limitys on CSS-tyylien keskeinen ominaisuus, johon perehdytään myöhemmin. CSS-tyyleistä on olemassa kaksi lopullista versiota, joista tässä keskitytään kielen ensimmäiseen versioon (Cascading Style Sheets, Level 1). Selaimet tukevat CSS1- tyylejä laajasti, kielen uudemman version (CSS2) selaintuki on vielä rajallinen. CSS1 esittelee dokumenttien formatoinnin perusominaisuudet, joita CSS2 laajentaa: vakiotekstien lisääminen, mahdollisuus määritellä miltä dokumentti kuulostaa,... MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 111

32 Tyylien käytön perusidea HTML:n yhteydessä tyylien käytön perusidea on dokumentin HTML-merkkauksen 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 MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 112

33 CSS-tyylien perusteet CSS-sääntö koostuu kolmesta osasta: valitsimesta (selector), ominaisuudesta (property) ja arvosta (value): valitsin {ominaisuus: arvo} Yksi sääntö voi sisältää useita ominaisuus-arvo-pareja: valitsin {ominaisuus: arvo; ominaisuus: arvo;} Valitsimen avulla määritellään ne HTML-elementit, joiden ulkoasuun säännön halutaan vaikuttavan. Ominaisuus-arvo-pareilla määritellään haluttu ulkoasu. Esimerkki: "käytä kaikissa p-elementeissä Garamond-kirjasinta": p {font-family: Garamond;} Esimerkki: "käytä kaikissa em-elementeissä hopeanharmaata taustaväriä ja lihavoitua kirjasinta": em {background-color: silver; font-weight: bold;} CSS-tyylien keskeinen ominaisuus on periytyminen: elementille määritellyt ominaisuudet vaikuttavat myös elementin lapsielementteihin. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 113

34 Tyylien liittäminen HTML-dokumenttiin CSS-määritysten liittäminen HTML-dokumenttiin voidaan tehdä kolmella eri tavalla: 1. Viittaaminen ulkoiseen tyylitiedostoon head-elementtiin sijoitettavan linkelementin avulla: <link rel="stylesheet" type="text/css" href="tyyli.css"> 2. Dokumenttikohtaiset tyylimääritykset kirjoitetaan head-elementtiin sijoitettavan style-elementin sisään: <style type="text/css"> h1 { font-size: 120%;} </style> 3. Elementtikohtaiset tyylimääritykset kirjoitetaan style-attribuutin arvoksi: <p style="border-width: 1px; border: solid;">olen laatikko!</p> Ulkoisen tyylitiedoston käyttö on ehdottomasti suositeltavin toimintatapa. Dokumenttikohtaiset tyylimääritykset vaikeuttavat ulkoasun ylläpitoa. Elementtikohtaiset tyylimääritykset vievät pohjan dokumenttien sisällön ja ulkoasun erottamiselta. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 114

35 Esimerkki tyylien käytöstä Seuraava dokumentti koostuu kolmesta tiedostosta: esim.html (sisältö & rakenne), lamppu.gif (dokumenttiin upotettu kuva) ja esim.css (ulkoasun määrittely): tiedosto esim.css body { background: white; } h1 { color: black; font-size: 20pt; font-weight: bold; } p { color: blue; font-size: 12pt; } tiedosto esim.html: <html> <head><title>moi maailma!</title> <link rel="stylesheet" type="text/css" href="basic.css"> </head> <body> <h1>esimerkki</h1> <p><img src="lamppu.gif" alt="syttynyt lamppu">dokumenttien kirjoittaminen on oikeastaan aika helppoa.</p> </body> </html> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 115

36 CSS-tyylien perusta: valitsimet, ryhmittely, pseudoluokat ja - elementit CSS-tyylien kiinnittäminen haluttuihin elementteihin perustuu valitsimien käyttöön: Yksinkertaisin mahdollinen valitsin koostuu pelkästään elementin nimestä. Esimerkki valitsee kaikki p-elementit: p {color: blue;} Kontekstivalitsin määrittelee tarkemman elementtirakenteen. Seuraavassa valituksi tulevat taulukon (table) otsikkorivin (thead tr) solut (td): table thead tr td {background-color: orange;} HTML-elementtejä voidaan luokitella class-attribuutin avulla: <p>tavallista tekstiä.</p> <p class="huomio">tämä teksti on tärkeää</p> Luokkavalitsimen avulla otetaan kantaa luokitteluun. Tyylimääritystä käytetään ainoastaan p-elementteihin, joiden class-atribuutin arvo on "huomio": p.huomio {font-weight: bold;} HTML-elementeille voidaan antaa yksilöllinen tunniste id-attribuutin avulla: MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 116

37 <div id="paivitystiedot">päivitetty </div> Elementtikohtainen tyyli voidaan määritellä id-valitsimen avulla. Seuraava sääntö kohdistuu ainoastaan div-elementtiin, jonka id-attribuutin arvo on paivitystiedot : div#paivitystiedot { background-color: lime;} Valitsimia voidaan ryhmitellä kirjoitustyö vähentämiseksi ja tyylitiedoston selkeyttämiseksi. Tämä sääntö vaikuttaa dokumentin kaikkiin H1-, H2- ja H3- elementteihin: h1, h2, h3 { text-align: right;} Pseudoluokkien avulla voidaan ottaa kantaa esimerkiksi linkin (A-elementti) tilaan: a:link {color: blue;} /* linkissä ei ole vierailtu */ a:visited {color: purple;} /* linkissä on vierailtu */ a:hover {background-color: lime;} /* käyttäjä osoittaa linkkiä hiirellä */ a:active {text-decoration: blink;} /*linkki on aktiivinen */ Hover-pseudoluokka on määritelty vasta CSS2-tyyleissä. Pseudoelementtien avulla voidaan ottaa kantaa rakenteisiin, joita ei ole erikseen merkattu dokumentteihin. Sääntö suurentaa jokaisen p-elementin ensimmäisen kirjaimen: p:first-letter {font-size: bigger;} MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 117

38 Tämä sääntö muuttaa jokaisen p-elementin ensimmäisen rivin värin vihreäksi. Huomaa, että "ensimmäinen rivi" riippuu selaimen leveydestä ja kirjasimen koosta, joten sen merkkaaminen dokumenttiin (elementtien avulla) on mahdotonta: p:first-line {color: green; } Valitsimia on mahdollista myös yhdistellä. Sääntö kohdistuu kaikkiin niihin a- elementteihin, jotka ovat sellaisten div-elementtien sisällä, joiden class-attribuutin arvo on navigaatio: div.navigaatio a {text-decoration: none;} Esimerkki selventää: <div class="navigaatio"> <a href="z-salamapartio.html">edellinen: Z-Salamapartio</a> <a href="muksuluuri.html">seuraava: Muksuluuri</a> </div> MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 118

39 Miksi CSS-tyylejä kannattaa käyttää? Sisällön ja ulkoasun erottaminen: CSS mahdollistaa (osittain) HTML-dokumentin sisällön ja ulkoasun erottamisen toisistaan. Ylläpidon tehostaminen ja selkeyttäminen: ulkoasun muokkaaminen tehdään (yhtä!) tyylitiedostoa editoimalla ja muutokset sisältöön tehdään HTML-dokumentteihin. Yhdenmukaisuus: CSS-tyylien käyttö onnistuu ainoastaan, jos kaikki HTMLdokumentit merkataan samalla tavalla dokumenttien rakenteen yhdenmukaisuus. Yhdenmukainen ulkoasu johtuu siitä, että tyylimääritykset ovat yhdessä tiedostossa. Vahvat formatointiominaisuudet: CSS-tyylien formatointiominaisuudet ovat HTMLkielen tarjoamiin mahdollisuuksiin verrattuna huomattavasti monipuolisemmat. Dokumenttien rakenteen yksinkertaistaminen: HTML-dokumenttien rakenne on yksinkertaisempi, koska merkkaus sisältää ainoastaan sisällön merkityksen kuvailuun liittyvää merkkausta. Myös tiedostokoko pienenee. Saavutettavuus: saman sisällön esittäminen eri kohderyhmille (näkövammaiset, mobiililaitteiden käyttäjät) on (rajoitetusti) mahdollista pelkästään eri tyylitiedostojen avulla. Yksinkertainen rakenne auttaa esimerkiksi lukulaitteen käyttäjiä. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 119

40 CSS-tyylien käyttö: suunnittelua ja järjestelmällisyytä CSS-tyylien tarkoituksenmukainen käyttö edellyttää suunnitelmallista toimintaa: 1. Sisällön käsitteellinen jäsentäminen: Yleisen käsitemallin luominen sisällöstä. Käsitemallin suunnittelu edellyttää sisällön asiantuntemusta. 2. HTML-merkkauksen suunnittelu: Käsitemallin perusteella tehdään yksityiskohtainen suunnitelma. Suunnitelmassa määritellään ne elementit ja elementtirakenteet, joilla sisältö merkataan käsitemallin mukaisesti. 3. Sisällön merkkaaminen: Sisältö merkataan HTML-dokumenteiksi suunnitelman perusteella. Dokumentin yleinen rakenne voidaan sijoittaa ns. sivupohjaan, joka kopioidaan jokaisen tuotettavan dokumentin pohjaksi. 4. Tyylien kiinnittäminen: Tyylimäärityksen sijoitetaan erilliseen tyylitiedostoon, johon jokainen HTML-dokumentti viittaa. Teknisesti CSS-tyylien käyttäminen ei edellytä mitää erityistä: tyylien editointi onnistuu HTML-merkkauksen tapaan tavallisella tekstieditorilla. CSS-tyylikielen kielioppi on yksinkertainen, joten periaatteiden opettelun jälkeen käyttäminen on helppoa. Hyödyntämistä helpottavat verkosta löytyvät oppaat. MATHM HYPERMEDIAN PERUSTEET (syksy 2007) 120