HTML5-perusteet

Luennolla käsitellään WWW-sivujen kirjoittamista eli opetellaan perusteet HTML5-dokumenttien tuottamisesta. WWW-sivun ulkoasun muotoilu käsitellään myöhemmillä luennoilla.

Dokumenttityypeistä

Word tallentaa omassa tiedostomuodossaan XHTML-editori tallentaa tekstinä

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

Standardeista lyhyesti

WWW-sivujen tekeminen

WWW-sivujen tekemisessä voidaan erottaa samat vaiheet kuin tekstinkäsittelydokumentin tekemisessä. Nämä vaiheet ovat:

Editorit

WWW-sivuja voidaan tuottaa niihin erikoistuneilla ohjelmilla, jotka näyttävät suoraan miltä sivu näyttää selaimessa. Sivuja voidaan tuottaa myös kirjoittamalla suoraan HTML5-merkintäkieltä. HTML5-kielen kirjoittaminen EI ole ohjelmointia.

HTML5-merkintäkieli ei kiinnitä millään tavalla dokumentin ulkoasua vaan ainoastaan dokumentin rakenteen.

Graafisia WYSIWYG (What You See Is What You Get) -editoreita on syytä välttää jos ei ymmärrä rakenteen ja ulkoasun eroa. WWW-sivujen yhteydessä WYSIWYG on muutenkin harhaanjohtava käsite, koska et voi oikeasti tietää miltä sivusi näyttää missäkin ympäristössä.

Rakenteen merkitseminen

HTML5-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.

Elementeillä on aina aloitus ja lopetus joiden välissä on varsinainen elementin sisältö. esim.

<title>Web-julkaiseminen</title>

<title> on aloituselementti (tagi).

</title> on lopetuselementti (tagi). Lopetuselementissä on aina /-merkki

Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin: <br />

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Tavallisimmista XHTML/HTML5-elementeistä löytyy dokumentti opettelun tueksi.

http://appro.mit.jyu.fi/doc/www/xhtml/

Ominaisuudet eli attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla:

<a href="http://www.jyu.fi/" title="Linkin otsikko">Jyväskylän yliopisto</a>

Attribuutit kirjoitetaan aloituselementin sisään välilyönneillä eroteltuina siten, että ensin kirjoitetaan attribuutin nimi (esim. href) ja sitten =-merkki ja tämän jälkeen lainausmerkkien ("") sisään attribuutille annettava arvo.

Dokumentin on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia 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>
            

HTML5-standardi katsoo paikoin läpi sormien lopetustagien puuttumista mutta tämän jälkeen dokumentti ei enää ole XML-yhteensopiva. Tällä kurssilla kirjoitamme vain XML-yhteensopivia dokumentteja.

Dokumentin pitää olla validi

Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä ja mitä attribuutteja kuuluu millekin elementille jne.

HTML5

Käytämme tällä kurssilla HTML5-dokumenttityyppiä.

HTML5-dokumenttien tarkistamiseen eli validointiin on olemassa HTML-validaattoreita kuten W3C Markup Validation Service.

Pelkillä www-selaimilla testaamiseen ei voi luottaa koska ne yrittävät hiljaisuudessa ohittaa käyttäjän tekemät virheet, jonka tuloksena virheellinen dokumentti toimii kuun asennosta, auringonpilkuista ja käytetystä selaimesta riippuen ehkä joskus tai ei koskaan.

HTML5-dokumentin runko

<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8" />
<link href="tyyli.css" rel="StyleSheet" type="text/css" />
<title>Sivun otsikko</title>
</head>
<body>
<h1>Otsikko</h1>
<p>...Sivun sisältöä tänne...</p>
</body>
</html>
            

Erikoismerkkien koodaus

Osoitteissa olevat erikoismerkit

Osoitteissa eli URLeissa olevat erikoismerkit on koodattava omalla tavallaan. Älä käytä näitä merkkejä omien tiedostojesi tai kansioidesi nimisssä.

