HTML5-perusteet

Näissä tehtävissä on tarkoitus tutustua 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, esimerkiksi Visual Studio Code

Malliratkaisu ZIP-paketissa

Yleisimmät käytettävät elementit esimerkkien kera löydät erillisestä dokumentista tai HTML5-luennolta.

Suositeltava WWW-selain käytettäväksi tehtävien yhteydessä on Firefox.

Alkuvalmistelut

Jos teet tehtäviä kotikoneella niin asenna koneellesi Firefox ja Visual Studio Code Agoran mikroluokkiin Visual Studio Code on jo asennettu.

Asenna Firefox-selaimeen Web developer-työkalupalkki. Samasta työkalusta löytyy myös Chrome-selaimessa toimiva versio

  1. Mene Web Developer -laajennoksen asennussivulle.
  2. Napauta sivulta Add to Firefox ja sen jälkeen Install Now esiin tulevasta ikkunasta.
  3. Työkalupalkkiin ilmestyy asennuksen jälkeen uusi ikoni, jonka alta löytyvät web developer toolbarin työkalut
  4. Huom. Web Developer -laajennus on eri asia kuin Firefoxin Tools-valikosta löytyvät Web Developer -työkalut

Sivuston rakenne

Hakemistorakenne

Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle. Sivuille halutaan seuraavia osioita:

Jätetään sivuston toiminnallisuuden toteuttaminen myöhempään vaiheeseen ja aloitetaan sivuston hakemistorakenteen suunnittelulla. Koska sivuja (.html-tiedostoja) tulee olemaan useita ja erilaisten sivujen määrä saattaa vielä jatkossakin kasvaa, on hyvä tehdä sivustolle oma hakemistorakenne. Kutakin sivua kohden on järkevä luoda oma hakemistonsa. Tämä helpottaa sivuun liittyvien tiedostojen arkistointia ja yksinkertaistaa WWW-osoitteita.

HUOM! ohjeessa oletetaan, että ne tehdään Agoran mikroluokissa, jolloin tiedostot voidaan siirtää suoraan Resurssienhallinnan kautta W-asemalle. Kotikoneilla siirtämiseen Jos tehtäviä tekee kotikoneella niin käytä Kotisivujen siirtäminen www-palvelimelle -ohjeessa neuvottuja tapoja.

Hakemistorakenteen luonti

Luo edellä olevaa kuvaa vastaava hakemistorakenne Windows Explorerilla (suom. Resurssienhallinta, Win+E) W:-asemalle. Kts. Tallentamisen hyvät käytänteet ja Uuden kansion luominen

Sivujen rakenne

Lisätään suunnitelman mukaiset tekstit sekä kuvat useammalle sivulle ja muokataan sivujen rakenne kuntoon. Avaa suunnitelma omaan ikkunaan.

Käynnistä haluamasi tekstieditori. Esim. Visual Studio Code

Etusivu

Tee ensimmäisenä sivuston etusivu, jonne tulevat seuraavat asiat:

  1. Aloita uusi dokumentti ja tallenna se W:-aseman www-hakemistoon nimellä index.html.
  2. Avaa selaimeen HTML5-luennolla näytetty HTML5-dokumentin pohja selitteineen. Tutki mitä eri osia pohjassa on. Kopioi pohja uuden dokumenttisi sisällöksi. Tallenna.
  3. Laita title-elementin sisällöksi Nanonano. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.
  4. Lisää sivulle pääotsikko (h1). Kirjoita otsikkoon myös Nanonano.
  5. Kirjoita lyhyt parin lauseen kuvaus siitä, mitä Nanonano harrastaa ja opiskelee. Käytä p-elementtiä.
  6. Laita väliotsikoksi (h2) Yhteystiedot ja kirjoita Nanonanon osoite, puhelinnumero ja sähköpostiosoite. Tiedot löydät suunnitelmasta.
    • Yhteystiedot saat jaettua siististi omille riveilleen br-elementin avulla. Esim. 
      <p>Antti Ekonoja<br />
Ag C522.3<br />
2746</p>
    • Tee sähköpostiosoitteesta mailto-linkki. mailto: on kirjoitettava itse viitetekstiin, kun kyse on sähköpostiosoitteista. Linkin pitäisi näyttää seuraavan kaltaiselta: 
      <a href="mailto:antti.j.ekonoja@jyu.fi">antti.j.ekonoja@jyu.fi</a>
  7. Tallenna esimerkkikuva W:\www\-hakemistoon. Lisää yhteystietojen perään uusi kappale (p) ja sijoita siihen valokuva (img). 
    <img src="kuva.png" alt="Antti Ekonoja luennoi CSS-tyylisivuista" title="Luento 2" />
    • src-ominaisuus. Ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistossa dokumentin kanssa.
    • alt-ominaisuus. Attribuutti kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia.
    • title-ominaisuus. Ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle.
  8. Kirjoita vielä dokumentin loppuun tiedot sivun ylläpitäjästä ja sivun päivitysajankohdasta seuraavan esimerkin mukaan: 
    <address>
