Johdatus HTML-kieleen

Palautetta tekstist voi antaa osoitteella Jukka.Packalen@Helsinki.Fi,
mutten lupaa ett ehdin toteuttaa ehdotetut muutokset kovin pikaisesti.
Lomakeosuuden kommentit osoiteella Seppo.Syrjanen@Helsinki.Fi.

Sislt:

   * Yleist
   * Tekstin rakenteen kuvaaminen
        o Tekstin peruselementit: HTML, HEAD ja BODY
        o Otsikot
        o Leipteksti
             + Rivin- ja kappaleenvaihdot
             + Korostukset
             + Valmiiksi muokattu teksti
             + Erikoismerkit
        o Listat
        o Kommentit
   * Kuvien sijoittaminen tekstiin
   * Linkit
        o Tekstien sisiset linkit
        o Linkit muihin HTML-teksteihin
        o Linkit muihin verkkoresursseihin
   * Osoitteet
   * Lomakkeet
   * Netscape-laajennukset
   * Vinkkej HTML-tekstien kirjoittajille
   * Muita lhteit

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 tehtv on kuvata tekstin rakenne eli tekstin osien
tehtvt, ei niinkn niiden ulkoasua. HTML:n avulla kuvataan
WWW-palvelimesta tekstin hakeneelle asiakasohjelmalle tekstin rakenne;
asiakasohjelmisto ptt miten teksti esitetn. HTML:ss on kuitenkin
mukana mys tekstin ulkoasuun vaikuttavia komentoja kuten lihavointi ja
kursiivi.

HTML tarjoaa mys tavan esitt kuvia, nt ja animaatioita tekstin
seassa. Lisksi HTML:n avulla voi linkitt tekstin muihin HTML-teksteihin
sek muihin verkon resursseihin (Gopher, News etc.).

HTML: voi kirjoittaa mill tahansa tekstieditorilla. Skandinaaviset
merkit tulevat suoraan oikein jos kytetn ISO-Latin 1 -merkist. Eri
tietokonelaitteistoille on tehty mys erillisi HTML-editoreita sek
HTML-konvertoijia, joilla voi muuntaa esim. Word- tai WordPerfect-tekstej
HTML-muotoon.

Eri WWW-asiakasohjelmistot nyttvt HTML-tekstit eri tavalla, joten
laajempaan kyttn tarkoitetut tekstit kannattaa testata useilla eri
asiakasohjelmilla, ainakin Mosaicilla/Netscapella ja Lynxill.

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

Tekstin rakenteen kuvaaminen

Seuraavassa esitetn HTML:n trkeimmt koodit (merkit, engl. tag), joilla
teksti kuvataan. Koodit kirjoitetaan kulmasulkuihin (< >). Jotkut
koodeista ovat parillisia, jolloin ensimminen koodi kertoo mist
mrittely alkaa ja jlkimminen mihin se loppuu, esim. <H1>Otsikko</H1> -
vrt. esim WordPerfectin lihavointi yms. koodit.

Tekstin peruselementit: HTML, HEAD ja BODY

<HTML>-koodilla kerrotaan ett kyseess on HTML-teksti. Hyvn
HTML-tekstien kirjoitustapaan kuuluu laittaa <HTML> jokaisen tekstin alkuun
ja </HTML> tekstin loppuun.

<HTML>-koodia seuraa <HEAD>...</HEAD> -osio, jossa kerrotaan yleistietoja
tekstist. <HEAD>-osiossa voidaan kytt mm. seuraavia koodeja:

<TITLE>Koko tekstin otsikko</TITLE>
     Koko tekstin otsikko nkyy asiakasohjelmassa nytll koko ajan (esim.
     Lynxiss nytn oikeassa ylkulmassa)

<LINK REV=...>
     Yhdess MAILTO-metodin kanssa voidaan <HEAD>-osiossa kertoa tekstin
     kirjoittajan shkpostiosoite, esim.

     <LINK REV=MADE HREF=MAILTO:Jukka.Packalen@Helsinki.Fi>

     Muutamilla WWW-asiakasohjelmistoilla voi tllin lhett
     shkpostitse palautetta linkill ilmoitettuun osoitteeseen (esim.
     Lynxiss komennolla c).
