Demo 1 - HTML-perusteita

This demonstration is also available in english.

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin HTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Työvälineenä käytetään HTML-kit-editoria, jonka perusominaisuudet käydään läpi. Kokeillaan myös HTML-validaattorien toimintaa. Esimerkkejä XHTML-elementtien käyttämisestä voit katsoa toisesta luennolta.

HTML-kit

1. Kirjaudu sisään AGORANET:iin omalla tunnuksellasi.
2. Käynnistä HTML-kit (Start|Programs|HTML-kit|HTML-kit)
3. Valitse Create a new file ja paina OK.
4. Siirrytään muuttamaan HTML-kitin asetukset järkeviksi. Valitse Edit|Preferences.
   • Valitse välilehti Proofing. Poista ruksit kolmesta ylimmäisestä valinnasta niin HTML-kit ei turhaan kiusaa automaattisella oikuluvulla, joka ymmärtää vain englantia.
   • Valitse välilehti TIDY. Valitse Output: kohtaan vaihtoehto XML. Tämän valinnan jälkeen HTML-Kitiin sijoitettu HTML-tidy ohjelma osaa tarvittaessa korjata tekemiäsi virheitä ja huomauttaa niistä.
   • Hyväksy asetukset painamalla OK.
5. Kopioi leikepöydälle dokumentin pohjakoodi ja liitä se HTML-kitin dokumenttiin siellä ennestään olevan dokumenttipohjan päälle.

   
   <?xml version="1.0" encoding="ISO-8859-1"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
   <head>
   <title>Kuvaava otsikko</title>
   </head>
   <body>
   <h1>Otsikko</h1>
   </body>
   </html>
   

   Tätä pohjakoodia sinun kannattaa jatkossa käyttää kaikissa HTML-dokumenteissasi. Saman pohjakoodin voit liittää myös HTML-kitin asetuksiin kohtaan Edit|Preferences|Startup|Insert following text into new documents:.
   • xml-elementti kertoo käytetyn XML-standardin version.
   • DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
   • head-elementti sisältää kaiken dokumenttiin liittyvän metatiedon.
   • title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikko. Otsikon pitää olla järkevä vaikka se otettaisi erilleen koko dokumentista.
   • body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
   • h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo dokumentin pääotsikon.
6. Tallenna dokumenttisi U:\tietoverkot\-hakemistoon demo1.html-nimellä. Tallenna jatkossa kaikki muutkin dokumenttisi tähän samaan hakemistoon.
7. Kopioi Jukka Korpelan nyysietikettiä käsittelevä dokumentti Fiksu lukeminen leikepöydälle.
8. Liitä dokumentti leikepöydältä HTML-kitissä auki olevaan dokumenttiisi body-elementin sisään.
9. Tallenna dokumenttisi. Kokeile selaimella miltä dokumenttisi näyttää. Painamalla F8-näppäintä saat HTML-kitin avaamaan dokumenttisi oletusselaimeesi. Dokumentin pitäisi olla pelkkää yhtä pötköä, koska dokumentin rakennetta ei ole vielä määritelty.
10. Määritellään ensimmäiseksi dokumentin otsikko. Kirjoita title-elementin sisään Fiksu lukeminen [Nyysiopas]. Tämä teksti tulee näkyviin selainikkunan ylälaitaan.
11. Dokumentin pääotsikko määritellään h1-elementillä dokumentin rungossa eli body-elementin sisällä. Maalaa dokumentin rungon alku osassa oleva Fiksu lukeminen ja paina ALT-INSERT-näppäinyhdistelmää. HTML-kit kysyy millä elementillä haluat merkitä valitun alueen. Anna elementiksi h1 eli pääotsikko.
12. Tallenna dokumenttisi ja kokeile miten selaimesi esittää sen nyt. Siirry HTML-kitin äsken aukaisemaan selaimeen ja päivitä siellä näkyvä dokumentti Reload- tai Refresh-nappulalla. Pääotsikon pitäisi nyt selkeästi erottua muusta tekstistä.
13. Siirry takaisin HTML-kitiin ja poista dokumentin alussa (body-elementin sisällä) ennen pääotsikkoa olevat tekstit.
14. Jatketaan dokumentin rakenteen merkitsemistä. Aukaise HTML-kitin viereen näkyviin Jukka Korpelan sivu, jolta kopioit äsken tekstit. Etsi Korpelan dokumentista kaikki toisen tason otsikot joista ensimmäinen on Lukemisen tapoja: säännöllinen, satunnainen, kerrallinen. Hae (CTRL-H aukaisee HTML-kitissä hakudialogin) aina vastaava kohta HTML-kitissä olevasta dokumentistasi ja merkitse se h2-elementillä käyttäen apunasi HTML-kitin ALT-INSERT-näppäinyhdistelmätoimintoa. Merkittyäsi kaikki toisen tason otsikot tallenna dokumenttisi ja katso selaimella miten sen rakenne alkaa hahmottua.
15. Merkitse seuraavaksi aivan vastaavalla tavalla kaikki dokumentissa olevat yhtenäiset tekstikappaleet p-elementillä (paragraph). Tallenna ja vertaa selaimella alkuperäiseen Korpelan artikkeliin.
16. Lohkotason rakennemerkinnöistä puuttuvat vielä listat ja thread-esimerkin merkintä.
    • Muodosta ensimmäiseksi lista dokumentin alussa olevasta sisällysluettelosta. Maalaa kaikki listaan kuuluva teksti ja merkitse koko alue ul-elementillä (järjestämätön lista).
    • Tämän jälkeen täytyy jokainen listan alkio merkitä vielä li-elementillä (lista-alkio).
    • Kokeile selaimella onnistuiko listan määrittely.
    Esimerkki listasta:

    
    <ul>
      <li>Listan ensimmäinen alkio</li>
      <li>Listan toinen alkio</li>
      <li>Listan kolmas alkio</li>
    </ul>
    

