1

HTMLn perusteet

copy Jari Sarja Otavan Opisto 2012

Taumlmauml oppimateriaali on lisensoitu Creative Commons Nimeauml-Tarttuva 30 -lisenssillauml

2

Sisaumlltouml 11 Johdanto 4

11 HTMLn laumlhtoumlkohdat 412 Millauml HTML-sivuja tehdaumlaumln 513 Kuinka tarkastella HTML-sivuja 714 HTML-koodin perussaumlaumlnnoumlt 1015 Nauhoite1 ja tehtaumlvauml 1 12

2 HTML-sivun rakenne 1321 Tyylimaumlaumlrittelytagit div ja span 13

211 Div 13212 Span 16

23 Kappaleet ja otsikot 18231 P-tagi 18232 Otsikko-tagit (h1-h6) 19

24 Nauhoite 2 ja tehtaumlvauml 2 203 Sisaumllloumln muotoilu 22

31 Fyysiset tehosteet 2232 Loogiset tehosteet 2233 Esimerkki tekstin tehosteista 2334 Asemointi 2435 Kirjasimet eli fontit 25

351 Font size eli fontin koko 25352 Font color eli fontin vaumlri 26353 Font Face eli kirjasintyyppi 27354 Fonttimaumlaumlrittelyjen yhdistaumlminen 27

36 Nauhoite 3 ja tehtaumlvauml 3 274 Linkit 28

41 Kuinka linkki tehdaumlaumln 2842 Viittaus dokumentin sisaumllle 2943 Target eli minne hyperlinkki avataan 3044 Nauhoite 4 ja tehtaumlvauml 4 31

5 Listat 3251 UL - jaumlrjestaumlmaumltoumln lista 3252 OL - jaumlrjestetty lista 3353 DL - maumlaumlritelmaumlluettelo 34

54 Nauhoite 5 ja tehtaumlvauml 5 356 Kuvat 36

61 Kompastuskiviauml 3962 Interaktiivinen kuva 4063 Nauhoite 6 ja tehtaumlvauml 6 42

7 Viivat ja rivinvaihto 4371 Tehtaumlvauml 7 44

8 Lomakkeet 4581 FORM - Lomake 4582 INPUT - Syoumlttoumlkenttauml nappi yms 4583 SELECT - Valintalista 4984 TEXTAREA - Tekstinsyoumlttoumlkenttauml 4985 Esimerkki 49

3

86 Lomakkeen viimeistely 51861 Label for (etiketit) 51862 Fieldset ja legend 52863 Tabindex eli tabulaattori 53

87 Nauhoite 7 ja tehtaumlvauml 8 549 Ulkoasun muotoilu 55

91 Vaumlrit HTMLssauml 5592 Kehykset 58

921 Kuinka rakentaa kehykselliset www-sivut 5993 Iframe 6394 Taulukot 66

941 Taulukon tekeminen 67942Tablen ominaisuudet 69943 Esimerkkejauml 71

95 Nauhoite 8 ja tehtaumlvauml 9 7210 Multimedia 73

101 Multimedia - aumlaumlni 73102 Multimedia liikkuvaa kuvaa 74

1021 Upotetut videotiedostot 75103 Javan liittaumlminen sivuille 76104 Flashin liittaumlminen sivuille 77

11 Sivuston taittaminen HTMLn avulla 79111 Nauhoite 9 ja tehtaumlvauml 10 91

Laumlhteet 92

4

1 JohdantoHTMLn perusteiden ymmaumlrtaumlminen on ensiarvoisen taumlrkeaumlauml HTMLn opiskelu luo pohjan kaikelle mikauml liittyy www-sivujen tekemiseen Opettelu vie hetken mutta palkitsee runsain mitoin jo viikon harjoittelun jaumllkeen HTMLn hallitsemista pidetaumlaumln yleisesti taumlrkeaumlnauml koska kaikki web-sivut on tehty kaumlyttaumlen HTML-kieltauml Kyseessauml ei kuitenkaan ole varsinainen oh-jelmointikieli vaan laumlhinnauml HTML on sivunkuvauskieli Siksi HTML on helppo oppia

Etkouml ole koskaan kuullut puhuttavan HTMLstauml Jos aihe kuvataan lyhyesti voidaan sanoa ettauml HTML on liima jonka avulla verkkosivuja kasataan Websivut naumlytetaumlaumln laumlhes poikke-uksetta HTML-koodin avulla Web-sivu voi sisaumlltaumlauml esimerkiksi tekstiauml aumlaumlntauml videota ani-maatiota ja kuvia mutta ne liitetaumlaumln sinne aina HTML-koodin avulla HTML maumlaumlrittelee si-vun rakenteen se kertoo mihin kuvat sijoitetaan mille sivuille linkitetaumlaumln missauml otsikko missauml leipaumlteksti jne

HTML on lyhenne sanoista Hypertext Markup Language Aluksi oli kyse tekstidokumenteis-ta jotka oli linkitetty toisiinsa nk hyperlinkkien avulla Nykyaumlaumln HTML-dokumentit sisaumlltauml-vaumlt paljon muutakin kuin pelkaumlstaumlaumln tekstiauml ja linkkejauml Nykyaikaiset www-sivut voivat olla toiminnoiltaan varsin monipuolisia Voimme esimerkiksi hoitaa pankkiasioitamme www-sivujen kautta Voimme myoumls ostaa tuotteita ja palveluita webin kautta Taumlllauml kertaa keski-tymme kuitenkin vain HTMLn perusteisiin

HTML-koodia tarvitaan jotta www-selain voisi tulkita dokumentin sisaumllloumln Selaimella tar-koitetaan ohjelmaa jonka avulla tarkastelemme www-sivuja Tunnettuja selaimia ovat Inter-net Explorer Firefox ja Chrome Jotta kaikki selaimet osaisivat naumlyttaumlauml sivut samalla tavalla on luotu standardi Taumlmaumln hetken standardi tunnetaan nimellauml HTML 401 Taumlllaumlkin opinto-jaksolla keskitytaumlaumln laumlhinnauml versioon 401

11 HTMLn laumlhtoumlkohdatHTML-koodi on varsin yksinkertaista ja loogista joka tietokoneelta loumlytyy siihen tarvittavat ohjelmat Laumlhtoumlkohtaisesti HTML voidaan tiivistaumlauml seuraavasti

html-koodin tiedostopaumlaumlte on joko htm tai htmlhtml-sivuja luetaan selaimella (esim Firefox Chrome)html-koodi kirjoitetaan tageilla (esim ltbgttaumlmauml lihavoi tekstinltbgt)html-koodia voidaan kokeilla omalla koneellahtml-sivu naumlkyy netissauml kun se laitetaan jollekin palvelimelle

5

HTML-kielestauml paumlaumlsee helpoiten jyvaumllle tarkastelemalla valmista koodia

lthtmlgtltheadgtlttitlegtJarin kotisivulttitlegtltheadgtltbodygtlth1gtSivun otsikkolth1gtltpgtTaumlssauml yksi kappale tekstiauml Ei mitaumlaumlnkummoista mutta jotain kuitenkin Onpahanvaumlhaumln esimerkkiauml siitauml kuinka homma toimiiltpgtltbodygtlthtmlgt

Sivu naumlyttaumlauml kutakuinkin taumlllaiselta kun sitauml tutkaillaan webselaimella

12 Millauml HTML-sivuja tehdaumlaumlnHTML-koodia ei missaumlaumln tapauksessa pidauml kirjoittaa esim Word-ohjelmalla koska se tallen-taa tekstin lisaumlksi omia muotoilujaan HTML-sivuja tehdaumlaumln yleensauml tekstieditorilla eli teks-timuokkaimella joka on tarkoitettu puhtaan tekstin kirjoittamiseen ja muokkaamiseen

Tekstinkaumlsittelyohjelmista poiketen tekstieditoreissa ei yleensauml ole muotoiluominaisuuksia lainkaan eli niillauml ei voi esimerkiksi lihavoida tai kursivoida tekstiauml Useimpien kaumlyttoumljaumlrjes-telmien mukana tulee jonkinlainen tekstieditori Usein valmiiksi asennetut tekstieditorit ku-ten Windowsin Muistio ovat varsin puutteellisia Nykyaumlaumln on onneksi olemassa myoumls kun-nollisia editoreita ja vielaumlpauml ilmaiseksi

3

86 Lomakkeen viimeistely 51861 Label for (etiketit) 51862 Fieldset ja legend 52863 Tabindex eli tabulaattori 53

87 Nauhoite 7 ja tehtaumlvauml 8 549 Ulkoasun muotoilu 55

91 Vaumlrit HTMLssauml 5592 Kehykset 58

921 Kuinka rakentaa kehykselliset www-sivut 5993 Iframe 6394 Taulukot 66

941 Taulukon tekeminen 67942Tablen ominaisuudet 69943 Esimerkkejauml 71

95 Nauhoite 8 ja tehtaumlvauml 9 7210 Multimedia 73

101 Multimedia - aumlaumlni 73102 Multimedia liikkuvaa kuvaa 74

1021 Upotetut videotiedostot 75103 Javan liittaumlminen sivuille 76104 Flashin liittaumlminen sivuille 77

11 Sivuston taittaminen HTMLn avulla 79111 Nauhoite 9 ja tehtaumlvauml 10 91

Laumlhteet 92

4

1 JohdantoHTMLn perusteiden ymmaumlrtaumlminen on ensiarvoisen taumlrkeaumlauml HTMLn opiskelu luo pohjan kaikelle mikauml liittyy www-sivujen tekemiseen Opettelu vie hetken mutta palkitsee runsain mitoin jo viikon harjoittelun jaumllkeen HTMLn hallitsemista pidetaumlaumln yleisesti taumlrkeaumlnauml koska kaikki web-sivut on tehty kaumlyttaumlen HTML-kieltauml Kyseessauml ei kuitenkaan ole varsinainen oh-jelmointikieli vaan laumlhinnauml HTML on sivunkuvauskieli Siksi HTML on helppo oppia

Etkouml ole koskaan kuullut puhuttavan HTMLstauml Jos aihe kuvataan lyhyesti voidaan sanoa ettauml HTML on liima jonka avulla verkkosivuja kasataan Websivut naumlytetaumlaumln laumlhes poikke-uksetta HTML-koodin avulla Web-sivu voi sisaumlltaumlauml esimerkiksi tekstiauml aumlaumlntauml videota ani-maatiota ja kuvia mutta ne liitetaumlaumln sinne aina HTML-koodin avulla HTML maumlaumlrittelee si-vun rakenteen se kertoo mihin kuvat sijoitetaan mille sivuille linkitetaumlaumln missauml otsikko missauml leipaumlteksti jne

HTML on lyhenne sanoista Hypertext Markup Language Aluksi oli kyse tekstidokumenteis-ta jotka oli linkitetty toisiinsa nk hyperlinkkien avulla Nykyaumlaumln HTML-dokumentit sisaumlltauml-vaumlt paljon muutakin kuin pelkaumlstaumlaumln tekstiauml ja linkkejauml Nykyaikaiset www-sivut voivat olla toiminnoiltaan varsin monipuolisia Voimme esimerkiksi hoitaa pankkiasioitamme www-sivujen kautta Voimme myoumls ostaa tuotteita ja palveluita webin kautta Taumlllauml kertaa keski-tymme kuitenkin vain HTMLn perusteisiin

HTML-koodia tarvitaan jotta www-selain voisi tulkita dokumentin sisaumllloumln Selaimella tar-koitetaan ohjelmaa jonka avulla tarkastelemme www-sivuja Tunnettuja selaimia ovat Inter-net Explorer Firefox ja Chrome Jotta kaikki selaimet osaisivat naumlyttaumlauml sivut samalla tavalla on luotu standardi Taumlmaumln hetken standardi tunnetaan nimellauml HTML 401 Taumlllaumlkin opinto-jaksolla keskitytaumlaumln laumlhinnauml versioon 401

11 HTMLn laumlhtoumlkohdatHTML-koodi on varsin yksinkertaista ja loogista joka tietokoneelta loumlytyy siihen tarvittavat ohjelmat Laumlhtoumlkohtaisesti HTML voidaan tiivistaumlauml seuraavasti

html-koodin tiedostopaumlaumlte on joko htm tai htmlhtml-sivuja luetaan selaimella (esim Firefox Chrome)html-koodi kirjoitetaan tageilla (esim ltbgttaumlmauml lihavoi tekstinltbgt)html-koodia voidaan kokeilla omalla koneellahtml-sivu naumlkyy netissauml kun se laitetaan jollekin palvelimelle

5

HTML-kielestauml paumlaumlsee helpoiten jyvaumllle tarkastelemalla valmista koodia

lthtmlgtltheadgtlttitlegtJarin kotisivulttitlegtltheadgtltbodygtlth1gtSivun otsikkolth1gtltpgtTaumlssauml yksi kappale tekstiauml Ei mitaumlaumlnkummoista mutta jotain kuitenkin Onpahanvaumlhaumln esimerkkiauml siitauml kuinka homma toimiiltpgtltbodygtlthtmlgt

Sivu naumlyttaumlauml kutakuinkin taumlllaiselta kun sitauml tutkaillaan webselaimella

12 Millauml HTML-sivuja tehdaumlaumlnHTML-koodia ei missaumlaumln tapauksessa pidauml kirjoittaa esim Word-ohjelmalla koska se tallen-taa tekstin lisaumlksi omia muotoilujaan HTML-sivuja tehdaumlaumln yleensauml tekstieditorilla eli teks-timuokkaimella joka on tarkoitettu puhtaan tekstin kirjoittamiseen ja muokkaamiseen

Tekstinkaumlsittelyohjelmista poiketen tekstieditoreissa ei yleensauml ole muotoiluominaisuuksia lainkaan eli niillauml ei voi esimerkiksi lihavoida tai kursivoida tekstiauml Useimpien kaumlyttoumljaumlrjes-telmien mukana tulee jonkinlainen tekstieditori Usein valmiiksi asennetut tekstieditorit ku-ten Windowsin Muistio ovat varsin puutteellisia Nykyaumlaumln on onneksi olemassa myoumls kun-nollisia editoreita ja vielaumlpauml ilmaiseksi

4

1 JohdantoHTMLn perusteiden ymmaumlrtaumlminen on ensiarvoisen taumlrkeaumlauml HTMLn opiskelu luo pohjan kaikelle mikauml liittyy www-sivujen tekemiseen Opettelu vie hetken mutta palkitsee runsain mitoin jo viikon harjoittelun jaumllkeen HTMLn hallitsemista pidetaumlaumln yleisesti taumlrkeaumlnauml koska kaikki web-sivut on tehty kaumlyttaumlen HTML-kieltauml Kyseessauml ei kuitenkaan ole varsinainen oh-jelmointikieli vaan laumlhinnauml HTML on sivunkuvauskieli Siksi HTML on helppo oppia

Etkouml ole koskaan kuullut puhuttavan HTMLstauml Jos aihe kuvataan lyhyesti voidaan sanoa ettauml HTML on liima jonka avulla verkkosivuja kasataan Websivut naumlytetaumlaumln laumlhes poikke-uksetta HTML-koodin avulla Web-sivu voi sisaumlltaumlauml esimerkiksi tekstiauml aumlaumlntauml videota ani-maatiota ja kuvia mutta ne liitetaumlaumln sinne aina HTML-koodin avulla HTML maumlaumlrittelee si-vun rakenteen se kertoo mihin kuvat sijoitetaan mille sivuille linkitetaumlaumln missauml otsikko missauml leipaumlteksti jne

HTML on lyhenne sanoista Hypertext Markup Language Aluksi oli kyse tekstidokumenteis-ta jotka oli linkitetty toisiinsa nk hyperlinkkien avulla Nykyaumlaumln HTML-dokumentit sisaumlltauml-vaumlt paljon muutakin kuin pelkaumlstaumlaumln tekstiauml ja linkkejauml Nykyaikaiset www-sivut voivat olla toiminnoiltaan varsin monipuolisia Voimme esimerkiksi hoitaa pankkiasioitamme www-sivujen kautta Voimme myoumls ostaa tuotteita ja palveluita webin kautta Taumlllauml kertaa keski-tymme kuitenkin vain HTMLn perusteisiin

HTML-koodia tarvitaan jotta www-selain voisi tulkita dokumentin sisaumllloumln Selaimella tar-koitetaan ohjelmaa jonka avulla tarkastelemme www-sivuja Tunnettuja selaimia ovat Inter-net Explorer Firefox ja Chrome Jotta kaikki selaimet osaisivat naumlyttaumlauml sivut samalla tavalla on luotu standardi Taumlmaumln hetken standardi tunnetaan nimellauml HTML 401 Taumlllaumlkin opinto-jaksolla keskitytaumlaumln laumlhinnauml versioon 401

11 HTMLn laumlhtoumlkohdatHTML-koodi on varsin yksinkertaista ja loogista joka tietokoneelta loumlytyy siihen tarvittavat ohjelmat Laumlhtoumlkohtaisesti HTML voidaan tiivistaumlauml seuraavasti

html-koodin tiedostopaumlaumlte on joko htm tai htmlhtml-sivuja luetaan selaimella (esim Firefox Chrome)html-koodi kirjoitetaan tageilla (esim ltbgttaumlmauml lihavoi tekstinltbgt)html-koodia voidaan kokeilla omalla koneellahtml-sivu naumlkyy netissauml kun se laitetaan jollekin palvelimelle

5

HTML-kielestauml paumlaumlsee helpoiten jyvaumllle tarkastelemalla valmista koodia

lthtmlgtltheadgtlttitlegtJarin kotisivulttitlegtltheadgtltbodygtlth1gtSivun otsikkolth1gtltpgtTaumlssauml yksi kappale tekstiauml Ei mitaumlaumlnkummoista mutta jotain kuitenkin Onpahanvaumlhaumln esimerkkiauml siitauml kuinka homma toimiiltpgtltbodygtlthtmlgt

Sivu naumlyttaumlauml kutakuinkin taumlllaiselta kun sitauml tutkaillaan webselaimella

12 Millauml HTML-sivuja tehdaumlaumlnHTML-koodia ei missaumlaumln tapauksessa pidauml kirjoittaa esim Word-ohjelmalla koska se tallen-taa tekstin lisaumlksi omia muotoilujaan HTML-sivuja tehdaumlaumln yleensauml tekstieditorilla eli teks-timuokkaimella joka on tarkoitettu puhtaan tekstin kirjoittamiseen ja muokkaamiseen

Tekstinkaumlsittelyohjelmista poiketen tekstieditoreissa ei yleensauml ole muotoiluominaisuuksia lainkaan eli niillauml ei voi esimerkiksi lihavoida tai kursivoida tekstiauml Useimpien kaumlyttoumljaumlrjes-telmien mukana tulee jonkinlainen tekstieditori Usein valmiiksi asennetut tekstieditorit ku-ten Windowsin Muistio ovat varsin puutteellisia Nykyaumlaumln on onneksi olemassa myoumls kun-nollisia editoreita ja vielaumlpauml ilmaiseksi

5

HTML-kielestauml paumlaumlsee helpoiten jyvaumllle tarkastelemalla valmista koodia

lthtmlgtltheadgtlttitlegtJarin kotisivulttitlegtltheadgtltbodygtlth1gtSivun otsikkolth1gtltpgtTaumlssauml yksi kappale tekstiauml Ei mitaumlaumlnkummoista mutta jotain kuitenkin Onpahanvaumlhaumln esimerkkiauml siitauml kuinka homma toimiiltpgtltbodygtlthtmlgt

Sivu naumlyttaumlauml kutakuinkin taumlllaiselta kun sitauml tutkaillaan webselaimella

12 Millauml HTML-sivuja tehdaumlaumlnHTML-koodia ei missaumlaumln tapauksessa pidauml kirjoittaa esim Word-ohjelmalla koska se tallen-taa tekstin lisaumlksi omia muotoilujaan HTML-sivuja tehdaumlaumln yleensauml tekstieditorilla eli teks-timuokkaimella joka on tarkoitettu puhtaan tekstin kirjoittamiseen ja muokkaamiseen

Tekstinkaumlsittelyohjelmista poiketen tekstieditoreissa ei yleensauml ole muotoiluominaisuuksia lainkaan eli niillauml ei voi esimerkiksi lihavoida tai kursivoida tekstiauml Useimpien kaumlyttoumljaumlrjes-telmien mukana tulee jonkinlainen tekstieditori Usein valmiiksi asennetut tekstieditorit ku-ten Windowsin Muistio ovat varsin puutteellisia Nykyaumlaumln on onneksi olemassa myoumls kun-nollisia editoreita ja vielaumlpauml ilmaiseksi

6

Hyvaumlllauml editorilla on oltava seuraavat ominaisuudet

syntaksin korostus (esim eri vaumlri) rivinumerointi (helpottaa virheiden etsinnaumlssauml) mahdollisuus pitaumlauml monta ikkunaa auki yhtauml aikaa

Nuo kaikki ominaisuudet puuttuvat esimerkiksi Muistiolta (Windows kaumlyttoumljaumlrjestelmaumln mu-kana) joten se on huono valinta Parempia vaihtoehtoja on tarjolla myoumls ilmaiseksi

Windowsille ilmaisia editoreita

Notepad++ (suosittelen paras) Crimson Editor EasyHTML (suomalainen ja hyvauml) EditPad Lite (kaumltevauml) NoteTab Light (toinen suosikkini) MysticML (mielenkiintoinen ja suomalainen) Caditor Komodo Edit jEdit

Linuxille ilmaisia editoreita Vim Gedit Nano Emacs Komodo Edit Bluefish jEdit

Macintoshille ilmaisia editoreita

TextWrangler Carbon Emacs Bluefish Komodo Edit

On olemassa myoumls helpompia tapoja koodata www-sivuja kuin pelkaumlt tekstieditorit Niiden kaumlyttaumlminen ei kuitenkaan ole suositeltavaa Niillauml voi paumlrjaumltauml ihan hyvin mutta jos ongelmia ilmenee olet pulassa Yleensauml WYSIWYG-editorit tekevaumlt sekavaa HTML-koodia Lisaumlksi jos taumlhtaumlaumlt websuunnittelijaksi unohda WYSIWYG-editorit ainakin hetkeksi

WYSIWYG-lyhennettauml (engl What You See Is What You Get eli mitauml naumlet sitauml saat) kaumlyte-taumlaumln viittaamaan sellaisiin ohjelmistoihin joissa sisaumlltouml naumlyttaumlauml muokattaessa hyvin samalta kuin lopputulos Sen sijaan muotoa ja rakennetta kuvaavaa metadataa ei vaumllttaumlmaumlttauml naumlytetauml Hyvin usein kaumlsitettauml kaumlytetaumlaumln kuvaamaan tekstinkaumlsittelyohjelmia tai HTML-editoreja (Wikipedia)

7

Hyviauml ilmaisia WYSIWYG-editoreita ovat mm seuraavat

NVU (helppokaumlyttoumlinen) Amaya (erikoinen kaumlyttoumlliittymauml mutta hallitsee myoumls MathMLn) Trellian (en ole kokeillut mutta naumlyttaumlauml lupaavalta)

Kaupallisista WYSIWYG-editoreista Dreamweaver on pitkaumlaumln ollut markkinoiden ykkoumlsti-lalla Microsoft yritti aluksi haastaa sitauml ohjelmalla FrontPage mutta ei onnistunut FrontPage sai vaumlistyauml ja tilalle tuli Microsoft Expression Web Nykyaumlaumln kaupalliset editorit alkavat jo olla aika hyviauml ja ovat loumlytaumlneet oman vankkumattoman kaumlyttaumljaumlkuntansa

Nykyisin on olemassa myoumls niin kutsuttuja online-editoreita Ne ovat yleensauml osa jotakin jul-kaisujaumlrjestelmaumlauml kuten Joomla Drupal tai Wordpress Online-editori hoitaa koodaustyoumln sivujen paumlivittaumljaumln puolesta Online-editori mahdollistaa websivujen paumlivittaumlmisen suoraan webselaimen avulla Sen etu verrattuna offline-editoriin on siinauml ettei tiedostoja tarvitse siir-rellauml oman koneen ja webpalvelimen vaumllillauml

Sivujen paumlivittaumlminen perinteisesti offline-editorin avulla tarkoittaa sitauml ettauml sivu siirretaumlaumln ensin muokattavaksi tietokoneelle johon on asennettu offline-editori Muokkauksen jaumllkeen sivu siirretaumlaumln takaisin palvelimelle Offline-editoreiden suurin heikkous on siinauml ettauml kaikki-en jotka sivuja muokkaavat on asennettava koneelleen kyseinen ohjelma

13 Kuinka tarkastella HTML-sivujaWeb-sivujen teko HTML-kielellauml on kiitollista puuhaa siinauml suhteessa ettauml naumlet helposti tyoumlsi jaumlljen vaikka et laittaisi sivua vaumllittoumlmaumlsti nettiin Nykyaumlaumln jokaisessa tietokoneessa on se-lain muuta ei sivun tarkastelemiseen tarvita

Kirjoita pieni esimerkki HTML-kielellauml vaikka taumlhaumln tapaan

8

NotePad++n kautta paumlaumlset tarkastelemaan lopputulosta valitsemalla Suorita ja sen jaumllkeen valitsemalla haluamasi selaimen

Taumlmaumln jaumllkeen valittu selain naumlyttaumlauml koodatun sivun sisaumllloumln

9

Katsotaan vielauml kuinka homma hoituu selaimen kautta

1) Avaa www-selain esimerkiksi Firefox Valitse Tiedosto gt Avaa tiedosto

2) Etsi tiedosto ja klikkaa Avaa Taumlssauml tapauksessa tiedosto on koehtm

3) Valitse ok ja katso lopputulos

10

14 HTML-koodin perussaumlaumlnnoumltHTML ei ole varsinainen ohjelmointikieli joten syntaksin eli saumlaumlntoumljen osalta ei ole paljon muistettavaa Taumlssauml kuitenkin perussaumlaumlnnoumlt joita olisi hyvauml noudattaa

Ei ole vaumlliauml kirjoitatko tagit isolla vai pienellauml kirjaimella XHTMLaumlauml ajatellen olisi hyvauml opetella kirjoittamaan tagit pienellauml esimerkiksi naumlin ltbgtlihavoiltbgt

Tagit tulee aina paumlaumlttaumlauml ja mieluiten oikeassa jaumlrjestyksessauml Oikea jaumlrjestys on se ettauml ensin alkanut tagi loppuu viimeisenauml Esimerkiksi lihavointi joka alkaa kappaleen sisaumlllauml ei voi loppua sen ulkopuolella

11

Sivun rakenne on aina se ettauml ensin html sitten head-osio ja viimeisenauml body-osio

