danielck/html-pohja.html

## html-pohja.html
<!doctype html>

<html lang="fi">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Tekijän Nimi">
    <meta name="description" content="Sivun kuvaus: Tämä on ensimmäinen HTML-harjoitus.">
    <title>Kaksisarakkeinen sivu</title>
    <link href="fluid.css" rel="stylesheet"> <!-- Viittaus tyylitiedostoon -->
  </head>
  <body>
    <!--

    #page-elementti ympäröi koko sivun sisällön ja mahdollistaa helpon maksimileveyden
    asettamisen sekä sisällön keskittämisen vaakasuunnassa.

    -->
    <div id="page">

        <!--

        #header-elementistä tulee koko sivun levyinen ylätunniste.

        -->
        <div id="header">
          <h1>Kaksisarakkeinen sivu</h1>

          <ul id="nav">
            <!--  Etusivulla ei ole linkkiä, koska olemme jo tällä sivulla
                  Span-elementin käyttö mahdollistaa samat tyylit kuin linkeille.
            -->
            <li><span>Etusivu</span></li>
            <li><a href="#">linkki</a></li>
            <li><a href="#">linkki</a></li>
          </ul>
        </div><!-- #header loppuu -->


        <!--

        #content-elementti sisältää sivun varsinaisen sisällön

        -->
        <div id="content">
          <h2>Varsinainen sisältö</h2>
          <p>Kirjoita tähän sivusi varsinainen sisältö.</p>
          <p>Muista käyttää oikeita elementtejä oikeisiin tarkoituksiin!</p>
          <p>Tekstiä voi <em>korostaa</em> <code>em</code>-elementillä ja <strong><code>strong</code>-elementeillä</strong>.
          Myös <i>I-elementtiä</i> voi käyttää jos sana poikkeaa jotenkin ympäröivästä tekstistä,
          muttei ole muita tärkeämpi.
          </p>
          <blockquote>
            <p>Pitemmät lainaukset <code>blockquote</code>-elementin sisään. Muista myös
            käyttää asianmukaisia tekstikappaleita.
            </p>
          </blockquote>

          <h2>Taulukko</h2>
          <table summary="Urheilutuloksia">
            <caption>Kuulantyöntökisan tulokset</caption>
            <tr>
              <th>Nimi</th><th>Ikä</th><th>Tulos</th>
            </tr>
            <tr>
              <td>Maija</td><td>23</td><td>7,6 m</td>
            </tr>
            <tr>
              <td>Pekka</td><td>21</td><td>5,3 m</td>
            </tr>
            <tr>
              <td>Jussi</td><td>28</td><td>4,9 m</td>
            </tr>
          </table>

          <img src="http://farm4.static.flickr.com/3427/3852679915_b0994dbc05.jpg" alt="Ahvenanmaan lippu">
        </div><!-- #content loppuu -->

        <!--

        #sidebar eli sivupalkki voi sijaita sisällön vasemmalla tai oikealla puolella.

        -->
        <div id="sidebar">
          <ul>
            <li><a href="harjoitus1.html">Harjoitus 1</a></li>
            <li><a href="harjoitus2.html">Harjoitus 2</a></li>
          </ul>
        </div><!-- #sidebar loppuu -->


        <!--

        #footer on koko sivun levyinen alatunnista, esimerkiksi tekijä- ja yhteystietoja varten

        -->
        <div id="footer">
          <p>Copyright DK 2011.</p>
        </div><!-- #footer  -->
    </div><!-- #page loppuu -->
  </body>
</html>
	<!doctype html>

	<html lang="fi">
	<head>
	<meta charset="utf-8">
	<meta name="author" content="Tekijän Nimi">
	<meta name="description" content="Sivun kuvaus: Tämä on ensimmäinen HTML-harjoitus.">
	<title>Kaksisarakkeinen sivu</title>
	<link href="fluid.css" rel="stylesheet"> <!-- Viittaus tyylitiedostoon -->
	</head>
	<body>
	<!--

	#page-elementti ympäröi koko sivun sisällön ja mahdollistaa helpon maksimileveyden
	asettamisen sekä sisällön keskittämisen vaakasuunnassa.

	-->
	<div id="page">

	<!--

	#header-elementistä tulee koko sivun levyinen ylätunniste.

	-->
	<div id="header">
	<h1>Kaksisarakkeinen sivu</h1>

	<ul id="nav">
	<!-- Etusivulla ei ole linkkiä, koska olemme jo tällä sivulla
	Span-elementin käyttö mahdollistaa samat tyylit kuin linkeille.
	-->
	<li><span>Etusivu</span></li>
	<li><a href="#">linkki</a></li>
	<li><a href="#">linkki</a></li>
	</ul>
	</div><!-- #header loppuu -->


	<!--

	#content-elementti sisältää sivun varsinaisen sisällön

	-->
	<div id="content">
	<h2>Varsinainen sisältö</h2>
	<p>Kirjoita tähän sivusi varsinainen sisältö.</p>
	<p>Muista käyttää oikeita elementtejä oikeisiin tarkoituksiin!</p>
	<p>Tekstiä voi <em>korostaa</em> <code>em</code>-elementillä ja <strong><code>strong</code>-elementeillä</strong>.
	Myös <i>I-elementtiä</i> voi käyttää jos sana poikkeaa jotenkin ympäröivästä tekstistä,
	muttei ole muita tärkeämpi.
	</p>
	<blockquote>
	<p>Pitemmät lainaukset <code>blockquote</code>-elementin sisään. Muista myös
	käyttää asianmukaisia tekstikappaleita.
	</p>
	</blockquote>

	<h2>Taulukko</h2>
	<table summary="Urheilutuloksia">
	<caption>Kuulantyöntökisan tulokset</caption>
	<tr>
	<th>Nimi</th><th>Ikä</th><th>Tulos</th>
	</tr>
	<tr>
	<td>Maija</td><td>23</td><td>7,6 m</td>
	</tr>
	<tr>
	<td>Pekka</td><td>21</td><td>5,3 m</td>
	</tr>
	<tr>
	<td>Jussi</td><td>28</td><td>4,9 m</td>
	</tr>
	</table>

	<img src="http://farm4.static.flickr.com/3427/3852679915_b0994dbc05.jpg" alt="Ahvenanmaan lippu">
	</div><!-- #content loppuu -->

	<!--

	#sidebar eli sivupalkki voi sijaita sisällön vasemmalla tai oikealla puolella.

	-->
	<div id="sidebar">
	<ul>
	<li><a href="harjoitus1.html">Harjoitus 1</a></li>
	<li><a href="harjoitus2.html">Harjoitus 2</a></li>
	</ul>
	</div><!-- #sidebar loppuu -->


	<!--

	#footer on koko sivun levyinen alatunnista, esimerkiksi tekijä- ja yhteystietoja varten

	-->
	<div id="footer">
	<p>Copyright DK 2011.</p>
	</div><!-- #footer -->
	</div><!-- #page loppuu -->
	</body>
	</html>