Merkki Koodi
Välilyönti %20
ä %E4
ö %F6
å %E5
Ö %D6
Ä %C4
Å %C5
& %26
+ %2b
/ %2f
= %3d
? %3f

Älä koodaa osoitteissa olevia /-merkkejä äläkä osoitteen alkuosaa http://jotain.muuta.palvelin/

Erikoismerkkien koodaamisen voi tehdä valmiilla palvelulla.

Jos lisäät www-dokumenttiisi linkin (a-elementti) tai kuvaviittauksen (img-elementti) tai viittauksen css-tiedostoon (link-elementti) niin osoitteessa olevat edellämainitut erikoismerkit on kirjoitettava koodatussa muodossa.

Esimerkki

Kuvatiedoston nimi on DSCN4283-Hämähäkki.jpg mutta ä-kirjaimet on koodattava seuraavasti:

<p>
<img
  src="DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä"
  title="Hämähäkki lämmittelee auringossa" />
</p>

Sama pätee tavallisen linkin kohdalla:

Koodattu linkki Koodaamaton linkki

<p>
<a
 href="http://hazor.iki.fi/2002/jotunheimen/tommi/DSCN4283-H%E4m%E4h%E4kki.html">
 Hämähäkki</a>
</p>

Esim. Testilinkki

<a href="http://appro.mit.jyu.fi/t%E4m%E4%20on%20osoite/">Testilinkki</a>

Linkkejä erikoismerkkien koodaamisesta

Dokumentin perusrakenne

Seuraavassa kuvassa on esitettynä dokumentin perusrakenne. Perusrakenteesta kannattaa huomata seuraavat asiat:

Dokumentin rakenne puumaisena esityksenä

Hyvä rakenne - otsikkotasot löytyvätHuono rakenne - ei otsikkotasoja ja liian syvä Xetor-ohjelman rakennenäkymä

HTML5:n elementit

Seuraavassa kaaviossa pyritään selventämään HTML5-elementtien suhdetta toisiinsa. Kaaviosta puuttuu hyvin paljon elementtejä ja kaavio ei ilmaise täysin elementtien välisiä riippuvuuksia.
XHTML-elementtien rakennekaavio

HTML5-elementtien rakennekaavio

Lohkotason elementit

Lohkotason elementtejä voi sijoittaa suoraan body-elementin sisään.

Useimmat lohkotason elementit voivat sisältää joko pelkkää tekstiä tai merkkitason elementtejä.

Otsikkoelementit - (h1 - h6)

<h1>Ensimmäisen tason otsikko</h1>

  <p>Tämä on tekstikappale</p>

<h2>Toisen Tason otsikko</h2>

  <p>Tämä on tekstikappale</p>
        

Dokumentin rakennetta voi katsella Firefoxissa Inspectorin avulla. Näppäinyhdistelmä CTRL+SHIFT+C avaa Inspectorin.

Tekstikappale - p

<p>
  Tämä on tekstikappale
</p>
<p> Tämä on tekstikappale </p>
        

Erilaiset listat

Listat ovat myös lohkotason elementtejä. Listojen sisään voi sijoittaa sekä merkkitason elementtejä että toisia lohkotason elementtejä

Seuraavassa on esimerkkien avulla käsitelty järjestämätön ja järjestetty lista sekä määritelmälista.

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

<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio</li>
  <li>Järjestämättömän listan kolmas alkio</li>
  <li>Järjestämättömän listan neljäs alkio</li>
</ul>
        

Järjestetty lista - ol

  1. Järjestetyn listan ensimmäinen alkio
  2. Järjestetyn listan toinen alkio
  3. Järjestetyn listan kolmas alkio
  4. Järjestetyn listan neljäs alkio
<ol>
  <li>Järjestetyn listan ensimmäinen alkio</li>
  <li>Järjestetyn listan toinen alkio</li>
  <li>Järjestetyn listan kolmas alkio</li>
  <li>Järjestetyn listan neljäs alkio</li>
</ol>

        

Sisäkkäiset listat

Huom! Listaelementin (ul tai ol) sisällä saa suoraan olla VAIN li-elementtejä. li-elementin sisään voi sijoittaa mitä tahansa elementtejä kuten uuden listan.

  1. Järjestetyn listan ensimmäinen alkio
    • Järjestämättömän listan ensimmäinen alkio
    • Järjestämättömän listan toinen alkio
      1. Järjestetyn listan ensimmäinen alkio
      2. Järjestetyn listan toinen alkio
    • Järjestämättömän listan kolmas alkio
  2. Järjestetyn listan toinen alkio
  3. Järjestetyn listan kolmas alkio
    • Järjestämättömän listan ensimmäinen alkio
    • Järjestämättömän listan toinen alkio
    • Järjestämättömän listan kolmas alkio
      • Järjestämättömän listan ensimmäinen alkio
      • Järjestämättömän listan toinen alkio
    • Järjestämättömän listan neljäs alkio
<ol>
<li>Järjestetyn listan ensimmäinen alkio
<ul>
  <li>Järjestämättömän listan ensimmäinen alkio</li>
  <li>Järjestämättömän listan toinen alkio
    <ol>
      <li>Järjestetyn listan ensimmäinen alkio</li>
      <li>Järjestetyn listan toinen alkio</li>
    </ol>
  </li>
  <li>Järjestämättömän listan kolmas alkio</li>
</ul>
</li>
<li>Järjestetyn listan toinen alkio</li>
<li>Järjestetyn listan kolmas alkio
    <ul>
      <li>Järjestämättömän listan ensimmäinen alkio</li>
      <li>Järjestämättömän listan toinen alkio</li>
      <li>Järjestämättömän listan kolmas alkio
          <ul>
            <li>Järjestämättömän listan ensimmäinen alkio</li>
            <li>Järjestämättömän listan toinen alkio</li>
          </ul>
      </li>
      <li>Järjestämättömän listan neljäs alkio</li>
    </ul>
</li>
</ol>
        

Taulukot

Taulukoita rakennettaessa kannattaa huomata seuraavia asioita:

Seuraavassa yksinkertainen esimerkki taulukosta, jossa on neljä riviä ja kaksi saraketta.

Taulukkoon liittyvä otsikko
Esimmäisen sarakkeen otsikkoToisen sarakkeen otsikko
1. rivin 1. solu1. rivin 2. solu
2. rivin 1. solu2. rivin 2. solu
3. rivin 1. solu3. rivin 2. solu
<table summary="Tekstikuvaus taulukon sisällöstä">
<caption>Taulukkoon liittyvä otsikko</caption>
<tr>
  <th>Esimmäisen sarakkeen otsikko</th>
  <th>Toisen sarakkeen otsikko</th>
</tr>
<tr>
  <td>1. rivin 1. solu</td>
  <td>1. rivin 2. solu</td>
</tr>
<tr>
  <td>2. rivin 1. solu</td>
  <td>2. rivin 2. solu</td>
</tr>
<tr>
  <td>3. rivin 1. solu</td>
  <td>3. rivin 2. solu</td>
</tr>
</table>
        
Ensimmäinen otsikko Toinen otsikko Kolmas otsikko
1. rivin 1. 1. rivin 2. 1. rivin 3.
2. rivin 1. 2. rivin 2. 2. rivin 3.
3. rivin 1. 3. rivin 2. 3. rivin 3.
4. rivin 1. solu kolmen sarakkeen alueelle
5. rivin 1. 5. rivin 2.kahdella riville5. rivin 3.
6. rivin 1. 6. rivin 3.
<table  summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" >
<tr>
 <th>Ensimmäinen otsikko</th> <th>Toinen otsikko</th> <th>Kolmas otsikko</th>
</tr>
<tr>
 <td>1. rivin 1.</td> <td>1. rivin 2.</td> <td>1. rivin 3.</td>
</tr>
<tr>
 <td>2. rivin 1.</td> <td>2. rivin 2.</td> <td>2. rivin 3.</td>
