Tekstiosa (engl. Text Module)

Abbr - Lyhenne

<abbr>

</abbr>

Abbr-elementillä merkitään lyhenteitä, jotka luetellaan luettelemalla jokainen kirjain erikseen.

<abbr title="World Wide Web">WWW</abbr>
<abbr title="HyperText Transfer Protocol">HTTP</abbr>

Acronym - Kirjainsana

<acronym>

</acronym>

Acronym-elementillä merkitään lyhenteitä, jotka voidaan lausua sanojen tapaan (kirjainsanoja).

<acronym title="North Atlantic Treaty Organisation">NATO</acronym>
<acronym title="Euroopan turvallisuus ja Yhteistyökokous">ETYK</acronym>
<acronym title=" National Aeronautics and Space Administration">NASA</acronym>

Address - Osoite

<address>

</address>

Address-elementti sisältää koko dokumenttiin tai dokumentin osaan liittyvät yhteystiedot. Kaikkiin yhteystietoihin ei pidä käyttää address-elementtiä, vaan sitä käytetään vain dokumenttikohtaisten yhteystietojen kohdalla.

<address>
<a class="url" href="http://hazor.iki.fi/">Tommi Lahtonen</a>
(<a class="url" href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>)
</address>

Blockquote - Kappalelainaus

<blockquote [ cite = URI ]>

</blockquote>

Blockquote-elementti sisältää kappaleen mittaisen lainauksen.

Cite-attribuutti sisältää linkin lainattuun lähteeseen.

<blockquote cite="http://www.malibutelecom.fi/yucca/stand.html">
<p>
Standardi sanan suppeimmassa merkityksessä
eli virallinen standardi on kansainvälisen standardointijärjestön
ISO:n standardiksi vahvistama normi (kansainvälinen standardi)
tai sen jonkin jäsenjärjestön, esimerkiksi SFS:n,
standardiksi vahvistama normi (kansallinen standardi).
World Trade Center Tampa Bayn kansainvälisiä standardeja koskeva aineisto kertoo mm. ISO-standardien saatavuudesta
ja luonnehtii lyhyesti muutamia erityisen tärkeitä standardeja.</p>
</blockquote>

Br - Rivinvaihto

<br />

Br-elementti aiheuttaa tekstissä pakotetun rivinvaihdon.

<address>
Tommi Lahtonen<br />
Tietotekniikan laitos<br />
Jyväskylän yliopisto<br />
PL 35<br />
40351 Jyväskylä<br />
</address>

Cite - Sitaatti

<cite>

</cite>

Cite-elementillä merkitään sitaatteja, kuten lehtien nimiä, laivojen nimiä, viittauksia muihin lähteisiin jne.

<cite>Helsingin sanomat</cite> kirjoittaa lauantaisessa numerossaan ...
Kirjassaan <cite>Tietokannat ja WWW</cite> hän kirjoittaa ...

Code - Ohjelmakoodi

<code>

</code>

Code-elementillä merkitään ohjelmakoodi. Monesti code-elementtiä käytetään yhdessä pre-elementin kanssa.

<pre><code>
CREATE TABLE Tyontekija (
TyontekijaID INTEGER NOT NULL,
Etunimi VARCHAR(32) NOT NULL,
Sukunimi VARCHAR(64) NOT NULL,
Palkka DOUBLE NOT NULL,
Syntymaaika DATE NOT NULL,
Osasto INTEGER NOT NULL
)</code></pre>
<p>Käskyssä on oltava <code>SELECT</code> ja <code>FROM</code>,
muut osat ova valinnaisia. Järjestyksen on oltava sama kuin yllä.</p>

Dfn - Määritelty termi

<dfn>

</dfn>

Dfn-elementillä merkitään termien määrittelyt.

<p>
<dfn><abbr title="Hypertext Markup Language">HTML</abbr> on 
WWW-sivujen rakenteen kuvaamiseen tarkoitettu kieli.</dfn>
</p>

Div - Yleinen kappaletason elementti

<div>

</div>

Div-elementti on yleinen kappaletason elementti, jota käytetään yleensä joko haluttaessa käyttää tiettyjä tyylimäärityksiä tai kieltä ja muuten sopivaa kappaletason elementtiä ei ole käytettävissä.

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

Em - Korostus

<em>

</em>

Em-elementillä merkitään korostusta vaativat asiat.

<p>
Kurssin ensimmäinen tentti järjestetään <em>1.12.2001</em>!
</p>

H1 - Ensimmäisen tason otsikko

<h1>

</h1>

H1-elementti määrittelee ensimmäisen tason otsikon. Yksittäisessä dokumentissa pitäisi olla vain yksi ensimmäisen tason otsikko eli pääotsikko.

<h1>Luennot</h1>
<p>
Tietoverkot työvälineenä -kurssin luentomateriaalit löytyvät tältä sivulta.
</p>

H2 - Toisen tason otsikko

<h2>

</h2>

H2-elementti määrittelee toisen tason otsikon.

<h1>Luennot</h1>
<p>
Tietoverkot työvälineenä -kurssin luentomateriaalit löytyvät tältä sivulta.
</p>
<h2>Luento 1 - XHTML-perusteet</h2>
<p> Ensimmäisellä luennolla tutustutaan XHTML:n perusteisiin. </p>

H3 - Kolmannen tason otsikko

<h3>

</h3>

H3-elementti määrittelee kolmannen tason otsikon.

<h1>Luennot</h1>
<p>
Tietoverkot työvälineenä -kurssin luentomateriaalit löytyvät tältä sivulta.
</p>
<h2>Luento 1 - XHTML-perusteet</h2>
<p> Ensimmäisellä luennolla tutustutaan XHTML:n perusteisiin. </p>
<h3>Mikä on XHTML?</h3>
<p> pälä pälä pälä pälä ... </p>
<p> pälä pälä pälä pälä ... </p>
<h3>XHTML:n tärkeimmät elementit</h3>
<p> pälä pälä pälä pälä ... </p>

H4 - Neljännen tason otsikko

<h4>

</h4>

H4-elementti määrittelee neljännen tason otsikon.

H5 - Viidennen tason otsikko

<h5>

</h5>

H5-elementti määrittelee viidennen tason otsikon.

H6 - Kuudennen tason otsikko

<h6>

</h6>

H6-elementti määrittelee kuudennen tason otsikon.

Kbd - Syötettävä teksti

<kbd>

</kbd>

Kbd-elementillä merkitään tekstit, jotka käyttäjän pitäisi syöttää.

<p>
Seuraavaksi sinun täytyy syöttää <kbd>oma nimesi</kbd>.
</p>

P - Kappale

<p>

</p>

P-elementti määrittelee kappaleen.

<blockquote cite="http://www.useit.com/alertbox/20010805.html">
<p>
Too frequently, I hear about companies basing their designs on user input obtained through misguided methods. A typical example? Create a few alternative designs, show them to a group of users, and ask which one they prefer. Wrong. If the users have not actually tried to use the designs, they'll base their comments on surface features. Such input often contrasts strongly with feedback based on real use.
</p>
<p>
For example: A spinning logo might look pretty cool if you don't need to accomplish anything on the page. Another example is the drop-down menu. Users always love the idea: finally a standard user interface widget that they understand and that stays the same on every page. However, while they offer users a sense of power over the design, drop-down menus often have low usability and either confuse users or lead them to unintended parts of the site.
</p>
<p>
To discover which designs work best, watch users as they attempt to perform tasks with the user interface. This method is so simple that many people overlook it, assuming that there must be something more to usability testing. Of course, there are many ways to watch and many tricks to running an optimal user test or field study. But ultimately, the way to get user data boils down to the basic rules of usability:
</p>
</blockquote>

Pre - Muotoiltu teksti

<pre>

</pre>

Pre-elementti sisältää etukäteen muotoiltua tekstiä, esim. ohjelmakoodia.

<pre><code>@ECHO OFF
REM HELLO.BAT
REM Komentojono tulostaa tekstin Hello World!
ECHO.
ECHO Hello World!
ECHO.
</code></pre>

Q - Lyhyt lainaus

<q [ cite = Lainauksen lähde ]>

</q>

Q-elementti määrittelee lyhyen tekstin seassa sijaitsevan lainauksen.

cite-ominaisuus määrittelee URIn käytettyyn lähteeseen.

<p>
Kuten Jukka Korpelan nyysiopas sanoo:
<q cite="http://www.malibutelecom.fi/yucca/nyysit/3.2.html#hair">
Paras tapa suhtautua spämmäykseen ja muuhun häiriköintiin on
olla välittämättä siitä
</q>.
</p>

Samp - Esimerkki

<samp>

</samp>

Samp-elementillä merkitään ohjelmien esimerkkitulosteita.

<pre><samp>
[tjlahton@valen tietoverkot]$ ls
TMP554.htm index.html linkit.ssi luennot
</samp></pre>

Span - Yleinen merkkitason elementti

<span>

</span>

Span-elementti on yleinen merkkitason elementti. Span-elementillä ei ole rakenteellista merkitystä, mutta sitä voidaan käyttää esimerkiksi tyylilomakkeiden ja kielimääritysten apuna silloin, kun sopivampaa elementtiä ei ole tarjolla.

<blockquote
cite="http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning">
<p>
Once a box has been laid out according to the <span
class="up">normal flow</span>, it may be shifted <span
class="down">relative</span> to this
position. This is called relative positioning. Offsetting a box
<span class="left">(B1)</span> in this way has no effect on
the box <span class="right">(B2)</span> that follows: B2 is given a
position as if B1 were not offset and B2 is not re-positioned after B1's 
offset is applied. <span class="right down">This implies that relative
positioning may cause boxes to overlap.</span>
</p>
</blockquote>

Strong - Vahva korostus

<strong>

</strong>

Strong-elementillä merkitään voimakasta korostusta kaipaavat asiat.

<p>
Harjoitustyön suunnitelma <strong>pitää</strong> hyväksyttää ennen
työn jatkamista!
</p>

Var - Muuttuja

<var>

</var>

Var-elementillä merkitään muuttujia ja ohjelmien parametrejä.

<p>
ls-komennon parametreilla <var>al</var> saa tulostuksen muistuttamaan
DOSista tuttua DIR-komentoa.
</p>

Käyttäjien kommentit

Rakenneosa (engl. Structure Module)

Hypertekstiosa (engl. Hypertext Module)