23. veebruar - veebisaidi kavandamine

Kirjutada oma veebipäevikusse veebist saadavate materjalide põhjal lühikokkuvõte veebisaidi kavandamise põhimõtetest ja etappidest.

Koostada veebileht, milles demonstreerida järgmiste stiilivõtete kasutamist:
font-family (fondinimed, üldnimed [serif, sans-serif, cursive, fantasy, monospace]), font-style (normal, italic, oblique), font-size, font-variant, font-weight, line-height font, color, background, word spacing, text-indent, white-space, text-align, text-transform, text-decoration
Vt näiteks http://www.w3schools.com/Css/css_font.asp jm.
Kirjuta katsetusse ka oma arvates üks parim allikas veebis, (lisaks w3schools-ile) kust said informatsiooni nende võtete kasutamise kohta.

17. veebruar - kasti mudel ja positsioon veebilehel

Lähtudes kasti mudelist ja positsioneerimisest (vt vastavaid õppematerjale) õppematerjalide kettal kataloogis M-keeled/css, koosta veebileht, milles on:

1. Vasakul ekraani suhtes liikumatu plokk laiusega 200 px ja kõrgusega 400px. (selles võiks olla mingi pildike ja lühike tekst)
2. Selle kõrval plokk laiusega 400 px ja mis sisaldab pikemat teksti ning mida saab alla kerida.

Tulemusest teata oma veebipäevikus.
Üks võimalik tulemus: http://www.tmk.edu.ee/~heikki/esimene/positsioon/leht9.html

16. veebruar - selektorid, klassid, id, pseudoklassid

Koostada eraldi kataloogi mingi veebileht, milles juures oleks kasutatud eraldi stiililehti ekraanile näitamiseks ja eraldi printimiseks. Printimisel näha ette ainult mustvalge trükkimine.
Veebilehe päisesse lisada stiilid pseudoklassidega linkide oleku näitamiseks.
Tulemusest teatada veebipäevikus.

10. veebruar - Astmelised stiililehed (CSS)

Astmeliste stiililehtede kasutamise põhieesmärk on eraldada üksteisest sisu ja vorm, ning nende loomine

• Veebilehe sisu looja mõtleb välja teksti ja sisetab selle html-dokumenti.
• Kujundaja tegeleb ainult veebilehe kujundusega ja kirjeldab seda CSS reeglite abil.

Lisaks:

• Väheneb lehekülgede suurus - paigutades kogu kujunduse kohta käiva info ühte CSS-i faili, tuleb kasutajal kujundus alla laadida vaid esimesel korral, ülejäänud lehekülgede puhul kasutatakse juba varem allalaetud stiililehte. Lehitsejad, mis stiile ei näita, ei pea neid üleüldse alla laadima.
• Suureneb arusaadavus - CSS-ist on märksa kergem aru saada kui vastavast HTML-is kirjutatud kujundusest, ühtlasi muutub paremini loetavaks ka HTML, kui sealt on kujunduse info eemaldatud.

Leia internetist veebileht, milles on kasutatud välist stiililehte ja ka stiili kirjeldust html-faili päises. Soovitatavalt võiks olla ka stiili reegel mõnes lehe html-elemendis.
Kirjuta oma veebipäevikusse selle lehe ja stiililehe aadressid ning kokkuvõte, milliseid elemente nende stiilidega kujundatakse.

9. veebruar - siselingid

Pikkade loeteludega tekstilehtede korral on navigeerimise lihtsustamiseks kasutada nn 'ankruid' kujul a name="minginimi". Lehelt endalt (nt menüüst) või väljastpoolt võib otse linkida sellesse lehe punkti:

• sisemine link - a href="#minginimi"
• väline link - a href="http:......htmlfail.html#minginimi"

Väikese mahu saavutamise ja töö lihtsustamise eesmärgil võiks kasutada nimedena ka numbreid, arve või tähti.

Koostada õppematerjalide kettal etteantud  ISO-IEC_2382-23.txt failist veebileht siselinkidega. Lehe algusesse tagasi pääsemiseks leida internetist üles näitava noole pilt ja linkida iga peatüki lõpp noole abil lehe algusega. Tekstis tõsta esile terminid. Tulemus esitada oma veebipäevikus lingina ühele viimastest peatükkidest.

3. veebruar - raamid

Raamidega veebilehel on lehitseja ekraan jaotatud kaheks või enamaks iseseisvaks osaks. Html lehti saab avada eraldi raamides. Vaata näiteid materjalide kettal kataloogis M-keeled/frames.
Uuri lisaks ka:
http://www.w3.org/TR/REC-html40/present/frames.html
http://www.kakupesa.net/kakk/veebiABC/p38.php
http://www.cs.ut.ee/~epuman/Raamid.htm

Koosta vähemalt kahe raamiga veebileht. Tulemustest ja mõtetest kirjuta veebipäevikus.

Uuri lisaks ka siseraami "iframe" kasutamist.
http://www.w3.org/TR/html4/present/frames.html#h-16.5
http://www.w3schools.com/tags/tag_iframe.asp

2. veebruar - pildikaart

Pildikaardi abil määratakse pildile klikitavad alad, ning neile seatakse vastavaks lingid.
Selleks tuleb rasterpildil määrata kujundid koordinaatide abil kujul x,y.
Siin on:

• x - kaugus vasakust servast  
• y - kaugus pildi ülaservast

Kujundeid on kolme tüüpi ja nad määratakse:

• Ristkülik, ruut - kahe vastastipu koordinaadid (x1,y1,x2,y2)
• Ring - keskpunti asukoht ja raadius (x,y,r)
• Hulknurk - järjestikku tippude koordinaadid (x1,y1,x2,y2, ... xn,yn)

Näide: http://www.tmk.edu.ee/~heikki/esimene/imagemap/
Koostada veebileht, kasutades  pildikaarti.
Probleemidest ja tulemustest teatada veebipäeviku kaudu.

26. jaanuari tunnitöö

Teha leht, milles on kasutatud etteantud pilti.
Lisada lehele ikoon.
Tulemus esitada lingina veebipäevikus.

26. jaanuari iseseisev töö

Leida internetist selgitused ja kasutusjuhendid järgmiste html-elementide ja parameetrite kohta:

• blockquote
• q
• cite
• abbr
• acronym

• accesskey

Koostada nende elementide demonstreerimiseks veebileht. DTD kasutada XHTML1.0Transitional. (kasutada võib õppematerjalide kataloogis olevat vastavat põhja).
Lühikokkuvõte ja link esitada oma veebipäevikus.

25. jaanuar - Lingid, HTML, CSS, ja XHTML

Koosta leht, milles kasutad erinevaid lingitüüpe.
Näide: http://www.tmk.edu.ee/~heikki/esimene/leht01.htm
Faili loomisel võid kasutada põhja failist DTD.txt

19. jaanuari tegevus

I Mine lehele http://www.tmk.edu.ee/50706 ja vasta küsimustele!

II Ava Notepad2 abil fail: O:\heikki_eljas\M-keeled\p6hi.txt 
Salvesta see oma kettale failina public_html\tekst\index.html
Kasuta materjale
http://www.w3schools.com/HTML/html_primary.asp
http://www.w3schools.com/HTML/html_paragraphs.asp
http://www.w3schools.com/HTML/html_formatting.asp

Katseta tekstivormindamist. Võid võtta suvalise teksti nt  O:\heikki_eljas\M-keeled\Word2003.txt

Lisa html faili päisesse rida failist: O:\heikki_eljas\M-keeled\meta-utf-8.txt
Esitle töö tulemust oma veebipäeviku kaudu (link).

11. jaanuari ülesanded

1. Tööta läbi Interneti baaskursuse loengud:

• http://akadeemia.kakupesa.net/arhiiv/IBK/loengud/loeng1
• http://akadeemia.kakupesa.net/arhiiv/IBK/loengud/loeng2

 2.Kasutades mõistekaardi tarkvara CmapTools koosta mõistekaart-pilt-skeem tunnis käsitletud veebi toimimise põhimõtete kohta. Postita lühike selgitus ja pilt .jpg formaadis oma veebipäevikusse.

Statistika lehekülgi

Kõige leitumateks osutusid W3Schools ja Wikipeedia:
W3schools: http://www.w3schools.com/browsers/browsers_stats.asp
Wikipeedia: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
W3Counter: http://www.w3counter.com/globalstats.php
webdesign.about.com: http://webdesign.about.com/od/browsers/p/bl_browsers.htm
Browser news: http://www.upsdell.com/BrowserNews/stat.htm
devaily.com: http://www.devdaily.com/news/2009-12-10/web-browser-usage-statistics-popularity
axiis: http://www.axiis.org/examples/BrowserMarketShare.html NB! väga ülevaatlik ja huvitav!
StatCounter: http://gs.statcounter.com NB! väga paindlike valikuvõimalustega, võimalus valida ise statistika aluseks võetavaud maid, filtreerida lehitsejaid, valida diagrammi tüüpi.

Möödunud õppeaastal leiti veel lisaks, sh ka saksakeelseid:
http://www.mywebsite.force9.co.uk
http://bibiserv.techfak.uni-bielefeld.de/statistics/2009_browser.html
http://www.aadmm.de/en/month.htm
http://www.ahfx.net/weblog/153
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0

Huvitav, et kodumaist Metrix-it ei leidnud keegi. Samas mulle tundub, et hästi disainitud:
http://metrix.station.ee/?act=techstat

Märgistuskeelte kursus

Esimene ülesanne
Kirjelda oma senist kokkupuudet ja kogemusi veebi loomise osas [(X)HTML ja CSS]. Kui oled midagi loonud, siis lisa ka lingid nendele.

Teine ülesanne
Otsi Internetist informatsiooni veebilehitsejate kasutusstatistika kohta. Leia vähemalt kaks allikat!
Märksõnad võiksid olla näiteks browser ja statistic.
Tulemused koos linkidega kirjuta oma kursuse veebipäevikusse (blogisse).