<a title="Sivun ylläpitäjä" href="http://users.jyu.fi/~kayttajatunnus/">
 Matti Meikäläinen</a>
(<a title="Sivun ylläpitäjän sähköpostiosoite" href="mailto:etunimi.x.sukunimi@jyu.fi">
 etunimi.x.sukunimi@jyu.fi</a>)
<strong>2011-01-13 14:48</strong>
</address>
    • href-ominaisuus. Ominaisuus määrittää linkin osoitteen.
    • title-ominaisuus. Ominaisuus kertoo linkin otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri linkin päälle.
  9. Tallenna dokumenttisi W:-aseman www-hakemistoon index.html-nimelle. index.html on useimmissa WWW-palvelimissa (Apache) oletustiedosto, joka palautetaan pyydettäessä tiettyä hakemistoa. Tämän tiedoston voi nyt selaimella avata seuraavasta osoitteesta: 
    http://users.jyu.fi/~omatunnus/www/
    Kokeile firefoxilla toimiiko ja aukeaako dokumenttisi. Huomaa, että index.html-tiedoston nimeä ei tarvitse kirjoittaa osoitteeseen, koska www-palvelin osaa antaa sen automaattisesti.

    Jos teet sivuun muutoksia, muista päivittää selaimen näkymä aina SHIFT+CTRL+R-näppäinyhdistelmällä, joka varmasti näyttää tuoreimman version dokumentistasi. Pelkkä refresh/reload-painikkeen painaminen ei aina riitä.

  10. Valitse nyt Firefoxin Web Developer -työkalupalkista Web developer toolbar Tools | Validate HTML. Tällä valinnalla saat tarkistettua, että dokumenttisi on HTML5-standardin "kieliopin" mukaista.

    Jos validointi ei onnistu eli saat virheilmoituksen Sorry! this document cannot be checked, varmista, että sivusi oli auki http://users.jyu.fi-alkuisesta osoitteesta. file://-alkuiseen osoitteeseen ei validaattorilla ole pääsyä, koska tuo ei ole julkinen osoite.

    Koodin pitäisi olla virheetöntä, jos olet noudattanut demo-ohjeita tarkasti. Jos sait virheilmoituksia niin korjaa virheet yksi kerrallaan. Aloita ensimmäisestä virheestä, korjaa se, tallenna ja tee validointi uudelleen. Yksi virhe voi aiheuttaa useita muita lisävirheitä joten ei kannata korjata kuin yksi kerrallaan ja ensimmäisestä aloittaen.

  11. Sivun validoinnin voit tehdä helposti myös ilman Web Developer -laajennusta. Raahaa kirjanmerkkeihisi tai mieluiten kirjanmerkkipalkkiin (bookmarks toolbar) seuraava linkki: Validoi tämä sivu. Tätä linkkiä napauttamalla saat nopeasti validoitua aina sen sivun, joka selaimessa on avoinna.

Opiskelut

  1. Aloita uusi HTML5-dokumentti (samalla tavalla kuin pääsivukin) ja tallenna dokumentti W:\www\opiskelu\-kansioon index.html-nimellä. Ole tarkkana, että tallennat oikeaan kansioon. Älä tallenna vahingossa aiemmin tekemäsi dokumentin päälle.
  2. Keksi opiskeluihin liittyvälle dokumentille body-osaan järkevä pääotsikko (h1) ja head-osaan sopiva title (esim. Opiskelu tai Opiskelu - Nanonano, sivua parhaiten kuvaava sana ensin).
  3. Lisää dokumentiin toisen tason (h2) otsikko Viikkolukujärjestys.
  4. Kirjoita dokumenttiin esimerkin mukainen viikkolukujärjestys taulukkomuodossa. Taulukkojen määrittelyn voit kerrata HTML5-luennolta.
    esimerkkikuva taulukosta
  5. Lisää väliotsikko Opintosuoritusote ja sen perään tekstinä Nanonanon suorittamat kurssit. Käytä pre-elementtiä, koska teksti halutaan muotoilemattomana.
  6. Tallenna ja testaa sivua selaimella. Sivun pitäisi näkyä myös osoitteessa:

    http://users.jyu.fi/~tunnus/www/opiskelu/

  7. Validoi sivusi samaan tapaan kuin teit aiemmin.