Sivut toimivat vaikka rikkoisit edellauml olevia saumlaumlntoumljauml Olisi kuitenkin hyvauml oppia alusta saak-ka kirjoittamaan hyvaumlauml HTML-koodia koska siitauml on hyoumltyauml mm opeteltaessa PHP-ohjelmointia Lisaumlksi hyvin koodatut sivut naumlkyvaumlt aina oikein ja latautuvat nopeasti

HTML-koodia voidaan kirjoittaa miten sattuu ja silti selain naumlyttaumlauml kaiken oikein Se johtuu siitauml ettauml silloin selain toimii quirksmodessa eli korjaa tekemaumlsi virheet Parempi tapa on tehdauml sivut oikeiksi ilman ettauml selain hoitaa tyoumln puolestasi Lisaumlksi eri selaimet suorittavat korjaukset eri tavoin voit joutua kierteeseen jossa sivut naumlkyvaumlt eri selaimilla aina erilaisina

12

15 Nauhoite1 ja tehtaumlvauml 1

Nauhoite 1 HTMLn oikeellisuus

kesto 1135

URL httpwwwviddlercomvc425cb8c

Tehtaumlvauml 1

Mitauml virheitauml loumlydaumlt alla olevasta HTML-koodista Luettele ne kaikki

9

Katsotaan vielauml kuinka homma hoituu selaimen kautta

1) Avaa www-selain esimerkiksi Firefox Valitse Tiedosto gt Avaa tiedosto

2) Etsi tiedosto ja klikkaa Avaa Taumlssauml tapauksessa tiedosto on koehtm

3) Valitse ok ja katso lopputulos

10

14 HTML-koodin perussaumlaumlnnoumltHTML ei ole varsinainen ohjelmointikieli joten syntaksin eli saumlaumlntoumljen osalta ei ole paljon muistettavaa Taumlssauml kuitenkin perussaumlaumlnnoumlt joita olisi hyvauml noudattaa

Ei ole vaumlliauml kirjoitatko tagit isolla vai pienellauml kirjaimella XHTMLaumlauml ajatellen olisi hyvauml opetella kirjoittamaan tagit pienellauml esimerkiksi naumlin ltbgtlihavoiltbgt

Tagit tulee aina paumlaumlttaumlauml ja mieluiten oikeassa jaumlrjestyksessauml Oikea jaumlrjestys on se ettauml ensin alkanut tagi loppuu viimeisenauml Esimerkiksi lihavointi joka alkaa kappaleen sisaumlllauml ei voi loppua sen ulkopuolella

11

Sivun rakenne on aina se ettauml ensin html sitten head-osio ja viimeisenauml body-osio

Sivut toimivat vaikka rikkoisit edellauml olevia saumlaumlntoumljauml Olisi kuitenkin hyvauml oppia alusta saak-ka kirjoittamaan hyvaumlauml HTML-koodia koska siitauml on hyoumltyauml mm opeteltaessa PHP-ohjelmointia Lisaumlksi hyvin koodatut sivut naumlkyvaumlt aina oikein ja latautuvat nopeasti

HTML-koodia voidaan kirjoittaa miten sattuu ja silti selain naumlyttaumlauml kaiken oikein Se johtuu siitauml ettauml silloin selain toimii quirksmodessa eli korjaa tekemaumlsi virheet Parempi tapa on tehdauml sivut oikeiksi ilman ettauml selain hoitaa tyoumln puolestasi Lisaumlksi eri selaimet suorittavat korjaukset eri tavoin voit joutua kierteeseen jossa sivut naumlkyvaumlt eri selaimilla aina erilaisina

12

15 Nauhoite1 ja tehtaumlvauml 1

Nauhoite 1 HTMLn oikeellisuus

kesto 1135

URL httpwwwviddlercomvc425cb8c

Tehtaumlvauml 1

Mitauml virheitauml loumlydaumlt alla olevasta HTML-koodista Luettele ne kaikki

10

14 HTML-koodin perussaumlaumlnnoumltHTML ei ole varsinainen ohjelmointikieli joten syntaksin eli saumlaumlntoumljen osalta ei ole paljon muistettavaa Taumlssauml kuitenkin perussaumlaumlnnoumlt joita olisi hyvauml noudattaa

Ei ole vaumlliauml kirjoitatko tagit isolla vai pienellauml kirjaimella XHTMLaumlauml ajatellen olisi hyvauml opetella kirjoittamaan tagit pienellauml esimerkiksi naumlin ltbgtlihavoiltbgt

Tagit tulee aina paumlaumlttaumlauml ja mieluiten oikeassa jaumlrjestyksessauml Oikea jaumlrjestys on se ettauml ensin alkanut tagi loppuu viimeisenauml Esimerkiksi lihavointi joka alkaa kappaleen sisaumlllauml ei voi loppua sen ulkopuolella

11

Sivun rakenne on aina se ettauml ensin html sitten head-osio ja viimeisenauml body-osio

Sivut toimivat vaikka rikkoisit edellauml olevia saumlaumlntoumljauml Olisi kuitenkin hyvauml oppia alusta saak-ka kirjoittamaan hyvaumlauml HTML-koodia koska siitauml on hyoumltyauml mm opeteltaessa PHP-ohjelmointia Lisaumlksi hyvin koodatut sivut naumlkyvaumlt aina oikein ja latautuvat nopeasti

HTML-koodia voidaan kirjoittaa miten sattuu ja silti selain naumlyttaumlauml kaiken oikein Se johtuu siitauml ettauml silloin selain toimii quirksmodessa eli korjaa tekemaumlsi virheet Parempi tapa on tehdauml sivut oikeiksi ilman ettauml selain hoitaa tyoumln puolestasi Lisaumlksi eri selaimet suorittavat korjaukset eri tavoin voit joutua kierteeseen jossa sivut naumlkyvaumlt eri selaimilla aina erilaisina

12

15 Nauhoite1 ja tehtaumlvauml 1

Nauhoite 1 HTMLn oikeellisuus

kesto 1135

URL httpwwwviddlercomvc425cb8c

Tehtaumlvauml 1

Mitauml virheitauml loumlydaumlt alla olevasta HTML-koodista Luettele ne kaikki

11

Sivun rakenne on aina se ettauml ensin html sitten head-osio ja viimeisenauml body-osio

Sivut toimivat vaikka rikkoisit edellauml olevia saumlaumlntoumljauml Olisi kuitenkin hyvauml oppia alusta saak-ka kirjoittamaan hyvaumlauml HTML-koodia koska siitauml on hyoumltyauml mm opeteltaessa PHP-ohjelmointia Lisaumlksi hyvin koodatut sivut naumlkyvaumlt aina oikein ja latautuvat nopeasti

HTML-koodia voidaan kirjoittaa miten sattuu ja silti selain naumlyttaumlauml kaiken oikein Se johtuu siitauml ettauml silloin selain toimii quirksmodessa eli korjaa tekemaumlsi virheet Parempi tapa on tehdauml sivut oikeiksi ilman ettauml selain hoitaa tyoumln puolestasi Lisaumlksi eri selaimet suorittavat korjaukset eri tavoin voit joutua kierteeseen jossa sivut naumlkyvaumlt eri selaimilla aina erilaisina

12

15 Nauhoite1 ja tehtaumlvauml 1

Nauhoite 1 HTMLn oikeellisuus

kesto 1135

URL httpwwwviddlercomvc425cb8c

Tehtaumlvauml 1

Mitauml virheitauml loumlydaumlt alla olevasta HTML-koodista Luettele ne kaikki

12

15 Nauhoite1 ja tehtaumlvauml 1

Nauhoite 1 HTMLn oikeellisuus

kesto 1135

URL httpwwwviddlercomvc425cb8c

Tehtaumlvauml 1

Mitauml virheitauml loumlydaumlt alla olevasta HTML-koodista Luettele ne kaikki

13

2 HTML-sivun rakenneHTML-koodissa on seitsemaumln tagia jotka maumlaumlrittelevaumlt pelkaumlstaumlaumln sivun rakennetta Ne ovat html head body div ja span Kaksi edellisestauml listasta puuttuvaa tagia ovat h ja p joista myoumlhemmin lisaumlauml

HTMLJokainen HTML-sivu alkaa tagilla lthtmlgt ja paumlaumlttyy tagiin lthtmlgt Sillauml ei ole vaumlliauml kirjoite-taanko lthtmlgt vaiko ltHTMLgt HTML on juurielementti eli kaikkien muiden elementtien on oltava taumlysin sen sisaumlllauml Minimissaumlaumln HTML-sivu sisaumlltaumlauml tagit html head ja body

HEADHead-tagin sisaumlaumln kirjoitetaan metatietoja tyylitietoja ja skriptejauml Taumlrkein elementti sen si-saumlllauml on lttitlegt joka maumlaumlrittaumlauml sivulle otsikon Head-tagi paumlaumltetaumlaumln juuri ennen body-tagia HEAD-elementti on pakollinen ja sitauml kaumlytetaumlaumln vain yhden kerran per sivu Sivulla ei voi olla kahta head-tagia

BODYBody-tagin sisaumlaumln tulee sivun kaikki sisaumlltouml Body-tagi alkaa vaumllittoumlmaumlsti kun head-tagi paumlaumlt-tyy Jokaisen sivun toiseksi viimeisen tagin tulisi olla ltbodygt

21 Tyylimaumlaumlrittelytagit div ja spanDiv ja span ovat HTML-elementtejauml joiden kaumlyttoumloumln liittyvaumlt aina tyylimaumlaumlritykset Erityi-sesti div-elementillauml on taumlrkeauml rooli www-sivun taitossa Ilman tyylimaumlaumlrittelyjauml kyseiset tagit eivaumlt naumlytauml tekevaumln sivuston ulkoasun kannalta paljoakaan Siksi div- ja span-tagit voivat tuntua tarpeettomilta Niistauml saadaankin hyoumlty irti vasta kun niihin lisaumltaumlaumln CSS-tyylimaumlaumlrittelyt

211 DivDiv-tagilla voidaan ryhmitellauml lohkoelementtejauml Sitauml kaumlytetaumlaumln esimerkiksi dokumentin tie-tyn osan fontin taustavaumlrin tai sijoittelun apuna Yleensauml div-tagit liittyvaumlt CSS-muotoiluihin eli ne eivaumlt tee itsessaumlaumln mitaumlaumln ulkoasumuunnoksia mutta ne muodostavat oman lohkon Esimerkiksi Eino Leinon runo voidaan kirjoittaa div-tageilla

14

Selaimen kautta katseltuna runo naumlyttaumlauml kuten alla

15

Jokainen div-tagi muodostaa oman lohkonsa eli taumlssauml tapauksessa suorakaiteen joka alkaa tagilla ltdivgt ja paumlaumlttyy tagiin ltdivgt Jos alueen kokoa ei ole maumlaumlritelty ulottuu div-tagin rajaama alue koko rivin mittaiseksi Taumlllauml tavoin tehdyt lohkot sijoittuvat oletusarvoisesti al-lekkain

Yleensauml diviauml tarvitaan CSSaumlauml varten kun esimerkiksi palstoitetaan sivua

16

212 SpanSpan ja div toimivat pitkaumllti samalla tavalla mutta span ei tee rivitystauml Span jatkaa samalla rivillauml niin kauan kuin mahdollista Eli sama runo nyt span-tagin avulla kirjoitettuna

17

Ja taumlltauml se naumlyttaumlauml selaimen kautta katseltuna

HUOM Span-tagi ei muodosta kappaletta tekstistauml teksti tulee poumltkoumloumln eli inline

Rakenteellisesti oikein tehty HTML-sivu on kuten alla olevassa kuvassa

18

Selaimen kautta katseltuna sivu naumlyttaumlauml kuten alla

23 Kappaleet ja otsikotNyt keskitytaumlaumln siihen kuinka sivuille saadaan tekstiauml HTMLssauml kuten tekstinkaumlsittelyssauml yleensauml on taumlrkeaumlauml erottaa kappaleet toisistaan Lisaumlksi tarvitaan otsikoita joita HTMLssauml on kaikkiaan kuusi erilaista Yleensauml niistauml kaumlytetaumlaumln kuitenkin vain kolmea ensimmaumlistauml

231 P-tagiP-tagia ltpgt (engl paragraph) tarvitaan laumlhinnauml leipaumltekstiauml varten Sen avulla kappaleet ero-tellaan toisistaan Taumlssauml pieni esimerkki

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

14

Selaimen kautta katseltuna runo naumlyttaumlauml kuten alla

15

Jokainen div-tagi muodostaa oman lohkonsa eli taumlssauml tapauksessa suorakaiteen joka alkaa tagilla ltdivgt ja paumlaumlttyy tagiin ltdivgt Jos alueen kokoa ei ole maumlaumlritelty ulottuu div-tagin rajaama alue koko rivin mittaiseksi Taumlllauml tavoin tehdyt lohkot sijoittuvat oletusarvoisesti al-lekkain

Yleensauml diviauml tarvitaan CSSaumlauml varten kun esimerkiksi palstoitetaan sivua

16

212 SpanSpan ja div toimivat pitkaumllti samalla tavalla mutta span ei tee rivitystauml Span jatkaa samalla rivillauml niin kauan kuin mahdollista Eli sama runo nyt span-tagin avulla kirjoitettuna

17

Ja taumlltauml se naumlyttaumlauml selaimen kautta katseltuna

HUOM Span-tagi ei muodosta kappaletta tekstistauml teksti tulee poumltkoumloumln eli inline

Rakenteellisesti oikein tehty HTML-sivu on kuten alla olevassa kuvassa

18

Selaimen kautta katseltuna sivu naumlyttaumlauml kuten alla

23 Kappaleet ja otsikotNyt keskitytaumlaumln siihen kuinka sivuille saadaan tekstiauml HTMLssauml kuten tekstinkaumlsittelyssauml yleensauml on taumlrkeaumlauml erottaa kappaleet toisistaan Lisaumlksi tarvitaan otsikoita joita HTMLssauml on kaikkiaan kuusi erilaista Yleensauml niistauml kaumlytetaumlaumln kuitenkin vain kolmea ensimmaumlistauml

231 P-tagiP-tagia ltpgt (engl paragraph) tarvitaan laumlhinnauml leipaumltekstiauml varten Sen avulla kappaleet ero-tellaan toisistaan Taumlssauml pieni esimerkki

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

15

Jokainen div-tagi muodostaa oman lohkonsa eli taumlssauml tapauksessa suorakaiteen joka alkaa tagilla ltdivgt ja paumlaumlttyy tagiin ltdivgt Jos alueen kokoa ei ole maumlaumlritelty ulottuu div-tagin rajaama alue koko rivin mittaiseksi Taumlllauml tavoin tehdyt lohkot sijoittuvat oletusarvoisesti al-lekkain

Yleensauml diviauml tarvitaan CSSaumlauml varten kun esimerkiksi palstoitetaan sivua

16

212 SpanSpan ja div toimivat pitkaumllti samalla tavalla mutta span ei tee rivitystauml Span jatkaa samalla rivillauml niin kauan kuin mahdollista Eli sama runo nyt span-tagin avulla kirjoitettuna

17

Ja taumlltauml se naumlyttaumlauml selaimen kautta katseltuna

HUOM Span-tagi ei muodosta kappaletta tekstistauml teksti tulee poumltkoumloumln eli inline

Rakenteellisesti oikein tehty HTML-sivu on kuten alla olevassa kuvassa

18

Selaimen kautta katseltuna sivu naumlyttaumlauml kuten alla

23 Kappaleet ja otsikotNyt keskitytaumlaumln siihen kuinka sivuille saadaan tekstiauml HTMLssauml kuten tekstinkaumlsittelyssauml yleensauml on taumlrkeaumlauml erottaa kappaleet toisistaan Lisaumlksi tarvitaan otsikoita joita HTMLssauml on kaikkiaan kuusi erilaista Yleensauml niistauml kaumlytetaumlaumln kuitenkin vain kolmea ensimmaumlistauml

231 P-tagiP-tagia ltpgt (engl paragraph) tarvitaan laumlhinnauml leipaumltekstiauml varten Sen avulla kappaleet ero-tellaan toisistaan Taumlssauml pieni esimerkki

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

16

212 SpanSpan ja div toimivat pitkaumllti samalla tavalla mutta span ei tee rivitystauml Span jatkaa samalla rivillauml niin kauan kuin mahdollista Eli sama runo nyt span-tagin avulla kirjoitettuna

17

Ja taumlltauml se naumlyttaumlauml selaimen kautta katseltuna

HUOM Span-tagi ei muodosta kappaletta tekstistauml teksti tulee poumltkoumloumln eli inline

Rakenteellisesti oikein tehty HTML-sivu on kuten alla olevassa kuvassa

18

Selaimen kautta katseltuna sivu naumlyttaumlauml kuten alla

23 Kappaleet ja otsikotNyt keskitytaumlaumln siihen kuinka sivuille saadaan tekstiauml HTMLssauml kuten tekstinkaumlsittelyssauml yleensauml on taumlrkeaumlauml erottaa kappaleet toisistaan Lisaumlksi tarvitaan otsikoita joita HTMLssauml on kaikkiaan kuusi erilaista Yleensauml niistauml kaumlytetaumlaumln kuitenkin vain kolmea ensimmaumlistauml

231 P-tagiP-tagia ltpgt (engl paragraph) tarvitaan laumlhinnauml leipaumltekstiauml varten Sen avulla kappaleet ero-tellaan toisistaan Taumlssauml pieni esimerkki

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

17

Ja taumlltauml se naumlyttaumlauml selaimen kautta katseltuna

HUOM Span-tagi ei muodosta kappaletta tekstistauml teksti tulee poumltkoumloumln eli inline

Rakenteellisesti oikein tehty HTML-sivu on kuten alla olevassa kuvassa

18

Selaimen kautta katseltuna sivu naumlyttaumlauml kuten alla

23 Kappaleet ja otsikotNyt keskitytaumlaumln siihen kuinka sivuille saadaan tekstiauml HTMLssauml kuten tekstinkaumlsittelyssauml yleensauml on taumlrkeaumlauml erottaa kappaleet toisistaan Lisaumlksi tarvitaan otsikoita joita HTMLssauml on kaikkiaan kuusi erilaista Yleensauml niistauml kaumlytetaumlaumln kuitenkin vain kolmea ensimmaumlistauml

231 P-tagiP-tagia ltpgt (engl paragraph) tarvitaan laumlhinnauml leipaumltekstiauml varten Sen avulla kappaleet ero-tellaan toisistaan Taumlssauml pieni esimerkki

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

18

Selaimen kautta katseltuna sivu naumlyttaumlauml kuten alla

23 Kappaleet ja otsikotNyt keskitytaumlaumln siihen kuinka sivuille saadaan tekstiauml HTMLssauml kuten tekstinkaumlsittelyssauml yleensauml on taumlrkeaumlauml erottaa kappaleet toisistaan Lisaumlksi tarvitaan otsikoita joita HTMLssauml on kaikkiaan kuusi erilaista Yleensauml niistauml kaumlytetaumlaumln kuitenkin vain kolmea ensimmaumlistauml

231 P-tagiP-tagia ltpgt (engl paragraph) tarvitaan laumlhinnauml leipaumltekstiauml varten Sen avulla kappaleet ero-tellaan toisistaan Taumlssauml pieni esimerkki

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

19

Selaimessa koodi naumlyttaumlauml kuten alla olevassa kuvassa

HUOM Vaikka editorissa painetaan enter se ei tarkoita rivinvaihtoa html-koodissa Kappa-leet erotetaan toisistaan p-tagin avulla

232 Otsikko-tagit (h1-h6)Otsikko-tagien avulla sivulle luodaan rakennetta Sivun taumlrkein otsikko merkataan yleensauml tagilla h1 Seuraavan tason otsikko tagilla h2 ja kun siitauml mennaumlaumln taso alemmas kaumlytetaumlaumln tagia h3

Selaimen kautta tarkasteltuna yllauml oleva koodi naumlyttaumlauml kuten alla olevassa kuvassa

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

20

24 Nauhoite 2 ja tehtaumlvauml 2Nauhoite 2 Kappaleet ja otsikot

kesto 0720

URL httpwwwviddlercomv10a4bd02

Tehtaumlvauml 2

Kirjoita alla oleva teksti html-koodilla jotta se naumlyttaumlisi samalta kuin taumlssauml alla Kaumlytettaumlvissauml ovat vain HTML-tagit lthtmlgt ltheadgt ltbodygt ltpgt ja lth3gt

21

Taumlssauml sama raakatekstinauml jonka voit kopioida harjoitusta varten

Eksosomaattinen oppiminenFyysisten ja kielellisten vaumllineitten avulla ihminen voi ylittaumlauml it-sensauml Vuorovaikutuksemme kyseisten vaumllineiden kanssa on keskeistauml oppimisen kannalta Yhdessauml naumlmauml erilaiset vaumllineet muodostavat osan kulttuurisista voimavaroistamme Jo pikai-nen silmaumlys omaan asuntoomme osoittaa kuinka taumlrkeaumlksi erilaiset fyysiset vaumllineet ovat tul-leet erilaisten toimintojen yllaumlpidossa ja erilaisten ongelmien ratkaisuissa Elaumlmme autojen puhelinten CD-soittimien mikroaaltouunien televisioiden kahvinkeittimien ja tietokoneiden maailmassa (Saumlljouml 2001 72) Naumlmauml kaikki em vaumllineet sijaitsevat oman kehomme ulkopuo-lella ne ovat siis eksosomaattisiaOppimisen suhteen onkin kysyttaumlvauml ettauml onko tekniikka ihmisen sisauml- vai ulkopuolella Toinen yhtauml keskeinen kysymys on ettauml onko oppiminen aina samanlaista Tekniikan kehittyessauml meidaumln kommunikointimme on muuttunut samalla taval-la myoumls oppiminen on muuntunut Oppiminen eilen ja taumlnaumlaumln eivaumlt siis ole taumlysin samanlaisia tapahtumia Onkin hyvauml luoda katsaus taaksepaumlin ja tarkastella sitauml kuinka ihmiset ennen kommunikoivat ja oppivat Yksi olennainen ero eilispaumlivaumln ja nykypaumlivaumln vaumllillauml on siinauml ettauml aina ei ole ollut instituutiota nimeltauml koulu Kuitenkin myoumls ennen ihmiset kommunikoi-vat ja oppivat

22

3 Sisaumllloumln muotoilu Sisaumllloumln muotoilun avulla voidaan parantaa sivujen luettavuutta Se mahdollistaa myoumls asioi-den korostamisen HTML on kuitenkin sisaumllloumln muotoilun osalta kaukana siitauml mihin nykyi-set tekstinkaumlsittelyohjelmat kykenevaumlt Perustason muotoilu sen sijaan onnistuu Tehokeino-jen avulla voidaan korostaa tai merkitauml tiettyauml osaa tekstistauml Kyse on esimerkiksi tekstin li-havoinnista ja kursivoinnista mutta toisaalta myoumls tavasta kirjoittaa lainaukset ja maumlaumlritel-maumlt

31 Fyysiset tehosteetTavallisia fyysisiauml tehosteita ovat lihavointi ltbgt ja kursivointi ltigt Mutta muitakin loumlytyy kuten kaumly ilmi alla olevasta taulukosta Varsinkin matematiikassa tarvitaan ylaumlindeksejauml

miltauml naumlyttaumlauml englanniksi tagi

lihavointi bold ltbgtlihavointiltbgt

kursivointi italic ltigtkursivointiltigt

poistettu strike ltstrikegtpoistettultstrikegt

E=MC2 superscript ltsupgtylaumlindeksiltsupgt

alaindeksi2 subscript ltsubgtalaindeksiltsubgt

HUOM Kursivointia ei kannata kaumlyttaumlauml websivuilla koska tekstistauml tulee vaikealukuista

32 Loogiset tehosteetLoogiset tekstitehosteet maumlaumlrittelevaumlt tehosteen antaman vaikutelman mutta eivaumlt sitauml miltauml lopullinen teksti naumlyttaumlauml Eniten naumlistauml tehosteista kaumlytetaumlaumln tehostetta ltblockquotegt jonka avulla tekstiauml voidaan sisentaumlauml Toinen varsin kaumlyttoumlkelpoinen looginen tehoste on ltcodegt jonka avulla websivulle saadaan koodi kaumltevaumlsti Courier-kirjasimella kirjoitettuna

23

Tagi Mihin sopii Miten vaikuttaa

ltADDRESSgtltADDRESSgt Sivun tekijaumln tiedot

Kursiivi

ltBLOCKQUOTEgtltBLOCKQUOTEgt

Pitkauml lainaus Kappaleen sisennys kappaleen ylauml- ja alapuolelle jaumltetaumlaumln vaumlhaumln tyhjaumlauml tilaa

ltCITEgtltCITEgt Lainaus Kursiivi

ltCODEgtltCODEgt Ohjelmakoodi Courier-fontti

ltDFNgtltDFNgt Maumlaumlritelmauml Kursiivi

ltEMgtltEMgt Painotus Kursiivi

ltKBDgtltKBDgt Naumlppaumlinteksti Lihavoitu courier-fontti

ltSAMPgtltSAMPgt Esimerkki Courier-fontti

ltSTRONGgtltSTRONGgt Voimakas paino-tus

Lihavoitu

ltVARgtltVARgt Korvattava muuttuja

Kursiivi

33 Esimerkki tekstin tehosteistalthtmlgtltheadgtlttitlegtEsimerkki tehosteistalttitlegtltheadgtltbodygtlth2gtHaasteena muutos ja oppiminenlth2gt

ltpgtltbgtTietotekniikkaltbgt on maatiloilla arkipaumlivaumlinen juttu ltigtLehmaumlllauml on pantaltigtjoka sisaumlltaumlauml digitaalisessa muodossa tietoja lehmaumlstauml Pannan tietojen perusteella tietokone osaa kertoa mitauml lehmauml on syoumlnyt ja paljonko se luovuttaa maitoa lypsykertaa kohti ltpgt

ltpgtPerinteisiaumlkin ltbgtnavettojaltbgt on vielauml olemassa joissa lehmaumlt ovat parressa ja lypsaumlminen sujuu kannukoneella Ne ovat nykyaikaiselle maatalo-uslomittajalle eksoottisia harvinaisuuksia Muutos on vaatinut ltemgtmaatiloiltaltemgt ja varsinkin maatalouslomittajilta oppimista ja so-peutumista tekniikan suomiin mahdollisuuksiin ja oikkuihin Jopa yleensauml muutoksia karsastavat ltbgtlehmaumltltbgt ovat oppineet uusille tavoilleltpgt

ltaddressgtJari Sarja Maumlntyharjultaddressgt

