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: