XHTML
harjoituksia
Harjoitus
1:
- Avaa Muistio –ohjelma (Notepad).
- Tee yksinkertainen xhtml-sivu, joka sisältää
- Dokumenttityypin määrittelyn DOCTYPE
- 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
Katso tyylitiedoston tekemiseen mallia linkistä: http://rollemaa.org/oppaat/xhtml
Harjoitus
3:
Jatka
edellistä harjoitusta:
- Kirjoita nimesi siten, että jokaisessa kirjaimessa, tavussa tai sanassa käytetty eri
otsikkotasoja (h1 - h6). - Vaihda taustaväri siniseksi tyylitiedoston avulla.
- Tallenna ja esikatsele.
Harjoitus
4:
Jatka
edellistä harjoitusta:
- Lisää tekstistä lorem ipsum pari-kolme kappaletta (Googlaa). Tätä tekstiä käytetään yleensä kun muoktaaan www-sivun ulkoasua
- Muotoile teksti siten, että siinä on pääotsikko (h1) ja alaotsikot (h2). Jaa leipäteksti kappaleisiin.
- Korosta tärkeitä sanoja vahvistamalla ne (käytä strong -elementtejä)
- Tallenna ja esikatsele selaimessa
Harjoitus
5: Linkitys
- Tee uusi xhtml-dokumentti ja tallenna se kansioosi.
- Laita pääotsikoksi (h1) Tärkeitä linkkejä
- Lisää muita, html:n kannalta tärkeitä linkkejä. Voit tehdä myös itsellesi merkityksellisistä osoitteista linkkejä.
- Tallenna ja esikatsele
Harjoitus
6: kuvan lisääminen
Lisää
sivuille kuva osoitteestahttp://www.kuvapankki.org/
- Tallenna kuva ensin koneellesi:
- luo kansio nimeltään kuvat omaan kotihakemistoosi
- tallenna kuva sinne nimellä kuva6.jpg
- Luo uusi xhtml-sivu perusrakenteineen (html, head, body)
- Liitä kuva sivulle img-elementillä
- Tee kuvasta linkki samaan kuvapankkiin, josta se haettiin: http://www.kuvapankki.org/
- Tallenna ja esikatsele selaimessa
- Tee uusi html-sivu, ja tallenna se nimellä index.html
- Laita ensimmäisen tason otsikoksi (h1) xhtml perusteet ja toisen tason otsikoksi Sisällysluettelo. Tee sivulle linkit tekemiisi harjoituksiin.
- Esikatsele selaimessa
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.