ltbodygtlthtmlgt

24

Selaimen kautta esimerkki naumlyttaumlauml kuten alla olevassa kuvassa

Kuten kuvasta naumlkyy kannattaa tekstin tehokeinoja kaumlyttaumlauml saumlaumlsteliaumlaumlsti Varsinkin kursivoin-ti toimii tietokoneen naumlytoumlllauml huonosti

34 AsemointiAsemoinnissa on kaumlytoumlssauml kolme eri mahdollisuutta samaan tapaan kuin vaikkapa Word-tekstinkaumlsittelyohjelmassa Voit asemoida tekstin oikealle vasemmalle tai keskelle Voit myoumls tasata sekauml oikean ettauml vasemman reunuksen mikauml ei tosin webissauml ole suotavaa puut-teellisen tavutuksen vuoksi Taumlssauml alla esitellaumlaumln kaikki asemointitavat esimerkin kera

ltp align=leftgt Vasen tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=centergt Keskitetty

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

25

ltp align=rightgt Oikea tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=justifygt Molemmat tasan

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

35 Kirjasimet eli fontitHTML mahdollistaa fonttien eli kirjasimien maumlaumlrittaumlmisen HTMLn avulla voidaan saumlaumltaumlauml kirjasimien kokoa vaumlriauml ja kirjasinperhettauml Kirjasimia ei ole pakko maumlaumlritellauml Jos ne jaumltetaumlaumln maumlaumlrittelemaumlttauml naumlyttaumlauml selain kirjasimet oletusarvonsa mukaisesti

351 Font size eli fontin kokoFontin koko maumlaumlritellaumlaumln tagilla ltfont size=xgt Fonttien koko ilmoitetaan asteikolla 17 tai suhteellisina arvoina esim size=+1 Peruskoko on 3 Taumlssauml esimerkkejauml

ltpgtltfont size=1gtkirjasinltfontgtltpgtltpgtltfont size=2gtkirjasinltfontgtltpgtltpgtltfont size=3gtkirjasinltfontgtltpgtltpgtltfont size=4gtkirjasinltfontgtltpgtltpgtltfont size=5gtkirjasinltfontgtltpgtltpgtltfont size=6gtkirjasinltfontgtltpgtltpgtltfont size=7gtkirjasinltfontgtltpgt

26

352 Font color eli fontin vaumlriVaumlri ilmoitetaan joko RGB-arvona tai nimenauml Taumlssauml pari esimerkkiauml

ltpgtltfont color=redgtpunainenltfontgtltpgtltpgtltfont color=greengtvihreaumlltfontgtltpgtltpgtltfont color=bluegtsininenltfontgtltpgtltpgtltfont color=ff0000gtpunainenltfontgtltpgtltpgtltfont color=00ff00gtvihreaumlltfontgtltpgtltpgtltfont color=0000ffgtsininenltfontgtltpgt

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

22

3 Sisaumllloumln muotoilu Sisaumllloumln muotoilun avulla voidaan parantaa sivujen luettavuutta Se mahdollistaa myoumls asioi-den korostamisen HTML on kuitenkin sisaumllloumln muotoilun osalta kaukana siitauml mihin nykyi-set tekstinkaumlsittelyohjelmat kykenevaumlt Perustason muotoilu sen sijaan onnistuu Tehokeino-jen avulla voidaan korostaa tai merkitauml tiettyauml osaa tekstistauml Kyse on esimerkiksi tekstin li-havoinnista ja kursivoinnista mutta toisaalta myoumls tavasta kirjoittaa lainaukset ja maumlaumlritel-maumlt

31 Fyysiset tehosteetTavallisia fyysisiauml tehosteita ovat lihavointi ltbgt ja kursivointi ltigt Mutta muitakin loumlytyy kuten kaumly ilmi alla olevasta taulukosta Varsinkin matematiikassa tarvitaan ylaumlindeksejauml

miltauml naumlyttaumlauml englanniksi tagi

lihavointi bold ltbgtlihavointiltbgt

kursivointi italic ltigtkursivointiltigt

poistettu strike ltstrikegtpoistettultstrikegt

E=MC2 superscript ltsupgtylaumlindeksiltsupgt

alaindeksi2 subscript ltsubgtalaindeksiltsubgt

HUOM Kursivointia ei kannata kaumlyttaumlauml websivuilla koska tekstistauml tulee vaikealukuista

32 Loogiset tehosteetLoogiset tekstitehosteet maumlaumlrittelevaumlt tehosteen antaman vaikutelman mutta eivaumlt sitauml miltauml lopullinen teksti naumlyttaumlauml Eniten naumlistauml tehosteista kaumlytetaumlaumln tehostetta ltblockquotegt jonka avulla tekstiauml voidaan sisentaumlauml Toinen varsin kaumlyttoumlkelpoinen looginen tehoste on ltcodegt jonka avulla websivulle saadaan koodi kaumltevaumlsti Courier-kirjasimella kirjoitettuna

23

Tagi Mihin sopii Miten vaikuttaa

ltADDRESSgtltADDRESSgt Sivun tekijaumln tiedot

Kursiivi

ltBLOCKQUOTEgtltBLOCKQUOTEgt

Pitkauml lainaus Kappaleen sisennys kappaleen ylauml- ja alapuolelle jaumltetaumlaumln vaumlhaumln tyhjaumlauml tilaa

ltCITEgtltCITEgt Lainaus Kursiivi

ltCODEgtltCODEgt Ohjelmakoodi Courier-fontti

ltDFNgtltDFNgt Maumlaumlritelmauml Kursiivi

ltEMgtltEMgt Painotus Kursiivi

ltKBDgtltKBDgt Naumlppaumlinteksti Lihavoitu courier-fontti

ltSAMPgtltSAMPgt Esimerkki Courier-fontti

ltSTRONGgtltSTRONGgt Voimakas paino-tus

Lihavoitu

ltVARgtltVARgt Korvattava muuttuja

Kursiivi

33 Esimerkki tekstin tehosteistalthtmlgtltheadgtlttitlegtEsimerkki tehosteistalttitlegtltheadgtltbodygtlth2gtHaasteena muutos ja oppiminenlth2gt

ltpgtltbgtTietotekniikkaltbgt on maatiloilla arkipaumlivaumlinen juttu ltigtLehmaumlllauml on pantaltigtjoka sisaumlltaumlauml digitaalisessa muodossa tietoja lehmaumlstauml Pannan tietojen perusteella tietokone osaa kertoa mitauml lehmauml on syoumlnyt ja paljonko se luovuttaa maitoa lypsykertaa kohti ltpgt

ltpgtPerinteisiaumlkin ltbgtnavettojaltbgt on vielauml olemassa joissa lehmaumlt ovat parressa ja lypsaumlminen sujuu kannukoneella Ne ovat nykyaikaiselle maatalo-uslomittajalle eksoottisia harvinaisuuksia Muutos on vaatinut ltemgtmaatiloiltaltemgt ja varsinkin maatalouslomittajilta oppimista ja so-peutumista tekniikan suomiin mahdollisuuksiin ja oikkuihin Jopa yleensauml muutoksia karsastavat ltbgtlehmaumltltbgt ovat oppineet uusille tavoilleltpgt

ltaddressgtJari Sarja Maumlntyharjultaddressgt

ltbodygtlthtmlgt

24

Selaimen kautta esimerkki naumlyttaumlauml kuten alla olevassa kuvassa

Kuten kuvasta naumlkyy kannattaa tekstin tehokeinoja kaumlyttaumlauml saumlaumlsteliaumlaumlsti Varsinkin kursivoin-ti toimii tietokoneen naumlytoumlllauml huonosti

34 AsemointiAsemoinnissa on kaumlytoumlssauml kolme eri mahdollisuutta samaan tapaan kuin vaikkapa Word-tekstinkaumlsittelyohjelmassa Voit asemoida tekstin oikealle vasemmalle tai keskelle Voit myoumls tasata sekauml oikean ettauml vasemman reunuksen mikauml ei tosin webissauml ole suotavaa puut-teellisen tavutuksen vuoksi Taumlssauml alla esitellaumlaumln kaikki asemointitavat esimerkin kera

ltp align=leftgt Vasen tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=centergt Keskitetty

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

25

ltp align=rightgt Oikea tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=justifygt Molemmat tasan

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

35 Kirjasimet eli fontitHTML mahdollistaa fonttien eli kirjasimien maumlaumlrittaumlmisen HTMLn avulla voidaan saumlaumltaumlauml kirjasimien kokoa vaumlriauml ja kirjasinperhettauml Kirjasimia ei ole pakko maumlaumlritellauml Jos ne jaumltetaumlaumln maumlaumlrittelemaumlttauml naumlyttaumlauml selain kirjasimet oletusarvonsa mukaisesti

351 Font size eli fontin kokoFontin koko maumlaumlritellaumlaumln tagilla ltfont size=xgt Fonttien koko ilmoitetaan asteikolla 17 tai suhteellisina arvoina esim size=+1 Peruskoko on 3 Taumlssauml esimerkkejauml

ltpgtltfont size=1gtkirjasinltfontgtltpgtltpgtltfont size=2gtkirjasinltfontgtltpgtltpgtltfont size=3gtkirjasinltfontgtltpgtltpgtltfont size=4gtkirjasinltfontgtltpgtltpgtltfont size=5gtkirjasinltfontgtltpgtltpgtltfont size=6gtkirjasinltfontgtltpgtltpgtltfont size=7gtkirjasinltfontgtltpgt

26

352 Font color eli fontin vaumlriVaumlri ilmoitetaan joko RGB-arvona tai nimenauml Taumlssauml pari esimerkkiauml

ltpgtltfont color=redgtpunainenltfontgtltpgtltpgtltfont color=greengtvihreaumlltfontgtltpgtltpgtltfont color=bluegtsininenltfontgtltpgtltpgtltfont color=ff0000gtpunainenltfontgtltpgtltpgtltfont color=00ff00gtvihreaumlltfontgtltpgtltpgtltfont color=0000ffgtsininenltfontgtltpgt

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

23

Tagi Mihin sopii Miten vaikuttaa

ltADDRESSgtltADDRESSgt Sivun tekijaumln tiedot

Kursiivi

ltBLOCKQUOTEgtltBLOCKQUOTEgt

Pitkauml lainaus Kappaleen sisennys kappaleen ylauml- ja alapuolelle jaumltetaumlaumln vaumlhaumln tyhjaumlauml tilaa

ltCITEgtltCITEgt Lainaus Kursiivi

ltCODEgtltCODEgt Ohjelmakoodi Courier-fontti

ltDFNgtltDFNgt Maumlaumlritelmauml Kursiivi

ltEMgtltEMgt Painotus Kursiivi

ltKBDgtltKBDgt Naumlppaumlinteksti Lihavoitu courier-fontti

ltSAMPgtltSAMPgt Esimerkki Courier-fontti

ltSTRONGgtltSTRONGgt Voimakas paino-tus

Lihavoitu

ltVARgtltVARgt Korvattava muuttuja

Kursiivi

33 Esimerkki tekstin tehosteistalthtmlgtltheadgtlttitlegtEsimerkki tehosteistalttitlegtltheadgtltbodygtlth2gtHaasteena muutos ja oppiminenlth2gt

ltpgtltbgtTietotekniikkaltbgt on maatiloilla arkipaumlivaumlinen juttu ltigtLehmaumlllauml on pantaltigtjoka sisaumlltaumlauml digitaalisessa muodossa tietoja lehmaumlstauml Pannan tietojen perusteella tietokone osaa kertoa mitauml lehmauml on syoumlnyt ja paljonko se luovuttaa maitoa lypsykertaa kohti ltpgt

ltpgtPerinteisiaumlkin ltbgtnavettojaltbgt on vielauml olemassa joissa lehmaumlt ovat parressa ja lypsaumlminen sujuu kannukoneella Ne ovat nykyaikaiselle maatalo-uslomittajalle eksoottisia harvinaisuuksia Muutos on vaatinut ltemgtmaatiloiltaltemgt ja varsinkin maatalouslomittajilta oppimista ja so-peutumista tekniikan suomiin mahdollisuuksiin ja oikkuihin Jopa yleensauml muutoksia karsastavat ltbgtlehmaumltltbgt ovat oppineet uusille tavoilleltpgt

ltaddressgtJari Sarja Maumlntyharjultaddressgt

ltbodygtlthtmlgt

24

Selaimen kautta esimerkki naumlyttaumlauml kuten alla olevassa kuvassa

Kuten kuvasta naumlkyy kannattaa tekstin tehokeinoja kaumlyttaumlauml saumlaumlsteliaumlaumlsti Varsinkin kursivoin-ti toimii tietokoneen naumlytoumlllauml huonosti

34 AsemointiAsemoinnissa on kaumlytoumlssauml kolme eri mahdollisuutta samaan tapaan kuin vaikkapa Word-tekstinkaumlsittelyohjelmassa Voit asemoida tekstin oikealle vasemmalle tai keskelle Voit myoumls tasata sekauml oikean ettauml vasemman reunuksen mikauml ei tosin webissauml ole suotavaa puut-teellisen tavutuksen vuoksi Taumlssauml alla esitellaumlaumln kaikki asemointitavat esimerkin kera

ltp align=leftgt Vasen tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=centergt Keskitetty

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

25

ltp align=rightgt Oikea tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=justifygt Molemmat tasan

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

35 Kirjasimet eli fontitHTML mahdollistaa fonttien eli kirjasimien maumlaumlrittaumlmisen HTMLn avulla voidaan saumlaumltaumlauml kirjasimien kokoa vaumlriauml ja kirjasinperhettauml Kirjasimia ei ole pakko maumlaumlritellauml Jos ne jaumltetaumlaumln maumlaumlrittelemaumlttauml naumlyttaumlauml selain kirjasimet oletusarvonsa mukaisesti

351 Font size eli fontin kokoFontin koko maumlaumlritellaumlaumln tagilla ltfont size=xgt Fonttien koko ilmoitetaan asteikolla 17 tai suhteellisina arvoina esim size=+1 Peruskoko on 3 Taumlssauml esimerkkejauml

ltpgtltfont size=1gtkirjasinltfontgtltpgtltpgtltfont size=2gtkirjasinltfontgtltpgtltpgtltfont size=3gtkirjasinltfontgtltpgtltpgtltfont size=4gtkirjasinltfontgtltpgtltpgtltfont size=5gtkirjasinltfontgtltpgtltpgtltfont size=6gtkirjasinltfontgtltpgtltpgtltfont size=7gtkirjasinltfontgtltpgt

26

352 Font color eli fontin vaumlriVaumlri ilmoitetaan joko RGB-arvona tai nimenauml Taumlssauml pari esimerkkiauml

ltpgtltfont color=redgtpunainenltfontgtltpgtltpgtltfont color=greengtvihreaumlltfontgtltpgtltpgtltfont color=bluegtsininenltfontgtltpgtltpgtltfont color=ff0000gtpunainenltfontgtltpgtltpgtltfont color=00ff00gtvihreaumlltfontgtltpgtltpgtltfont color=0000ffgtsininenltfontgtltpgt

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

24

Selaimen kautta esimerkki naumlyttaumlauml kuten alla olevassa kuvassa

Kuten kuvasta naumlkyy kannattaa tekstin tehokeinoja kaumlyttaumlauml saumlaumlsteliaumlaumlsti Varsinkin kursivoin-ti toimii tietokoneen naumlytoumlllauml huonosti

34 AsemointiAsemoinnissa on kaumlytoumlssauml kolme eri mahdollisuutta samaan tapaan kuin vaikkapa Word-tekstinkaumlsittelyohjelmassa Voit asemoida tekstin oikealle vasemmalle tai keskelle Voit myoumls tasata sekauml oikean ettauml vasemman reunuksen mikauml ei tosin webissauml ole suotavaa puut-teellisen tavutuksen vuoksi Taumlssauml alla esitellaumlaumln kaikki asemointitavat esimerkin kera

ltp align=leftgt Vasen tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=centergt Keskitetty

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

25

ltp align=rightgt Oikea tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=justifygt Molemmat tasan

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

35 Kirjasimet eli fontitHTML mahdollistaa fonttien eli kirjasimien maumlaumlrittaumlmisen HTMLn avulla voidaan saumlaumltaumlauml kirjasimien kokoa vaumlriauml ja kirjasinperhettauml Kirjasimia ei ole pakko maumlaumlritellauml Jos ne jaumltetaumlaumln maumlaumlrittelemaumlttauml naumlyttaumlauml selain kirjasimet oletusarvonsa mukaisesti

351 Font size eli fontin kokoFontin koko maumlaumlritellaumlaumln tagilla ltfont size=xgt Fonttien koko ilmoitetaan asteikolla 17 tai suhteellisina arvoina esim size=+1 Peruskoko on 3 Taumlssauml esimerkkejauml

ltpgtltfont size=1gtkirjasinltfontgtltpgtltpgtltfont size=2gtkirjasinltfontgtltpgtltpgtltfont size=3gtkirjasinltfontgtltpgtltpgtltfont size=4gtkirjasinltfontgtltpgtltpgtltfont size=5gtkirjasinltfontgtltpgtltpgtltfont size=6gtkirjasinltfontgtltpgtltpgtltfont size=7gtkirjasinltfontgtltpgt

26

352 Font color eli fontin vaumlriVaumlri ilmoitetaan joko RGB-arvona tai nimenauml Taumlssauml pari esimerkkiauml

ltpgtltfont color=redgtpunainenltfontgtltpgtltpgtltfont color=greengtvihreaumlltfontgtltpgtltpgtltfont color=bluegtsininenltfontgtltpgtltpgtltfont color=ff0000gtpunainenltfontgtltpgtltpgtltfont color=00ff00gtvihreaumlltfontgtltpgtltpgtltfont color=0000ffgtsininenltfontgtltpgt

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

25

ltp align=rightgt Oikea tasaus

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten

ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

ltp align=justifygt Molemmat tasan

Olen jalkapalloileva kasvatustieteilijauml jonka tyoumlpaikkana on Otavan Opisto Jalkapalloa pe-laan Maumlntyharjun Jaumlntevaumlssauml Suuria saavutuksia en ole jalkapalloilijan uralla kokenut kuten ei Jaumlntevaumlkaumlaumln mutta hauskaa on ollut joka kerta kun olen laittanut pelikengaumlt jalkaani

35 Kirjasimet eli fontitHTML mahdollistaa fonttien eli kirjasimien maumlaumlrittaumlmisen HTMLn avulla voidaan saumlaumltaumlauml kirjasimien kokoa vaumlriauml ja kirjasinperhettauml Kirjasimia ei ole pakko maumlaumlritellauml Jos ne jaumltetaumlaumln maumlaumlrittelemaumlttauml naumlyttaumlauml selain kirjasimet oletusarvonsa mukaisesti

351 Font size eli fontin kokoFontin koko maumlaumlritellaumlaumln tagilla ltfont size=xgt Fonttien koko ilmoitetaan asteikolla 17 tai suhteellisina arvoina esim size=+1 Peruskoko on 3 Taumlssauml esimerkkejauml

ltpgtltfont size=1gtkirjasinltfontgtltpgtltpgtltfont size=2gtkirjasinltfontgtltpgtltpgtltfont size=3gtkirjasinltfontgtltpgtltpgtltfont size=4gtkirjasinltfontgtltpgtltpgtltfont size=5gtkirjasinltfontgtltpgtltpgtltfont size=6gtkirjasinltfontgtltpgtltpgtltfont size=7gtkirjasinltfontgtltpgt

26

352 Font color eli fontin vaumlriVaumlri ilmoitetaan joko RGB-arvona tai nimenauml Taumlssauml pari esimerkkiauml

ltpgtltfont color=redgtpunainenltfontgtltpgtltpgtltfont color=greengtvihreaumlltfontgtltpgtltpgtltfont color=bluegtsininenltfontgtltpgtltpgtltfont color=ff0000gtpunainenltfontgtltpgtltpgtltfont color=00ff00gtvihreaumlltfontgtltpgtltpgtltfont color=0000ffgtsininenltfontgtltpgt

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

26

352 Font color eli fontin vaumlriVaumlri ilmoitetaan joko RGB-arvona tai nimenauml Taumlssauml pari esimerkkiauml

ltpgtltfont color=redgtpunainenltfontgtltpgtltpgtltfont color=greengtvihreaumlltfontgtltpgtltpgtltfont color=bluegtsininenltfontgtltpgtltpgtltfont color=ff0000gtpunainenltfontgtltpgtltpgtltfont color=00ff00gtvihreaumlltfontgtltpgtltpgtltfont color=0000ffgtsininenltfontgtltpgt

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

27

353 Font Face eli kirjasintyyppiKirjasintyyppi maumlaumlritellaumlaumln face-attribuutin avulla Taumlssauml esimerkkejauml

ltpgtltfont face=ArialgtJari Sarja Arialltfontgtltpgtltpgtltfont face=TimesgtJari Sarja Timesltfontgtltpgtltpgtltfont face=VerdanagtJari Sarja Verdanaltfontgtltpgtltpgtltfont face=BookmangtJari Sarja Bookmanltfontgtltpgt

HUOM Yleensauml webissauml kaumlytetaumlaumln paumlaumltteettoumlmiauml kirjasintyppejauml kuten asim Arial ja Ver-dana

354 Fonttimaumlaumlrittelyjen yhdistaumlminenKirjasimien maumlaumlrittelyjauml voidaan myoumls yhdistaumlauml kuten esimerkissauml taumlssauml alla

ltfont face=ArialHelveticasans-serif size=4 color=bluegtFonttien yhdistelmaumlaumlltfontgt

36 Nauhoite 3 ja tehtaumlvauml 3Nauhoite 3 Asemointi

kesto 0600

URL httpwwwviddlercomvbd3048e2

Tehtaumlvauml 3Mitauml seuraava tagi tekee ltp align=justifygtMiksi sitauml ei kannata kaumlyttaumlauml webissauml

28

4 LinkitLinkkien avulla teksti alkaa elaumlauml omaa elaumlmaumlaumlnsauml Dokumenttia jossa on linkki toiseen do-kumenttiin kutsutaan hypertekstiksi Vaikka www-sivut linkkisanoineen ovat monen ensi kosketus hypertekstiin myoumls monet perinteisistauml teksteistauml houkuttelevat kaumlyttaumljaumlaumlnsauml hyp-pimaumlaumln kohdasta ja kappaleesta toiseen - tai vielauml pitemmaumllle lukijan omaan alitajuntaan Hyperteksti antaa avoimesti lukijalleen luvan jaumllleenrakentaa tekstin mieleisekseen tulkintoja tehden assosiaatioita seuraten ja rakennetta muokaten

41 Kuinka linkki tehdaumlaumlnLinkki koostuu kahdesta osasta Ensimmaumlisen osan muodostaa sivun osoite lta href=osoitegt

Toisen osan muodostaa linkkiteksti jonka jaumllkeen linkki-tagi suljetaan ltagtlta href=httpwwwotavanopistofigtOtavan Opistoltagt

Yllauml oleva esimerkki naumlkyy sivulla kuten taumlssauml alla

Otavan Opisto

Tagin muistaminen voi olla hankalaa mutta muistamista voi helpottaa jos tietaumlauml tagin taus-tan Sen ensimmaumlinen osa eli a on lyhenne sanasta anchor joka on suomeksi ankkuri Toinen osa eli href maumlaumlrittelee hyperlinkin Se on lyhenne sanoista hyperlink reference Suomen-nettuna hyperlink reference on kutakuinkin sama kuin ldquohyperlinkin viittausrdquo

Linkin osoitteen voi kirjoittaa kahdella tavalla On olemassa suhteellinen ja absoluuttinen ta-pa linkittaumlauml Absoluuttisessa tavassa linkin osoite kirjoitetaan kokonaisena osoitteena Suh-teellisessa tavassa otetaan laumlhtoumlkohdaksi kansio jossa dokumentti linkkeineen sijaitsee ja viitataan yloumls- tai alaspaumlin hakemistorakenteessa Taumlmauml tapa on yleisesti kaumlytoumlssauml oman si-vuston hakemiston sisaumllle linkitettaumlessauml

Esimerkki selventaumlnee asiaa Kyseessauml on Monilajisen liikuntakerhon etusivu indexphp Sieltauml sivulta pitaumlisi saada linkki sivulle indexhtm joka sijaitsee kansiossa ohjaajat FTP-ohjelman kautta tarkasteltuna kansiorakenne naumlyttaumlauml taumlllaiselta

29

Mikaumlli linkki kirjoitetaan absoluuttisesti on kirjoitettava koko osoite

lta href=httpwwwmonilajinetohjaajatindexhtmgtOhjaajatltagt

Mikaumlli linkki kirjoitetaan suhteellisesti on paumlaumlstaumlvauml kansion sisaumlaumln viittaamalla suoraan kan-sion nimeen (ohjaajat)

lta href=ohjaajatindexhtmgtOhjaajatltagt

Mikaumlli halutaan tehdauml linkki toiseen suuntaan on hakemistorakennetta kivuttava yloumlspaumlin Seuraavaksi tehdaumlaumln linkki ohjaajat-kansiosta paumlaumlsivulle Siihen tarvitaan merkkejauml joil-la paumlaumlstaumlaumln yksi taso yloumlspaumlin hakemistorakenteessa Kaksi tasoa yloumlspaumlin paumlaumlstaumlaumln kirjoitta-malla

lta href=indexphpgtEtusivultagt

42 Viittaus dokumentin sisaumllleVarsinkin pitkissauml dokumenteissa voi esiintyauml tarvetta linkittaumlauml tiettyyn kohtaan dokumenttia Silloin kaumlytetaumlaumln apuna ankkureita Ankkuri maumlaumlritellaumlaumln seuraavastilta name=ankkurin_nimigtViitesanaltagt

Siihen voidaan viitata seuraavastilta href=tiedostohtmlankkurin_nimigtViittausltagt

Pitkissauml dokumenteissa on yleensauml kohteliasta laittaa alkuun sisaumlllysluettelo jolloin turha si-vujen rullaaminen yloumls ja alas voidaan vaumllttaumlauml Myoumls aakkosellinen hakemisto on mahdolli-nen ankkureilla toteutettuna Taumlssauml vielauml yksi esimerkki jossa sivun ylaumlreunassa on linkki joka viittaa sivun alareunaan Linkissauml oleva merkki tarkoittaa samaa dokumenttia eli sivul-ta on linkki samalle sivulle

30

ltBODYgtlta href=ekagtEka linkkiltagt

ltH2gtEksosomaattinen oppiminenltH2gt

ltPgtFyysisten ja kielellisten vaumllineitten avulla ihminen voi ylittaumlauml itsensauml Vuorovaikutuk-semme kyseisten vaumllineiden kanssa on keskeistauml oppimisen kannalta Yhdessauml naumlmauml erilaiset vaumllineet muodostavat osan kulttuurisista voimavaroistamme Jo pikainen silmaumlys omaan asuntoomme osoittaa kuinka taumlrkeaumlksi erilaiset fyysiset vaumllineet ovat tulleet erilaisten toimin-tojen yllaumlpidossa ja erilaisten ongelmien ratkaisuissa Elaumlmme autojen puhelinten CD-soittimien mikroaaltouunien televisioiden kahvinkeittimien ja tietokoneiden maailmassa (Saumlljouml 2001 72) Naumlmauml kaikki em vaumllineet sijaitsevat oman kehomme ulkopuolella ne ovat siis eksosomaattisialtPgt

ltPgtOppimisen suhteen onkin kysyttaumlvauml ettauml onko tekniikka ihmisen sisauml- vai ulkopuolella Toinen yhtauml keskeinen kysymys on ettauml onko oppiminen aina samanlaista Tekniikan kehit-tyessauml meidaumln kommunikointimme on muuttunut samalla tavalla myoumls oppiminen on muun-tunut Oppiminen eilen ja taumlnaumlaumln eivaumlt siis ole taumlysin samanlaisia tapahtumia Onkin hyvauml luoda katsaus taaksepaumlin ja tarkastella sitauml kuinka ihmiset ennen kommunikoivat ja oppivat Yksi olennainen ero eilispaumlivaumln ja nykypaumlivaumln vaumllillauml on siinauml ettauml aina ei ole ollut instituu-tiota nimeltauml koulu Kuitenkin myoumls ennen ihmiset kommunikoivat ja oppivatltPgt

ltPgtIhminen on monessa suhteessa heikko ja rajoittunut olento Haumln ei ole erityisen voima-kas nopea eikauml kestaumlvauml verrattuna muihin lajeihin Lisaumlksi ihmisen muisti on rajallinen Yksi psykologian historian merkittaumlvimmistauml tutkimuksista on Millerin tutkimus vuodelta 1956 jonka mukaan me kykenemme kaumlsittelemaumlaumln vain rajallisen maumlaumlraumln tietoa Tyoumlmuistimme kapasiteetti on vain 7 +-2 mikauml on pieni maumlaumlrauml olennolle joka sentaumlaumln rakentaa tietoyhteis-kuntaa Muistimme rajallisuus ilmenee myoumls silloin kun yritaumlmme muistella mitauml meidaumln tulisi tehdauml seuraavalla viikolla Olemme myoumls heikolla kun joudumme paumlaumlssauml laskemaan kertolaskuja kolminumeroisilla luvuilla (Saumlljouml 1999 3)ltPgt

ltH3gtlta name=ekagtArtefaktit ja mediointiltagtltH3gt

43 Target eli minne hyperlinkki avataanLinkki voidaan avata selainnaumlkymaumln paumlaumllle tai uuteen ikkunaan Yleensauml www-sivut rakenne-taan siten ettauml sivuston linkit avautuvat aina kulloisenkin selainnaumlkymaumln paumlaumllle Jos sivuilta on hyperlinkkejauml sivuston ulkopuolelle avautuvat ne uusiin selainikkunoihin Valintoja on periaatteessa vain kaksi

target=_blank (aukeaa uuteen ikkunaan)

lta href=httpwwwotavanopistofirdquo target=rdquo_blankrdquogtOtavan Opistoltagt

target=_top (aukeaa samaan selainnaumlkymaumlaumln)

lta href=httpwwwotavanopistofirdquo target=rdquo_toprdquogtOtavan Opistoltagt

Jos jaumlttaumlauml maumlaumlrittelemaumlttauml targetin uusi sivu avautuu entisen paumlaumllle

31

44 Nauhoite 4 ja tehtaumlvauml 4Nauhoite 4 Linkitys

Kesto 1532

URL httpwwwviddlercomvadfdf8f

Tehtaumlvauml 4

Tee www-sivu jossa on linkit seuraaville sivuille Sonera DNA Elisa Tee kaikki linkit sel-laisiksi ettauml ne avautuvat uuteen ikkunaan

32

5 ListatListat ovat tehokkaita kun halutaan esittaumlauml tietoa tiiviissauml muodossa Kyseessauml on ikaumlaumln kuin webin ranskalaiset viivat Listat sopivat erittaumlin hyvin luettelonomaisen tiedon esittaumlmiseen Webissauml listat lisaumlaumlvaumlt yleensauml sivujen luettavuutta

51 UL - jaumlrjestaumlmaumltoumln listaUL-tagilla saa aikaan jaumlrjestaumlmaumlttoumlmaumln listan jossa LI-tagin maumlaumlritetyt kohdat erotetaan toi-sistaan UL on lyhenne englannin kielen sanoista unordered list LI on puolestaan lyhenne sanoista list item eli listaelementit

ltulgtltligtAudiltligtltligtVolkswagenltligtltligtVolvoltligtltligtNissanltligtltligtPeugeotltligtltligtOpelltligtltulgt

Listan tyyliin voi vaikuttaa attribuutilla type Katso kuinka pallukasta saadaan esimerkiksi neliouml

ltulgtltli type=discgtAudiltligtltli type=circlegtVolkswagenltligtltli type=squaregtVolvoltligtltli type=discgtNissanltligtltli type=discgtPeugeotltligtltli type=discgtOpelltligtltulgt

33

52 OL - jaumlrjestetty listaJaumlrjestetty lista saadaan aikaan tagilla ltOLgt OL on lyhenne sanoista ordered list Taumlssauml ta-pauksessa pallukan tilalle tulee jaumlrjestysnumero

ltolgtltligtAudiltligtltligtVolkswagenltligtltligtVolvoltligtltligtNissanltligtltligtPeugeotltligtltligtOpelltligtltolgt

Tyyliauml voi vaihtaa attribuutilla type Start puolestaan kertoo mistauml numerosta tai kirjaimesta aloitetaan Alla olevassa esimerkissauml laitetaan numeroiden tilalle aakkoset ja lista aloitetaan kirjaimesta c

ltol type=a start=3gtltligtAudiltligtltligtVolkswagenltligtltligtVolvoltligtltligtNissanltligtltligtPeugeotltligtltligtOpelltligt

34

ltolgt

53 DL - maumlaumlritelmaumlluettelo DL-tagi (engl definition list) maumlaumlrittaumlauml maumlaumlritelmaumlluettelon jossa DT-tagilla ilmaistaan maumlauml-riteltaumlvauml termi ja DD-tagilla maumlaumlritelmauml

ltdlgtltdtgthuumoriltddgtlaumlmmin sukkela leikkisyysltdtgtidealtddgtajatuksen pienin yksikkoumlltdtgtpotenssiltddgtsukupuolinen kykenevyysltdlgt

Selaimen kautta tarkasteltuna lopputulos on kuten alla olevassa kuvassa

35

54 Nauhoite 5 ja tehtaumlvauml 5Nauhoite 5 Listat

kesto 0515

URL httpwwwviddlercomvdee59f8

Tehtaumlvauml 5

Tee HTML-sivu jossa seuraavat webselaimet on listattu listaelementin avulla Chrome Fire-fox IE Safari ja Opera

33

52 OL - jaumlrjestetty listaJaumlrjestetty lista saadaan aikaan tagilla ltOLgt OL on lyhenne sanoista ordered list Taumlssauml ta-pauksessa pallukan tilalle tulee jaumlrjestysnumero

ltolgtltligtAudiltligtltligtVolkswagenltligtltligtVolvoltligtltligtNissanltligtltligtPeugeotltligtltligtOpelltligtltolgt

Tyyliauml voi vaihtaa attribuutilla type Start puolestaan kertoo mistauml numerosta tai kirjaimesta aloitetaan Alla olevassa esimerkissauml laitetaan numeroiden tilalle aakkoset ja lista aloitetaan kirjaimesta c

ltol type=a start=3gtltligtAudiltligtltligtVolkswagenltligtltligtVolvoltligtltligtNissanltligtltligtPeugeotltligtltligtOpelltligt

34

ltolgt

53 DL - maumlaumlritelmaumlluettelo DL-tagi (engl definition list) maumlaumlrittaumlauml maumlaumlritelmaumlluettelon jossa DT-tagilla ilmaistaan maumlauml-riteltaumlvauml termi ja DD-tagilla maumlaumlritelmauml

ltdlgtltdtgthuumoriltddgtlaumlmmin sukkela leikkisyysltdtgtidealtddgtajatuksen pienin yksikkoumlltdtgtpotenssiltddgtsukupuolinen kykenevyysltdlgt

Selaimen kautta tarkasteltuna lopputulos on kuten alla olevassa kuvassa

35

54 Nauhoite 5 ja tehtaumlvauml 5Nauhoite 5 Listat

kesto 0515

URL httpwwwviddlercomvdee59f8

Tehtaumlvauml 5

Tee HTML-sivu jossa seuraavat webselaimet on listattu listaelementin avulla Chrome Fire-fox IE Safari ja Opera

34

ltolgt

53 DL - maumlaumlritelmaumlluettelo DL-tagi (engl definition list) maumlaumlrittaumlauml maumlaumlritelmaumlluettelon jossa DT-tagilla ilmaistaan maumlauml-riteltaumlvauml termi ja DD-tagilla maumlaumlritelmauml

ltdlgtltdtgthuumoriltddgtlaumlmmin sukkela leikkisyysltdtgtidealtddgtajatuksen pienin yksikkoumlltdtgtpotenssiltddgtsukupuolinen kykenevyysltdlgt

Selaimen kautta tarkasteltuna lopputulos on kuten alla olevassa kuvassa

35

54 Nauhoite 5 ja tehtaumlvauml 5Nauhoite 5 Listat

kesto 0515

URL httpwwwviddlercomvdee59f8

Tehtaumlvauml 5

Tee HTML-sivu jossa seuraavat webselaimet on listattu listaelementin avulla Chrome Fire-fox IE Safari ja Opera

35

54 Nauhoite 5 ja tehtaumlvauml 5Nauhoite 5 Listat

kesto 0515

URL httpwwwviddlercomvdee59f8

Tehtaumlvauml 5

Tee HTML-sivu jossa seuraavat webselaimet on listattu listaelementin avulla Chrome Fire-fox IE Safari ja Opera

36

6 KuvatKuvan lisaumlaumlminen tekstin joukkoon kaumly IMG-tagilla joka on lyhenne englannin kielen sanas-ta image (suomeksi kuva) SRC-attribuutti joka on lyhenne sanasta source kertoo kuvan si-jainnin Sijainti voi olla joko absoluuttinen tai relatiivinen Olisi hyvauml jos IMG-tagi sisaumlltaumlisi SRC-attribuutin lisaumlksi vaumlhintaumlaumlnkin ALT-attribuutin ALTlla maumlaumlritellaumlaumln teksti joka naumlyte-taumlaumln jos kuvaa ei pystytauml naumlyttaumlmaumlaumln Tekstin pitaumlisi kuvata mahdollisimman hyvin kuvan sisaumlltouml Suositeltavaa on myoumls kuvan koon maumlaumlritteleminen

ltimg src=kilpailu2jpg width=180 height=200 alt=Volvogt

Height ja width -attribuutit kertovat kuvan korkeuden ja leveyden Taumlmauml tieto on taumlrkeaumlauml graafisille selaimille jotta ne osaavat varata kuville oikean kokoisen tilan ennen kuin kuva on haettu palvelimelta ALT-attribuuttia tarvitaan jotta sivuista tulisi esteettoumlmaumlt eli kyse on sii-tauml ettauml kaikki voivat selailla sivuja

Taumlssauml kuva laitetaan tekstin oikealle puolelle komennolla align=rdquorightrdquo

ltimg src=kybokasijpg alt=Kyborgin kaumlsi align=rightgt

Taumlssauml kuva laitetaan tekstin vasemmalle puolelle komennolla align=rdquoleftrdquo

ltimg src=kybokasijpg alt=Kyborgin kaumlsi align=leftgt

37

Kuvan asemoinnin suhteen ovat kaumlytoumlssauml myoumls vaihtoehdot bottom top ja absmiddle Jos valitaan bottom alkaa teksti kuvan alareunan tasalta Jos valitaan top alkaa teksti kuvan ylauml-reunasta Valinta absmiddle keskittaumlauml tekstin suhteessa kuvaan

38

Align-attribuutilla vaikutetaan kuvan sijoittumiseen tekstin suhteen Border-attribuutti maumlaumlrit-taumlauml kuvan ympaumlrillauml olevan kehyksen koon Linkkinauml toimivan kuvan ympaumlrille lisaumltaumlaumln ole-tuksena kehys Sillauml tavoin kaumlyttaumljaumllle tehdaumlaumln selvaumlksi ettauml kuva toimii linkkinauml

Huom Osa uusimmista selaimista kuten Firefox jaumlttaumlauml piirtaumlmaumlttauml tuon sinisen kehyksen Helpoimmin hoidat kuitenkin ongelman maumlaumlrittelemaumlllauml ettauml kehys on nolla pikseliauml

lta href=httpwwwjarisarjafigtltimg src=kybokasijpg align=right border=0gtltagt

Hspace ja vspace-attribuuteilla maumlaumlritetaumlaumln kuvan ympaumlrille jaumltettaumlvauml tila VSPACE kertoo ylauml- ja alapuolelle HSPACE oikealle ja vasemmalle puolelle jaumltettaumlvaumln tilan

lta href=httpwwwjarisarjafigtltimg src=kybokasijpg align=right hspace=5 vspace=5gtltagt

37

Kuvan asemoinnin suhteen ovat kaumlytoumlssauml myoumls vaihtoehdot bottom top ja absmiddle Jos valitaan bottom alkaa teksti kuvan alareunan tasalta Jos valitaan top alkaa teksti kuvan ylauml-reunasta Valinta absmiddle keskittaumlauml tekstin suhteessa kuvaan

38

Align-attribuutilla vaikutetaan kuvan sijoittumiseen tekstin suhteen Border-attribuutti maumlaumlrit-taumlauml kuvan ympaumlrillauml olevan kehyksen koon Linkkinauml toimivan kuvan ympaumlrille lisaumltaumlaumln ole-tuksena kehys Sillauml tavoin kaumlyttaumljaumllle tehdaumlaumln selvaumlksi ettauml kuva toimii linkkinauml

Huom Osa uusimmista selaimista kuten Firefox jaumlttaumlauml piirtaumlmaumlttauml tuon sinisen kehyksen Helpoimmin hoidat kuitenkin ongelman maumlaumlrittelemaumlllauml ettauml kehys on nolla pikseliauml

lta href=httpwwwjarisarjafigtltimg src=kybokasijpg align=right border=0gtltagt

Hspace ja vspace-attribuuteilla maumlaumlritetaumlaumln kuvan ympaumlrille jaumltettaumlvauml tila VSPACE kertoo ylauml- ja alapuolelle HSPACE oikealle ja vasemmalle puolelle jaumltettaumlvaumln tilan

lta href=httpwwwjarisarjafigtltimg src=kybokasijpg align=right hspace=5 vspace=5gtltagt

38

Align-attribuutilla vaikutetaan kuvan sijoittumiseen tekstin suhteen Border-attribuutti maumlaumlrit-taumlauml kuvan ympaumlrillauml olevan kehyksen koon Linkkinauml toimivan kuvan ympaumlrille lisaumltaumlaumln ole-tuksena kehys Sillauml tavoin kaumlyttaumljaumllle tehdaumlaumln selvaumlksi ettauml kuva toimii linkkinauml

Huom Osa uusimmista selaimista kuten Firefox jaumlttaumlauml piirtaumlmaumlttauml tuon sinisen kehyksen Helpoimmin hoidat kuitenkin ongelman maumlaumlrittelemaumlllauml ettauml kehys on nolla pikseliauml

lta href=httpwwwjarisarjafigtltimg src=kybokasijpg align=right border=0gtltagt

Hspace ja vspace-attribuuteilla maumlaumlritetaumlaumln kuvan ympaumlrille jaumltettaumlvauml tila VSPACE kertoo ylauml- ja alapuolelle HSPACE oikealle ja vasemmalle puolelle jaumltettaumlvaumln tilan

lta href=httpwwwjarisarjafigtltimg src=kybokasijpg align=right hspace=5 vspace=5gtltagt

39

61 KompastuskiviaumlKun kuvasta tehdaumlaumln linkki kuvan ympaumlrille tulee sininen kehys Ongelman voi ratkaista ta-valla joka kerrottiin jo edellauml eli merkitsemaumlllauml ettauml on border=0 Kuvaan lisaumltty linkki voisi olla esimerkiksi taumlllainen

lta href=httpsarjainternetixfi target=_blankgtltimg src=jarijpg border=0 alt=rdquoJarirdquogtltagt

Toinen kompastuskivi liittyy hakemistorakenteeseen Voi kaumlydauml niin ettauml kun sivut siirretaumlaumln nettiin huomataan ettauml kaverin koneella kuvat eivaumlt naumly vaikka omalla koneella ne naumlkyvaumlt ihan normaalisti Taumlllaisessa tapauksessa on yleensauml kaumlytetty editoria joka on rakentanut po-lun oman koneen hakemistoon Virheen huomaa siitauml ettauml viittaus on omalle koneelle eli se alkaa ldquofilerdquo

ltimg src=fileC|Annesokkakuvatlaitumellajpggt

Kolmas kompastuskivi liittyy myoumls hakemistorakenteeseen ja tilanteeseen jossa kuva ei naumly sivulla Jos esimerkiksi kissajpg on samassa kohtaa hakemistorakennetta (samassa kansiossa) kuin sivu linkitys tehdaumlaumln naumlin

ltimg src=kissajpggt

40

Jos kuva onkin saman kansion kuvat-alakansiossa linkitys tehdaumlaumln naumlin

ltimg src=kuvatkissajpggt

Jos kuva puolestaan on hakemistorakenteessa yhden portaan verran ylempaumlnauml kuvat-kansiossa niin linkitys tehdaumlaumln naumlin

ltimg src=kuvatkissajpggt

62 Interaktiivinen kuvaAktiivinen kuva tai kosketusherkkauml kuva (image map) on websivuun liitetty kuva johon on upotettu alueita jotka toimivat linkkeinauml Naumlitauml alueita sanotaan joskus ldquokuumiksi alueiksirdquo ldquohot spotsrdquo Interaktiivisen kuvan avulla saadaan aikaan naumlyttaumlviauml ja havainnollisia kokonai-suuksia Taumlssauml alla yksi esimerkki Kun kuvassa naumlkyvaumlauml hiirtauml napsautetaan avautuu ikkuna joka sisaumlltaumlauml viestin ldquoEt vie mun rottaardquo Taumlllaista kuvakarttaa voi hyoumldyntaumlauml esimerkiksi jou-lukalenterin luukkuja tehdessauml Silloin kuvassa olisi 24 luukkua joita voisi napsauttaa

Interaktiivista kuvaa tehdessauml on tehtaumlvauml aina tietyt perusasiat

1 Luodaan kuva josta halutaan tehdauml interaktiivinen 2 Luodaan html-tiedosto johon kuva sijoitetaan 3 Maumlaumlritellaumlaumln kuvaan alueet joista tehdaumlaumln linkkejauml 4 Maumlaumlritellaumlaumln kohteet johon alueet viittaavat 5 Nimetaumlaumln koodipaumltkauml joka viittaa tiettyyn kuvaan

41

Kaumlytaumlnnoumlssauml interaktiivisen kuvan voi luoda helpoiten jollakin siihen tarkoitukseen tehdyllauml ohjelmalla

Image Mapper (Windows) Xmap (Windows) Free Imagemapper (Windows) Image Mapper 30 (Mac) Map Spinner (Mac) kimagemapeditor (Ubuntu KDE)

Ohjelmasta saat valmiin koodin sijoitettavaksi sivulle Koodi sisaumlltaumlauml seuraavat osatekijaumlt kuvan liittaumlminen sivulle (img src -tagi) usemap (imagemapin eli interaktiivisen kuvan nimi) map name (viittaus interaktiiviseen kuvaan) area (muoto ja koordinaatit)

Taumlltauml naumlyttaumlauml esim eraumlaumln joulukalenterin interaktiivinen kuva jossa klikataan luukkuja

ltimg src=kalenterijpg usemap=kalenteri border=0gtltmap name=kalenterigtltarea shape=rect coords=265540213499 href=1php target=_BLANKgtltarea shape=rect coords=6954022504 href=2php target=_BLANKgtltarea shape=rect coords=8125826220 href=3php target=_BLANKgtltarea shape=rect coords=161231113192 href=4php target=_BLANKgtltarea shape=rect coords=6031511274 href=5php target=_BLANKgtltarea shape=rect coords=712248660211 href=6php target=_BLANKgtltarea shape=rect coords=651299597261 href=7php target=_BLANKgtltarea shape=rect coords=723302670264 href=8php target=_BLANKgtltarea shape=rect coords=206288157253 href=9php target=_BLANKgtltarea shape=rect coords=289316242283 href=10php target=_BLANKgtltarea shape=rect coords=14433294293 href=11php target=_BLANKgtltarea shape=rect coords=164535110493 href=12php target=_BLANKgtltarea shape=rect coords=431255378215 href=13php target=_BLANKgtltarea shape=rect coords=454325396285 href=14php target=_BLANKgtltarea shape=rect coords=670362619323 href=15php target=_BLANKgtltarea shape=rect coords=633421581382 href=16php target=_BLANKgtltarea shape=rect coords=334522278484 href=17php target=_BLANKgtltarea shape=rect coords=421528365491 href=18php target=_BLANKgtltarea shape=rect coords=534433470394 href=19php target=_BLANKgtltarea shape=rect coords=435472383436 href=20php target=_BLANKgtltarea shape=rect coords=728507670465 href=21php target=_BLANKgtltarea shape=rect coords=753447698410 href=22php target=_BLANKgtltarea shape=rect coords=305373261341 href=23php target=_BLANKgtltarea shape=rect coords=537379463328 href=24php target=_BLANKgtltmapgt

41

Kaumlytaumlnnoumlssauml interaktiivisen kuvan voi luoda helpoiten jollakin siihen tarkoitukseen tehdyllauml ohjelmalla

Image Mapper (Windows) Xmap (Windows) Free Imagemapper (Windows) Image Mapper 30 (Mac) Map Spinner (Mac) kimagemapeditor (Ubuntu KDE)

Ohjelmasta saat valmiin koodin sijoitettavaksi sivulle Koodi sisaumlltaumlauml seuraavat osatekijaumlt kuvan liittaumlminen sivulle (img src -tagi) usemap (imagemapin eli interaktiivisen kuvan nimi) map name (viittaus interaktiiviseen kuvaan) area (muoto ja koordinaatit)

Taumlltauml naumlyttaumlauml esim eraumlaumln joulukalenterin interaktiivinen kuva jossa klikataan luukkuja

ltimg src=kalenterijpg usemap=kalenteri border=0gtltmap name=kalenterigtltarea shape=rect coords=265540213499 href=1php target=_BLANKgtltarea shape=rect coords=6954022504 href=2php target=_BLANKgtltarea shape=rect coords=8125826220 href=3php target=_BLANKgtltarea shape=rect coords=161231113192 href=4php target=_BLANKgtltarea shape=rect coords=6031511274 href=5php target=_BLANKgtltarea shape=rect coords=712248660211 href=6php target=_BLANKgtltarea shape=rect coords=651299597261 href=7php target=_BLANKgtltarea shape=rect coords=723302670264 href=8php target=_BLANKgtltarea shape=rect coords=206288157253 href=9php target=_BLANKgtltarea shape=rect coords=289316242283 href=10php target=_BLANKgtltarea shape=rect coords=14433294293 href=11php target=_BLANKgtltarea shape=rect coords=164535110493 href=12php target=_BLANKgtltarea shape=rect coords=431255378215 href=13php target=_BLANKgtltarea shape=rect coords=454325396285 href=14php target=_BLANKgtltarea shape=rect coords=670362619323 href=15php target=_BLANKgtltarea shape=rect coords=633421581382 href=16php target=_BLANKgtltarea shape=rect coords=334522278484 href=17php target=_BLANKgtltarea shape=rect coords=421528365491 href=18php target=_BLANKgtltarea shape=rect coords=534433470394 href=19php target=_BLANKgtltarea shape=rect coords=435472383436 href=20php target=_BLANKgtltarea shape=rect coords=728507670465 href=21php target=_BLANKgtltarea shape=rect coords=753447698410 href=22php target=_BLANKgtltarea shape=rect coords=305373261341 href=23php target=_BLANKgtltarea shape=rect coords=537379463328 href=24php target=_BLANKgtltmapgt

42

63 Nauhoite 6 ja tehtaumlvauml 6

Nauhoite 6 Interaktiiviset kuvat

kesto 0556

URL httpwwwviddlercomv4bcf7764

Tehtaumlvauml 6

Kirjoita koodi joka tekee seuraavaa sijoita etsivulle (etusivuhtm) kuva jarijpg joka on kansiossa jaritee kuvasta linkki ilman kehystauml sivulle httpwwwotavanopistofi

Lataa ja pura zip-paketti jossa tiedostot sijaitsevat Muokkaa tiedostoa etusivuhtm jotta ku-va naumlkyisi ja linkki toimisi Tallenna lopuksi muokkaamasi koodi (etusivuhtm)

Hakemistorakenne naumlkyy alla

43

7 Viivat ja rivinvaihtoHTML-koodilla voidaan piirtaumlauml vaakasuoria viivoja Varsinkin webin alkuaikoina viivat oli-vat taumlrkeitauml koska niiden avulla voitiin sommitella sisaumlltoumlauml Nykyaumlaumln viivoja naumlkee eniten vieraskirjoissaKoodina viivan tekeminen on yksinkertainen koska siihen riittaumlauml pelkkauml tagi lthrgt Tagi on lyhenne englannin kielen sanoista horizontal rule

Viivalle voidaan antaa lisaumlmaumlaumlreitauml jotka naumlkyvaumlt seuraavassa taulukossa

attribuutti (lisaumlmaumlaumlre) toiminto

noshade ei kolmiulotteisuutta

size viivan korkeus

width viivan pituus

align kuinka viiva asemoituu (oikea vasen)

color viivan vaumlri

Lopuksi esimerkki erilaisista viivoistaViiva 1lthr noshade size=10gtViiva 2lthr size=8gtViiva 3lthr color=00FF00gtViiva 4lthr height=10 width=23 align=centergtViiva 5lthr noshadegt

Lopputulos kutakuinkin naumlin (selaimen ikkunaa on kavennettu)

44

Joskus sivuille tarvitaan pelkaumlstaumlaumln rivinvaihto ilman viivaa Se hoituu tagilla ltbrgt joka on lyhenne englannin kielisestauml sanasta break

71 Tehtaumlvauml 7Tehtaumlvauml 7

Tee HTML-sivu joka on samannaumlkoumlinen kuin alla olevassa kuvassa

45

8 LomakkeetLomakkeet antavat kaumlyttaumljaumllle mahdollisuuden laumlhettaumlauml tietoa www-palvelimelle Lomake vaatii toimiakseen ohjelman joka kaumlsittelee lomakkeella vaumllitetyn tiedon Lomakkeen tietoja voi laumlhettaumlauml myoumls suoraan saumlhkoumlpostiin komennolla mailto mutta se tapa ei ole suositeltava koska

saumlhkoumlpostiosoite lukee koodissa eli roskapostia on tiedossa lomakkeen voi laumlhettaumlauml vain koneelta johon on asennettu saumlhkoumlpostiohjelma ja saumlh-

koumlpostitili lomakkeen tiedot tulevat saumlhkoumlpostiisi huonosti muotoiltuina

Paremmista menetelmistauml sen verran ettauml lomake kannattaa tehdauml joko PHPllauml tai laumlhettaumlauml se cgin hoidettavaksi Usein webhotelli tarjoaa valmista ratkaisua kyseiseen ongelmaan

81 FORM - LomakeHTML-lomake luodaan FORM-tagien sisaumlaumln ACTION kertoo lomakkeen kaumlsittelevaumln oh-jelman osoitteen METHOD maumlaumlraumlauml tavan jolla tieto laumlhetetaumlaumln

ltform action=vastaanotaphp method=postgtltpgtltbgtTaumlytauml lomakeltbgtltbrgtNimi ltinput type=text name=nimigtltbrgtEmail ltinput type=text name=emailgtltbrgtltinput type=submit value=Laumlhetaumlgtltpgtltformgt

82 INPUT - Syoumlttoumlkenttauml nappi ymsINPUT-koodilla tehdaumlaumln lomakkeelle syoumlttoumlkenttiauml NAME-attribuutti nimeaumlauml kentaumln Selain laumlhettaumlauml kenttien nimet tietojen mukana jotta www-palvelimella toimiva ohjelma osaa tunnis-taa tiedot ALIGN vaikuttaa kenttien sijoittumiseen Muut parametrit riippuvat TYPE-parametrista

44

Joskus sivuille tarvitaan pelkaumlstaumlaumln rivinvaihto ilman viivaa Se hoituu tagilla ltbrgt joka on lyhenne englannin kielisestauml sanasta break

71 Tehtaumlvauml 7Tehtaumlvauml 7

Tee HTML-sivu joka on samannaumlkoumlinen kuin alla olevassa kuvassa

45

8 LomakkeetLomakkeet antavat kaumlyttaumljaumllle mahdollisuuden laumlhettaumlauml tietoa www-palvelimelle Lomake vaatii toimiakseen ohjelman joka kaumlsittelee lomakkeella vaumllitetyn tiedon Lomakkeen tietoja voi laumlhettaumlauml myoumls suoraan saumlhkoumlpostiin komennolla mailto mutta se tapa ei ole suositeltava koska

saumlhkoumlpostiosoite lukee koodissa eli roskapostia on tiedossa lomakkeen voi laumlhettaumlauml vain koneelta johon on asennettu saumlhkoumlpostiohjelma ja saumlh-

koumlpostitili lomakkeen tiedot tulevat saumlhkoumlpostiisi huonosti muotoiltuina

Paremmista menetelmistauml sen verran ettauml lomake kannattaa tehdauml joko PHPllauml tai laumlhettaumlauml se cgin hoidettavaksi Usein webhotelli tarjoaa valmista ratkaisua kyseiseen ongelmaan

81 FORM - LomakeHTML-lomake luodaan FORM-tagien sisaumlaumln ACTION kertoo lomakkeen kaumlsittelevaumln oh-jelman osoitteen METHOD maumlaumlraumlauml tavan jolla tieto laumlhetetaumlaumln

ltform action=vastaanotaphp method=postgtltpgtltbgtTaumlytauml lomakeltbgtltbrgtNimi ltinput type=text name=nimigtltbrgtEmail ltinput type=text name=emailgtltbrgtltinput type=submit value=Laumlhetaumlgtltpgtltformgt

82 INPUT - Syoumlttoumlkenttauml nappi ymsINPUT-koodilla tehdaumlaumln lomakkeelle syoumlttoumlkenttiauml NAME-attribuutti nimeaumlauml kentaumln Selain laumlhettaumlauml kenttien nimet tietojen mukana jotta www-palvelimella toimiva ohjelma osaa tunnis-taa tiedot ALIGN vaikuttaa kenttien sijoittumiseen Muut parametrit riippuvat TYPE-parametrista

45

8 LomakkeetLomakkeet antavat kaumlyttaumljaumllle mahdollisuuden laumlhettaumlauml tietoa www-palvelimelle Lomake vaatii toimiakseen ohjelman joka kaumlsittelee lomakkeella vaumllitetyn tiedon Lomakkeen tietoja voi laumlhettaumlauml myoumls suoraan saumlhkoumlpostiin komennolla mailto mutta se tapa ei ole suositeltava koska

saumlhkoumlpostiosoite lukee koodissa eli roskapostia on tiedossa lomakkeen voi laumlhettaumlauml vain koneelta johon on asennettu saumlhkoumlpostiohjelma ja saumlh-

koumlpostitili lomakkeen tiedot tulevat saumlhkoumlpostiisi huonosti muotoiltuina

Paremmista menetelmistauml sen verran ettauml lomake kannattaa tehdauml joko PHPllauml tai laumlhettaumlauml se cgin hoidettavaksi Usein webhotelli tarjoaa valmista ratkaisua kyseiseen ongelmaan

81 FORM - LomakeHTML-lomake luodaan FORM-tagien sisaumlaumln ACTION kertoo lomakkeen kaumlsittelevaumln oh-jelman osoitteen METHOD maumlaumlraumlauml tavan jolla tieto laumlhetetaumlaumln

ltform action=vastaanotaphp method=postgtltpgtltbgtTaumlytauml lomakeltbgtltbrgtNimi ltinput type=text name=nimigtltbrgtEmail ltinput type=text name=emailgtltbrgtltinput type=submit value=Laumlhetaumlgtltpgtltformgt

82 INPUT - Syoumlttoumlkenttauml nappi ymsINPUT-koodilla tehdaumlaumln lomakkeelle syoumlttoumlkenttiauml NAME-attribuutti nimeaumlauml kentaumln Selain laumlhettaumlauml kenttien nimet tietojen mukana jotta www-palvelimella toimiva ohjelma osaa tunnis-taa tiedot ALIGN vaikuttaa kenttien sijoittumiseen Muut parametrit riippuvat TYPE-parametrista

46

TYPE=text

Tekee tekstinsyoumlttoumlkentaumln (ks alla oleva kuva) Size maumlaumlrittaumlauml kentaumln pituuden eli sen kuin-ka iso laatikko piirtyy selaimeen Maxlength maumlaumlrittaumlauml kentaumln maksimipituuden

ltform action=vastaanotaphp method=postgtltpgtltbgtTaumlytauml lomakeltbgtltbrgtNimi ltinput type=text name=nimi size=30gtltbrgtNimi ltinput type=text name=email size=40gtltbrgtltinput type=submit value=Laumlhetaumlgtltpgtltformgt

TYPE=password

Tekee tekstinsyoumlttoumlkentaumln jossa syoumltetty teksti naumlkyy pallukoina tai taumlhtinauml riippuen se-laimesta

TYPE=checkbox

Tekee valintaruudun joka voi olla joko valittu tai ei CHECKED tekee ruudusta oletusvalin-nan eli ruudussa on valmiina ruksi

47

ltform action=vastaanotaphp method=postgtltpgtltbgtOstaltbgtltbrgtltinput type=checkbox name=maito value=Maitogt Maitoltbrgtltinput type=checkbox name=juusto value=Juusto checkedgt Juustoltbrgtltinput type=checkbox name=voi value=Voigt Voiltbrgtltinput type=submit value=Laumlhetaumlgtltpgtltformgt

TYPE=radio

Tekee valintanapin Napit ovat aina ryhmissauml ja vain yksi ryhmaumln napeista voi olla valittuna Samaan ryhmaumlaumln kuuluvilla napeilla pitaumlauml olla sama NAME-maumlaumlre ja eri VALUE-maumlaumlre Checked tarkoittaa oletusvalintaa Taumlssauml esimerkissauml on valmiiksi valittuina Juusto ja Viini

ltinput type=radio name=ryhma1 value=Maitogt Maitoltbrgtltinput type=radio name=ryhma1 value=Voi checkedgt Voiltbrgtltinput type=radio name=ryhma1 value=Juustogt Juustolthrgtltinput type=radio name=ryhma2 value=VesigtVesiltbrgtltinput type=radio name=ryhma2 value=OlutgtOlutltbrgtltinput type=radio name=ryhma2 value=Viini checkedgt Viiniltbrgt

48

TYPE=submit

Tekee painikkeen jota painamalla voi laumlhettaumlauml lomakkeen tiedot Lomakkeella voi olla useita laumlhetauml-painikkeita mutta niillauml tulee olla eri NAME-maumlaumlre

ltinput type=submit value=Laumlhetaumlgt

TYPE=reset

Tekee painikkeen jota painamalla voi tyhjentaumlauml lomakkeen

ltinput type=reset value=Tyhjennauml lomakegt

TYPE=hidden

Tekee piilotetun kentaumln Sitauml tarvitaan kun halutaan viedauml tietoa lomakkeenkaumlsittelyohjel-malle ilman ettauml tietoa naumlkyy selaimessa (naumlkyy tosin laumlhdekoodissa)

49

83 SELECT - ValintalistaSELECT-koodilla saa aikaiseksi valintalistan jossa on useita vaihtoehtoja joista kaumlyttaumljauml voi valita yhden tai useamman Valintalistan vaihtoehdot maumlaumlritellaumlaumln OPTION-koodein NAME maumlaumlrittaumlauml kentaumllle nimen SIZE kerralla naumlkyvien rivien lukumaumlaumlraumln ja MULTIPLE mahdol-listaa usean vaihtoehdon valitsemisen VALUE-attribuutilla maumlaumlraumltaumlaumln laumlhetettaumlvaumln vaihtoeh-don arvo

ltFORMgtltSELECT NAME=vaihtoehdotgtltOPTION VALUE=1gtVaihtoehto 1ltOPTION VALUE=2gtVaihtoehto 2ltOPTION VALUE=3gtVaihtoehto 3ltSELECTgtltFORMgt

84 TEXTAREA - TekstinsyoumlttoumlkenttaumlTekee tekstinsyoumlttoumlkentaumln jolle voi syoumlttaumlauml useita rivejauml tekstiauml NAME kertoo kentaumln nimen ROWS rivien lukumaumlaumlraumln ja COLS kentaumln leveyden Koodin sisaumllle kirjoitettu teksti naumlkyy tekstikentaumlssauml

ltTEXTAREA NAME=tekstii ROWS=10 COLS=50gt ltTEXTAREAgt

85 EsimerkkiAlla esimerkki valmiista palautelomakkeesta

50

Ja koodina sama esimerkki

ltform action=palautephp method=postgt

ltpgtltfont face=ArialgtltstronggtPalautteen aiheltstronggtltbrgt

ltselect name=palautetta size=1gt

ltoptiongtopetussuunnitelmat ltoptiongt

ltoptiongtopetusharjoittelultoptiongt

ltoptiongtkodin ja koulun yhteistyoumlltoptiongt

ltoptiongtidea tai aloiteltoptiongt

ltoptiongtkysyttaumlvaumlaumlltoptiongt

ltoptiongtmuu aiheltoptiongt

ltselectgtltfontgtltpgt

ltpgtltfont face=ArialgtltstronggtNimeniltstronggtltbrgt

ltinput type=text size=25 name=nimenigtltbrgt

ltstronggtSaumlhkoumlpostiosoitteeniltstronggtltbrgt

ltinput type=text size=25 name=emailgtltbrgt

ltstronggtPalauteltstronggtltbrgt

lttextarea name=palautteeni rows=4 cols=40gtlttextareagt

ltfontgtltpgt

ltpgtltfont face=Arialgtltinput type=submit value=laumlhetaumlgt

ltinputtype=reset value=tyhjennaumlgt ltfontgtltpgt

ltformgt

51

86 Lomakkeen viimeistelyHTML-lomaketta voidaan vielauml kehittaumlauml ulkonaumloumln kaumlytettaumlvyyden ja esteettoumlmyyden osalta

861 Label for (etiketit)Lisaumltaumlaumln lomakkeen esteettoumlmyyttauml ja kaumlytettaumlvyyttauml etikettien avulla

ltlabel for=nimigtNimiltlabelgt

ltform id=form name=form method=post action=palautephpgt

ltlabel for=nimigtNimiltlabelgtltbrgt

ltinput type=text name=nimi id=nimi gt ltbrgt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbrgt

ltinput type=text name=sposti id=sposti gt ltbrgt

ltlabel for=viestigtViestiltlabelgtltbrgt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbrgt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltformgt

Nyt tarvitsee klikata vain etikettiauml eli esimerkiksi tekstiauml Saumlhkoumlposti niin kursori on valmiina oikeassa paikassa ja kyseinen kenttauml aktivoituu

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

47

ltform action=vastaanotaphp method=postgtltpgtltbgtOstaltbgtltbrgtltinput type=checkbox name=maito value=Maitogt Maitoltbrgtltinput type=checkbox name=juusto value=Juusto checkedgt Juustoltbrgtltinput type=checkbox name=voi value=Voigt Voiltbrgtltinput type=submit value=Laumlhetaumlgtltpgtltformgt

TYPE=radio

Tekee valintanapin Napit ovat aina ryhmissauml ja vain yksi ryhmaumln napeista voi olla valittuna Samaan ryhmaumlaumln kuuluvilla napeilla pitaumlauml olla sama NAME-maumlaumlre ja eri VALUE-maumlaumlre Checked tarkoittaa oletusvalintaa Taumlssauml esimerkissauml on valmiiksi valittuina Juusto ja Viini

ltinput type=radio name=ryhma1 value=Maitogt Maitoltbrgtltinput type=radio name=ryhma1 value=Voi checkedgt Voiltbrgtltinput type=radio name=ryhma1 value=Juustogt Juustolthrgtltinput type=radio name=ryhma2 value=VesigtVesiltbrgtltinput type=radio name=ryhma2 value=OlutgtOlutltbrgtltinput type=radio name=ryhma2 value=Viini checkedgt Viiniltbrgt

48

TYPE=submit

Tekee painikkeen jota painamalla voi laumlhettaumlauml lomakkeen tiedot Lomakkeella voi olla useita laumlhetauml-painikkeita mutta niillauml tulee olla eri NAME-maumlaumlre

ltinput type=submit value=Laumlhetaumlgt

TYPE=reset

Tekee painikkeen jota painamalla voi tyhjentaumlauml lomakkeen

ltinput type=reset value=Tyhjennauml lomakegt

TYPE=hidden

Tekee piilotetun kentaumln Sitauml tarvitaan kun halutaan viedauml tietoa lomakkeenkaumlsittelyohjel-malle ilman ettauml tietoa naumlkyy selaimessa (naumlkyy tosin laumlhdekoodissa)

49

83 SELECT - ValintalistaSELECT-koodilla saa aikaiseksi valintalistan jossa on useita vaihtoehtoja joista kaumlyttaumljauml voi valita yhden tai useamman Valintalistan vaihtoehdot maumlaumlritellaumlaumln OPTION-koodein NAME maumlaumlrittaumlauml kentaumllle nimen SIZE kerralla naumlkyvien rivien lukumaumlaumlraumln ja MULTIPLE mahdol-listaa usean vaihtoehdon valitsemisen VALUE-attribuutilla maumlaumlraumltaumlaumln laumlhetettaumlvaumln vaihtoeh-don arvo

ltFORMgtltSELECT NAME=vaihtoehdotgtltOPTION VALUE=1gtVaihtoehto 1ltOPTION VALUE=2gtVaihtoehto 2ltOPTION VALUE=3gtVaihtoehto 3ltSELECTgtltFORMgt

84 TEXTAREA - TekstinsyoumlttoumlkenttaumlTekee tekstinsyoumlttoumlkentaumln jolle voi syoumlttaumlauml useita rivejauml tekstiauml NAME kertoo kentaumln nimen ROWS rivien lukumaumlaumlraumln ja COLS kentaumln leveyden Koodin sisaumllle kirjoitettu teksti naumlkyy tekstikentaumlssauml

ltTEXTAREA NAME=tekstii ROWS=10 COLS=50gt ltTEXTAREAgt

85 EsimerkkiAlla esimerkki valmiista palautelomakkeesta

50

Ja koodina sama esimerkki

ltform action=palautephp method=postgt

ltpgtltfont face=ArialgtltstronggtPalautteen aiheltstronggtltbrgt

ltselect name=palautetta size=1gt

ltoptiongtopetussuunnitelmat ltoptiongt

ltoptiongtopetusharjoittelultoptiongt

ltoptiongtkodin ja koulun yhteistyoumlltoptiongt

ltoptiongtidea tai aloiteltoptiongt

ltoptiongtkysyttaumlvaumlaumlltoptiongt

ltoptiongtmuu aiheltoptiongt

ltselectgtltfontgtltpgt

ltpgtltfont face=ArialgtltstronggtNimeniltstronggtltbrgt

ltinput type=text size=25 name=nimenigtltbrgt

ltstronggtSaumlhkoumlpostiosoitteeniltstronggtltbrgt

ltinput type=text size=25 name=emailgtltbrgt

ltstronggtPalauteltstronggtltbrgt

lttextarea name=palautteeni rows=4 cols=40gtlttextareagt

ltfontgtltpgt

ltpgtltfont face=Arialgtltinput type=submit value=laumlhetaumlgt

ltinputtype=reset value=tyhjennaumlgt ltfontgtltpgt

ltformgt

51

86 Lomakkeen viimeistelyHTML-lomaketta voidaan vielauml kehittaumlauml ulkonaumloumln kaumlytettaumlvyyden ja esteettoumlmyyden osalta

861 Label for (etiketit)Lisaumltaumlaumln lomakkeen esteettoumlmyyttauml ja kaumlytettaumlvyyttauml etikettien avulla

ltlabel for=nimigtNimiltlabelgt

ltform id=form name=form method=post action=palautephpgt

ltlabel for=nimigtNimiltlabelgtltbrgt

ltinput type=text name=nimi id=nimi gt ltbrgt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbrgt

ltinput type=text name=sposti id=sposti gt ltbrgt

ltlabel for=viestigtViestiltlabelgtltbrgt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbrgt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltformgt

Nyt tarvitsee klikata vain etikettiauml eli esimerkiksi tekstiauml Saumlhkoumlposti niin kursori on valmiina oikeassa paikassa ja kyseinen kenttauml aktivoituu

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

48

TYPE=submit

Tekee painikkeen jota painamalla voi laumlhettaumlauml lomakkeen tiedot Lomakkeella voi olla useita laumlhetauml-painikkeita mutta niillauml tulee olla eri NAME-maumlaumlre

ltinput type=submit value=Laumlhetaumlgt

TYPE=reset

Tekee painikkeen jota painamalla voi tyhjentaumlauml lomakkeen

ltinput type=reset value=Tyhjennauml lomakegt

TYPE=hidden

Tekee piilotetun kentaumln Sitauml tarvitaan kun halutaan viedauml tietoa lomakkeenkaumlsittelyohjel-malle ilman ettauml tietoa naumlkyy selaimessa (naumlkyy tosin laumlhdekoodissa)

49

83 SELECT - ValintalistaSELECT-koodilla saa aikaiseksi valintalistan jossa on useita vaihtoehtoja joista kaumlyttaumljauml voi valita yhden tai useamman Valintalistan vaihtoehdot maumlaumlritellaumlaumln OPTION-koodein NAME maumlaumlrittaumlauml kentaumllle nimen SIZE kerralla naumlkyvien rivien lukumaumlaumlraumln ja MULTIPLE mahdol-listaa usean vaihtoehdon valitsemisen VALUE-attribuutilla maumlaumlraumltaumlaumln laumlhetettaumlvaumln vaihtoeh-don arvo

ltFORMgtltSELECT NAME=vaihtoehdotgtltOPTION VALUE=1gtVaihtoehto 1ltOPTION VALUE=2gtVaihtoehto 2ltOPTION VALUE=3gtVaihtoehto 3ltSELECTgtltFORMgt

84 TEXTAREA - TekstinsyoumlttoumlkenttaumlTekee tekstinsyoumlttoumlkentaumln jolle voi syoumlttaumlauml useita rivejauml tekstiauml NAME kertoo kentaumln nimen ROWS rivien lukumaumlaumlraumln ja COLS kentaumln leveyden Koodin sisaumllle kirjoitettu teksti naumlkyy tekstikentaumlssauml

ltTEXTAREA NAME=tekstii ROWS=10 COLS=50gt ltTEXTAREAgt

85 EsimerkkiAlla esimerkki valmiista palautelomakkeesta

50

Ja koodina sama esimerkki

ltform action=palautephp method=postgt

ltpgtltfont face=ArialgtltstronggtPalautteen aiheltstronggtltbrgt

ltselect name=palautetta size=1gt

ltoptiongtopetussuunnitelmat ltoptiongt

ltoptiongtopetusharjoittelultoptiongt

ltoptiongtkodin ja koulun yhteistyoumlltoptiongt

ltoptiongtidea tai aloiteltoptiongt

ltoptiongtkysyttaumlvaumlaumlltoptiongt

ltoptiongtmuu aiheltoptiongt

ltselectgtltfontgtltpgt

ltpgtltfont face=ArialgtltstronggtNimeniltstronggtltbrgt

ltinput type=text size=25 name=nimenigtltbrgt

ltstronggtSaumlhkoumlpostiosoitteeniltstronggtltbrgt

ltinput type=text size=25 name=emailgtltbrgt

ltstronggtPalauteltstronggtltbrgt

lttextarea name=palautteeni rows=4 cols=40gtlttextareagt

ltfontgtltpgt

ltpgtltfont face=Arialgtltinput type=submit value=laumlhetaumlgt

ltinputtype=reset value=tyhjennaumlgt ltfontgtltpgt

ltformgt

51

86 Lomakkeen viimeistelyHTML-lomaketta voidaan vielauml kehittaumlauml ulkonaumloumln kaumlytettaumlvyyden ja esteettoumlmyyden osalta

861 Label for (etiketit)Lisaumltaumlaumln lomakkeen esteettoumlmyyttauml ja kaumlytettaumlvyyttauml etikettien avulla

ltlabel for=nimigtNimiltlabelgt

ltform id=form name=form method=post action=palautephpgt

ltlabel for=nimigtNimiltlabelgtltbrgt

ltinput type=text name=nimi id=nimi gt ltbrgt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbrgt

ltinput type=text name=sposti id=sposti gt ltbrgt

ltlabel for=viestigtViestiltlabelgtltbrgt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbrgt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltformgt

Nyt tarvitsee klikata vain etikettiauml eli esimerkiksi tekstiauml Saumlhkoumlposti niin kursori on valmiina oikeassa paikassa ja kyseinen kenttauml aktivoituu

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

49

83 SELECT - ValintalistaSELECT-koodilla saa aikaiseksi valintalistan jossa on useita vaihtoehtoja joista kaumlyttaumljauml voi valita yhden tai useamman Valintalistan vaihtoehdot maumlaumlritellaumlaumln OPTION-koodein NAME maumlaumlrittaumlauml kentaumllle nimen SIZE kerralla naumlkyvien rivien lukumaumlaumlraumln ja MULTIPLE mahdol-listaa usean vaihtoehdon valitsemisen VALUE-attribuutilla maumlaumlraumltaumlaumln laumlhetettaumlvaumln vaihtoeh-don arvo

ltFORMgtltSELECT NAME=vaihtoehdotgtltOPTION VALUE=1gtVaihtoehto 1ltOPTION VALUE=2gtVaihtoehto 2ltOPTION VALUE=3gtVaihtoehto 3ltSELECTgtltFORMgt

84 TEXTAREA - TekstinsyoumlttoumlkenttaumlTekee tekstinsyoumlttoumlkentaumln jolle voi syoumlttaumlauml useita rivejauml tekstiauml NAME kertoo kentaumln nimen ROWS rivien lukumaumlaumlraumln ja COLS kentaumln leveyden Koodin sisaumllle kirjoitettu teksti naumlkyy tekstikentaumlssauml

ltTEXTAREA NAME=tekstii ROWS=10 COLS=50gt ltTEXTAREAgt

85 EsimerkkiAlla esimerkki valmiista palautelomakkeesta

50

Ja koodina sama esimerkki

ltform action=palautephp method=postgt

ltpgtltfont face=ArialgtltstronggtPalautteen aiheltstronggtltbrgt

ltselect name=palautetta size=1gt

ltoptiongtopetussuunnitelmat ltoptiongt

ltoptiongtopetusharjoittelultoptiongt

ltoptiongtkodin ja koulun yhteistyoumlltoptiongt

ltoptiongtidea tai aloiteltoptiongt

ltoptiongtkysyttaumlvaumlaumlltoptiongt

ltoptiongtmuu aiheltoptiongt

ltselectgtltfontgtltpgt

ltpgtltfont face=ArialgtltstronggtNimeniltstronggtltbrgt

ltinput type=text size=25 name=nimenigtltbrgt

ltstronggtSaumlhkoumlpostiosoitteeniltstronggtltbrgt

ltinput type=text size=25 name=emailgtltbrgt

ltstronggtPalauteltstronggtltbrgt

lttextarea name=palautteeni rows=4 cols=40gtlttextareagt

ltfontgtltpgt

ltpgtltfont face=Arialgtltinput type=submit value=laumlhetaumlgt

ltinputtype=reset value=tyhjennaumlgt ltfontgtltpgt

ltformgt

51

86 Lomakkeen viimeistelyHTML-lomaketta voidaan vielauml kehittaumlauml ulkonaumloumln kaumlytettaumlvyyden ja esteettoumlmyyden osalta

861 Label for (etiketit)Lisaumltaumlaumln lomakkeen esteettoumlmyyttauml ja kaumlytettaumlvyyttauml etikettien avulla

ltlabel for=nimigtNimiltlabelgt

ltform id=form name=form method=post action=palautephpgt

ltlabel for=nimigtNimiltlabelgtltbrgt

ltinput type=text name=nimi id=nimi gt ltbrgt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbrgt

ltinput type=text name=sposti id=sposti gt ltbrgt

ltlabel for=viestigtViestiltlabelgtltbrgt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbrgt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltformgt

Nyt tarvitsee klikata vain etikettiauml eli esimerkiksi tekstiauml Saumlhkoumlposti niin kursori on valmiina oikeassa paikassa ja kyseinen kenttauml aktivoituu

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

50

Ja koodina sama esimerkki

ltform action=palautephp method=postgt

ltpgtltfont face=ArialgtltstronggtPalautteen aiheltstronggtltbrgt

ltselect name=palautetta size=1gt

ltoptiongtopetussuunnitelmat ltoptiongt

ltoptiongtopetusharjoittelultoptiongt

ltoptiongtkodin ja koulun yhteistyoumlltoptiongt

ltoptiongtidea tai aloiteltoptiongt

ltoptiongtkysyttaumlvaumlaumlltoptiongt

ltoptiongtmuu aiheltoptiongt

ltselectgtltfontgtltpgt

ltpgtltfont face=ArialgtltstronggtNimeniltstronggtltbrgt

ltinput type=text size=25 name=nimenigtltbrgt

ltstronggtSaumlhkoumlpostiosoitteeniltstronggtltbrgt

ltinput type=text size=25 name=emailgtltbrgt

ltstronggtPalauteltstronggtltbrgt

lttextarea name=palautteeni rows=4 cols=40gtlttextareagt

ltfontgtltpgt

ltpgtltfont face=Arialgtltinput type=submit value=laumlhetaumlgt

ltinputtype=reset value=tyhjennaumlgt ltfontgtltpgt

ltformgt

51

86 Lomakkeen viimeistelyHTML-lomaketta voidaan vielauml kehittaumlauml ulkonaumloumln kaumlytettaumlvyyden ja esteettoumlmyyden osalta

861 Label for (etiketit)Lisaumltaumlaumln lomakkeen esteettoumlmyyttauml ja kaumlytettaumlvyyttauml etikettien avulla

ltlabel for=nimigtNimiltlabelgt

ltform id=form name=form method=post action=palautephpgt

ltlabel for=nimigtNimiltlabelgtltbrgt

ltinput type=text name=nimi id=nimi gt ltbrgt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbrgt

ltinput type=text name=sposti id=sposti gt ltbrgt

ltlabel for=viestigtViestiltlabelgtltbrgt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbrgt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltformgt

Nyt tarvitsee klikata vain etikettiauml eli esimerkiksi tekstiauml Saumlhkoumlposti niin kursori on valmiina oikeassa paikassa ja kyseinen kenttauml aktivoituu

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

51

86 Lomakkeen viimeistelyHTML-lomaketta voidaan vielauml kehittaumlauml ulkonaumloumln kaumlytettaumlvyyden ja esteettoumlmyyden osalta

861 Label for (etiketit)Lisaumltaumlaumln lomakkeen esteettoumlmyyttauml ja kaumlytettaumlvyyttauml etikettien avulla

ltlabel for=nimigtNimiltlabelgt

ltform id=form name=form method=post action=palautephpgt

ltlabel for=nimigtNimiltlabelgtltbrgt

ltinput type=text name=nimi id=nimi gt ltbrgt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbrgt

ltinput type=text name=sposti id=sposti gt ltbrgt

ltlabel for=viestigtViestiltlabelgtltbrgt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbrgt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltformgt

Nyt tarvitsee klikata vain etikettiauml eli esimerkiksi tekstiauml Saumlhkoumlposti niin kursori on valmiina oikeassa paikassa ja kyseinen kenttauml aktivoituu

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

52

862 Fieldset ja legendLaittamalla mukaan fieldsetin ja legendin parannat esteettoumlmyyttauml ja samalla vaikutat ulko-asuun Fieldset tarkoittaa lomake-elementtien ryhmittelyauml eli koko ryhmauml niputetaan yhteen kehyksellauml Legend tarkoittaa tarkoittaa elementtityhmaumln otsikkoa

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti cols=45 rows=5gtlttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

53

863 Tabindex eli tabulaattoriTabulaattori on naumlppaumlrauml ja sen saa toimimaan myoumls webissauml Kaumlsky on tabindex Ideana on se ettauml paumlaumlset seuraavaan kenttaumlaumln napsauttamalla tab-naumlppaumlintauml (tabulaattori) Se saumlaumlstaumlauml ai-kaa koska ei tarvitse hiiren avulla siirtaumlauml osoitinta seuraavaan kenttaumlaumln Seuraavassa esimer-kissauml lomake laitetaan toimimaan siten ettauml ensin on nimi sitten viesti ja vasta viimeisenauml saumlhkoumlposti

ltform id=form name=form method=post action=palautephpgt

ltfieldset style=width 400pxgt

ltlegendgtPALAUTELOMAKEltlegendgt

ltlabel for=nimigtNimiltlabelgtltbr gt

ltinput type=text name=nimi id=nimi tabindex=1gt ltbr gt

ltlabel for=spostigtSaumlhkoumlpostiltlabelgtltbr gt

ltinput type=text name=sposti id=sposti tabindex=3 gt ltbr gt

ltlabel for=viestigtViestiltlabelgtltbr gt

lttextarea name=viesti id=viesti tabindex=2 cols=45 rows=5

wrap=virtualgt

lttextareagt ltbr gt

ltinput type=submit name=laheta id=laheta value=Laumlhetauml palaute gt

ltfieldsetgt

ltformgt

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

54

87 Nauhoite 7 ja tehtaumlvauml 8Nauhoite 7 Palautelomake

kesto 1550

URL httpwwwviddlercomv685af0e7

Tehtaumlvauml 8

Kirjoita HTMLllauml seuraavanlainen lomake

55

9 Ulkoasun muotoiluHTMLn avulla voidaan tehdauml myoumls graafista taittoa eli vaikuttaa sivuston ulkoasuun HTMLn avulla sivuille saadaan perusilme kuten esimerkiksi sivuston koko ja vaumlrimaailma HTMLn avulla sivulle voidaan sijoittaa myoumls muun muassa ylaumlpalkki ja navigaatio

91 Vaumlrit HTMLssaumlVaumlrikoodi ilmaistaan HTML-sivulla heksadesimaalilukuna Lisaumlksi vaumlrin eteen tulee risuaita Kuvankaumlsittelyohjelmissa vaumlrit maumlaumlritellaumlaumln RGB-jaumlrjestelmaumln avulla (Red-Green-Blue) Kaksi ensimmaumlistauml lukua kuvaavat punaista vaumlriauml kaksi seuraavaa vihreaumlauml ja kaksi viimeistauml kuvaavat sinistauml Vaumlrit muodostetaan sotkemalla keskenaumlaumln kolmea edellauml mainittua vaumlriauml Kuvankaumlsittelyohjelmassa suurin arvo kullekin vaumlrille on 255 ja pienin on 0 Heksadesimaa-lissa pienin luku on 0 mutta suurin on F

Taumlssauml esimerkki siitauml kuinka Adoben PhotoShop -ohjelma ilmoittaa vaumlrit sekauml RGB-arvoina ettauml heksadesimaalilukuina Vasemmassa sarakkeessa naumlkyvaumlt punaisen vaumlrin RGB-arvot eli R=255 G=0 ja B=0 Sama naumlkyy heksadesimaalina risuaidan kohdalla eli = ff0000

56

Tarkastellaan vielauml vaumlrejauml taulukon avulla esimerkkien kera

Vaumlri RGB-vaumlri Heksadesimaali Esimerkki

valkoinen R=255 G=255 B=255 FFFFFF ltbody bgcolor=FFFFFFgtSivun taustavaumlriksi valkoinen

punainen R=255 G=0 B=0 FF0000 ltfont color=FF0000gtltfontgtFontin vaumlriksi punainen

sininen R=000 G=000 B=255 0000FF ltfont color=0000FFgtltfontgtFontin vaumlriksi sininen

musta R=000 G=000 B=000 000000 ltfont color=000000gtltfontgtFontin vaumlriksi musta

Kymmenlukujaumlrjestelmaumlstauml voi olla hankala muuttaa lukuja heksadesimaaliluvuiksi paumlaumlssauml laskien Onkin syytauml muistaa ettauml tietokoneen laskimesta on apua Avaa aluksi laskin

Valitse Funktiolaskin (Naumlytauml gt Funktiolaskin)

57

Kirjoita RGB-arvo

Paina painiketta Hex

RGB-arvo 255 on heksadesimaalilukuna siis FF

HUOM Windows 7ssauml sama muunnos onnistuu kun valitset ohjelmointilaskimen

58

On myoumls ohjelmia jotka ilmoittavat vaumlrikoodin mistauml tahansa (klikkaat vaan kyseistauml koh-taa) Yksi suositeltava vaihtoehto Windowsin kaumlyttaumljille on ilmaisohjelma Hex Color Finder30 Macintoshille loumlytyy ainakin ohjelma nimeltauml Color Snapper mutta se on maksullinen Tosin myoumls Firefoxiin saa asennettua ohjelmia joiden avulla vaumlrikoodin saa helposti selvitet-tyauml Kannattaa kokeilla hakusanaa color picker

92 KehyksetKehykset (freimit engl frames) ovat selainikkunan osia jotka toimivat joissakin suhteissa itsenaumlisinauml ali-ikkunoina Kehyksen sisaumlllauml naumlkyy yleensauml HTML-dokumentti mutta siellauml voi olla myoumls kuva pelkkauml tekstitiedosto tms Kehyksen sisaumlllys voi olla vieritettaumlvissauml (skrollattavissa) yloumls ja alas kenties myoumls vaakasuunnassa kuten normaali dokumentti nor-maalissa selainikkunassa on Kehykset ovat suorakulmaisia ikkuna voidaan jakaa kahteen tai useampaan suorakulmaiseen osaan vaakasuunnassa tai pystysuunnassa Naumlin saatuja osia voi vielauml jakaa edelleen (Korpela)

Korpelan mukaan kehysidea lienee peraumlisin siitauml ettauml useissa ohjelmissa on mahdollista kat-sella isohkoa dokumenttia siten ettauml vasemmalla on kapeassa ali-ikkunassa sisaumlllysluettelo ja oikealla isommassa ali-ikkunassa kulloinkin katsottavan osan sisaumlltouml Seuraavassa on taumlstauml esimerkkikuva jossa Acrobat Readerillauml luetaan kirjaa M niinkuin matematiikka

56

Tarkastellaan vielauml vaumlrejauml taulukon avulla esimerkkien kera

Vaumlri RGB-vaumlri Heksadesimaali Esimerkki

valkoinen R=255 G=255 B=255 FFFFFF ltbody bgcolor=FFFFFFgtSivun taustavaumlriksi valkoinen

punainen R=255 G=0 B=0 FF0000 ltfont color=FF0000gtltfontgtFontin vaumlriksi punainen

sininen R=000 G=000 B=255 0000FF ltfont color=0000FFgtltfontgtFontin vaumlriksi sininen

musta R=000 G=000 B=000 000000 ltfont color=000000gtltfontgtFontin vaumlriksi musta

Kymmenlukujaumlrjestelmaumlstauml voi olla hankala muuttaa lukuja heksadesimaaliluvuiksi paumlaumlssauml laskien Onkin syytauml muistaa ettauml tietokoneen laskimesta on apua Avaa aluksi laskin

Valitse Funktiolaskin (Naumlytauml gt Funktiolaskin)

57

Kirjoita RGB-arvo

Paina painiketta Hex

RGB-arvo 255 on heksadesimaalilukuna siis FF

HUOM Windows 7ssauml sama muunnos onnistuu kun valitset ohjelmointilaskimen

58

On myoumls ohjelmia jotka ilmoittavat vaumlrikoodin mistauml tahansa (klikkaat vaan kyseistauml koh-taa) Yksi suositeltava vaihtoehto Windowsin kaumlyttaumljille on ilmaisohjelma Hex Color Finder30 Macintoshille loumlytyy ainakin ohjelma nimeltauml Color Snapper mutta se on maksullinen Tosin myoumls Firefoxiin saa asennettua ohjelmia joiden avulla vaumlrikoodin saa helposti selvitet-tyauml Kannattaa kokeilla hakusanaa color picker

92 KehyksetKehykset (freimit engl frames) ovat selainikkunan osia jotka toimivat joissakin suhteissa itsenaumlisinauml ali-ikkunoina Kehyksen sisaumlllauml naumlkyy yleensauml HTML-dokumentti mutta siellauml voi olla myoumls kuva pelkkauml tekstitiedosto tms Kehyksen sisaumlllys voi olla vieritettaumlvissauml (skrollattavissa) yloumls ja alas kenties myoumls vaakasuunnassa kuten normaali dokumentti nor-maalissa selainikkunassa on Kehykset ovat suorakulmaisia ikkuna voidaan jakaa kahteen tai useampaan suorakulmaiseen osaan vaakasuunnassa tai pystysuunnassa Naumlin saatuja osia voi vielauml jakaa edelleen (Korpela)

Korpelan mukaan kehysidea lienee peraumlisin siitauml ettauml useissa ohjelmissa on mahdollista kat-sella isohkoa dokumenttia siten ettauml vasemmalla on kapeassa ali-ikkunassa sisaumlllysluettelo ja oikealla isommassa ali-ikkunassa kulloinkin katsottavan osan sisaumlltouml Seuraavassa on taumlstauml esimerkkikuva jossa Acrobat Readerillauml luetaan kirjaa M niinkuin matematiikka

57

Kirjoita RGB-arvo

Paina painiketta Hex

RGB-arvo 255 on heksadesimaalilukuna siis FF

HUOM Windows 7ssauml sama muunnos onnistuu kun valitset ohjelmointilaskimen

58

On myoumls ohjelmia jotka ilmoittavat vaumlrikoodin mistauml tahansa (klikkaat vaan kyseistauml koh-taa) Yksi suositeltava vaihtoehto Windowsin kaumlyttaumljille on ilmaisohjelma Hex Color Finder30 Macintoshille loumlytyy ainakin ohjelma nimeltauml Color Snapper mutta se on maksullinen Tosin myoumls Firefoxiin saa asennettua ohjelmia joiden avulla vaumlrikoodin saa helposti selvitet-tyauml Kannattaa kokeilla hakusanaa color picker

92 KehyksetKehykset (freimit engl frames) ovat selainikkunan osia jotka toimivat joissakin suhteissa itsenaumlisinauml ali-ikkunoina Kehyksen sisaumlllauml naumlkyy yleensauml HTML-dokumentti mutta siellauml voi olla myoumls kuva pelkkauml tekstitiedosto tms Kehyksen sisaumlllys voi olla vieritettaumlvissauml (skrollattavissa) yloumls ja alas kenties myoumls vaakasuunnassa kuten normaali dokumentti nor-maalissa selainikkunassa on Kehykset ovat suorakulmaisia ikkuna voidaan jakaa kahteen tai useampaan suorakulmaiseen osaan vaakasuunnassa tai pystysuunnassa Naumlin saatuja osia voi vielauml jakaa edelleen (Korpela)

Korpelan mukaan kehysidea lienee peraumlisin siitauml ettauml useissa ohjelmissa on mahdollista kat-sella isohkoa dokumenttia siten ettauml vasemmalla on kapeassa ali-ikkunassa sisaumlllysluettelo ja oikealla isommassa ali-ikkunassa kulloinkin katsottavan osan sisaumlltouml Seuraavassa on taumlstauml esimerkkikuva jossa Acrobat Readerillauml luetaan kirjaa M niinkuin matematiikka

58

On myoumls ohjelmia jotka ilmoittavat vaumlrikoodin mistauml tahansa (klikkaat vaan kyseistauml koh-taa) Yksi suositeltava vaihtoehto Windowsin kaumlyttaumljille on ilmaisohjelma Hex Color Finder30 Macintoshille loumlytyy ainakin ohjelma nimeltauml Color Snapper mutta se on maksullinen Tosin myoumls Firefoxiin saa asennettua ohjelmia joiden avulla vaumlrikoodin saa helposti selvitet-tyauml Kannattaa kokeilla hakusanaa color picker

92 KehyksetKehykset (freimit engl frames) ovat selainikkunan osia jotka toimivat joissakin suhteissa itsenaumlisinauml ali-ikkunoina Kehyksen sisaumlllauml naumlkyy yleensauml HTML-dokumentti mutta siellauml voi olla myoumls kuva pelkkauml tekstitiedosto tms Kehyksen sisaumlllys voi olla vieritettaumlvissauml (skrollattavissa) yloumls ja alas kenties myoumls vaakasuunnassa kuten normaali dokumentti nor-maalissa selainikkunassa on Kehykset ovat suorakulmaisia ikkuna voidaan jakaa kahteen tai useampaan suorakulmaiseen osaan vaakasuunnassa tai pystysuunnassa Naumlin saatuja osia voi vielauml jakaa edelleen (Korpela)

Korpelan mukaan kehysidea lienee peraumlisin siitauml ettauml useissa ohjelmissa on mahdollista kat-sella isohkoa dokumenttia siten ettauml vasemmalla on kapeassa ali-ikkunassa sisaumlllysluettelo ja oikealla isommassa ali-ikkunassa kulloinkin katsottavan osan sisaumlltouml Seuraavassa on taumlstauml esimerkkikuva jossa Acrobat Readerillauml luetaan kirjaa M niinkuin matematiikka

59

Taumlllaisella esitystavalla on useita etuja Kaumlyttaumljauml voi siirtyauml vasemmassa kehyksessauml eli na-vigointikehyksessauml haluamaansa kohtaan ja valita klikkaamalla Jos haumln huomaa ettei se sisaumlltaumlnytkaumlaumln sitauml mitauml haumln etsi haumln voi saman tien valita toisen kohdan Erityisesti hakute-ostyyppisissauml dokumenteissa taumlmauml voi olla naumlppaumlraumlauml (Korpela)

921 Kuinka rakentaa kehykselliset www-sivutKehykset olivat muotia ajanjaksolla 1998 - 2002 Nykyaumlaumln kehyssivuja naumlkee erittaumlin har-voin Niiden kaumlyttoumlauml ei suosittele kukaan en minaumlkaumlaumln Jos kuitenkin haluat tehdauml kehykselli-set www-sivut on sinun toimittava seuraavan kaavan mukaan

60

1 luo sivu joka sisaumlltaumlauml kehyksen maumlaumlrittelyn (frameset)2 luo sivut jotka tulevat kehyksiin (kehysten sisaumlaumln)

Kehysten avulla tehty sivu voi olla rakenteeltaan kuten taumlssauml alla Siinauml on kapea vasen reuna ja leveaumlmpi oikeanpuoleinen osa on vielauml pilkottu kahtia ylauml- ja alaosaan

Koodina yllauml oleva kehyssivu menee kuten alla

lthtmlgtltheadgtlttitlegtMun sivulttitlegtltheadgtltframeset cols=120gtltframe src=vasenvalikkohtm name=menugtltframeset rows=50gtltframe src=etusivuhtm name=tekstigtltframe src=alaosahtm name=alaosagtltframesetgtltframesetgtlthtmlgt

61

Vasen reuna on koodin osalta kuten alla

lth3gtValikkolth3gt

lta href=etusivuhtmgtEtusivultagtltbrgtlta href=tokahtmgtToinen sivultagtltbrgtlta href=kolmashtmgtKolmas sivultagtltbrgt

Kehyksiauml kaumlytettaumlessauml on linkkien kanssa oltava tarkkana Ongelmaksi muodostuu esimerkik-si ettauml sivut avautuvat kehyksen sisaumlaumln Kaumlytettaumlvaumlt perusvaihtoehdot ovat

_blank avaa uuden selainikkunan_self lataa sivun samaan ikkunaan_top avautuu entisen paumlaumllle

Sivuston ulkopuolella oleva linkki on aina _blank Muussa tapauksessa linkitetty sivu naumlkyy kehyksessauml

lth3gtValikkolth3gt

lta href=etusivuhtmgtEtusivultagtltbrgt

lta href=tokahtmgtToinen sivultagtltbrgt

lta href=httpwwwotavanopistofigtOtavan Opistoltagtltbrgt

Nyt jos napsauta linkkiauml Otavan Opisto aukeaa linkki kehyksen sisaumlaumln ja lopputulos on ka-malan naumlkoumlinen

61

Vasen reuna on koodin osalta kuten alla

lth3gtValikkolth3gt

lta href=etusivuhtmgtEtusivultagtltbrgtlta href=tokahtmgtToinen sivultagtltbrgtlta href=kolmashtmgtKolmas sivultagtltbrgt

Kehyksiauml kaumlytettaumlessauml on linkkien kanssa oltava tarkkana Ongelmaksi muodostuu esimerkik-si ettauml sivut avautuvat kehyksen sisaumlaumln Kaumlytettaumlvaumlt perusvaihtoehdot ovat

_blank avaa uuden selainikkunan_self lataa sivun samaan ikkunaan_top avautuu entisen paumlaumllle

Sivuston ulkopuolella oleva linkki on aina _blank Muussa tapauksessa linkitetty sivu naumlkyy kehyksessauml

lth3gtValikkolth3gt

lta href=etusivuhtmgtEtusivultagtltbrgt

lta href=tokahtmgtToinen sivultagtltbrgt

lta href=httpwwwotavanopistofigtOtavan Opistoltagtltbrgt

Nyt jos napsauta linkkiauml Otavan Opisto aukeaa linkki kehyksen sisaumlaumln ja lopputulos on ka-malan naumlkoumlinen

62

Oikea tapa kirjoittaa ulkopuolinen linkki on siis _blank

lta href=httpwwwotavanopistofi target=_blankgtOtavan Opistoltagtltbrgt

Jos halutaan sivun avautuvan oikeanpuoleiseen kehykseen niin sitten kuten alla

lta href=httpwwwotavanopistofi target=tekstigtOtavan Opistoltagtltbrgt

HUOM Maumlaumlrittelimme ettauml oikeanpuoleinen kehys on nimeltaumlaumln teksti

ltframe src=etusivuhtm name=tekstigt

63

93 IframeIFRAME (Inline Floating Frames) on kehys joka sijoitetaan www-sivulle Kehyksen hienous piilee siinauml ettauml kehyksen sisaumlaumln voidaan hakea sisaumlltoumlauml muualta esimerikiksi joltakin toiselta sivustolta Ero tavallisiin kehyksiin on siinauml ettei koko sivu ole kehys Iframen avulla voi va-lita miltauml tahansa sivulta alue johon sisaumlltouml tulee muualta Huono puoli on siinauml etteivaumlt kaikki selaimet vaumllttaumlmaumlttauml oletusarvoisesti hyvaumlksy iframen kautta tulevaa sisaumlltoumlauml

Taumlssauml esimerkki siitauml kuinka ottelutulokset ja videot haetaan HC Crusadersin sivuilta

ltBODYgt

ltiframe src=httpwwwhccrusadersnetkeskiphp name=iframe

width=200 marginwidth=10 height=200

marginheight=10 scrolling=autogt

ltiframegt

ltBODYgt

64

Kaumlytetyt attribuutit ovat nimi (identifioi kehyksen ja sitauml voidaan kaumlyttaumlauml myoumls targettina kun linkitetaumlaumln) width ja height (kehyksen koko joko pikseleinauml tai prosentteina) margin width ja margin height (sisaumllloumln ja kehyksen vaumllinen tila) scrolling (auto=tarvittaessa yes=aina no=ei ikinauml esim scrolling=auto) frameborder (naumlkyykouml kehyksen reunus vai ei esim naumlin frameborder=0)

Erityisen kaumlteviauml iframet ovat taulukkopohjaisissa taitoissa koska silloin kehys saadaan juuri sinne minne halutaan

ltBODYgt

lttable width=450 border=0 cellpadding=10

cellspacing=0 bgcolor=DCDCBAgt

lttr valign=topgt

lttdgt ltpgtEnsimmaumlinen solu ltpgtlttdgt

lttdgt ltiframe src=httpwwwhccrusadersnetkeskiphp name=iframe

width=300 height=350 scrolling=autogt ltiframegt lttdgt

lttdgt ltp gtKolmas solu ltpgt lttdgt

lttrgt

lttablegt

ltBODYgt

65

Joskus ongelmana voi olla taustakuvan haumlviaumlminen Silloin ratkaisu on tehdauml iframesta lauml-pinaumlkyvauml taumlhaumln tapaan (allowtransparency)

ltiframe src=kehyshtm width=300 height=300 scrolling=auto

frameborder=0 allowtransparency=truegtltiframegt

Linkittaumlminen iframen sisaumlaumln onnistuu naumlinlta href=sivuhtm target=iframegtLinkkiltagt

Linkkiauml napsauttamalla kehykseena avautuu linkin takana luuraava sivu eli sivuhtmIframea voi tyylitellauml cssn avulla esimerkiksi kuten alla jossa iframelle on piirretty sininen kehys kaksinkertaisena

ltBODYgt

lttable width=450 border=0 cellpadding=10

cellspacing=0 bgcolor=DCDCBAgt

lttr valign=topgt

lttdgt ltpgtEnsimmaumlinen solu ltpgtlttdgt

lttdgt ltiframe src=httpwwwhccrusadersnetkeskiphp name=iframe

width=300 height=350 scrolling=auto style=border 5px double

ACBBECgt

ltiframegt lttdgt

lttdgt ltpgtKolmas solultpgt lttdgt

lttrgt

lttablegtltBODYgt

66

94 TaulukotTaulukoita kaumlytetaumlaumln kotisivuilla kahdesta eri syystauml

taulukoiden avulla voidaan esittaumlauml informaatio havainnollisesti taulukoita kaumlytetaumlaumln usein myoumls kotisivun ulkoasun taittamiseen

Alun perin oli tarkoitus ettauml html-taulukoilla esitettaumlisiin vain dataa Hyvin pian websuunnit-telijat keksivaumlt hyoumldyntaumlauml taulukkoa www-sivujen taittoon Tauulkon avulla sivujen elementit saatiin halutuille paikoille esim ylaumlpalkki yloumls sen alapuolelle navigaatio ja lopuksi sisaumlltouml kahteen palstaan Nyt tosin ollaan siirtymaumlssauml pois kyseisestauml tavasta taittaa websivu Kor-vaavassa tavassa taitto hoituu HTMLn ja CSSn avulla

Taulukkopohjainen sivujen taittaminen on jatkuvasti vaumlhenemaumlaumln paumlin Vuonna 2006 loumlysin vielauml helposti taulukkopohjaista taittamista isoiltakin sivuilta Silloin oli helppoa poimia esi-merkkejauml kuten 112006 jolloin taulukkopohjaisia taittoja loumlytyi muun muassa seuraavilta isoilta sivustoilta

Sonera Dna MTV3

67

