XHTML-elementit ja kurssin järjestelyt - Luento 1

• Luentotaltiointi
• Esittely
  • Kurssin aiheita
  • Esitiedot
  • Yleisesittely
  • Kurssin suorittaminen?
  • Luentojen sisällöt ja aloitusajat?
  • Demojen sisältö ja aikataulu?
  • Kommunikointi
  • Etäopiskelu
• Rakenneajatus
  • Miksi XHTML?
• XHTML-dokumentin rakenne
  • XHTML 1.0
  • Erilaiset dokumenttityypit
  • XHTML-elementit
  • Ominaisuudet eli attribuutit
  • Dokumentin on oltava hyvin muodostettu
  • Dokumentin pitää olla validi
• Sivuston julkaiseminen
• Peruselementtien kertaus
• Hakemistorakenne
  • Hyperlinkit - a
• Linkkejä

Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat. Kerrataan XHTML-elementtejä ja käsitellään hakemistorakenteen merkitys.

Esittely

Käydään läpi kurssin sisällöt ja käytännönjärjestelyt.

Kurssin aiheita

• Rakenteisten dokumenttien periaate (XHTML)
• Sivuston ulkoasun muokkaaminen kootusti (CSS)
• Sivuston käytettävyys ja esteettömyys
• Lomakkeet
• Kuva ja ääni WWW:ssä
• Muut XML-formaatit WWW:ssä

Esitiedot

• Tietokone ja tietoverkot työvälineenä tai vastaavat tiedot
• Ei vaadita ohjelmointitaitoa, mutta perusohjelmointitaidoista on hyötyä (esim. Ohjelmointi 1).

Yleisesittely

• http://appro.mit.jyu.fi/www/
• Uusimmat päivitykset: http://appro.mit.jyu.fi/rss.xml
• Kurssin aikataulu
• Luennot ja demot: Antti Ekonoja

Kurssin suorittaminen?

• Ilmoittautuminen Korppiin.
• Suoritetaan harjoitustyöllä.
• Toteutetaan jokin riittävän laaja WWW-sivusto.

Luentojen sisällöt ja aloitusajat?

• Luennot pidetään pääsääntöisesti maanantaisin klo 12-14 ja tiistaisin klo 10-12.
• Jokaisella kerralla mennään asiassa eteenpäin! Eli maanantaina ja tiistaina käydään läpi eri asiaa.
• Varsinainen asia opetetaan luennolla.
• Luentomoniste löytyy verkosta, mutta tuorein tieto on aina suoraan luentosivuilla.
• FAQ:sta voi olla myös hyötyä.
• Videotaltiointi ja luentoäänitys.

Demojen sisältö ja aikataulu?

• Pääsääntöisesti torstaisin.
• Ei pakollisia, mutta erittäin suositeltavia.
• Tietoja ja taitoja vaaditaan harjoitustyössä.
• Videot ja mallivastaukset.

Kommunikointi

• Tule keskusteluun IRC-kanavalle #appro.
• Sähköpostia voi myös lähettää.

Etäopiskelu

• Kurssin työmäärä on keskimäärin 80h! Kannattaa jakaa useammalle päivälle. ;-)
• Harjoitustyö on tehtävä tämän kevään vaatimusten mukaan.

Rakenneajatus

Tekstidokumentissa on erilaisia sisältöä jäsentäviä osia:

• Otsikoita
• Tekstikappaleita
• Listoja
• Taulukoita
• Korostuksia
• ...

Osat muodostavat dokumentin rakenteen. Rakenne ei määritä ulkoasua, mutta ulkoasu on järkevä määritellä suhteessa rakenneosasiin. Näin saavutetaan helposti ylläpidettävä ja yhtenäinen ulkoasu koko sivustolla.

Miksi XHTML?

Miksi WWW-dokumentit kannattaa tehdä XHTML-kielellä mieluummin kuin HTML-kielellä?

• Ulkoasu erotetaan yleensä XHTML-dokumentista:
  • Sivustosta tulee saavutettava.
  • Sivuston koko ulkoasun muokkaaminen on helppoa. Kts. esim. CSS Zen Garden.
• Tarkat merkkaussäännöt:
  • Selaimen on helpompi tulkita sivua.
  • Validi dokumentti näkyy oikein.
  • Ulkoasuongelman korjaaminen helpompaa, kun tiedetään, että ongelma ei ole rakenteessa.
• Perustuu rakenteisten dokumenttien XML-kuvauskieleen:
  • Helpommin ohjelmallisesti käsiteltävissä.
  • Uudelleenhyödynnettävyys.
  • Toimii tulevaisuudessakin.
  • Useat muutkin kuvauskielet perustuvat tähän.
  • Voidaan yhdistää rakenteisia dokumentteja:
    • MathML
    • XForms
    • SVG
• Tulossa oleva uusi standardi HTML 5 tulee korvaamaan vanhentuneen HTML 4:sen ja XHTML 1.0:n. Kunhan standardi tulee suosituksen asemaan (arvio vuonna 2012), niin sitä kannattaa alkaa käyttämään XHTML:n sijasta. Käytön voi aloittaa jo aikaisemminkin, sillä uusimmissa selaimissa (Firefox 4, IE 9, Opera 11) HTML 5 tuki on parantunut huomattavasti. Katso HTML 5 -standardin erot HTML 4 ja XHTML 1.0 -standardeihin.

Miksi en käyttäisi graafisia editoreja, kuten FrontPage ja Dreamweaver?

• Kiinnittävät ulkoasun tiettyihin näyttötiloihin.
• Eivät välttämättä erota ulkoasua rakenteesta, jolloin ulkoasun muokkaaminen on työlästä.
• Saattavat tuottaa tietystä selaimesta tai laajennoksesta riippuvaa koodia.
• Saattavat tuottaa epävalidia koodia.
• Tuottavat vanhaa HTML:ää tai heikosti XHTML:ää.

Graafisten editorien uusimmat versiot osaavat kuitenkin tehdä myös järkevää XHTML-lähdekoodia, mutta tällöin on oltava kuitenkin tarkkana ja ymmärrettävä mitä on tekemässä. Graafisten editorien käyttö on ulkoasuorientoitunutta, jolloin rakenteellinen ajattelu voi jäädä huomiotta.

XHTML-dokumentin rakenne

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

XHTML 1.0

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
  <link href="malli.css" rel="StyleSheet" type="text/css" />
  <title>Sivustoa kuvaava otsikko</title>
</head>
<body>
  <h1>Dokumentin pääotsikko</h1>
  <p>Tähän tekstiä...</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 (€-merkki mukana) on pohjoismaissa käytettävä merkistö.
• DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
• html-elementti on dokumentin juurielementti. Kaikki varsinaiset elementit tulevat tämän elementin sisälle.
  • xmlns-attribuutti kertoo elementtien nimiavaruuden. Määre on aina vakio.
  • xml:lang-attribuutti kertoo käytetyn oletuskielen.
• 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. Otsikko näkyy myös selaimen otsikkorivillä, kun sivu on avattuna selaimessa.
• 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. Tämä on siis poikkeus tekstinkäsittelyyn, jossa ensimmäisen tason otsikkoja voi olla useita.
• p-elementti merkitsee tekstikappaleen.

Erilaiset dokumenttityypit

• HTML 4.0 - Yleisesti käytössä oleva WWW-dokumenttien standardi.
• XHTML 1.0 Transitional. HTML 4.0:n johdannainen, jonka syntaksi on XML-muotoista. Yhteensopivuus on pyritty säilyttämään, joten esimerkiksi ulkoasun määrittely onnistuu suoraan elementeille.
• XHTML 1.0 Strict. Kuten Transitional, mutta ei salli esimerkiksi ulkoasun määritystä suoraan elementeille.
• XHTML 1.1. Kuten XHTML 1.0 Strict, mutta kielioppisäännöt on jaettu moduuleihin. Tarvittaessa moduuleja voidaan lisätä tai poistaa tulevissa standardeissa. Lisäksi muutama muutos on tehty suhteessa XHTML 1.0:aan.
• XHTML Basic. Supistettu versio XHTML 1.1:stä, josta on poistettu kaikki "raskaat" moduulit. Sopii siis esimerkiksi mobiililaitteille.
• HTML 5 - Uusi tekeillä oleva standardi, joka tulee korvaamaan HTML 4.0:n ja XHTML 1.0:n. Saanee suosituksen aseman vuonna 2012. Useat standardin osat voi ottaa käyttöön jo huomattavasti aiemmin.

XHTML-elementit

Elementeillä on aina aloitus ja lopetus, joiden välissä on varsinainen elementin sisältö. Esim.

<title>WWW-julkaiseminen</title>

<title> on aloituselementti.

</title> on lopetuselementti. Lopetuselementissä on aina /-merkki.

Jos elementillä ei ole sisältöä, niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin. Esim: <br />

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Ominaisuudet eli attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät joitakin 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 on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.

Väärin:

<p>Tuotetun <strong>dokumentin pitää olla hyvin muodostettu 
(<em>engl. well-formed</em>).</p></strong>

Oikein:

<p>Tuotetun <strong>dokumentin pitää olla hyvin muodostettu 
(<em>engl. well-formed</em>)</strong>.</p>

Dokumentin pitää olla validi

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ä ja mitä attribuutteja kuuluu millekin elementille jne.

Validisuuden voi tarkistaa W3C:n validaattorilla.

Sivuston julkaiseminen

Kts. Tietotekniikan opettajan työvälineitä -kurssin julkaisuohjeet.

HUOM! Automaattista hakemistolistausta ei enää näytetä oletuksena users.jyu.fi-palvelimella.

• Ohje miten listauksen saa näkyviin

Peruselementtien kertaus

Miten luon XHTML-dokumentin?

• Esimerkkejä peruselementeistä
• http://appro.mit.jyu.fi/doc/www/
• http://appro.mit.jyu.fi/tyovaline/demot/demo6/

Hakemistorakenne

Miten voidaan luoda kokonainen sivusto?

• Luodaan XHTML-dokumentti, josta viitataan (a-elementti) toiseen omaan dokumenttiin.
• Kun dokumentteja on paljon, on järkevää luoda sivuhierarkia (hakemistorakenne) ja toistuva navigointi dokumenttien välillä liikkumisen helpottamiseksi.
• Hakemistojen nimissä ei kannata käyttää ääkkösiä.
  • Tällöin URL-osoitteessa pitäisi käyttää erikoiskoodausta, koska kaikissa maissa ei ole käytössä ääkkösiä.
• Jokaista sivua varten kannattaa luoda alihakemisto.
  • Sivuun liittyvät tiedostot pysyvät yhdessä.
  • Sivuun viittaaminen yksinkertaistuu.
  • Sivuston käyttäjän navigointi helpottuu, osoite kertoo missä päin sivustoa mennään.
• Jokaisen dokumentin title kannattaa kirjoittaa ytimekkäästi.
  • Tärkein asia ensin.
  • Voi kirjoittaa myös edellisten sivujen otsikot, jolloin title toimii navigointiapuna.
• Tallenna dokumentit index.html-nimellä.
  • Tämä on Apache-palvelimen oletusasetuksissa dokumentti, joka näytetään ensimmäisenä, kun viitataan hakemistoon.
  • URL-osoitteet pysyvät siistinä, ei tarvitse kirjoittaa .html-dokumentin nimeä.
  • Palvelimen asetuksia voidaan muuttaa siten, että index.html-dokumentin sijaan näytetään jokin muu dokumentti. Tämä helpottaa keskitettyä ylläpitoa, sillä linkkejä ei tarvitse mennä muuttamaan.

Hyperlinkit - a

a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.

• Absoluuttisella osoitteella oleva linkki kurssin kotisivulle:

  <p>Absoluuttisella osoitteella oleva linkki kurssin 
  <a title="WWW-julkaiseminen kurssin kotisivu" 
  href="http://appro.mit.jyu.fi/www/">kotisivulle</a></p>

• Puoliabsoluuttisella osoitteella oleva linkki kurssin toiselle luennolle:

  <p>Puoliabsoluuttisella osoitteella oleva linkki kurssin 
  <a href="/www/luennot/luento2/">toiselle luennolle</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>

  Suhteellisella viittauksella voit viitata mihin tahansa oman hakemistorakenteen tiedostoon:

  href=
  
  "muuli.html"       Tämän hakemiston muuli.html-tiedosto 
                     (hakemisto, missä viittaava dokumentti sijaitsee)
  "testi/"           Tämän hakemiston alihakemisto testi 
                     (oletuksena näytetään sivu index.html)
  "testi/muuli.html" Tämän hakemiston testi-alihakemiston muuli.html-tiedosto 
                     (ei kannata käyttää)
  "testi/kuva.png"   Viite testi-alihakemiston kuva.png-tiedostoon
                     (kuvat kannattaa säilyttää dokumentin kanssa samassa hakemistossa)
  "../"              Isähakemisto 
                     (hakemisto, jossa nykyinen hakemisto sijaitsee)
  "../testi/"        Isähakemiston alihakemisto testi
  

• Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun Hyperlinkit - a

  <p>Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun
  <a href="#hyper">Hyperlinkit - a</a></p>

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

  <h3 id="hyper">Hyperlinkit - a</h3>
  

Linkkejä

• W3C:n XHTML 1.0 -suositukset
• W3C:n XHTML 1.1 -suositukset
• W3C:n HTML 5 -kehitystyön viimeisin julkaistu versio
• WWW-julkaiseminen -kurssin materiaaleja
• WWW-julkaiseminen moniste