Yleisimpiä HTML-koodeja

Sivuotsikko - <TITLE></TITLE>

Jokaisella sivulla pitäisi olla otsikko, joka tulee näkyviin selaimen otsikkoriville:

<TITLE>Yksinkertainen HTML sivu</TITLE>

Taustan ja ulkoasun määrittely rungossa - <BODY määreet>

<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000" BACKGROUND="image.gif">

BODY-koodissa on muutama tarkennin:

BACKGROUND="image.gif" tekee taustakuvion dokumentille image.gif-nimisestä kuvatiedostosta (huom! taustakuviot hankaloittavat usein dokumenttien luettavuutta)
BGCOLOR=white -määrittelee dokumentille taustavärin
TEXT=black -määrittelee tekstin värin
LINK=blue määrittelee linkkien värin (huom! käyttäjät ovat tottuneita siihen, että linkit ovat sinisiä, ja eriväriset linkit jäävät helposti löytymättä)
VLINK=red -määrittelee värin niille linkeille, jotka käyttäjä on jo nähnyt
ALINK=yellow -määrittelee linkille värin, joka näkyy juuri sillä hetkellä, kun käyttäjä klikkaa linkkiä

Värikoodeista

Kommentit -

Kommenteilla voidaan dokumentoida sivussa tehtyjä määrityksiä, ne eivät näy muuten kuin katsottaessa lähdekoodia:

Kappaleotsikot <H1></H1>

Dokumentissa voidaan käyttää myös kappaletason otsikoita, joista H1 on ylimmän tason otsikko esim. 1. Johdanto ja sitä seuraavat alempien tasojen otsikoita esim. 1.1. (H2) tai 1.1.1. (H3)

<H1>Ensimmäisen tason otsikko</H1>

<H2>Toisen tason otsikko</H2>

<H3>Kolmannen tason otsikko</H3>

Listat

Lajittelematon lista (Unsorted List)

Lajittelematon lista on sisennetty luettelo asioista

<UL>
   <LI>juusto
   <LI>leipä
   <LI>maito
   <LI>voi
</UL>

Selaimesi näyttää esimerkin listan näin:

juusto
leipä
maito
voi

Järjestetty lista (Ordered List)

Järjestetyssä listassa asiat esitetään tietyssä nimenomaisessa järjestyksessä. Listan kohdat numeroidaan.

<OL>
<LI>listan 1. asia
<LI>listan 2. asia
</OL>

Kuvat - <IMG SRC=URL>

WWW-sivuille voi sijoittaa kuvia IMG-koodin avulla:

<IMG SRC=URL>

Esim. <IMG SRC="kuvat/verkko.gif" ALT="Verkon kuva">

ALT - tarkennin nimeää kuvan selväkielisesti (kaikki eivät halua kuvia näkyviin).
ALIGN - Tarkennin voi saada arvot LEFT ja RIGHT vanhojen TOP, MIDDLE ja BOTTOM lisäksi. ALIGN=left tasaa kuvan näytön vasempaan laitaan niin, että teksti juoksee kuvan vierellä oikealla puolella. Vastaavasti ALIGN=right tasaa kuvan näytön oikeaan laitaan, ja teksti juoksee kuvan vasemmalla puolella.
WIDTH=x - Määrittelee kuvan leveyden pikseleissä.
HEIGHT=x - Määrittelee kuvan korkeuden pikseleissä.
HSPACE=x - Tekee pikseleinä ilmoitetun mitan mukaisen tyhjän tilan kuvan oikealle ja vasemmalle puolelle.
VSPACE=x - Tekee vastaavasti tyhjää tilaa kuvan ylä- ja alapuolelle.
BORDER=x - Tekee kehyksen kuvalle. Kehyksen paksuus ilmoitetaan pikseleinä. Kuvan saa näkymäänkokonaan ilman kehystä määrittelyllä BORDER=0.
USEMAP ja ISMAP - Kertovat että kuvaa käytetään karttana.

Linkit - <A HREF="yleistä.html"> Yleistä </A>

Linkki toiseen HTML-tiedostoon

<A HREF="yleistä.html">Yleistä</A>

Muista kuitenkin, että toisten käyttäjien aineistojen käyttäminen ilman asianomaisen lupaa ei ole sallittua.

Tekstien sisäiset linkit

Saman dokumentin sisällä (myös dokumentista toisen dokumentin ankkuriin) voi tehdä linkkejä esim. sisällysluettelon sivun alkuun, merkitsemällä kohta, johon halutaan siirtyä suoraan seuraavasti:

<A name="Ryhmä 1">Ryhmä 1</A>:

Viittaus hyppykohtaan tapahtuu seuraavasti:

<A HREF="#Ryhmä 1"> Ryhmä 1</A>

Tiedostoviittaukset

Absoluuttiinen (http://www.cs.jyu.fi/index.html)
Suhteellinen ( “pics/omakuva.gif”)

Omissa töissä kannattaa käyttää ehdottomasti suhteellista viittausta omiin tiedostoihin (kuvat+sivut), koska tällöin dokumentit voidaan siirtää hakemistorakenteineen esim. CD ROM-levylle ja linkit toimivat ilman verkkoyhteyksiä.

Taulukot - <TABLE> </TABLE>

Taulukoilla voi tehdä esim. palstoituksen sivulle, sillä HTML 3.2 ei ota kantaa dokumenttien LayOut:iin. Taulukot on kätevintä tehdä WYSIWYG-editorilla. Taulukossa esiintyy seuraavia määrityksiä: solu (TD, table data), otsakesolu (TH, table header) ja rivinvaihto (TR). Esim. alla oleva määrittelee kaksi rivisen taulukon, jossa rivillä on kaksi solua:

<TABLE>
<TR>
<TD>
Ensimmäisen rivi 1.solun sisältö
<TD>
Ensimmäinen rivi 2. solun sisältö
<TR>
<TD>
Toinen rivi 1.solun sisältö
<TD>
Toinen rivi 2. solun sisältö
</TABLE>

Tämä määritys tuottaa alla olevan taulukon:

Ensimmäisen rivi 1.solun sisältö	Ensimmäinen rivi 2. solun sisältö
Toinen rivi 1.solun sisältö	Toinen rivi 2. solun sisältö

TABLE-koodissa on seuraavia tarkenteita: ALIGN, WIDTH=n tai WIDTH=n%, BORDER=n, CELLSPACING=n, CELLPADDING=n (n on pikseleinä)

TR-koodin tarkenteita: ALIGN, VALIGN

TD-koodin tarkenteita: NOWRAP, ALIGN ja VALIGN, WIDTH=n

TH-koodin tarkenteita: ROWSPAN=n, COLSPAN=n