Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Jatka edellistä harjoitusta:

  1. Kirjoita nimesi siten, että jokaisessa kirjaimessa on käytetty eri otsikkotasoja (h1 - h6).
  2. Vaihda taustaväri siniseksi tyylitiedostoon.
  3. 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. 

...

  1. Laita pääotsikoksi (h1) Tärkeitä linkkejä

...

  1. Laita ensimmäisen linkin lähdeankkuriksi W3Schools ja kohteeksi http://www.w3schools.com/

...

  1. Lisää muita, html:n kannalta tärkeitä linkkejä

...

  1. Tallenna ja esikatsele

Harjoitus 6: kuvan lisääminen

Lisää sivuille kuva osoitteesta http://www.sxc.hu/photo/11825531.

  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

...

  1. Luo uusi html-sivu perusrakenteineen (html, head, body)

...

  1. Liitä kuva sivulle img-elementillä

...

  1. Tee kuvasta linkki samaan kuvapankkiin, josta se haettiin: http://www.sxc.hu/photo/1182553

...

  1. Tallenna ja esikatsele selaimessa

Harjoitus 7

...

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.

...

: 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

...

  1. Tee uusi html-sivu, ja tallenna se nimellä index.html

...

  1. Laita ensimmäisen tason otsikoksi Verkkoteknologioiden perusteet ja toisen tason otsikoksi Sisällysluettelo. Tee sivulle linkit tekemiisi harjoituksiin.

...

  1. Siirrä sivu kotihakemistoosi, public_html -kansioon. 

...

  1. Esikatsele selaimessa

Harjoitus 10 (nopeille)

Etsi verkosta sivuja, joiden ulkoasu ja toiminnallisuus miellyttävät sinua (3-4 kpl)

...