head ja body)
Edellä esitellyillä elementeillä voi jo tehdä kiinnostavan dokumentin, jos vain on kiinnostavaa asiaa ja taitoa esittää itse asia. Lisäksi voit aivan hyvin kirjoittaa jutun ensin yksinkertaisella tavalla ja sitten miettiä parannuksia esitystapaan (esim. sanojen korostamista). On paljon helpompi kehitellä yksinkertaista rakennetta hienommaksi kuin tehdä mitään järkevää mutkikkaalle rakenteelle, joka on tehty hätäisesti ja puutteellisin tiedoin. Lisäksi melko yksinkertainen rakenne on yleensä paras myös lopullisena rakenteena.
Ei jutussa välttämättä tarvitse olla
sen kummempaa HTML:ää kuin kappale- ja otsikkoelementtejä.
Kirjoita kukin tekstikappale
tägien
<p> ja
</p> väliin ja kukin otsikko
tägien
<hn> ja
</hn> väliin; tässä n
on otsikon taso (1, 2, 3 tai 4).
Jos on selviä luetelmia, niin ne esitetetään
ul- tai ol-elementteinä.
Tällainen rakenne on jo huomattavasti parempi kuin
Web-sivuilla keskimäärin on!
Kirjallisen ilmaisun yleisten periaatteiden ohella kannattaa ottaa huomioon, että Web välineenä poikkeaa esimerkiksi kirjoista ja lehdistä. Joissakin suhteissa se tarjoaa paljon suurempia mahdollisuuksia, joissakin taas vakavia rajoituksia.
Kuvien käyttöä käsitellään jäljempänä erikseen. Sivut on syytä suunnitella niin, että ne toimivat myös ilman kuvia. Kun näin tehdään alusta alkaen, saadaan myös nopeammin aineisto Webiin jossain muodossa, ja sitten voidaan ruveta tekemään lisäyksiä.
Jakob Nielsen esitti jo vuonna 1997 hyviä keskeisiä periaatteita Web-sivujen tekemisestä toimiviksi:
HTML-dokumentin voi kirjoittaa millä tahansa tekstieditorilla eli ohjelmalla, jolla voi käsitellä ja tallentaa tekstiä pelkkänä tekstinä. Kyseeseen tulevat esimerkiksi seuraavat:
Muita vaihtoehtoja löytyy esim. Web Authoring FAQ:n kohdan What is everyone using to write HTML? kautta. Huomaa, että ohjelmistonjakelusivusto Tucowsilla on myös "Suomen haarakonttori", josta data siirtyy yleensä nopeammin kuin ulkomailta.
Jos HTML-dokumentin pohjaksi otetaan valmis muussa muodossa oleva aineisto tai palasia sellaisesta, käytetään usein "työkaluja" kuten automaattisia muunnosohjelmia.
On olemassa myös ohjelmia, jotka tuottavat HTML-dokumentteja "näkymättömästi" niin, että kirjoittaja ei lainkaan näe HTML-merkkausta. Usein niiden väitetään olevan "wysiwyg-ohjelmia": What You See Is What You Get, eli tuotetun dokumentin väitetään olevan juuri sellainen, miltä se näyttää kirjoitettaessa. Jo edellä esitetty on toivottavasti osoittanut tämän harhaluuloksi.
Varsinaisen tekstin voi kirjoittaa melko vapaamuotoisesti. Käytännössä kannattaa kirjoittaa lyhyehköjä, alle 80-merkkisiä rivejä, jotta editointi olisi mukavampaa. Rivinvaihto vastaa HTML:ssä välilyöntiä. Jaoitpa tekstin riveille miten tahansa, selain kuitenkin "latoo" tekstin miten se haluaa ja miten kulloinkin sopii (mm. selaimen ikkunan leveys huomioon ottaen). Seuraavat seikat kannattaa kuitenkin ottaa huomioon:
(joka tarkoittaa no-break space -merkkiä).
Mitään siistiä tapaa estää rivinvaihto sanan sisällä ei ole
olemassa. Toisaalta selaimet eivät yleensä jaa sanoja eri riveille.
Internet Explorer kuitenkin saattaa jakaa yhdysmerkin kohdalta
(esim. sanan "kuu-ukko"), mikä on usein ihan hyvä; mutta valitettavasti
se menee tässä liiallisuuksiin, erottaen jopa sananalkuisen yhdysmerkin sanasta!
Jos siisti ulkoasu on tärkeä, voit käyttää
nobr-elementtiä
(joka ei kuulu mihinkään viralliseen HTML-kielen
määrittelyyn) tähän tapaan:
syntymäaika ja
,
<nobr>Latin-1</nobr>.nobr-elementtiä.
Koska nobr-elementin käyttö kaikkialla, missä IE saattaa sotkea
rivitysasioita, olisi tylsää ja rasittavaa, se kannattanee rajoittaa
tärkeimpiin tapauksiin kuten sellaisiin otsikoihin ja tiivistelmiin, joissa
väärä rivitys olisi erityisen ikävä.
Aivan dokumentin alkuun kuuluu periaatteessa niin sanottu dokumenttityypin määrittely. Sellaisena voi käyttää seuraavaa (juuri tällaisenaan):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Periaatteellisesti tällainen määrittely ilmaisee, että kyseessä on HTML-dokumentti, vieläpä määrättyjä muotosääntöjä (syntaksia) noudattava. Teoriassa tällä on merkitystä ohjelmille, jotka voivat käsitellä ja näyttää muillakin SGML-pohjaisilla merkkauskielillä esitettyä aineistoa.
Käytetty HTML:n versio on tässä 4.01. Se poikkeaa aiemmasta 4.0:sta asiallisesti melko vähän mutta sallii joitakin selainten yleisesti tukemia piirteitä, joita 4.0 ei sallinut.
Käytännössä dokumenttityypin määrittelyn
suurin merkitys on nykyisin siinä, että se tarvitaan
dokumentin määrätynlaista
tarkistamista,
validointia, varten.
Mutta asiaa ei kannata jäädä ihmettelemään - kopioi vain
jompikumpi edellä olevista riveistä sellaisenaan.
Älä korvaa isoja kirjaimia pienillä äläkö rupea spekuloimaan
sillä, mitä EN tarkoittaa. (Se tarkoittaa kyllä
englannin kieltä mutta ei siinä mielessä, että dokumentti
olisi englanninkielinen, vaan siinä mielessä, että käytetty HTML-kielen
versio on kuvattu englanniksi!)
Dokumenttityypin määrittely vaikuttaa joissakin tilanteissa myös siihen, miten selaimet näyttävät HTML-dokumentin. Tämä niin sanottu doctype sniffing merkitsee absurdia piirrettä selaimissa, eikä siitä normaalisti tarvitse tietää mitään, ellei ole kirjoittanut HTML:ää tavalla, joka luottaa joidenkin selainten ominaisuuksiin. Aiheesta löytyy kuvauksia Matthias Gutfeldtin sivun Doctype switching and standards compliance: An overview kautta.
Itse HTML-dokumentin
alkuun kuuluu title-elementti.
Vaikka se kuuluu "pakollisiin kuvioihin",
sitä ei pidä kirjoittaa huolimattomasti
saati ajattelemattomasti.
Sen sisällön
miettimiseen kannattaa uhrata jonkin verran aikaa, koska sillä
on yllättävän paljon vaikutusta.
Sen muoto on
<title>Dokumentin "ulkoinen" otsake</title>Sen sisältöä käyttävät hyvin monet ohjelmat erilaisiin tarkoituksiin. Se voi näkyä esim. selaimen ikkunan yläpalkissa (ei siis osana itse dokumenttia vaan sen yläpuolella), selaimen ns. hotlistassa, hakupalvelimien antamissa osumalistoissa jne.
Kirjoita title-elementtiin
sellainen lyhyt ja mutta tietopitoinen otsake, joka missä
tahansa asiayhteydessä kuvastaa dokumentin olennaista sisältöä.
Esimerkiksi "Johdanto" on erittäin huono otsake. Johdanto mihin? Otsakkeen pitää olla ymmärrettävä, vaikka lukija ei lainkaan tiedä, mihin asiayhteyteen dokumentti liittyy, eikä edes näe dokumenttia itseään. Otsake on usein ratkaiseva sen kannalta, ottaako lukija itse dokumenttia lainkaan luettavakseen! (Siis esim. valitseeko sen hän jostakin dokumenttien listasta, jossa kutakin juttua edustaa vain sen otsake.)
"Ulkoinen" otsake on eri asia kuin
ne otsikot, joita voit sisällyttää dokumenttiin
otsikkoelementeillä
(h1 ym.)
ja jotka näkyvät osana itse dokumenttia.
Mikään ei toki estä kirjoittamasta
dokumentin ylimpään otsikkoon samaa tekstiä kuin
title-elementtiin, jos sama teksti toimii hyvin
sekä "ulkoisena" otsakkeena että itse dokumentin osana.
Tavallisesti kuitenkin title-elementillä
ilmoitettava otsake on lyhyempi ja tiiviimpi; mitään erityistä
ylärajaa sen pituudelle ei ole, mutta ohjelmat eivät yleensä
käytä ainakaan enempää kuin 72 ensimmäistä merkkiä.
Jambalaya-reseptimme alkuun voisimme kirjoittaa esimerkiksi seuraavan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Jambalaya-resepti suomal. makuun (J. Korpela)</title>
<h2>Jambalaya suomalaiseen makuun à la Yucca</h2>
Huomaa, että tässä title-elementti
antaa "objektiivisemman" otsakkeen, josta mm. ilmenee, että
kyseessä resepti. Sen sijaan h2-elementin sisältämä
teksti on vapaampaa, koska se luetaan itse dokumenttia luettaessa,
jolloin reseptiluonne ilmenee itse jutusta.
Voit nyt kokeilla siipiäsi ja tehdä pienen Web-sivun ihan kokeeksi. Jos mahdollista, niin valitse jokin aihe, josta aiot myöhemmin tehdä "oikean" sivun. Esimerkiksi jos aiot tehdä jonkin yhdistyksen "kotisivut", tee lyhyt kuvaus yhdistyksen tarkoituksesta taikka jostakin muusta sisällöllisesti sinulle helposta (?) aiheesta.
Anna tiedostolle yksinkertainen nimi, joka loppuu merkkeihin
(tyyppimerkintään) .html, esimerkiksi
esittely.html.
Sitä, mitä teet kirjoitettuasi dokumentin tiedostoon, käsiteltiin
edellä kohdassa
Teksti Webiin.
Nyt vain tiedoston nimi loppuu .html eikä .txt.
head ja body)Dokumentin rakennetta voidaan korostaa lisäämällä edellä esitettyyn perusrakenteeseen merkkausta, joka on käytännössä ja vanhojen HTML-määrittelyjen mukaan vapaaehtoinen mutta etenkin tulevaisuutta ajatellen suositeltava. Tämä tarkoittaa seuraavaa:
DOCTYPE-määrittelyä (joka ei ole varsinaisesti
HTML:ää), kirjoitetaan html-elementiksi,
jolla on aloitus- ja lopetustägi.
head-elementti ja
sitä seuraava body-elementti. Tämä jakaa dokumentin
otsikko-osaan ja runko-osaan; jälkimmäisessä on dokumentin
varsinainen sisältö, otsikko-osassa taas erilaisia dokumenttiin
liittyviä asioita.
title-elementti.
Lisäksi siinä voi olla seuraavanlaisia elementtejä:
base,
link,
meta,
style, jotka voivat esiintyä vain otsikko-osassa
script ja isindex (vanhentunut),
jotka voivat esiintyä sekä otsikko- että runko-osassa.
Seuraavassa on tällaisen käytännön mukainen dokumentti, jonka rungossa on vain otsikkoelementti ja kappale-elementti:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo html-, body- ja head-tägien käytöstä</title>
</head>
<body>
<h1>Demo html-, body- ja head-tägien käytöstä</h1>
<p>Tämä on pelkkä demo. Dokumentin merkitys tai ulkoasu
ei muuttuisi, vaikka html-, body- ja head-tägit poistettaisiin.</p>
</body>
</html>
Huomaa, että sisennyksiä voi halutessaan käyttää rakenteen selventämiseen HTML-merkkausta lukevalle ihmiselle. Dokumentin ulkoasuun tällaisilla sisennyksillä ei ole vaikutusta.
Vaikka dokumentissa ei olisikaan html-, head-
ja body-tägejä, siinä kuitenkin aina on
vastaavat elementit. Silloin selaimen
oletetaan tunnistavan rakenteen "implisiittisesti". Jos kyseiset
tägit jätettäisiin pois, niin esimerkkitapauksessa selain tunnistaisi
h1-tägistä, että nyt siirryttiin runko-osaan, koska
h1-elementti ei ole sallittu otsikko-osassa.