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).
Seuraavassa käydään läpi WWW-sivujen tekemiseen liittyviä perusasioita.
WWW-sivuja tehtäessä on tärkeää erottaa sivujen sisältö ja ulkoasu toisistaan muun muassa seuraavien syiden vuoksi:
Sisällön ja ulkoasun erottaminen toteutetaan teknisesti seuraavalla tavalla:
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 (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:
Esimerkki XML-muotoisesta viestistä Peteltä Tommille.
<viesti> <lahettaja>Pete</lahettaja> <vastaanottaja>Tommi</vastaanottaja> <otsikko>Muistutus</otsikko> <sisalto>Huomenna aamulla uimaan klo 7!</sisalto> </viesti>
<li><strong>Tekstikappale</strong></li>
<p><strong>Tekstikappale</strong></p>
a
-elementtiin tulevalla href
-attribuutilla:
<a href="http://www.jyu.fi/">Jyväskylän yliopisto</a>
OIKEIN: <p>Tekstikappale</p> VÄÄRIN: <P>Tekstikappale</P>
<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 .." />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<!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.
<?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>
Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:
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:
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 elementtejä voi sijoittaa suoraan body-elementin sisään.
Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.
<h1>Ensimmäisen tason otsikko</h1> <p>Tämä on tekstikappale</p> <h2>Toisen Tason otsikko</h2> <p>Tämä on tekstikappale</p>
<p> Tämä on tekstikappale </p> <p> Tämä on tekstikappale </p>
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.
<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>
<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>
<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>
Seuraavaan on kerätty listaksi tekstitason elementit.
<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>
<p>Suhteellisella osoitteella oleva linkki kurssin <a href="../../demot/demo1/">ensimmäisiin demoihin</a></p>
<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>
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>
Seuraavaan on listattu WWW-dokumentin tuottamiseen liittyvät vaiheet. Osaa vaiheista tarkastellaan tarkemmin vasta myöhemmillä luennoilla.
Yhteys on auki ainoastaan sivun siirtämisen ajan!