Harjoituksia
Harjoitus 1:
1. Avaa Notepad-ohjelma.
2. Tee yksinkertainen html-sivu, joka sisältää
- dokumenttityypin määrittelyn DOCTYPE
- juurielementin HTML
- HEAD- ja BODY -elementit
- TITLE-elementin HEAD-osioon
3. Kirjoita nimesi BODY-elementin sisälle
4. Tallenna nimellä harjoitus1.html
5. Avaa selain (Firefox) ja esikatsele tiedosto selaimessa.
Tiedosto avataan valitsemalla Tiedosto > Avaa tiedosto selaimen päävalikosta.
Harjoitus 2:
Muuta edellisen harjoituksen tekstin väri vihreäksi.
Käytä font-elementin color-määritettä.
Esikatsele selaimessa.
Harjoitus 3:
Tee verkkosivu, jossa on nimesi siten, että jokaisessa kirjaimessa on käytetty eri otsikkotasoja (h1 - h6).
Vaihda taustaväri siniseksi (bgcolor).
Tallenna ja esikatsele.
Harjoitus 4:
1. Avaa Notepad-ohjelma.
2. Tee yksinkertainen html-sivu, ja lisää sinne teksti.
4. Muotoile teksti siten, että siinä on pääotsikko (h1) ja alaotsikot (h2). Jaa leipäteksti kappaleisiin.
5. Korosta tärkeitä sanoja vahvistamalla ne (käytä b- tai strong -elementtejä)
6. Tallenna ja esikatsele selaimessa
Harjoitus 5: Linkitys
1. Tee uusi html-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ä
5. Tallenna ja esikatsele
Harjoitus 6: kuvan lisääminen
Lisää sivuille kuva osoitteesta http://www.sxc.hu/photo/1182553
1. Tallenna kuva ensin koneellesi:
- luo kansio nimeltään kuvat omaan kotihakemistoosi
- mene osoitteeseen http://www.sxc.hu/photo/1182553
- klikkaa hiiren oikeaa painiketta kuvan päällä
- valitse Tallenna kohde levylle
- etsi kuvat-kansiosi ja tallenna kuva sinne nimellä harjoitus5.jpg
2. Luo uusi html-sivu perusrakenteineen (html, head, body)
3. Liitä kuva sivulle img-elementillä
4. Tee kuvasta linkki samaan kuvapankkiin, josta se haettiin: http://www.sxc.hu/photo/1182553
5. Tallenna ja esikatsele selaimessa
Harjoitus 7: kuvan ja tekstin asettelu sivuille
Jatka edellistä harjoitusta lisäämällä sivulle tekstiä.
Kokeile kuvan asemoimista align=left -määritteellä. Millä tavalla teksti ja kuva suhtautuvat toisiinsa?
Miltä muuta align-määritteet näyttävät? (center,right, top, middle)? Kokeile ja valitse parhaiten toimiva. Tallenna sivu.
Harjoitus 8: 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 9
1. Tee uusi html-sivu, ja tallenna se nimellä index.html
2. Laita ensimmäisen tason otsikoksi Verkkoteknologioiden perusteet ja toisen tason otsikoksi Sisällysluettelo. Tee sivulle linkit tekemiisi harjoituksiin.
3. Siirrä sivu kotihakemistoosi, public_html -kansioon.
4. Esikatsele selaimessa
Harjoitus 10 (nopeille)
Etsi verkosta sivuja, joiden ulkoasu ja toiminnallisuus miellyttävät sinua (3-4 kpl)
Tee uusi html-sivu, jossa esittelet hakemasi sivustot ja linkität ne. Perustele tekemäsi valinnat. Ovatko ne sivuja, jollaisia haluaisit itse suunnitella?
Linkitä sivu osaksi sisällysluetteloa ja siirrä kotihakemistoon.