Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Tee oma World Wide Web -kotisivusi

4 views
Skip to first unread message

Timo Kiravuo

unread,
Aug 1, 1998, 3:00:00 AM8/1/98
to

Sähköpostiosoite käyntikortissa on vanha juttu. Nykyään pitää olla
WWW-kotisivu, esim. http://www.nixu.fi/~kiravuo/.

Tässä artikkelissa kerron miten sellainen tehdään. Käytännössä
erilaisia järjestelmiä ja paikallisia säätöjä on paljon, arvioin tämän
ohjeen purevan n. 70% lukijakunnasta (vuoden 1995 -valuutassa,
käyttäjäkunta on muuttunut sittemmin).

Edellytykset

WWW-kotisivun tekeminen on helppo juttu. Tarvitaan:
* käyttäjätunnus verkossa olevaan (Unix-)koneeseen
* em. koneeseen WWW-palvelin ja oikeus tehdä kotisivuja
* Unixin perusteiden tutemus näiden ohjeiden noudattamiseksi

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

Palvelinohjelmistossa on mahdollistettava käyttäjien kotisivut.
Lisäksi palvelimelle on kerrottava minkä nimiseen hakemistoon käyttäjä
kotisivunsa tekee, yleensä käytössä on "public_html"-niminen hakemisto
käyttäjän kotihakemistossa.

Oma kotisivu

Kun meillä on perusteltu syy olettaa että em. asiat ovat kunnossa,
voimme käydä oman kotisivumme kimppuun. Ensin teemme hakemiston
"public_html" kotihakemistoomme. "public_html"-hakemistoon teemme
suosikkieditorillamme "index.html"-nimisen tiedoston, joka näyttää
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>

Tämän jälkeen varmistamme koti- ja "public_html"-hakemistollemme
execute-oikeudet ja "index.html"-tiedostolle lukuoikeuden kaikille.

Unix-käskyinä tämä näyttäisi seuraavalta

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

Tämä on triviaaliesimerkki, mutta jos tämä toimii, niin voimme
kehittää systeemiä eteenpäin. Testaamme kotisivua antamalla jollekin
WWW-katseluohjelmalle URL:n "http://kone.firmamme.fi/~omatunnus/"
(laita tähän käyttämäsi koneen nimi ja oma käyttäjätunnuksesi). Jos
näemme äsken tekemämme kotisivun, kaikki on OK. Jos saamme
virheilmoituksen, analysoimme sen. Yleisiä virhemahdollisuuksia ovat:
* koneessa ei ole WWW-palvelinta
* koneen nimi tai käyttäjätunnuksemme on väärin kirjoitettu
* kotihakemistoon, "public_html"-hakemistoon tai
"index.html"-tiedostoon ei ole oikeuksia
* WWW-palvelin ei tue käyttäjien kotihakemistoja
* jokin muu mättää

Jos "index.html" -tiedoston sisällössä on virheitä, pitäisi tiedoston
silti näkyä jotenkin luettavassa muodossa.

HTML-kieli

Kun olemme jotenkin saaneet ensimmäisen räpellyksemme esille ja
näkösälle, 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/re
tkeily">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 käyttöohje<
/A></LI>
</UL>
<HR>
<ADDRESS> Timo Kiravuo &lt;kir...@nixu.fi&gt;</ADDRESS>
</BODY>
</HTML>

Tuo saattaa näyttää varsin sekavalta, mutta HTML-kielen oppii varsin
nopeasti.

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

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

<TITLE>-tägi määrittelee sivun ylälaidassa näkyvän otsikon, eli koko
dokumentin otsikon tai nimen.

<BODY>-osassa oleva <H1> kenttä on puolestaan dokumentissa oleva iso
otsikko. Siis täysin eri asia kuin koko dokumentin otsikko.

Otsikoita on <H1>:stä <H6>:een, <H1> on suurin ja <H6> pienin. Kuten
yleensä kaikki WWW-tägit myös <Hx>-kentät tulee päättää vastaavalla
</Hx>-kentällä. Tämän virheen tosin yleensä huomaa varsin nopeasti,
kun katseluohjelma näyttää koko sivun 24 pisteen fontilla.

Varsinainen teksti voidaan sulkea kappaleittain <P> ja </P>-tägien
(Paragraph) väliin, tästä voi myös yleensä luistaa ja käyttää pelkkää
<P>-alkutägiä kappaleen lopussa, katseluohjelma päättelee mistä on
kyse. Monessa muussakin kohdassa voi myös luistaa, esim. <HTML>,
<HEAD> ja <BODY>-tägit eivät yleensä ole välttämättömiä, useimmat
katseluohjelmat osaavat näyttää vaillinaistakin HTML-kieltä oikein.

<BR>-tägi tarkoittaa kappaleen (<P>) sisällä olevaa pakollista
rivinvaihtoa. Muuten tekstissä saa olla rivinvaihtoja mielin määrin,
näytettäessä ohjelma hylkää ne ja muotoilee tekstin uudestaan oman
maun mukaan.

<A>-tägi on ankkuri. Ankkureihin voidaan laittaa mm. viittauksia
muihin WWW-dokumentteihin. Esim. <A
HREF="http://www.firma.fi/foobar/">hublaa</A> näyttää tekstin "hublaa"
yleensä jotenkin korostettuna ja sitä hiirellä klikattaessa päästän
osoitteessa "http://www.firma.fi/foobar/" olevaan dokumenttiin.

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

Lopussa on vaakasuora erotinviiva <HR> ja osoitekenttä <ADDRESS>.
Osoitekentässä olevan postiosoitteen olen erotellut < ja >-merkeillä.
Koska samoja merkkejä käytettään HTML-tägienkin erottamiseen, on
käytettävä < ja > -koodauksia.

HTML-kielessä on lisää käskyjä koko joukko. Esimerkiksi jos olisin
saanut jostain "public_html"-hakemistooni GIF-muotoisen kuvan
itsestäni, olisin voinut liittää sen ylläolevan tekstin joukkoon <IMG
SRC="kuva.gif"> -määrittelyllä.

Lisää tietoa HTML-kielestä ja koko WWW-järjestelmästä kannattaa hakea
URL:sta http://www.w3.org/.
--
Timo Kiravuo, kir...@nixu.fi
http://www.nixu.fi/~kiravuo/
Helsinki, FINLAND

0 new messages