Tiedon esittäminen verkkosivuilla

Learning objectives

Tutustut käsitteisiin HTML-dokumentti ja -elementti.
Tutustut HTML-dokumenteissa usein käytettyihin elementteihin.
Opit HTML-sivujen luomisen perusteet.

HTML (Hypertext markup language) on verkkosivujen kuvaamiseen tarkoitettu kieli, jonka avulla määritellään sekä verkkosivujen rakenne että sivujen sisältämä teksti. Tutustutaan seuraavaksi HTML-kieleen.

HTML-dokumentin rakenne

Tarkastellaan alla olevaa HTML-dokumenttia.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Tervetuloa!</h1>
    <p>Tutustumme nyt HTML:n saloihin.</p>
  </body>
</html>

Dokumentti näyttää selaimessa seuraavanlaiselta

Dokumentti koostuu otsakerivistä, elementeistä ja tekstistä. Otsakerivi <!DOCTYPE html> kertoo, että kyse on HTML-dokumentista. Elementit ovat pienempi kuin < -merkillä avattavia ja suurempi kuin > -merkillä suljettavia dokumentin osia.

HTML-dokumentin sisältö jaetaan otsakkeeseen (head) ja runkoon (body). Otsake sisältää HTML-dokumenttiin liittyviä asioita, joita ei näytetä sivuna, mutta jotka saattavat vaikuttaa selaimen toimintaan. Esimerkiksi otsakkeen sisällä olevaan title-elementtiin voidaan määritellä sivun otsikko, joka näkyy selaimen palkissa sivun ollessa auki.

Runko sisältää selaimessa näkyvää tietoa. Runko voi koostua yhdestä tai useammasta elementistä, jotka voivat sisältää elementtejä tai tekstiä. Yllä olevassa esimerkissä runko sisältää sivun pääotsikon määrittelevän elementin h1 sekä tekstiä sisältävän elementin p.

Kukin elementti avaan alueen, joka tulee myös sulkea. Esimerkiksi otsakkeen title-elementti avataan kirjoittamalla <title>, jota seuraa elementin sisältö, ja suljetaan kirjoittamalla </title>. Muut elementit noudattavat samaa säännöstöä -- elementti avataan kirjoittamalla <elementti> ja suljetaan kirjoittamalla </elementti>. Kunkin elementin sisälle voidaan asettaa muita elementtejä tai tekstiä.

HTML-dokumentti visuaalisesti tarkasteltuna

HTML-dokumenttia voi ajatella juuresta kattoon ripustettuna puuna, missä juurena on html-elementti, jolla on kaksi haaraa: otsake eli head ja runko eli body. Kumpikin näistä voi haarautua edelleen.

Alla on esimerkkinä aiemmin käsitelty HTML-dokumentti sekä sitä vastaava puumuotoinen esitys.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Tervetuloa!</h1>
    <p>Tutustumme nyt HTML:n saloihin.</p>
  </body>
</html>

Rungossa (body) on kaksi elementtiä (h1 ja title), joista kumpikin sisältää tekstiä. Sekä otsakkeessa että rungossa oleva puu voi haarautua edelleen. Alla olevassa esimerkissä käytetään section-elementtiä sivulla olevan osan esittämiseen. Elementin section sisällä on kaksi tekstielementtiä p sekä niiden sisältämät tekstit.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Tervetuloa!</h1>
    <section>
      <p>Ensimmäinen tekstikappale</p>
      <p>Toinen tekstikappale</p>
    </section>
  </body>
</html>

Question not found or loading of the question is still in progress.

HTML-dokumentit tällä kurssilla

Kurssilla käytetään selaimessa toimivaa ohjelmointiympäristöä, johon voi määritellä ohjelmakoodia, HTML-dokumentin ja tyylejä. Ohjelmakoodi tulee ohjelmointiympäristössä välilehdelle Dart, HTML-dokumentti välilehdelle HTML, ja tyyli välilehdelle CSS.

Käsittelemme, kunnes toisin todetaan, vain dokumentin runkoja. Tehtävien HTML-välilehdelle tulee kirjoittaa siis vain HTML-dokumentin runkoon (body) tuleva sisältö.

Alla on kurssin ensimmäiset ohjelmointitehtävät. Klikkaa ensimmäinen tehtävä auki. Kun valitset välilehden HTML, löydät HTML-dokumentin sisällön. Painamalla nappia Run näet miltä sivu näyttää selaimessa.

HTML-elementtejä

Tärkeimmät HTML-dokumenttien elementit tiedon välittämisen kannalta ovat eri kokoiset otsikot (h = heading) ja tekstikappaleiden kuvaamiseen käytetyt tekstielementit (p = paragraph). Tutustutaan näihin seuraavaksi.

Otsikot

Otsikkoelementtejä on kuusi: <h1>, <h2>, <h3>, <h4>, <h5> ja<h6>. Otsikkoelementin h tulee sanasta heading ja numero kuvaa otsikon tärkeyttä: mitä pienempi numero, sitä tärkeämpi otsikko.

Alla olevassa HTML-dokumentissa on kuvattuna jokainen otsikkoelementti. Dokumenttia seuraa sivu, joka näyttää miltä dokumentti konkreettisesti selaimessa näyttää.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>h1 - pääotsikko</h1>
    <h2>h2 - aliotsikko</h2>
    <h3>h3 - h2:n aliotsikko</h3>
    <h4>h4 - h3:n aliotsikko</h4>
    <h5>h5 - h4:n aliotsikko</h5>
    <h6>h6 - h5:n aliotsikko</h6>
  </body>
</html>

Kullakin sivulla tulee olla sivun ymmärrettävyyden ja käytettävyyden takia korkeintaan yksi pääotsikko (h1). Aliotsikot tulee merkitä pääotsikoiden alle ja niiden tulee olla loogisessa järjestyksessä. Esimerkiksi alla oleva sivu on rakenteensa kannalta ymmärrettävä.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>h1 - pääotsikko</h1>
    <h2>h2 - aliotsikko</h2>
    <h2>h2 - toinen aliotsikko</h2>
    <h3>h3 - toisen aliotsikon aliotsikko</h3>
    <h2>h2 - kolmas aliotsikko</h2>
  </body>
</html>

Ymmärrettävyys muodostuu siitä, että elementit ovat loogisessa järjestyksessä. Elementti h1 eli pääotsikko tulee ensin, jonka jälkeen tulee elementti h2. Näiden alle voi tulla tärkeydeltään pienempiä elementtejä -- elementistä h2 ei kuitenkaan tule hypätä suoraan esimerkiksi elementtiin h6.

Alla oleva esimerkki ei ole rakenteensa kannalta kovin ymmärrettävä. Sivu alkaa aliotsikolla, jota seuraa pääotsikko. Tätä seuraa taas aliotsikko h2, jonka alla on aliotsikko h5 -- mikäli aliotsikon h2 alle haluaa aliotsikon, tulisi se merkitä elementillä h3.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h2>h2 - aliotsikko</h2>
    <h1>h1 - pääotsikko aliotsikon alla!</h1>
    <h2>h2 - toinen aliotsikko</h2>
    <h5>h5 - h3 olisi tässä parempi</h5>
  </body>
</html>

Tekstin lisääminen sivulle

Tekstin lisääminen HTML-dokumenttiin tapahtuu p-elementin avulla. Merkki p tulee sanasta paragraph, joka tarkoittaa tekstikappaletta.

Alla olevassa HTML-dokumentissa on useita tekstikappaleita, joiden sisällä on tekstiä. Tekstikappaleet on asetettu otsikkoelementtien alle.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Tervetuloa! Tämä on pääotsikko.</h1>

    <p>Tässä on tekstikappale (paragraph).
    Tekstikappale sisältää nimensä mukaisesti
    tekstiä.</p>

    <p>Tekstikappaleita voi olla peräkkäin useita.
    Ruudulta katsottuna erillisten tekstikappaleiden
    välillä on tyhjä rivi.</p>

    <p>Sitä, miltä tekstikappaleet näyttävät, voidaan
    muokata. Tutustumme sivujen tyylittelyyn
    myöhemmin.</p>

    <h2>Aliotsikko</h2>

    <p>Aliotsikoiden alle kirjoitetaan tekstiä aivan
    samalla tavalla kuin pääotsikoiden alle.</p>

  </body>
</html>

Tekstin korostaminen

Tekstiä kirjoittaessa voidaan kohdata tilanteita, missä jokin osa tekstistä on tärkempää kuin muu. Tärkeät osat voidaan korostaa, jolloin ne nousevat tekstistä esiin. Tekstin korostamiseen käytetään pääosin lihavointia ja kursivointia.

Tekstin lihavointi onnistuu <strong>-elementillä. Elementti <strong> asetetaan tekstielementin <p> sisään lihavoitavan tekstin ympärille.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Tervetuloa!</h1>
    <p>Tärkeät asiat <strong>voi korostaa</strong>!</p>
  </body>
</html>

Tekstin kursivointi taas onnistuu <em>-elementillä. Aivan kuten <strong>-elementti, <em>-elementti asetetaan tekstielementin sisään kursivoitavan tekstin ympärille.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Tervetuloa!</h1>
    <p>Tärkeät asiat <em>voi korostaa</em>!</p>
  </body>
</html>

Yleensä ottaen tekstissä kannattaa käyttää korostuskeinoja yhdenmukaisesti, jolloin lukija oppii minkälaisia asioita korostetaan. Samalla on kuitenkin hyvä pitää mielessä, että korostusta ei kannata käyttää liikaa, jotta tekstin lukemiskokemus pysyy miellyttävänä.

Listaelementit

Sivuille voi lisätä listoja ol (numeroitu lista, ordered list) ja ul (numeroimaton lista, unordered list) -elementtien avulla.

Listan määrittely aloitetaan ol tai ul-elementillä, riippuen kumman listatyypin haluaa käyttöönsä. Listan määrittelevän elementin sisälle lisätään yksittäisiä asioita li (list item)-elementtiä käyttäen. Yksittäiset listaelementit voivat sisältää tekstiä tai muita elementtejä.

Alla olevassa esimerkissä on luotu HTML-sivu, joka sisältää numeroidun listan. Listalla on kolme asiaa: asia 1, asia 2, ja asia 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Sivun otsikko</h1>
    <p>Normaalia tekstiä.</p>
    <ol>
      <li>asia 1</li>
      <li>asia 2</li>
      <li>asia 3</li>
    </ol>
  </body>
</html>

Taulukot

Taulukkojen luominen tapahtuu <table>-elementillä. Taulukon rivit kuvataan <tr>-elementillä (table row), jonka sisälle tulee taulukon soluja kuvaavat <td>-elementit (table data). Alla olevassa esimerkissä on taulukko, jossa on neljä riviä ja kaksi saraketta -- sarakkeet luodaan rivien sisällä solujen avulla.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Sivun otsikko</h1>

    <p>Normaalia tekstiä.</p>

    <table>
      <tr>
        <td>Elementti</td>
        <td>Kuvaus</td>
      </tr>
      <tr>
        <td>table</td>
        <td>Taulukon luominen.</td>
      </tr>
      <tr>
        <td>tr</td>
        <td>Taulukon rivin luominen.</td>
      </tr>
      <tr>
        <td>td</td>
        <td>Taulukon solun luominen.</td>
      </tr>
    </table>
  </body>
</html>

Mikäli taulukossa olevia arvoja haluaa korostaa, voidaan <td> elementin sijaan käyttää <th>-elementtiä (table heading). Tämä on hyödyllinen esimerkiksi otsakerivien merkitsemisessä.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <h1>Sivun otsikko</h1>

    <p>Normaalia tekstiä.</p>

    <table>
      <tr>
        <th>Elementti</th>
        <th>Kuvaus</th>
      </tr>
      <tr>
        <td>table</td>
        <td>Taulukon luominen.</td>
      </tr>
      <tr>
        <td>tr</td>
        <td>Taulukon rivin luominen.</td>
      </tr>
      <tr>
        <td>td</td>
        <td>Taulukon solun luominen.</td>
      </tr>
    </table>
  </body>
</html>

Kuvat