Linkit

  1. Aloita taas uusi dokumentti. Dokumenttiin lisätään suosikkilinkit. Tallenna tiedosto index.html-nimellä linkit-hakemistoon.
  2. Lisää asianmukaiset otsikot (title ja h1).
  3. Keksi sopivat linkkitekstit ja lisää suunnitelman kiinnostavat linkit sivulle järjestämättömänä listana (ul).
  4. Tee linkkiteksteistä hyperlinkkejä. Laita viitetekstiksi kyseisen sivun WWW-osoite (a-elementin href-attribuutti). 
    <a href="http://www.osoite.example/">Linkkiteksti</a>
  5. Testaa sivua selaimella ja validoi se.

Artikkelit

  1. Aloita uusi dokumentti. Tallenna tiedosto artikkelit-hakemiston it-alihakemistoon nimellä index.html.
  2. Lisää otsikko IT ja tietoliikenne: kurkistus tulevaisuuteen. Keksi myös sopiva teksti title-elementtiin. Esim. 
    IT ja tietoliikenne: kurkistus tulevaisuuteen - Artikkelit - Nanonano
  3. Lisää artikkeliin 10 kappaletta (paragraphs) tekstiä Lorem Ipsum -generaattorilla. Palvelu tuottaa latinan kielistä tekstiä, jota käytetään usein tekstidokumenttien testitekstinä.
  4. Liitä teksti dokumenttiin. Tarkista, että kukin kokonainen kappale on merkitty p-elementillä.
  5. Lisää väliin muutama toisen tason otsikko vaikkapa teksteillä Vertebra cervicalis ja Dorsum tergum.
  6. Tallenna kaavio.png-kuva it-hakemistoon. Lisää johonkin kohtaan dokumenttia uusi tyhjä kappale (p) ja kappaleen sisälle kaaviokuva. Kuvan lisääminen tapahtuu samalla tavalla kuin etusivulle.
  7. Tallenna dokumentti, testaa selaimella ja validoi.
  8. Tee kokkaus-hakemistoon uusi dokumentti index.html-nimellä. Lisää looginen title, esimerkiksi: 
    Kuinka valmistaa hyvää opiskelijaruokaa halvalla? - Artikkelit - Nanonano
    Lisää myös sopiva h1-otsikko, mutta muutoin dokumentin tekemisen voi jättää alkutekijöihin.
  9. Tee uusi dokumentti artikkelit-hakemiston alle index.html-nimellä.
    • Lisää dokumentin otsikoksi Artikkelit ja title-elementtiin esimerkiksi 
      Artikkelit - Nanonano
    • Aloita järjestämätön lista artikkeleista ja lisää listakohdiksi artikkelien nimet.
    • Tee artikkeleista linkkejä. Sijoita viitetekstiksi (href-attribuutti) suhteellinen viite kyseiseen artikkeliin.
      • Voit viitata artikkelin sisältävään hakemistoon, koska WWW-palvelin tarjoaa ensimmäisenä hakemistossa olevaa index.html-tiedostoa.
      • Suhteellisesta viittauksesta löytyy tietoa HTML5-luennolta.
      • Viittaukset tehdään suhteessa artikkelit-hakemistoon, jossa viittaava dokumentti sijaitsee. Esimerkkejä suhteellisesta viittauksesta: 
        "foo.html"       Tämän hakemiston foo.html-tiedosto.
"testi/bar.html" Tämän hakemiston testi-alihakemiston bar.html-tiedosto.
"testi/"         Alihakemisto testi, josta näytetään sivu index.html.
"../"            Isähakemisto (ylempi taso, jossa nykyinen hakemisto sijaitsee).
"../testi/"      Isähakemiston alihakemisto testi.

        Voit harjoitella suhteellisia viittauksia

  10. Tallenna dokumentti. Kokeile sivua suoraan avaamalla sivu selaimessa valinnan File | Open file... kautta sekä suoraan WWW-osoitteesta. Kokeile molemmissa tapauksissa tekemiäsi linkkejä. Mieti miksi linkit vievät erinäköisille sivuille, vaikka kyseessä onkin sama dokumentti.
  11. Validoi tekemäsi sivut.

Tyylit

Kokeile vaihtaa etusivun tyyliä muuttamalla head-elementissä olevan CSS-linkin (link) viitettä (href) muuhun tyylitiedostoon. Oletuksena käytössä pitäisi olla malli.css, mutta koska sitä ei ole tehty, niin todellisuudessa tyylitiedostoa ei ole käytössä vielä ollenkaan, vaan käytetään selaimen oletustyylejä. Kokeile esimerkiksi seuraavia tyylitiedostoja, jolloin saat tyylit todellisuudessa käyttöön:

Lisää esimerkkejä sivuston ulkoasun muuttamisesta löydät CSS Zen Garden -sivustolta. Tulevissa tehtävissä muokkaamme itse sivuston ulkoasua CSS-tyyleillä.

Lisätehtäviä

Laajaa sivustoa päivitetään yleensä 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 seuraaville kohdille voisi vielä luoda omat sivunsa:

Käyttäjien kommentit

Kommentoi Lisää kommentti