HTML5-perusteet

ITKP1011 Web-julkaiseminen · korjattu ja laajennettu laitos

Luennolla käsitellään WWW-sivujen kirjoittamista eli opetellaan perusteet HTML5-dokumenttien tuottamisesta. WWW-sivun ulkoasun muotoilu käsitellään CSS-luennolla.

Luentovideo pohjautuu vanhempaan luentomateriaaliin ja eroaa paikoin tämän sivun sisällöstä.

1. Dokumenttityypeistä

• Wordin tallentamaa tiedostoa pystyy yleensä tulkitsemaan vain ohjelma itse.
• Word tekee tiedostoon merkintöjä
  • rakenteen merkitsemiseksi,
  • ulkoasun määrittämiseksi ja
  • automaattisia kenttiä varten.
• Word-dokumentti sisältää myös kuvat ja muut dokumentissa vaadittavat objektit.
• WWW-sivua voivat tulkita hyvin erilaiset ohjelmat: graafiset selaimet, puhelimet, ruudunlukijat, tekstiselaimet ja hakukoneiden robotit.
  • On oltava yhteisiä pelisääntöjä siitä, miten HTML-dokumentteja kirjoitetaan.
  • On keskityttävä ensin sisältöön, sitten rakenteen merkitsemiseen ja vasta viimeiseksi ulkoasuun.
• HTML-dokumentti on pelkkää tekstiä.
  • Mitä on pelkkä teksti? Jos voit muokata tiedostoasi Muistiolla, kyseessä on puhdas tekstitiedosto tiedostopäätteestä riippumatta. Tällaisia ovat esimerkiksi .htm, .html, .xhtml, .xml, .css, .txt ja .md.
  • Rakenteen merkinnät on kirjoitettava itse.
  • Merkintöjen kirjoittamiseen on tarkat säännöt eli kielioppi, jonka määrittää dokumenttityyppi.
  • Käytä oikeaa merkistöä eli UTF-8.
  • Käytä myös Unix-tyyppisiä rivinvaihtoja (LF).
• WWW-sivulla olevat kuvat, videot ja muut objektit linkitetään HTML-dokumenttiin.
  • Kaikki dokumenttiin liittyvät tiedostot (kuvat, videot, css-tiedostot) on muistettava siirtää www-palvelimelle.
  • WWW-sivulla näkyvä objekti voi periaatteessa sijaita millä tahansa palvelimella.
  • Helpointa on tallentaa omaan sivuun liittyvät tiedostot samaan kansioon html-tiedoston kanssa.

1.1 Kuka määrittää, miten sivuja tehdään?

W3C (World Wide Web Consortium)

Tuottaa spesifikaatioita, ohjeita ja työkaluja WWW-tekniikoille. W3C vastaa nykyään muun muassa CSS:stä ja saavutettavuusohjeista (WCAG) sekä ylläpitää validaattoripalvelua.

WHATWG (Web Hypertext Application Technology Working Group)

Selainvalmistajien muodostama ryhmä, joka ylläpitää HTML-määrittelyä. Vuodesta 2019 alkaen HTML-standardi on WHATWG:n Living Standard, ja W3C:n vanhat HTML5-suositukset on poistettu käytöstä.

1.2 Standardeista lyhyesti

HTML (HyperText Markup Language)

WWW:ssä käytettävien hypertekstidokumenttien rakenteen määrittelyyn tehty merkintäkieli. HTML:llä ei ole enää versionumeroita: määrittely elää jatkuvasti. Nimitystä HTML5 käytetään yhä puhekielessä tarkoittamassa nykyistä HTML:ää erotuksena vanhasta HTML 4:stä ja XHTML 1:stä.

XML (Extensible Markup Language)

Merkintäkieli, joka määrittelee, miten kirjoitetaan dokumentteja, jotka ovat sekä ihmisen että koneen luettavissa. XML on tiukka: jokainen elementti on suljettava ja elementit eivät saa mennä ristiin.

XHTML (Extensible HyperText Markup Language)

XML:n sääntöjen mukaan kirjoitettu HTML. Nykyään ei kirjoiteta erillistä XHTML-dokumenttityyppiä, vaan tavallista HTML5:tä XML:n sääntöjä noudattaen. Tätä kutsutaan polyglot-dokumentiksi: sama tiedosto kelpaa sekä HTML:nä että XML:nä. Tällä kurssilla kirjoitetaan näin.

CSS (Cascading Style Sheets)

Kieli, jolla määritellään dokumentin ulkoasu. CSS:llä muotoillaan HTML-, XML- ja SVG-dokumentteja.

2. WWW-sivujen tekeminen

WWW-sivujen tekemisessä voidaan erottaa samat vaiheet kuin tekstinkäsittelydokumentin tekemisessä:

1. sisällön tuottaminen,
2. rakenteen merkitseminen,
3. ulkoasun määrittäminen.

