XHTML Basic -elementit - Luento 2

• tietoverkot0201.ogg 2.4M
• tietoverkot0202.ogg 2.4M
• tietoverkot0203.ogg 2.4M
• tietoverkot0204.ogg 2.5M
• tietoverkot0205.ogg 2.5M
• tietoverkot0206.ogg 1.6M

Seuraavassa on esitetty lyhyesti XHTML Basic suosituksen mukaiset elementit. Mukaan on otettu myös muutamia käyttökelpoisia XHTML 1.1 suosituksen mukaisia attribuutteja ja elementtejä.

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

Lohkotason elementit

Seuraavassa käydään läpi XHTML Basiciin kuuluvia lohkotason elementtejä:

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">    
  <a href="http://appro.mit.jyu.fi/">Appro</a> |
  <a href="ilmoitukset/">Ilmoitukset</a> |
  <a href="luennot/">Luennot</a> |
  <a href="demot/">Demot</a> |
  <a href="harkka/">Harjoitustyö</a> |  
  <a href="linkit/">Linkit</a> |
  <a href="tentit/">Suoritukset</a> |
  <a href="http://appro.mit.jyu.fi/palaute.html">Palaute</a>

</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>HTML</dt>
<dd>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.

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

<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 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" width="254" height="179" >
<img src="hazor1e.gif" alt="SVG-kuva" width="254" height="179" />
</object>
</p>

Hyperlinkit - a

a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan.

• 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

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

  <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="/appro2002.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" />

Yleisimmät virheet XHTML-dokumentissa

• Elementit väärässä järjestyksessä.
• Kappaletason elementti tekstitason elementin sisällä.
• Väärin kirjoitettu dokumenttityyppi.
• Attribuuttien arvot ilman lainausmerkkejä.
• Elementtien ja attribuuttien nimet pitää kirjoittaa pienellä.
• Epätyhjät elementit pitää lopettaa lopetuselementillä <p> .. </p>
• Tyhjät elementit pitää lopettaa kauttaviivalla <img .. />
• Linkkielementissä ei ole enää name-attribuuttia.