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

1. Kirjoita nimesi BODY-elementin sisälle
2. Tallenna nimellä harjoitus1.html
3. Tarkista, että html on validia! http://validator.w3.org/
4. 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:

1. Lisää sinne teksti.
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 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.