Harjoituksia
Harjoitus 1:
- Avaa Notepad-ohjelma.
- Tee yksinkertainen html-sivu, joka sisältää
...
- Kirjoita nimesi BODY-elementin sisälle
- Tallenna nimellä harjoitus1.html
- Tarkista, että html on validia! http://validator.w3.org/
- Avaa selain (Firefox) ja esikatsele tiedosto selaimessa. Tiedosto avataan valitsemalla Tiedosto > Avaa tiedosto selaimen päävalikosta.
Harjoitus 2:
Luo tyylitiedosto, jonka linkität html-sivun LINK-osioon. Muuta tyylitiedostossa tekstin väri vihreäksi.
Harjoitus 3:
Jatka edellistä harjoitusta:
- Kirjoita nimesi siten, että jokaisessa kirjaimessa on käytetty eri otsikkotasoja (h1 - h6).
- Vaihda taustaväri siniseksi tyylitiedostoon.
- Tallenna ja esikatsele.
Harjoitus 4:
Jatka edellistä harjoitusta:
- Lisää sinne teksti.
- 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 html-dokumentti ja tallenna se kansioosi.
- Laita pääotsikoksi (h1) Tärkeitä linkkejä
- Laita ensimmäisen linkin lähdeankkuriksi W3Schools ja kohteeksi http://www.w3schools.com/
- Lisää muita, html:n kannalta tärkeitä linkkejä
- Tallenna ja esikatsele
Harjoitus 6: kuvan lisääminen
Lisää sivuille kuva osoitteesta http://www.sxc.hu/photo/1182553
...
- Luo uusi html-sivu perusrakenteineen (html, head, body)
- Liitä kuva sivulle img-elementillä
- Tee kuvasta linkki samaan kuvapankkiin, josta se haettiin: http://www.sxc.hu/photo/1182553
- Tallenna ja esikatsele selaimessa
Harjoitus 7: Siirto palvelimelle
Siirrä harjoitukset FTP:llä omaan kotihakemistoosi, public_html -hakemistoon
HUOM! Muista siirtää myös kuvat-kansio sisältöineen, muuten kuvat eivät näy verkossa!
Harjoitus 8
- Tee uusi html-sivu, ja tallenna se nimellä index.html
- Laita ensimmäisen tason otsikoksi Verkkoteknologioiden perusteet ja toisen tason otsikoksi Sisällysluettelo. Tee sivulle linkit tekemiisi harjoituksiin.
- Siirrä sivu kotihakemistoosi, public_html -kansioon.
- Esikatsele selaimessa
Harjoitus
...
9 (nopeille)
Etsi verkosta sivuja, joiden ulkoasu ja toiminnallisuus miellyttävät sinua (3-4 kpl)
...