Usein käytettyjä kappaletasoisia elementtejä

Tässä yhteydessä käymme läpi muutamia edellä mainitsemattomia, mutta usein käytettyjä, kappaletasoisia elementtejä. Kappaletason elementtejä on olemassa monia muitakin ja niitä voi tarkastella tässä yhteydessä. Kaikkien "käytössä olevien" kuvaukset löytyvät W3C:n HTML-suosituksesta osoitteesta: <URL: http://www.w3.org/TR/html4/>.

Navigoinnin ja sisällön erottaminen - Yleinen lohko

div-elementti on monikäyttöinen kappaletason elementti. WWW-sivuja tehtäessämme on usein tarve erottaa jotkin sivun eri osat toisistaan. Tällaiset osat voivat olla esimerkiksi sivuun liittyvän navigoinnin ja sisällön erottaminen. div-elementillä tämä onnistuu helposti, koska div-elementin sisään voi tulla useita kappaletasoisia elementtejä. div-elementillä ei ole varsinaista rakenteellista erityismerkitystä, joten sitä voidaan käyttää muista elementeistä muodostuvien lohkojen tekemiseen. div-elementtiä ei kuitenkaan kannata käyttää tekstikappaleiden tai otsikoiden merkitsemiseen, koska niitä varten on olemassa omat elementtinsä!

Esimerkissä muotoillaan navigointia ja sisältöä erillisinä osina (esim. erilaiset taustavärit jne.), joten ne erotetaan toisistaan div-elementin avulla. Erillisen "navigointilohkon" merkitseminen mahdollistaa myös koko navigoinnin siirtämisen kehyksien tapaisesti sivun oikeaan tai vasempaan laitaan CSS:n avulla. Elementissä on käytetty class-attribuuttia määrittelemään lohkolle oma luokka(nimi), johon viittamalla voimme määritellä lohkolle ominaisuuksia CSS-tiedostossa. Esimerkissä (Kuva 1) CSS-tiedostossa on määritelty lohkolle sisällöstä erottuva taustaväri ja raja.

Div-elementin avulla määriteltyjä lohkoja voidaan muokata CSS:n avulla.

Kuva 11. Erillisen navigoinnin määrittäminen.

<div class="navigointi">
  <ul>
    <li><a href="eka.html">Eka linkki</a></li>
    <li><a href="toka.html">Toka linkki</a></li>
    <li><a href="kolmas.html">Kolmas linkki</a></li>
  </ul>
</div>


<div class="sisalto">
... Tänne tulee sivun varsinainen sisältö ...
</div>

Koodit näkyville - Muotoilematon tekstikappale

pre-elementillä (PREformatted text) voimme määritellä tekstikappaleita, joiden haluamme näkyvän täsmälleen kirjoitusasussaan. Selaimet rivittävät normaalien tekstikappaleiden (p-elementti) tekstin selainikkunaan sopivaksi sekä poistavat ylimääräiset välilyönnit ja rivinvaihdot tekstistä automaattisesti. Usein kuitenkin erilaiset ohjelmakoodit, kuten tämän artikkelin esimerkit, halutaan näkyviin täsmälleen kirjoitusasussaan. Tällöin käytetään p-elementin sijasta pre-elementtiä. pre-elementtiä ei saa koskaan käyttää ulkoasun muotoilemiseen eli esimerkiksi tekstin pakkorivittämisessä!

Esimerkki on poimittu edellisestä luvusta järjestetyn listan esimerkkien yhteydestä. Esimerkissä on ylimääräisiä rivinvaihtoja lista-alkioiden välissä ja muutama sisentävä välilyönti erottamassa lista-alkiot muusta listasta. Esimerkissä halutaan näyttää listan tekevä koodi ja korostaa rakennetta sisennyksin ja rivinvaihdoin. Kannattaa kuitenkin muistaa, että pre-elementtiin tulevia HTML-elementtien koodeja ei näytetä, vaan elementit toimivat kuten muuallakin artikkelissa. Jos HTML-elementit halutaan näkyville, niin pienempi kuin ja suurempi kuin -merkit täytyy koodata erikseen, kuten esimerkissä on tehty.

Muotoilematon teksti näkyy selainikkunassa kirjoistuasussaan rivinvaihtoineen, sarkaimineen ja välilyönteineen.

Kuva 12. Muotoilematon teksti selainikkunassa.

<pre>
&lt;ol&gt;
  &lt;li&gt;Ensimmäinen lista-alkioält;/li&gt;


  &lt;li&gt;Toinen lista-alkio&lt;/li&gt;


  &lt;li&gt;Kolmas lista-alkioält;/li&gt;
&lt;/ol&gt;
</pre>

WWW-sivun tekijän yhteystiedot

WWW-sivun tekijän yhteystiedot voidaan esittää address-elementin avulla. Kuitenkaan kaikkiin dokumentissa oleviin yhteystietoihin ei pidä käyttää address-elementtiä. Esimerkissä on käytetty a-elementtiä tekemään sähköpostiosoitteesta sähköpostinlähetyslinkki. Lisäksi esimerkissä on käytetty br-elementtiä tekemään pakotettu rivinvaihto osoitetietojen sisällä.

<address>
Petri Heinonen
(<a href="mailto:peheinon@mit.jyu.fi">peheinon@mit.jyu.fi</a>)<br />
Avoin yliopisto, Jyväskylän yliopisto
</address>
Osoitetiedot näkyvät graafisessa selainikkunassa hieman kursivoituna.

Kuva 13. Tekijän osoitetietojen näkyminen selaimessa.

Lainauksien merkiseminen

Lainauksien merkitsemiseen on olemassa erilaisia elementtejä.

Esimerkissä on lainattu W3C:n Suomen toimiston raportista katkelma. cite-attribuutilla osoitetaan dokumenttiin, josta lainaus on poimittu. Selain sisentää oletuksena lainattua kappaletta, mutta lainauksen muotoilut voidaan määritellä kokonaan uudenlaisiksi CSS-tyylien avulla.

<blockquote
cite="http://www.w3c.tut.fi/reports/2003/0508wai-intro/index.html">
<p>
Saavutettavuudella (accessibility) tarkoitetaan erilaisten käyttötarpeiden
huomioimista arkisia sovelluksia toteutettaessa. Saavutettavuus poistaa
käytettävyyden esteitä ja lisää käyttömukavuutta. Jos saavutettavuutta
ei oteta erilaisia tuotteita, välineitä ja palveluja suunniteltaessa
riittävästi huomioon, saattaa osa asiallisista käyttäjistä
jäädä jopa kokonaan tavoittamatta.
</p>
</blockquote>
Lainaus esitetään hieman sisennettynä graafisessa selaimessa.

Kuva 14. Kappalelainaus.

Seuraavassa esimerkissä on kyseessä hieman lyhempi lainauksen. cite-elementtiä on käytetty merkitsemään henkilö, jota lainataan ja q-elementillä määritellään varsinaisen lainauksen sisältö. Selain on oletuksena korostanut lainauksen kohdetta ja lisännyt automaattisesti lainausmerkit lainauksen ympärille.

<p>
Kuten <cite>Ossi Nykänen</cite> kirjoittaa artikkelissaan:
<q>Saavutettavuus ei tarkoita tylsää tai pelkkään tekstiin
nojautuvaa sisältöä, tai hölmön näköistä esitystapaa.</q>
</p>
cite-elementin sisältö näytetään graafisessa selaimessa kursivoituna ja lainatun ympärille on lisätty lainausmerkit.

Kuva 15. Lyhyempi lainaus kappaleen sisältä.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index13.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-11-10 10:21:28
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto