Luento 1 - Kurssin käytönnänjärjestelyt ja WWW-sivujen tekemisen perusteet

Olemme siirtyneet luentoäänityksissä MP3-formaatista vapaaseen Ogg Vorbis -formaattiin. .ogg-tiedostoja voi kuunnella suoraan Winampilla tai Windows media playerilla jos asentaa OggDs-paketin (450 kilotavua).

• tietoverkot0101.ogg 2.8M
• tietoverkot0102.ogg 2.8M
• tietoverkot0103.ogg 2.8M
• tietoverkot0104.ogg 2.8M
• tietoverkot0105.ogg 2.8M
• tietoverkot0106.ogg 2.8M

Seuraavassa käydään läpi WWW-sivujen tekemiseen liittyviä perusasioita.

Kurssin yleiset järjestelyt (noin. 30 min)

• Kurssin aikataulu ja demojen pitäjät?
• Luentojen sisällöt ja aloitusajat?
• Demojen sisältö ja aikataulu?
• Agoran salien paikat ja nimet?
• Agoranetin käyttäjätunnusten ja sähköpostitunnusten hankkiminen?
• Kurssin suorittaminen?
• Luentomoniste?

WWW-sivujen tekemisessä huomioitavia asioita ja käsitteitä

WWW-sivuja tehtäessä on tärkeää erottaa sivujen sisältö ja ulkoasu toisistaan muun muassa seuraavien syiden vuoksi:

• Useiden sivujen ylläpitäminen ja ulkoasun muuttaminen saadaan helpoksi keskitetyillä ulkoasumäärittelyillä.
• Ulkoasu voidaan helpommin määritellä erilaiseksi käyttäjän vaatimuksia vastaavaksi (esim. Näkövammaiset).
• Erilaiset laitteet voivat käyttää sivujen tietoja paremmin hyväkseen (esim. Mobiililaitteet).
• WWW-sivujen rakenne selkeytyy, jolloin sivuja voidaan käsitellä koneellisesti (esim. Hakukoneet).

Sisällön ja ulkoasun erottaminen toteutetaan teknisesti seuraavalla tavalla:

• WWW-sivujen rakenne määritellään HTML-elementeillä.
• WWW-sivujen ulkoasu määritellään tyylilomakkeen eli CSS:n avulla.

Asian laajempi näkökulma - tulevaisuus?

WWW-sivujen rakenteen parantaminen on ensimmäinen askel kohti merkityksellistä webbiä (engl. Semantic Web), josta tieto löytyy nykyistä helpommin. Semantic Web mahdollistaa tulevaisuudessa asiayhteyteen liittyvän oikean ja luotettavan tiedon löytymisen helposti. Nykyisin hakukoneiden ongelmana on että ne löytävät sekalaisen kokoelman sekä asiaan liittyviä että liittymättömiä dokumentteja, joiden oikeellisuudesta ei voi olla varma.

WWW:hen liittyviä standardointi ja kehityshankkeita "ohjaa" W3C (World Wide Web Consortium)-organisaatio. W3C:n päämääränä on lead the web to its full potential (suom. ohjata Webin kehittymistä täyteen mittaansa). W3C tuottaa spesifikaatioita, ohjeita, ohjelmia ja työkaluja. W3C:n jäseniä ovat kaikki suuret selainvalmistajat ja palveluntarjoajat. Suomestakin on W3C:n jäseninä useita yrityksiä. W3C avasi Suomeen toimiston lokakuussa 2002, jonka sivut löytyvät osoitteesta: http://www.w3c.tut.fi/.

Kurssilla käytettävät periaatteet XHTML:ssä ja CSS:ssä ovat W3C:n suositusten mukaisia. Suosituksia noudattamalla saadaan WWW-sivuista tehtyä sellaisia, että ne esimerkiksi toimivat useamman selainvalmistajan selaimilla.

HTML vs. XHTML

HTML (HyperText Markup Language) on hypertekstidokumenttien rakenteen määrittelyyn tehty kieli, jonka elementeillä voidaan WWW-dokumentiin määritellä otsikot, tekstikappaleet, listat, taulukot jne. XHTML (Extensible HyperText Markup Language) on XML:n sääntöjen mukaan määritelty uusin versio HTML:stä.

Tärkeimmät XHTML:n ja HTML:n eroavaisuudet on lueteltu seuraavassa:

• XHTML-elementtien täytyy olla asianmukaisesti sisäkkäin.(<li><strong>Tekstikappale</strong></li>)
• XHTML-dokumentin täytyy rakenteellisesti oikein ja hyvin muotoiltu. (<p><strong>Tekstikappale</strong></p>
• XHTML-elementtien nimet pitää kirjoittaa pienellä. (<p>Tekstikappale</p>)
• Kaikki XHTML-elementit täytyy sulkea. (<p>Tekstikappale</p>)

Käsitteitä

SGML (Standard Generalized Markup Language)

SGML on yleinen dokumenttien rakenteen kuvaamiseen tarkoitettu kieli. SGML on metakieli jolla kuvataan dokumenttityyppejä.

XML (Extensible Markup Language)

XML on yksinkertaistettu versio SGML:stä. XML:llä määriteltyjä kieliä ovat esim.

• XHTML
• SVG (Scalable Vector Graphics)
• SMIL (Synchronized Multimedia Integration Language)
• XSL (Extensible Stylesheet Language)

Esimerkki XML-muotoisesta viestistä Peteltä Tommille.

<viesti>
<lahettaja>Pete</lahettaja>
<vastaanottaja>Tommi</vastaanottaja>
<otsikko>Muistutus</otsikko>
<sisalto>Huomenna aamulla uimaan klo 7!</sisalto>
</viesti>

HTML (HyperText Markup Language)

HTML on hypertekstidokumenttien rakenteen määrittelyyn tehty kieli.

XHTML (Extensible HyperText Markup Language)

XHTML on XML:n mukaan määritelty uusin versio HTML:stä.

CSS (Cascading Style Sheets)

CSS on XML-dokumenttien ulkoasun muotoilemiseen käytetty kieli.

XSL (Extensible Stylesheet Language)

XSL-kielellä määritellään kuinka esitetään ja muunnetaan XML-tiedostoja.

WWW-sivujen tekeminen

• XHTML-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.
• XHTML-elementtien täytyy olla asianmukaisesti sisäkkäin (engl. properly nested).

  <li><strong>Tekstikappale</strong></li>

• XHTML vaatii, että tuotetun dokumentin pitää olla oikein ja hyvin muotoiltu (engl. well-formed).
  • Elementtien järjestyksen täytyy olla järkevä (lohko- ja tekstitaso)

    <p><strong>Tekstikappale</strong></p>

  • Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla:

    <a href="http://www.jyu.fi/">Jyväskylän yliopisto</a>

• XHTML-vaatii, että elementit kaikki kirjoitetaan pienellä.

  OIKEIN:			<p>Tekstikappale</p>
  VÄÄRIN:			<P>Tekstikappale</P>

• Kaikki elementit täytyy sulkea. Esim.

  <strong>Tämä teksti on tärkeää</strong>

  Joissakin elementeissä ei ole lopetuselementtiä, joten aloituselementin loppuun liitetään kauttaviiva.

  <img src="kuva.jpg" alt="Kaaviossa on .." />

• Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä, mitä attribuutteja kuuluu millekin elementille jne. Tällä kurssilla käytetään kahta erilaista XHTML-dokumenttityyppiä:

  XHTML Basic

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
  

  XHTML 1.1

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  

  Dokumenttien validointiin on olemassa ns. HTML-validaattoreita.

• Hyvän XHTML-dokumentin runko on seuraavanlainen:

  <?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
    <head>
      <title>Jyväskylän yliopisto</title>
    </head>
    <body>
      <h1>Jyväskylän yliopisto</h1>
      <p>Jyväskylän yliopisto on ...</p>
    </body>
  </html>
  

  • xml-elementti kertoo käytetyn XML-standardin version. encoding-ominaisuus (engl. attribute) määrittelee käytetyn merkistön. iso-8859-1 tai iso-8859-15 (euro merkki mukana) on pohjoismaissa käytettävä merkistö.
  • DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
  • head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
  • title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä vaikka se otettaisiin erilleen koko dokumentista.
  • body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
  • h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon.
  • p-elementti merkitsee tekstikappaleen.

Dokumentin perusrakenne

Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:

• Dokumentissa kuuluu yleensä olla yksi ensimmäisen tason otsikko.
• Otsikkotasojen pitää edetä loogisesti (ensimmäinen taso, jonka alla toinen taso).
• Jokaisen otsikon jälkeen tulisi olla tekstikappale (ei heti toista otsikkoa).

XHTML-dokumentin tuottaminen on siis tekstin kirjoittamista sekä kirjoitetun tekstin rakenteen määrittämistä. XHTML-dokumentin kirjoittamiseen voi käyttää haluamaansa HTML-editoria. Editorit jaetaan karkeasti kahteen tyyppiin:

• Tekstieditoria, jossa XHTML-dokumentin rakenne voidaan määritellä käsin. Tekstiedorina voi käyttää esimerkiksi notepadia, mutta työskentelyn mukavuutta ja nopeutta saa helposti lisättyä käyttämällä erityisesti HTML:n kirjoittamiseen kehitettyä tekstieditoria. Esimerkiksi HTML-kit on varsin tehokas tekstieditori XHTML-sivujen tuottamiseen.
• Graafisia WYSIWYG (What You See Is What You Get)-editoreita on syytä välttää, koska niiden mukana XHTML-dokumenttiin ilmaantuu liikaa ulkoasuun liittyviä määrityksiä. Monet WYSIWYG-editorit eivät mahdollista tarpeeksi hyvää rakenteen määrittelyn mahdollisuutta. Tulevaisuudessa tilanne tulee varmasti korjaantumaan.

XHTML Basicin mukainen dokumentti

Seuraavassa on esitetty lyhyesti XHTML Basic suosituksen mukaiset elementit.

Seuraavassa kaaviossa pyritään selventämään XHTML-elementtien suhdetta toisiinsa XHTML 1.1:ssä. Kaaviosta puuttuu hyvin paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.

Lohkotason elementit

Lohkotason elementtejä voi sijoittaa suoraan body-elementin sisään.

Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.

Otsikkoelementit - (h1 - h6)

<h1>Ensimmäisen tason otsikko</h1>

  <p>Tämä on tekstikappale</p>

<h2>Toisen Tason otsikko</h2>
  <p>Tämä on tekstikappale</p>

Tekstikappale - p

<p>
  Tämä on tekstikappale
</p>
<p> Tämä on tekstikappale </p>

Erilaiset listat

Listat ovat myös lohkotason elementtejä. Listojen sisään voi sijoittaa sekä merkkitason elementtejä että toisia lohkotason elementtejä

Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.

Järjestämätön lista - ul

• Järjestämättömän listan ensimmäinen alkio
• Järjestämättömän listan toinen alkio
• Järjestämättömän listan kolmas alkio
• Järjestämättömän listan neljäs alkio

<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio</li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>

Järjestetty lista - ol

1. Järjestetyn listan ensimmäinen alkio
2. Järjestetyn listan toinen alkio
3. Järjestetyn listan kolmas alkio
4. Järjestetyn listan neljäs alkio

<ol>
  <li>Järjestetyn listan ensimmäinen alkio</li>

  <li>Järjestetyn listan toinen alkio</li>
  <li>Järjestetyn listan kolmas alkio</li>
  <li>Järjestetyn listan neljäs alkio</li>
</ol>

Sisäkkäiset listat

1. Järjestetyn listan ensimmäinen alkio
   • Järjestämättömän listan ensimmäinen alkio
   • Järjestämättömän listan toinen alkio
     1. Järjestetyn listan ensimmäinen alkio
     2. Järjestetyn listan toinen alkio
   • Järjestämättömän listan kolmas alkio
2. Järjestetyn listan toinen alkio
3. Järjestetyn listan kolmas alkio
   • Järjestämättömän listan ensimmäinen alkio
   • Järjestämättömän listan toinen alkio
   • Järjestämättömän listan kolmas alkio
     • Järjestämättömän listan ensimmäinen alkio
     • Järjestämättömän listan toinen alkio
   • Järjestämättömän listan neljäs alkio

<ol>
  <li>Järjestetyn listan ensimmäinen alkio
  <ul>
    <li>Järjestämättömän listan ensimmäinen alkio</li>
    <li>Järjestämättömän listan toinen alkio
    <ol>
      <li>Järjestetyn listan ensimmäinen alkio</li>
      <li>Järjestetyn listan toinen alkio</li>
    </ol>
    </li>
    <li>Järjestämättömän listan kolmas alkio</li>
  </ul>
  </li>
  <li>Järjestetyn listan toinen alkio</li>
  <li>Järjestetyn listan kolmas alkio
  <ul>
    <li>Järjestämättömän listan ensimmäinen alkio</li>
    <li>Järjestämättömän listan toinen alkio</li>
    <li>Järjestämättömän listan kolmas alkio
    <ul>
      <li>Järjestämättömän listan ensimmäinen alkio</li>
      <li>Järjestämättömän listan toinen alkio</li>
    </ul>
    </li>
    <li>Järjestämättömän listan neljäs alkio</li>
  </ul>
  </li>
</ol>

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

• a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan.
• • Absoluuttisella osoitteella oleva linkki kurssin kotisivulle

    <p>Absoluuttisella osoitteella oleva linkki kurssin
    <a title="Tietoverkot työvälineenä kurssin kotisivu"
    href="http://appro.mit.jyu.fi/2001/syksy/tietoverkot/">kotisivulle</a></p>

  • Suhteellisella osoitteella oleva linkki kurssin ensimmäisiin demoihin

    <p>Suhteellisella osoitteella oleva linkki kurssin
    <a href="../../demot/demo1/">ensimmäisiin demoihin</a></p>

  • Linkki tämän dokumentin otsikkoon Dokumentin perusrakenne

    <p>Linkki tämän dokumentin otsikkoon
    <a href="#perusrakenne">Dokumentin perusrakenne</a></p>

    Otsikkoon, jonne dokumentin sisäinen linkki osoittaa, täytyy olla määriteltynä id-attribuutilla yksikäsitteinen arvo.

    <h2 id="perusrakenne">Dokumentin perusrakenne</h2>

• strong - erittäin tärkeät asiat
• em - tärkeät asiat

  Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat tärkeitä, toiset sanat ovat erittäin tärkeitä.

  <p>
  Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat <em>tärkeitä</em>, toiset
  sanat ovat <strong>erittäin tärkeitä</strong>.
  </p>
  

WWW-dokumentin tuottamisen vaiheet

Seuraavaan on listattu WWW-dokumentin tuottamiseen liittyvät vaiheet. Osaa vaiheista tarkastellaan tarkemmin vasta myöhemmillä luennoilla.

1. Kirjoita dokumentin sisältö
2. Määrittele dokumentin rakenne (voidaan tehdä kirjoittamisen yhteydessä)
3. Validoi dokumentti
4. Testaa dokumentti jollakin selaimella
5. Määrittele dokumentin ulkoasu (CSS)
6. Validoi CSS
7. Testaa ulkoasu selaimilla
8. Siirrä dokumentti WWW-palvelimelle

Sivujen näkyminen selaimessa

1. Selain pyytää palvelimelta sivua.
2. Palvelin palauttaa pyydetyn sivun.
3. Selain näyttää sivun.

Yhteys on auki ainoastaan sivun siirtämisen ajan!