Tee oma World Wide Web -kotisivusi

     Timo Kiravuo, kiravuo@nixu.fi
     Nixu oy

Shkpostiosoite kyntikortissa on vanha juttu. Nykyn pit olla
WWW-kotisivu, esim. http://www.nixu.fi/~kiravuo/.

Tss artikkelissa kerron miten sellainen tehdn. Kytnnss erilaisia
jrjestelmi ja paikallisia stj on paljon, arvioin tmn ohjeen purevan
n. 70% lukijakunnasta.

Edellytykset

WWW-kotisivun tekeminen on helppo juttu. Tarvitaan:

   * kyttjtunnus verkossa olevaan (Unix-)koneeseen
   * em. koneeseen WWW-palvelin ja oikeus tehd kotisivuja
   * Unixin perusteiden tutemus niden ohjeiden noudattamiseksi

WWW-palvelinohjelmiston asentaminen on yllpidon heini. Erilaisia ohjelmia
on saatavilla osoitteesta ftp://ftp.funet.fi/pub/networking/services/www/.

Palvelinohjelmistossa on mahdollistettava kyttjien kotisivut. Lisksi
palvelimelle on kerrottava mink nimiseen hakemistoon kyttj kotisivunsa
tekee, yleens kytss on "public_html"-niminen hakemisto kyttjn
kotihakemistossa.

Oma kotisivu

Kun meill on perusteltu syy olettaa ett em. asiat ovat kunnossa, voimme
kyd oman kotisivumme kimppuun. Ensin teemme hakemiston "public_html"
kotihakemistoomme. "public_html"-hakemistoon teemme suosikkieditorillamme
"index.html"-nimisen tiedoston, joka nytt vaikkapa seuraavalta:

<HTML><HEAD>
<TITLE>The Home Page of Harry Ham</TITLE>
</HEAD>
<BODY>
<H1>Harry Ham</H1>
</P>The One and Lonely<P>
</BODY>
</HTML>

Tmn jlkeen varmistamme koti- ja "public_html"-hakemistollemme
execute-oikeudet ja "index.html"-tiedostolle lukuoikeuden kaikille.

Unix-kskyin tm nyttisi seuraavalta

        cd
        mkdir public_html
        cd public_html
        emacs index.html
                editointia ja ulos Emacsista
        chmod a+x . ..
        chmod a+r index.html

Tm on triviaaliesimerkki, mutta jos tm toimii, niin voimme kehitt
systeemi eteenpin. Testaamme kotisivua antamalla jollekin
WWW-katseluohjelmalle URL:n "http://kone.firmamme.fi/~omatunnus/" (laita
thn kyttmsi koneen nimi ja oma kyttjtunnuksesi). Jos nemme sken
tekemmme kotisivun, kaikki on OK. Jos saamme virheilmoituksen, analysoimme
sen. Yleisi virhemahdollisuuksia ovat:

   * koneessa ei ole WWW-palvelinta
   * koneen nimi tai kyttjtunnuksemme on vrin kirjoitettu
   * kotihakemistoon, "public_html"-hakemistoon tai "index.html"-tiedostoon
     ei ole oikeuksia
   * WWW-palvelin ei tue kyttjien kotihakemistoja
   * jokin muu mtt

Jos "index.html" -tiedoston sisllss on virheit, pitisi tiedoston silti
nky jotenkin luettavassa muodossa.

HTML-kieli

Kun olemme jotenkin saaneet ensimmisen rpellyksemme esille ja nkslle,
voimme kehitt sit lis.

HTML (HyperText Markup Language) on yksinkertainen kieli WWW-sivujen
tekemiseen. Alla on tyypillinen HTML-kielinen WWW-kotisivu:

<HTML><HEAD>
<TITLE>The Home Page of Timo Kiravuo</TITLE>
</HEAD>
<BODY>
<H1>Timo Kiravuo</H1>
<H2>Yhteystiedot</H2>
<H3>Ty:</H3>
<P><A HREF="http://www.nixu.fi/">Nixu Oy</A><BR>
Pasilankatu 4 B<BR>00240 Helsinki</P>
<H3>Koti:</H3>
Lahnaruohontie 7 A 12<BR>
00200 Helsinki<BR>
<P>

<H2>Harrastukset</H2>
<UL>
<LI> <A HREF="gopher://gopher.tky.hut.fi/11/TKY/alayhdistykset/muut/TEEPAKKI/retkeily">Retkeily ja melonta</A>
<LI> <A HREF="http://www.tky.hut.fi/~teepakki/">Opiskelijapartio</A>
</UL>