2.1 Editorit

WWW-sivuja voi tuottaa niihin erikoistuneilla ohjelmilla, jotka näyttävät suoraan miltä sivu näyttää selaimessa. Sivuja voi tuottaa myös kirjoittamalla HTML-merkintää suoraan tekstieditorilla, ja niin teemme tällä kurssilla. HTML:n kirjoittaminen ei ole ohjelmointia.

HTML ei kiinnitä millään tavalla dokumentin ulkoasua vaan ainoastaan dokumentin rakenteen.

Kurssin editorisuositus on Visual Studio Code, joka soveltuu erityisen hyvin HTML- ja CSS-tiedostojen muokkaamiseen. Se on ilmainen ja toimii Windowsissa, macOS:ssä ja Linuxissa.

Graafisia WYSIWYG-editoreita (What You See Is What You Get) kannattaa välttää, jos ei ymmärrä rakenteen ja ulkoasun eroa. WWW-sivujen yhteydessä WYSIWYG on muutenkin harhaanjohtava käsite: et voi tietää, miltä sivusi näyttää missäkin ympäristössä. Sama sivu näytetään puhelimessa, isolla näytöllä ja ruudunlukijassa eri tavoin, ja juuri se on tarkoituskin.

2.2 Rakenteen merkitseminen

HTML-dokumentti on tekstiä, johon merkitään dokumentin rakenne elementeillä. Elementti merkitään tageilla, jotka kirjoitetaan kulmasulkeiden väliin.

<title>Web-julkaiseminen</title>

• <title> on aloitustagi.
• </title> on lopetustagi. Lopetustagissa on aina kauttaviiva.
• Näiden välissä oleva teksti on elementin sisältö.
• Elementti on kokonaisuus: tagit ja niiden välinen sisältö.

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä ja rivinvaihtoja. Selain tiivistää peräkkäiset välimerkit yhdeksi välilyönniksi, joten tekstin asettelua ei voi tehdä välilyönneillä eikä tyhjillä riveillä.

Opettelun tueksi on koottu dokumentti tavallisimmista HTML-elementeistä.

2.3 Void-elementit eli tyhjät elementit

Useimmilla elementeillä on aloitus- ja lopetustagi. Osalla elementeistä ei koskaan ole sisältöä, eikä niillä siksi ole lopetustagia lainkaan. Näitä kutsutaan void-elementeiksi. XML-yhteensopivassa dokumentissa ne suljetaan lisäämällä loppuun välilyönti ja kauttaviiva.

<br />
<img src="kissa.jpg" alt="Musta kissa nukkuu sohvalla" />
<meta charset="utf-8" />

2.4 Ominaisuudet eli attribuutit

Elementeillä voi olla attribuutteja, jotka määrittelevät jotakin elementtiin liittyvää. Esimerkiksi hyperlinkin kohde määritellään a-elementin href-attribuutilla:

<a href="https://www.jyu.fi/">Jyväskylän yliopisto</a>

Attribuutit kirjoitetaan aloitustagin sisään välilyönneillä eroteltuina. Ensin tulee attribuutin nimi, sitten yhtäläisyysmerkki ja sitten arvo lainausmerkkien sisässä.

<img src="kaavio.png" alt="Myyntikäyrä nousee tasaisesti" width="640" height="480" />

Attribuuttien nimet kirjoitetaan pienillä kirjaimilla, ja arvo on aina lainausmerkeissä. HTML sallii lainausmerkkien pois jättämisen, mutta XML ei, joten tällä kurssilla ne kirjoitetaan aina.

2.5 Dokumentin on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), jottei selainten tarvitse arvailla. Elementit eivät saa mennä keskenään ristiin eikä lopetustageja saa unohtaa.

Väärin:

<p>Tuotetun <strong>dokumentin pitää olla
   hyvin muodostettu
   (<em>engl. well-formed</em>).</p></strong>

Oikein:

<p>Tuotetun <strong>dokumentin pitää olla
   hyvin muodostettu
   (<em>engl. well-formed</em>)</strong>.</p>

HTML-standardi katsoo paikoin läpi sormien puuttuvia lopetustageja, mutta silloin dokumentti ei enää ole XML-yhteensopiva. Tällä kurssilla kirjoitamme vain XML-yhteensopivia dokumentteja.

2.6 Dokumentin pitää olla validi

Dokumentin pitää olla myös validi (engl. valid) eli sen rakenteen pitää noudattaa dokumenttityypin sääntöjä. Dokumenttityyppi määrää, mitä elementtejä saa käyttää, mitkä elementit saavat sijaita minkäkin sisällä ja mitä attribuutteja kullekin elementille kuuluu.

Validointiin käytetään W3C:n validaattoria. Se ottaa vastaan sekä osoitteen, tiedoston että suoraan liitetyn tekstin, joten dokumentin voi tarkistaa jo ennen julkaisemista.