<META NAME="description" VALUE="kuvaus">
<META NAME="keywords" VALUE="avain, sanat">
     Dokumentin liskuvauksia voi kertoa <META>-koodeilla. Nit kyttvt
     lhinn sanahakuja tekevt automaatit.

<HEAD>-osiota seuraa <BODY>...</BODY> -osio, johon tulee itse teksti.

Lyhyt esimerkki tydellisest HTML-tekstist olisi siis seuraavanlainen:

<HTML>
<HEAD>
<TITLE>TMN TEKSTIN OTSIKKO</TITLE>
<LINK REV=MADE HREF=MAILTO:Jukka.Packalen@Helsinki.Fi>
</HEAD>
<BODY>
Thn itse teksti...
</BODY>
</HTML>

Otsikot

Otsikkoja on HTML:ss tarjolla kuusi erilaista eritasoisia otsikoita
varten. Otsikkojen kytt ky ilmi seuraavista esimerkeist:

<H1>Ensimmisen tason otsikko</H1>

nytt tlt:

Ensimmisen tason otsikko

<H2>Toisen tason otsikko</H2>

Toisen tason otsikko

<H3>Kolmannen tason otsikko</H3>

Kolmannen tason otsikko

jne. kuudennen tason otsikkoon asti.

Leipteksti

Rivin- ja kappaleenvaihdot

HTML:ss ei huomioida editorilla tehtyj rivin- ja kappaleenvaihtoja.
Niinp HTML:ss on nillekin asioille omat koodinsa. Rivinvaihto (<BR>)
aloittaa uuden rivin, kappaleenvaihto (<P>) uuden kappaleen. Kappaleiden
vliin tulee yleens tyhj rivi:

Katkaistaan rivi<BR>
ja jatketaan...

nytt tlt:

Katkaistaan rivi
ja jatketaan...

Kun taas

Katkaistaan rivi<P>
ja jatketaan...

nytt tlt:

Katkaistaan rivi

ja jatketaan...

Kappaleenvaihtoa ei tarvita otsikoiden jlkeen sill tyhj rivi otsikon
jlkeen sisltyy otsikon mrittelyyn.

Tekstinptki voi erottaa toisistaan mys nytn poikki menevll
vaakatasoisella viivalla (<HR>):
---------------------------------------------------------------------------

Korostukset

Korostuksia on kahdenlaisia, loogisia ja fyysisi. Looginen tyyli kuvaa
tekstin tehtvn, kun taas fyysinen kuvaa tekstin ulkoasun. Koska HTML:n
tarkoituksena on kuvata tekstin rakenne, eik sen ulkoasua, kannattaa
suosia loogisia korostuskeinoja.

Trkeimpi loogisia tyylej ovat:

<EM>...</EM>>
     emphasis, korostus, nytetn usein kursivoituna
<STRONG>...</STRONG>
     trke asia, nytetn usein lihavoituna
<DFN>...</DFN>
     definition, sana, joka mritelln
<CITE>...</CITE>
     tyyli lainauksille, kirjojen, elokuvien yms. nimille
<BLOCKQUOTE>...</BLOCKQUOTE>
     tyyli pidemmille lainauksille

Mikn ei takaa, ett em. tyylit kaikissa tilanteissa erottuvat selkesti
toisistaan, joten l kirjoita teksti kokonaan pelkn tyylimrittelyn
varaan.

Fyysisist korostustavoista ovat esimerkkej lihavointi (<B>) ja kursiivi
(<I>):

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

Lihavoitu - kursivoitu

Valmiiksi muotoiltu teksti

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

<PRE>
        Hedelm    Hinta/kg
        -------------------
        Banaani       12.34
        Omppu          3.22
        Aplari         7.10
</PRE>

nkyy WWW-ohjelmallakin oikein (sarakkeet kohdallaan), vaikka normaalisti
kytettisiinkin suhteutettua kirjasinta. Taulukoiden tekoon tarjoavat
HTML:n uudemmat versiot kehittyneempi tapoja, mutta kaikki ohjelmat eivt
niit viel osaa.

Erikoismerkit

Merkeille <, > ja & on HTML:ss varattu erityismerkitykset eik niit voi
kytt sellaisenaan teksteiss. Merkit korvataan seuraavilla ns.
entiteetti-koodeilla:

< = &lt;
> = &gt;
& = &amp;

Jos HTML: kirjoitettaessa ei kytet ISO Latin-1 -merkist, tulee
skandinaaviset kirjaimet korvata seuraavilla koodeilla:

 = &auml;
 = &Auml;
 = &ouml;
 = &Ouml;
 = &aring;
 = &Aring;

Listat

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

Numeroimattomat listat

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

nytt tlt:

   * listan 1. asia
   * listan 2. asia

Numeroitu lista

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

nytt tlt:

  1. listan 1. asia
  2. listan 2. asia

Mrittelylista

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

nytt tlt:

listan 1. asia
     asian 1 selitys
lista 2. kohta
     asian 2 selitys

Listojen sisll voi tarvittaessa kytt tekstin muokkausmrittelyit
(esim. lihavointia yms.).

Listoja voi laittaa mys siskkin hierarkkisen listan aikaansaamiseksi:

<UL>
<LI>ensimminen taso
<UL>
<LI>toinen taso
<UL>
<LI>kolmas taso
</UL>
</UL>
<LI>ensimmisen tason toinen asia
</UL>

nytt tlt:

   * ensimminen taso
        o toinen taso
             + kolmas taso
   * ensimmisen tason toinen asia

Kommentit

HTML-tekstin joukkoon voi kirjoittaa kommentteja, jotka eivt tule nkyviin
sivua normaalisti katseltaessa.

Kommentointi tehdn riveittin: rivin alkuun tulee <!--, rivin loppuun -->

<!-- Lis viel ennen julkistusta: -->
<!--   * sanasto         -->
<!--   * lhdeluettelo   -->

Kommentti ei tule nkyviin sivua WWW-ohjelmalla katsottaessa (mutta saa sen
toki nkyviin HTML-tiedostosta, joten mitn salaista ei kommentteihin pid
laittaa). Jotkut WWW-ohjelmat eivt pid HTML-koodeista kommenteissa, joten
<!-- <strong> --> saattaa jtt korostuksen plle koko lopputekstiin.
---------------------------------------------------------------------------

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>

nytt kuvan j2.gif Helsingin yliopiston WWW-palvelimessa sijaitsevan
kyttjtunnuksen jpackale WWW- kotisivuhakemistosta:

[Image]

Kuvia voi asetella tekstin suhteen ALIGN-tarkentimella. Esim.

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

nytt tlt

Kuva on keskitetty [Image] suhteessa tekstiin.

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

Suositeltava formaatti kuville on GIF, tai X-ympristss X-bittikartta.
Kuvien nimien ptteiden on vastaavasti oltava .gif, tai .xbm, jotta
asiakasohjelma tiet miten tiedoston sislt ksitelln.

Koska kaikki asiakasohjelmat eivt osaa nytt kuvia (esim. Lynx) voi
[IMAGE]-tekstin sijasta esitt kuvan kohdalla tekstin ALT-optiolla. Esim.

<IMG SRC=kuva.gif ALT="Takaisin">

nyttisi Lynxiss kuvan sijasta tekstin "Takaisin".

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

Linkit

Tekstien sisiset linkit

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

Esimerkiksi tmn 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 linkittminen muihin teksteihin on hivenen monimutkaisempaa.
Tllin 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
tiedosto www-tuki.html haetaan oletushakemistosta WWW-palvelimesta
www.helsinki.fi. Yliopistolla on kytss mys tapa viitata kyttjn
kotihakemiston alihakemistossa public_html ($HOME/public_html) sijaitseviin
teksteihin merkinnll "http://www.helsinki.fi/~kyttjtunnus/". Esim.

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

viittaisi thn 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>Tm
linkki</A> veisi tss tekstiss olevaan kohtaan, joka on
NAME-koodilla nimetty "otsikko"-nimiseksi.

