Usein käytettyjä kappaletasoisia elementtejä
- Navigoinnin ja sisällön erottaminen - Yleinen lohko
- Koodit näkyville - Muotoilematon tekstikappale
- WWW-sivun tekijän yhteystiedot
- Lainauksien merkiseminen
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 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.
<pre> <ol> <li>Ensimmäinen lista-alkioält;/li> <li>Toinen lista-alkio</li> <li>Kolmas lista-alkioält;/li> </ol> </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>
Lainauksien merkiseminen
Lainauksien merkitsemiseen on olemassa erilaisia elementtejä.
blockquote
-elementillä voidaan merkitä koko kappaleen mittaisia lainauksia.cite-
attribuutti sisältää linkin lainattuun lähteeseen.
q
-elementti määrittelee lyhyen, tekstin seassa sijaitsevan lainauksen. Kyseessä on merkkitason elementti, jonka täytyy sijaita esimerkiksi tekstikappaleen sisällä.cite
-elementillä merkitään sitaattien lähteitä, kuten esimerkiksi henkilöiden tai lehtien nimiä, jne. Kyseessä on merkkitason elementti, jonka täytyy sijaita esimerkiksi tekstikappaleen sisällä.
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>
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>
Käyttäjien kommentit