Pieni HTML-opas hyperdokumenttien kirjoittajille

Sami Kykk 1994, 1995
---------------------------------------------------------------------------

Sisllysluettelo

   * Termej
   * Tiedostot
   * HTML-Komennot
   * Tekstin muotoilu
   * kkset
   * Erikoismerkit
   * Otsikot
   * Kuvat
   * Linkit
   * URL:t
   * Esimuotoiltu tyyli
   * Osoitteet
   * Listat

---------------------------------------------------------------------------

Termej

HTML
     HyperText Markup Language. Hyperdokumenttien tekemiseen tarkoittu
     kieli, joka koostuu tekstin sekaan sijoitettavista komennoista.

Hyperdokumentti
     Hyperteksti sisltv dokumentti. Dokumentissa voi olla teksti,
     kuvia, nt, linkkej muihin dokumentteihin yms.

Katseluohjelma
     Ohjelma jolla voi lukea hyperdokumentteja. Esimerkkein Mosaic, Cello
     ja Lynx. Englanninkielinen termi katseluohjelmalle on WWW browser.

Linkki
     Yhteys toiseen hyperdokumenttiin. Jotkut sanat tai kuvat tekstin
     seassa ovat linkkej, jonka valitsemalla saat nytllesi uuden
     dokumentin.

WWW
     World Wide Web. Maailmanlaajuinen WWW-palvelinten verkko, jossa
     hyperdokumentit sijaitsevat.

WWW-palvelin
     Jossain tietokoneessa sijaitseva palvelin, johon katseluohjelmat
     ottavat yhteytt. Palvelin lukee tiedot tiedostoista ja lhett ne
     eteenpin katseluohjelmille. Tampereen yliopiston WWW-palvelin
     sijaitsee koneessa www.uta.fi (tunnetaan mys nimell juoru).
     Englanninkielinen termi palvelimelle on WWW server.

---------------------------------------------------------------------------

Tiedostot

Kaikki hyperdokumentit kirjoitetaan puhtaana ASCII-tekstin tavalliseen
tiedostoon. Voit kytt siis dokumentin tekemiseen vaikkapa
emacs-editoria. Jotta WWW-palvelin tunnistaisi tekstin hyperdokumentiksi,
lis tiedoston nimen pern aina kirjaimet .html. Siis esimerkiksi
esittely.html

Jos muokkaat tiedostoja PC:ll, voit kytt mys ptett .htm

HTML-komennot

HTML-kieli saattaa ensivilkaisulla vaikuttaa hieman kummalliselta. l
kuitenkaan pelsty! Kun katselet sit tarkemmin, huomaat ett kyseess ei
ole mikn ohjelmointikieli vaan hyvin yksinkertainen tapa kuvata
dokumentteja.

Erilaiset komennot (lihavointi, kursiivi, otsikot) merkitn dokumentteihin
HTML-komennoilla. Nm komennot ympridn suurempi- ja pienempi
kuin-merkeill. Esimerkiksi lihavoitu teksti aloitetaan komennolla bold.
Tekstin seassa tm komento kirjoitetaan siis <bold>. Lihavoitu teksti
loppuu komennolla /bold. Kuten huomaat, lopetuskomento sislt siis
ensimmisen kauttaviivamerkin. Voit kirjoittaa komennot isoilla tai
pienill kirjaimilla, aivan kuten haluat.

Tss esimerkki lyhyest hyperdokumentista. Komento b tarkoittaa samaa kuin
bold, eli lihavointia. Komento i tarkoittaa kursiivia (italics).

Tss on <b>lihavoitua teksti</b> ja tss
<i>kursiivia</i>.

Katseluohjelmasi ruudulla tuo sama teksti nytt tlt:

Tss on lihavoitua teksti ja tss kursiivia.

(Jotkut lukuohjelmat, esimerkiksi lynx, eivt osaa nytt kaikkia
tekstityylej. Siihen vaikuttaa mys kyttmsi pte.)

Tekstin muotoilu

Kun kirjoitat teksti hyperdokumenttiisi, huomaa ett lukuohjelmat
muotoilevat itse tekstin lukijan kuvaruudulle sopivaksi. Sinun tarvitsee
vain ilmoittaa kappaleiden alut komennolla p. Esimerkiksi teksti joka on
kirjoitettu tiedostostoon nin:

<p>Tss
on teksti, joka on kirjoitettu
usealle
riville.

...tulee nkyviin lukuohjelmassa nin:

Tss on teksti joka on kirjoitettu usealle riville.

Hyperdokumenteissa ei siis oteta huomioon tiedostoon kirjoittamiasi
rivinvaihtomerkkej. Jos kuitenkin haluat list johonkin kohtaan
rivinvaihdon, kyt siihen komentoa br. Esim:

Matti Meiklinen<br>
Hmeenkatu 1 A 1<br>
33100 Tampere<br>

Tuo nkyy siis ruudulla nin:

Matti Meiklinen
Hmeenkatu 1 A 1
33100 Tampere

kkset

Kirjoita hyperdokumenteissasi kaikki kkset 8-bittisill merkeill. Jos
kytt 7-bittisi merkkej (eli kaarisulkuja {|}), ne eivt ny muille
lukijoille vlttmtt oikein. Jos kyttmllsi ptteell ei voi
kirjoittaa 8-bittisi merkkej, voit korvata kkset seuraavasti:

   * Kirjaimen  tilasta kirjoita &auml;
   * Kirjaimen  tilasta kirjoita &ouml;
   * Kirjaimen  tilasta kirjoita &Auml;
   * Kirjaimen  tilasta kirjoita &Ouml;

l unohda puolipistett!

Esim. nimeni Sami Kykk voi kirjoittaa mys nin:

Sami K&ouml;ykk&auml;

Erikoismerkit

Koska merkkej <, > ja & kytetn komennoissa, et voi kirjoittaa niit
suoraan dokumenttisi. Kyt niiden tilalla mys erikoiskomentoja:

   * Kirjaimen & tilasta kirjoita &amp;
   * Kirjaimen < tilasta kirjoita &lt;
   * Kirjaimen > tilasta kirjoita &gt;

Muista taas puolipisteet!

Otsikot

Jokaisen hyperdokumentin alkuun tulee merkit dokumentin nimi. Tmn ei
tarvitse olla vlttmtt sama nimi kuin tiedostolla. Dokumentin nimi tulee
lukijoilla nkyviin yleens kuvaruudun ylreunaan. Esimerkiksi tmn
dokumentin nimi on "HTML-opas". Nimi merkitn komennolla title. Esim:

<title>HTML-opas</title>

Itse tekstiss vliotsikot merkitn komennolla h. Kirjaimen h jlkeen
tulee numero, joka kertoo otsikon koon. Komento h1 tekee suurimmat otsikot
ja komento h7 pienimmt. Esim:

<h2>Otsikot</h2>

Esimerkki tuon tulosteista on tmn kappaleen alussa.

Kuvat

Voit list tekstisi sekaan mys kuvia. Kuvien tulee olla joko gif- tai
xbm-formaatissa. (Uusimmat lukuohjelmat ymmrtvt mys jpeg-formaatissa
olevia kuvia) Kuva listn komennolla img src. Esimerkiss net tarkemmin
kuinka tt komentoa kytetn:

<img src="kuva.gif">

Kuvan tiedostonnimi tulee siis lainausmerkkeihin komennon jlkeen. Kun
katselet dokumenttiasi, kuvan pitisi nky tekstiss sill kohdalla, miss
komento on. Jos WWW-palvelin ei pysty lataamaan kuvaa, sen paikalle tulee
nkyviin pieni ikoni. Tarkista tllin tiedostonnimi, kuvan lukuoikeudet ja
sen formaatti.

l lis tekstiisi kovin isoja kuvia. Hyperdokumenttiasi luetaan hyvin
todennkisesti ympri maapalloa jolloin suurten kuvien siirtminen vie
kohtuuttomasti verkon kapasiteettia. Yrit pit kuviesi koko alle 50
kilotavun.

Linkit

Kuten olet jo varmaan huomannut, hyperdokumentit sisltvt linkkej
toisiin dokumentteihin. Linkki nkyy kuvaruudulla korostettuna sanana.
Korostustapa riippuu katseluohjelmasta - Graafisissa lukuohjelmissa linkki
on alleviivattu sana ja lynxiss merkitty knteisell tekstill.

