Luento 1

Kurssin yleiset järjestelyt

WWW-sivuihin liittyviä käsitteitä

Organisaatiot

W3C ( World Wide Web Consortium ): W3C:n päämääränä on lead the web to its full potential. W3C tuottaa spesifikaatioita, ohjeita, ohjelmia ja työkaluja. W3C:n jäseniä ovat kaikki suuret selainvalmistajat ja palveluntarjoajat.

Kielet

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)

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-selaimet

Selain esittää WWW-sivun käyttäjälle sopivassa muodossa. Sivun ulkonäkö riippuu käytetystä selaimesta ja ympäristöstä.

Mozilla
- Täysin vapaa selain, jonka lähdekoodi toimii perustana monelle muulle selaimelle mm. Netscapelle.
- Paras tuki standardeille ja CSS:lle.
- Toimii useissa eri käyttöjärjestelmissä.
- Vielä hieman suuri ja raskas.
Netscape
- Pohjautuu suoraan Mozillaan.
- Tulee luultavasti jäämään Mozillan jalkoihin.
Opera
- Pienin ja nopein selain. Sopii erittäin hyvin vanhoihin ja hitaampiin koneisiin.
- Erinomainen standardi- ja CSS-tuki.
- Kaupallinen. Ostettava tai kärsittävä mainoksista.
Internet Explorer
- Suosituin selain.
- Vaillinainen tuki standardeille ja CSS:lle. Juuri julkaistu IE6 korjaa hieman puutteita ja tuo mukanaan myös standardin mukaisen toimintatilan.
- Suurimmat tietoturvaongelmat.
Lynx
- Suosituin tekstipäätteillä käytetty selain.
- Paljon käytetty erityisryhmien keskuudessa esim. sokeat.
Ääniselaimet
Mobiililaitteet (kämmenmikrot ja kännykät)
Televisio

Osoitteet

URL (Uniform Resource Locator)

Merkkijono, joka kertoo dokumentin sijainnin webissä.
<URL: protokolla://palvelin/hakemisto/sivu.html>

Protokollat

Protokolla eli yhteyskäytäntö eli tapa tehdä asioita.

HTTP (HyperText Transport Protocol): Hypertekstidokumenttien siirtämiseen tarkoitettu protokolla
FTP (File Transfer Protocol): Tiedostojen siirtämiseen tarkoitettu protokolla
Mailto: Sähköposti
News: USENET nyysit

Esimerkkejä

URN (Uniform Resource Name)

Pysyvä dokumentin tunniste/osoite.

URI (Uniform Resource Identifier)

Yleisnimitys kaikille URL- ja URN-osoitteille.

WWW-sivujen tekeminen

XML-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.

XML vaatii, että tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed).

Esimerkki XML-dokumentista


<?xml version="1.0"?>
<kerho>
<kerhonnimi>Kelmien kerho ry</kerhonnimi>
<maxjasenia>13</maxjasenia>
<jasen>
  <id>1</id>
  <nimi>Ankka Aku</nimi>
  <hetu>010245-123U</hetu>
  <katuosoite>Ankkakuja 6</katuosoite>
  <postinumero>12345</postinumero>
  <postiosoite>ANKKALINNA</postiosoite>
  <kotipuhelin>12-12324</kotipuhelin>
  <harrastukset>
     <harrastus>kalastus</harrastus>
     <aloit>1955</aloit>
     <viikossa>20</viikossa>
  </harrastukset>
  <harrastukset>
     <harrastus>laiskottelu</harrastus>             
     <aloit>1950</aloit>
     <viikossa>20</viikossa>
  </harrastukset>
  <harrastukset>
     <harrastus>tyon pakoilu</harrastus>             
     <aloit>1952</aloit>
     <viikossa>40</viikossa>
  </harrastukset>
</jasen>
<jasen>
  <id>2</id>
  <nimi>Susi Sepe</nimi>
  <hetu>020347-123T</hetu>
  <postinumero>12555</postinumero>
  <postiosoite>Takametsa</postiosoite>
  <harrastukset>
     <harrastus>possujen jahtaaminen</harrastus>             
     <aloit>1954</aloit>
     <viikossa>20</viikossa>
  </harrastukset>
  <harrastukset>
     <harrastus>kelmien kerho</harrastus>             
     <aloit>1962</aloit>
     <viikossa>2</viikossa>
  </harrastukset>
</jasen>
</kerho>

Jokaiseen elementtiin liittyy aloitus- ja lopetusosat joiden väliin tulee varsinainen merkitty asia. Esim.
```
<strong>Tämä teksti on tärkeää</strong>
```
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>
```

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.
- 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 otettaisi 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 dokumentin pääotsikon.
- p-elementti merkitsee tekstikappaleen.
Seuraavassa kaaviossa pyritään selventämään HTML-elementtien suhdetta toisiinsa. Kaaviosta puuttuu hyvin paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.
XHTML-dokumentin kirjoittamiseen voi käyttää haluamaansa tekstieditoria (esim. notepad) tai jotakin erityisesti XML:n kirjoittamiseen kehitettyä editoria (esim. HTML-kit).
Graafisia WYSIWYG (What You See Is What You Get) -editoreita on syytä välttää, koska HTML/XHTML ei millään tavalla kiinnitä dokumentin ulkoasua vaan ainoastaan rakenteen.

XHTML-dokumentin tuottamisen vaiheet
1. Kirjoita dokumentin sisältö
2. Määrittele dokumentin rakenne
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

Kotisivu Jyväskylän yliopistossa

Kirjaudu sisään Unix/Linux-koneelle (silmu/itu/verso/kanto/tukki).
makewww-komento luo www-"hakemiston".
Luo hakemistoon index.html-niminen tiedosto.
Kaikki sivut tulevat www-hakemiston alle.
Voit tehdä myös alihakemistoja.
Kotisivusi osoite on:
```
http://www.cc.jyu.fi/~tunnus/
```
esim. http://www.cc.jyu.fi/~tjlahton/. Voit käyttää myös muotoja:
- http://www.st.jyu.fi/~tunnus/
- http://www.cc.jyu.fi/%7Etunnus/
- http://www.st.jyu.fi/%7Etunnus/
Voit kopioida www-dokumenttisi WWW-palvelimelle, joko SCP-komennolla tai Secure File Transter Clientilla.

Sivujen näkyminen selaimessa

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

Yhteys on auki ainoastaan sivun siirtämisen ajan!
selaimen ja palvelimen suhde

http://appro.mit.jyu.fi/2001/syksy/tietoverkot/luennot/luento1/index.html