Peruselementit

Yksinkertainen esimerkki täydellisestä HTML-dokumentista voisi olla vaikkapa seuraavanlainen. Esimerkkiä seuraa koodien selvennykset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Dokumentin otsikko</TITLE>
<META NAME="description" CONTENT="Eka HTML dokumentti">
<LINK REV="made" HREF="mailto:mikaves@cc.jyu.fi">
</HEAD>
<BODY>
... dokumentin varsinainen teksti
</BODY>
</HTML>

!DOCTYPE - Dokumentin tyyppi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Tämä koodi kertoo dokumentin olevan HTML 3.2:n mukainen. Jos laitat dokumenttiin muita kuin HTML 3.2:n mukaisia koodeja, ota tämä määritys pois. Jos dokumenttisi noudattaa HTML 2.0:aa oikea määritys on <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">.

HTML - HTML dokumentti

[<HTML>] [</HTML>]

HTML-koodilla kerrotaan, että kyseessä on HTML-dokumentti. Koodin täytyy olla !DOCTYPE-määrityksen jälkeen. Dokumentin loppuun tulee koodin pari </HTML>.

HEAD - Otsake

[<HEAD>] [</HEAD>]

HEAD-koodien väliin sijoitetaan yleistietoja tekstistä. Osio ei saa sisältää tekstiä eikä normaaleja muotoiluita. Yleisiä koodeja HEAD-osiossa ovat TITLE, META sekä LINK.

TITLE - Dokumentin otsikko

TITLE on ainoa HTML-dokumentissa vaadittava koodi. Se kertoo dokumentin nimen. Dokumentin nimi on yleensä koko ajan selaimen näytöllä.

LINK - Tietoa dokumenttien suhteista

<LINK REL="string" HREF="URL">
REL=string|REV=string, HREF=URL, TITLE=string

LINK-koodia käytetään ilmaisemaan dokumenttien välisiä suhteita. Esimerkkidokumentissa <LINK REV="made" HREF="mailto:mikaves@cc.jyu.fi"> -koodia on käytetty kertomaan dokumentin kirjoittajan sähköpostiosoite.

Mahdollisia arvoja REL-atribuutille ovat:

home kertoo pääsivun (homepage) sijainnin
toc, sisällysluettelon sijainti
index, hakemiston sijainto
up, loogisesti tämän dokumentin yläpuolella oleva dokumentti
next, tätä dokumenttia seuraava dokumentti
previous, tätä dokumenttia edeltävä dokumentti

META - Metatietoa

<META NAME="string" CONTENT="string">
HTTP-EQUIV=string|NAME=string, CONTENT=string

META-koodi kertoo tietoja dokumentin tiedoista. Muutamia esimerkkejä META-koodin käytöstä:

Välittää hakusanoja hakukoneille. Esimerkiksi Infoseek ja Alta Vista osaavat hyödyntää nämä sanat dokumentista löytyvien sanojen lisäksi. Samaa sanaa ei kannata laittaa useaan kertaan, sillä tällöin koko avainsana saatetaan hylätä.

Jotkin hakukoneet osaavat hakea dokumentin kuvauksen tästä koodista. Tällöin hakujen tulosten yhteydessä näkyy dokumentin kuvaus, eikä muutamaa riviä dokumentin alusta. Kuvaus ei saa olla kovin pitkä. Ainakin Alta Vista osaa hyödyntää tätä koodia.

Kertoo dokumentin luonnissa käytetyn ohjelman nimen.

Kertoo dokumentin kirjoittajan nimen.

BODY - Dokumentin tekstiosa

[<BODY>] [</BODY>]
BACKGROUND=URL, BGCOLOR=#RRGGBB, TEXT=#RRGGBB, LINK=#RRGGBB, VLINK=#RRGGBB, ALINK=#RRGGBB

BODY-koodien sisään tulee dokumentin varsinainen teksti. Valinnainen BACKROUND-määre kertoo, taustakuvana käytettävän kuvan polun. Esim. BACKGROUND="tausta.gif" (kuva samassa hakemistossa kuin dokumentti), BACKGROUND="images\tausta.gif" (kuva images-hakemistossa, joka on samassa hakemistossa kuin dokumentti) tai BACKGROUND="http:\\www.ikaalinen.fi\images\tausta.gif" (kuva ko. osoitteessa). Valitse taustakuvaksi hillitty kuva, joka ei vaikeuta tekstin luettavuutta.

BGCOLOR kertoo taustan värin, TEXT tekstin värin, LINK linkin värin, VLINK seuratun linkin värin ja ALINK aktiivisen linkin värin.

Huom! Käyttäjät ovat tottuneet, että linkit ovat sinisiä. Eriväriset linkit ovat vaikeita huomata linkeiksi.