Linkit muihin verkkoresursseihin

Edell on ksitelty linkkej kuviin ja muihin HTML-teksteihin. Linkkej voi
tehd kuitenkin mys muihin verkon resursseihin kuten Gopher-valikoihin tai
-teksteihin ja esim. Usenet News -jrjestelmn uutisryhmiin. Esimerkiksi
nin:

gopher://gopher.helsinki.fi/11/.events/today
     Gopher-valikko (Helin tapahtumakalenteri)
ftp://ftp.helsinki.fi/public_disk/pub/
     Anonymous FTP-arkisto
news:hy.atk.hypermedia
     Usenet News -kokous
telnet://hello%20jokunen,clas02@hyk.helsinki.fi
     Telnet-yhteys kirjastokoneeseen (kyttjtunnus ennen @-merkki ei
     yleens vlity automaattisesti)
file:///r|/bookmarks.htm
     Paikallinen tiedosto R:-levyll (PC-koneessa)

Esim.

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

linkittisi tekstin Helsingin yliopiston gopher-palvelimen (Heli)
pvalikkoon.

Verkosta lytyy kosolti listietoa URL:ist.

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

Osoitteet

Tekijn shkpostiosoite kannattaa mainita HTML-dokumenteissa. Mm.
seuraavia koodeja voi kytt tekijn ilmoittamiseksi:

<ADDRESS>kirjoittaja@kone.jossakin</ADDRESS>
     tyyli shkpostiosoitteiden ilmoittamista varten - ers konventio
     Webiss on, ett kirjoittaja ilmoittaa tekstiens lopussa osoitteensa
     ADDRESS-tyylin avulla
<A HREF=MAILTO:shk@posti.osoite>
     MAILTO-metodilla voi luoda linkin, jonka avulla tekstin lukijat voivat
     lhett shkpostiviestin tekstin kirjoittajalle (ei toimi kaikilla
     asiakasohjelmistoilla)

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

Lomakkeet

HTML-kielell voi rakentaa lomakkeita (form), joilla saa jrjestetty mit
erilaisimpia tiedonkeruupalveluita (tilaus- jne. lomakkeet,
tietokantakyselyt, pelit) jne.

Lomakkeissa on mukana esim. Windowsista tuttuja kyttliittymelementtej:

   * tekstikentti (tytetn tekstill)
   * valintakytkimi: pll/pois, yksi pll/muut pois
   * valintalistoja

Lomake on kokoelma kentti, joiden arvot pyydetn kyttjlt.
Lomakkeeseen eli kenttiin tytetyt tiedot ksittelee http-palvelimeen
ohjelmoitava CGI-ohjelma, mink takia kehittyneiden lomakepohjaisten
palveluiden teko vaatii yhteytt yllpitoon.

Helpoiten lomakkeiden kytn niksej oppii valmiiden lomakkeiden
HTML-koodista.

Lomakkeen mrittely

HTML-sivulle tehdn lomake <FORM>...</FORM>-koodilla. Lomakkeen
aloittavassa FORM-koodissa kerrotaan mill tavalla lomakkeeseen annetut
tulokset ksitelln:

<FORM METHOD="POST" ACTION="http://www.helsinki.fi/cgi-bin/ohjelma">

Joskus tulee vastaan ohjelmia jotka vaativat muotoa:

<FORM METHOD="GET" ACTION="http://www.helsinki.fi/cgi-bin/ohjelma">

Ero POST ja GET -tapojen vlill on tekninen, lomakkeen ksittelevn
ohjelman mukaan (osa toimii vain jommalla kummalla). Koska jokaiseen
lomaketta ksittelevn ohjelmaan kytnnss liittyy kyttohje, ei tst
tule ongelmia.

Nppr ohjelma lomakkeiden testaukseen on
http://www.helsinki.fi/cgi-bin/dump-all joka vain nytt kaiken lomakkeen
ksittelevlle ohjelmalle vlitetyn tiedon (mys tytetyt kenttien arvot).

Lomakkeen sisll voi kytt kaikkia normaaleita HTML-koodeja. Ota
huomioon ett eri WWW-ohjelmilla lomakkeen kentt eivt vlttmtt asetu
nytlle samalla tavalla. Lomakkeen lopettaa </FORM>-koodi.

Kenttien mrittely

Lomakkeen kentt eli tytettvt aukkopaikat mritelln INPUT-koodilla:

<INPUT TYPE="tyyppi" NAME="nimi" VALUE="arvo">

Tss nimi on kentn nimi, arvo sen arvo. Kullakin kentll lomakkeessa
pit olla yksiksitteinen nimi.

Kentn tyyppi vaikuttaa siihen miten kentt kyttytyy ruudulla:

TYPE="text"
     Tekstikentt, johon kirjoitetaan teksti. Kentn ruudulla nkyvn koon
     voi kertoa SIZE="koko_merkkein", maksimissaan kenttn otettavan
     tiedon mr MAXLENGTH="maksimikoko". Alkuarvon voi kertoa VALUE:lla.
TYPE="radio"
     Valintanappuloita, joista vain yksi kerrallaan on valittuna. VALUE
     kertoo mik valinta oli aktiivinen kun lomake oli valmis. NAME kertoo
     mihin valintaryhmn nappula kuuluu, joten saman ryhmn nappuloilla se
     pit olla sama. Lismre CHECKED esivalitsee vaihtoehdon.
TYPE="checkbox"
     Ruksattava ruutu, joka voi olla pll tai pois. Koska kukin kentt
     voi olla valittuna tai ei, pit kullakin olla oma nimens. VALUE
     kertoo mink arvon kentt saa jos se on valittuna (muuten arvo on
     "ON"). Lismre CHECKED esivalitsee ruudun.
TYPE="submit"
     Nappula, jolla lomakkeen tulokset lhetetn ACTION-kohdassa
     kerrotulle ohjelmalle. VALUE kertoo mit nappulassa lukee.
TYPE="reset"
     Nappula, joka tyhjent kentt oletusasetuksiin. VALUE kertoo mit
     nappulassa lukee.
TYPE="password"
     Tekstikentt, johon kirjoittava teksti ei ny ruudulla, mutta kulkee
     kyll verkossa ja tulee lomaketta ksittelevlle ohjelmalle
     selvkielisen. Tst ei siis ole oikeiden salasanojen vlittmiseen.

Valintalistat

Jos jonkin tietyn asian vaihtoehtoja on paljon, on siistimp kytt
valintalistaa:

<SELECT NAME="nimi">
<OPTION>Eka vaihtoehto
<OPTION>Toka vaihtoehto
<OPTION SELECTED>Kolmas vaihtoehto
</SELECT>

MULTIPLE mahdollistaa useamman kohdan valitsemisen kerrallaan, SIZE="x"
tekee selauslistan jossa on kerrallaan nkyviss x kohtaa: <SELECT
NAME="hedelm" SIZE="5" MULTIPLE>. SELECTED esivalitsee halutun vaihtoehdon
OPTION-koodissa.

Tekstilaatikot

Useamman rivin teksti voi pyyt TEXTAREA-koodilla

<TEXTAREA NAME="nimi" ROWS="rivit" COLS="sarakkeet">
Tss voi antaa tekstin oletusarvon
</TEXTAREA>

Tekstialueen tyttminen, etenkin rivilt toiselle siirtyminen tapahtuu eri
WWW-ohjelmissa hiukan eri tavoilla. Mys annettu teksti saattaa pty
olemaan kaikki yhdell rivill ellei lomakkeen tyttj paina
Enter-nppint joka rivin lopussa.

Piilokentt

Sama ohjelma voi ksitell hyvin erilaisten lomakkeiden tuloksia, jos sille
voidaan jotenkin kertoa kuhunkin lomakkeeseen liittyvt asiat. Tm
onnistuu piilokentill:

<INPUT TYPE="hidden" NAME="nimi" VALUE="arvo">

Piilokentt eivt ny ruudulla mitenkn (mutta ne saa toki nkyviin
lomakkeen koodista, joten kovin salaisia asioita ei voi piilottaa
tnnekn).