</tr>
<tr>
 <td>3. rivin 1.</td> <td>3. rivin 2.</td> <td>3. rivin 3.</td>
</tr>
<tr>
 <td colspan="3">4. rivin 1. joka laajenee kolmen sarakkeen alueelle</td>
</tr>
<tr>
 <td>5. rivin 1.</td> <td rowspan="2">5. rivin 2. kahdella riville</td> <td>5. rivin 3.</td>
</tr>
<tr>
 <td>6. rivin 1.</td>  <td>6. rivin 3.</td>
</tr>
</table>
        

Korvattavat elementit

Korvattavia elementtejä voidaan sijoittaa lohko- tai tekstitason elementtien sisään.

img - Kuva

Seuraavassa esimerkki img-elementin käytöstä.

Käytettävä kuva voi sijaita millä tahansa www-palvelimella jos kuvan osoitteeksi kirjoitetaan kokonainen URI:

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

Useimmiten kuvat sijaitsevat samalla palvelimella ja samassa kansiossa kuin html-dokumenttikin. Tällöin on järkevintä käyttää suhteellista osoitusta kuvaan:

<p>
<img src="appro2.png" alt=" " title="Appro-logo" />
</p>

Kuvalle pitää keksiä korvaava tekstikuvaus alt-attribuutin arvoksi. alt-attribuutin sisältö näytetään jos kuvaa ei pystytä esittämään.

Hämähäkki lämmittelee auringossa rinkan päällä

<p>
<img
  src="http://hazor.iki.fi/2002/jotunheimen/tommi/thumbs/DSCN4283-H%E4m%E4h%E4kki.jpg"
  alt="Hämähäkki lämmittelee auringossa rinkan päällä"
  title="Hämähäkki lämmittelee auringossa" />
</p>

br - pakotettu rivinvaihto

Tekstitason elementit

Seuraavaan on kerätty listaksi tekstitason elementit.

Hyperlinkit - a

a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.

Dokumentin otsikkotietoihin sijoitettavat elementit

Linkkielementti - link

<link
  rel="StyleSheet"
  href="http://appro.mit.jyu.fi/appro2003.css"
  type="text/css"
/>

Metaelementti - meta

<meta 
    charset="UTF-8"
/>

Yleisimmät virheet HTML-dokumentissa

HTML-dokumentin tuottamisen vaiheet

  1. Kirjoita dokumentin sisältö
  2. Määrittele dokumentin rakenne
  3. Siirrä dokumentti WWW-palvelimelle
  4. Validoi dokumentti
  5. Testaa dokumentti jollakin selaimella
  6. Määrittele dokumentin ulkoasu (CSS)
  7. Validoi CSS
  8. Testaa ulkoasu selaimilla

WWW-sivun julkaisu JYU:ssä

Voit julkaista sivusi tallentamalla sen W:-asemalle. Jos W:-asemaa ei ole suoraan käytettävissä joudut toimimaan seuraavan ohjeen mukaan:

  1. Tee ensimmäisellä kerralla seuraavat alkuvalmistelut:
    • Aktivoi WWW-hakemistosi salasana.jyu.fi-palvelun kautta. Aktivoi myös Unix-käyttöoikeutesi.
    • Ota SSH-pääteyhteys jalava- tai halavakoneeseen esim. Puttylla

      Luo symbolinen linkki WWW-hakemistoosi jotta pääset jatkossa helpommin käsittelemään kansion tiedostoja. Kirjoita komento:

      ln -s /wwwhome$HOME/html $HOME/html

      Nyt kotihakemistossasi on html-niminen kansio, joka osoittaa suoraan W:-aseman tiedostoihisi.

  2. Ota jollakin SFTP-ohjelmalla yhteys jalava- tai halavakoneeseen Esim. WinSCP.
  3. Kopioi WinSCP:llä haluamasi tiedostot html-kansioon

Sivusi löytyy osoitteesta http://users.jyu.fi/~omatunnus/kansio/tiedoston_nimi

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/html5/
© 2017-09-11 16:07:17
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta