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



Samankaltaiset tiedostot
Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

3 WWW-hypermedian perusta: HTML

4 WWW-hypermedian perusta: HTML. Kehykset

HTML-dokumenttien keskeiset piirteet

HTML-dokumenttien keskeiset piirteet. Keskeinen HTML-merkkaus == XHTML Basic. Hypertekstilinkit. Teksti

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

T Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

CSS - tyylit Seppo Räsänen

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Verkkosivut perinteisesti. Tanja Välisalo

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

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

Digitaalisen median tekniikat. Luento 3: CSS

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

6 XML-työkalut 1. 6 XML-työkalut

Internet-pohjaisen oppimisympäristön laadinta. Luento 3

Johdatus rakenteisiin dokumentteihin

JWT 2016 luento 11. to klo Aulikki Hyrskykari. PinniB Aulikki Hyrskykari

Alkuun HTML5 peliohjelmoinnissa

Taustaa. CGI-ohjelmointi

MITÄ JAVASCRIPT ON?...3

ARVO - verkkomateriaalien arviointiin

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Johdatusta selainohjelmointiin

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

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

Code Camp for Girls. Sanna Nygård. Lokakuussa

Lisätehtävät. Frantic 2015 sivu 1

Javascript 2: Ohjelmointikielen ominaisuudet. Jaana Holvikivi Metropolia

Ajatus kaiken taustalla

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

XML, XHTML ja CSS. T Hypermediadokumentin laatiminen. Mikko Pohja

Digitaalisen median tekniikat xhtml - jatkuu

TIEDEJUTTUKURSSI FM VILLE SALMINEN

/ * PROSESSORIN C-KIELINEN OHJELMA */

HTML5 & CSS3 perusteet

WWW-Sivustojen suunnittelu

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat

HTML5 video, audio, canvas. Mirja Jaakkola

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1

Digitaalisen median tekniikat xhtml - jatkuu

Järjestelmäarkkitehtuuri (TK081702) AJAX, Asynchronous JavaScript And XML. AJAX, Asynchronous JavaScript And XML

8 Hypermedian suunnitteleminen

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

Digitaalisen median tekniikat. Luento 4: JavaScript

Flash ActionScript osa 4

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

JS-kehitys - yleiskuvaus. TIEA255 - Juho Vepsäläinen

Cascading Style Sheets

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (

ARVO - verkkomateriaalien arviointiin

Helsingin yliopisto, TKTL Tietokantojen perusteet, s 2000 WWW-tietokantasovellukset Harri Laine 1. vapaamuotoiset tiedot

AT4-kotisivukurssi. 4. jakso

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi

Hieman linkkejä: lyhyt ohje komentoriviohjelmointiin.

3 Verkkosaavutettavuuden tekniset perusteet

2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet

Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus

QT tyylit. Juha Järvensivu 2008

HTML5 -elementit jatkuu

3 Sivupolku: metaforat & selittäminen


HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Luento 10: XML WWW:ssä

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta:

XHTML aloitus. Sisällys

Ulkopuolisen tyylitiedoston käyttö

2 Rakenteisten dokumenttien perusteet

3 WWW-hypermedian perusta: HTML

Internetin hyödyt ja vaarat. Miten nettiä käytetään tehokkaasti hyväksi?

Digitaalisen median tekniikat. JSP ja XML

4. Lausekielinen ohjelmointi 4.1

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

WWW-sivujen tuottaminen (FrontPage 2000) Ali Omar, 2001

Harri Laine 1. Digitaalisen median tekniikat, s2007 HY/TKTL, palvelinohjelmointi_1. Palvelinohjelmointi

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

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

1 Yleistä Web-editorista Web-editori -dokumentin luominen Pikatoimintopainikkeet Tallenna... 3

2. PEHMEÄ XHTML XRAJAHTML

Digitaalisen median tekniikat, k2004 HY/TKTL, palvelinohjelmointi_1 21/04/2004. Harri Laine 1. Palvelinohjelmointi. Staattinen www-sivu

W3C & verkkojulkaisun standardit

Digitaalisen median tekniikat. Palvelinohjelmointi Harri Laine 1

Näin järjestän ohjelmointikurssin, vaikka en ole koskaan ohjelmoinut

Digitaalisen median tekniikat. Palvelinohjelmointi

Väitöskirja -mallipohja

Harjoitustyö: virtuaalikone

Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript)

Luento 5. Timo Savola. 28. huhtikuuta 2006

Fronter kotiohje HELSINGIN KAUPUNKI OPETUSVIRASTO MEDIAKESKUS KOTIOHJE

Worldpress ohje. Artikkelin kirjoittaminen, päivittäminen, kuvan, linkin, lomakkeen ja Google-kalenterimerkkinnän lisääminen

Transkriptio:

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"> 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 117

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. http://www.w3.org/style/css/ ) - formatoitava elementti valitaan säännöllä (valitsimet) - säännön valitsemien elementtien formatointi annetaan ominaisuusmääritteillä (+limitys & perintä) 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 118

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 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 119

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> 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 120

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> 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 121

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="www.disney.com">Disney.com</A> while waiting the next software version?) </IFRAME> 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 122

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 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 123

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 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 124

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. http://wdvl.internet.com/authoring/javascript/ Esimerkkejä, ks. esim. http://javascript.internet.com/ JavaScript on "olennaisilta osiltaan standardoitu" ECMAScriptin muodossa (ks. http://www.ecma.ch/ ja etsi ECMA-262) Laajempi esimerkki: funktio, parametrit, ynnäämistä & ikkunoiden avaamista 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 125

<html> <head> <title>javascript-esimerkki</title> <script language="javascript"> <!-- // IE5/JavaScript-esimerkki function laske(element, limit) { element.value++; if (element.value==limit) alert("huom: elementin arvo on "+limit+"!"); if (element.value>=(limit+1)) { window.open("http://www.disney.com/"); } } --> </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> 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 126

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. http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml.asp W3CDOM, ks. http://www.w3.org/tr/rec-dom-level-1/ (+ 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) 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 127

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="http://somesite.com/prog/adduser" 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> 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 128

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. http://wdvl.internet.com/authoring/cgi/ 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 129

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 ( http://validator.w3.org/ ) 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, 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 130

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) 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 131

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 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 132

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) 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 133

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), -... 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 134

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) 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 135

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. http://www.microsoft.com/frontpage/ ) - Macromedia Dreamweaver (ks. http://www.macromedia.com/software/dreamweaver/ ) 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) 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 136

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

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 73270 HYPERMEDIAN PERUSTEET (syksy 2002) 138