Esimerkiksi htgrep ja postitalomake-ohjelmille kerrotaan etsittvn
tiedoston nimi ja lomakkeen vastaanottajan shkpostiosoite piilokentill.
Osa WWW-ohjelmista ei pid HTML-koodeista piilokenttien VALUE-kohdassa.

Helpoiten lomakkeiden kytn niksej oppii valmiiden lomakkeiden
HTML-koodista.
---------------------------------------------------------------------------

Netscape-laajennukset

HTML on kieli, jota kehitetn jatkuvasti. HTML+ -spesifikaatiosta kydn
verkossa jatkuvasti aktiivista keskustelua. Ensimmisen konkreettisesti
toteutetun laajennusehdotuksen on tehnyt Netscape Communications
Corporation. Netscape-laajennukset tuovat tiettyj mukavia mahdollisuuksia
Web-tekstien tekoon, mutta laajennuksia kannattaa kuitenkin kytt
teksteiss harkiten: ainut ohjelmisto, joka kykenee tulkitsemaan niit, on
Netscapen oma Web-asiakas (joka tosin on hyvin laajalle levinnyt). Lisksi
useat laajennukset houkuttelevat tekemn silm turhaan rsyttvi
"jippoja" HTML-teksteihin (esim. tekstin vilkkuminen tai erikokoiset
merkit). Netscape-laajennuksia on kritisoitu mys siit, ett ne korostavat
HTML:n perusidean vastaisesti tekstin ulkoasua rakenteen sijaan.

Maltillisesti kytettyn seuraavassa dokumentoidut laajennukset voivat
kuitenkin auttaa tekemn tavallista tyylikkmpi HTML-dokumentteja, kun
esimerkiksi kuvien sijoittelu helpottuu.

<HR>-koodiin on laajennuksissa listty muutamia vaihtoehtoja:

     <HR SIZE=X>
     - mrittelee viivan paksuuden pikseleiss
     <HR WIDTH=X|prosentti>
     - mrittelee viivan leveyden joko pikseleiss tai prosentteina
     dokumentin leveydest
     <HR ALIGN=left|right|center>
     - mrittelee viivan tasauksen
     <HR NOSHADE>
     - hivytt viivasta kolmiulotteisen vaikutelman

Esim.

<HR SIZE=5 WIDTH=60% ALIGN=CENTER>

nyttisi tlt:
               ---------------------------------------------

<IMG>-koodiin on mys tehty laajennuksia. Koodista lytyy nyt seuraavat
vaihtoehdot:

     <IMG
     left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>
          left|right
          - tasaa kuvan seuraavaan tyhjn tilaan ruudun vasemmassa
          (oikeassa) reunassa ja tulostaa kuva jlkeen tulevan tekstin
          kuvan sivulle
          top|texttop|middle|absmiddle|baseline
          - tasaa kuvan suhteessa tekstiin, vaihtoehtojen vaikutukset
          selvivt parhaiten kokeilemalla
     <IMG WIDTH=X HEIGHT=X>
          - kuvan korkeuden ja leveyden ilmoittaminen nopeuttaa kuvien
          nyttmist ruudulla
     <IMG BORDER=X>
          - tekee kehyksen kuvalle, X = kehyksen leveys pikseleiss
     <IMG VSPACE=X HSPACE=X>
          - jtt tyhj tilaa kuvan yl- ja alapuolelle tai sivuille

<BR>-koodiin on listty CLEAR-metodi, joka pakottaa tekstin alkamaan
oikealle tai vasemmalle tasatun kuvan jlkeisess tyhjss tilassa.
Metodissa ovat vaihtoehdot left, right ja all, jotka kertovat kummasta
reunasta tyhj tilaa etsitn ennen tekstin jatkamista (all = tyhj tilaa
etsitn kunnes sen paremmin vasemmalla kuin oikealla ei en ole kuvia).
Esimerkki metodin kytst:

<BR CLEAR=left>

Netscape-laajennuksista lytyy mys muutama kokonaan uusi koodi:

<FONT SIZE=X>...</FONT>
- mrittelee merkin koon, kokoa voi mys kasvattaa (esim. +7) tai
pienent (esim. -2) suhteessa oletuskokoon

<CENTER>...</CENTER>
- keskitt koodien vliss olevan tekstin ja mahdolliset kuvat

<P ALIGN=CENTER>, <H1 ALIGN=CENTER>, ...
- kuten edellinen

Tss on lueteltu vain muutama Netscape-laajennus. Lis kuvauksia voivat
niit kaipaavat kaivella Netscapen WWW-palvelimesta.
---------------------------------------------------------------------------

Vinkkej HTML-tekstien kirjoittajille

Koska eri asiakasohjelmat nyttvt eri koodit eri tavalla, kannattaa
tekstit aina testata useilla lukijoilla, ainakin Lynxill ja Mosaicilla.

Tekstin lukeminen nytlt on huomattavasti raskaampaa kuin paperilta
lukeminen. Teksti kannattaa tst syyst pit suhteellisen vljn
visuaalisesti ja sisllltn tiiviin.

Tekstej kirjoittaessa kannattaa ottaa mallia verkosta lytyvist hyvin
toteutetuista dokumenteista. HTML-dokumenttien lhdekoodia psee tutkimaan
useimpien Web-asiakasohjelmien avulla. Esim. Lynxiss lhdekoodiin psee
tutustumaan komennolla \ ja useimmista graafisista lukijoista lytyy View
Source vaihtoehto joko View- tai Edit-valikossa.

Linkkien tulee johtaa mielekkisiin tekstikokonaisuuksiin - kontekstista
tulee selvit tarkalleen mihin linkin valitsemalla joutuu. Ers turhauttava
ilmi, johon hyperteksteiss usein trm, on se, ett linkin takaa
lytyykin vain muutaman rivin mittainen teksti, esim. ksitteen mrittely.
Mrittely kannattaisi tllaisessa tapauksessa nostaa esiin muun tekstin
sekaan.

Valitse linkkisanat huolellisesti: "Listietoa airoista lydt tst" on
huonoa hyperteksti. Asian voisi kertoa esim. "Katso melontaseuran ohjeet
airoista".

Jos verkkoon esiin laitettu tieto on luonteeltaan pivitettv, kannattaa
sivun loppuun list tieto siit, milloin teksti on viimeksi pivitetty
sek kehen voi ottaa yhteytt pivitysehdotuksia koskevissa asioissa.

Jos kirjoitetulle HTML-tekstien kokoelmalle on olemassa mieleks tulkinta
niiden keskinisest jrjestyksest, kannattaa tekstin loppuun tehd linkki
seuraavaan ja edelliseen tekstiin sek mahdolliseen sisllysluetteloon tai
kotisivuun.

Koska useilla kyttjill on hidas linja kytssn, kannattaa liiallista
kuvien kytt vltt. Isoja kuvia ei koskaan kannata laittaa
automaattisesti siirrettvin (in-line image) Web-sivuille. Parempi tapa on
tehd linkki, josta kyttj psee katselemaan kuvaa niin halutessaan.
Webiss yksi sana kertoo enemmn kuin tuhat kuvaa, joiden hakemiseen menee
ikuisuus...

Mys liiallista graafisten karttojen ("klikattavien kuvien") kytt
kannattaa vltt. Jos karttoja kuitenkin kytetn, kannattaa oheen
laittaa mys tekstilista, josta pystyy valitsemaan samat asiat kuin
kartasta.

Isoihin dokumentteihin (erityisesti net, kuvat, animaatiot) johtavissa
linkeiss on hyv tapa ilmaista linkin kautta haettavan dokumentin koko
tavuissa, esim.

[Soundsample]  (ninyte, koko: 45296 tavua)

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

Muita lhteit

WWW-asioista lytyy verkosta erittin runsaasti tietoa:

   * WWW jumpstation (Tampereen yo)
   * HY:n WWW-ohjeet
   * WWW-kurssi

---------------------------------------------------------------------------
Pivitetty 21.11.95
Linkit pivitetty 30.9.96
Jukka.Packalen@Helsinki.Fi
---------------------------------------------------------------------------
[Image] Helsingin Yliopiston kotisivulle
