HTML tulee sanoista HyperText Markup Language eli hypertekstimerkintäkieli. WWW-sivut laaditaan HTML-kielellä. Selausohjelmat tulkitsevat tätä kieltä ja muotoilevat dokumentit kielen syntaksin mukaisten ohjeiden mukaan.
Muotoiluohjeet on kirjoitettu varsinaisen tekstin sekaan kulmasulkumerkkien < ja > sisään. Seuraavassa on esimerkkkinä pätkä HTML-dokumenttia apinoitavaksi (ainakin tämän kirjoittaja oppii asioita parhaiten tekemällä samalla tavalla kuin muut).
--- cut ---
<HTML>
<TITLE>Esimerkki HTML-dokumentista</TITLE>
<BODY>
<CENTER><H1>Tämä on keskitetty pääotsikko</H1></CENTER>
Sitten tuleekin jo aivan tavallista suhteutettua leipätekstiä, jonka
selaajaohjelma rivittää automaattisesti selaajan ikkunan levyiseksi.
Kaikki teksti tulee samaan kappaleeseen jollei käytetä
kappaleenvaihtomerkintää:<P>
tai pakotettua rivinvaihtoa:<BR>
Tässä HTML-lähdetekstissä olevat muotoilut eivät välity lukijalle asti.
Dokumentin lopullinen muoto lukijan ruudulla määräytyy pelkästään
tekstin sekaan asetettujen muotoilukomentojen vaikutuksesta. kaikki
muotoilukomennot on siis kirjoitettu kulmasulkujen sisään.<P>
Jos välttämättä haluaa saada näkymään ruudulla valmiiksi muotoiltua
suhteuttamatonta tekstiä, se pitää kirjoittaa preformatted-merkintöjen
väliin seuraavasti.<P>
<PRE>
Tässä on nyt valmiiksi muotoiltua suhteuttamatonta tekstiä
Kenttä1 Kenttä2 Kenttä3
---------------------------
a b c
1 2 3
A B C
---------------------------
</PRE>
<B>Tekstiä voi myös vahventaa</B> ja on toki mahdollista
myös<I>kursivoida sitä</I>.
<B><I>Molemmatkin</B></I> voi laittaa päälle
yhtaikaa.<p>
Apropoo, otsikot tehdään merkinnöillä H1, H2, H3,..,H6. H1 on korkeimman
tason vahvin otsikko ja vastaavasti H6 on alimman tason
väliotsikko.<P>
<H2>Esimerkki toisen tason otsikosta</H2>
Vaakasuuntaiset väliviivat syntyvät helposti:
<HR>
Ja tietenkin kaikki haluavat tehdä taulukkoja:<p>
<TABLE BORDER WIDTH=500 CELLSPACING=2>
<CAPTION><H3>Taulukon otsikko</H3></CAPTION>
<TR ALIGN=LEFT><TH>Eka otsikko<TH>Toka<TH>Kolmas<TH>Neljäs
<TR ALIGN=LEFT><TD>1<TD>2<TD>3<TD>4
<TR ALIGN=LEFT><TD>AA<TD>BB<TD>CC<TD>DD
<TR ALIGN=LEFT><TD>111<TD COLSPAN=2>Pari
saraketta<TD>Viimeinen
<TR ALIGN=LEFT><TD><TD><TD><TD>Vähän
tyhjää
<TR ALIGN=LEFT><TD>fgfg<TD>gfhfhfdhfdjh<TD><TD>
<TR ALIGN=LEFT><TD>1<TD>2<TD>3<TD>4
</TABLE>
<BR>
Ja sitten viitteet eli hypertekstilinkit. Ne ovat helppoja <A
HREF="foobar.html">vaikka tästä</A>. Tai sitten
oikeasti Internetissä esim. <A
HREF="http://www.pcuf.fi/˜jarmala/index.html">omalle</A>
sivulleni.<P>
Sitten vielä listat ja luettelot (UL on sisennys):<P>
<UL>
<LI>Ensimmäinen juttu
<LI>Toka
<LI>Kolmas
</UL>
Ja kuvat tulevat tällä viisiin <IMG SRC="kuva1.jpg"
ALIGN=RIGHT>
<P>
Että siinäpä tämä erittäin lyhyt käytännön apinointiin johdattava
esimerkki.<P>
Skandimerkit kannattaa sitten kirjoittaa Windowsin käyttämässä ISO-Latin
1 -muodossa (eli esim. pieni ä näkyy DOS:ssa katsottaessa sigmana).
<HR>
<I>Ari Järmälä 23.11.1995</I>
</BODY>
</HTML>
--- tuc ---
Toistaiseksi ei ole saatavissa oikein kunnollisia HTML-editoreja, joilla voisi sujuvasti ja helposti mättää muotoilukoodeja tekstin sekaan. Toivottavasti ennen pitkää parhaimpiin tekstureihin tulee HTML-lisäosia. Tällä hetkellä ne eivät ainakaan toimi kunnolla.
Toistaiseksi on ollut melkein helpointa kirjoittaa HTML-dokumentit normaalilla mieliteksturilla ISO-Latin-1 -koodina (eli skandit Windows-tyylillä) ja asetella muotoilut käsin. Kovin suuri vaiva ei ole myöskään laatia sopivia makroja useimmin käytettyjen muotoilukoodien syöttämiseen. Itse olen kirjoittanut QEditillä kaikki HTML-tiedostoni.
Ari Järmälä 24.11.1995