Laumlhdekoodi paljasti ettauml table-tagia oli kaumlytetty ahkerasti vaikka sivulla ei naumlkynyt ainutta-kaan taulukkoa Laumlhemmaumlssauml tarkastelussa esimerkiksi MTV3-sivuston koodissa naumlkyi tageja kuten lttablegt lttdgtjalttrgt Taumlssauml paumltkauml ihan sivun alusta

ltbody bgcolor=CCCCCC gt

lttable width=990 border=0 cellpadding=0 cellspacing=5gt

lttrgt

lttd colspan=2 style=height 90px padding 0px 5px 5px 10pxgt

lttable width=100 border=0 cellpadding=0 cellspacing=0gt

lttrgtlttdgt

Nyt huhtikuussa 2012 kyseiset isot sivustot eivaumlt ole enaumlauml taulukkotaittoiset Nyt Soneran DNAn ja Elisan sivuilla naumlkyy runsaasti div-tageja eikauml bodyn jaumllkeen ensimmaumlinen tagi ole table Table-tagin avulla taittaminen ei kuitenkaan ole taumlysin poistunut kaumlytoumlstauml Moni web-suunnittelija taittaa edelleenkin pieniauml sivustoja table-tagilla

941 Taulukon tekeminenTaulukon maumlaumlrittely aloitetaan tagilla lttablegt Voit laittaa sivuillesi minne tahansa taulukko-tagin kunhan muistat paumlaumlttaumlauml sen merkillauml lttablegt Yksinkertaisimmillaan taulukko olisi taumlllainen

lttablegtlttablegt

Taumlllaisesta taulukosta ei kuitenkaan ole mitaumlaumln hyoumltyauml koska siitauml puuttuvat rivit ja sarakkeet Rivi lisaumltaumlaumln koodilla lttrgt ja sarake koodilla lttdgt Tehdaumlaumln yksinkertainen esimerkki jossa on kaksi riviauml ja kaksi saraketta

lttablegt

lttrgt

lttdgteka rivi ja eka solulttdgtlttdgteka rivi ja toinen solulttdgt

lttrgt

lttrgt

lttdgttoka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solulttdgt

lttrgtlttablegt

Selaimen kautta tarkasteltuna yllauml oleva koodiesimerkki naumlyttaumlauml taumlltauml

68

Muokataan koodia ottamalla mukaan myoumls taulukon reunaviivat sekauml maumlaumlritellaumlaumln taulukon leveydeksi 400 pikseliauml

lttable width=400 border=1gtlttrgtlttdgteka rivi ja eka solulttdgtlttdgteka rivi ja toinen solulttdgtlttrgtlttrgtlttdgttoka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solulttdgtlttrgtlttablegt

Nyt taulukon ulkoasu on hieman muuttunut

69

942Tablen ominaisuudetTaulukkoa ja sen soluja sekauml rivejauml voidaan maumlaumlritellauml mm koon ja vaumlrin suhteen Table-tagilla voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee taulukon asemoinnin

lttable align=centergt

background=tiedostonimi Taustakuva taulukolle lttable background=koirajpggt

bgcolor=rrggbb Taustavaumlri taulukolle lttable bgcolor=00FF00gt

border=n Reunan paksuus ltTABLE border=0gt

bordercolor=rrggbb Reunan vaumlri ltTABLE border=1 borderco-lor=rrggbbgt

bordercolordark=rrggbb Reunan varjo ltTABLE border=1 borderco-lor=FFFFFF bordercolor-dark=rrggbbgt

cellpadding=n Solujen vaumlli (kuinka suuri)

ltTABLE cellpadding=1gt

cellspacing=n Solun reunan ja sisaumllloumln vaumlli

lttable cellspacing=2gt

valign=topbottom

Sisaumllloumln paikka solun sisaumlllauml

lttable cellspacing=2 valign=topgt

width=nnnn

Taulukon vaumlhimmaumlisle-veys pikseleinauml ja pro-sentteina

lttable width=23gt

70

TRn ja TDn ominaisuudet

Taulukon rivillauml ltTRgt ja sarakkeella ltTDgt voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee sisaumllloumln ase-moinnin solussa

lttd align=centergt

background=tiedostonimi Taustakuva solulle lttd background=koirajpggt

bgcolor=rrggbb Taustavaumlri solulle lttd bgcolor=00FF00gt

bordercolor=rrggbb Reunan vaumlri lttd bordercolor=rrggbbgt

bordercolordark=rrggbb Reunan varjo lttd bordercolor=FFFFFF bor-dercolordark=rrggbbgt

valign=topbottom

Sisaumllloumln paikka solun sisaumll-lauml

lttd valign=topgt

width=nnnn

Solun vaumlhimmaumlisleveys pikseleinauml ja prosentteina

lttd width=23gtlttd width=50gt

height=nnnn

Solun vaumlhimmaumliskorkeus pikseleinauml ja prosentteina

lttd height=23gtlttd height=100gt

TDn ominaisuudet

Taulukon solulla ltTDgt voi olla seuraavanlaisia ominaisuuksiaHUOM Jos ominaisuus on maumlaumlritelty TRlle niin TD ylittaumlauml sen

Ominaisuus Kuvaus Esimerkki

nowrap Estaumlauml rivinvaihdon lttd nowrapgt

rowspan=n Rivien maumlaumlrauml (yhdistaumlauml) lttd rowspan=2gt

colspan=n Solujen maumlaumlrauml (yhdistaumlauml) lttd colspan=2gt

71

943 Esimerkkejauml

Esimerkki 1

lttable width=300 cellpadding=2 border=1gt

lttrgt

lttd width=100gteka rivi ja eka solulttdgtlttd width=200gt

eka rivi ja toinen solulttdgt

lttrgt

lttrgt

lttd bgcolor=666666gt

toka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solu

jossa eniten tekstauml och samma paring svenskalttdgt

lttrgt

lttablegt

Esimerkki 2

Taumlssauml esimerkissauml yhdistetaumlaumln rivin kaksi solut yhdeksi soluksi kaumlyttaumlen tagia colspan (lttd colspan=2gt)

lttable width=300 border=1gtlttrgt

lttd width=100 valign=top height=100gt ensimmaumlinen solulttdgtlttdgttoinen solulttdgt

lttrgt

lttrgtlttd colspan=2gtkolmas solulttdgt

lttrgtlttablegt

72

95 Nauhoite 8 ja tehtaumlvauml 9

Nauhoite 8 iframe

kesto 0715

URL httpwwwviddlercomv3a7d45ef

Tehtaumlvauml 9

Tee taulukko jonka koko on 80 ja jossa on kolme riviauml ja kolme solua Solujen koot ovat 30 30 ja 40

68

Muokataan koodia ottamalla mukaan myoumls taulukon reunaviivat sekauml maumlaumlritellaumlaumln taulukon leveydeksi 400 pikseliauml

lttable width=400 border=1gtlttrgtlttdgteka rivi ja eka solulttdgtlttdgteka rivi ja toinen solulttdgtlttrgtlttrgtlttdgttoka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solulttdgtlttrgtlttablegt

Nyt taulukon ulkoasu on hieman muuttunut

69

942Tablen ominaisuudetTaulukkoa ja sen soluja sekauml rivejauml voidaan maumlaumlritellauml mm koon ja vaumlrin suhteen Table-tagilla voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee taulukon asemoinnin

lttable align=centergt

background=tiedostonimi Taustakuva taulukolle lttable background=koirajpggt

bgcolor=rrggbb Taustavaumlri taulukolle lttable bgcolor=00FF00gt

border=n Reunan paksuus ltTABLE border=0gt

bordercolor=rrggbb Reunan vaumlri ltTABLE border=1 borderco-lor=rrggbbgt

bordercolordark=rrggbb Reunan varjo ltTABLE border=1 borderco-lor=FFFFFF bordercolor-dark=rrggbbgt

cellpadding=n Solujen vaumlli (kuinka suuri)

ltTABLE cellpadding=1gt

cellspacing=n Solun reunan ja sisaumllloumln vaumlli

lttable cellspacing=2gt

valign=topbottom

Sisaumllloumln paikka solun sisaumlllauml

lttable cellspacing=2 valign=topgt

width=nnnn

Taulukon vaumlhimmaumlisle-veys pikseleinauml ja pro-sentteina

lttable width=23gt

70

TRn ja TDn ominaisuudet

Taulukon rivillauml ltTRgt ja sarakkeella ltTDgt voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee sisaumllloumln ase-moinnin solussa

lttd align=centergt

background=tiedostonimi Taustakuva solulle lttd background=koirajpggt

bgcolor=rrggbb Taustavaumlri solulle lttd bgcolor=00FF00gt

bordercolor=rrggbb Reunan vaumlri lttd bordercolor=rrggbbgt

bordercolordark=rrggbb Reunan varjo lttd bordercolor=FFFFFF bor-dercolordark=rrggbbgt

valign=topbottom

Sisaumllloumln paikka solun sisaumll-lauml

lttd valign=topgt

width=nnnn

Solun vaumlhimmaumlisleveys pikseleinauml ja prosentteina

lttd width=23gtlttd width=50gt

height=nnnn

Solun vaumlhimmaumliskorkeus pikseleinauml ja prosentteina

lttd height=23gtlttd height=100gt

TDn ominaisuudet

Taulukon solulla ltTDgt voi olla seuraavanlaisia ominaisuuksiaHUOM Jos ominaisuus on maumlaumlritelty TRlle niin TD ylittaumlauml sen

Ominaisuus Kuvaus Esimerkki

nowrap Estaumlauml rivinvaihdon lttd nowrapgt

rowspan=n Rivien maumlaumlrauml (yhdistaumlauml) lttd rowspan=2gt

colspan=n Solujen maumlaumlrauml (yhdistaumlauml) lttd colspan=2gt

71

943 Esimerkkejauml

Esimerkki 1

lttable width=300 cellpadding=2 border=1gt

lttrgt

lttd width=100gteka rivi ja eka solulttdgtlttd width=200gt

eka rivi ja toinen solulttdgt

lttrgt

lttrgt

lttd bgcolor=666666gt

toka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solu

jossa eniten tekstauml och samma paring svenskalttdgt

lttrgt

lttablegt

Esimerkki 2

Taumlssauml esimerkissauml yhdistetaumlaumln rivin kaksi solut yhdeksi soluksi kaumlyttaumlen tagia colspan (lttd colspan=2gt)

lttable width=300 border=1gtlttrgt

lttd width=100 valign=top height=100gt ensimmaumlinen solulttdgtlttdgttoinen solulttdgt

lttrgt

lttrgtlttd colspan=2gtkolmas solulttdgt

lttrgtlttablegt

72

95 Nauhoite 8 ja tehtaumlvauml 9

Nauhoite 8 iframe

kesto 0715

URL httpwwwviddlercomv3a7d45ef

Tehtaumlvauml 9

Tee taulukko jonka koko on 80 ja jossa on kolme riviauml ja kolme solua Solujen koot ovat 30 30 ja 40

69

942Tablen ominaisuudetTaulukkoa ja sen soluja sekauml rivejauml voidaan maumlaumlritellauml mm koon ja vaumlrin suhteen Table-tagilla voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee taulukon asemoinnin

lttable align=centergt

background=tiedostonimi Taustakuva taulukolle lttable background=koirajpggt

bgcolor=rrggbb Taustavaumlri taulukolle lttable bgcolor=00FF00gt

border=n Reunan paksuus ltTABLE border=0gt

bordercolor=rrggbb Reunan vaumlri ltTABLE border=1 borderco-lor=rrggbbgt

bordercolordark=rrggbb Reunan varjo ltTABLE border=1 borderco-lor=FFFFFF bordercolor-dark=rrggbbgt

cellpadding=n Solujen vaumlli (kuinka suuri)

ltTABLE cellpadding=1gt

cellspacing=n Solun reunan ja sisaumllloumln vaumlli

lttable cellspacing=2gt

valign=topbottom

Sisaumllloumln paikka solun sisaumlllauml

lttable cellspacing=2 valign=topgt

width=nnnn

Taulukon vaumlhimmaumlisle-veys pikseleinauml ja pro-sentteina

lttable width=23gt

70

TRn ja TDn ominaisuudet

Taulukon rivillauml ltTRgt ja sarakkeella ltTDgt voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee sisaumllloumln ase-moinnin solussa

lttd align=centergt

background=tiedostonimi Taustakuva solulle lttd background=koirajpggt

bgcolor=rrggbb Taustavaumlri solulle lttd bgcolor=00FF00gt

bordercolor=rrggbb Reunan vaumlri lttd bordercolor=rrggbbgt

bordercolordark=rrggbb Reunan varjo lttd bordercolor=FFFFFF bor-dercolordark=rrggbbgt

valign=topbottom

Sisaumllloumln paikka solun sisaumll-lauml

lttd valign=topgt

width=nnnn

Solun vaumlhimmaumlisleveys pikseleinauml ja prosentteina

lttd width=23gtlttd width=50gt

height=nnnn

Solun vaumlhimmaumliskorkeus pikseleinauml ja prosentteina

lttd height=23gtlttd height=100gt

TDn ominaisuudet

Taulukon solulla ltTDgt voi olla seuraavanlaisia ominaisuuksiaHUOM Jos ominaisuus on maumlaumlritelty TRlle niin TD ylittaumlauml sen

Ominaisuus Kuvaus Esimerkki

nowrap Estaumlauml rivinvaihdon lttd nowrapgt

rowspan=n Rivien maumlaumlrauml (yhdistaumlauml) lttd rowspan=2gt

colspan=n Solujen maumlaumlrauml (yhdistaumlauml) lttd colspan=2gt

71

943 Esimerkkejauml

Esimerkki 1

lttable width=300 cellpadding=2 border=1gt

lttrgt

lttd width=100gteka rivi ja eka solulttdgtlttd width=200gt

eka rivi ja toinen solulttdgt

lttrgt

lttrgt

lttd bgcolor=666666gt

toka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solu

jossa eniten tekstauml och samma paring svenskalttdgt

lttrgt

lttablegt

Esimerkki 2

Taumlssauml esimerkissauml yhdistetaumlaumln rivin kaksi solut yhdeksi soluksi kaumlyttaumlen tagia colspan (lttd colspan=2gt)

lttable width=300 border=1gtlttrgt

lttd width=100 valign=top height=100gt ensimmaumlinen solulttdgtlttdgttoinen solulttdgt

lttrgt

lttrgtlttd colspan=2gtkolmas solulttdgt

lttrgtlttablegt

72

95 Nauhoite 8 ja tehtaumlvauml 9

Nauhoite 8 iframe

kesto 0715

URL httpwwwviddlercomv3a7d45ef

Tehtaumlvauml 9

Tee taulukko jonka koko on 80 ja jossa on kolme riviauml ja kolme solua Solujen koot ovat 30 30 ja 40

70

TRn ja TDn ominaisuudet

Taulukon rivillauml ltTRgt ja sarakkeella ltTDgt voi olla seuraavanlaisia ominaisuuksia

Ominaisuus Kuvaus Esimerkki

align=leftcenterright

Maumlaumlrittelee sisaumllloumln ase-moinnin solussa

lttd align=centergt

background=tiedostonimi Taustakuva solulle lttd background=koirajpggt

bgcolor=rrggbb Taustavaumlri solulle lttd bgcolor=00FF00gt

bordercolor=rrggbb Reunan vaumlri lttd bordercolor=rrggbbgt

bordercolordark=rrggbb Reunan varjo lttd bordercolor=FFFFFF bor-dercolordark=rrggbbgt

valign=topbottom

Sisaumllloumln paikka solun sisaumll-lauml

lttd valign=topgt

width=nnnn

Solun vaumlhimmaumlisleveys pikseleinauml ja prosentteina

lttd width=23gtlttd width=50gt

height=nnnn

Solun vaumlhimmaumliskorkeus pikseleinauml ja prosentteina

lttd height=23gtlttd height=100gt

TDn ominaisuudet

Taulukon solulla ltTDgt voi olla seuraavanlaisia ominaisuuksiaHUOM Jos ominaisuus on maumlaumlritelty TRlle niin TD ylittaumlauml sen

Ominaisuus Kuvaus Esimerkki

nowrap Estaumlauml rivinvaihdon lttd nowrapgt

rowspan=n Rivien maumlaumlrauml (yhdistaumlauml) lttd rowspan=2gt

colspan=n Solujen maumlaumlrauml (yhdistaumlauml) lttd colspan=2gt

71

943 Esimerkkejauml

Esimerkki 1

lttable width=300 cellpadding=2 border=1gt

lttrgt

lttd width=100gteka rivi ja eka solulttdgtlttd width=200gt

eka rivi ja toinen solulttdgt

lttrgt

lttrgt

lttd bgcolor=666666gt

toka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solu

jossa eniten tekstauml och samma paring svenskalttdgt

lttrgt

lttablegt

Esimerkki 2

Taumlssauml esimerkissauml yhdistetaumlaumln rivin kaksi solut yhdeksi soluksi kaumlyttaumlen tagia colspan (lttd colspan=2gt)

lttable width=300 border=1gtlttrgt

lttd width=100 valign=top height=100gt ensimmaumlinen solulttdgtlttdgttoinen solulttdgt

lttrgt

lttrgtlttd colspan=2gtkolmas solulttdgt

lttrgtlttablegt

72

95 Nauhoite 8 ja tehtaumlvauml 9

Nauhoite 8 iframe

kesto 0715

URL httpwwwviddlercomv3a7d45ef

Tehtaumlvauml 9

Tee taulukko jonka koko on 80 ja jossa on kolme riviauml ja kolme solua Solujen koot ovat 30 30 ja 40

71

943 Esimerkkejauml

Esimerkki 1

lttable width=300 cellpadding=2 border=1gt

lttrgt

lttd width=100gteka rivi ja eka solulttdgtlttd width=200gt

eka rivi ja toinen solulttdgt

lttrgt

lttrgt

lttd bgcolor=666666gt

toka rivi ja eka solulttdgtlttdgttoka rivi ja toinen solu

jossa eniten tekstauml och samma paring svenskalttdgt

lttrgt

lttablegt

Esimerkki 2

Taumlssauml esimerkissauml yhdistetaumlaumln rivin kaksi solut yhdeksi soluksi kaumlyttaumlen tagia colspan (lttd colspan=2gt)

lttable width=300 border=1gtlttrgt

lttd width=100 valign=top height=100gt ensimmaumlinen solulttdgtlttdgttoinen solulttdgt

lttrgt

lttrgtlttd colspan=2gtkolmas solulttdgt

lttrgtlttablegt

72

95 Nauhoite 8 ja tehtaumlvauml 9

Nauhoite 8 iframe

kesto 0715

URL httpwwwviddlercomv3a7d45ef

Tehtaumlvauml 9

Tee taulukko jonka koko on 80 ja jossa on kolme riviauml ja kolme solua Solujen koot ovat 30 30 ja 40

72

95 Nauhoite 8 ja tehtaumlvauml 9

Nauhoite 8 iframe

kesto 0715

URL httpwwwviddlercomv3a7d45ef

Tehtaumlvauml 9

Tee taulukko jonka koko on 80 ja jossa on kolme riviauml ja kolme solua Solujen koot ovat 30 30 ja 40

73

10 MultimediaWeb-sivuille voidaan liittaumlauml tekstiauml linkkejauml ja kuvia - niiden lisaumlaumlmistauml on jo esitelty aiem-min Sivuille voidaan myoumls lisaumltauml liikkuvaa kuvaa sekauml aumlaumlntauml World Wide Webin alkuaikoi-na selaimet tukivat vain tekstiauml Myoumlhemmin tulivat selaimet jotka osasivat naumlyttaumlauml myoumls kuvia Nykyaumlaumln HTMLn avulla sivuille voidaan liittaumlauml myoumls multimediaa eli aumlaumlntauml ja liikku-vaa kuvaa HTMLn avulla sivuille voidaan lisaumltauml jopa peli

101 Multimedia - aumlaumlniAumlaumlntauml saa sivuille taustamusiikiksi mutta en suosittele sitauml Taumlssauml joitakin syitauml siihen miksi en suosittele

moni haluaa ainoastaan lukea sivuja ja katsella kuvia jotkut surffailevat oumliseen aikaan jolloin muu vaumlki nukkuu Yks kaks hiljaisuuden rik-

kookin yllaumlttaumlvauml taustamusiikki vaikka musiikki olisi kaunista lakkaa se soimasta kun henkilouml vaihtaa toiselle sivulle

Taustamusiikki ei kulje samalla tavalla mukana kuin taustavaumlri kaikki selaimet eivaumlt tue sivuille upotettua aumlaumlntauml

MIDI (lyhenne englannin kielen sanoista Musical Instrument Digital Interface) tarkoittaa musiikkisoittimien digitaalista liitaumlntaumlauml tai rajapintaa Se on tiedonsiirtojaumlrjestelmauml joka on suunniteltu vaumllittaumlmaumlaumln viestejauml saumlhkoumlisten musiikkilaitteiden vaumllillauml MIDI-tiedostot ovat hiljattain alkaneet tulla kaikkien kuluttajien ihmeteltaumlviksi uusimpien matkapuhelinten soitto-aumlaumlnien ominaisuudessa (Mikauml on MIDI)

Internet Explorerissa esim juuri MIDI-tiedoston saa taustaaumlaumlneksi alla olevalla komennolla

ltbgsound src=beethovenmid gt

Muita selaimia (esim Firefox) ajatellen seuraava tapa olisi parempi

ltembed src=beethovenmid autostart=false loop=false height=45

width=170gtltnoembedgtSorry selaimesi ei tue embed-tagialtnoembedgt

Autostart maumlaumlrittaumlauml sen kaumlynnistyykouml aumlaumlni automaattisesti vai ei Attribuutit width ja height maumlaumlrittelevaumlt ohjauspaneelin koon Lopuksi on vielauml koodia siltauml varalta jos kaumlyttaumljaumln selain ei tue tagia embed

MP3 on lyhenne joka tulee sanoista MPEG audio layer 3 MPEG on puolestaan tapa pakata aineistoa pieneen tilaan samalla kuitenkin menetetaumlaumln osa alkuperaumlisestauml aineistosta MP3 on laumlhes CD-tasoista aumlaumlntauml Kun alkuperaumlinen aumlaumlni on ollut CD-tasoista 44kHz naumlytetaajuu-della otettua 16-bittistauml stereoaumlaumlntauml on taumlstauml aumlaumlnestauml poistettu asioita joita ihmiskorva ei hel-posti erota Naumlin aumlaumlnitiedoston koko on saatu kahdenteentoista osaan alkuperaumlisestauml koosta MP3 on nykyisin erittaumlin suosittu formaatti aumlaumlnelle

Taustaaumlaumlni ei ole koskaan hyvauml vaihtoehto Parempi on laittaa musa linkin taakse

lta href=01_stone_coldmp3gtKuuntele baumlndiauml Autonomadicltagt

74

HUOM Musiikin kanssa pitaumlauml olla erityisen tarkkana Aumllauml laita sivuille musiikkia joka on tekijaumlnoikeuslakien alaista Yksi suositeltava vaihtoehto on etsiauml ja kaumlyttaumlauml musiikkia joka on julkaistu Creative Commons -lisenssillauml Esimerkiksi Jamendosta loumlytyy myoumls Creative Commons -lisensoitua musiikkia

Jos aumlaumlni halutaan upottaa sivulle seuraa ongelmia Osa selaimista kyselee saako aumlaumlnitiedos-ton soittaa Toinen ongelma liittyy siihen ettauml Firefox suosii koodia embed ja IE koodia ob-ject Siksi olisikin tehtaumlvauml kuten alla eli huomioi kaiken myoumls sen ettei aumlaumlntauml kuulu lainkaan

ltobject id=mediaPlayer width=0 height=0 classid=CLSID22d6f312-b0f6-11d0-94ab-0080c74c7e95 code-base=httpactivexmicrosoftcomactivexcontrolsmplayerennsmp2infcabVersion=5152701 standby=Loading Microsoft Windows Media Player compo-nents type=applicationx-oleobject uiMode=invisiblegt

ltparam name=fileName value=beethovenmidgtltparam name=animationatStart value=truegtltparam name=transparentatStart value=truegtltparam name=autoStart value=truegt

ltparam name=showControls value=falsegtltparam name=uiMode value=nonegtltparam name=loop value=truegt

ltobjectgt

ltembed type=applicationx-mplayer2 width=0 height=0 visible=falsepluginspage=httpmicrosoftcomwindowsmediaplayerendownloadid=mediaPlayer2 name=mediaPlayer displaysize=0 autosize=falsesrc=beethovenmidplayCount=9999 autostart=true designtimesp=5311

loop=truegtltembedgtltdiv style=font-size 65gtEikouml musiikki kuulu Lataa se lta href=beethovenmid3gttaumlstaumlltagtltdivgt

102 Multimedia liikkuvaa kuvaaMuistutan heti alkuun ettei HTML-sivuilla alun perin ollut tarkoitus esittaumlauml multimediaa En-tistauml parempien nettiyhteyksien vuoksi ovat videot kuitenkin lisaumlaumlntyneet netissauml Selaimet eivaumlt kuitenkaan tue videoita suoraan Videoitten katseluun tarvitaan erilliset katseluohjelmat tai pluginit kuten esim Windowsin Media Player QuickTime tai RealPlayer

Kun videon haluaa laittaa nettiin saataville on ensin huolehdittava videon koosta Kiinteaumlt nopeat nettiyhteydet ovat vielauml suhteellisen harvinaisia joten video olisi hyvauml saada mahdol-lisimman pieneen tilaan jotta sen kopioiminen ei kestaumlisi iaumlisyyksiauml Normaali kamerasta saatava ja editoitu DV-muotoinen video vie noin 36 megatavua sekunnissa mikauml on aivan liikaa jopa parhaille ADSL- tai kaapelimodeemiyhteyksille

Mikaumlli videota ei katsella selainikkunassa on linkki hyvauml vaihtoehto

lta href=videoavigtVideoltagt

75

1021 Upotetut videotiedostotTavallisille www-sivuille voidaan upottaa videoita Silloin ohjelma avautuu ikaumlaumln kuin www-sivun sisaumlaumln Taumlmauml on hyvauml tapa siinauml mielessauml ettei selaaja joudu pois sivuiltasi kesken kai-ken Taumlmauml tapa on yleinen esim suositussa YouTubessa Nykyaumlaumln onkin jaumlrkevintauml laittaa video YouTubeen ja upottaa se sieltauml

YouTubesta upottaminen on helppoa Valitset videon ja sitten painikkeen ldquoJaardquo

Sitten valitset upota

76

Lopuksi kopioit koodin sivuillesi ja video on toiminnassa

103 Javan liittaumlminen sivuilleJava Applet on Java-ohjelmointikielellauml tehty pieni ohjelma jota voidaan kaumlyttaumlauml www-sivuilla HTML-dokumentissa maumlaumlritellaumlaumln mikauml applet suoritetaan ja millaisena se suorite-taan (sijainti ja koko www-sivulla muut ominaisuudet) Java Applettien katsomiseen tarvi-taan Java-yhteensopiva selain Java-yhteensopiva selain tarkoittaa selainta jossa on joko Su-nin kehittaumlmauml erikseen Internetistauml ladattava Java Plug-in tai useimmissa selaimissa jo val-miina oleva Java-virtuaalikone Nykyaumlaumln appletteja kaumlytetaumlaumln www-sivuilla harvoin koska FLASH on syrjaumlyttaumlnyt ne ainakin osittain

HTML-kielessauml appletti ladataan ltAPPLETgtltAPPLETgt-tageilla

ltapplet code=lakeclass width=280 height=440gt

ltparam name=image value=kansanopistopelijpggt

ltparam name=href value=httpwwwibdprincecomjavashtmlgt

ltappletgt

Nykyaumlaumln on tosin suositeltavaa kaumlyttaumlauml object-tagia applet-tagin sijaan

ltOBJECT codetype = applicationjava

classid = javalakeclass

width=250 height=674gt

ltparam name = image value = petterijpggt

ltOBJECTgt

77

Varsinkin nuo vedenheijastusta matkivat efektit ovat olleet suosittuja Kyseiset appletit loumlydaumlt osoitteesta httpwwwibdprincecomjavashtml

104 Flashin liittaumlminen sivuilleYhtenauml vaihtoehtona Javan kaumlytoumllle on Macromedian Flash-tekniikka Flash-tekniikan perus-idea on sama kuin Javassa ainakin siinauml mielessauml ettauml HTML-dokumenttiin upotetaan toi-minnallisesti erillinen osa Flashin yhteydessauml kaumlytettaumlvauml dataformaatti on Shockwave Flash (SWF) Flash-ohjelma tekee automaattisesti myoumls Flash-toteutuksen sisaumlltaumlvaumln HTML-tiedoston jota on tarvittaessa helppo muutella omiin tarkoituksiin sopivaksi

78

Taumlltauml naumlyttaumlisi pelin liittaumlminen sivulle

ltHTMLgt

ltHEADgt

ltTITLEgtindexltTITLEgt

ltHEADgt

ltBODY bgcolor=FFFFFFgt

lt-- URLs used in the movie--gt

ltA HREF=rdquolumiukkoswfrdquogtltAgt lt-- text used in the movie--gt

lt--Polkka lumiukon --gtltOBJECT classid=clsidD27CDB6E-AE6D-11cf-96B8-

444553540000

code-

base=httpdownloadmacromediacompubshockwavecabsflashswflashcabv

ersion=5000

WIDTH=rdquo400rdquo HEIGHT=rdquo400rdquogt

ltPARAM NAME=movie VALUE=indexswfgt ltPARAM NAME=quality VALUE=rdquohighrdquogt

ltPARAM NAME=bgcolor VALUE=rdquoFFFFFFrdquogt ltEMBED src=indexswf quality=rdquohighrdquo

bgcolor=rdquoFFFFFFrdquo WIDTH=rdquo400rdquo HEIGHT=rdquo400rdquo TYPE=applicationx-shockwave-

flash

PLUGINSPAGE=httpwwwmacromediacomshockwavedownloadindexcgiP1_Prod

_Version=ShockwaveFlashgtltEMBEDgtltOBJECTgt

ltBODYgt

ltHTMLgt

79

11 Sivuston taittaminen HTMLn avullaSivuston taittaminen tarkoittaa sitauml ettauml kuvasta tehdaumlaumln HTML-koodia Toisin sanoen web-sivu on aluksi vain yksittaumlinen kuva joka puretaan vaumlhitellen paloiksi ja liitetaumlaumln HTML-koodiin

Laitetaan ensin HTMLn perusrunko kuntoon eli sivun kannalta kaikki pakolliset koodit Sa-malla laitetaan sivulle taustavaumlri

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

ltbodygt

ltbodygt

lthtmlgt

Seuraavassa vaiheessa sivulle luodaan perusrakenne taulukon avulla Laitetaan taulukko pai-koilleen taulukon leveys on 950 pikseliauml Lisaumlksi keskitetaumlaumln taulukko komennolla align Laitetaan samalla vielauml ylaumlpalkki paikoilleen eli se aloittaa uuden rivin (TR) ja tarvitsee yh-den uuden solun (TD)

80

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=960 align=centergt

lttrgt

lttd width=950 height=169gtltimg src=ylapalkkijpg alt=gtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

81

Seuraavaksi laitamme navigaation paikoilleen Tarvitsemme jaumllleen uuden rivin ja solun Navigaation koko on 950 x 31 pikseliauml

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=centergt

lttrgt

lttd width=950 height=169gtltimg src=ylapalkkijpg alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31gtltimg src=navigaatiojpg alt=gtlttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

Kuten kuvasta naumlkyy ylaumlpalkin ja navigaation vaumlliin jaumlauml rako Korjataan tilanne maumlaumlrittele-maumlllauml tablen koodi uusiksi

lttable width=950 align=center cellpadding=0 cellspacing=0 border=0gt

82

Sitten on jaumlljellauml enaumlauml alaosa joka tosin jaetaan kahteen palstaan Koska alhaalla on kaksi palstaa (solua) taumlytyy ylaumlpuolen TD eli solu maumlaumlritellauml kahden solun levyiseksi (colspan=2) Lisaumlksi laitamme kummallekin palstalle taustakuvan

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=center cellpadding=0 cellspacing=0

border=0gt

lttrgt

lttd width=950 height=169 colspan=2gtltimg src=ylapalkkijpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31 colspan=2gtltimg src=navigaatiojpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=586 background=vasenjpg gtSolu 1lttdgt

lttd width=364 background=oikeajpggt Solu 2lttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

83

Sivu naumlyttaumlauml vielauml hieman oudolta koska tekstiauml on niin vaumlhaumln Siksi laitamme sinne loremipsum tekstiauml jotta sivu alkaisi naumlyttaumlauml siltauml kuten alkuperaumlisessauml kuvassa

80

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=960 align=centergt

lttrgt

lttd width=950 height=169gtltimg src=ylapalkkijpg alt=gtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

81

Seuraavaksi laitamme navigaation paikoilleen Tarvitsemme jaumllleen uuden rivin ja solun Navigaation koko on 950 x 31 pikseliauml

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=centergt

lttrgt

lttd width=950 height=169gtltimg src=ylapalkkijpg alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31gtltimg src=navigaatiojpg alt=gtlttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

Kuten kuvasta naumlkyy ylaumlpalkin ja navigaation vaumlliin jaumlauml rako Korjataan tilanne maumlaumlrittele-maumlllauml tablen koodi uusiksi

lttable width=950 align=center cellpadding=0 cellspacing=0 border=0gt

82

Sitten on jaumlljellauml enaumlauml alaosa joka tosin jaetaan kahteen palstaan Koska alhaalla on kaksi palstaa (solua) taumlytyy ylaumlpuolen TD eli solu maumlaumlritellauml kahden solun levyiseksi (colspan=2) Lisaumlksi laitamme kummallekin palstalle taustakuvan

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=center cellpadding=0 cellspacing=0

border=0gt

lttrgt

lttd width=950 height=169 colspan=2gtltimg src=ylapalkkijpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31 colspan=2gtltimg src=navigaatiojpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=586 background=vasenjpg gtSolu 1lttdgt

lttd width=364 background=oikeajpggt Solu 2lttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

83

Sivu naumlyttaumlauml vielauml hieman oudolta koska tekstiauml on niin vaumlhaumln Siksi laitamme sinne loremipsum tekstiauml jotta sivu alkaisi naumlyttaumlauml siltauml kuten alkuperaumlisessauml kuvassa

81

Seuraavaksi laitamme navigaation paikoilleen Tarvitsemme jaumllleen uuden rivin ja solun Navigaation koko on 950 x 31 pikseliauml

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=centergt

lttrgt

lttd width=950 height=169gtltimg src=ylapalkkijpg alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31gtltimg src=navigaatiojpg alt=gtlttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

Kuten kuvasta naumlkyy ylaumlpalkin ja navigaation vaumlliin jaumlauml rako Korjataan tilanne maumlaumlrittele-maumlllauml tablen koodi uusiksi

lttable width=950 align=center cellpadding=0 cellspacing=0 border=0gt

82

Sitten on jaumlljellauml enaumlauml alaosa joka tosin jaetaan kahteen palstaan Koska alhaalla on kaksi palstaa (solua) taumlytyy ylaumlpuolen TD eli solu maumlaumlritellauml kahden solun levyiseksi (colspan=2) Lisaumlksi laitamme kummallekin palstalle taustakuvan

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=center cellpadding=0 cellspacing=0

border=0gt

lttrgt

lttd width=950 height=169 colspan=2gtltimg src=ylapalkkijpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31 colspan=2gtltimg src=navigaatiojpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=586 background=vasenjpg gtSolu 1lttdgt

lttd width=364 background=oikeajpggt Solu 2lttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

83

Sivu naumlyttaumlauml vielauml hieman oudolta koska tekstiauml on niin vaumlhaumln Siksi laitamme sinne loremipsum tekstiauml jotta sivu alkaisi naumlyttaumlauml siltauml kuten alkuperaumlisessauml kuvassa

82

Sitten on jaumlljellauml enaumlauml alaosa joka tosin jaetaan kahteen palstaan Koska alhaalla on kaksi palstaa (solua) taumlytyy ylaumlpuolen TD eli solu maumlaumlritellauml kahden solun levyiseksi (colspan=2) Lisaumlksi laitamme kummallekin palstalle taustakuvan

lthtmlgt

ltheadgt

lttitlegtHC Crusaderslttitlegt

ltheadgt

ltbody bgcolor=d3cbe0gt

lttable width=950 align=center cellpadding=0 cellspacing=0

border=0gt

lttrgt

lttd width=950 height=169 colspan=2gtltimg src=ylapalkkijpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=950 height=31 colspan=2gtltimg src=navigaatiojpg

alt=gtlttdgt

lttrgt

lttrgt

lttd width=586 background=vasenjpg gtSolu 1lttdgt

lttd width=364 background=oikeajpggt Solu 2lttdgt

lttrgt

lttablegt

ltbodygt

ltbodygt

lthtmlgt

83

Sivu naumlyttaumlauml vielauml hieman oudolta koska tekstiauml on niin vaumlhaumln Siksi laitamme sinne loremipsum tekstiauml jotta sivu alkaisi naumlyttaumlauml siltauml kuten alkuperaumlisessauml kuvassa

83

Sivu naumlyttaumlauml vielauml hieman oudolta koska tekstiauml on niin vaumlhaumln Siksi laitamme sinne loremipsum tekstiauml jotta sivu alkaisi naumlyttaumlauml siltauml kuten alkuperaumlisessauml kuvassa

84

Taumlssauml vaiheessa tulee ongelma koska teksti ei ala ylaumlreunasta Siksi laitamme ettauml TD on muotoa valign=rdquotoprdquo

lttd width=586 background=vasenjpg valign=topgt

lttd width=586 background=vasenjpg valign=topgt

Nyt sivu alkaa olla kuosissa mutta vielauml on sellainen ongelma ettauml tausta alkaa uudestaan -katso alla olevasta kuvasta vasen alareuna jossa kiekko uudestaan esillauml

Tuo ongelma johtuu siitauml ettauml HTMLssauml kuva toistuu eikauml toistamista voi estaumlauml HTMLn avulla Taumlhaumln ongelmaan on kaksi ratkaisua Ensimmaumlinen on se ettauml solun koko on sama kuin taustakuvan koko Silloin solun korkeus olisi 800 pikseliauml Taumlmaumln ratkaisun huono puoli on se ettei sivu voi olla pidempi kuin mihin se on maumlaumlritelty Toinen ratkaisu edellyttaumlauml CSSn ottamista apuun Silloin voimme estaumlauml taustan toistumisen Koodi kuten alla

lttd width=586 background=vasenjpg valign=top

style=background-repeatno-repeatgt

Tosin sitten on uusi ongelma koska nyt alareuna ikaumlaumln kuin loppuu kesken

85

Taumlmaumln korjaamme sillauml tavoin ettauml maumlaumlrittelemme tablen taustavaumlriksi valkoisen

lttable bgcolor=ffffff width=950 align=center cellpadding=0

cellspacing=0 border=0gt

86

Lopuksi tehdaumlaumln vielauml navigaatio niin ensimmaumlinen sivu on valmis Aiemmin laitoimme na-vigaation paikoilleen mutta sen ongelmana on se ettei kuvan paumlaumllle voi kirjoittaa Siksi muu-tamme navigaation taustakuvan taulukon solun taustakuvaksi

lttd width=950 height=169 colspan=2 background=navigaatiojpggtlttdgt

Nyt sen paumlaumllle voi kirjoittaa ja laitamme sinne linkit paikoilleen Navigaatio kuten alla

87

lttd width=950 height=31 colspan=2 background=navigaatiojpggt

lta href=gtEtusivultagt

lta href=gtHistorialtagt

lta href=gtInfoltagt

lta href=gtTukijatltagt

lta href=gtVieraskirjaltagt

lta href=gtJoukkueltagt

lta href=gtKuvagallerialtagt

lttdgt

Navigaatio alkaa liian reunasta joten siirraumlmme sitauml oikealle nbsp komennolla Kirjoitamme sinne koodin niin monta kertaa ettauml navigaatio menee oikeaan paikkaan

ampnbspampnbspampnbspampnbspampnbspampnbsp

88

Siistitaumlaumln linkkejauml vielauml hieman CSSn avulla

lta href= style=text-decorationnonecolorblackgtEtusivultagt

lta href= style=text-decorationnonecolorblackgtHistorialtagt

lta href= style=text-decorationnonecolorblackgtInfoltagt

lta href= style=text-decorationnonecolorblackgtTukijatltagt

lta href= style=text-decorationnonecolorblackgtVieraskirjaltagt

lta href= style=text-decorationnonecolorblackgtJoukkueltagt

lta href= style=text-decorationnonecolorblackgtKuvagallerialtagt

89

Lopuksi korjataan se ongelma ettauml teksti alkaa liian reunasta Kaumlytaumlmme siihen tagia div

ltdiv style=padding 10pxgt

lth2gtVasen palstalth2gt

ltpgtLorem ipsum dolor sit amet consectetur adipiscing elit Cras eu est eu

elit porta sodales sit amet quis nisi Nam elementum lectus vitae turpis

facilisis consequat Cum sociis natoque penatibus et magnis dis parturient

montes nascetur ridiculus mus Nullam sed ullamcorper magna Aliquam sit

amet eros ac velit semper scelerisque Sed posuere consequat diam sed

imperdiet orci eleifend et Donec lectus orci euismod id rhoncus sed

molestie vitae nunc Proin felis diam dapibus vel gravida sit amet

eleifend quis augueltpgt

ltdivgt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

85

Taumlmaumln korjaamme sillauml tavoin ettauml maumlaumlrittelemme tablen taustavaumlriksi valkoisen

lttable bgcolor=ffffff width=950 align=center cellpadding=0

cellspacing=0 border=0gt

86

Lopuksi tehdaumlaumln vielauml navigaatio niin ensimmaumlinen sivu on valmis Aiemmin laitoimme na-vigaation paikoilleen mutta sen ongelmana on se ettei kuvan paumlaumllle voi kirjoittaa Siksi muu-tamme navigaation taustakuvan taulukon solun taustakuvaksi

lttd width=950 height=169 colspan=2 background=navigaatiojpggtlttdgt

Nyt sen paumlaumllle voi kirjoittaa ja laitamme sinne linkit paikoilleen Navigaatio kuten alla

87

lttd width=950 height=31 colspan=2 background=navigaatiojpggt

lta href=gtEtusivultagt

lta href=gtHistorialtagt

lta href=gtInfoltagt

lta href=gtTukijatltagt

lta href=gtVieraskirjaltagt

lta href=gtJoukkueltagt

lta href=gtKuvagallerialtagt

lttdgt

Navigaatio alkaa liian reunasta joten siirraumlmme sitauml oikealle nbsp komennolla Kirjoitamme sinne koodin niin monta kertaa ettauml navigaatio menee oikeaan paikkaan

ampnbspampnbspampnbspampnbspampnbspampnbsp

88

Siistitaumlaumln linkkejauml vielauml hieman CSSn avulla

lta href= style=text-decorationnonecolorblackgtEtusivultagt

lta href= style=text-decorationnonecolorblackgtHistorialtagt

lta href= style=text-decorationnonecolorblackgtInfoltagt

lta href= style=text-decorationnonecolorblackgtTukijatltagt

lta href= style=text-decorationnonecolorblackgtVieraskirjaltagt

lta href= style=text-decorationnonecolorblackgtJoukkueltagt

lta href= style=text-decorationnonecolorblackgtKuvagallerialtagt

89

Lopuksi korjataan se ongelma ettauml teksti alkaa liian reunasta Kaumlytaumlmme siihen tagia div

ltdiv style=padding 10pxgt

lth2gtVasen palstalth2gt

ltpgtLorem ipsum dolor sit amet consectetur adipiscing elit Cras eu est eu

elit porta sodales sit amet quis nisi Nam elementum lectus vitae turpis

facilisis consequat Cum sociis natoque penatibus et magnis dis parturient

montes nascetur ridiculus mus Nullam sed ullamcorper magna Aliquam sit

amet eros ac velit semper scelerisque Sed posuere consequat diam sed

imperdiet orci eleifend et Donec lectus orci euismod id rhoncus sed

molestie vitae nunc Proin felis diam dapibus vel gravida sit amet

eleifend quis augueltpgt

ltdivgt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

86

Lopuksi tehdaumlaumln vielauml navigaatio niin ensimmaumlinen sivu on valmis Aiemmin laitoimme na-vigaation paikoilleen mutta sen ongelmana on se ettei kuvan paumlaumllle voi kirjoittaa Siksi muu-tamme navigaation taustakuvan taulukon solun taustakuvaksi

lttd width=950 height=169 colspan=2 background=navigaatiojpggtlttdgt

Nyt sen paumlaumllle voi kirjoittaa ja laitamme sinne linkit paikoilleen Navigaatio kuten alla

87

lttd width=950 height=31 colspan=2 background=navigaatiojpggt

lta href=gtEtusivultagt

lta href=gtHistorialtagt

lta href=gtInfoltagt

lta href=gtTukijatltagt

lta href=gtVieraskirjaltagt

lta href=gtJoukkueltagt

lta href=gtKuvagallerialtagt

lttdgt

Navigaatio alkaa liian reunasta joten siirraumlmme sitauml oikealle nbsp komennolla Kirjoitamme sinne koodin niin monta kertaa ettauml navigaatio menee oikeaan paikkaan

ampnbspampnbspampnbspampnbspampnbspampnbsp

88

Siistitaumlaumln linkkejauml vielauml hieman CSSn avulla

lta href= style=text-decorationnonecolorblackgtEtusivultagt

lta href= style=text-decorationnonecolorblackgtHistorialtagt

lta href= style=text-decorationnonecolorblackgtInfoltagt

lta href= style=text-decorationnonecolorblackgtTukijatltagt

lta href= style=text-decorationnonecolorblackgtVieraskirjaltagt

lta href= style=text-decorationnonecolorblackgtJoukkueltagt

lta href= style=text-decorationnonecolorblackgtKuvagallerialtagt

89

Lopuksi korjataan se ongelma ettauml teksti alkaa liian reunasta Kaumlytaumlmme siihen tagia div

ltdiv style=padding 10pxgt

lth2gtVasen palstalth2gt

ltpgtLorem ipsum dolor sit amet consectetur adipiscing elit Cras eu est eu

elit porta sodales sit amet quis nisi Nam elementum lectus vitae turpis

facilisis consequat Cum sociis natoque penatibus et magnis dis parturient

montes nascetur ridiculus mus Nullam sed ullamcorper magna Aliquam sit

amet eros ac velit semper scelerisque Sed posuere consequat diam sed

imperdiet orci eleifend et Donec lectus orci euismod id rhoncus sed

molestie vitae nunc Proin felis diam dapibus vel gravida sit amet

eleifend quis augueltpgt

ltdivgt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

87

lttd width=950 height=31 colspan=2 background=navigaatiojpggt

lta href=gtEtusivultagt

lta href=gtHistorialtagt

lta href=gtInfoltagt

lta href=gtTukijatltagt

lta href=gtVieraskirjaltagt

lta href=gtJoukkueltagt

lta href=gtKuvagallerialtagt

lttdgt

Navigaatio alkaa liian reunasta joten siirraumlmme sitauml oikealle nbsp komennolla Kirjoitamme sinne koodin niin monta kertaa ettauml navigaatio menee oikeaan paikkaan

ampnbspampnbspampnbspampnbspampnbspampnbsp

88

Siistitaumlaumln linkkejauml vielauml hieman CSSn avulla

lta href= style=text-decorationnonecolorblackgtEtusivultagt

lta href= style=text-decorationnonecolorblackgtHistorialtagt

lta href= style=text-decorationnonecolorblackgtInfoltagt

lta href= style=text-decorationnonecolorblackgtTukijatltagt

lta href= style=text-decorationnonecolorblackgtVieraskirjaltagt

lta href= style=text-decorationnonecolorblackgtJoukkueltagt

lta href= style=text-decorationnonecolorblackgtKuvagallerialtagt

89

Lopuksi korjataan se ongelma ettauml teksti alkaa liian reunasta Kaumlytaumlmme siihen tagia div

ltdiv style=padding 10pxgt

lth2gtVasen palstalth2gt

ltpgtLorem ipsum dolor sit amet consectetur adipiscing elit Cras eu est eu

elit porta sodales sit amet quis nisi Nam elementum lectus vitae turpis

facilisis consequat Cum sociis natoque penatibus et magnis dis parturient

montes nascetur ridiculus mus Nullam sed ullamcorper magna Aliquam sit

amet eros ac velit semper scelerisque Sed posuere consequat diam sed

imperdiet orci eleifend et Donec lectus orci euismod id rhoncus sed

molestie vitae nunc Proin felis diam dapibus vel gravida sit amet

eleifend quis augueltpgt

ltdivgt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

88

Siistitaumlaumln linkkejauml vielauml hieman CSSn avulla

lta href= style=text-decorationnonecolorblackgtEtusivultagt

lta href= style=text-decorationnonecolorblackgtHistorialtagt

lta href= style=text-decorationnonecolorblackgtInfoltagt

lta href= style=text-decorationnonecolorblackgtTukijatltagt

lta href= style=text-decorationnonecolorblackgtVieraskirjaltagt

lta href= style=text-decorationnonecolorblackgtJoukkueltagt

lta href= style=text-decorationnonecolorblackgtKuvagallerialtagt

89

Lopuksi korjataan se ongelma ettauml teksti alkaa liian reunasta Kaumlytaumlmme siihen tagia div

ltdiv style=padding 10pxgt

lth2gtVasen palstalth2gt

ltpgtLorem ipsum dolor sit amet consectetur adipiscing elit Cras eu est eu

elit porta sodales sit amet quis nisi Nam elementum lectus vitae turpis

facilisis consequat Cum sociis natoque penatibus et magnis dis parturient

montes nascetur ridiculus mus Nullam sed ullamcorper magna Aliquam sit

amet eros ac velit semper scelerisque Sed posuere consequat diam sed

imperdiet orci eleifend et Donec lectus orci euismod id rhoncus sed

molestie vitae nunc Proin felis diam dapibus vel gravida sit amet

eleifend quis augueltpgt

ltdivgt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

89

Lopuksi korjataan se ongelma ettauml teksti alkaa liian reunasta Kaumlytaumlmme siihen tagia div

ltdiv style=padding 10pxgt

lth2gtVasen palstalth2gt

ltpgtLorem ipsum dolor sit amet consectetur adipiscing elit Cras eu est eu

elit porta sodales sit amet quis nisi Nam elementum lectus vitae turpis

facilisis consequat Cum sociis natoque penatibus et magnis dis parturient

montes nascetur ridiculus mus Nullam sed ullamcorper magna Aliquam sit

amet eros ac velit semper scelerisque Sed posuere consequat diam sed

imperdiet orci eleifend et Donec lectus orci euismod id rhoncus sed

molestie vitae nunc Proin felis diam dapibus vel gravida sit amet

eleifend quis augueltpgt

ltdivgt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

90

Teemme saman myoumls oikealle palstalle jolloin ensimmaumlinen sivu on valmis

Mikaumlli haluat tarkastella tehtyauml sivua tarkemmin voit tallentaa esimerkin omalle koneellesizip-pakettina

Loppuosa sivuston tekemisestauml on sitauml ettauml kopioidaan sivupohja ja nimetaumlaumln se Lopuksi lai-tetaan navigaation linkitys paikoilleen Ensimmaumlinen sivu voi olla nimeltaumlaumln indexhtm (kan-sion oletussivu) toinen sivu voisi olla nimeltaumlaumln historiahtm ja kolmas infohtm Valikko olisi silloin seuraavanlainen

lta href=indexhtm style=text-decorationnonecolorblackgtEtusivultagtlta href=historiahtm style=text-decorationnonecolorblackgtHistorialtagtlta href=infohtm style=text-decorationnonecolorblackgtInfoltagt

91

111 Nauhoite 9 ja tehtaumlvauml 10Nauhoite 9 Taulukkotaitto

kesto 4324

URL httpwwwviddlercomv9a10bf73

Tehtaumlvauml 10Tee kuvista yksi taulukkotaitettu HTML-sivu jotta se olisi mahdollisimman paljon samankal-tainen kuin alla olevassa kuvassa Kaumlytauml CSSaumlauml ainoastaan linkkien alleviivauksen poistoon ja siihen ettauml palstoille tulee tyhjaumlauml tilaa

92

LaumlhteetIT Plus (2001) Oikea tyoumlkalu HTML IT Plus(2) 89Mikauml on MIDI [Online httpwwwhenrinnetmusiikkitekniikkamidi] Luettu 2112007WYSIWYG Wikipedia[Online httpfiwikipediaorgwikiWYSIWYG] Luettu 1422007

Materiaalia tehdessauml on viitemateriaalina kaumlytetty myoumls seuraavia web-sivustoja

HTML Tutorial httpwwwtizagcomhtmlThtmlhrphpHTML Tutorial httpwwww3schoolscomhtmlJava-ohjelmoinnin perusteet httpoppimateriaalitinternetixfifiavoimet6tekniikkatalousjavaindex