17. Seuraava lista on aivan samanlainen järjestämätön lista kuin ensimmäinenkin. Merkitse siis se ul- ja li-elementeillä.
18. Dokumentin seuraava lista on slangia käsittelevässä kappaleessa. Korpela on käyttänyt tässä listassa tavallista järjestämätöntä listaa, mutta rakenteellisesti ehkä hieman oikeampi merkintätapa olisi käyttää määrittelylistaa (dl, koska kyseessä on kuitenkin erilaisten lyhenteiden määrittely.
    1. Merkitse kaikki määrittelylistaan tuleva teksti dl-elementillä.
    2. Merkitse kaikki määriteltävät sanat dt-elementeillä.
    3. Merkitse kaikki lyhenteiden määrittelyt dd-elementeillä.
    Esimerkki määrittelylistan käytöstä:

    
    <dl>
      <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
      <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>
    

19. Määrittele dokumentin lopussa oleva lista tavallisena järjestämättömänä listana.
20. Jäljellä on vielä thread-esimerkin määrittely. Koska kyseessä on suora kopio jonkin nyysiohjelman näytöstä niin pitää se pystyä esittämään juuri samassa muodossa, kuin se on HTML-tiedostoon kirjoitettu. Normaalistihan välilyönneillä ja rivinvaihdoilla ei ole merkitystä koska selain sovittaa tekstin näyttöönsä automaattisesti. Etukäteen muotoiltu teksti pitää merkitä pre-elementillä. Yleensä tätä elementtiä käytetään erityisesti ohjelmakoodin esittämisessä. Merkitse siis koko thread-esimerkki pre-elementillä.
21. Merkittyäsi nyt koko dokumentin sisällön erilaisilla lohkotason elementeillä voit nyt tarkistaa validaattorilla oletko tehnyt mahdollisesti virheitä tai jättänyt jotakin merkitsemättä.
    • Ensimmäinen tarkistus kannattaa tehdä HTML-kitiin rakennetulla Tidyllä, joka ei ole varsinainen validaattori, mutta osaa kuitenkin korjata dokumentin virheitä. Paina F9 niin HTML-kit suorittaa Tidy-tarkistuksen.
    • Dokumenttisi viereen aukeaa uusi ikkunassa jossa on dokumenttisi Tidyn muokkaamana. Mahdollisista virheistä tulee maininnat HTML-kitin alalaidassa olevaan status-ikkunaan.
    • Klikkaamalla virheilmoitusta HTML-kit hyppää suoraan virheelliseen kohtaan.
    • Saat dokumenttisi koko ruudun kokoisena alalaidasta löytyvällä editor-painikkeella.
    • Tidy ei tunnista käyttämääsi XHTML Basic dokumenttityyppiä, joten saat tästä varoituksen, josta ei tarvitse välittää.
22. Korjaa Tidyn löytämät virheet ja kokeile sen jälkeen oikeaa validaattoria.
    • Jos HTML-kitissä ei ole näkyvissä Actions-työkalupalkkia niin sinun pitää aktivoida se. Actions-työkalupalkki on pikapainikepalkin alla oleva palkki, jossa näkyy useita välilehtiä ([All], Tools, jne). Actions-työkalupalkin saat näkyviin valinnalla View|Actions Bar.
      
    • Valitse palkista välilehti online. Tältä välilehdeltä löytyy vasemmanpuoleisena WDG-validator-nappula. Tallenna ensin dokumenttisi ja sen jälkeen paina WDG-validator-nappulaa.
    • Odota hetki ja saat näkyviin dokumenttisi validointituloksen. Jos validaattori löytää virheitä niin se ilmoittaa rivinumeron missä virhe sen mielestä on ja kuvauksen virheestä.
    • Lue ilmoitukset ja korjaa ne dokumenttiisi. Voit vaihdella validaattori-ikkunan ja dokumenttisi välillä CTRL-TAB-näppäinyhdistelmällä.
    • Jos virheitä tulee paljon niin korjaa vain ensimmäinen ja suorita uusi validointi. Yksi sopiva virhe sopivassa paikassa voi aiheuttaa useamman virheen.
23. Korjattuasi dokumentin virheet voit jatkaa dokumentin rakenteen merkitsemistä tekstitason elementeillä. Seuraavaksi täytyy saada sisällysluettelon linkit toimimaan. Ensimmäiseksi täytyy merkitä kohdat joihin linkkien halutaan hyppäävän. Käy lisäämässä jokaiseen h2-elementtiin uniikki tunniste eli id. Tämä voidaan määritellä lisäämällä h2-elementille id-attribuutti eli ominaisuus. id-attribuutin arvojen pitää alkaa kirjaimella. Esim.

    
    <h2 id="o1">Lukemisen tapoja: säännöllinen, satunnainen, kerrallinen</h2>
    

    Anna jokaiselle h2-elementille oma tunniste. Helpointa lienee antaa id:t juoksevana sarjana esim. otsikko1, otsikko2, otsikko3 ...
24. Lisää nyt dokumentin alussa olevaan sisällysluettelolistaan linkit. Hyperlinkkejä määritellään a-elementillä, jonka href-ominaisuus sisältää tiedon osoitteesta johon halutaan hypätä. a-elementin sisältönä on varsinainen linkkiteksti. Esim.

    
    <li><a href="#o1">Lukemisen tapoja: säännöllinen, satunnainen, siltä väliltä</a></li>
    

    Jos linkki on vain dokumentin sisäinen niin linkkiosoite pitää aloittaa #-merkillä. Lisää sisällysluetteloon linkit kaikkiin väliotsikoihin. Tallenna dokumenttisi. Kokeile selaimessa linkkien toiminta. Validoi dokumentti ja korjaa mahdolliset virheet.
25. Alkuperäisessä dokumentissa on myös paljon linkkejä muihin dokumentteihin. Lisää harjoituksen vuoksi myös muutama tälläinen linkki.
    • Siirry dokumentin aivan loppuun ja etsi siellä olevasta listasta Good Times virusta koskeva kohta.
    • Käy kopioimassa Korpelan alkuperäisestä dokumentista Good Times -virusta koskea linkki. Linkin kopioiminen leikepöydälle onnistuu hiiren oikean napin avulla aukeavasta valikosta.
    • Lisää omaan dokumenttiisi ALT-INSERT-näppäinyhdistelmällä a-elementti samojen linkkisanojen ympärille kuin on Korpelan alkuperäisessä dokumentissakin.
    • Liitä leikepöydälle kopioimasi osoite tekemäsi a-elementin href-ominaisuuden arvoksi.
    • Kokeile linkin toiminta selaimella ja validoi dokumenttisi.
26. Tee vastaavalla tavalla linkit myös kohdista Internet virus warnings, rumors, and hoaxes ja Hoax Warnings.
27. Tallenna dokumenttisi ja sulje HTML-kit, jos et jatka enää lisätehtävillä.

Lisätehtäviä

Voit tehdä nämä tehtävät jos sinulle jäi vielä edellisten jälkeen aikaa ja/tai innostusta.

Kuvat

1. Aloita HTML-kitillä uusi tyhjä dokumentti.
2. Kopioi dokumentin pohjaksi sama pohjakoodi kuin aiemmassa tehtävässäkin.
3. Tallenna alla näkyvä kuva samaan hakemistoon kuin dokumenttisi. Tallentaminen onnistuu hiiren oikealla näppäimellä aukeavasta valikosta.

   

4. Lisää dokumenttiin yksi tekstikappale (p).
5. Lisää tekstikappaleen sisään img-elementti, johon liität seuraavat ominaisuudet:
   • src-ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistorakenteessa dokumentin kanssa. esim. <img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietoverkot työvälineenä kurssilla" title="Luento 1" />
   • alt-ominaisuus kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia. esim.<img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietoverkot työvälineenä kurssilla" title="Luento 1" />
   • title-ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle. esim.<img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietoverkot työvälineenä kurssilla" title="Luento 1" />
6. Kirjoita dokumenttiin liittämällesi kuvalle järkevät title- ja alt-tekstit.
7. Tallenna dokumenttisi ja kokeile selaimelle dokumentin toimintaa.
8. Validoi dokumenttisi ja korjaa mahdolliset virheet.

Taulukot

Katso luentosivulta kuinka luodaan taulukoita. Luo sen jälkeen edellisessä tehtävässä laittamasi kuvan jälkeen seuraavanlainen taulukko: