HTML5-perusteet

Näissä tehtävissä tutustutaan yleisimpiin HTML5-elementteihin ja niiden käyttämiseen www-dokumenteissa. Lisäksi kokeillaan, miten tyylitiedostoilla voi muuttaa dokumentin ulkoasua. Tehtävät voi tehdä millä tahansa tekstieditorilla, suositus on Visual Studio Code.

• Elementit esimerkkeineen: HTML5-luento ja erillinen elementtiluettelo.
• Malliratkaisu ZIP-paketissa. Kokeile ensin itse.

1. Alkuvalmistelut

Agoran mikroluokissa Visual Studio Code on valmiiksi asennettu. Jos teet tehtäviä kotikoneella, asenna Visual Studio Code. Selaimeksi käy mikä tahansa; suositus on Firefox.

1.1 Web Developer -työkalupalkki

Asenna selaimeesi Web Developer -laajennus. Se kokoaa yhteen valikkoon joukon sivujen tutkimiseen tarkoitettuja työkaluja, joista tässä ohjauksessa käytetään validointia.

• Web Developer Firefoxiin
• Web Developer Chromeen

1. Mene laajennuksen asennussivulle ja napauta Lisää Firefoxiin (Add to Firefox).
2. Hyväksy asennus esiin tulevasta ikkunasta.
3. Työkalupalkkiin ilmestyy uusi kuvake, jonka takaa työkalut löytyvät. Jos kuvake ei näy, avaa selaimen laajennusvalikko ja kiinnitä se palkkiin.

1.2 Tarkista kaksi asetusta

Kun avaat tiedoston VS Codessa, katso ikkunan oikeaa alareunaa. Siellä lukee tiedoston merkistö ja rivinvaihtotapa. Molempia voi vaihtaa napsauttamalla.

1.3 Näin validoit dokumentin

Validointi tarkoittaa sen tarkistamista, että dokumentti noudattaa HTML5:n sääntöjä. Tarkistuksen tekee aina W3C:n validaattori, mutta sinne saa dokumentin kahta reittiä.

Tapa 1: Web Developer -työkalupalkki

Tämä on nopein tapa, kun sivu on jo auki selaimessa. Avaa Web Developer -valikko ja valitse:

Koska Validate Local HTML lähettää itse lähdekoodin, voit validoida sivusi heti kun olet tallentanut sen editorissa ja päivittänyt selaimen. Sivua ei tarvitse viedä palvelimelle ensin.

Tapa 2: validaattorin oma sivu

Laajennusta ei ole pakko käyttää. Osoitteessa validator.w3.org/nu on kolme syöttötapaa:

Kun saat virheilmoituksia, korjaa yksi virhe kerrallaan ja aloita ensimmäisestä. Yksi puuttuva lopetustagi tuottaa helposti kymmenen seurannaisvirhettä, jotka katoavat kaikki yhdellä korjauksella.

2. Sivuston rakenne

Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle. Sivuille halutaan seuraavat osiot:

• Etusivu, joka sisältää lyhyen kuvauksen henkilöstä, yhteystiedot ja valokuvan.
• Artikkelisivu, johon henkilö voi kirjoittaa dokumentteja yleisesti kiinnostavista aiheista.
• Opiskelusivut, joilta löytyy lukujärjestys, tiedot suoritetuista kursseista ja kurssien harjoitustyöt.
• Töihin liittyvät sivut, joille sijoitetaan CV ja työtehtäviin liittyviä kiinnostuksen kohteita.
• Harrastussivut.
• Kuvagalleriasivut.
• Linkkisivu, jolle sijoitetaan suosikkilinkit.
• Vieraskirjasivu.
• Navigointi sivulta toiselle niin, että liikkuminen on helppoa. Tämä toteutetaan seuraavassa ohjauksessa.

Jätetään sivuston toiminnallisuus myöhempään vaiheeseen ja aloitetaan hakemistorakenteen suunnittelusta. Koska html-tiedostoja tulee useita ja määrä kasvaa jatkossa, kannattaa kutakin sivua kohden luoda oma hakemistonsa. Se helpottaa sivuun liittyvien tiedostojen hallintaa ja lyhentää www-osoitteita: osoitteeseen ei tarvitse kirjoittaa tiedoston nimeä lainkaan, koska palvelin tarjoaa hakemistosta automaattisesti index.html-tiedostoa.

2.1 Hakemistorakenteen luonti

Luo kuvaa vastaava hakemistorakenne Resurssienhallinnalla (Win+E) W:-asemalle. Tässä ohjauksessa tarvitset kansiot artikkelit, artikkelit\it, artikkelit\kokkaus, linkit ja opiskelu. Muut voit luoda samalla kertaa tai vasta lisätehtävien yhteydessä.

Huomaa, että jokaisessa kansiossa on oma index.html-tiedostonsa. Tiedostonimi toistuu, mutta kansiot erottavat sivut toisistaan, eikä nimeä tarvitse kirjoittaa osoitteeseen.

Jos teet tehtäviä kotikoneella, tallenna tiedostot ensin omalle koneellesi ja siirrä ne palvelimelle digipalvelujen ohjeen mukaisesti. VPN-yhteys tarvitaan aina, kun kone ei ole yliopiston verkossa.

3. Sivujen rakenne

Lisätään suunnitelman mukaiset tekstit ja kuvat useammalle sivulle ja muokataan sivujen rakenne kuntoon. Avaa suunnitelma omaan välilehteensä ja käynnistä tekstieditori.

3.1 Etusivu

1. Aloita uusi dokumentti ja tallenna se W:-aseman www-hakemistoon nimellä index.html.

2. Avaa HTML5-luennon dokumenttipohja selitteineen. Tutki, mitä osia pohjassa on, ja kopioi se uuden dokumenttisi sisällöksi. Tallenna.

3. Laita title-elementin sisällöksi Nanonano. Hakukoneet painottavat title-elementin tekstiä, joten sen on syytä olla perusmuodossa ja kuvata sivua.

4. Lisää sivulle pääotsikko h1 ja kirjoita siihen Nanonano. Sijoita otsikko ja kaikki sivun sisältö main-elementin sisään. Rakenne-elementit on esitelty luennon luvussa 7.

   <body>
     <main>
       <h1>Nanonano</h1>
   
       ... sivun sisältö ...
     </main>
   </body>

   Miksei header?

   h1-otsikko kertoo, mistä tämä sivu kertoo, joten se kuuluu main-elementtiin. header-elementtiin tulee se, mikä toistuu joka sivulla: sivuston nimi ja navigointivalikko. Koska navigointia ei ole vielä tehty, header-elementtiä ei tässä vaiheessa tarvita. Se lisätään seuraavassa ohjauksessa valikon yhteydessä.

5. Kirjoita pääotsikon jälkeen lyhyt parin lauseen kuvaus siitä, mitä Nanonano harrastaa ja opiskelee. Käytä p-elementtiä.

6. Laita väliotsikoksi h2 teksti Yhteystiedot ja kirjoita Nanonanon osoite, puhelinnumero ja sähköpostiosoite. Tiedot löydät suunnitelmasta.

   Yhteystiedot saat omille riveilleen br-elementillä. Huomaa, että rivinvaihto kuuluu tässä sisältöön: osoite on yksi kokonaisuus, jonka rivijako on merkityksellinen. Tyhjän tilan tekemiseen br-elementtiä ei saa käyttää.

   <p>Nanonano<br />
   Taitoniekantie 9<br />
   40740 Jyväskylä</p>

   Tee sähköpostiosoitteesta mailto-linkki. Merkintä mailto: on kirjoitettava itse href-attribuuttiin:

   <p><a href="mailto:nobody@nettimaili.com.invalid">nobody@nettimaili.com.invalid</a></p>

7. Tallenna esimerkkikuva hakemistoon W:\www\. Lisää yhteystietojen perään kuva figure-elementin sisään:

   <figure>
     <img src="omakuva2.png" alt="Nanonano ulkoilemassa talvimaisemassa" />
     <figcaption>Nanonano hiihtolenkillä.</figcaption>
   </figure>

   img-elementin attribuutit.

   Attribuutti	Merkitys
   src	Kuvan osoite. Pelkkä tiedostonimi riittää, jos kuva on samassa hakemistossa dokumentin kanssa. Tarkista, että nimi on täsmälleen sama kuin tallentamallasi tiedostolla
   alt	Teksti, joka korvaa kuvan. Sen lukee ruudunlukija ja se näytetään, jos kuvaa ei voida esittää. Kerro siinä sama tieto kuin kuva välittää. Jos kuva on pelkkä koriste, käytä tyhjää arvoa alt=""

   alt-tekstistä on lisää luennon luvussa 12.1. Vanhoissa ohjeissa neuvotaan käyttämään title-attribuuttia kuvan otsikkona; älä laita siihen olennaista tietoa, koska vihjeteksti ei näy kosketuslaitteilla eikä näppäimistökäytössä. Kuvateksti kuuluu figcaption-elementtiin.

8. Kirjoita dokumentin loppuun tiedot sivun ylläpitäjästä ja päivitysajankohdasta. Sijoita ne footer-elementtiin, joka tulee main-elementin jälkeen. Päiväys merkitään time-elementillä, jonka datetime-attribuutti on koneluettavassa muodossa vvvv-kk-pp.

   <footer>
     <p>Päivitetty <time datetime="2026-09-04">4.9.2026</time>.</p>
     <address>
       Nanonano
       (<a href="mailto:nobody@nettimaili.com.invalid">nobody@nettimaili.com.invalid</a>)
     </address>
   </footer>

   address-elementti on tarkoitettu nimenomaan yhteystiedoille, ei minkä tahansa osoitteen merkitsemiseen.

9. Validoi dokumenttisi nyt, ennen kuin julkaiset sen. Avaa tiedosto selaimeen ja valitse Web Developer -valikosta Tools → Validate Local HTML, tai lataa tiedosto validaattorin sivulla valinnalla Check by File Upload. Molemmat käyvät; luvussa 1.3 on kummankin ohje.

   Korjaa virheet yksi kerrallaan ensimmäisestä alkaen ja validoi uudelleen, kunnes tulos on Document checking completed. No errors or warnings to show.

10. Tallenna dokumentti W:-aseman www-hakemistoon. Nyt sivun pitäisi näkyä osoitteessa

    https://users.jyu.fi/~omatunnus/www/

    Huomaa, että index.html-tiedoston nimeä ei tarvitse kirjoittaa osoitteeseen: palvelin tarjoaa sen hakemistosta automaattisesti.

    Jos muutokset eivät näy

    Paina Ctrl+Shift+R (macOS: Cmd+Shift+R). Se lataa sivun selaimen välimuistia ohittaen. Pelkkä päivityspainike ei aina riitä.

11. Katso sivua vielä kapealla näytöllä. Avaa kehittäjätyökalut F12-näppäimellä ja kytke päälle laitenäkymä (Ctrl+Shift+M). Kaventaa noin 360 pikseliin. Tekstin pitäisi rivittyä eikä sivua pitäisi joutua vierittämään sivusuunnassa. Jos joutuu, tarkista että pohjassa on <meta name="viewport" ... />.

3.2 Opiskelut

1. Aloita uusi HTML5-dokumentti samalla tavalla kuin etusivu ja tallenna se hakemistoon W:\www\opiskelu\ nimellä index.html. Ole tarkkana, että tallennat oikeaan kansioon etkä vahingossa aiemmin tekemäsi dokumentin päälle.

2. Keksi dokumentille järkevä pääotsikko h1 ja sopiva title, esimerkiksi Opiskelu - Nanonano. Sivua parhaiten kuvaava sana tulee ensin.

3. Lisää toisen tason otsikko Viikkolukujärjestys.

4. Kirjoita esimerkin mukainen viikkolukujärjestys taulukkona. Taulukot voit kerrata luennon luvusta 11.

   

   Lukujärjestys vaatii kunnolliset otsikkosolut

   Lukujärjestyksessä on sekä sarakeotsikot (viikonpäivät) että riviotsikot (kellonajat). Merkitse molemmat th-elementillä ja kerro scope-attribuutilla, kumpaa otsikko koskee. Lisää taulukolle myös caption. Ilman näitä ruudunlukija ei osaa yhdistää solua oikeaan päivään ja kellonaikaan, eikä taulukosta saa selvää.

   <table>
     <caption>Nanonanon viikkolukujärjestys</caption>
     <thead>
       <tr>
         <th scope="col">Aika</th>
         <th scope="col">Maanantai</th>
         <th scope="col">Tiistai</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">8–10</th>
         <td>ITKP1011</td>
         <td></td>
       </tr>
     </tbody>
   </table>

   Vasemman yläkulman solu on otsikko sille sarakkeelle, jossa kellonajat ovat, joten siihen sopii teksti Aika. Jos jätät sen tyhjäksi, merkitse se td-elementillä äläkä th-elementillä: tyhjä otsikko ei kerro mitään.

5. Lisää väliotsikko Opintosuoritusote ja sen perään suoritetut kurssit. Käytä pre-elementtiä.

   Miksi pre eikä taulukko? Ote on kopioitu opintorekisteristä sellaisenaan, ja sen sarakkeet on kohdistettu välilyönneillä. Selain tiivistää normaalisti peräkkäiset välilyönnit yhdeksi, jolloin kohdistus hajoaisi. pre-elementti säilyttää tekstin alkuperäisen kirjoitusasun. Jos kirjoittaisit otteen itse alusta alkaen, se kuuluisi taulukkoon.

6. Validoi sivu (Tools → Validate Local HTML) ja tallenna se. Sivu näkyy osoitteessa https://users.jyu.fi/~omatunnus/www/opiskelu/

3.3 Linkit

1. Aloita uusi dokumentti ja tallenna se linkit-hakemistoon nimellä index.html.

2. Lisää asianmukaiset otsikot (title ja h1).

3. Lisää suunnitelman kiinnostavat linkit sivulle järjestämättömänä listana (ul). Listat voit kerrata luennon luvusta 10.

4. Tee linkkiteksteistä hyperlinkkejä. Osoite tulee href-attribuuttiin.

   <li><a href="https://www.osoite.example/">Linkkiteksti</a></li>

   Linkkiteksti kertoo kohteen

   Keksi jokaiselle linkille teksti, josta selviää minne se vie. Älä käytä osoitetta linkkitekstinä äläkä ilmauksia kuten ”tästä” tai ”lisää”. Ruudunlukijan käyttäjä voi selata sivun linkit listana ilman ympäröivää tekstiä.

   Muista kirjoittaa osoite kokonaisena, protokolla mukaan lukien. href="www.jyu.fi" ei vie jyu.fi-sivustolle vaan etsii nykyisestä kansiosta tiedostoa nimeltä www.jyu.fi.

5. Validoi sivu, tallenna se ja testaa selaimella, että kaikki linkit toimivat.

3.4 Artikkelit

1. Aloita uusi dokumentti ja tallenna se artikkelit-hakemiston it-alihakemistoon nimellä index.html.

2. Lisää pääotsikko IT ja tietoliikenne: kurkistus tulevaisuuteen ja keksi sopiva title, esimerkiksi:

   <title>IT ja tietoliikenne: kurkistus tulevaisuuteen - Artikkelit - Nanonano</title>

3. Lisää artikkeliin kymmenen kappaletta tekstiä Lorem Ipsum -generaattorilla. Palvelu tuottaa latinankielistä tekstiä, jota käytetään yleisesti testitekstinä silloin, kun halutaan tarkastella rakennetta ja ulkoasua eikä sisältöä.

4. Liitä teksti dokumenttiin ja tarkista, että jokainen kokonainen kappale on merkitty omalla p-elementillään. Generaattori antaa tekstin tyhjillä riveillä eroteltuna; tyhjä rivi ei tee kappaletta, vaan p-elementti tekee.

5. Lisää väliin muutama toisen tason otsikko, vaikkapa Vertebra cervicalis ja Dorsum tergum.

6. Tallenna kaavio.png-kuva it-hakemistoon ja lisää se johonkin kohtaan dokumenttia. Kuva lisätään samalla tavalla kuin etusivulle. Huomaa, että kaaviokuvan alt-tekstin pitää kuvailla kaavion sisältö, ei kuvan ulkonäköä.

7. Validoi dokumentti, tallenna se ja testaa selaimella.

8. Tee kokkaus-hakemistoon uusi dokumentti nimellä index.html. Lisää looginen title, esimerkiksi:

   <title>Kuinka valmistaa hyvää opiskelijaruokaa halvalla? - Artikkelit - Nanonano</title>

   Lisää myös sopiva h1-otsikko. Muutoin dokumentin voi jättää alkutekijöihinsä.

9. Tee artikkelit-hakemistoon uusi dokumentti nimellä index.html. Tämä on artikkelien kooste- eli hakemistosivu.

   • Otsikoksi Artikkelit ja title-elementtiin esimerkiksi Artikkelit - Nanonano.
   • Tee järjestämätön lista artikkeleista ja käytä listakohtina artikkelien nimiä.
   • Tee nimistä linkkejä. Käytä suhteellista viittausta kyseiseen artikkeliin.

   Voit viitata suoraan artikkelin sisältävään hakemistoon, koska palvelin tarjoaa hakemistosta index.html-tiedoston automaattisesti. Viittaukset tehdään suhteessa artikkelit-hakemistoon, jossa viittaava dokumentti sijaitsee.

   Suhteellisen viittauksen muotoja.

   Viittaus	Kohde
   foo.html	Tämän hakemiston tiedosto foo.html
   testi/bar.html	Alihakemiston testi tiedosto bar.html
   testi/	Alihakemisto testi, josta näytetään index.html
   ../	Isähakemisto eli yksi taso ylöspäin
   ../testi/	Isähakemiston alihakemisto testi

   Suhteellisista viittauksista on lisää luennon luvussa 14, ja niitä voi harjoitella erillisellä työkalulla.

10. Tallenna dokumentti. Avaa se selaimessa kahdella eri tavalla: ensin suoraan tiedostona valinnalla Tiedosto → Avaa tiedosto ja sen jälkeen www-osoitteesta. Kokeile tekemiäsi linkkejä molemmissa tapauksissa.

    Mieti, miksi linkit vievät erinäköisille sivuille, vaikka kyseessä on sama dokumentti. Katso selaimen osoiteriviä: toisessa tapauksessa se alkaa merkinnällä file:/// ja toisessa https://. Kumpi versio kertoo, toimiiko sivustosi oikeasti?

11. Validoi kaikki tekemäsi sivut.

4. Tyylit

Dokumenttipohjassa on head-elementissä linkki tyylitiedostoon:

<link rel="stylesheet" href="tyyli.css" />

Tiedostoa tyyli.css ei ole vielä tehty, joten sivut näkyvät toistaiseksi selaimen oletustyyleillä. Kokeile vaihtaa href-attribuutin arvoksi jokin seuraavista, niin näet miten sama dokumentti muuttuu pelkkää tyylitiedostoa vaihtamalla:

• https://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus2/w3c1.css
• https://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus2/w3c2.css
• https://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus2/w3c3.css
• https://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus2/w3c4.css
• https://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus2/w3c5.css

Huomaa, että dokumentin sisältö ja rakenne eivät muutu lainkaan. Juuri tästä on kyse, kun sanotaan että HTML merkitsee rakenteen ja CSS määrittelee ulkoasun. Lisää esimerkkejä saman sisällön erilaisista ulkoasuista löytyy CSS Zen Garden -sivustolta.

Seuraavassa ohjauksessa teet oman tyylitiedoston ja lisäät sivustolle navigointivalikon.

5. Lisätehtäviä

Laajaa sivustoa päivitetään ajan kanssa. Suunnitelmassa on vielä useita kohtia, joista ei ole tehty omia sivuja. Luo harkintasi mukaan sivut suunnitelman pohjalta ja tallenna ne sopiviin hakemistoihin. Ainakin nämä puuttuvat:

• Harrastussivut ja niiden alisivut.
• Harkkasivut opiskelukansiossa: harjoitustyöt eri kursseilta.
• Työsivut: CV ja esimerkkejä osaamisalueista.
• Galleria ja vieraskirja. Nämä toteutetaan myöhemmin.

6. Tarkistuslista

Käy lista läpi, ennen kuin siirryt seuraavaan ohjaukseen.

1. Onko jokaisessa hakemistossa index.html, ja aukeavatko kaikki sivut osoitteesta ilman tiedostonimeä?
2. Meneekö jokainen sivu validaattorista läpi ilman virheitä?
3. Onko jokaisella sivulla täsmälleen yksi h1 ja kuvaava title?
4. Onko jokaisella kuvalla alt-teksti, joka kertoo kuvan sisällön?
5. Onko lukujärjestystaulukossa caption, th ja scope?
6. Toimivatko artikkelisivun suhteelliset linkit myös palvelimelta avattuna?
7. Ovatko kaikki tiedosto- ja kansionimet pieniä kirjaimia ilman ääkkösiä?
8. Ovatko tiedostot UTF-8-muodossa, ja näkyvätkö ääkköset selaimessa oikein?
9. Näyttääkö sivu järkevältä myös kapealla näytöllä?