2.14 Tehtävä 6-9

Tehtävä 6: Otsikot ja leipäteksti

  1. Pistä aiemmin tekemäsi teksti (sivu_2.html) kokonaisuudessan yhden p-tagin sisään.
  2. Kopioi se kolmeen kertaan ja tasaa ensimmäinen kappale oikealle, toinen vasemmalle ja keskitä kolmas kappale.
  3. Lisää sivun alkuun otsikko "Harjoitustyö" tasolla 1 (H1)
  4. Leikitään vähän font-elementeillä: pistä joka toinen kirjain sinisellä ja joka toinen punaisella värillä (käytä värikoodeina blue ja red).
  5. Lisää heti sen perään ennen varsinaista tekstiosuutta otsikkotasolle 4 teksti: "Tekijä: (oma nimesi)"
  6. Varmista että muutokset näkyvät webissä eli http://www2.stadia.fi...
  7. Jos lopetit työskentelyn tältä osin tähän, poista kaikki paikalliset tiedostot.

Tehtävä 7: Listat

  1. Jos olet jo poistanut paikallisella koneella olevan version sivu_2.html:stä, kopioi se vaikka uudestaan web-kotihakemmistostasi paikalliselle koneelle työpöydälle tai Omat Tiedostot -hakemistoon.
  2. Lisää sivu_2.html:ään seuraava lista:
    1. Lempilevyni/biisini tällä hetkellä (siis omasi)
    2. Biisi jota viimeksi treenasin/blokkasin
    3. Kolme mieleisintä säveltäjää/sanoittajaa/instrumentalistia/laulajaa
      1. nimi
      2. nimi
      3. nimi
    4. minkä levyn haluaisin ostaa seuraavaksi
  3. Lisää listan eteen otsikko "Lista" tasolla 3. Tallenna ja testaa että muutos näkyy.
  4. Kopioi muutett tiedostot takaisin web-kotisivutilaasi ja varmista että tekemäsi muutos näkyy myös webissä eli http://www2.stadia.fi/~....
  5. Lopuksi, jos lopetat kurssin läpikäymisen tähän ja käytit koulun konetta niin poista paikallinen versio sivu_2.html:stä koneen kovalevyltä.

Tehtävä 8: linkit

  1. Lisää sivu_2.html:ään oman nimesi alle (tavallisena tekstinä, siis p-tagien sisään) teksti: e-mail: <sähköpostiosoitteesi, esim. tauno.testikayttaja@edu.stadia.fi> ja tuon osoitteen pitäisi toimia sitten samalla sähköpostilinkkinä
  2. Lisää nimesi alle normaalina tekstinä (p-tagien sisään) linkki Stadian kotisivulle ja pistän linkin nimeksi "Stadian portaali"
  3. Tee sivun loppuun vielä suora linkki kokoamalleni linkkisivulle http://media.stadia.fi/~karva/mute_links.html ja siellä osioon Digitaaliaudio. Joudut siis linkittämään keskelle pitkää sivua etkä sivun alkuun. Tutki sivun koodia tai osioiden välissä olevia linkkejä, jotta löydät oikean ankkurin nimen.
  4. Jos lopetat tähän ja olet käyttänyt koulun konetta, siivoa jälkesi eli poista paikkallisesti tallentamasi tiedostot.

Tehtävä 9: kuvat

  1. Etsi netistä joku sopiva kuva, ja linkitä laita sähköpostiosoitteesi eteen. Joitain kuvia löytyy osoitteesta http://www.utaj.fi/www/kuvakkeet/ esim. http://www.utaj.fi/www/kuvakkeet/Smile.gif mutta voit käyttää mitä tahansa muutakin kuvaa. Jos löydät joltain nettisivulta kuvan jonka haluat liittää omaan sivuusi, voit tutkia ko. sivun koodia ja sieltä päätellä mikä on kuvan URL.
    HUOM! Kuvan pitää olla linkki sinne alkuperäiseen paikkaan mistä sen löysitkin, älä siis kopioi sitä omalle koneelle jne, sillä...
  2. Käy kopioimassa Kuusamon vaakuna täältä omaan kotihakemistoosi. Se onnistuu kun klikkaan hiiren oikealla painikkeella sen päälle ja valitset ponnahdusvalikosta sopivan komennon (Save picture/target to disk tai jotain). Mac-käyttäjät käyttävät sitten sitä Ctrl + click -toimintoa.
    Kopioituasi kuvan kotihakemistoosi lisää se sivullesi ennen Stadin portaali- linkkiä. Huom! Käytä osittaista URL:ia eli sellaista joka viittaa suoraan ko. tiedostoon ilman sitä http://palvelin/ -alkua.
  3. Lisää "Stadian portaali" -linkin perään (alapuolelle) kuva studiosta (http://www2.stadia.fi/~karva/Studio.jpg) ja pienennä se neljäsosaan (eli 50% kapeammaksi ja 50% matalammaksi).
  4. Laita lopuksi sen "etiketiksi" (eli alt-attribuutiksi) "Arabia-studio".
  5. Tee tuosta pienennetystä studiokuvasta linkki samaiseen kuvatiedostoon. Näin saat tehtyä näppärästi isosta kuvasta pienennyksen, ja sitä klikkaamalla selaaja pääsee katsomaan kuvaa normaalikokoisena. Tähän on oikeasti olemassa tehokkaampi tapa, mutta sen tekemiseksi pitäisi käyttää kuvankäsittelyohjelmaa, joten tehdään se nyt tässä tällä tavalla. Joskus kun kuvat eivät ole kovin suuria kooltaan (siis kilotavuissa laskettuna) tämä on ihan toimiva ja nopeasti toteutettavissa oleva jippo.
  6. Jos olet tehnyt sivua tähän mennessä paikallisella koneella (lokaalisti), siirrä se nyt myös palvelimelle, jotta opettaja tarkistaa että olet tehnyt kaikki vaadittavat työvaiheet.
(päivitettävä ja tarkistettava että toimii myöhempien harjoitusten kanssa)