Johdatus HTML-kieleen

 Palautetta tekstistä voi antaa osoitteella Jukka.Packalen@Helsinki.Fi, mutten lupaa että ehdin toteuttaa ehdotetut muutokset kovin pikaisesti.

Sisältö:

Yleistä

 World-Wide Web -palvelimista haetut tekstit ovat yleensä HTML (HyperText Markup Language)-dokumetteja, eli tavallisia tekstejä joiden sekaan on kirjoitettu HTML-kielen koodeja.

HTML:n varsinainen tehtävä on kuvata tekstin rakenne eli tekstin osien tehtävät, ei niinkään niiden ulkoasua. HTML:n avulla kuvataan WWW-palvelimesta tekstin hakeneelle asiakasohjelmalle tekstin rakenne; asiakasohjelmisto päättää miten teksti esitetään. HTML:ssä on kuitenkin mukana myös tekstin ulkoasuun vaikuttavia komentoja kuten lihavointi ja kursiivi.

HTML tarjoaa myös tavan esittää kuvia, ääntä ja animaatioita tekstin seassa. Lisäksi HTML:n avulla voi linkittää tekstin muihin HTML-teksteihin sekä muihin verkon resursseihin (Gopher, News etc.).

HTML:ää voi kirjoittaa millä tahansa tekstieditorilla kunhan muistaa pitää merkkilajin 8-bittisenä (ISO-Latin 1). Tarjolla on myös HTML-editoreita Windows- ja X/unix-ympäristöihin, joita löytyy esim. ftp.helsinki.fi:stä.

Eri WWW-asiakasohjelmistot näyttävät HTML-tekstit eri tavalla, joten laajempaan käyttöön tarkoitetut tekstit kannattaa testata useilla eri asiakasohjelmilla, ainakin Mosaicilla ja Lynxillä.

Tekstin rakenteen kuvaaminen

Seuraavassa esitetään HTML:n tärkeimmät koodit (merkit, engl. tag), joilla tekstiä kuvataan. Koodit kirjoitetaan hakasulkuihin (< >). Jotkut koodeista ovat parillisia, jolloin ensimmäinen koodi kertoo mistä määrittely alkaa ja jälkimmäinen mihin se loppuu, esim. <H1>Otsikko</H1> - vrt. esim WordPerfectin lihavointi yms. koodit.

Otsikot

 Otsikkoja on HTML:ssä tarjolla useita eritasoisia otsikoita varten:

<TITLE>Koko tekstin otsikko</TITLE>
- koko tekstin otsikko näkyy asiakasohjelmassa näytöllä koko ajan (esim. Lynxissä näytön oikeassa yläkulmassa)

Eri tasoiset otsikot tekstin sisällä:

<H1>Ensimmäisen tason otsikko</H1> - näyttää tältä:

Ensimmäisen tason otsikko

<H2>Toisen tason otsikko</H2>

Toisen tason otsikko

<H3>Kolmannen tason otsikko</H3>

Kolmannen tason otsikko

<H4>Neljännen tason otsikko</H4>

Neljännen tason otsikko

Leipäteksti

Rivin- ja kappaleenvaihdot

 HTML:ssä ei huomioida editorilla tehtyjä rivin- ja kappaleenvaihtoja. Niinpä HTML:ssä on näillekin asioille omat koodinsa. Rivinvaihto (<BR>) ei lisää tyhjää tilaa rivin katkaisemisen jälkeen, kun kappaleenvaihto (<P>) taas lisää, kuten seuraavista esimerkeistä käy ilmi:

Katkaistaan rivi<BR>
ja jatketaan...

näyttää tältä:

Katkaistaan rivi
ja jatketaan...

Kun taas

Katkaistaan rivi<P>
ja jatketaan...

näyttää tältä:

Katkaistaan rivi

ja jatketaan...

Kappaleenvaihtoa ei tarvita otsikoiden jälkeen sillä tyhjä rivi otsikon jälkeen sisältyy otsikon määrittelyyn.

Tekstinpätkiä voi erottaa toisistaan myös näytön poikki menevällä vaakatasoisella viivalla (<HR>):

Korostukset

 HTML tarjoaa mahdollisuuden myös korostuskeinojen käyttöön tekstissä. Yleisimmät korostustavat ovat lihavointi (<B>) ja kursiivi (<I>):

<B>Lihavoitu</B> - <I>kursivoitu</I>
Lihavoitu - kursivoitu

Näiden fyysisten korostuskeinojen lisäksi on olemassa loogisia tyylejä, joiden avulla tekstiä voidaan muokata (esim. <CITE>, tyyli kirjojen, elokuvien yms. nimille), mutta niitä ei käsitellä tässä.

Valmiiksi muotoiltu teksti

Valmiiksi muotoillun tekstin voi esittää sellaisenaan <PRE>-koodin avulla, esim. teksti

<PRE>

		Ensimmäinen sarake	Toinen sarake
		Ensimmäinen sarake	Toinen sarake
		Ensimmäinen sarake	Toinen sarake
</PRE>

näkyy samanlaisena WWW-asiakkaalla katsottaessa.

Erikoismerkit

Merkeille < ja > on HTML:ssä varattu erityismerkitykset eikä niitä voi käyttää sellaisenaan teksteissä. Merkit korvataan seuraavilla nk. Escape-sekvensseillä:

< = &lt;
> = &gt;
Jos HTML:ää kirjoitettaessa ei käytössä ole 8-bittinen merkistö, tulee skandinaaviset kirjaimet korvata seuraavilla Escape-sekvensseillä: 

ä = &auml;
Ä = &Auml;
ö = &ouml;
Ö = &Ouml;
å = &aring;
Å = &Aring;

Listat

 Yksi parhaita piirteitä HTML:ssä on sen tarjoamat monipuoliset listojen esittämismahdollisuudet. Erityyppiset listat on seuraavassa esitetty esimerkkien avulla.

Numeroimattomat listat

<UL>
<LI>listan 1. asia
<LI>listan 2. asia
</UL>

näyttää tältä:

Numeroitu lista

<OL>
<LI>listan 1. asia
<LI>listan 2. asia
</OL>

näyttää tältä:

  1. listan 1. asia
  2. listan 2. asia
Määrittelylista

<DL>
<DT>listan 1. asia
<DD>asian 1 selitys
<DT>listan 2. asia
<DD>asian 2 selitys
</DL>

näyttää tältä:

listan 1. asia
asian 1 selitys
lista 2. kohta
asian 2 selitys
Listojen sisällä voi tarvittaessa käyttää tekstin muokkausmäärittelyitä (esim. lihavointia yms.).

Listoja voi laittaa myös sisäkkäin hierarkkisen listan aikaansaamiseksi:

<UL>
<LI>ensimmäinen taso
<UL>
<LI>toinen taso
<UL>
<LI>kolmas taso
</UL>
</UL>
<LI>ensimmäisen tason toinen asia
</UL>

näyttää tältä:

Kuvien sijoittaminen tekstiin

 Kuvia voi sijoittaa tekstiin <IMG SRC=URL>-koodilla. URL (Uniform Resource Locator) kertoo asiakasohjelmistolle missä kuva sijaitsee. URL:in muoto kuvien kohdalla on seuraava: http://palvelimen.internet.osoite/hakemisto/kuva.gif, esim:

<IMG SRC=http://www.helsinki.fi/~jpackale/j2.gif>

näyttää kuvan j2.gif Helsingin yliopiston WWW-palvelimessa sijaitsevan jpackale-nimisen käyttäjän WWW-kotihakemistosta (tekstien sijainnista palvelimessa löytää lisätietoja tästä), eli

Kuvia voi asetella tekstin suhteen ALIGN-tarkentimella. Esim.

Kuva on keskitetty <IMG SRC=http://www.helsinki.fi/~jpackale/j2.gif align=middle> suhteessa tekstiin

näyttää tältä

Kuva on keskitetty suhteessa tekstiin.

ALIGN-metodin toinen vaihtoehto on ALIGN=TOP. Oletusarvoisesti kuvan alalaita on tekstin kanssa samassa tasossa.

Suositeltava formaatti kuville on GIF, tai X-ympäristössä X-bittikartta. Kuvien nimien päätteiden on vastaavasti oltava .gif, tai .xbm, jotta asiakasohjelma tietää miten tiedoston sisältöä käsitellään.

Koska kaikki asiakasohjelmat eivät osaa näyttää kuvia (esim. Lynx) voi [IMAGE]-tekstin sijasta esittää kuvan kohdalla tekstin ALT-optiolla. Esim.

<IMG SRC=kuva.gif ALT=Takaisin>

näyttäisi Lynxissä kuvan sijasta tekstin "Takaisin".

Linkit

Tekstien sisäiset linkit

 Yksinkertaisin hypertekstilinkki jonka HTML:llä voi tehdä on hyppy toiseen kohtaan samassa tekstissä. Hyperteksti-ankkuri on tässä tapauksessa muotoa <A HREF=#NIMI></A>. Tekstin kohdan voi nimetä <A NAME=NIMI>-koodilla.

Esimerkiksi tämän tekstin alku on nimetty koodilla <A NAME=ALKU>...</A>. Niinpä ankkuri

<A HREF=#ALKU>Alkuun</A>

hyppää tekstin alkuun. Kokeile:

Alkuun

Linkit muihin HTML-teksteihin

Ankkurin linkittäminen muihin teksteihin on hivenen monimutkaisempaa. Tällöin ankkurin muoto on seuraava <A HREF=URL></A>. URL (Uniform Resource Locator) kertoo WWW-asiakkaalle missä koneessa ja hakemistossa teksti sijaitsee. Esim. URL "http://www.helsinki.fi/www-tuki.html" kertoo, että teksti haetaan oletushakemistosta WWW-palvelimesta www.helsinki.fi. Yliopistolla on käytössä myös tapa viitata käyttäjän kotihakemiston alahakemistossa public_html ($HOME/public_html) sijaitseviin teksteihin merkinnällä "http://www.helsinki.fi/~käyttäjätunnus". Esim.

<A HREF=http://www.helsinki.fi/~jpackale/html-opas.html>

viittaisi tähän opastetekstiin.

Jos tekstissä, johon linkillä viitataan on <A NAME=NIMI>...</A>-koodilla merkittyjä kohtia voi niihin viitata seuraavan esimerkin mukaisesti:

<A HREF=http://www.helsinki.fi/~jpackale/html-opas.html#otsikko>Tämä linkki veisi tässä tekstissä olevaan kohtaan, joka on NAME-koodilla nimetty "otsikko"-nimiseksi.</A>

Linkit muihin verkkoresursseihin

Edellä on käsitelty linkkejä kuviin ja muihin HTML-teksteihin. Linkkejä voi tehdä kuitenkin myös muihin verkon resursseihin kuten Gopher-valikoihin tai -teksteihin ja esim. Usenet News -järjestelmän uutisryhmiin. Tällöin URL:ssä korvataan http resurssin polussa jollakin seuraavista:

gopher
gopher-tiedostoille (esim. Helin tekstit)
news
Usenet News-kokous
file
paikallinen tiedosto, tai FTP-arkisto
WAIS
tiedosto WAIS-palvelimessa
telnet
yhteys telnet-palveluun
esim.

<A HREF=gopher://gopher.helsinki.fi/>Heli</A>

linkittäisi tekstin Helsingin yliopiston gopher-palvelimen (Heli) päävalikkoon.

Yksityiskohtaisempaa tietoa URL:eistä (englanniksi) löytyy tästä .

Osoitteet

Tekijän sähköpostiosoite kannattaa mainita HTML-dokumenteissa. Mm. seuraavia koodeja voi käyttää tekijän ilmoittamiseksi:

</ADDRESS>kirjoittaja@kone.jossakin</ADDRESS>
tyyli sähköpostiosoitteiden ilmoittamista varten - eräs konventio Webissä on, että kirjoittaja ilmoittaa tekstiensä lopussa osoitteensa ADDRESS-tyylin avulla
<A HREF=mailto:sähkö@posti.osoite>
mailto-metodilla voi luoda linkin, jonka avulla tekstin lukijat voivat lähettää sähköpostiviestin tekstin kirjoittajalle (ei toimi kaikilla asiakasohjelmistoilla)

Käytännöllisiä vinkkejä HTML-tekstien kirjoittajille

 Koska eri asiakasohjelmat näyttävät eri koodit eri tavalla kannattaa tekstit aina testata useilla lukijoilla, ainakin Lynxillä ja Mosaicilla.

Jos kirjoitetulle HTML-tekstien kokoelmalle on olemassa mielekäs tulkinta niiden keskinäisestä järjestyksestä, kannattaa tekstin loppuun tehdä linkki seuraavaan ja edelliseen tekstiin sekä mahdolliseen sisällysluetteloon/kotisivuun.

Tekstin lukeminen näytöltä on huomattavasti raskaampaa kuin paperilta lukeminen. Teksti kannattaa tästä syystä pitää suhteellisen väljänä visuaalisesti ja sisällöltään tiiviinä.

Hannu Mallat on dokumentoinut hyviä tyyliohjeita HTML-tekstien kirjoittajille.

Helsingin Yliopiston kotisivulle

Jukka.Packalen@Helsinki.Fi