.
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