HTML:stä, kuten WWW:stä löytyy tietoja The World Wide Web Consortiumista.
HTML:ssä keskeinen käsite on englanniksi "tag". En ole keksinyt sille hyvää suomennosta, yleensä sitä kutsutaan "tägiksi". Tagi koostuu monesta osasta, sillä on ominaisuuksia ja argumentteja. Lyhyesti sen voisi kuvata näin:
<tag ominaisuus="arvo">argumentit</tag>
</tag> on siis tagin "lopputagi". Kaikkia osia ei
aina vaadita - jos dokumentista voi muutenkin päätellä että tagi
loppuu, lopputagia ei tarvita. Yleensä tagin ominaisuuksiakaan ei
tarvitse asettaa, ellei halua sen toimivan tavallisesta poikkeavasti.
Koska merkit '<' ja '>' esiintyvät tagissa, ne pitää kirjoittaa
'<' ja '>'. Löytyy myös
muita merkkejä
joita voidaan kirjoittaa
&jotain;, kuten & = &.
HTML-dokumentti koostuu yhdestä tagista ja sen argumenteista. Tämä
tagi on <html>. Tässä on siis täydellinen HTML-dokumentti,
josta tosin ei ole paljon iloa kellekään:
<html></html>
HTML-tagin argumentteja on kaiksi - otsikkotagi <head> ja
runkotagi <body>. Otsikkokentissä olevat tiedot eivät näy
suoraan dokumentissa, niitä käytetään dokumentin tunnistamiseen.
Runkotagin argumenteiksi kelpaa suuri määrä HTML-tageja, jotka esittävät käsitteitä kuten otsikoita, tekstikappaleita, tekstityylejä ja listoja. Nämä muodostavat itse HTML-dokumentin. Toistaiseksi HTML-dokumentti siis näyttää tältä:
<html> <head> </head> <body> </body> </html>
Esittelen vain yhden otsikkotagin, eli itse otsikko
<title>. Tämä näkyy mm. WWW-selausohjelman
historiatiedoissa ja otsikkopalkissa, joten siitä kannattaa tehdä
kuvaava. "TKY:n WWW-oppaan hakemisto" on paljon parempi kuin
"Hakemisto". (Tämän dokumentin otsikko on "WWW-opas: HTML")
<html> <head> <title>TKY:n WWW-oppaan hakemisto</title> </head> <body> </body> </html>
Rungossa voi esiintyä suuri määrä tageja, joista käyn läpi vain osan.
Täydellinen luettelo löytyy taas
WWW
Consortiumista.
Otsikkotasoja löytyy yhdestä kuuteen, ja ovat kaikki muotoa
<hN>, missä N on numero 1-6. HTML-dokumentti
aloitetaan ykköstason otsikolla, ja määrittelyn mukaan tasojen yli ei
saa hypätä, eli 1:stä seuraa 2, 2:sta 3 jne.
<h1>Pääotsikko</h1> <h2>Toisen tason otsikko</h2> <h3>Kolmannen tason otsikko</h3>
Tekstikappale kirjoitetaan kappaletagiin <p>. Käytännössä
kappaletagi ei ikinä tarvitse lopputagiaan </p>,
koska kappale loppuu seuraavaan tagiin joka implisiittisesti muodostaa
kappaleen, kuten kappale, otsikko tai lista.
<p>Tämä on tekstikappale.
HTML:ssä kappale sijoitetaan aina siten että se täyttää rivit
mahdollisimman hyvin. Tämä tarkoittaa sitä, ettei alkuperäisen
kappaleen muokkauksella ole mitään väliä. Jos tarvitset rivinvaihdon
keskelle kappaletta, kuten esimerkiksi runoissa, se kirjoitetaan
<br>. Rivinvaihtotagikaan ei tarvitse
lopputagiaan.
Tekstiä voidaan korostaa käyttäen erilaisia tyylejä. Yleisiä tyylejä ovat
<em>
Korostettu teksti
</em>
<strong>
Vahvasti korostettu teksti
</strong>
<code>
Ohjelmakoodia
</code>
Asioiden luettelemisen löytyy useampia listatyylejä, joita parhaiten kuvaa esimerkit.
<ul> <li> Tämä on <li> numeroimaton lista </ul>
<ol> <li> Tämä lista on numeroitu. <li> Numerot ovat WWW-selaajan automaattisesti tuottamat </ol>
<dl>
<dt> Sana
<dd> Selitys sanalle "Sana"
<dt> Toinen
<dd> Eli lista jossa on sanoja tai lyhyitä lauseita ja niiden
selitykset.
</dl>
Lopuksi se tagi, joka tekee Webistä verkon, eli linkkitagi
<a>. Se voi osoittaa mihin tahansa URLiin, ja sen
argumenttina oleva teksti tai kuva toimii linkkinä
WWW-selausohjelmassa. URLi ilmoitetaan linkkitagin
href-ominaisuudessa. (href niin kuin Hypertext Reference)
<a href="http://www.tky.hut.fi/">Linkki TKY:n kotisivulle</a> (kokeile!)
Linkki TKY:n kotisivulle (kokeile!)
Huomaa että href-ominaisuuden teksti laitetaan heittomerkkien sisään. Yksi yleisimmistä virheistä on unohtaa heittomerkki lopusta.
Koska linkki voidaan laittaa mistä tahansa tekstipätkästä, on hyvää tyyliä välttää "Paina tätä"-linkkejä. Lukija kokee niitä turhina. Sano siis mieluummin "Olen kirjoittanut pienen HTML-oppaan." kuin "Jos haluat lukea minun pientä HTML-opasta, paina tästä."