Lohkotason elementit

by Tanja Tuulikki Välisalo — last modified Nov 14, 2014 02:59 PM

Otsikot, kappaleet, listat, taulukot

Lohkotason elementit määrittelevät dokumentin eri osien välisen hierarkian. Lohkotason elementtien sisällä voi olla sekä toisia lohkotason elementtejä että tekstitason elementtejä.

Tutustu tavallisimpiin lohkotason elementteihin seuraavan taulukon avulla:

Elementti	Nimitys	Toiminto	Huomioitavaa
OTSIKOT
<h1>	Pääotsikko (heading 1)	Ensimmäisen tason otsikko	Käytä järjestyksessä!
<h2>	Alaotsikko (heading 2)	Toisen tason otsikko	Käytä järjestyksessä!
<h3>...<h6>	Alaotsikko (heading 3 – heading 6)	Kolmannen – kuudennen tason otsikko	Käytä järjestyksessä!
TEKSTIKAPPALEET
<p>	Tekstikappale (paragraph)
<pre>	Esimuotoiltu teksti (preformatted)	Lähdekoodin rivinvaihdot ja ylimääräiset välilyönnit näkyvät tekstissä
<blockquote>	Lohkotason lainaus	Tekstilainauksen merkitseminen	Voi sisältää useitakin tekstikappaleita.
OSIIN JAKAVAT
<hr>	Vaakaviiva (horizontal rule)	Eri osioita jakava vaakaviiva
<div>	Yleinen lohko (division)	Rajaa alueen, jolle määritellään yhteinen ulkoasu	Sisältää suurempia osia dokumentista, esim. useita tekstikappaleita
LISTAT
<ul>	Järjestämätön lista (unordered list)	Lista, jonka alkioiden edessä on listamerkit	Esim. HuK-tutkinnon sisältö <ul> <li>musiikkitiede</li> <li>puheviestintä</li> <li>psykologia</li> </ul>
<ol>	Järjestetty lista (ordered list)	Lista, jonka alkiot on numeroitu
<li>	Lista-alkio (list item)	Järjestetyn tai järjestämättömän listan alkio	Lista-alkion sisään voi luoda sisäkkäisen listan.
<dl>	Määritelmälista (definition list)	Lista, jonka alkioilla on määritelmät; määritelmät näyttäytyvät sisennettyinä suhteessa alkioihin	Esim. ruokalista <dl> <dt>Ellun kana</dt> <dd>kanafilee pestokuorrutteella, talon salaatti, lohkoperunat</dd> <dt>Talon jälkiherkku</dt> <dd>vaniljajäätelö, mansikat, suklaavaahto</dd> </dl>
<dt>	Määritelmä-listan alkio (definition term)
<dd>	Määritelmälistan alkion määritelmä (definition description)
TAULUKKO
<table>	Taulukko (table)		Esim. <table summary=”vuodenajat”> <tr> <td>kevät</td> <td>kesä</td> <td>syksy</td> <td>talvi</td> <tr/> </table>
<tr>	Taulukon rivi (table row)
<td>	Taulukon solu (table data cell)		Taulukon solun sisään voi luoda sisäkkäisen taulukon.
<th>	Taulukon otsikkosolu (table header)

Otsikot ja tekstikappaleet

Kaikki tekstisisältö luodaan body-elementin sisään. Esim. otsikko lisättäisiin dokumenttiin näin:

<body>
  <h1>Virustorjuntasivusto</h1>
</body>

Huom! Yllä olevassa esimerkissä on esillä html-tiedoston runkokoodista vain body-elementti, mutta sen lisäksi tiedostossa on runsaasti muutakin koodia, joka on tässä jätetty pois tilansäästösyistä.

Otsikkotyylejä käytetään hierarkkisessa järjestyksessä:

pääotsikoiden elementti on h1
alaotsikoiden elementti on h2
alaotsikoiden alaotsikoiden elementti on h3

