JWT 2015 - Johdatus www-tekniikoihin
© Aulikki Hyrskykari, Antti Sand, 2015 - Kopiointi ilman lupaa kielletty.

1. Internet ja World wide web (www)

Termejä Internet (-verkko) ja World Wide Web (-verkko) käytetään usein toistensa synonyymeemeinä, mutta tarkkaan ottaen ne ovat kaksi erillistä (tosin keskenään hyvin läheisesti yhteydessä olevaa) asiaa.

Internet on maailmanlaajuinen, palvelinkoneiden ympärille muodostettujen verkkojen yhteenliittymä, "verkkojen verkko". Se tarjoaa infrastruktuurin World wide web:ille (lyhyemmin www, web, tai arkisemmin vain verkko, netti. WWW on keino siirtää informaatiota internetin yli laitteelta toiselle.

Palvelimet ja selaimet Kaksi (palvelinkoneen välityksellä) internetiin liitettyä laitetta voivat lähettää toisilleen erikseen sovittua säännöstöä, ns. protokollaa noudattavia viestejä.

Verkon käyttäjän kannalta www voidaan jakaa yksinkertaisesti kolmenlaisiin toiminnallisiin osiin:

Palvelimet ovat verkkoon kytkettyjä tietokoneita, jotka tuottavat verkkopalveluja suorittamalla www-palvelinohjelmaa (http daemon) ja siihen liitettyjä muita palvelujen tuottamisessa tarvittavia prosesseja, kuten esim. tietokantajärjestelmiä.

Käyttäjien tietokoneet ovat asiakastietokoneita, jotka suorittavat em. palveluja käyttävää asiakasohjelmaa. WWW:n tapauksessa kyseinen asiakasohjelma on www-selain, joka on verkon välityksellä yhteydessä palvelimiin. Selaimen tehtävänä on toimia palvelun käyttöliittymänä. Staattisten www-sivujen selailuakin voidaan pitää yksinkertaisena verkkopalveluna.

Tiedonsiirron toteuttava verkko on joukko toisiinsa yhdistettyjä palvelimia, joiden kautta voidaan siirtää tietoa palvelimesta X palvelimeen Y. Näiden kahden palvelimen välissä voi olla periaatteessa rajaton määrä välittäviä verkon aktiivilaitteita eli reitittimiä.

Takaisin ylös

1.2 Selaimen ja palvelimen yhteistyö

Selaimen ja palvelimen yhteistyö perustuu pyyntöjen (request) ja vastausten (response) vaihtamiseen. Selain lähettää pyyntöjä, joihin palvelin vastaa. Selain on siis toiminnassa aktiivinen, alullepaneva osapuoli. Kuva selaimen ja palvelimen yhteistyöstäPalvelimen tehtäväksi jää reagoida selaimen toimintaan. Palvelimen vastaukset voivat olla tekstidokumentteja tai jotain muuta binäärimuotoista dataa.

Tiedonsiirron määrittäviä protokollia on Internetissä (Internet Protokolla, IP) käytettävissä useita, mutta WWW käyttää erityisesti HTTP- (Hypertext Transfer Protocol) eli hypertekstin siirtoprotokollaa. HTTP-protokolla, jolla selaimelta lähtevät pyynnöt ja sille takaisin välitettävät vastaukset siirretään, on toteutettu OSI-mallin sovelluskerroksessa. OSI-mallin avulla on toteutettu muitakin protokollia, kuten esim. FTP-tiedostonsiirtoprotokolla tai pääteyhteyksiin tarkoitettu telnet-protokolla. Pyyntöjen ja vastausten sisältö voidaan esittää monessa muodossa kuten rakenteisena dokumenttina HTML- tai XML-kielellä, erilaisissa äänen, kuvan tai liikkuvan kuvan esitysmuodoissa tai yksinkertaisesti vaikkapa paljaana tekstinä.

Tässa tullaan käsittelemään oheisen kuvan vasenta puolta - asiakaskoneen selaimessa toteutettavissa olevia tekniikoita.

Tehdään ensin katsaus historiaan. WWWW ei unohda, vanhaa materiaalia tulee aina olemaan saatavilla, joten on tärkeätä saada hiukan perspekstiiviä ja ymmärtää miten www-sivuja on ajan saatossa tuotettu. Tämän yleiskatsauksen jälkeen lähdetään liikkeelle perusteista, käsitellään staattisten www-sivujen tuottamista HTML- ja CCS- tekniikoilla. Jo näiden tekniikoiden ajantasaisilla versioilla (HTML5 ja CSS3) on aiempaa helpompaa tuottaa dynaamisia verkkosivuja, mutta kurssin lopuksi luodaan katsaus myös selainpuolen, tulkittavilla ohjelmoitikielillä tapahtuvaan, ohjelmointiin (JavaScript). Palvelinpuolen ohjelmointia (PHP, Phyton, Java, ... ) ei tällä kurssilla käsitellä.

Takaisin ylös

1.3 HTML-dokumentti selaimessa

HTML-dokumentit tallennetaan palvelimelle rakenteisina dokumentteina. Rakenteisella dokumentilla (structured document) tarkoitetaan jollakin sovitulla merkkauskielellä (markup language) esitettyä dokumenttia. Dokumentti esitetään kielelle ominaisten elementtien muodossa. Elementit muodostavat dokumentissa hierarkisen rakenteen ja niillä kullakin on oma merkityksensä.

Www-sivujen merkkauskieli on aina ollut HTML. HTML kehitettiin alunperin kuvaamaan tieteellisten dokumenttien rakennetta, mutta sen käyttö laajeni ja vuosien mittaan sitä on käytetty kuvaamaan monenlaisia dokumentteja, merkittävimmäksi sovellusalueeksi vakiintui www.

Takaisin ylös

1.4 Terminologiaa: SGML, HTML, XML, XHTML, HTML5!?

Rakenteisten dokumenttien periaate on, että dokumentissa kuvataan esitettävän dokumentin rakenne, mutta ei ulkomuotoa. Perusperiaate on sama kuin tyylejä oikeaoppisesti soveltavassa tekstinkäsittelyssä. Dokumenttiin kirjoitetaan vain sisältö, ja tieto siitä mikä on kunkin dokumentin osan rooli koko dokumentin rakenteessa. Tarvittava muotoilu voidaan toteuttaa kussakin tilanteessa tarkoituksenmukaisella tavalla.

1.4.1 SGML ja HTML

SGML on vanha (ensimmäinen määrittely 1980) yleiskäyttöinen merkkauskieli, jonka ilmaisuja ei ole kiinnitetty. Se ei varsinaisesti ole kieli, vaan tapa luoda kuhunkin tarkoitukseen soveltuva kieli valitsemalla siinä käytetyt ilmaisut ja määrittelemällä niiden merkitykset tarkoituksenmukaisella tavalla. Siinä käytetyt ilmaisut on määritelty formaalisti ja täsmällisesti dokumenttityypin määrittelydokumentissa (document type definition, DTD). Myös määrittelydokumentti itse on kirjoitettu SGML-kielen rakenteita käyttäen.

HTML on yksi SGML-kielen sovellus. HTML-kielessä ilmaisujen merkitys on kuvattiin erikseen luonnollisella kielellä. Viimeisin HTML-kielestä julkaistu versio on HTML5.

Alla näet esimerkin yksinkertaisesta HTML-dokumentista. Se koostuu hierarkisesti järjestetyistä elementeistä, jotka määrittävät dokumentin rakenteen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <title>Ensimmäinen kokeilu</title>
  </head>

  <body>
    <h1>Www-sivun luominen</h1>
    <p>	
      Harjoitellaan tällä sivulla ensin, mitkä ovat HTML-dokumenttiin  
      vaadittavat osat minimissään.
    </p>
    <p> 
      Html-dokumentti sisältää aina head- ja body-elementit, edellisessä 
      kuvataan dokumenttiin liittyviä yleisempiä asioita ja jälkimmäiseen
      kirjoitetaan sivun varsinainen sisältö. Tämän dokumentin 
      head-elementtissä on määritelty dokumentin tallennuksessa  
      käytettävä merkistökoodaus (meta charset ...) ja dokumentin nimi 
      (title). Body-elementissä on annettu yksi ensimmäisen tason 
      otsikko (h1) ja kaksi kappaletta (p).
    </p>
  </body>

</html>

Selaimessa (www-sivuna) dokumentti näyttää tältä.

Selaimen tehtävänä on esittää rakenteinen dokumentti käyttäjälle ymmärrettävässä ja havainnollisessa muodossa. HTML5-määrittely määrittelee paitsi HTML5-kielen, myös entistä tarkemmin sen, miten selainten tulee esittää erilaiset kielen tuntemat elementit käyttäjälle.

Palvelimen ja selaimen välillä käytetään yleisimmin HTML-kielisiä rakenteisia dokumentteja. Varsinkin 2000-luvun ensimmäisen vuosikymmenen aikana kehitettiin paljon erilaisia XML-pohjaisia sovelluksia. Miten XML sitten eroaa HTML:stä?

1.4.2 XML/XHTML

HTML:ää ei alunperin suunniteltu niin monimuotoiseen käyttöön mihin sitä www-sivujen kuvauskielenä alettiin soveltaa. Voimakkaasta ja aktiivisesta kehittämisestä huolimatta uusien versioiden määrittelyt eivät pysyneet takaamaan dokumenttien yksiselitteistä jäsentämistä ja tulkintaa. Www-sivustojen perustavanlaatuisena ongelmana oli, että eri selainvalmistajille alkoi vähitellen kehittyä omat tulkintansa HTML-kielestä. Www-sivustojen kehittäjät joutuivat joko

  1. käyttämään vain niitä HTML-elementtejä, jotka testasivat toimiviksi kaikissa selaimissa,
  2. määrittämään, että sivusto toimii vain tiety(i)llä selaimilla tai
  3. kirjoittamaan sivustostaan useampia versioita eri selaimille.

Muun muassa näistä syistä W3C:ssä nähtiin tarpeelliseksi kehittää HTML:lle paremmin verkkosovelluksiin sopiva korvaaja. Näin syntyi XML (Extensible Markup Lanaguage), meta-kieli, jonka avulla voidaan määritellä merkkauskieliä. HTML ei kuitenkaan ollut uuden XML-kielen mukainen. Sitä ei voitu pitää XML:n sovelluksena, koska se ei täyttänyt yksinkertaistettuja rakenteellisia vaatimuksia. Siksi tarvittiin uusi versio HTML:stä. Se sai nimekseen XHTML. XHTML:n kehitys kuitenkin lopetettiin ja XHTML2.0 jää (ainakin näillä näkymin) kielen viimeiseksi määrittelyksi.

1.4.3 XHTML vs HTML

XHTML 1.0 on lähestulkoon identtinen HTML 4.1 -version kanssa. XHTML on itse asiassa vain tiukemmin ja puhtaammin kirjoitettua HTML:ää. XHTML dokumentit ovat valideja HTML-dokumentteja, mutta toiseen suuntaan näin ei välttämättä näin ole.

Tärkeimmät XHTML:n ja HTML:n väliset erot:

  1. Elementtien päättäminen (properly closed elements)
    XHTML elmentit tulee aina päättää, ts. alkutunnistetta <tag> tulee aina vastata lopputunniste <tag> esim.
      XHTML - VÄÄRIN
    <ul>
      <li>Mehu</li>
      <li>Kuumat juomat
        <ul>
          <li>Kahvi</li>
          <li>Tee</li>
        </ul>
      <li>Maito</li>
    </ul>
    
    
     
      XHTML - OIKEIN
    <ul>
      <li>Mehu</li>
      <li>Kuumat juomat
        <ul>
          <li>Kahvi</li>
          <li>Tee</li>
        </ul>
      </li>
      <li>Maito</li>
    </ul>
    
    HTML-jäsentäjät tekevät näissä tilanteissa oletuksia, esim. tilanteessa yllä, aloitettaessa uusi listan alkio <li> Maito.. jäsentäjä todennäköisesti olettaa edellisen päättämättä jääneen listan alkion päättyneen, joten tulos näyttää ihan oikealta.
    Huom! Myös "tyhjät elementit" tulee päättää, esim. <br />
  2. Elementtihierarkian eheys (properly nested elements)
    XHTML elmentit tulee olla hierarkisesti sisennettyinä, ts. viimeksi avattu elementti tulee sulkea ennenkuin sitä edeltävä elementti suljetaan, esim.
     XHTML - VÄÄRIN
    <p>
      Pentti Haanpään klassikossa 
      <cite>Noitaympyrä kuvataan  
      nälkäisen miehen hysteeristä  
      hiihtoa kuutamoyössä   
      hirmupakkasessa läpi Kairanmaan 
      korpien.
    <p><cite>
     XHTML - OIKEIN
    <p>
      Pentti Haanpään klassikossa 
      <cite>Noitaympyrä</cite>
      kuvataan nälkäisen miehen 
      hysteeristä hiihtoa kuutamoyössä 
      hirmupakkasessa läpi Kairanmaan 
      korpien.
     </p>
    Yllä olevasta tilanteessa HTML-jäsentäjät todennäköisesti selviävät menemättä virheeseen, pidentäen <cite> elementin vaikutuksen kappaleen loppuun asti.
  3. HTML alku- ja lopputunnisteet ja attribuutit pienin kirjaimin (lowercase tags and attributes)
    Elementtien alku- ja lopputunnisteet (tags) kuten myös attribuutit tulee kirjoittaa pienin kirjaimin, ts. XHTML:ssä <HEAD> on väärin, ja <head> oikein.
  4. Attribuutien tarkempi esitys (Quoted attribute values)
    HTML sallii boolean tyyppisille attribuuteille "arvottomat attribuutit", kuten esimerkiksi
    checked
    XHTML:ssä kaikilla atribuuteilla on oltava arvo ja sen tulee olla lainausmerkeissä, ts. XHTMLssä edellinen olisi väärin, sen sijaan tulisi merkitä:
    checked="checked"
    Jos arvoon sisältyy lainausmerkki, arvo suljetaan heittomerkkeihin, esim.
    name='Jussi "Juice" Leskinen'.

1.4.4 HTML5

Kuva selaimen ja palvelimen yhteistyöstä Uusi versio HTML-merkintäkielestä. Kielen uusi versio korostaa sisällön semanttista merkkausta. Selainohjelmia käyttävien laitteiden kirjo on laajentunut viime vuosina nopeasti, Pöytä- ja sylitietokoneiden lisäksi selaimia käytetään tableteissa, puhelimissa ja käyttö tulee todennäköisesti laajenemaan muihinkin laiteryhmiiin, kuten esimerkiksi ajoneuvopäätteisiin. Lisäksi näkövammaiset selailevat wwww-sivuja ruudunlukuohjelmilla ja voidaan ajatella että selaimia voitaisiin suunnitella muillekin erityisryhmille. Sisällön semanttinen merkkaus antaa selaimille paremmat mahdollisuudet kuvantaa HTML-kielellä kirjoitettua dokumenttia erilaisilla alustoilla, kussakin tilanteessa sopivalla tavalla.

Sisällön semanttisen korostuksen lisäksi HTML5-kieli sisältää aiempaan nähden uusia rajapintamäärityksiä, joiden avulla on mahdollista toteuttaa aiempaa selvästi monipuolisempia ja toiminnallisempia www-sivuja ja sovelluksia.

Takaisin ylös

1.5 Www-merkkauskielten historia

Seuraavassa käydään vielä läpi pääpiirteet www-sivujen tekemiseen käytettyjen tekniikoiden historiasta kronologisessa järjestyksessä. [Lähde: W3C: HTML5, background]

HTML 1.0 - HTML 2.0 (1990-1995)
Tim Berners-Lee julkaisi ensimmäisen suunnitelman World Wide Webin toteuttamiseksi. Ensimmäisten viiden vuoden aikana HTML:n kehityksestä olivat pääasiallisessa vastuussa CERN ja IETF. Tuona aikana HTML-merkkauskielestä julkaistiin useita korjailtuja ja tarkistettuja versioita.
HTML3.0 - HTML4 (1995-1998)
Vuoden 1994 lopulla vastuu HTML-kielen ylläpitämisestä ja kehittämisestä siirtyi Tim Berners-Leen perustamalle W3C:lle (World Wide Web Consortium). W3C kehittää ja julkaisee www-tekniikoihin liittyviä standardeja "recommendations".
XHTML, DOM Level 1-3 (1998-2004)
XHTML-version julkaisemisen jälkeen W3C päätti lopettaa HTML:n kehityksen, ja aloittaa sen sijasta XML-pohjaisen XHTML kielen kehittämisen. Aluksi HTML4 toteutettiin XHTML:llä vuonna 2000 (XHTML1.0), jonka jälkeen W3C ryhtyi kehittämään uutta HTML:n ja XHTML1.0 kanssa yhteensopimatonta XHTML2.0-kieltä.

Samaan aikaan osa selaintoimittajista kehitti ja julkaisi HTML:ään pohjautuvia tekniikoita DOM Level 1, DOM Level 2 Core ja DOM Level 2 HTML, mutta tämä kehitystyö hiipui vähitellen. 2004 julkaistiin vielä joitain osia DOM Level 3:sta.
XForms 1.0, WHATWG (2003-)
W3C julkaisi 2003 XML-pohjaisen lomakkeiden kuvailukielen, XFormsin. Samaan aikaan kiinnostus HTML:n jatkokehittämiseen heräsi jälleen. Oivallettiin että kehitysprojekteissa tuotettiin lähinnä uusia www-tekniikoita (kuten esim. RSS, Atom), ne eivät korvanneet yhä laajassa käytössä ollutta HTML:ää.

Mozilla ja Opera tekivät 2004 W3C työkokouksessa yhteistyöehdotuksen HTML:n jatkokehittämiseksi, mutta ehdotus tuli torjutuksi, koska W3C strategia oli kehittää uutta XHTML versiota.

Pian aloitteen torjutuksi tulemisen jälkeen Mozilla, Opera ja Apple perustivat WHATWG-yhteisön (Web Hypertext Application Technology Working Group) HTML:n jatkokehittämiseksi. WHATWG:si nimetyn merkkauskielen perusperiaatteiksi sovittiin, että uuden merkkauskielen (1) tulee olla taaksepäin yhteensopiva HTML:n, XHTML:n ja DOM 2 Level -tekniikoiden kanssa, (2) toteutusten ja spesifikaatioiden tulee vastata toisiaan jopa siinä tapauksessa, että se tarkoittaisi spesisikaation muuttamista ja että (3) spesifikaatioiden tulee olla niin yksityskohtaiset että sillä voidaan taata selainten yhteentoimivuus.
HTML5 (2006-)
Vuonna 2006 W3C ilmaisi halukkuutensa liittyä WHATWG-yhteisöön kehittämään HTML5-kieltä ja 2007 W3C perusti siihen tarkoitukseen työryhmän. XHTML 2.0 kehitystyö lopetettiin. HTML kehitys ei vielä ole tuottanut vahvistettua W3C spesifikaatiota, mutta W3C julkaisema "HTML5 Candidate Recommendation" on WHATWG-yhteisön laajan pohjatyön ansiosta vakaa ja selainten uudet versiot totettavat varsin hyvin kielen uudetkin piirteet. Se, ja lisäksi takuu taaksepäin yhteensopivuudesta tekee HTML5 käyttämisestä houkuttelevaa ja turvallista.
DOM4 (2012-)
Käynnissä oleva DOM4:n kehitystyön tarkoituksena on selkeyttää ja vahvistaa alustariippumatonta tapahtumien ja dokumenttipuun solmujen määrittelyä.

Takaisin ylös

1.6 Hyvät HTML5-käytänteet

Kuten ohjelmointikielen kirjoittamisessa yleensäkin, myös HTML-kielisten dokumenttien kirjoittamiseen liittyy paljon hyviä käytänteitä, jotka tekevät ohjelmakoodista luettavamman, ylläpidettävämmän ja niiden noudattaminen ehkäisee virheitä usein jo ohjelmaa alunperin kirjoitettaessa. Vaikka HTML5:ssä taaksepäin yhteensopivuuden nimissä XHTML-syntaksi ei olekaan välttämätöntä, ovat edellä esitellyt XHTML-käytänteet suositeltavia myös HTML-kielessä. Suositeltavia käytänteitä ovat myös koodin sisennys ja kommenttien käyttö.

Suositeltavaa on siis

HTML-tulkit selaimissa ovat kovin anteeksiantavaisia. Vaikka koodi olisi virheellistä tulkit toipuvat niistä parhaansa mukaan, ja tuottavat sivun virheistä huolimatta. Tästä syystä sivulle saattaakin helposti jäädä virheitä, jotka tulevatkin esille vasta jossain myöhemmässä selainversiossa tai toisissa selaimissa. Riskin pienentämiseksi dokumentit pitääkin aina muistaa validoidaa, vaikka sivu näyttäisikin siltä miltä haluat sen näyttävän.

Takaisin ylös

1.7 DOM

Kohdan 1.4.1 HTMl-dokumentti DOM-puuna Selaimen tehtävänä on esittää rakenteinen dokumentti käyttäjälle ymmärrettävässä ja havainnollisessa muodossa. HTML5-määrittely määrittelee paitsi HTML5-kielen, myös entistä tarkemmin sen, miten selainten tulee esittää erilaiset kielen tuntemat elementit käyttäjälle.

HTML5-määrittelydokumentin mukaisesti ohjelmoidut selainten HTML-tulkit tunnistavat dokumentissa määritellyt elementit, ja jäsentävät dokumentin DOM-puuksi (DOM = Document Object Model). DOM-puu on HTML-dokumenttiin kirjoitetuista elementeistä koostuva solmujen (Node) hierarkia, jonka juurisolmu on aina HTML5-dokumentim ensimmäinen elementti, DOCTYPE html. Oheinen kuva esittää HTML-dokumentin (kohdassa 1.5.1) jäsennyksen DOM-puuksi. Puun hierarkiassa ylemmän tason elementti, josta on yhteys seuraavan tason elementtiin on alemman tason äiti. Oheisessa esimerkissä <html> elementillä on kaksi lasta, <head> ja <body>. Elementin <h1> äiti on <body> ja sillä on kaksi <p>-elementtisisarusta.

Kuvan jäsennys on yksinkertaistus esimerkkinä annetusta koodista. Todellisuudessa puussa on enemmän tekstielementtejä, koska esim. myös näkymättömät merkit dokumentissa (välilyönnit ja rivinpalautukset) luovat solmun DOM-puuhun.

Dokumentin ymmärtäminen HTML-elementeistä koostuvana puuna on oleellista varsinkin siinä vaiheessa, kun lähdetään tekemään dynaamisia www-sivuja. Puurakenteen ymmärtäminen auttaa kuitenkin ymmärtämään myös staattisten HTML-sivujen rakentamista. Erityisesti määritettäessä www-sivun ulkoasua CSS-sääntöjä käyttäen, dokumenin ajatteleminen puurakenteena auttaa ymmärtämään ominaisuuksien perintää. CSS-sääntöjen käyttäen? Mikä ne sitten ovat?

Takaisin ylös

1.8 CSS:n perusperiaate

CSS (Cascading Style Sheet) on kieli, jonka avulla määritellään www-sivun ulkoasu. Selaimilla on määriteltynä oletustyylit eri elementtien näyttämiseen www-sivulla, mutta näitä oletustyylejä voi muuttaa omilla CSS säännöillä. HTML sivuun liitetyillä omilla CSS-säännöilläsi voit esimerkiksi määritellä sivulla käytettävät kirjasimet, värit ja elementtien asettelun.

Kun esimerkiksi kohdan 1.4.1 esimerkissä määriteltiin, että sivulla on 1-tason otsikko: <h1>Www-sivun luominen</h1> otsikko näytettiin (kirjasinlaji, koko, väri, ym.) selaimen 1-tason otsikolle antamalla oletustyylillä. Näitä otsikon <h1> ja kappaleiden <p> oletustyylejä voisimme muokata seuraavilla CSS-säännöillä.

h1 {
   font-family: helvetica, arial rounded, sans-serif;
   color: red;
}
p {
   background-color: lightgreen;
   font-size: large;
}

Yllä olevat säännöt muuttavat otsikossa käytetyn tekstin punaiseksi, päätteettömäksi San Serif -fontiksi, kappaleiden tekstin isommaksi ja kappaleiden taustan vaalean vihreäksi: sivu, kun siihen on sovellettu yo. css-sääntöjä

Yllä esitetyt koodipätkät olivat esimerkkejä tulevasta; sekä HTML-kieleltä että CCS-säännöiltä vaadittava syntaksi tullaan käsittelemään myöhemmin tarkemmin.

Takaisin ylös