Linkki tehdn komennolla a href ja ptetn komentoon /a. Esim:

<a href="http://www.uta.fi/~cconol/esittely.html">Tst
pset esittelyyn</a>

Lainausmerkkien vliss oleva teksti on dokumentin URL, eli Universal
Resource Locator. Ylloleva URL osoittaa kyttjn cconol kotihakemistoon,
alihakemiston public_html tiedostoon esittely.html.

Komentojen vliss oleva teksti ("Tst pset esittelyyn") nkyy
dokumentin lukijalla linkkin, jonka hn voi sitten halutessaan valita.

Tss viel esimerkkin linkki minun kotisivuuni. Kirjoitin sen tiedostoon
tll tavalla:

<a href="http://www.uta.fi/~samik/">Tss on
kotisivuni</a>.

Tlt se sitten nytt sinun kuvaruudullasi:

Tss on kotisivuni.

URL:t

URL, eli Uniform Resource Locator on tapa kertoa hyperdokumentin tai muun
tiedon "osoite". Hyperdokumenttiin osoittava URL nytt seuraavanlaiselta:

http://koneennimi/polku

Ensimmisen tuleva sana http (HyperText Transfer Protocol) tarkoittaa siis
hyperdokumenttia. Sen jlkeen tulee kahden kauttaviivamerkin jlkeen
koneennimi, esimerkiksi Tampereen yliopiston palvelin www.uta.fi. Tmn
jlkeen tulee hyperdokumentin sijaintia osoittava polku. Kun haluat viitata
kotihakemistossasi olevaan hyperdokumenttihakemistoosi (public_html), laita
polkuun ensimmisen ~kyttjtunnus.

Esimerkiksi URL

http://www.uta.fi/~cconol/esittely.html

osoittaa cconolin kotihakemistossa olevaan tiedostoon
public_html/esittely.html. WWW- palvelin pystyy lukemaan tiedostoja
ainoastaan alihakemistosta nimeltn public_html.

Jossain FTP-palvelimessa olevaan tiedostoon tai hakemistoon pystyy
osoittamaan nin:

ftp://koneennimi/polku

Esimuotoiltu tyyli

Jos haluat list dokumenttiisi teksti kirjoituskonemaisella
tekstityypill, kyt esimuotoiltua tyyli. Tm tyyli aloitetaan
komennolla pre. Tll tyylill kirjoitetussa tekstiss katseluohjelma ei
muotoile mitenkn tekstisi, joten voit kytt vlilyntej tekstin
sisentmiseen, katkoa rivit haluamillasi kohdilla jne. Esim:

<pre>
Tss tulee esimuotoiltua teksti. Tekstityyppin
on kirjoituskonemainen (courier) tekstityyppi.

Voit mys sisent teksti
                   haluamallasi
                       tavalla.
</pre>

Ylloleva esimerkki (ja muut tss oppaassa nkyvt esimerkit) on
kirjoitettu juuri tuolla tyylill.

Osoitteet

Osoitteiden merkitsemiseen on olemassa komento address. Esimerkiksi:

<address>Sami Kykk</address>

Tm nkyy hyperdokumentissa nin:

Sami Kykk

Listat

Ranskalaisilla viivoilla merkittyj listoja saat tehty helposti
komennoilla ul ja li. Aloita lista komennolla ul, lopeta se komennolla /ul
ja merkitse jokainen listan osa komennolla li. Tll tavalla:

<ul>
<li>Perunoita
<li>Mansikoita
<li>Suklaata
<li>Maitoa
</ul>

Valmis lista nytt tlt:

   * Perunoita
   * Mansikoita
   * Suklaata
   * Maitoa

Numeroituja listoja on yht helppo tehd. Tee ne aivan samalla lailla kuin
edellisetkin listat, mutta kyt komennon ul sijasta komentoa ol. Nin:

<ol>
<li>Eka
<li>Toka
<li>Kolmas
<li>Neljs
</ol>

Valmis lista nytt tlt:

  1. Eka
  2. Toka
  3. Kolmas
  4. Neljs

---------------------------------------------------------------------------

Lis tietoa saat muista maailmalla kirjoitetuista HTML-oppaista. Hauskaa
hyperdokumentin kirjoittamista!

[Image] Takaisin etusivulle

Sami Kykk
