<h1>Ensimmäisen tason otsikko</h1> <h2>Toisen Tason otsikko</h2>
<p> Tämä on tekstikappale </p> <p> Tämä on tekstikappale </p>
<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> <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>
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.
<p> <img src="kuva.jpg" alt="Kaaviokuva tietotekniikan opiskelijamäärien kasvusta" /> </p>
summary-parametrilla. Reunukset voidaan määritellä
border-parametrilla.| 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ä" border="1"> <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>
<p> Tässä on pitkä kappale tekstiä jossa jotkin sanat ovat <em>tärkeitä</em>, toiset sanat ovat <strong>erittäin tärkeitä</strong> ja joidenkin sanojen merkitystä <small>vähätellään</small>. </p>
<ul> <li><a href="#juttu">Otsikko, johon on määritelty ankkuri</a></li> </ul <h2><a name="juttu">Tähän otsikkoon on määritelty ankkuri</a></h2> <p> Tästä asiasta kerrotaan tarkemmin <a href="http://www.useit.com/jakob/">Jakob Nielsenin</a> artikkelissa. </p>
<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>)
<URL:<a href="http://www.iki.fi/hazor/">http://www.iki.fi/hazor/</a>>
</address><p>Jakob Nielsen kirjoittaa artikkelissaan <cite><a href="http://www.useit.com/alertbox/991114.html">When Bad Design Elements Become the
Standard</a></cite>
<blockquote cite="http://www.useit.com/alertbox/991114.html">
<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.
<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>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>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.
</ul>
</blockquote><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>
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
</dl>
<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><abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Hypertext Markup Language">HTML</abbr><acronym title="American National Standards Institute">ANSI</acronym>
<acronym title="Common Object Request Broker Architecture">CORBA</acronym><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>
<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" /><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" />Luennolla tehty esimerkki. Sama esimerkki pelkkänä HTML-koodina.