Vinkki! Koodia on helpompi ymmärtää, kun elementtien hierarkia näkyy myös koodissa. Yllä olevassa esimerkissä body-elementin sisällä oleva h1-elementti on sisennetty. Saat koodin hierarkian näkyviin käyttämällä HTML-Kitissä käyttämällä koodin siistimiseen tarkoitettua työkalua.

Jokainen tekstikappale merkitään omalla p-elementillään. Tekstikappaleen alussa on aloituselementti <p> ja lopussa loputuselementti </p>. Esim. alla olevassa esimerkissä on yksi otsikko ja kaksi tekstikappaletta.

<body>
  <h1>Virustorjuntasivusto</h1>
  <p>Tämä sivusto kertoo, miten viruksilta ja haittaohjelmilta voi välttyä. Tarjolla on paljon käytännön vinkkejä.</p>
  <p>Mitkä ovat yleisimpiä viruksia? Tässä on lista viruksista ja niiden leviämistavoista:</p>
</body>

Tehtävä

Lisää html-tiedostoosi otsikko (h1), esim. Harjoitussivusto.
Lisää html-tiedostoosi seuraavaksi lyhyt tekstikappale (p), jossa kerrotaan sivuston käyttötarkoitus.
Katsele tiedostoa verkkoselaimessa avaamalla verkkoselain (esim. Internet Explorer tai Mozilla Firefox) ja avaamalla juuri tallentamasi tiedosto siellä Tiedosto | Avaa (File | Open) tai näppäinyhdistelmällä Ctrl + 0. Jätä tiedosto auki verkkoselaimessa.

Listat

Listan tekemiseen tarvitaan aina kahta elementtiä: joko elementtiä ol tai ul, joka määrittää listaan kuuluvan tekstin ja elementtiä li, joka määrittää yhden listan kohdan. Listat voivat olla järjestettyjä tai järjestämättömiä.

Järjestämätön lista

Järjestämätön lista tarkoittaa listaa, jonka luettelomerkkeinä käytetään palloja (oletus), ranskalaisia viivoja tms., ei siis numeroita. Silloin ulompana elementtinä on ul (unordered list).

Esimerkki järjestämättömästä listasta:

<ul>
  <li>Musiikkitiede</li>
  <li>Psykologia</li>
  <li>Tilastotiede</li>
</ul>

Järjestetty lista

Järjestetyssä listassa luettelomerkkeinä käytetään numeroita (oletus), aakkosia tai vaikkapa roomalaisia numeroita eli merkkejä, jotka määrittävät listan kohtien keskinäisen järjestyksen. Uloimpana elementtinä on ol (ordered list).

Esimerkki järjestetystä listasta:

<ol>
  <li>Musiikkitiede</li>
  <li>Psykologia</li>
  <li>Tilastotiede</li>
</ol>

Sisäkkäiset listat

Joskus on tarve käyttää listassa useampia tasoja. Tällöin puhutaan sisäkkäisistä listoista.

Kun listassa on useampia tasoja eli sisäkkäisiä listoja, niin jonkin li-elementin sisällä on kokonaan uusi lista.

Esim. Alla on listana erään opiskelijan suoritettuja opintoja sekä selain- että html-näkymässä.

Musiikkitiede
- perusopinnot
- aineopinnot
Psykologia

perusopinnot

Tilastotiede

perusopinnot

<ul>
  <li>Musiikkitiede
    <ul>
      <li>perusopinnot</li>
      <li>aineopinnot</li>
    </ul>
  </li>
  <li>Psykologia
    <ul>
      <li>perusopinnot</li>
    </ul>
  </li>
  <li>Tilastotiede
    <ul>
      <li>perusopinnot</li>
    </ul>
  </li>
</ul>

Esim. Saman voi tehdä myös käyttäen järjestettyä listaa ol tai vaikkapa eri listatyyppejä sekaisin. Huomaatko, millä kahdella rivillä seuraava esimerkkikoodi eroaa edellisestä esimerkistä?

Musiikkitiede
- perusopinnot
- aineopinnot
Psykologia
- perusopinnot
Tilastotiede
- perusopinnot

<ol>
  <li>Musiikkitiede
    <ul>
      <li>perusopinnot</li>
      <li>aineopinnot</li>
    </ul>
  </li>
  <li>Psykologia
    <ul>
      <li>perusopinnot</li>
    </ul>
  </li>
  <li>Tilastotiede
    <ul>
      <li>perusopinnot</li>
    </ul>
  </li>
</ol>

Listaan voi luoda samalla tavalla loputtomasti tasoja!

Määritelmälista

Nimensä mukaisesti määritelmälistaa käytetään sellaisten listojen luomiseen, joissa listan kohdilla on määritelmiä. Määritelmälista eroaakin järjestetystä tai järjestämättömästä listasta useammallakin tavalla:

Määritelmälistassa on aina vähintään kaksi tasoa
Määritelmälistassa ei oletusarvoisesti ole listamerkkejä

Määritelmälistassa on kokonaan omat listaelementtinsä: määritelmälista dl (definition list), lista-alkio dt, (definition term) ja dd (definition description).

Esim. Määritelmälista voi olla vaikkapa tällainen:

perusopinnot
25 op:n kokonaisuus
aineopinnot
30 op:n kokonaisuus

<dl>
  <dt>perusopinnot</dt>
      <dd>25 op:n kokonaisuus</dd>
  <dt>aineopinnot</dt>
      <dd>30 op:n kokonaisuus</dd>
</dl>

Tehtävä

Luo sivun alkuu otsikon alle järjestämätön lista (unordered list), jonka kohtina ovat Etusivu, Virusinfo ja Galleria. Käytä ul- ja li-elementtejä (ks. esimerkki yllä olevasta taulukosta).
Tallenna.
Siirry verkkoselaimeen, jossa sinulla on jo avoinna luomasi verkkosivu. Päivitä selainnäkymä vastaamaan sivun nykyistä versiota joko Virkistä (Refresh) tai Reload-painikkeella (yleensä selaimen osoiterivin vieressä) tai näppäinyhdistelmällä Ctrl + R. Nyt sinulla on selainnäkymässä lista, pääotsikko ja tekstikappale.

Harjoitus: Valmiin tekstin rakenteen merkitseminen

Harjoitellaan edellä käyttöön otettujen lohkotason elementtien käyttöä ja luodaan tätä varten uusi verkkosivu.

Luo uusi html-dokumentti tallentamalla tiedosto index.html uudella nimellä virusinfo.html. Näin metatiedot ja sivun alkuun tulevaa navigaatiokäyttöä varten luotu lista ovat uudessa dokumentissa jo valmiina.
Poista sivulta navigaatiolistan jälkeen luomasi tekstisisältö.
Mene WWW-selaimessa osoitteeseen http://users.jyu.fi/~tatjana/htkp315/. Avaa siellä tiedosto virusinfo.txt. Jos tiedosto ei aukea, vaihda selainta tai tallenna teksti ensin koneellesi. Kopioi tekstisisältö ja tuo se uuden dokumentin body-elementin sisällöksi eli body-aloituselementin ja body-lopetuselementin väliin. Tallenna.
Tarkastele esikatselussa, miltä dokumentti näyttäisi WWW-selaimessa ilman minkäänlaista rakenteen määrittelyä.

Merkitään dokumentin rakenne lohkotason elementeillä.

Merkitse dokumentin pääotsikko elementillä h1.
Määrittele seuraavaksi dokumentin alaotsikko h2-elementillä.

Merkitse seuraavaksi tekstin joukossa olevat listat. Tässä yhteydessä hyödyllisin vaihtoehto on järjestämätön lista (unordered list) ja elementit ul ja li.

Tallenna ja esikatsele. Poista listoista *-merkit. Niitä et enää tarvitse, sillä merkitsemällä tekstin lista-alkioksi annoit sille automaattisesti ilmestyvän listamerkin.
Määrittele tekstin joukossa olevat tekstikappaleet elementillä p.

Listoja on dokumentissa kaikkiaan kolme. Viimeisen osalta koodin pitäisi olla jotain tällaista:

<ul>
  <li>Hoaxit ovat sähköpostihuhuja ja -huijausvaroituksia, jotka eivät ole totta, 
  mutta joita ihmiset lähettävät helposti edelleen.</li>
  <li>Spam on roskapostia, jota sähköpostilaatikko tulee pullolleen koko ajan.</li>
</ul>

Nyt kaikki teksti pitäisi olla suljettuna elementtien sisälle. Tarkista vielä, ettei body-elementin sisällä ole ”irrallista” tekstiä.

Taulukko

Taulukot rakennetaan koodissa aina rivi kerrallaan ylhäältä alaspäin. Jokaisen rivin sisällä puolestaan määritellään solut yksi kerrallaan vasemmalta oikealle.

Taulukon luomisessa tarvitaankin useita eri elementtejä: taulukko table, taulukon rivi tr (table row) ja taulukon solu td (table data cell). Elementin table yhteydessä on aina käytettävä attribuuttia summary, jonka arvona on lyhyt kuvaus taulukon sisällöstä. Tämä kuvaus ei tule näkyviin selainnäkymässä, mutta antaa esimerkiksi ruudunlukuohjelmalla verkkosivuja käyttäville lisätietoja.

Taulukkoon liittyviä elementtejä on muitakin, esim. taulukon otsikkosolu th (table header cell), jolla voidaan tarvittaessa erottaa otsikkosolut ”tavallisista” soluista.

Esimerkki. Seuraavassa on esimerkki yksinkertaisesta taulukosta ja sen luomiseksi tarvittavasta koodista:

Päivä	Harrastus
Ma	Sähly
Ke	Jooga

<table summary=”lukujärjestys”>
<tr>
    <th>Päivä</th>
    <th>Harrastus</th>
</tr>
<tr>
    <td>Ma</td>
    <td>Sähly</td>
</tr>
<tr>
    <td>Ke</td>
    <td>Jooga</td>
</tr>
</table>

Tehtävä

Luo dokumenttiin virusinfo.html taulukko virustyypeistä ja niiden leviämistavoista. Voit poimia tiedot sivun ensimmäisestä listasta. Taulukosta tulee jotain tämän tapaista:

Virus	Leviämistapa
Sovellusohjelmavirukset eli makrovirukset	sovellusohjelmatiedostojen mukana
Tiedostovirukset	ohjelmatiedostojen mukana
Levykevirukset eli käynnistyslohkovirukset	levykkeiden välityksellä --> käytännössä kadonnut virustyyppi

Vie kursori sivun ensimmäisen listan ja sitä edeltävän tekstikappaleen väliin. Luot taulukon tähän.
Valitse ohjelmaikkunan yläreunasta välilehti Tables ja valitse sen ensimmäistä painike. Tämä luo valmiiksi taulukon, jossa on yksi rivi ja siinä yksi solu.
Anna taulukkoelementin table attribuutille summary arvoksi lyhyt kuvaus taulukon sisällöstä, esim. Virustyypit. Tämä ei tule näkyviin selainnäkymässä
Lisää taulukon rivin sisälle vielä toinen solu. Voit käyttää sen luomiseen Tables-välilehdeltä löytyvää painiketta.
Poimi soluihin vielä sisältöä tekstistä. Koodi näyttää nyt suunnilleen tältä:

<table summary="Virustyypit">
  <tr>
    <td>Sovellusohjelmavirukset eli makrovirukset</td>
    <td>sovellusohjelmatiedostojen mukana</td>
  </tr>
</table>

Huomaa, että taulukossa ei vielä näy kehyksiä (selaimesta riippuen). Ne määritellään myöhemmin CSS-tyylikielellä.

Lisää taulukkoon vielä kaksi riviä, joissa on molemmissa kaksi solua. Luo uusille soluille aiheen mukaista sisältöä.
Lisää vielä taulukon alkuun yksi rivi ja sinne solujen td sijaan otsikkosolut th, ja anna niille kuvaavat nimet. Virus ja Leviämistapa.
Tallenna ja tarkastele dokumenttia esikatselunäkymässä tai WWW-selaimessa.

Materiaalin on laatinut Tanja Välisalo.