keskiviikko 11. huhtikuuta 2012

XHTML-harjoitus

XHTML harjoituksia
Harjoitus 1:
  • Avaa Muistio –ohjelma (Notepad).
  • Tee yksinkertainen xhtml-sivu, joka sisältää
  • Dokumenttityypin määrittelyn DOCTYPE
(Mene linkkiin http://rollemaa.org/oppaat/ ja lue sieltä ”pakolliset kuviot”)
  • Elementit HTML,HEAD ja TITLE
  • Kirjoita nimesi BODY-elementin sisälle ja lyhyt kuvaus itsestäsi
  • Tallenna nimellä harjoitus1.html (jos et ole jo aiemmin tehnyt)
  • Tarkista, että xhtml-koodi on oikein kirjoitettu http://validator.w3.org/
  • Avaa selain (Firefox tai Iexplorer) ja katsele tiedostoa selaimessa.
Harjoitus 2:
Luo tyylitiedosto, jonka linkität html-sivun LINK-osioon. Muuta tyylitiedostossa xhtml- tekstin väri vihreäksi.
Katso tyylitiedoston tekemiseen mallia linkistä: http://rollemaa.org/oppaat/xhtml
Harjoitus 3:
Jatka edellistä harjoitusta:
  1. Kirjoita nimesi siten, että jokaisessa kirjaimessa, tavussa tai sanassa käytetty eri
    otsikkotasoja (h1 - h6).
  2. Vaihda taustaväri siniseksi tyylitiedoston avulla.
  3. Tallenna ja esikatsele. 
Harjoitus 4:
Jatka edellistä harjoitusta:
  1. Lisää tekstistä lorem ipsum pari-kolme kappaletta (Googlaa). Tätä tekstiä käytetään yleensä kun muoktaaan www-sivun ulkoasua
  2. Muotoile teksti siten, että siinä on pääotsikko (h1) ja alaotsikot (h2). Jaa leipäteksti kappaleisiin.
  3. Korosta tärkeitä sanoja vahvistamalla ne (käytä strong -elementtejä) 
  4. Tallenna ja esikatsele selaimessa
Harjoitus 5: Linkitys 
  1. Tee uusi xhtml-dokumentti ja tallenna se kansioosi. 
  2. Laita pääotsikoksi (h1) Tärkeitä linkkejä
  3. Laita ensimmäisen linkin lähdeankkuriksi W3Schools ja kohteeksi http://www.w3schools.com/
  4. Lisää muita, html:n kannalta tärkeitä linkkejä. Voit tehdä myös itsellesi merkityksellisistä osoitteista linkkejä.
  5. Tallenna ja esikatsele


Harjoitus 6: kuvan lisääminen
Lisää sivuille kuva osoitteestahttp://www.kuvapankki.org/
  1. Tallenna kuva ensin koneellesi:
  • luo kansio nimeltään kuvat omaan kotihakemistoosi 
  • tallenna kuva sinne nimellä kuva6.jpg
  1. Luo uusi xhtml-sivu perusrakenteineen (html, head, body)
  2. Liitä kuva sivulle img-elementillä
  3. Tee kuvasta linkki samaan kuvapankkiin, josta se haettiin: http://www.kuvapankki.org/
  4. Tallenna ja esikatsele selaimessa
Harjoitus 7
  1. Tee uusi html-sivu, ja tallenna se nimellä index.html
  2. Laita ensimmäisen tason otsikoksi (h1) xhtml perusteet ja toisen tason otsikoksi Sisällysluettelo. Tee sivulle linkit tekemiisi harjoituksiin. 
  3. Esikatsele selaimessa
Harjoitus 8 (nopeille)
Etsi verkosta sivuja, joiden ulkoasu ja toiminnallisuus miellyttävät sinua (3-4 kpl)
Tee uusi xhtml-sivu, jossa esittelet hakemasi sivustot ja linkität ne omaan sivuun. Perustele tekemäsi valinnat. Ovatko ne sivuja, jollaisia haluaisit itse suunnitella?


Pakkaa kaikki tiedostot yhdeksi zip-paketiksi ja lähetä se s-postin liitteenä opettajalle.