keskiviikko 11. huhtikuuta 2012

XHTML-harjoitus

XHTML harjoituksia
Harjoitus 1:
  • Avaa Muistio –ohjelma (Notepad).
  • Tee yksinkertainen xhtml-sivu, joka sisältää
  • Dokumenttityypin määrittelyn DOCTYPE
(Mene linkkiin http://rollemaa.org/oppaat/ ja lue sieltä ”pakolliset kuviot”)
  • 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
Harjoitus 3:
Jatka edellistä harjoitusta:
  1. Kirjoita nimesi siten, että jokaisessa kirjaimessa, tavussa tai sanassa käytetty eri
    otsikkotasoja (h1 - h6).
  2. Vaihda taustaväri siniseksi tyylitiedoston avulla.
  3. Tallenna ja esikatsele. 
Harjoitus 4:
Jatka edellistä harjoitusta:
  1. Lisää tekstistä lorem ipsum pari-kolme kappaletta (Googlaa). Tätä tekstiä käytetään yleensä kun muoktaaan www-sivun ulkoasua
  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 xhtml-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ä. Voit tehdä myös itsellesi merkityksellisistä osoitteista linkkejä.
  5. Tallenna ja esikatsele


Harjoitus 6: kuvan lisääminen
Lisää sivuille kuva osoitteestahttp://www.kuvapankki.org/
  1. Tallenna kuva ensin koneellesi:
  • luo kansio nimeltään kuvat omaan kotihakemistoosi 
  • tallenna kuva sinne nimellä kuva6.jpg
  1. Luo uusi xhtml-sivu perusrakenteineen (html, head, body)
  2. Liitä kuva sivulle img-elementillä
  3. Tee kuvasta linkki samaan kuvapankkiin, josta se haettiin: http://www.kuvapankki.org/
  4. Tallenna ja esikatsele selaimessa
Harjoitus 7
  1. Tee uusi html-sivu, ja tallenna se nimellä index.html
  2. Laita ensimmäisen tason otsikoksi (h1) xhtml perusteet ja toisen tason otsikoksi Sisällysluettelo. Tee sivulle linkit tekemiisi harjoituksiin. 
  3. Esikatsele selaimessa
Harjoitus 8 (nopeille)
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.

keskiviikko 21. maaliskuuta 2012

animaatio kalle




Animoidaan teksti Power Gimp-ohjelmalla
Muotoillaan teksti ensin sopivilla fonteilla. Tässä on käytetty Bauhaus-fonttia.
        Power
Avaa apuojelmista leikkaustyökalu ja sieppaa leikepöydälle teksti  Power

Liitä Gimp-ohjelmaan Ctrl + V.
Värittele kirjain kerrallaan haluamallasiai värillä ja tallenna jokaisen värityksen jälkeen nimellä esim. teksti1, teksti2,...
Tallennuksien jälkeen avaa tasoina kaikki animaatioon tulevat kuvatiedostot.


Tallenna animaationa. Ohjelma kysyy kuinka kauan yhtä kuvaa ( framea) näytetään.  Voit kokella eri arvoja.


Animaatiota voit katsella selaimessa.
Yritä viedä omaan blogiisi GIMP:llä tehty pikku animaatio (+logo-kokeiluja) ja laita myös Publisher-ohjelmalla tuotettuja kuvia. Jokaiseen kuvaan lyhyt kommentti miten se on tehty.

keskiviikko 29. helmikuuta 2012

GIMP-harjoitukset


GIMP KUVAHARJOITUKSET
Ota käsittelyyn sellainen kuva, jossa voit suotittaa tehtävän tomenpiteet.

KUVA 1
AVAA KUVA JPG­MUODOSSA, TEE SEURAAVAT PERUSTOIMENPITEET
säädä sävyt: valoisuus, kontrasti, värit
rajaa kuva
tee kuvasta 10*10cm kokoinen painokäyttöön
terävöitä kuva
tallenna kuva

KUVA 2
AVAA KUVA RAW-­MUODOSSA, TEE SEURAAVAT PERUSTOIMENPITEET
säädä sävyt: valoisuus, kontrasti, värit RAW--‐SÄÄTÖ
rajaa kuva RAW--‐SÄÄTÖ
tee kuvasta 10*10cm kokoinen painokäyttöön
terävöitä kuva
tallenna kuva

KUVA 3
PERSPEKTIIVIVÄÄRISTYMÄN OIKAISUT
säädä sävyt: valoisuus, kontrasti
oikaise perspektiivivääristymä
rajaa kuva oikaisun jälkeen
terävöitä kuva
tallenna kuva

KUVA 4
TEE 8*15CM KUVA PAINOKÄYTTÖÖN, SEKÄ 500PX LEVEÄ KUVA RUUTUKÄYTTÖÖN
säädä sävyt: valoisuus, kontrasti
säädä kuvan koko
terävöitä kuva
tallenna kuva

KUVA 5
SYVÄÄ KUVAN PÄÄAIHE (irroita kuva taustasta) JA LUO UUSI TAUSTA
säädä sävyt: valoisuus, kontrasti
tee pääaiheen ympärille valinta ja kopioi valittu kohde uudelle tasolle
luo kuvan aiheeseen soveltuva tausta
yhdistä tasot
terävöitä kuva
tallenna kuva


KUVA 6
TEE KUVALLE PERUSKÄSITTELY JA MUUTA KUVA HARMAASÄVYISEKSI
säädä sävyt: valoisuus, kontrasti
poista väri informaatio kuvasta
terävöitä kuva
tallenna kuva

KUVA 7
KUTEN KOHTA 6, MUTTA TEE KUVASTA SINERTÄVÄN SÄVYINEN
Tee peruskäsittely kuvalle
Lisää ylimmäiseksi taso, joka värjätään peittävän siniseksi
Muutetaan tason tila–valitse pehmeä valo
Muutetaan tason läpinäkyvyyttä n. 20--‐30%
Yhdistä tasot
Terävöitä kuva
Tallenna kuva