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.
Sisältö:
* Yleistä
* Tekstin rakenteen kuvaaminen
o Tekstin peruselementit: HTML, HEAD ja BODY
o Otsikot
o Leipäteksti
+ Rivin- ja kappaleenvaihdot
+ Korostukset
+ Valmiiksi muokattu teksti
+ Erikoismerkit
o Listat
o Kommentit
* Kuvien sijoittaminen tekstiin
* Linkit
o Tekstien sisäiset linkit
o Linkit muihin HTML-teksteihin
o Linkit muihin verkkoresursseihin
* Osoitteet
* Lomakkeet
* Netscape-laajennukset
* Vinkkejä HTML-tekstien kirjoittajille
* Muita lähteitä
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. Skandinaaviset
merkit tulevat suoraan oikein jos käytetään ISO-Latin 1 -merkistöä. Eri
tietokonelaitteistoille on tehty myös erillisiä HTML-editoreita sekä
HTML-konvertoijia, joilla voi muuntaa esim. Word- tai WordPerfect-tekstejä
HTML-muotoon.
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/Netscapella ja Lynxillä.
---------------------------------------------------------------------------
Tekstin rakenteen kuvaaminen
Seuraavassa esitetään HTML:n tärkeimmät koodit (merkit, engl. tag), joilla
tekstiä kuvataan. Koodit kirjoitetaan kulmasulkuihin (< >). Jotkut
koodeista ovat parillisia, jolloin ensimmäinen koodi kertoo mistä
määrittely alkaa ja jälkimmäinen mihin se loppuu, esim.
Otsikko
-
vrt. esim WordPerfectin lihavointi yms. koodit.
Tekstin peruselementit: HTML, HEAD ja BODY
-koodilla kerrotaan että kyseessä on HTML-teksti. Hyvään
HTML-tekstien kirjoitustapaan kuuluu laittaa jokaisen tekstin alkuun
ja tekstin loppuun.
-koodia seuraa ... -osio, jossa kerrotaan yleistietoja
tekstistä. -osiossa voidaan käyttää mm. seuraavia koodeja:
Koko tekstin otsikko
Koko tekstin otsikko näkyy asiakasohjelmassa näytöllä koko ajan (esim.
Lynxissä näytön oikeassa yläkulmassa)
Yhdessä MAILTO-metodin kanssa voidaan -osiossa kertoa tekstin
kirjoittajan sähköpostiosoite, esim.
Muutamilla WWW-asiakasohjelmistoilla voi tällöin lähettää
sähköpostitse palautetta linkillä ilmoitettuun osoitteeseen (esim.
Lynxissä komennolla c).
Dokumentin lisäkuvauksia voi kertoa -koodeilla. Näitä käyttävät
lähinnä sanahakuja tekevät automaatit.
-osiota seuraa ... -osio, johon tulee itse teksti.
Lyhyt esimerkki täydellisestä HTML-tekstistä olisi siis seuraavanlainen:
TÄMÄN TEKSTIN OTSIKKO
Tähän itse teksti...
Otsikot
Otsikkoja on HTML:ssä tarjolla kuusi erilaista eritasoisia otsikoita
varten. Otsikkojen käyttö käy ilmi seuraavista esimerkeistä:
Ensimmäisen tason otsikko
näyttää tältä:
Ensimmäisen tason otsikko
Toisen tason otsikko
Toisen tason otsikko
Kolmannen tason otsikko
Kolmannen tason otsikko
jne. kuudennen tason otsikkoon asti.
Leipäteksti
Rivin- ja kappaleenvaihdot
HTML:ssä ei huomioida editorilla tehtyjä rivin- ja kappaleenvaihtoja.
Niinpä HTML:ssä on näillekin asioille omat koodinsa. Rivinvaihto ( )
aloittaa uuden rivin, kappaleenvaihto (
) uuden kappaleen. Kappaleiden
väliin tulee yleensä tyhjä rivi:
Katkaistaan rivi
ja jatketaan...
näyttää tältä:
Katkaistaan rivi
ja jatketaan...
Kun taas
Katkaistaan rivi
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 (
):
---------------------------------------------------------------------------
Korostukset
Korostuksia on kahdenlaisia, loogisia ja fyysisiä. Looginen tyyli kuvaa
tekstin tehtävän, kun taas fyysinen kuvaa tekstin ulkoasun. Koska HTML:n
tarkoituksena on kuvata tekstin rakenne, eikä sen ulkoasua, kannattaa
suosia loogisia korostuskeinoja.
Tärkeimpiä loogisia tyylejä ovat:
...>
emphasis, korostus, näytetään usein kursivoituna
...
tärkeä asia, näytetään usein lihavoituna
...
definition, sana, joka määritellään
...
tyyli lainauksille, kirjojen, elokuvien yms. nimille
...
tyyli pidemmille lainauksille
Mikään ei takaa, että em. tyylit kaikissa tilanteissa erottuvat selkeästi
toisistaan, joten älä kirjoita tekstiä kokonaan pelkän tyylimäärittelyn
varaan.
Fyysisistä korostustavoista ovat esimerkkejä lihavointi () ja kursiivi
():
Lihavoitu - kursivoitu
Lihavoitu - kursivoitu
Valmiiksi muotoiltu teksti
Valmiiksi muotoillun tekstin voi esittää sellaisenaan
näkyy WWW-ohjelmallakin oikein (sarakkeet kohdallaan), vaikka normaalisti
käytettäisiinkin suhteutettua kirjasinta. Taulukoiden tekoon tarjoavat
HTML:n uudemmat versiot kehittyneempiä tapoja, mutta kaikki ohjelmat eivät
niitä vielä osaa.
Erikoismerkit
Merkeille <, > ja & on HTML:ssä varattu erityismerkitykset eikä niitä voi
käyttää sellaisenaan teksteissä. Merkit korvataan seuraavilla ns.
entiteetti-koodeilla:
< = <
> = >
& = &
Jos HTML:ää kirjoitettaessa ei käytetä ISO Latin-1 -merkistöä, tulee
skandinaaviset kirjaimet korvata seuraavilla koodeilla:
ä = ä
Ä = Ä
ö = ö
Ö = Ö
å = å
Å = Å
Listat
Yksi parhaita piirteitä HTML:ssä on sen tarjoamat monipuoliset listojen
esittämismahdollisuudet. Erityyppiset listat on seuraavassa esitetty
esimerkkien avulla.
Numeroimattomat listat
listan 1. asia
listan 2. asia
näyttää tältä:
* listan 1. asia
* listan 2. asia
Numeroitu lista
listan 1. asia
listan 2. asia
näyttää tältä:
1. listan 1. asia
2. listan 2. asia
Määrittelylista
listan 1. asia
asian 1 selitys
listan 2. asia
asian 2 selitys
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:
näyttää kuvan j2.gif Helsingin yliopiston WWW-palvelimessa sijaitsevan
käyttäjätunnuksen jpackale WWW- kotisivuhakemistosta:
[Image]
Kuvia voi asetella tekstin suhteen ALIGN-tarkentimella. Esim.
Kuva on keskitetty 
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
. Tekstin kohdan voi nimetä -koodilla.
Esimerkiksi tämän tekstin alku on nimetty koodilla ....
Niinpä ankkuri
Alkuun
hyppää tekstin alkuun. Kokeile:
Alkuun
Linkit muihin HTML-teksteihin
Ankkurin linkittäminen muihin teksteihin on hivenen monimutkaisempaa.
Tällöin ankkurin muoto on seuraava . 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 käytössä myös tapa viitata käyttäjän
kotihakemiston alihakemistossa public_html ($HOME/public_html) sijaitseviin
teksteihin merkinnällä "http://www.helsinki.fi/~käyttäjätunnus/". Esim.
HTML-opas
viittaisi tähän opastetekstiin.
Jos tekstissä, johon linkillä viitataan on ...-koodilla
merkittyjä kohtia voi niihin viitata seuraavan esimerkin mukaisesti:
Tämä
linkki veisi tässä tekstissä olevaan kohtaan, joka on
NAME-koodilla nimetty "otsikko"-nimiseksi.
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. Esimerkiksi
näin:
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 (käyttäjätunnus ennen @-merkkiä ei
yleensä välity automaattisesti)
file:///r|/bookmarks.htm
Paikallinen tiedosto R:-levyllä (PC-koneessa)
Esim.
Heli
linkittäisi tekstin Helsingin yliopiston gopher-palvelimen (Heli)
päävalikkoon.
Verkosta löytyy kosolti lisätietoa URL:istä.
---------------------------------------------------------------------------
Osoitteet
Tekijän sähköpostiosoite kannattaa mainita HTML-dokumenteissa. Mm.
seuraavia koodeja voi käyttää tekijän ilmoittamiseksi:
kirjoittaja@kone.jossakin
tyyli sähköpostiosoitteiden ilmoittamista varten - eräs konventio
Webissä on, että kirjoittaja ilmoittaa tekstiensä lopussa osoitteensa
ADDRESS-tyylin avulla
MAILTO-metodilla voi luoda linkin, jonka avulla tekstin lukijat voivat
lähettää sähköpostiviestin tekstin kirjoittajalle (ei toimi kaikilla
asiakasohjelmistoilla)
---------------------------------------------------------------------------
Lomakkeet
HTML-kielellä voi rakentaa lomakkeita (form), joilla saa järjestettyä mitä
erilaisimpia tiedonkeruupalveluita (tilaus- jne. lomakkeet,
tietokantakyselyt, pelit) jne.
Lomakkeissa on mukana esim. Windowsista tuttuja käyttöliittymäelementtejä:
* tekstikenttiä (täytetään tekstillä)
* valintakytkimiä: päällä/pois, yksi päällä/muut pois
* valintalistoja
Lomake on kokoelma kenttiä, joiden arvot pyydetään käyttäjältä.
Lomakkeeseen eli kenttiin täytetyt tiedot käsittelee http-palvelimeen
ohjelmoitava CGI-ohjelma, minkä takia kehittyneiden lomakepohjaisten
palveluiden teko vaatii yhteyttä ylläpitoon.
Helpoiten lomakkeiden käytön niksejä oppii valmiiden lomakkeiden
HTML-koodista.
Lomakkeen määrittely
HTML-sivulle tehdään lomake -koodilla. Lomakkeen
aloittavassa FORM-koodissa kerrotaan millä tavalla lomakkeeseen annetut
tulokset käsitellään:
-koodi.
Kenttien määrittely
Lomakkeen kentät eli täytettävät aukkopaikat määritellään INPUT-koodilla:
Tässä nimi on kentän nimi, arvo sen arvo. Kullakin kentällä lomakkeessa
pitää olla yksikäsitteinen nimi.
Kentän tyyppi vaikuttaa siihen miten kenttä käyttäytyy ruudulla:
TYPE="text"
Tekstikenttä, johon kirjoitetaan tekstiä. Kentän ruudulla näkyvän koon
voi kertoa SIZE="koko_merkkeinä", maksimissaan kenttään otettavan
tiedon määrää 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 valintaryhmään nappula kuuluu, joten saman ryhmän nappuloilla se
pitää olla sama. Lisämääre CHECKED esivalitsee vaihtoehdon.
TYPE="checkbox"
Ruksattava ruutu, joka voi olla päällä 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"). Lisämääre CHECKED esivalitsee ruudun.
TYPE="submit"
Nappula, jolla lomakkeen tulokset lähetetään ACTION-kohdassa
kerrotulle ohjelmalle. VALUE kertoo mitä nappulassa lukee.
TYPE="reset"
Nappula, joka tyhjentää kentät oletusasetuksiin. VALUE kertoo mitä
nappulassa lukee.
TYPE="password"
Tekstikenttä, johon kirjoittava teksti ei näy ruudulla, mutta kulkee
kyllä verkossa ja tulee lomaketta käsittelevälle ohjelmalle
selväkielisenä. Tästä ei siis ole oikeiden salasanojen välittämiseen.
Valintalistat
Jos jonkin tietyn asian vaihtoehtoja on paljon, on siistimpää käyttää
valintalistaa:
MULTIPLE mahdollistaa useamman kohdan valitsemisen kerrallaan, SIZE="x"
tekee selauslistan jossa on kerrallaan näkyvissä x kohtaa: