XHTML-elementit ja kurssin järjestelyt - Luento 1

• Luentotaltiointi
• Esittely (noin 20-30 min)
• Rakenneajatus kertauksena
  • XHTML-dokumentin rakenne
  • Ominaisuudet eli attribuutit
  • Dokumentin on oltava hyvin muodostettu
  • Dokumentin pitää olla validi
  • XHTML:n erilaiset dokumenttityypit
• XHTML-elementtien luokittelu
  • Esimerkkejä XHTML-elementeistä
• Lohkotason elementit
  • Otsikkoelementit - (h1 - h6)
  • Tekstikappale - p
  • Osoite - address
  • Kappalelainaus - blockquote
  • Muotoilematon teksti - pre
  • Yleinen lohko - div
• Erilaiset listat
  • Järjestämätön lista - ul
  • Järjestetty lista - ol
  • Sisäkkäiset listat
  • Määritelmälista - dl
• Taulukot
• Korvattavat elementit
  • Kuva - img
  • Objektit - object
• Hyperlinkit - a
• Tekstitason elementit
• 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 (noin 20-30 min)

• Yleisesittely (kotisivun tiedot)
• Esitiedot
  • Tietokone ja tietoverkot työvälineenä tai vastaavat tiedot.
  • Ei vaadita ohjelmointitaitoa, mutta perusohjelmointitaidoista on huomattavaa hyötyä (esim. Ohjelmointi 1).
• Kurssin suorittaminen?
  • Ilmoittautuminen Korppiin.
  • Suoritetaan harjoitustyöllä.
  • Yleisopintoihin, tutkintoon vai Tietotyön kokonaisuuteen?
  • Kurssi korvaa vanhassa tietotekniikan approssa kurssin Tietoverkot työvälineenä. WWW-julkaiseminen ja Tietoverkot työvälineenä eivät sovi samaan opintokokonaisuuteen. Tämän kurssin voi kuitenkin sijoittaa yleisopintoihin.
• 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 täältä.
  • Videonti ja luentoäänitys.
• Demojen sisältö ja aikataulu?
  • Mitkä ryhmät toteutuvat?
  • Ei pakollisia, mutta erittäin suositeltavia.
  • Tietoja ja taitoja vaaditaan harjoitustyössä.
  • Videot ja mallivastaukset.
• Kurssin ja demojen pitäjät?
• Etäopiskelu
  • Kurssin työmäärä 80h! Kannattaa jakaa useammalle päivälle.
  • Uusimmat päivitykset: http://appro.mit.jyu.fi/rss.xml.

Rakenneajatus kertauksena

Tekstidokumentissa on erilaisia tekstiä jäsentäviä osia: otsikoita, tekstikappaleita, listoja jne. Pelkkä teksti tulee näin luettavampaan muotoon. Näistä osista muodostuu dokumentin rakenne. Ajatuksena on, että rakenne ja ulkoasu ovat toisistaan riippumattomia asioita. Kun teksti on jäsennetty sisällön mukaan, niin ulkoasua voidaan muokata rakenteellisten osasien, elementtien, mukaan.

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.

XHTML:n erilaiset dokumenttityypit

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

XHTML-elementtien luokittelu

Elementtejä voi luokitella muunmuassa seuraavan jaottelun mukaan:

• Lohkotason elementit (block level)
• Tekstitason elementit (inline level)
• Korvattavat elementit (replaced)

Esimerkkejä XHTML-elementeistä

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

Lohkotason elementit

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

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>

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>

Erilaiset listat

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>

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>

Taulukot

• table-elementti muodostaa taulukon
• tr-elementti aloittaa uuden rivin taulukossa
• th-elementti määrittelee rivi- tai sarakeotsikon
• td-elementti määrittelee taulukon solun

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

• Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
• Taulukoilla ei saa taittaa!
• Taulukolle voidaan määritellä tekstikuvaus summary-attribuutilla.

Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.

Taulukkoon liittyvä otsikko

Esimmäisen sarakkeen otsikko	Toisen sarakkeen otsikko
1. rivin 1. solu	1. rivin 2. solu
2. rivin 1. solu	2. rivin 2. solu
3. rivin 1. solu	3. rivin 2. solu

<table summary="Tekstikuvaus taulukon sisällöstä">
<caption>Taulukkoon liittyvä otsikko</caption>
<tr>
  <th>Esimmäisen sarakkeen otsikko</th>
  <th>Toisen sarakkeen otsikko</th><