Kuvien näyttäminen tapahtuu <img>-elementin avulla. Elementille määritellään kuvan osoite -- eli paikka mistä kuva ladataan -- sille annettavalla src-attribuutilla. Kuvan tekstuaalinen kuvaus annetaan kuvalle alt-attribuutilla.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>
    <img src="kuvan osoite" alt="kuvan tekstimuotoinen kuvaus"></img>
  </body>
</html>

Kuvan osoitteella tarkoitetaan kuvan sijaintia verkossa. Kun selain löytää HTML-dokumentista img-elementin, se tekee kuvan src-attribuutin määrittelemään osoitteeseen pyynnön ja hakee sieltä kuvan. Yllä olevalle sivulle määriteltyä kuvaa ei löydy. Tällöin kuvan paikalla näkyy alt-attribuutin arvo sekä rikkinäistä kuvaa kuvastava ikoni.

Attribuutin alt tarkoitus on parantaa sivun saavutettavuutta. Sitä käytetään kuvan sisällön kuvailemiseen tekstimuodossa. Mikäli käyttäjän selain ei mahdollista kuvan näyttämistä tai käyttäjä ei muuten näe kuvaa, voi käyttäjä saada alt-attribuutin avulla selville kuvan sisällön kuvatekstistä.

Kuvien lisääminen verkkoon vaatii palvelimen, jolla kuvat sijaitsevat. Tarkastellaan tätä tarkemmin kun tutustumme verkkosivujen nettiin siirtämiseen.

Lomakkeet sivuilla

Lomakkeita käytetään tiedon syöttämiseen ja tiedon lähettämiseen. Alla olevassa esimerkissä on kuvattuna yksinkertainen lomake, johon voidaan syöttää nimi.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>

    <form>
      <label for="nimi">Nimi: </label>
      <input type="text" id="nimi" name="nimi"></input>
    </form>

  </body>
</html>

Lomakkeen määrittely tapahtuu <form>-elementillä, jonka sisälle määritellään lomakkeeseen kuuluvia elementtejä. Elementtiä <label> käytetään lomakkeessa olevaan kenttään viittaamiseen sekä siihen liittyvän kuvaustekstin asettamiseen. Elementin <label> for-attribuutilla kerrotaan mihin lomakkeen kenttään kuvausteksti liittyy.

Elementti <input> mahdollistaa tiedon syöttämisen. Sille annetaan type-attribuuttina syötettävän tiedon tyyppi (usein text), jonka lisäksi id ja name -attribuuteille määritellään kentän nimi, johon label-elementin attribuutin for-arvo viittaa.

Muita usein käytettyjä tyyppejä ovat button eli nappi ja checkbox eli valintaruutu. Alla olevassa esimerkissä käytetään edellä mainittujen elementtien lisäksi <br>-elementtiä, jota käytetään rivinvaihtojen lisäämiseen.

<!DOCTYPE html>
<html>
  <head>
    <title>Otsikko</title>
  </head>
  <body>

    <form>
      <label for="nimi">Nimi: </label>
      <input type="text" id="nimi" name="nimi"></input>
      <br></br>
      <label for="arvonta">Ilmoittaudun arvontaan:</label>
      <input type="checkbox" id="arvonta" name="arvonta"></input>
      <br></br>
      <input type="button" value="Lähetä!"></input>
    </form>

  </body>
</html>

Lomakkeen täyttäminen tai siinä olevien nappien tai valintaruutujen painaminen ei kuitenkaan vielä tee mitään. Otamme seuraavassa osassa ensiaskeleet dynaamisen toiminnallisuuden lisäämiseen.

Hi! Please help us improve the course!

Please consider the following statements and questions regarding this part of the course. We use your answers for improving the course.

I can see how the assignments and materials fit in with what I am supposed to learn.

I find most of what I learned so far interesting.

I am certain that I can learn the taught skills and knowledge.

I find that I would benefit from having explicit deadlines.

I feel overwhelmed by the amount of work.

I try out the examples outlined in the materials.

I feel that the assignments are too difficult.

I feel that I've been systematic and organized in my studying.

How many hours (estimated with a precision of half an hour) did you spend reading the material and completing the assignments for this part? (use a dot as the decimal separator, e.g 8.5)

Time spent studying

How would you improve the material or assignments?