PEKKA TANSKA Oma sivu Internetiin Internetiss„ voit helposti muuttua aktiiviseksi osaksi maailmanverkkoa. WWW-kotisivu voi toimia tienristeyksen„, josta p„„set hypp„„m„„n itse„si kiinnostaviin verkkoavaruuden osiin. Voit tehd„ n„ytt„v„n esittelyn itsest„si muille internauteille, omistaa sivun lempib„ndillesi, kerhollesi, harrastuksellesi, vitseillesi... HTML-kielen ja editorien avulla voit vallata oman nurkan Internetist„ helposti ja hauskasti. Internet sai alkunsa 60-luvun lopulla, kun Yhdysvaltain puolustusministeri”n tietokoneverkko haluttiin kytke„ osaksi suurempaa kokonaisuutta. Aluksi mukaan l„hti useita yliopistoja, joiden ansiosta Internetist„ muodostui ilmainen ja laajalle levinnyt palveluntarjoaja. Vuosien saatossa sen tarjoamien palveluiden m„„r„ on kasvanut jatkuvasti. World-Wide Web ( WWW tai W3 ) on palveluista uusin. Se tarjoaa mahdollisuuden selailla ymp„ri maapalloa olevia dokumentteja graafisen k„ytt”liittym„n kautta. Dokumenteissa on tekstin lomassa linkkej„, valintasanoja, jotka hiiren napin painalluksella ohjaavat k„ytt„j„n eteenp„in, dokumentista toiseen. World-Wide Web WWW:n perusideana on tarjota helppok„ytt”inen mahdollisuus tutustua Internetiin. Samalla se on my”s vaihtoehto usein tyls„ksi mielletylle merkkipohjaiselle palvelulle. Useita Internetin vanhoja palveluita pystyt„„n k„ytt„m„„n WWW:n kautta, mik„ on yksi lis„syy World-Wide Webin k„ytt„j„m„„r„n r„j„hdysm„iseen kasvuvauhtiin. Palvelun tuoreus ja nopea kasvu kuitenkin rajoittavat sen k„ytt”„, ja laitteistojen kuormitus sek„ uusien ohjelmien bugisuus v„hent„v„t hieman innostusta. Kuvilla ja „„nill„ el„v”itetyt dokumentit tosin tarjoavat hyv„n syyn kest„„ v„lill„ oikuttelevia ohjelmistoja. Kotisivun teko Hyperdokumenttien tekoon on m„„ritelty oma HTML-muotoilukieli. Teksti kirjoitetaan normaalisti ja erilaiset muotoilukomennot ilmoitetaan koodeina ( Tag ), jotka sijaitsevat suurempi- ja pienempi kuin merkkien v„liss„. Koodit ovat ohjeita selailuohjelmalle: niiden avulla kuvataan, milt„ dokumentti n„ytt„„ World Wide Webiss„. Koodien avulla m„„ritell„„n erilaisia muotoseikkoja, kuten otsikot, rivinvaihdot ja listamuodossa esitett„v„t dokumentin osat. Jotkut koodit toimivat yksin„„n, kun taas tietyn alueen rajaavien koodien loppuminen ilmoitetaan aloituskoodilla, jonka edess„ on jakomerkki: <\<>Koodi<\>> T„m„ alue on rajattu. <\<>/Koodi<\>> HTML-dokumenteissa on tunnisteena .html-p„„te, joka PC-koneissa lyhenee muotoon .htm. K„yt”ss„ on 8-bittinen ISO Latin 1-merkist”. Jos ei ole varma k„ytt„mist„„n skandeista, „„kk”set on hyv„ esitt„„ erikoiskomennoilla, jotka alkavat &-merkill„. Varattuja merkkej„ on HTML:ss„ kolme kappaletta: <\<> , <\>> sek„ &, joten jos n„it„ merkkej„ haluaa k„ytt„„ WWW-sivullaan, ne pit„„ esitt„„ erikoiskomentojen avulla (katso oheinen taulukko). Dokumentin peruselementit HTML-dokumentti aloitetaan aina <\<>HTML<\>>-koodilla ja lopetetaan <\<>/HTML<\>>-koodiin. Itse teksti jakaantuu aina kahteen osaan, jotka ovat head ja body. Head-osiossa ilmoitetaan dokumentin nimi, sek„ mahdollisesti muita tarpeellisia tietoja tekstist„, kuten tekij„ ja p„iv„ys. Body-osassa sijaitsee itse dokumentti, johon kirjoitetaan tekstit, sijoitetaan kuvat ja tehd„„n linkit. Pieni kotisivu: <\<>HTML<\>> <\<>HEAD<\>> <\<>TITLE<\>> T„m„ on kotisivun nimi <\<>/TITLE<\>> <\<>/HEAD<\>> <\<>BODY<\>> T„m„ on itse dokumentti. <\<>/BODY<\>> <\<>/HTML<\>> Otsikot ja rivitys Otsikoiden m„„ritt„miseen k„ytet„„n <\<>Hx<\>>-koodia, miss„ x on numero v„lilt„ yksi ja kuusi. Tuo numero kuvaa otsikon kokoa, ykk”sen ollessa suurin: <\<>H1<\>> T„m„ on suurin koko <\<>/H1<\>> <\<>H6<\>> ja t„m„ vastaavasti pienin.<\<>/H6<\>> Otsikoiden j„lkeen tulee aina tyhj„ rivi. Selailuohjelmat eiv„t tunnista tavallista rivinvaihtoa, joten <\<>BR<\>>-koodia tulee k„ytt„„, jos tekstin halutaan jatkuvan uudelta rivilt„. Kappaleen loppuun kannattaa yleens„ sijoittaa tyhj„ rivi, jolloin k„ytet„„n <\<>P<\>>-koodia, joka my”s katkaisee rivin. Tekstin osat voi erottaa toisistaan pitk„ll„ vaakaviivalla eli linjalla. Viiva saadaan aikaiseksi <\<>HR<\>>-tagilla. Korostukset Tekstin osia voi el„v”itt„„ merkkien korostuksella tai listoilla. Lihavointi toteutetaan HTML:ss„ koodilla <\<>B<\>>. Kursiiviteksti„kin voi k„ytt„„ k„tev„sti hyv„kseen, jolloin k„yt”ss„ on <\<>I<\>>-tagi. <\<>B<\>> T„m„ teksti n„kyy selailuohjelmassa lihavoituna.<\<>/B<\>> <\<>I<\>>ja t„m„ taas n„kyy kursiivilla kirjoitettuna.<\<>/I<\>> Huomioitavaa on etteiv„t kaikki selailuohjelmat pysty n„ytt„m„„n teksti„ eri muodoissa. N„iss„ tapauksissa kaikki merkit n„kyv„t aivan normaaleina. Listojen muotoilu on yksi HTML:n vahvimmista puolista. Listojen teko on yksinkertaista, ja katseluohjelmat m„„rittelev„t niihin sisennykset automaattisesti, ilman turhia kommervenkkej„. Yleisimpi„ ovat j„rjest„m„t”n lista <\<>UL<\>> sek„ j„rjestetty lista <\<>OL<\>>. Listan alkamis-tagin j„lkeen jokainen listaan tuleva kohta esitell„„n sen alussa olevalla <\<>LI<\>>-koodilla. N„iden perusteella selailuohjelmat osaavat sisent„„ ja j„rjest„„ listan. J„rjest„m„tt”m„ss„ listassa jokaisen listatun elementin edess„ on ranskalainen viiva tai pallo, kun taas j„rjestetyss„ alkiot on numeroitu. <\<>OL<\>> <\<>LI<\>>T„m„ on ensimm„inen asia listalla. <\<>LI<\>>ja t„m„ on toinen. <\<>/OL<\>> Listoja sis„kk„in laittamalla saadaan aikaan hierarkisia rakenteita, joiden avulla esimerkiksi selkeiden hakemistojen rakentaminen on helppoa. Kuvat Teksti„ voi el„v”itt„„ kuvien „lykk„„ll„ k„yt”ll„. Kannattaa suunnitella hyvin tarkkaan, millaisia kuvia haluaa esitt„„ ja kuinka paljon niit„ k„ytt„„. Liian isojen kuvien lataaminen kest„„ kauan, jolloin kotisivun selailija saattaa kyll„sty„ ja l„hte„ muualle. Nyrkkis„„nt”n„ voi pit„„ ettei yli kaksikymment„ kilotavua vievi„ kuvia juuri kannata k„ytt„„. Jos kuvat ovat suuria, dokumentissa voidaan esitt„„ pieni kopio kuvasta. Pikkukuvaan luodaan sitten linkki, jota n„p„ytt„m„ll„ halukkaat saavat suuren kuvan n„ht„v„kseen. Selailuohjelmat osaavat l„hes poikkeuksetta n„ytt„„ GIF-formaatin kuvat, joten niiden k„ytt” on enemm„n kuin suositeltavaa. Kuvien sijoittaminen tapahtuu <\<>IMG SRC=URL<\>>-koodilla. URL (Uniform Resource Locator) ilmoittaa mist„ kuva tulee hakea ja on muotoa http://www.kone.fi/hakemistopolku/kuva.gif. Ensimm„isen„ ilmoitetaan palvelinkone, jonka per„ss„ hakemistopolku, jonka p„„st„ kuva l”ytyy. Jos kuva on samassa hakemistossa kuin kotisivu, palvelimen ja hakemistopolun voi j„tt„„ pois. Kuvan sijoittaminen tekstin suhteen voidaan suorittaa ALIGN-m„„reell„. Oletusarvona on Bottom, jolloin kuvan alalaita on tekstin tasalla. Mahdollisia muita arvoja ovat Top, jolloin teksti kulkee kuvan yl„reunan tasalla, sek„ Middle, teksti kuvan keskell„. Kaikki selailuohjelmat eiv„t kykene n„ytt„m„„n joitakin kuvaformaatteja, jotkut eiv„t n„yt„ kuvia ollenkaan. T„ss„ tapauksessa voi ALT-m„„reell„ ilmoittaa tekstin, joka n„ytet„„n kuvan sijasta. <\<>IMG SRC=http://www.mikrobitti.fi/home/omakuva.gif ALIGN=middle ALT=Omakuva<\>> Edellinen n„ytt„„ mikrobitti WWW-palvelimella home-hakemistossa olevan kuvan, jossa teksti on sidottu kuvan keskelle. Selailuohjelmassa n„kyy teksti "Omakuva", jos se ei kykene n„ytt„m„„n GIF-formaatissa olevia kuvia. Linkit WWW-dokumenttien todellinen vahvuus piilee niihin k„tketyiss„ linkeiss„. Linkki on kuva tai tekstinp„tk„, jota napauttamalla p„„see hypp„„m„„n toiseen dokumenttiin. Linkki merkit„„n koodilla <\<>A<\>>...<\<>/A<\>>. Alkumerkinn„ss„ m„„ritell„„n (HREF=) sen dokumentin sijaintipaikka, johon hyppy suoritetaan. Yleinen muoto sijaintipaikalle on seuraava viittaustapa://palvelinkone/hakemisto/tiedostonimi eli esimerkiksi http://www.mikrobitti.fi/kotisivu/mbnet.htm eli linkki kokonaisuudessaan voisi olla esimerkiksi seuraavanlainen <\<>A HREF=http://www.mikrobitti.fi/kotisivu/mbnet.htm<\>>MBnet on Suomen suurin purkki.<\<>/A<\>>. W3-dokumentissa tekstin "MBnet on..." tunnistaa napautettavissa olevaksi linkiksi siit„, ett„ sen v„ri poikkeaa muusta tekstist„ ja/tai se on alleviivattu. Linkin p„„tepiste voi sijaita miss„ tahansa koneessa vaikkapa Hong Kongissa ja haettava tiedosto voi sis„lt„„ teksti„, grafiikkaa, „„nt„, animaatiota, videota jne... Mik„li linkin osoittama dokumentti sijaitsee samalla koneella kuin kotisivukin, voidaan HREF-m„„rittelyst„ j„tt„„ niin haluttaessa pois viittaustapa ja palvelinkone. Linkkaamista voi harjoitella omalla koneella esimerkiksi seuraavasti: A. Tee kaksi dokumenttia: 1. T„m„ on dokumentti Yksi ! <\<>P<\>> <\<>A HREF=teksti2.htm<\>>T„st„ hyp„t„„n teksti kakkoseen!<\<>/A<\>> 2. T„m„ on dokumentti Kaksi! <\<>P<\>> <\<>A HREF=teksti1.htm<\>>T„st„ pompataan puolestaan ykk”seen<\<>/A<\>> B. Tallenna 1. nimell„ teksti2.htm ja tallenna 2. nimell„ teksti1.htm C. Tarkastele W3-selailijalla dokumenttia teksti2.htm D. Napauta teksti„ "T„st„ hyp„t„„n..." ja p„„set dokumenttiin teksti1.htm ja k„„nt„en... Linkit voivat osoittaa my”s samaan dokumenttiin, jota ollaan juuri selaamassa. Mik„li haluaa k„ytt„„ t„ll„isi„ viittauksia, niin dokumenttiin on m„„ritelt„v„ kohdekuvia tai -sanoja, jotka voivat toimia linkkien p„„tepistein„. Kotisivun sijoittaminen Kun kotisivu on valmis, sen voi useimmiten lis„t„ vaivatta World-Wide Webiin. Useimmat Internet-yhteydentarjoajat antavat yksityisk„ytt„jien tehd„ vapaasti kotihakemistoonsa HTML-dokumentteja. Esimerkiksi tutkimus- ja korkeakouluverkko Funetiin kuuluvissa laitoksissa WWW-sivun saa yleens„ tehd„ vapaasti. My”s muun muassa Eunetin, Compartin ja HPY:n yksityisen k„ytt„j„tunnuksen omistajat voivat tehd„ ilmaiseksi itselleen kotisivun. Tele puolestaan on varannut kotisivutiedostojen viem„n levytilan l„hinn„ yritysk„ytt„jille eli kotisivun tekeminen on Telell„ maksullista. Ennen kotisivun tekemist„ kannattaa tarkastaa tilanne ja lopulliset ohjeet omalta palvelun tarjoajalta. L„hes poikkeuksetta kotisivuun liittyviin kysymyksiin kannattaa l„hett„„ postia tunnukselle webmaster. Jos omistaa Unix-tunnuksen ja kotihakemiston, omaan kotisivuunsa voi viitata URL:lla: http://omakone.fi/omanimi/sivunnimi.html. T„ll”in tehd„„n kotihakemiston alle public_html-hakemisto, jonne sijoitetaan kotisivu, sek„ mahdollisesti paikallisesti linkitetyt tiedostot. Hakemistoon t„ytyy antaa suoritusoikeus kaikille, joka tapahtuu kotihakemistossa komennolla chmod a+x public_html. My”s kotisivuun sek„ siihen liittyviin muihin dokumentteihin tulee antaa lukuoikeus kaikille. Se tapahtuu public_html-hakemistossa unix-komennolla chmod a+r *. Lis„tietoja W3-sivuista ja html-kielest„ l”ytyy MBnetin Internet-alueelta. Hyv„ keino on menn„ MBnetin apajalle ja etsi„ eli kirjoittaa p„„tasolla ensin j 96 ja sitten z html. Skandien ja varattujen merkkien erikoiskomennot <\<> < <\>> > & & „ ä ˇ Ä ” ö ™ Ö † å ¸ Å Huomio puolipisteet lopussa. Sanastoa Katseluohjelma Web-browser. World-Wide Webiss„ olevien kotisivujen selailuun tehty ohjelma, esimerkiksi Mosaic. WWW-palvelin Kone, joka hoitaa hoitaa World-Wide Webi„ k„ytt„vien sovellusten toimintaa. Palvelinkone l„hett„„ halutut tiedostot selailuohjelmalle, joka pystyy ne sen j„lkeen esitt„m„„n k„ytt„j„lle. Hyperdokumentti Dokumentti, joka voi sis„lt„„ teksti„, kuvia, „„nt„ sek„ linkkej„ muihin vastaaviin dokumentteihin. HTML HyperText Markup Language. Hyperdokumenttien tekoon tarkoitettu muotoilukieli. URL Uniform Resource Locator. Paikannin, jolla ilmoitetaan palvelinkoneelle mit„ palvelua halutaan k„ytt„„ ja mist„ se l”ytyy. HTTP HyperText Transfer Protocol. Tiedonsiirtoprotokolla, joka on tarkoitettu hyperdokumenttien siirt„miseen. FTP File Transfer Protocol. Internetiss„ k„ytetty tiedonsiirtotapa. Gopher Tietojen etsimiseen tarkoitettu Internet-palvelu. Yleisimm„t tagit <\<>HTML<\>>.. <\<>/HTML<\>> N„iden v„liss„ sijaitsee HTML-dokumentti. <\<>HEAD<\>>...<\<>/HEAD<\>> Dokumenti head-osio <\<>TITLE<\>>...<\<>/TITLE<\>> Hyperdokumentin nimi <\<>BODY<\>>...<\<>/BODY<\>> Itse hyperdokumentti <\<>Hx<\>>... <\<>/Hx<\>> T„m„ on otsikko ( x v„lill„ 1-6 ) <\<>BR<\>> Rivinvaihtoa ilmaiseva koodi. <\<>P<\>> Kappaleen vaihdossa tulee my”s tyhj„ rivi. <\<>HR<\>> Tekee vaakasuoran viivan. <\<>B<\>>...<\<>/B<\>> N„iden v„liss„ teksti n„kyy lihavoituna. <\<>I<\>> ...<\<>/I<\>> Kursiiviteksti„ ilmaiseva koodi. <\<>UL<\>>...<\<>/UL<\>> J„rjest„m„t”n lista. <\<>OL<\>>...<\<>/OL<\>> Numeroitu lista. <\<>LI<\>> Ilmaisee seraavaksi tulevan listaan kuuluvan alkion. <\<>IMG SRC=URL<\>> Upottaa URL:ll„ osoitetun kuvan dokumenttiin. <\<>A NAME=nimi<\>>...<\<>/A<\>> Nime„„ tietyn tekstin kohdan. <\<>A HREF=#nimi<\>>...<\<>/A<\>> Luo linkin samassa dokumentissa olevaan nimettyyn kohtaan. <\<>A HREF=URL<\>>...<\<>/A<\>> Luo tekstiin linkin URL:n ilmoittamaan kohteeseen. MBnetist„ l”ytyvi„ HTML-ty”kaluja PC Windows HTML-editorit: HTMLASST.ZIP SOFTMETAL.ZIP HTMLED12.ZIP Word for Windows HTML-laajennukset: ANT_HTML.ZIP Word 6.0 CU_HTML.ZIP Word 2.0 ja 6.0 Amiga AmigaGuide dokumenttien k„„nt„j„ HTML:lle AG2HTML.LHA