/tr>
<tr>
  <td>1. rivin 1. solu</td>
  <td>1. rivin 2. solu</td>
</tr>
<tr>

  <td>2. rivin 1. solu</td>
  <td>2. rivin 2. solu</td>
</tr>
<tr>
  <td>3. rivin 1. solu</td>

  <td>3. rivin 2. solu</td>
</tr>
</table>

Ensimmäisen sarakkeen otsikko	Toisen sarakkeen otsikko	Kolmannen sarakkeen otsikko
1. rivin 1. solu	1. rivin 2. solu	1. rivin 3. solu
2. rivin 1. solu	2. rivin 2. solu	2. rivin 3. solu
3. rivin 1. solu	3. rivin 2. solu	3. rivin 3. solu
4. rivin 1. solu joka laajenee kolmen sarakkeen alueelle
5. rivin 1. solu	5. rivin 2. solu, joka laajenee kahdelle riville	5. rivin 3. solu
6. rivin 1. solu		6. rivin 3. solu

<table summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" >
<tr>
   <th>Ensimmäisen sarakkeen otsikko</th>  <th>Toisen sarakkeen otsikko</th>  <th>Kolmannen sarakkeen otsikko</th>

</tr>
<tr>
   <td>1. rivin 1. solu</td>               <td>1. rivin 2. solu</td>          <td>1. rivin 3. solu</td>

</tr>
<tr>
   <td>2. rivin 1. solu</td>               <td>2. rivin 2. solu</td>          <td>2. rivin 3. solu</td>

</tr>
<tr>
   <td>3. rivin 1. solu</td>               <td>3. rivin 2. solu</td>          <td>3. rivin 3. solu</td>

</tr>
<tr>
   <td colspan="3">4. rivin 1. solu joka laajenee kolmen sarakkeen alueelle</td>
</tr>
<tr>
   <td>5. rivin 1. solu</td>               <td rowspan="2">5. rivin 2. solu, joka laajenee kahdelle riville</td>          
   <td>5. rivin 3. solu</td>

</tr>
<tr>
   <td>6. rivin 1. solu</td>                                                 <td>6. rivin 3. solu</td>
</tr>
</table>

Korvattavat elementit

Korvattavat elementit eivät sisällä tekstiä tai muita elementtejä vaan ne korvataan esim. kuvalla tai jollakin muulla objektilla.

Kuva - img

• src-attribuutin määrittelemä kuva ilmestyy img-elementin paikalle dokumenttiin.
• img-elementti pitää sijoittaa aina jonkin kappaletason elementin (p, li, h1, h2 jne) sisään.
• img-elementille ei ole normaalia lopetuselementtiä joten se pitää korvata lisäämällä aivan elementin loppuun välilyönti ja /-merkki.

Seuraavassa esimerkki img-elementin käytöstä.

<p>
<img src="rakenne.jpg" alt="Dokumentin rakenne puumaisena esityksenä" title="Dokumentin rakenne" />
</p>

Objektit - object

Object-elementillä voi liittää dokumenttiin periaatteessa mitä tahansa objekteja (kuvia, videoita, animaatioita, ohjelmasovelluksia etc.). Jos selain ei tue haluttua tiedostoa niin object-elementin avulla voidaan määritellä vaihtoehtoisia esitystapoja.

Esimerkki SVG-kuvan liittämisestä object-elementin avulla. Vaihtoehtoisena esitysmuotona on gif-muotoinen kuva.

<p>
<object type="image/svg+xml" data="hazor1e.xml" title="SVG-kuva" >
<img src="hazor1e.gif" alt="SVG-kuva" />
</object>
</p>

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>

• 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="perusrakenne">Dokumentin perusrakenne</h2>
  

Tekstitason elementit

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

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

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

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

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

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

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

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

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

  XHTML (Extensible HyperText Markup Language) on XML:n sääntöjen mukaan määritelty uusin versio HTML:stä.

  <p><dfn>XHTML</dfn>
  (Extensible HyperText Markup Language) on XML:n sääntöjen mukaan määritelty uusin versio HTML:stä. 
  </p>
  

• 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
• Tapahtumankäsittely
• Esitysosa
• map ja area
• script

Linkkejä

• W3C:n XHTML 1.1-suositukset
• XHTML Quick Reference
• Tietoverkot työvälineenä moniste