XHTML-elementit ja kurssin järjestelyt - Luento 1

• Luentotaltiointi
• Esittely
  • Toteutettuja harjoitustöitä
  • Kurssin aiheita
  • Esitiedot
  • Yleisesittely
  • Kurssin suorittaminen?
  • Luentojen sisällöt ja aloitusajat?
  • Demojen sisältö ja aikataulu?
  • Kommunikointi
  • Etäopiskelu
• Rakenneajatus kertauksena
  • XHTML-dokumentin rakenne
  • Ominaisuudet eli attribuutit
  • Dokumentin on oltava hyvin muodostettu
  • Dokumentin pitää olla validi
  • Erilaiset dokumenttityypit
  • Miksi XHTML?
  • XHTML 1.1
• Hakemistorakenne
  • Hyperlinkit - a
• Sivuston julkaiseminen
• XHTML-elementtien luokittelu
  • Peruselementtien kertaus
  • Esimerkkejä XHTML-elementeistä
• Uusia lohkotason elementtejä
  • Osoite - address
  • Kappalelainaus - blockquote
  • Muotoilematon teksti - pre
  • Yleinen lohko - div
  • Määritelmälista - dl
• Uusia tekstitason elementtejä
  • Määritelmät
  • Viittaukset
  • Esimerkit
  • Muotoilut
• Dokumentin otsikkotietoihin sijoitettavat elementit
  • Metatieto - meta
  • Linkkielementti - link
• Muita elementtejä
• Linkkejä

Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat ja käydään läpi XHTML-elementtejä. Muistellaan CSS:n perusteita.

Esittely

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

Toteutettuja harjoitustöitä

• Fenix & Pupunen
  • Graafisella pöytäkoneen selaimella
  • Ääniselaimella: burmat.mp3
  • Mobiiliselaimella: burmatnokia.wmv ja burmatopera.wmv
• Uraputki Oy
  • Graafisella pöytäkoneen selaimella
  • Ääniselaimella: uraputki.mp3
  • Mobiiliselaimella: uraputkinokia.wmv ja uraputkiopera.wmv

Kurssin aiheita

• Rakenteisten dokumenttien periaate (XHTML)
• Sivuston ulkoasun muokkaaminen kootusti (CSS)
• Sivuston käytettävyys ja esteettömyys
• Tiedon keruu lomakkeilla ja datan käsittelymenetelmiä
• Kuva ja ääni WWW:ssä
• WWW-sivuston tekeminen ja ylläpito
• Palvelintekniikoista suppeasti

Esitiedot

• Tietokone ja tietoverkot työvälineenä tai vastaavat tiedot.
• Ei vaadita ohjelmointitaitoa, mutta perusohjelmointitaidoista on huomattavaa 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 Jukka Mäntylä ja Tommi Lahtonen.
• Demopitäjinä lisäksi Mikko Aarnio ja Riitta Holappa.

Kurssin suorittaminen?

• Ilmoittautuminen Korppiin.
• Yleisopintoihin, tutkintoon vai informaatioteknologian perusopintokokonaisuuteen?
• Suoritetaan harjoitustyöllä.
• Toteutetaan jokin riittävän laaja www-sivusto.
• Tarkemmat ohjeet tulevat myöhemmin

Luentojen sisällöt ja aloitusajat?

• Luennot alkavat tiistaisin ja torstaisin klo 16.15
• Varsinainen asia opetetaan luennolla.
• Ei luentomonistetta, mutta lisämateriaalia voi lukea WWW-monisteesta ja FAQ:ta.
• Verkkovideolähetys, videotaltiointi ja luentoäänitys.

Demojen sisältö ja aikataulu?

• Ei pakollisia, mutta erittäin suositeltavia.
• Tietoja ja taitoja vaaditaan harjoitustyössä.
• Videot ja mallivastaukset.
• Virtuaalidemo ke klo 15-17.

Kommunikointi

• Liity postituslistalle! Voit myös lukea www-foorumia tai news-ryhmää (jyu.opinnot.itk024)
• Tule keskusteluun IRC-kanavalle #appro.

Etäopiskelu

• Kurssin työmäärä keskimäärin 80h! Kannattaa jakaa useammalle päivälle.
• Harjoitustyö syksyn vaatimuksien mukaan.

Rakenneajatus kertauksena

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.

XHTML-dokumentin rakenne

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

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

<title>Tietokone ja tietoverkot työvälineenä</title>

<title> on aloituselementti.

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

Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin: <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 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 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.

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.

Miksi XHTML?

Miksi en käyttäsi 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:ää.

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

• 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
    • VoiceXML-esimerkki
• Ulkoasu erotetaan yleensä XHTML-dokumentista
  • Sivustosta tulee saavutettava.
  • Sivuston koko ulkoasun muokkaaminen on helppoa. Kts. esim. CSS Zen Garden

XHTML 1.1

<?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>Tähän sivun otsikko</title>
  </head>

  <body>
    <h1>Tähän 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.
• 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.

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ä.
• 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.

Hyperlinkit - a

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

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

  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 lohkotason elementeistä kertovaan lukuun Lohkotason elementit

  <p>Linkki tämän dokumentin lohkotason elementeistä kertovaan lukuun
  <a href="#lohko">Lohkotason elementit</a></p>

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

  <h2 id="lohko">Lohkotason elementit</h2>
  

Sivuston julkaiseminen

• Siirretään koko hakemistorakenne WWW-palvelimelle.
• Agorassa V-asemalle tallennettaessa sivut menevät suoraan Windows 2003 Server -koneelle ja siellä oleva Microsoftin palvelin jakaa tiedostoja internetiin. Sivusi löytyvät tällöin osoitteesta:

  http://www.ad.jyu.fi/users/tunnuksen_1._kirjain/tunnus/

• SSH:lla voidaan ottaa yhteyttä UNIX-palvelimiin www.cc.jyu.fi ja people.cc.jyu.fi ja näiden koneiden www-linkin alle sijoitettuja tiedostoja Apache-niminen palvelin jakaa internetiin. Tällöin sivut löytyvät osoitteesta:

  http://www.cc.jyu.fi/~käyttäjätunnus/

  http://people.cc.jyu.fi/~käyttäjätunnus/

• Jos www-hakemistossa on jonkin alihakemisto, niin siihen viitataan osoitteella:

  http://people.cc.jyu.fi/~käyttäjätunnus/alihakemiston_nimi/

• Apache-palvelimilla hakemistosta tarjotaan oletuksena tiedostoa nimeltä index.html

XHTML-elementtien luokittelu

Elementtejä voi luokitella muunmuassa seuraavan jaottelun mukaan:

• Lohkotason elementit (block level)
  • Esimerkiksi kappaleet, otsikot ja listat
• Tekstitason elementit (inline level)
  • Esimerkiksi tärkeäksi merkityt tekstipätkät
• Korvattavat elementit (replaced)
  • Esimerkiksi kuvat ja muut objektit

Sivulla olevat erityyppiset elementit saat näkyviin esimerkiksi asentamalla Firefoxiin Web developer-pluginin tai käyttämällä Mozillan DOM Inspectoria.

Peruselementtien kertaus

Miten luon XHTML-dokumentin?

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

Esimerkkejä XHTML-elementeistä

• Esimerkkejä peruselementeistä
• Esimerkkidokumentti XHTML-elementeistä.
  • Tutki sivuston lähdekoodia View | Page Source.

Uusia lohkotason elementtejä

Lohkotason elementeillä merkitään tyypillisesti pidempiä tekstiosioita, kuten kappaleita, listoja ja taulukoita. Lohkotason elementin sisällä saa olla tai ei saa olla toisia lohkotason elementtejä riippuen elementistä.

Osoite - address

address-elementillä merkitään dokumentin tekijän yhteystiedot.

<address>
  <a href="http://www.iki.fi/hazor/">Tommi Lahtonen</a>
  (<a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>)
  &lt;URL:<a href="http://www.iki.fi/hazor/">http://www.iki.fi/hazor/</a>>

</address>

Kappalelainaus - blockquote

blockquote-elementillä merkitään isot useiden kappaleiden tai elementin kokoiset lainaukset. Seuraavassa esimerkki lohkotasoisesta lainauksesta:

Jakob Nielsen kirjoittaa artikkelissaan When Bad Design Elements Become the Standard

Web design is easy: If you are thinking about how to design a certain page element, all you have to do is to look at the twenty most-visited sites on the Internet and see how they do it.

• If 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.
• If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability.
• If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way. Even so, if there are a few options, each of which are used by at least 20% of big sites, you should limit yourself to choosing one of these reasonably well-known designs unless your alternative design has at least 25% higher measured usability than the best of the choices used by the big sites.

<p>Jakob Nielsen kirjoittaa artikkelissaan

<cite><a href="http://www.useit.com/alertbox/991114.html">
When Bad Design Elements Become the Standard</a></cite></p>

<blockquote cite="http://www.useit.com/alertbox/991114.html">
<p>
<em>Web design is easy:</em> If you are thinking about how to design a
certain page element, all you have to do is to look at the twenty
most-visited sites on the Internet and see how they do it.

</p>
<ul>
  <li>If <strong>90% or more</strong> of the big sites do things in a
  single way, then this is the <strong>de-facto standard</strong> and
  you <em>have</em> to comply. Only deviate from a design standard
  if your alternative design has at least 100% higher measured usability.</li>

  <li>If <strong>60-90%</strong> of the big sites do things in a
  single way, then this is a <strong>strong convention</strong> and
  you <em>should</em> comply unless
  your alternative design has at least 50% higher measured usability.</li>

  <li>If <strong>less than 60%</strong> of the big sites do things in a
  single way, then <strong>there are no dominant conventions yet</strong> and
  you are free to design in an alternative way. Even so, if there are a
  <strong>few options, each of which are used by at least 20% of big
  sites</strong>, you should limit yourself to choosing one of these
  reasonably well-known designs unless your alternative design has at least 25%
  higher measured usability than the best of the choices used by the big sites.</li>

</ul>
</blockquote>

Muotoilematon teksti - pre

pre-elementillä merkitään tekstilohkot, joissa on välttämätöntä säilyttää tekstin alkuperäinen kirjoitusasu. Elementtiä käytetään esimerkiksi ohjelmakoodilistauksissa.

<pre>
.navbar {
        border-style: solid;
        border-width: 1px;
        background-color: yellow;
        color: black;
        text-align: center;
        font-weight: bold;
        width: 100%;
        height: 2em;
        padding: 0.5em;
        position: fixed;
        top: 0%;
        left: 0%;
}
</pre>

Yleinen lohko - div

div-elementti on yleinen lohkotason elementti, jota käytetään merkitsemään erilaisia lohkoja. Esimerkiksi CSS-tyylejä käytettäessä div-elementtiä käytetään, jos ei löydetä vastaavaa kappaletason elementtiä. Seuraavassa esimerkissä on nähtävillä tällä sivulla oleva navigointipalkin lähdekoodi:

<div class="navbar">
  <ul>
    <li><a href="http://appro.mit.jyu.fi/">Appro</a></li>
    <li><a href="ilmoitukset/">Ilmoitukset</a></li>
    <li><a href="luennot/">Luennot</a></li>
    <li><a href="demot/">Demot</a></li>
    <li><a href="harkka/">Harjoitustyö</a></li>
    <li><a href="linkit/">Linkit</a></li>
    <li><a href="tentit/">Suoritukset</a></li>
    <li><a href="http://appro.mit.jyu.fi/palaute.html">Palaute</a></li>
  </ul>
</div>

Määritelmälista - dl

• dl-elementti määrittelee varsinaisen listan
• dt-elementti määrittelee määriteltävän termin
• dd-elementti sisältää termin määrittelyn

<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>XHTML</dt>
<dd>eXtensible Hypertext Markup Language</dd>
</dl>

Uusia tekstitason elementtejä

Tekstitason elementeillä ilmaistaan lyhyiden tekstin osien rakennetta. Tekstitason elementit sijaitsevat lohkotason elementtien sisällä. Seuraavaan on kerätty listaksi tekstitason elementit.

Määritelmät

• abbr - lyhenteet

  CSS HTML

  
  <p>
  <abbr title="Cascading Style Sheets">CSS</abbr>
  <abbr title="Hypertext Markup Language">HTML</abbr>
  </p>
  

• acronym - alkukirjaimista muodostettu lyhenne, jota käytetään sanana

  ANSI CORBA

  
  <p>
  <acronym title="American National Standards Institute">ANSI</acronym>
  <acronym title="Common Object Request Broker Architecture">CORBA</acronym>
  </p>
  

• dfn - merkitään termien määritelmät

  Päätteetön (esim. Arial tai Verdana) kirjasin sopii normaaleihin listoihin. Dian otsikoissa voi käyttää päätteellistä kirjasinta.

  <p><dfn title="Kirjaisin, jossa kirjaimien käyrien päitä EI
  ole päätetty kohtisuoralla viivalla">Päätteetön</dfn>
  (esim. Arial tai Verdana) kirjasin sopii normaaleihin listoihin.
  Dian otsikoissa voi käyttää <dfn title="Kirjaisin, jossa
  kirjaimien avoimien käyrien päät on päätetty lyhyellä
  kohtisuoralla viivalla"> päätteellistä</dfn> kirjasinta.</p>
  

Viittaukset

• cite - kappaleen sisällä olevat lainaukset ja viittaukset lähteisiin
  • Nielsen, Jakob: Designing Web Usability: The Practice of Simplicity
  • Schengili-Roberts: Core CSS - Cascading Style Sheets

  <ul>
  <li>Nielsen, Jakob:
  <cite><a href="http://www.useit.com/jakob/webusability/">
  Designing Web Usability: The Practice of Simplicity</a></cite></li>
  <li>Schengili-Roberts: <cite>Core CSS - Cascading Style Sheets</cite></li>
  </ul>
  

• q - kappaleen sisällä oleva lainaus

  Kuten Jukka Korpelan nyysiopas sanoo: Meilispämmiä vastaan ei kannata yrittää taistella ns. nospam-osoitteilla .

  <p>
  Kuten Jukka Korpelan <cite>nyysiopas</cite> sanoo:
  <q cite="http://www.cs.tut.fi/~jkorpela/nyysit/4.4.html#spamspam">
  Meilispämmiä vastaan ei kannata yrittää taistella ns. nospam-osoitteilla
  </q>.
  </p>

Esimerkit

• code - merkitään ohjelmakoodit

  <pre><code>
  &lt;p&gt;
  &lt;acronym title="American National Standards Institute"&gt;ANSI&lt;/acronym&gt;
  &lt;acronym title="Common Object Request Broker Architecture"&gt;CORBA&lt;/acronym&gt;
  &lt;/p&gt;
  </code></pre>
  

• kbd - merkitään käyttäjän syötteenä antamat tekstit

  Syötä tunnus-kenttään tjlahton

  <p>Syötä tunnus-kenttään <kbd>tjlahton</kbd></p>

• samp - ohjelmien esimerkkitulosteet

  [tjlahton@eppi syksy]$ ls -al
  total 30
  drwxrwxr-x    4 tjlahton tt-opet       352 Oct 24 15:47 .
  drwxrwxr-x    6 tjlahton tt-opet       152 Aug 12 10:35 ..
  -rw-rw-r--    1 tjlahton tt-opet        85 Aug  5 13:20 .wmlrc
  -rw-rw-r--    1 tjlahton tt-opet       935 Oct  5 13:12 Makefile
  -rw-rw-r--    1 tjlahton tt-opet         0 Aug 10 17:53 index.html
  -rw-rw-r--    1 tjlahton tt-opet      3200 Oct 16 14:08 index.wmltmpl
  -rw-rw-r--    1 tjlahton tt-opet       836 Sep 10 14:32 linkit.wml
  -rw-rw-r--    1 tjlahton tt-opet       655 Sep 10 14:32 linkitetu.wml
  -rwxr-xr-x    1 tjlahton users2         63 Oct  9 13:06 mp3
  drwsrwsr-x    6 tjlahton tt-opet       264 Oct 18 09:00 opiskeluymparisto
  -rw-rw-r--    1 tjlahton tt-opet      2932 Oct 16 14:07 pohja.wmltmpl
  drwxrwxr-x    8 tjlahton tt-opet       456 Oct 22 09:32 tietoverkot
  

  Esimerkin koodi:

  <pre><samp>[tjlahton@eppi syksy]$ ls -al
  total 30
  drwxrwxr-x    4 tjlahton tt-opet       352 Oct 24 15:47 .
  drwxrwxr-x    6 tjlahton tt-opet       152 Aug 12 10:35 ..
  -rw-rw-r--    1 tjlahton tt-opet        85 Aug  5 13:20 .wmlrc
  -rw-rw-r--    1 tjlahton tt-opet       935 Oct  5 13:12 Makefile
  -rw-rw-r--    1 tjlahton tt-opet         0 Aug 10 17:53 index.html
  -rw-rw-r--    1 tjlahton tt-opet      3200 Oct 16 14:08 index.wmltmpl
  -rw-rw-r--    1 tjlahton tt-opet       836 Sep 10 14:32 linkit.wml
  -rw-rw-r--    1 tjlahton tt-opet       655 Sep 10 14:32 linkitetu.wml
  -rwxr-xr-x    1 tjlahton users2         63 Oct  9 13:06 mp3
  drwsrwsr-x    6 tjlahton tt-opet       264 Oct 18 09:00 opiskeluymparisto
  -rw-rw-r--    1 tjlahton tt-opet      2932 Oct 16 14:07 pohja.wmltmpl
  drwxrwxr-x    8 tjlahton tt-opet       456 Oct 22 09:32 tietoverkot</samp></pre>
  
  

• var - merkitään muuttujat ja ohjelman parametrit

  ls-komennon parametreilla al saa tulostuksen muistuttamaan DOSista tuttua DIR-komentoa.

  <p>
  ls-komennon parametreilla <var>al</var> saa tulostuksen muistuttamaan
  DOSista tuttua DIR-komentoa.
  </p>
  

Muotoilut

• br - pakotettu rivinvaihto

  pakotettua rivinvaihtoa EI SAA käyttää tyhjän tilan tekemiseen!

  <address>
  yliopistonopettaja
  <a href="mailto:tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</a><br />
  Sähköposti:
  <strong><a href="mailto:tommi.j.lahtonen@jyu.fi">
  tommi.j.lahtonen@jyu.fi</a></strong><br />
  Kotisivu: <URL: <a class="url" href="http://www.iki.fi/hazor/">
  http://www.iki.fi/hazor/</a>><br />
  Työhuone: <abbr title="Agora C431.2">AgC431.2</abbr><br />
  Puhelin: <em>(014) 260 2746</em><br />
  Fax: <em>(014) 260 2731</em></address>

• span - yleinen merkkitason elementti vrt. div. Käytetään vain paikoissa joihin ei ole muuten sopivampaa elementtejä. Esim. vain ulkoasuun liittyvät määritykset.

Dokumentin otsikkotietoihin sijoitettavat elementit

Metatieto - meta

meta-elementillä määritellään dokumenttiin liittyvää metatietoa

<meta name="description"
  content="Tietoverkot työvälineenä - Tietotekniikan approbatur-kurssi Jyväskylän
	   yliopistossa tietotekniikan laitoksen ja avoimen yliopiston yhteisopetuksena " />
<meta name="keywords"
  content="tietotekniikka, jyväskylän yliopisto, avoin yliopisto,
	   tietotekniikan laitos, informaatioteknologia, opetus, kurssi" />
<meta name="author" content="Tommi Lahtonen" />

Linkkielementti - link

• link-elementti saa esiintyä vain head-elementin sisällä.
• link-elementille määritellään dokumentin suhde muihin dokumentteihin

<link title="Oletustyyli" rel="StyleSheet" href="/appro2003.css" type="text/css" media="all" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rev="Made" href="http://www.iki.fi/hazor/" title="Tommi Lahtonen" />
<link rel="Copyright" href="/copyright.html" title="Copyright Notice" />
<link rel="Prev" href="../luento1/" title="Edellinen" />
<link rel="Next" href="../luento3/" title="Seuraava" />
<link rel="Start" href="../../" title="Tietoverkot työvälineenä" />
<link rel="Contents" href="../" title="Sisällys" />
<link rel="Parent" href="../" title="Edellinen taso" />
<link rel="First" href="../luento1/" title="Ensimmäinen" />
<link rel="Last" href="../luento10/" title="Viimeinen" />
<link rel="Search" href="/haku/" title="Haku" />

Muita elementtejä

Seuraavat XHTML:n osat ja elementit jäävät myöhemmille luennoille

• Lomakkeet (forms)
• object
• map ja area
• script

Linkkejä

• W3C:n XHTML 1.1-suositukset
• XHTML Quick Reference
• WWW-julkaiseminen moniste