3. HTML5-dokumentin runko

Jokainen kurssilla tehtävä sivu alkaa tästä rungosta. Kopioi se pohjaksi.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fi" xml:lang="fi">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sivun otsikko</title>
    <link rel="stylesheet" href="tyyli.css" />
  </head>
  <body>
    <h1>Otsikko</h1>
    <p>...Sivun sisältöä tänne...</p>
  </body>
</html>

4. Erikoismerkkien koodaus

Osa merkeistä on HTML:lle erikoismerkkejä, eikä niitä voi kirjoittaa tekstiin sellaisenaan. Ne korvataan entiteeteillä. Entiteetti alkaa &-merkillä ja päättyy puolipisteeseen.

Käytännön sääntö on yksinkertainen: kirjoita nämä neljä merkkiä aina entiteetteinä, niin et joudu miettimään, milloin se on pakollista.

Ääkkösiä ei tarvitse koodata ä- ja ö-entiteeteillä, kun käytössä on UTF-8. Kirjoita siis Hämähäkki etkä Hämähäkki. Muut merkit löytyvät entiteettitaulukoista.

4.1 Osoitteissa olevat erikoismerkit

Osoitteissa eli URLeissa olevat erikoismerkit koodataan eri tavalla kuin tekstissä: prosenttimerkillä ja merkin tavujen heksadesimaaliarvolla. Nykyinen standardi edellyttää, että merkit koodataan UTF-8-tavuina, jolloin yksi ääkkönen vie kaksi prosenttiryhmää.

Älä koodaa osoitteen rakenteeseen kuuluvia /-merkkejä äläkä osoitteen alkuosaa https://jotain.example/. Kauttaviivan koodaus %2F tarvitaan vain siinä harvinaisessa tapauksessa, että tiedoston nimessä on kauttaviiva.

https://users.jyu.fi/~omatunnus/kuvat/kes%C3%A4loma%202026.jpg

Vertailu: UTF-8 ja Latin-1

Alla oleva taulukko on tarkoitettu vanhojen osoitteiden tulkitsemiseen, ei uusien kirjoittamiseen. Omissa sivuissasi käytät aina UTF-8-saraketta.

Taulukon kaksi viimeistä riviä kertovat säännön: merkistöllä on väliä vain ASCII-alueen ulkopuolisissa merkeissä. Kirjaimet a–z, numerot ja välimerkit koodataan molemmissa täsmälleen samoin, joten ero näkyy vain ääkkösissä ja muissa erikoiskirjaimissa.

Koodauksen voi tarkistaa valmiilla palvelulla, johon kirjoitetaan tiedostonimi sellaisenaan. Toinen tapa on liittää valmis osoite selaimen osoiteriville ja katsoa, mihin se johtaa.

Esimerkki

Kuvatiedoston nimi on hämähäkki.jpg. Osoitteessa ä-kirjaimet koodataan näin:

<p>
  <img src="h%C3%A4m%C3%A4h%C3%A4kki.jpg"
       alt="Hämähäkki lämmittelee auringossa rinkan päällä" />
</p>

Huomaa, että koodaus koskee vain src-attribuutin osoitetta. alt-teksti on tavallista tekstiä, joten siihen kirjoitetaan ääkköset normaalisti.

4.2 Linkkejä erikoismerkeistä

• Jukka Korpela: Merkit ja koodaukset.
• Percent-encoding (MDN).

5. Dokumentin perusrakenne

Dokumentin rakenne muodostuu otsikoista ja niiden alle kuuluvasta sisällöstä. Perusrakenteesta kannattaa huomata seuraavat asiat:

• Dokumentissa kuuluu olla yksi ensimmäisen tason otsikko, joka kertoo koko sivun aiheen.
• Otsikkotasojen pitää edetä loogisesti: ensimmäisen tason alla toinen taso ja vasta sen alla kolmas. Tasoja ei saa hypätä yli.
• Otsikko ei ole ulkoasukeino. Älä valitse otsikkotasoa sen mukaan, minkä kokoiselta teksti näyttää, vaan sen mukaan, millä tasolla se on rakenteessa. Koon määrää CSS.
• Jokaisen otsikon jälkeen tulisi olla tekstiä, ei heti seuraavaa otsikkoa.

Dokumentin rakennetta voi tutkia selaimen kehittäjätyökaluilla: F12 avaa työkalut ja Ctrl+Shift+C käynnistää elementtivalitsimen. Työkalujen käyttöä käsitellään tarkemmin luvussa 19, jossa on myös ohje otsikkorakenteen tarkistamiseen. Jos otsikoissa on aukkoja tai sivulla on useita ensimmäisen tason otsikoita, rakenne on rikki, vaikka sivu näyttäisi silmällä hyvältä.

6. Elementtien luokittelu

Vanhastaan elementit jaettiin lohkotason (block) ja tekstitason (inline) elementteihin. Nykyinen HTML-määrittely puhuu sen sijaan sisältökategorioista, joista tärkeimmät ovat:

Käytännön sääntö säilyy samana: teksti ei saa olla suoraan body-elementin sisällä, vaan se merkitään esimerkiksi kappaleeksi. Tekstitason elementit taas sijoitetaan aina jonkin lohkon sisään.

Kaaviosta kannattaa lukea kolme asiaa:

• Teksti on aina sisimpänä. Se ei voi olla suoraan body-elementin sisällä, vaan sen ympärille tarvitaan vähintään kappale.
• Lohkotason elementti ei mene tekstitason elementin sisään. Kappale <p> ei siis kuulu <em>-elementin sisään; suunta on toisin päin.
• Lohkotason elementit voivat olla toistensa sisällä. li voi sisältää uuden listan ja section uuden section-elementin.

7. Sivun rakenne-elementit

HTML5 toi mukanaan joukon elementtejä, joilla sivun osat merkitään nimeltä. Ne eivät muuta ulkoasua mitenkään, mutta ne kertovat selaimelle, ruudunlukijalle ja hakukoneelle, mikä osa sivusta on mikäkin.

Samat elementit koodina:

<body>
  <header>
    <p>Matin kotisivu</p>
  </header>

  <nav>
    <ul>
      <li><a href="./">Etusivu</a></li>
      <li><a href="harrastukset.html">Harrastukset</a></li>
    </ul>
  </nav>

  <main>
    <h1>Tervetuloa</h1>
    <p>Tällä sivulla kerron itsestäni.</p>

    <section>
      <h2>Opinnot</h2>
      <p>Opiskelen tietojärjestelmätiedettä.</p>
    </section>
  </main>

  <footer>
    <p>Päivitetty <time datetime="2026-09-04">4.9.2026</time></p>
    <address><a href="mailto:matti@example.com">matti@example.com</a></address>
  </footer>
</body>

Katso valmis esimerkkisivu rakenne-elementeistä.

8. Otsikkoelementit h1–h6

Otsikkoja on kuusi tasoa: h1 on ylin ja h6 alin. Käytännössä kolme tasoa riittää lähes aina.

<h1>Ensimmäisen tason otsikko</h1>
<p>Tämä on tekstikappale.</p>

<h2>Toisen tason otsikko</h2>
<p>Tämä on tekstikappale.</p>

<h3>Kolmannen tason otsikko</h3>
<p>Tämä on tekstikappale.</p>

Katso otsikkotasojen esimerkkisivu, jossa näet miltä tasot näyttävät selaimen oletustyylillä.

9. Tekstikappale p

Kappale merkitään p-elementillä. Jokainen kappale merkitään omakseen; tyhjillä riveillä tai br-elementeillä ei tehdä kappaleita.

<p>Ensimmäinen kappale.</p>
<p>Toinen kappale.</p>

10. Erilaiset listat

Listoja on kolmea lajia. Listojen sisään voi sijoittaa sekä tekstitason että lohkotason elementtejä.

10.1 Järjestämätön lista ul

Käytä, kun alkioiden järjestyksellä ei ole merkitystä.

<ul>
  <li>Ensimmäinen alkio</li>
  <li>Toinen alkio</li>
</ul>

10.2 Järjestetty lista ol

Käytä, kun järjestys on osa sisältöä, esimerkiksi työvaiheissa. Numerot tulevat automaattisesti; älä kirjoita niitä itse tekstiin.

<ol>
  <li>Kirjoita sisältö</li>
  <li>Merkitse rakenne</li>
  <li>Validoi</li>
</ol>

Molemmat listatyypit näkyvät esimerkkisivulla.

10.3 Määritelmälista dl

Määritelmälista on nimi–arvo-pareja varten: sanasto, yhteystiedot, ominaisuusluettelo. Elementtejä on kolme:

• dl muodostaa listan,
• dt on määriteltävä termi ja
• dd on termin selitys.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, dokumentin rakenteen merkintäkieli.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, dokumentin ulkoasun määrittelykieli.</dd>
</dl>

Samalla termillä voi olla useita selityksiä ja samalla selityksellä useita termejä: peräkkäiset dt- ja dd-elementit kuuluvat yhteen.

10.4 Sisäkkäiset listat

Ei koskaan näin:

<ul>
  <ul>
  </ul>
</ul>

Vaan näin:

<ul>
  <li>li on ainoa elementti, joka voi olla ul-elementin lapsi
    <ul>
      <li>Alilistan alkio</li>
      <li>Alilistan toinen alkio</li>
    </ul>
  </li>
</ul>

Huomaa, että ulomman alkion lopetustagi </li> tulee vasta alilistan jälkeen. Koodin sisennyksillä ei ole vaikutusta listan muodostumiseen, mutta ne tekevät rakenteen näkyväksi ja paljastavat virheet.

• Esimerkki 1: kaksitasoinen sisäkkäinen lista.
• Esimerkki 2: kolmetasoinen lista, jossa on sekaisin ol- ja ul-listoja.

11. Taulukot

<table>
  <caption>Kurssin arvosanajakauma</caption>
  <thead>
    <tr>
      <th scope="col">Arvosana</th>
      <th scope="col">Opiskelijoita</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">5</th>
      <td>12</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>28</td>
    </tr>
  </tbody>
</table>

Solu voidaan laajentaa usean sarakkeen tai rivin yli attribuuteilla colspan ja rowspan. Arvo kertoo, montako saraketta tai riviä solu kattaa. Laajennettujen solujen tieltä jäävät solut jätetään pois.

<tr>
  <td colspan="3">Tämä solu levittyy kolmen sarakkeen alueelle</td>
</tr>

Taulukoita rakennettaessa kannattaa huomata:

• Taulukkoon laitetaan ainoastaan taulukkomuodossa olevaa dataa.
• Taulukoilla ei saa taittaa sivua. Asettelu tehdään CSS:llä.
• Taulukon ulkoasu määritellään CSS:n avulla. Katso CSS-luento.

Kokonainen taulukkoesimerkki on omalla sivullaan.

12. Kuvat

Kuva lisätään img-elementillä.

img on void-elementti, ja se pitää sijoittaa jonkin lohkotason elementin sisään.

<p>
  <img src="appro2_p.png" alt="Appro-logo" width="200" height="60" />
</p>

12.1 Kunnollinen alt-teksti

alt-attribuutin sisältö korvaa kuvan, jos kuvaa ei voida esittää. Sen tarkoitus on välittää sama tieto kuin kuva, ei kuvailla kuvaa sinänsä.

<figure>
  <img src="hamahakki.jpg"
       alt="Suuri hämähäkki istuu rinkan kankaalla auringonpaisteessa" />
  <figcaption>Retkellä Jotunheimenissa 2002.</figcaption>
</figure>

12.2 Kuvien osoitteet

Useimmiten kuvat sijaitsevat samalla palvelimella ja samassa kansiossa kuin html-dokumentti. Silloin on järkevintä käyttää suhteellista osoitetta:

<img src="appro2_p.png" alt="Appro-logo" />
<img src="kuvat/logo.png" alt="Appro-logo" />

Kuva voi periaatteessa sijaita millä tahansa palvelimella, jos osoitteeksi kirjoitetaan kokonainen URL:

<img src="https://appro.mit.jyu.fi/images/appro2_p.png" alt="Appro-logo" />

13. Pakotettu rivinvaihto br

br katkaisee rivin siellä, missä rivinvaihto kuuluu sisältöön: runossa, osoitteessa tai vastaavassa. br-elementillä ei saa tehdä tyhjää tilaa, eikä kahta br-elementtiä kirjoiteta peräkkäin. Väliä säädetään CSS:llä.

<address>
  yliopistonopettaja Tommi Lahtonen<br />
  Sähköposti: <a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a><br />
  Kotisivu: <a href="https://hazor.iki.fi/">https://hazor.iki.fi/</a><br />
  Työhuone: AgC431.2
</address>

Kappaleiden erottamiseen käytetään p-elementtiä, ei br-elementtejä.

14. Hyperlinkit a

a-elementillä toteutetaan hyperlinkki joko toiseen dokumenttiin, saman dokumentin toiseen kohtaan tai mihin tahansa verkossa sijaitsevaan objektiin. Linkkinä voi toimia teksti tai kuva. a-elementti sijoitetaan jonkin lohkotason elementin sisälle.

<a href="https://www.jyu.fi/">Jyväskylän yliopisto</a>
<a href="gradu.pdf">Lue gradu (PDF)</a>
<a href="./"><img src="logo.png" alt="Etusivulle" /></a>

14.1 Kolme tapaa kirjoittaa osoite

Sama kohde voidaan ilmaista kolmella tavalla. Ero on siinä, kuinka suuren osan osoitteesta kirjoitat itse.

Absoluuttinen osoite

<p>Absoluuttisella osoitteella oleva linkki kurssin
  <a href="https://appro.mit.jyu.fi/itkp1011/">kotisivulle</a>.</p>

Absoluuttinen osoite sisältää koko osoitteen ja toimii kaikkialla. Siitä ei voi jättää pois https://-alkua: href="www.jyu.fi" ei vie jyu.fi-sivustolle vaan etsii nykyisestä kansiosta tiedostoa nimeltä www.jyu.fi. Selain piilottaa osoiteriviltä protokollan, mutta HTML:ssä sen on oltava mukana.

Puoliabsoluuttinen osoite

<p>Puoliabsoluuttisella osoitteella oleva linkki
  <a href="/itkp1011/luennot/css/">CSS-luennolle</a>.</p>

Puoliabsoluuttinen osoite luetaan palvelimen juuresta (/), joten osoitteen alkuosa https://appro.mit.jyu.fi jätetään pois. Sama merkkijono toimii jokaisella saman palvelimen sivulla riippumatta siitä, kuinka syvällä kansiorakenteessa sivu on. Siksi se sopii hyvin esimerkiksi joka sivulla toistuvaan navigaatioon.

Suhteellinen osoite

<p>Suhteellisella osoitteella oleva linkki kurssin
  <a href="../../ohjaus/ohjaus1/">ensimmäisiin ohjaustehtäviin</a>.</p>

Suhteellinen osoite ratkaistaan sen kansion perusteella, jossa viittaava dokumentti sijaitsee. Se vastaa täsmälleen komentorivin oletushakemistoa. Suhteellinen osoite on paras valinta oman sivuston sisäisiin linkkeihin, koska sivusto toimii silloin sellaisenaan myös omalla koneella ja toiseen kansioon siirrettynä.

• Esimerkkejä erilaisista viittauksista
• Harjoittele suhteellisia viittauksia työkalulla
• Absoluuttista ja suhteellista viittausta käsitellään lisää kurssin komentoriviluennolla.

14.2 index.html

Kun osoite viittaa kansioon eikä yksittäiseen tiedostoon, palvelin tarjoaa automaattisesti kyseisessä kansiossa olevaa index.html-tiedostoa. Tiedoston nimen ei siis tarvitse näkyä osoitteessa lainkaan.

https://users.jyu.fi/~omatunnus/            → näyttää tiedoston index.html
https://users.jyu.fi/~omatunnus/index.html → sama sivu, pidempi osoite

Anna jokaisen julkaistavan kansion etusivulle nimeksi täsmälleen index.html. Index.html tai etusivu.html ei kelpaa. Jos tiedostoa ei ole, palvelin joko listaa kansion sisällön kaikkien nähtäväksi tai antaa virheen 403 Forbidden.

14.3 Dokumentin sisäinen linkki

Saman sivun toiseen kohtaan viitataan risuaidalla ja kohteen tunnisteella:

<p>Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun
  <a href="#hyper">Hyperlinkit</a>.</p>

Kohteelle täytyy antaa id-attribuutilla yksikäsitteinen arvo:

<h2 id="hyper">Hyperlinkit a</h2>

15. Tekstitason elementit

Nämä merkitsevät tekstin osien merkitystä. Ne eivät ole muotoiluja, vaikka selaimen oletustyyli näyttääkin ne eri tavalla.

<p>Tässä on kappale, jossa jotkin sanat ovat <em>tärkeitä</em> ja toiset
  <strong>erittäin tärkeitä</strong>.</p>

Pidemmät lainaukset merkitään blockquote-elementillä, ja muotoilematon teksti kuten koodilistaus pre-elementillä.

16. Otsikkotietoihin sijoitettavat elementit

16.1 Linkkielementti link

link-elementti saa esiintyä vain head-elementin sisällä. Sillä määritellään dokumentin suhde muihin dokumentteihin. Yleisin käyttö on tyylitiedoston liittäminen.

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

Käytä tyylitiedostoon suhteellista osoitetta, jolloin sivusto toimii myös omalla koneellasi. Attribuutti type="text/css" on tarpeeton.

16.2 Metaelementti meta

meta-elementillä määritellään dokumenttiin liittyvää metatietoa. Sekin saa esiintyä vain head-elementin sisällä.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Matin kotisivu: opinnot ja harrastukset." />
<meta name="author" content="Matti Meikäläinen" />

description näkyy usein hakutulosten kuvaustekstinä. keywords-metatiedolla ei ole enää merkitystä hakukoneille.

17. Kommentit

Kommentti alkaa merkinnällä <!-- ja päättyy merkintään -->. Selain ei näytä sitä, mutta se näkyy sivun lähdekoodissa kenelle tahansa. Älä siis kirjoita kommentteihin mitään salaista.

<!-- Navigaatio alkaa -->
<nav>
  ...
</nav>
<!-- Navigaatio päättyy -->

Kommentin sisällä ei saa olla kahta väliviivaa peräkkäin, eikä kommentteja voi sijoittaa sisäkkäin.

18. Saavutettavuus

Saavutettavuus tarkoittaa, että sivua voi käyttää myös silloin, kun ei näe näyttöä, ei käytä hiirtä tai ei erota värejä toisistaan. Yliopiston verkkosivuja koskee laki digitaalisten palvelujen tarjoamisesta, joten asia ei ole vapaaehtoinen.

Hyvä uutinen on, että suurin osa saavutettavuudesta syntyy siitä, että merkitset rakenteen oikein. Tämän luennon asiat riittävät pitkälle:

Osan puutteista löytää automaattisesti Lighthouse, mutta se ei korvaa yllä olevan listan läpikäymistä itse. Lisätietoa: saavutettavuusvaatimukset.fi ja MDN Accessibility.

19. Selaimen kehittäjätyökalut

Jokaisessa nykyselaimessa on sisäänrakennetut kehittäjätyökalut (developer tools, DevTools). Ne ovat tärkein yksittäinen apuväline sivujen tekemisessä: niillä näet, mitä selain oikeasti teki koodillesi, mitkä tiedostot latautuivat ja miltä sivu näyttää muunkokoisella näytöllä.

Työkalut voi avata myös napsauttamalla sivun kohtaa hiiren oikealla painikkeella ja valitsemalla Tutki tai Inspect. Silloin oikea elementti on valmiiksi valittuna.

19.1 Elements eli elementtinäkymä

Tämä on se välilehti, jota käytät eniten. Firefoxissa sen nimi on Inspector, Chromessa ja Edgessä Elements.

• Vasemmalla näkyy dokumentin rakenne puuna. Kolmioista saa avattua ja suljettua elementtejä.
• Kun viet hiiren puussa olevan elementin päälle, selain korostaa sitä vastaavan kohdan sivulla. Toiseen suuntaan toimii elementtivalitsin.
• Alareunassa tai oikealla näkyy polku valittuun elementtiin, esimerkiksi html > body > main > section > p. Tästä näet heti, onko elementti siellä missä luulit.
• Voit muokata koodia suoraan: kaksoisnapsauta tekstiä tai attribuuttia ja kirjoita uusi arvo. Muutokset näkyvät heti, mutta ne eivät tallennu tiedostoon ja katoavat, kun lataat sivun uudelleen. Näkymä on kokeilupaikka, ei editori.
• Oikealla puolella on tyylit. Niihin palataan CSS-luennolla.

19.2 Console eli konsoli

Konsoliin selain kirjoittaa varoituksensa ja virheilmoituksensa. Tällä kurssilla tärkeimmät ovat:

Konsoliin voi myös kirjoittaa JavaScript-komentoja, mutta sitä ei tällä kurssilla tarvita: me kirjoitamme HTML:ää ja CSS:ää emmekä ohjelmoi. Konsoli on siis tässä vaiheessa pelkkä ilmoitustaulu, jota kannattaa vilkaista aina kun jokin ei toimi.

19.3 Network eli verkkoliikenne

Verkkonäkymä listaa jokaisen tiedoston, jonka selain haki sivua ladatessaan. Avaa se ja lataa sivu uudelleen, niin lista täyttyy. Kiinnostavin sarake on Status:

• 200 tiedosto löytyi,
• 304 tiedosto oli jo välimuistissa eikä ollut muuttunut,
• 403 tiedostoon ei ole lukuoikeutta,
• 404 tiedostoa ei löytynyt.

Tämä on nopein tapa selvittää, miksi kuva ei näy palvelimella. Napsauta punaisena näkyvää riviä, niin näet, mitä osoitetta selain oikeasti yritti hakea. Useimmiten osoitteessa on väärä kirjainkoko tai kansio, jota ei ole olemassa.

19.4 Näytön koon simulointi

Työkalupalkin laitepainike (Chromessa Toggle device toolbar, Ctrl+Shift+M) näyttää sivun kapealla näytöllä. Kokeile aina, miltä sivusi näyttää noin 360 pikselin levyisenä. Jos teksti valuu reunan yli tai sivua pitää vierittää sivusuunnassa, jokin on pielessä. Yleisin syy on puuttuva viewport-metaelementti tai liian leveä taulukko tai kuva.

19.5 Saavutettavuusnäkymä

Elementtinäkymän vieressä on Accessibility-välilehti. Se näyttää sivun sellaisena kuin ruudunlukija sen näkee:

• Accessibility Tree kertoo, minä elementtinä kukin osa tulkitaan ja mikä sen nimi on. Kuvan nimi tulee alt-tekstistä ja linkin nimi linkkitekstistä. Jos kohdan nimi on tyhjä tai se on tiedostonimi, korjattavaa löytyi.
• Firefoxin saavutettavuusnäkymässä on lisäksi Check for issues, joka listaa puutteet suoraan.

Chromessa ja Edgessä sama puu löytyy elementtinäkymän oikean laidan Accessibility-paneelista. Rastittamalla Enable full-page accessibility tree saat koko sivun puun näkyviin elementtinäkymän tilalle.

19.6 Otsikkorakenteen tarkistaminen

Otsikkotasot ovat dokumentin runko, mutta selain ei näytä niitä valmiina listana. Kaksi virhettä kannattaa etsiä: onko sivulla useampi kuin yksi h1 ja hyppääkö jokin otsikko tason yli, esimerkiksi h2:sta suoraan h4:ään. Kumpaakaan ei näe sivua katsomalla, koska otsikon koon määrää CSS eikä taso.

