Appro | Tietoverkot työvälineenä | Luennot | Demot | Harjoitustyö | Moniste | FAQ | Linkit | Suoritukset | Palaute
luento 1 | luento 3

Luento 2 - XHTML Basic -elementit

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

Dokumentin perusrakenne

Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannatta huomata seuraavat asiat:

Dokumentin rakenne puumaisena esityksenä

Dokumentin perusrunko

Seuraavassa esimerkissä on nähtävillä dokumentin perusrunko.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
  <title>Koko dokumentin sisältöä kuvaava otsikko</title>
</head>

<body>

  <h1>Ensimmäisen tason otsikko</h1>

  <p>Tekstikappale</p>

  <h2>Toisen tason otsikko</h2>
		 
  <p>Tekstikappale</p>
		 
</body>
</html>

Seuraavassa selitetään lyhyesti edellisen esimerkin dokumentin perusrungon elementit:

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. 


<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

<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
  2. Järjestetyn listan toinen alkio
  3. Järjestetyn listan kolmas 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>

Seuraavassa esimerkissä on esitetty järjestetyn listan sisällä kolme erilaista tapahtumaa, jotka liittyvät jotenkin suurempaan artikkeliin. Järjestettyä listaa ei saa kuitenkaan käyttää lukujen numeroinnissa!

  1. Sattuipas sopivasti (tapaus 1)

    Ensimmäinen tekstikappale ekassa listassa

    Toinen tekstikappale ekassa listassa

  2. Sattui kipeästi (tapaus 2)

    Ensimmäinen tekstikappale tokassa listassa

    Toinen tekstikappale tokassa listassa

  3. Sairaalareissu (tapaus 3)

    Ensimmäinen tekstikappale kolmannessa listassa

    Toinen tekstikappale kolmannessa listassa

<ol>
<li>
  <h2>Sattuipas sopivasti (tapaus 1)</h2>
  <p>Ensimmäinen tekstikappale ekassa listassa</p>
  <p>Toinen tekstikappale ekassa listassa</p>
</li>
<li>
  <h2>Sattui kipeästi (tapaus 2)</h2>
  <p>Ensimmäinen tekstikappale tokassa listassa</p>
  <p>Toinen tekstikappale tokassa listassa</p>
</li>
<li>
  <h2>Sairaalareissu (tapaus 3)</h2>
  <p>Ensimmäinen tekstikappale kolmannessa listassa</p>
  <p>Toinen tekstikappale kolmannessa	listassa</p>
</li>
</ol>

Määritelmä lista - dl


<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
</dl>

Taulukot

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

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

Taulukkoon liittyvä otsikko
Esimmäisen sarakkeen otsikkoToisen sarakkeen otsikko
1. rivin 1. solu1. rivin 2. solu
2. rivin 1. solu2. rivin 2. solu
3. rivin 1. solu3. rivin 2. solu
<table border="1" 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 border="1" 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

Kuva - img

Seuraavassa esimerkki img-elementin käytöstä. Esimerkin kuva on löydettävissä tästä dokumentista Dokumentin perusrakenteen yhteydestä. 

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

Vaakaviiva - hr

hr-elementtiä ei tueta XHTML Basic suosituksessa. Vaakaviiva kannattaa määrittää CSS:n avulla.

Hyperlinkit - a

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

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

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 rel="Prev" href="../luento1/" title="Luento 1" />
<link rel="Next" href="../luento3/" title="Luento 3" />
<link rel="Start" href="http://www.mit.jyu.fi/opetus/appro/2000/syksy/laitteistot/luennot/" title="Tietoverkot työvälineenä-kurssin luennot" />
<link rel="Copyright" href="http://www.mit.jyu.fi/opetus/appro/copyright.html" title="Copyright Notice" />
<link rev="Made" href="mailto:tommi.j.lahtonen@jyu.fi" title="Tietotekniikan approbatur" />
<link rel="StyleSheet" href="http://www.mit.jyu.fi/opetus/appro/appro.css" type="text/css" media="screen" />

Yleisimmät virheet HXTML-dokumentissa

http://appro.mit.jyu.fi/2001/syksy/tietoverkot/luennot/luento2/index.html
© Petri Heinonen ()<URL: http://www.mit.jyu.fi/peheinon/>
25.09.2001 15:13:27
Appro | Tietoverkot työvälineenä | Luennot | Demot | Harjoitustyö | Moniste | FAQ | Linkit | Suoritukset | Palaute
luento 1 | luento 3