<H3>Kirjoittamiani juttuja</H3>
<UL>
<LI><A HREF="http://www.nixu.fi/~kiravuo/etiketti/">News-etiketti</A></LI>
<LI><A HREF="http://www.nixu.fi/~kiravuo/funic.html">Nic.funet.fi:n kyttohje</A></LI>
</UL>
<HR>
<ADDRESS> Timo Kiravuo <kiravuo@nixu.fi></ADDRESS>
</BODY>
</HTML>

Tuo saattaa nytt varsin sekavalta, mutta HTML-kielen oppii varsin
nopeasti.

Alussa on <HTML>-tgi, joka rajaa koko dokumentin. Tarkkaavainen lukija
huomaa ett lopussa on sit vastaava </HTML>-tgi. Edelleenkin huomaamme
ett dokumentti jakaantuu <HEAD> ja <BODY>-osiin, joiden sisll kaikki muu
on.

Tm on ers HTML-kielen perusideoista, joka tarkemmin ottaen tulee
SGML-standardista (Standard Generalized Markup Language), jonka ideana on
ett tekstist kuvataan tekstin rakenne ja merkitys. Normaalistihan
tekstinksittelyohjelmissa kuvataan tekstin ulkoasua. WWW:n perusidea
kuitenkin on ett katseluohjelma saattaa olla millainen tahansa, yht hyvin
merkkipohjainen kuin graafinenkin. Eli HTML-kieless voi kertoa "thn
tulee otsikko" mutta ei "thn tulee 18 pisteen Helveticaa".

<TITLE>-tgi mrittelee sivun yllaidassa nkyvn otsikon, eli tekstin
otsikon.

<BODY>-osassa oleva <H1> kentt on puolestaan sivulla oleva iso otsikko.
Siis tysin eri asia kuin koko sivun otsikko.

Otsikoita on <H1>:st <H6>:een, <H1> on suurin ja <H6> pienin. Kuten
yleens kaikki WWW-tgit mys <Hx>-kentt tulee ptt vastaavalla
</Hx>-kentll. Tmn virheen tosin yleens huomaa varsin nopeasti, kun
katseluohjelma nytt koko sivun 24 pisteen fontilla.

Varsinainen teksti voidaan sulkea kappaleittain <P> ja </P>-tgien
(Paragraph) vliin, tst voi mys yleens luistaa ja kytt pelkk
<P>-alkutgi kappaleen lopussa, katseluohjelma pttelee mist on kyse.
Monessa muussakin kohdassa voi mys luistaa, esim. <HTML>, <HEAD> ja
<BODY>-tgit eivt yleens ole vlttmttmi, useimmat katseluohjelmat
osaavat nytt vaillinaistakin HTML-kielt oikein.

<BR>-tgi tarkoittaa kappaleen (<P>) sisll olevaa pakollista
rivinvaihtoa. Muuten tekstiss saa olla rivinvaihtoja mielin mrin,
nytettess ohjelma hylk ne ja muotoilee tekstin uudestaan oman maun
mukaan.

<A>-tgi on ankkuri. Ankkureihin voidaan laittaa mm. viittauksia muihin
WWW-dokumentteihin. Esim. <A HREF="http://www.firma.fi/foobar/">hublaa</A>
nytt tekstin "hublaa" yleens jotenkin korostettuna ja sit hiirell
klikattaessa pstn osoitteessa "http://www.firma.fi/foobar/" olevaan
dokumenttiin.

Harrastukseni olen ryhmitellyt listoiksi, <UL> on numeroimaton lista ja
<LI> on elementti listassa, nm nytetn yleens pienten pallukoiden
kanssa. <OL> olisi vastaavasti nuemroitu lista.

Lopussa on vaakasuora erotinviiva <HR> ja osoitekentt <ADDRESS>.
Osoitekentss olevan postiosoitteen olen erotellut < ja >-merkeill. Koska
samoja merkkej kytettn HTML-tgienkin erottamiseen, on kytettv < ja
> -koodauksia.

HTML-kieless on lis kskyj koko joukko. Esimerkiksi jos olisin saanut
jostain "public_html"-hakemistooni GIF-muotoisen kuvan itsestni, olisin
voinut liitt sen yllolevan tekstin joukkoon <IMG SRC="kuva.gif">
-mrittelyll.

Lis tietoa HTML-kielest ja koko WWW-jrjestelmst kannattaa hakea
URL:sta http://www.w3.org/.

---------------------------------------------------------------------------
Timo Kiravuo, <kiravuo@nixu.fi>