Nopein tapa harjoitustyötä tehdessä on VS Coden Outline-näkymä, koska se päivittyy samalla kun kirjoitat.

20. Lighthouse

Lighthouse on Googlen tekemä automaattinen tarkistustyökalu, joka on sisäänrakennettuna Chromessa ja Edgessä. Se lataa sivun, tekee sille joukon testejä ja antaa raportin neljästä osa-alueesta.

20.1 Näin ajat testin

1. Avaa sivusi Chromessa tai Edgessä. Sivun on oltava selaimessa auki; Lighthouse testaa sitä sivua, joka on näkyvissä.
2. Avaa kehittäjätyökalut (F12) ja valitse välilehti Lighthouse. Se voi olla piilossa välilehtien lopun »-painikkeen takana.
3. Valitse Mode: Navigation, Device: Mobile ja rastita ainakin Accessibility ja Best Practices.
4. Paina Analyze page load ja odota puolisen minuuttia. Älä koske selaimeen sillä aikaa.
5. Lue raportti. Jokainen punainen tai keltainen kohta aukeaa napsauttamalla, ja siinä kerrotaan mitä on vialla, missä elementissä ja miten se korjataan.

20.2 Miten raporttia luetaan

Tyypillisiä löydöksiä Accessibility-osiossa ovat:

21. Yleisimmät virheet HTML-dokumentissa

22. HTML-dokumentin tuottamisen vaiheet

1. Kirjoita dokumentin sisältö.
2. Merkitse dokumentin rakenne.
3. Validoi dokumentti W3C:n validaattorilla. Voit ladata tiedoston tai liittää koodin suoraan, joten julkaisemista ei tarvitse odottaa.
4. Korjaa virheet ja validoi uudelleen, kunnes tulos on puhdas.
5. Testaa dokumentti vähintään kahdella eri selaimella ja kapealla näytöllä.
6. Määrittele ulkoasu CSS:llä.
7. Validoi CSS CSS-validaattorilla.
8. Siirrä dokumentti ja kaikki siihen liittyvät tiedostot www-palvelimelle.
9. Tarkista sivu vielä palvelimelta. Kuvat ja tyylit paljastavat siinä vaiheessa, jos jokin tiedosto jäi siirtämättä tai osoite on väärin.

23. WWW-sivun julkaisu JYU:ssä

Voit julkaista sivusi tallentamalla sen W:-asemalle. Jos W:-asema ei ole suoraan käytettävissä, toimi digipalvelujen ohjeen mukaan. Kotisivutila aktivoidaan sso.jyu.fi-palvelussa.

Sivusi löytyy osoitteesta

https://users.jyu.fi/~omatunnus/kansio/tiedoston_nimi.html

Komentoriviltä samaan tilaan pääsee kotihakemistoon tehdyn html-linkin kautta. Oikeuksien asettaminen, kirjainkoon merkitys ja rivinvaihdot käsitellään komentoriviluennon luvussa 30.

24. Tarkistuslista

Käy lista läpi, ennen kuin palautat harjoitustyön.

1. Onko dokumentin alussa <!DOCTYPE html>?
2. Onko html-elementissä lang ja xml:lang?
3. Onko head-osassa meta charset, viewport ja kuvaava title?
4. Onko sivulla täsmälleen yksi h1 ja etenevätkö otsikkotasot loogisesti?
5. Onko jokaisella kuvalla alt? Onko koristekuvilla alt=""?
6. Onko kaikki suljettu, ja onko kauttaviivaa käytetty vain void-elementeissä?
7. Kertovatko linkkitekstit, minne linkki vie?
8. Onko taulukoissa caption, th ja scope?
9. Meneekö dokumentti validaattorista läpi ilman virheitä?
10. Onko konsolissa virheilmoituksia ja verkkonäkymässä 404-rivejä?
11. Mitä Lighthousen Accessibility-osio sanoo?
12. Onko tiedosto tallennettu UTF-8-muodossa ja LF-rivinvaihdoilla?
13. Toimivatko kaikki linkit ja näkyvätkö kuvat myös palvelimelta katsottuna?

25. Lisätietoa

• MDN: HTML on paras hakuteos yksittäisistä elementeistä ja attribuuteista.
• MDN: Learn HTML on laaja englanninkielinen oppimateriaali harjoituksineen.
• HTML Living Standard on varsinainen määrittely. Tarkka mutta raskaslukuinen.
• Tavallisimmat HTML-elementit, kurssin oma tiivistelmä.
• W3C:n validaattori ja CSS-validaattori.
• Jukka Korpela: Merkit ja koodaukset.
• Saavutettavuusvaatimukset.fi.
• Chrome DevTools ja Firefoxin kehittäjätyökalut.
• Lighthouse ja selaimesta riippumaton PageSpeed Insights.