Samuelin sivukurssi

Rakenne

Esimerkkisivu

Alla on esimerkki web-sivun lähdekoodista, eli XHTML-dokumentista. Dokumentti noudattaa HTML-kielen versiota XHTML Basic, mikä on kerrottu ensimmäisellä rivillä. head-osassa on kerrottu otsikon lisäksi dokumentin tekijä ja päivä, jona dokumenttia on viimeksi muutettu. body-osassa on ensin sivun pääotsake, sitten kappale eri tavoin muotoiltua tekstiä, sisäkkäisiä listoja ja taulukko. Lopuksi sivulla on vielä kuva. Skandinaaviset merkit (ä ja ö) on korvattu standardinmukaisilla korvikkeilla ä (a + umlaut) ja ö (o + umlaut).

Jos tahdot käyttää esimerkkisivua oman sivusi pohjana, kopioi alla oleva koodi haluamaasi tekstieditoriin ja tallenna se nimellä esim.html. Älä kuitenkaan tallenna tämän sivun lähdekoodia, sillä siinä esimerkkisivun tagit on määritelty <- ja >-merkeillä, jotta ne näkyisivät selaimessa oikein.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="./tyylit.css" />
  <title>Esimerkkisivu</title>
 </head>
 <body>
  <h1>Esimerkkisivu</h1>
  <p>Tällä sivullä esitellään XHTML-elementtejä.</p>
  <p>Tässä kappaleessa on
     linkki <a href="http://w3.org/TR/html">uusimpaan HTML-versioon</a>.</p>
  <h2>Listat</h2>
  <ul>
   <li>yksi</li>
   <li>toinen</li>
  </ul>
  <h3>Järjestysnumeroilla</h3>
  <ol>
   <li>ensimmäinen</li>
   <li>toinen</li>
  </ol>
  <h2>Taulukko</h2>
  <table summary="lyhyt kuvaus taulukon sisällöstä">
   <caption>Taulukon otsikko</caption>
   <tr><th>1. sarakkeen otsikko</th><th>2. sarakkeen otsikko</th></tr>
   <tr><td>1. rivin 1. sarake</td><td>1. rivin 2. sarake</td></tr>
   <tr><td>2. rivin 1. sarake</td><td>2. rivin 2. sarake</td></tr>
  </table>
  <h2>Oma osio kuvalle</h2>
  <div>
   <img alt="oma kuva" src="omakuva.jpg" width="60" height="100" />
  </div>
 </body>
</html>