Make your own free website on Tripod.com

VeePee Page

Html Opas
Etusivu | Msn | x-box | Playstation | Nintendo | LinkkiSivu | Känny | Sijoitusvinkit | Ilmoita ilmaiseksi Palsta | Foorumit | Kokin Herkut | Tuning & Cars | Html Opas | k-18 | Aforismit | Minä! | BlingBling | Kauhua | Linkit! | Peli Sivu | Ota Yhteyttä! | Kuvat | Extra | Kommenttia! | Vitsit

Aluksi
Tässä dokumentissa esitetään HTML-kielen perusteet huomioiden kielen version 3.2 mukana tulleet lisäykset. Tämä dokumentti ei kata täydellisesti minkään HTML:n version elementtejä. Täydelliset kuvaukset löytyvät HTML-kielen spesifikaatioista, joita löytyy mm. WWW-konsortiosta.

HTML kehittyy nopeammin kuin sen tuki selainohjelmistoissa. Version 3.2 ominaisuuksia voi käyttää sillä varauksella, että ne saattavat erityisesti vanhemissa selaimissa tuottaa yllättävän lopputuloksen. Kaikki HTML 3.2 -spesifit asiat on tässä dokumentissa merkitty merkinnällä [HTML 3.2].
Yleistä
World-Wide Web -palvelimista haetut tekstit ovat yleensä HTML (HyperText Markup Language)-dokumetteja, eli tavallisia tekstejä joiden sekaan on kirjoitettu HTML-kielen koodeja.

HTML:n varsinainen tehtävä on kuvata tekstin rakenne eli tekstin osien tehtävät, ei niinkään niiden ulkoasua. HTML:n avulla kuvataan WWW-palvelimesta tekstin hakeneelle asiakasohjelmalle tekstin rakenne; asiakasohjelmisto päättää miten teksti esitetään. Tämä on perusteltua siksi, että dokumenttien tulee WWW-ympäristössä toimia riippumatta siitä millä laitteisto+käyttöjärjestelmä+selain -yhdistelmällä niitä yritetään saada näkyviin. HTML:ssä on kuitenkin mukana myös tekstin ulkoasuun vaikuttavia komentoja kuten lihavointi ja kursiivi.

HTML tarjoaa myös tavan esittää kuvia, ääntä ja animaatioita tekstin seassa. Lisäksi HTML:n avulla voi linkittää tekstin muihin HTML-dokumentteihin sekä muihin verkon resursseihin (FTP, News etc.).

HTML:ää voi kirjoittaa miltei millä tahansa tekstieditorilla. Skandinaaviset merkit näkyvät WWW-sivuilla oikein jos tekstiä kirjoitettaessa on käytössä ollut ISO-Latin 1 -merkistö. Eri tietokonelaitteistoille on tehty myös erillisiä HTML-editoreita sekä HTML-konvertoijia, joilla voi muuntaa esim. Word- tai WordPerfect-tekstejä HTML-muotoon.

Lisäksi on olemassa erillisiä WWW-editoreita, joilla tekstejä voi tehdä niin, ettei HTML-koodeja tarvitse opetella periaatteessa lainkaan. Esimerkiksi automaattisemmasta tavasta tehdä WWW-sivuja käy Netscape Gold-editori, jonka käyttöohjeisiin voit myös tutustua. Käytännössä on kuitenkin hyödyllistä tuntea HTML-koodit myös tällaista editoria käytettäessä, koska se tekee virhetilanteiden korjaamisen helpommaksi.

Eri WWW-asiakasohjelmistot näyttävät HTML-tekstit eri tavalla, joten laajempaan käyttöön tarkoitetut tekstit kannattaa testata useilla eri asiakasohjelmilla. Jonkinlaisia ääripäitä edustavat Lynx, joka merkkipohjaisena selaimena ei osaa kovinkaan hienostuneita temppuja, sekä Netscape, joka on kyllästetty enemmän ja vähemmän hienoilla ominaisuuksilla.
HTML-kielen eri versiot
Aloittelevaa HTML-dokumenttien tekijää hämmentää hyvällä syyllä se tosiasia, että HTML-kielestä on olemassa useita versiota, joista jokaisesta löytyy hieman erilainen valikoima HTML-elementtejä. Mitä näistä tulisi siis käyttää? HTML-kielen versioita on periaatteessa kahdenlaisia. Yhtäällä on olemassa versioita, joita eri ohjelmistotalot kehittävät juuri omille WWW-selaimilleen räätälöityinä. Toisaalta on olemassa versioita, joita useat ohjelmistotalot valmistavat yhteistyössä World Wide Web Consortium:in kanssa.

Eri ohjelmistotalojen yksittäisten HTML-versioiden ongelmana on se, että niille löytyy useimmiten tuki vain saman ohjelmistotalon WWW-selaimista. Microsoftin laajennukset HTML-kieleen toimivat järkevästi vain Microsoftin selaimella. Toisaalta nämä versiot HTML:stä kehittyvät usein nopeasti, ja kehitetyille HTML-kielen laajennuksille löytyy usein hyvin nopeasti tuki talon omasta selaimesta. Omia HTML-laajennuksia ovat kehitelleet mm. Netscape ja Microsoft. Näitä laajennuksia ei käsitellä tässä dokumentissa.

WWW-konsortion koordinoimassa WWW-kehitystyössä on se hyvä puoli, että sen kehittämän HTML:n tuki löytyy useimmista selaimista. Toisaalta yhteistyö vie aikaa. WWW-konsortion standardit tukevat kuitenkin WWW:n perusideologiaa, eli käyttöympäristöriippumattomuutta paremmin kuin minkään yksittäisen yrityksen tekemä HTML:n kehitystyö.

Tällä hetkellä voimassa oleva HTML-kielen versio on 3.2. Se sisältää jo HTML 2.0:ssa määriteltyjen dokumenttien peruselementtien (mm. otsikot, kappaleenvaihdot, listat, kuvien sijoittamisen dokumenttiin ja dokumenttien väliset linkitykset sekä lomakemääritykset) lisäksi mm. taulukot, taustavärit, fonttimäärityksiä sekä runsaasti lisäämääreitä 2.0:n elementteihin. Versiossa 3.2 HTML näyttää hiljalleen irtaantuvan alkuperäisestä ideasta kuvata ainoastaan dokumentin rakenne.
Tekstin rakenteen kuvaaminen
HTML-koodien (merkkien, engl. tag) idea on, että koodeilla kuvataan dokumenttien rakenteellisia elementtejä. Kaikki koodit kirjoitetaan kulmasulkujen < > sisälle. Jotkut koodeista toimivat pareina, jolloin varsinainen tekstielementti jää koodien väliin: ensimmäinen koodi kertoo mistä määrittely alkaa ja jälkimmäinen mihin se loppuu, esim. <H1>Otsikko</H1>. Toiset koodit pärjäävät ilman paria, kuten kappaleenvaihto <P>.

Lyhyt esimerkki täydellisestä HTML-tekstistä voisi olla vaikkapa seuraavanlainen:

<HTML>
<HEAD>
<TITLE>TÄMÄN TEKSTIN OTSIKKO</TITLE>
<LINK REV=MADE HREF=MAILTO:Jukka.Packalen@iki.Fi>
</HEAD>
<BODY>
Tähän itse teksti...
</BODY>
</HTML>

Tekstin peruselementit: HTML, HEAD ja BODY
<HTML>-koodilla kerrotaan että kyseessä on HTML-dokumentti. Dokumentin loppuun tulee koodin pari </HTML>.

[HTML 3.2] Uudessa HTML-spesifikaatiossa dokumentin ensimmäinen koodi on <!DOCTYPE>, jolla ilmoitetaan dokumentin tyyppi. Tarkka muoto koodille on:

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

<HTML>-koodia seuraa <HEAD>...</HEAD> -osio, jossa kerrotaan yleistietoja tekstistä. HEAD-osiossa on yksi jokaiselle dokumentille pakollinen elementti:

<TITLE>Tekstin nimi</TITLE>

TITLE on tekstin nimi, samaan tapaan kuin kirjalla on nimi. TITLE näkyy asiakasohjelmassa näytöllä koko ajan (esim. Lynxissä näytön oikeassa yläkulmassa).

Muita koodeja, joita HEAD-osiossa voidaan käyttää ovat mm:

<LINK REV=...>

Yhdessä MAILTO-metodin kanssa voidaan REV-koodilla kertoa tekstin kirjoittajan sähköpostiosoite, esim.

<LINK REV=MADE HREF=MAILTO:Jukka.Packalen@iki.Fi>

Muutamilla WWW-asiakasohjelmistoilla voi tällöin lähettää sähköpostitse palautetta linkillä ilmoitettuun osoitteeseen (esim. Lynxissä komennolla c).

Dokumentin yleistietoja voi kertoa <META>-koodeilla:

<META NAME="description" CONTENT="kuvaus">
<META NAME="keywords" CONTENT="avain, sanat">

Esimerkin tavat käyttää META-koodeja ovat hyödyllisiä rekisteröitäessä sivuja hakuautomaatteihin.

HEAD-osiota seuraa <BODY>...</BODY> -osio, johon tulee itse teksti.

[HTML 3.2] BODY-koodissa on muutama tarkennin:

BACKGROUND="image.jpg"
tekee taustakuvion dokumentille image.jpg-nimisestä kuvatiedostosta
(huom! taustakuviot hankaloittavat usein dokumenttien luettavuutta)
BGCOLOR=white
määrittelee dokumentille taustavärin
TEXT=black
määrittelee tekstin värin
LINK=green
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ä

BODY-koodi voi siis HTML 3.2:ssa olla esimerkiksi seuraavan (hirveän) esimerkin mukainen:

<BODY BGCOLOR=blue TEXT=black LINK=green
VLINK=red ALINK=yellow>

Tarkentimet kirjoitetaan koodin kulmasulkujen sisään välilyönneillä erotettuna. Pitkän koodin voi jakaa kahdelle riville.

Värit ilmaistaan RGB-järjestelmän mukaisesti ja heksa-desimaaleina (valkoinen = #FFFFFF). Windowsin VGA-paletista valitut 16 perusväriä voidaan ilmaista myös englanninkielisin nimin (valkoinen = white tai #FFFFFF). Seuraavassa taulukossa on esitetty 16 perusväriä:

Black = "#000000" Green = "#008000"
Silver = "#C0C0C0" Lime = "#00FF00"
Gray = "#808080" Olive = "#808000"
White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = "#000080"
Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080"
Fuchsia = "#FF00FF" Aqua = "#00FFFF"

[HTML 3.2] HTML 3.2 -spesifikaation mukaan ainut näistä elementeistä pakollinen on TITLE. Lyhin mahdollinen HTML 3.2 -dokumentti on siis:

<TITLE>Tämän tekstin nimi</TITLE>

Käytännössä esimerkiksi BODY-koodille on kuitenkin usein käyttöä sen tarkenteiden takia, ja HEAD-osiolle metakoodien takia.
Otsikot
Otsikkoja on HTML:ssä tarjolla kuusi erilaista eritasoisia otsikoita varten. Otsikkojen käyttö käy ilmi seuraavista esimerkeistä:

<H1>Ensimmäisen tason otsikko</H1>
<H2>Toisen tason otsikko</H2>
<H3>Kolmannen tason otsikko</H3>

jne. kuudennen tason otsikkoon asti. Otsikoita suunniteltaessa kannattaa pitää mielessä, että otsikoiden ulkoasu määräytyy käytetyn selaimen mukaan. Siksi ei ole järkevää valita tiettyä otsikkotasoa sen näennäisen ulkoasun perusteella. Otsikkotaso valitaan sen mukaan mikä tehtävä otsikolla on tekstissä.
Leipäteksti
Leipätekstiä kirjoitettaessa kannattaa pitää mielessä, että HTML:ssä ei normaalisti huomioida editorilla tehtyjä rivin- ja kappaleenvaihtoja. Niinpä esimerkiksi rivin- ja kappaleenvaihdot pitää ilmaista erillisillä koodeilla.
Rivin- ja kappaleenvaihdot
Rivinvaihto <BR> aloittaa uuden rivin, kappaleenvaihto <P> uuden kappaleen. Kappaleiden väliin tulee yleensä tyhjä rivi. Kappaleenvaihtoa ei tarvita otsikoiden jälkeen sillä tyhjä rivi otsikon jälkeen sisältyy otsikon määrittelyyn.

[HTML 3.2] Kappaleiden tasaaminen on mahdollista HTML 3.2:ssa. Oletusarvoisesti teksti tasataan vain vasemmasta reunasta. Seuraava koodi keskittää tekstin:

<P ALIGN=center>

Seuraava koodi tasaa tekstin oikeasta reunasta:

<P ALIGN=right>

Keskittämiseen voi käyttää myös CENTER-koodia, joka keskittää kuvat mukaanlukien kaiken koodiparin väliin sijoitetun.

Samat tasaukset saa aikaan myös DIV-koodilla, esim:

<DIV ALIGN=right>

Tekstinpätkiä voi erottaa toisistaan myös näytön poikki menevällä vaakatasoisella viivalla <HR>.
Korostukset
Korostuksia on kahdenlaisia, loogisia ja fyysisiä. Looginen tyyli kuvaa tekstin tehtävän, kun taas fyysinen kuvaa tekstin ulkoasun. Koska HTML:n tarkoituksena on kuvata tekstin rakenne, eikä sen ulkoasua, kannattaa suosia loogisia korostuskeinoja.

Tärkeimpiä loogisia tyylejä ovat:

<EM>...</EM>>
emphasis, korostus
<STRONG>...</STRONG>
tärkeä asia
<DFN>...</DFN>
definition, sana, joka määritellään
<CITE>...</CITE>
tyyli lainauksille, kirjojen, elokuvien yms. nimille
<BLOCKQUOTE>...</BLOCKQUOTE>
tyyli pidemmille lainauksille

Tyylit näytetään selaimesta riippuen hieman eri tavoin. Usein tyylit näytetään asiakasohjelmassa lihavoituna tai kursivoituna tekstinä. Ongelmia saattaa tuottaa se, että eri loogiset tyylit eivät tällöin erotu toisistaan dokumentissa.

Fyysisistä korostustavoista ovat esimerkkejä lihavointi <B> ja kursiivi <I>.

[HTML 3.2] Hyödyllisiä tekstin ulkoasua muokkaavia koodeja ovat myöskin yläindeksi- <SUP> ja alaindeksityylit <SUB>.
[HTML 3.2]Fontit
HTML 3.2 tuo mukanaan koodin FONT, jolla voidaan vaikuttaa tekstin kokoon ja väriin. FONT-koodi tuntee siis kaksi tarkenninta:

SIZE="+1" tai SIZE=6
fontin koko, joka annetaan joko suhteellisena (+ tai -) tai absoluuttisena välillä 1-7
COLOR=green
muuttaa tekstin värin

Esimerkki:

<FONT SIZE="+2" COLOR=green>Vihreää vähän isompaa tekstiä</FONT>

Muista kuitenkin, että liika temppuilu kirjasinten koolla tai väreillä tekee dokumentistasi levottoman näköisen.
Valmiiksi muotoiltu teksti
Valmiiksi muotoillun tekstin voi esittää sellaisenaan <PRE>-koodin avulla:

<PRE>
Hedelmä Hinta/kg
-------------------
Banaani 12.34
Omppu 3.22
Aplari 7.10
</PRE>

Tämä taulukko näkyy WWW-selaimellakin oikein (sarakkeet kohdallaan); ilman PRE-koodia selain ei huomioisi tabulointeja lainkaan. Haittapuolena on se, että selain käyttää valmiiksi muotoillun tekstin esittämiseen suhteuttamatonta kirjasinta ja lopputulos on siten suhteellisen karu.

Taulukoiden tekemiseen on hienostuneempia mahdollisuuksia tarjolla HTML 3.2:n myötä.
Erikoismerkit
Merkeille <, > ja & on HTML:ssä varattu erityismerkitykset eikä niitä voi käyttää sellaisenaan teksteissä. Merkit korvataan seuraavilla ns. entiteetti-koodeilla:

< = &lt;
> = &gt;
& = &amp;

Jos HTML:ää kirjoitettaessa ei käytetä ISO Latin-1 -merkistöä, tulee skandinaaviset kirjaimet korvata seuraavilla koodeilla:

ä = &auml;
Ä = &Auml;
ö = &ouml;
Ö = &Ouml;
å = &aring;
Å = &Aring;

Myös seuraava koodi voi olla hyödyllinen:

© = &copy;

Listat
HTML tarjoaa useita vaihtoehtoisia tapoja tehdä listoja dokumenteissa.

Lajittelematon lista (Unsorted List)

Lajittelematon lista on ikään kuin ranskalaisin viivoin tehty lista, jossa asiat eivät välttämättä ole missään erityisessä järjestyksessä:

<UL>
<LI>banaani
<LI>kahvia
<LI>juustoa
<LI>kihveli
</UL>

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

* banaani
* kahvia
* juustoa
* kihveli

[HTML 3.2]

TYPE-attribuutilla voidaan muuttaa listamerkkiä (bullet):

<UL>
<LI TYPE=disc>banaani
<LI TYPE=square>kahvia
<LI TYPE=circle>pomelo
</UL>

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>

[HTML 3.2]

Numerointityylin voi järjestetyssä listassa valita OL-koodin TYPE-tarkentimella, joka voi saada jonkin seuraavista arvoista:

1
arabilaiset numerot 1,2,3...
a
pienet aakkoset a,b,c...
A
isot aakkoset A,B,C...
i
pienet roomalaiset numerot i,ii,iii...
I
isot roomalaiset numerot I,II,III...

Esimerkki:

<OL TYPE=a>
<LI>listan 1. asia
<LI>listan 2. asia
</OL>

Määrittelylista (Definition List)

Määrittelylistassa esitetään määriteltävä asia ja sen selitys. Määrittelylistassa listataan ts. asioita kuten vaikkapa sanakirjoissa.

<DL>
<DT>listan 1. asia
<DD>asian 1 selitys
<DT>listan 2. asia
<DD>asian 2 selitys
</DL>

[HTML 3.2] COMPACT-tarkenteella voidaan yrittää kehoittaa selainta asettelemaan listat normaalia tiiviimmin. Tarkennetta voidaan käyttää kaikissa tässä esitetyissä listatyypeissä. Esimerkki:

<DL COMPACT>
<DT>listan 1. asia
<DD>asian 1 selitys
<DT>listan 2. asia
<DD>asian 2 selitys
</DL>

Listojen sisällä voi tarvittaessa käyttää tekstin muokkausmäärittelyitä (esim. lihavointia).

Listoja voi laittaa myös sisäkkäin hierarkkisen listan aikaansaamiseksi:

<UL>
<LI>ensimmäinen taso
<UL>
<LI>toinen taso
<UL>
<LI>kolmas taso
</UL>
</UL>
<LI>ensimmäisen tason toinen asia
</UL>

Kommentit
HTML-tekstin joukkoon voi kirjoittaa kommentteja, jotka eivät tule näkyviin sivua normaalisti katseltaessa.

Kommentointi kannattaa tehdä riveittäin: rivin alkuun tulee <!--, rivin loppuun -->

<!-- Lisää vielä ennen julkistusta: -->
<!-- * sanasto -->
<!-- * lähdeluettelo -->

Kommenteista voi periaatteessa tehdä useampirivisiä, mutta osa selaimista saattaa kuitenkin tällöin virheellisesti näyttää osan kommenteista sivua katseltaessa. Kommentteihin ei kannata myöskään laittaa HTML-koodeja, koska selaimet saattavat mennä tästä sekaisin. Vältä siis tätä:

<!-- <A HREF="turha.html">Turha linkki</A> -->

Huomaa, että vaikka kommenttisi eivät näy normaalissa dokumenttinäytössä WWW-selaimessa, näkyvät ne kuitenkin lähdekoodia tarkasteltaessa. Esimerkiksi Netscape-selaimessa lähdekoodin saa näkyviin valitsemalla View-valikosta vaihtoehdon Document Source.
Kuvien sijoittaminen tekstiin
WWW-sivuille voi sijoittaa kuvia IMG-koodin avulla. Periaatteessa kuvien formaatin sitoo ainoastaan WWW-selainten tuki eri formaateille. Käytännössä useimmat WWW-selaimet tukevat GIF- ja JPG-formaatteja. Koodia käytetään seuraavasti:

<IMG SRC=URL>

WWW-osoitteista tuttu URL (Uniform Resource Locator) kertoo asiakasohjelmistolle millä protokollalla tietoa haetaan, mistä palvelimesta ja mistä tiedostosta. Jos kuvatiedosto on samassa hakemistossa kuin HTML-lähdekoodi, on tilanne yksinkertainen:

<IMG SRC="kuva.gif">

Vastaavasti, jos kuva on vaikkapa kokonaan toisessa koneessa, täytyy koko URL kirjoittaa auki:

<IMG SRC="http://banaanikotka.pc.helsinki.fi/be/bei1.gif">

Esimerkin URL kertoo, että kuva "bei1.gif" haetaan normaalilla WWW-tiedonsiirtoprotokollalla (http - hypertext transport protocol) palvelimesta "banaanikotka.pc.helsinki.fi" hakemistosta "be".

Tekstin asemointi kuvan ympärillä määritellään ALIGN-tarkentimella. Oletusarvoisesti teksti tasataan kuvan alareunan kanssa samalle tasolle:

Tekstiä ennen ja jälkeen kuvan.

ALIGN-tarkentimella teksti voidaan myös tasata keskelle kuvaa tai kuvan ylälaitaan vaihtoehdoilla MIDDLE ja TOP. Seuraavassa lähdekoodissa teksti on tasattu keskelle kuvaa:

<IMG SRC="http://banaanikotka.pc.helsinki.fi/be/bei1.gif"
ALIGN=middle>

Selaimesi näyttää lopputuloksen näin:

Tekstiä ennen ja jälkeen kuvan.

Kuten esimerkeistä käy ilmi, on yllä mainittu vaihtoehto selvästikin tarkoitetettu kuvatekstille. Usein järkevin vaihtoehto kuvituskuvan sijoittamiseksi on yksinkertaisesti sijoittaa kuva sivun vasempaan laitaan, niin, että teksti rivittyy sen ylä- ja alapuolelle rivin- ja kappaleenvaihtojen avulla:

Leipätekstiä tekstiä tekstiä.
<P>
<IMG SRC="http://banaanikotka.pc.helsinki.fi/be/bei1.gif">
<BR>
<STRONG>Kuvassa banaanikotka.</STRONG>
<P>
Leipätekstiä tekstiä tekstiä.

Koska kaikki asiakasohjelmat eivät osaa näyttää kuvia (esim. Lynx), voi kuvan sijasta esittää tekstiä ALT-tarkenteella. Esim. koodi:

<IMG SRC="kuva.gif" ALT="Takaisin">

näyttäisi Lynxissä kuvan sijasta tekstin "Takaisin".

[HTML 3.2] Kuvien hienostuneempaan sijoittamiseen sivulle tarvitaan HTML 3.2:sta, josta löytyvät seuraavat lisätarkentimet:

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ä.
Tarkentimella ei ole tarkoitus muuttaa kuvan kokoa, vaan kertoa kuvan oikea leveys, jotta selain voisi varata tilan kuvalle jo ennen kuin itse kuvainformaatio on haettu verkosta.
HEIGHT=x
Määrittelee kuvan korkeuden pikseleissä.
Ks. edellä.
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ään kokonaan ilman kehystä määrittelyllä BORDER=0.
USEMAP ja ISMAP
Kertovat että kuvaa käytetään karttana.

Esimerkki HTML 3.2:lla asemoidusta kuvasta voisi olla vaikkapa seuraavanlainen:

<IMG SRC="http://banaanikotka.pc.helsinki.fi/be/bei1.gif"
ALT="Kuva banaanikotkasta" ALIGN=left WIDTH=71 HEIGHT=88
HSPACE=10 VSPACE=5>

Jos käytät ALIGN=left tai ALIGN=right tarkentimia ja teksti rivittyy kuvan jommalle kummalle puolelle, saatat haluta siirtää tekstin jatkumaan vasta kuvan jälkeisessä tyhjässä tilassa. Tämä onnistuu BR-koodin tarkentimella CLEAR, joka voi saada arvot LEFT, RIGHT ja ALL. CLEAR=left jatkaa tekstiä kuvan jälkeisestä tyhjästä vasemmasta reunasta, CLEAR=right jatkaa tekstiä vasta kun näytön oikea reuna on tyhjä, ja CLEAR=all huomioi molemmat reunat. Seuraava esimerkki havainnollistaa tämän tarkentimen käyttöä:

<IMG SRC="http://banaanikotka.pc.helsinki.fi/be/bei1.gif"
BORDER=1 ALT="Kuva banaanikotkasta" ALIGN=left>
Tekstiä joka tulee kuvan viereen.
<BR CLEAR=left>
Tekstiä, joka alkaa kuvan alta näytön vasemmasta reunasta.

Selaimesi näyttää esimerkin näin:
Kuva banaanikotkasta Tekstiä joka tulee kuvan viereen.
Tekstiä, joka alkaa kuvan alta näytön vasemmasta reunasta.
Klikattavat kuvat eli kartat
WWW-sivuille on mahdollista tehdä myös kuvia, joissa voidaan herkistää alueita niin, että eri kuvan alueista klikkaamalla pääsee hyppäämään eri WWW-sivuille. Kartat on perinteisesti toteutettu niin, että palvelimessa on ohjelma, joka on tulkinnut asiakasohjelman lähettämät koordinaatit klikkauksen jälkeen, ja etsinyt sitten vastineen koordinaateille erillisestä karttatiedostosta, jossa kerrotaan minkä WWW-osoitteen on tarkoitus vastata koordinaattia. Tälle ns. palvelinkartalle on HTML 3.2:ssa olemassa vastine, jossa asiakasohjelmisto osaa tulkita myös koordinaatit ja niitä vastaavat URL:t.

Karttoja on yksinkertaisinta tehdä ohjelmistolla, joka antaa määritellä koordinaatit ja niitä vastaavat URL:t kuvasta hiirellä valitsemalla. Esimerkki tällaisesta ohjelmasta on Windows-ympäristössä toimiva Mapedit-ohjelma.
Palvelinkartat (Server Side Map)
Kartta, joka on tarkoitettu palvelimella olevan erillisen ohjelman tulkittavaksi toteutetaan seuraavalla tavalla:

1. Tehdään koordinaatit ja niitä vastaavat URL:t sisältävä karttatiedosto, esim. "kartta.map".

2. Lisätään HTML-tiedostoon seuraavan tapainen koodi:

<A HREF="http://www.helsinki.fi/cgi-bin/imagemap/~iankka/kartta.map">
<IMG SRC="http://www.helsinki.fi/~iankka/kuva.gif ISMAP"></a>

Esimerkin koodissa karttatiedoston nimeksi on annettu "kartta.map", ja se on sijoitettu HY:n atk-keskuksen Unix-koneessa tunnuksen "iankka" alihakemistoon "public_html". Huomaa, että koodissa mainitaan myös ohjelma, joka tulkitsee koordinaatit, "imagemap". Normaaliin kuvansijoittelukoodiin on lisätty tarkenne ISMAP, jotta selainohjelmisto tietäisi, että kuvaan kohdistuvat klikkaukset tulee välittää Imagemap-ohjelmalle.

Karttatiedoston "kartta.map" sisältö voisi olla esimerkiksi:

default "http://www.helsinki.fi/be/behelp.html"
#Banaanikotkan massu
circle "http://www.helsinki.fi/be/body.html" 42,37 60,25
#Banaanikotkan paa
circle "http://www.helsinki.fi/be/head.html" 21,16 26,25
#Banaanikotkan koivet
poly "http://www.helsinki.fi/be/feet.html" 48,58 51,72 61,73 45,81 40,81 34,83 30,79 31,74 37,73 39,58 47,58
#Banaanikotkan nena
poly "http://www.helsinki.fi/be/beak.html" 12,24 5,23 9,19 12,23

Tällaisen karttatiedoston voi luoda siis esimerkiksi Mapedit-ohjelmistolla. Huomaa, että palvelinkartoissa on oletus-URL, joka syötetään silloin kun käyttäjä klikkaa kartasta aluetta, jota ei ole tarkoitettu klikattavaksi. Ratkaisu on hieman kömpelö, koska aina ei ole olemassa oletustiedostoa, johon käyttäjä tällaisessa tilanteessa halutaan siirtää. Yksi vaihtoehto on antaa oletus-URL:ksi osoite http://www.helsinki.fi/cgi-bin/nph-null, joka on CGI-ohjelma, joka ei tee mitään.

Esimerkiksi näin:

#Oletusarvo: klikkaus ei tee mitään
default "http://www.helsinki.fi/cgi-bin/nph-null"

Asiakasohjelmistojen tukemat kartat (Client Side Map)
Asiakasohjelmiston tukemassa kartassa on se hyvä puoli, että asiakasohjelmisto voi itse tulkita koordinaatit eikä tietoa tarvitse käyttää palvelimella, joka hidastaa jonkin verran toimintaa. Keskeisin ero palvelinkarttoihin on, että koordinaatit ja niitä vastaavat URL:t kirjoitetaan tässä tapauksessa HTML-tiedostoon erillisen karttatiedoston sijasta. Useimmat ohjelmat, jotka osaavat tuottaa palvelinkarttoja, osaavat tuottaa myös client side -karttoja.

Client side -kartan käyttö voi näyttää esimerkiksi seuraavanlaiselta muun HTML-koodin seassa:

<IMG SRC="kuikka.gif" BORDER="0" USEMAP="#kartta">

<MAP NAME="kartta">
<AREA HREF=paa.html ALT="Kuikan kuula" SHAPE=rect COORDS="0,0,118,28">
<AREA HREF=massu.html ALT="Tipun massu" SHAPE=rect COORDS="184,0,276,28">
<AREA HREF=koivet.html ALT="Jalat" SHAPE=rect COORDS="118,0,184,28">
<AREA HREF=nokka.html ALT="Sen nokka" SHAPE=rect COORDS="276,0,373,28">
</MAP>

ISMAP-tarkenteen sijasta kuvan koodissa on siis tarkenne USEMAP, jolla kerrotaan minkä nimistä karttaa HTML-tiedostosta etsitään (esimerkissä "kartta"). MAP-kohdassa on lueteltu kartan koordinaatit, ja niitä vastaavat URL:t.

Client side -kartassa ei välttämättä tarvita oletus-URL:ia, koska asiakasohjelma voi yksinkertaisesti estää käyttäjää klikkaamasta alueita, joita ei ole herkistetty. Lisäksi tässä karttatyypissä voidaan esittää käyttäjälle klikkausta vastaava URL asiakasohjelmiston näytössä. AREA-koodin ALT-tarkentimella voidaan lisäksi esittää selväkielinen selostus kartan eri osien linkityksistä.
Linkit
Tekstien sisäiset linkit
Yksinkertaisin hypertekstilinkki, jonka HTML:llä voi tehdä on hyppy toiseen kohtaan samassa tekstissä. Tätä varten tarvitaan tekstistä NAME-koodilla nimetty kohta, johon hypätään, sekä ankkuri, josta hypätään nimettyyn kohtaan. Esimerkiksi tämän tekstin alku on nimetty seuraavalla koodilla:

<A NAME="ALKU"><H1>Johdatus HTML-kieleen</H1></A>.

Siten ankkurista

<A HREF="#ALKU">Alkuun</A>

pääsee hyppäämään tämän tekstin alkuun. Huomaa, että ankkurissa nimen eteen lisätään risuaita #.

Linkit muihin HTML-teksteihin
Ankkurin linkittäminen muihin teksteihin on helppoa, jos muut tekstit sijaitsevat samassa hakemistossa. Tällöin viittaus on muotoa:

<A HREF="tokateksti.html">Linkkiteksti</A>

Dokumentit kannattaa mahdollisuuksien mukaan pitää samassa hakemistossa. Näin dokumenttikokonaisuuden siirtäminen onnistuu helpommin ilman, että dokumenttien väliset viittaukset menevät rikki.

Jos "tokateksti.html" sijaitseekin alihakemistossa "muuta", on viittaus seuraavanlainen:

<A HREF="muuta/tokateksti.html">Linkkiteksti</A>

Polun voi määritellä myös suhteessa palvelimen juurihakemistoon. Jos siis esimerkiksi palvelimessa on juuressa alihakemisto "atkk" (http://www.helsinki.fi/atkk/) voi tässä hakemistossa oleviin tiedostoihin viitata seuraavasti:

<A HREF="/atkk/yleis/">HY:n atk-keskus, yleistä</A>

Huomaa, että esimerkissä on jätetty tiedoston nimi pois. Näin voi tietyissä palvelimissa tehdä silloin kun tiedoston nimi on "index.html"; tällöin riittää pelkkä viittaus hakemistoon. Edellisen esimerkin kanssa identtinen viittaus olisi siksi:

<A HREF="/atkk/yleis/index.html">HY:n atk-keskus, yleistä</A>

Muissa palvelinympäristössä voi oletustiedoston nimi olla jokin muu kuin "index.html".

Aina ei toisiin tiedostoihin voi viitata suhteellisen polun avulla. Näin on esimerkiksi silloin, kun teksti, johon linkitys tehdään, on toisella palvelimella.

Tällöin ankkurin muoto on seuraava:

<A HREF=URL>Linkkiteksti</A>

URL (Uniform Resource Locator) kertoo WWW-asiakkaalle missä koneessa ja hakemistossa teksti sijaitsee. Esim. URL

"http://www.helsinki.fi/ohjeet.html"

kertoo, että tiedosto "ohjeet.html" haetaan juurihakemistosta WWW-palvelimesta "www.helsinki.fi" http-protokollalla.

Yliopiston palvelimessa on käytössä myös tapa viitata käyttäjän kotihakemiston alihakemistossa "public_html" ($HOME/public_html) sijaitseviin teksteihin merkinnällä

"http://www.helsinki.fi/~käyttäjätunnus/"

Esim. linkki

<A HREF="http://www.helsinki.fi/~jpackale/html-opas.html">
HTML-opas</A>

viittaisi tähän opastetekstiin. Esimerkissä oleva aaltoviiva ~, eli tilde, saadaan PC-näppäimistöstä näppäilemällä Alt Gr+~ ja perään välilyönti. Aaltoviivan voi URL-viittauksissa korvata myös sekvenssillä %7e. Edellinen esimerkki olisi siis yhtä toimiva myös seuraavassa muodossa:

<A HREF="http://www.helsinki.fi/%7ejpackale/html-opas.html">
HTML-opas</A>

Jos tekstissä, johon linkillä viitataan on NAME-koodilla merkittyjä kohtia voi niihin viitata seuraavan esimerkin mukaisesti:

<A HREF="http://www.helsinki.fi/~jpackale/html-opas.html#otsikko">Tämä
linkki</A> veisi tässä tekstissä olevaan kohtaan, joka on
NAME-koodilla nimetty "otsikko"-nimiseksi.

URL:t kannattaa aina laittaa lainausmerkkien sisään. Lisäksi URL:t on syytä pitää yhdellä rivillä.
Linkit muihin verkkoresursseihin
Edellä on käsitelty linkkejä kuviin ja muihin HTML-teksteihin. Linkkejä voi tehdä kuitenkin myös muihin verkon resursseihin kuten Gopher-valikoihin tai -teksteihin ja esim. Usenet News -järjestelmän uutisryhmiin. Esimerkiksi näin:

gopher://gopher.helsinki.fi/11/.events/events
Gopher-valikko (HY:n gopherin tapahtumakalenteri)
ftp://ftp.helsinki.fi/public_disk/pub/
Anonymous FTP-arkisto
news:hy.atk.hypermedia
Usenet News -kokous
telnet://hello%20jokunen,clas02@hyk.helsinki.fi
Telnet-yhteys kirjastokoneeseen (käyttäjätunnus ennen @-merkkiä ei yleensä välity automaattisesti)
file:///r|/bookmarks.htm
Paikallinen tiedosto R:-levyllä (PC-koneessa)

Esim. koodi:

<A HREF="gopher://gopher.helsinki.fi/11/">HY:n gopher-palvelin</A>

linkittäisi tekstin Helsingin yliopiston gopher-palvelimen päävalikkoon.

Verkosta löytyy kosolti lisätietoa URL:istä.

Osoitteet
Tekijän sähköpostiosoite kannattaa mainita HTML-dokumenteissa. Mm. seuraavia koodeja voi käyttää tekijän ilmoittamiseksi:

<ADDRESS>kirjoittaja@kone.jossakin</ADDRESS>
Tyyli sähköpostiosoitteiden ilmoittamista varten.
Eräs konventio Webissä on, että kirjoittaja ilmoittaa tekstiensä lopussa osoitteensa ADDRESS-tyylin avulla.
<A HREF="MAILTO:sähkö@posti.osoite">Linkkisana</A>
MAILTO-metodilla voi luoda linkin, jonka avulla tekstin lukijat voivat lähettää sähköpostiviestin tekstin kirjoittajalle (ei toimi kaikilla asiakasohjelmistoilla).

Lomakkeet
HTML-kielellä voi myös rakentaa lomakkeita (form), joilla saa järjestettyä mitä erilaisimpia tiedonkeruupalveluita (tilaus- jne. lomakkeet, tietokantakyselyt, pelit) jne.

Lomakkeissa on mukana esim. Windowsista tuttuja käyttöliittymäelementtejä:

* tekstikenttiä (täytetään tekstillä)
* valintakytkimiä: päällä/pois, yksi päällä/muut pois
* valintalistoja

Lomake on kokoelma kenttiä, joiden arvot pyydetään käyttäjältä. Lomakkeeseen eli kenttiin täytetyt tiedot käsittelee http-palvelimeen ohjelmoitava CGI-ohjelma, minkä takia kehittyneiden lomakepohjaisten palveluiden teko vaatii yhteyttä ylläpitoon.

Helpoiten lomakkeiden käytön niksejä oppii valmiiden lomakkeiden HTML-koodista.
Lomakkeen määrittely
HTML-sivulle tehdään lomake <FORM>...</FORM>-koodilla. Lomakkeen aloittavassa FORM-koodissa kerrotaan millä tavalla lomakkeeseen annetut tulokset käsitellään:

<FORM METHOD="POST" ACTION="http://www.helsinki.fi/cgi-bin/ohjelma">

Joskus tulee vastaan ohjelmia jotka vaativat muotoa:

<FORM METHOD="GET" ACTION="http://www.helsinki.fi/cgi-bin/ohjelma">

Ero POST ja GET -tapojen välillä on tekninen, lomakkeen käsittelevän ohjelman mukaan (osa toimii vain jommalla kummalla). Koska jokaiseen lomaketta käsittelevään ohjelmaan käytännössä liittyy käyttöohje, ei tästä tule ongelmia.

Näppärä ohjelma lomakkeiden testaukseen on http://www.helsinki.fi/cgi-bin/dump-all joka vain näyttää kaiken lomakkeen käsittelevälle ohjelmalle välitetyn tiedon (myös täytetyt kenttien arvot).

Lomakkeen sisällä voi käyttää kaikkia normaaleja HTML-koodeja. Ota huomioon että eri WWW-ohjelmilla lomakkeen kentät eivät välttämättä asetu näytölle samalla tavalla. Lomakkeen lopettaa </FORM>-koodi.
Kenttien määrittely
Lomakkeen kentät eli täytettävät aukkopaikat määritellään INPUT-koodilla:

<INPUT TYPE="tyyppi" NAME="nimi" VALUE="arvo">

Tässä nimi on kentän nimi, arvo sen arvo. Kullakin kentällä lomakkeessa pitää olla yksikäsitteinen nimi.

Kentän tyyppi vaikuttaa siihen miten kenttä käyttäytyy ruudulla:

TYPE="text"
Tekstikenttä, johon kirjoitetaan tekstiä. Kentän ruudulla näkyvän koon voi kertoa SIZE="koko_merkkeinä", maksimissaan kenttään otettavan tiedon määrää MAXLENGTH="maksimikoko". Alkuarvon voi kertoa VALUE:lla.
TYPE="radio"
Valintanappuloita, joista vain yksi kerrallaan on valittuna. VALUE kertoo mikä valinta oli aktiivinen kun lomake oli valmis. NAME kertoo mihin valintaryhmään nappula kuuluu, joten saman ryhmän nappuloilla se pitää olla sama. Lisämääre CHECKED esivalitsee vaihtoehdon.
TYPE="checkbox"
Ruksattava ruutu, joka voi olla päällä tai pois. Koska kukin kenttä voi olla valittuna tai ei, pitää kullakin olla oma nimensä. VALUE kertoo minkä arvon kenttä saa jos se on valittuna (muuten arvo on "ON"). Lisämääre CHECKED esivalitsee ruudun.
TYPE="submit"
Painike, jolla lomakkeen tulokset lähetetään ACTION-kohdassa kerrotulle ohjelmalle. VALUE kertoo mitä painikkeessa lukee.
TYPE="reset"
Painike, joka tyhjentää kentät oletusasetuksiin. VALUE kertoo mitä painikkeessa lukee.
TYPE="image"
Tekee lomakkeen lähetyspainikkeen haluamastasi kuvasta.
Esim. <INPUT TYPE=image SRC=kuva.gif VALUE="Lähetä">
Image-lähetyspainikkeessa voi HTML 3.2:ssa käyttää samoja kuvan sijoittelumenetelmiä kuin muiden kuvien kohdalla.
TYPE="password"
Tekstikenttä, johon kirjoittava teksti ei näy ruudulla, mutta kulkee kyllä verkossa ja tulee lomaketta käsittelevälle ohjelmalle selväkielisenä. Tästä ei siis ole oikeiden salasanojen välittämiseen.
TYPE="file"
Kenttä, joka mahdollistaa tiedostojen liittämisen lomakkeeseen. Asiakasohjelmisto asettelee kentän viereen normaalisti painikkeen, josta klikkaamalla pääsee selaamaan paikallisen levyn sisältöä.
Liitetiedostojen lähettäminen onnistuu kunnolla vain, jos FORM-koodille on määritelty tarkenne ENCTYPE="multipart/mime".
TYPE="hidden"
Piilokenttä, jota ei näytetä lomakkeen käyttäjälle. Piilokentällä voidaan välittää lomakkeen mukana tietoa lomaketta käsittelevälle ohjelmalle ilman että käyttäjän tarvitsee nähdä tietoa.

Valintalistat
Jos jonkin tietyn asian vaihtoehtoja on paljon, on siistimpää käyttää valintalistaa:

<SELECT NAME="nimi">
<OPTION>Eka vaihtoehto
<OPTION>Toka vaihtoehto
<OPTION SELECTED>Kolmas vaihtoehto
</SELECT>

MULTIPLE mahdollistaa useamman kohdan valitsemisen kerrallaan, SIZE="x" tekee selauslistan jossa on kerrallaan näkyvissä x kohtaa: <SELECT NAME="hedelmä" SIZE="5" MULTIPLE>. SELECTED esivalitsee halutun vaihtoehdon OPTION-koodissa.

Tekstilaatikot
Useamman rivin tekstiä voi pyytää TEXTAREA-koodilla

<TEXTAREA NAME="nimi" ROWS="rivit" COLS="sarakkeet">
Tässä voi antaa tekstin oletusarvon
</TEXTAREA>

Tekstialueen täyttäminen, etenkin riviltä toiselle siirtyminen tapahtuu eri WWW-ohjelmissa hiukan eri tavoilla. Myös annettu teksti saattaa päätyä olemaan kaikki yhdellä rivillä ellei lomakkeen täyttäjä paina Enter-näppäintä joka rivin lopussa.
Piilokentät
Sama ohjelma voi käsitellä hyvin erilaisten lomakkeiden tuloksia, jos sille voidaan jotenkin kertoa kuhunkin lomakkeeseen liittyvät asiat. Tämä onnistuu piilokentillä:

<INPUT TYPE="hidden" NAME="nimi" VALUE="arvo">

Piilokentät eivät näy ruudulla mitenkään (mutta ne saa toki näkyviin lomakkeen koodista, joten kovin salaisia asioita ei voi piilottaa tännekään).

Esimerkiksi htgrep ja postitalomake-ohjelmille kerrotaan etsittävän tiedoston nimi ja lomakkeen vastaanottajan sähköpostiosoite piilokentillä. Osa WWW-ohjelmista ei pidä HTML-koodeista piilokenttien VALUE-kohdassa.

Helpoiten lomakkeiden käytön niksejä oppii valmiiden lomakkeiden HTML-koodista.
[HTML 3.2]Taulukot
Taulukot ovat hyvin käyttökelpoinen HTML:n piirre. Taulukon avulla voidaan asetella elementtejä sivulle joustavammin sijoittamalla elementit taulukon soluihin. Edelleen talukoilla voidaan vaikkapa palstoittaa tekstiä. Huomaa kuitenkin, että tuki taulukoille eri selaimissa on hyvin vaihteleva, ja taulukkojen käyttö saattaa tuottaa hyvinkin yllättäviä tuloksia ennen kuin HTML 3.2 vakiintuu.

Taulukot selittyvät helpoiten esimerkkien kautta. Keskeisimmät koodit taulukoissa ovat taulukon koodi (TABLE), solu (TD, table data), otsakesolu (TH, table header) ja rivinvaihto (TR). Esimerkin 1. taulukossa on neljä solua, 2 kummallakin rivillä. Huomaa, että taulukossa yksi loppukoodi on kriittinen: jos </TABLE> puuttuu, ei taulukko näy välttämättä lainkaan. Muista koodeista voi jättää loppukoodin pois, mutta jos taulukko näyttäytyy yllättävällä tavalla, kannattaa yrittää korjata tilanne tarkistamalla, että jokaiselle taulukkokoodille löytyy pari. Esimerkissä on hyvän tavan mukaisesti käytetty sisennyksiä koodin lukemisen helpottamiseksi.

Esimerkki 1.

<TABLE>
<TR>
<TD>
Ensimmäisen solun sisältö
<TD>
Toisen solun sisältö
<TR>
<TD>
Kolmannen solun sisältö
<TD>
Neljännen solun sisältö
</TABLE>

Selaimesi näyttää esimerkin taulukon näin:

Ensimmäisen solun sisältö Toisen solun sisältö
Kolmannen solun sisältö Neljännen solun sisältö

TABLE-koodissa on seuraavat tarkentimet:

ALIGN
tasaa taulukon joko näytön vasempaan laitaan (LEFT, oletusarvo), keskelle (CENTER), tai oikeaan laitaan (RIGHT)
huom! juuri ennen taulukkoa määritelty <P ALIGN=jotakin> tai CENTER -koodi voi kumota tämän märityksen
WIDTH=n tai WIDTH=n%
määrittelee taulukon leveyden joko pikseleinä tai suhteutettuna näytön leveyteen
BORDER=n
tekee taulukon soluille reunukset, joiden leveys annetaan pikseleinä
CELLSPACING=n
tekee solujen väliin tyhjää tilaa (yksikkö: pikselit)
CELLPADDING=n
tekee solun reunan ja sisällön väliin tyhjää tilaa

Esimerkissä 2. yksinkertaisessa taulukossa on käytetty ym. vaihtoehtoja:

<TABLE ALIGN=center BORDER=4
WIDTH="50%" CELLSPACING=10 CELLPADDING=25>
<TR>
<TD>
Ensimmäisen solun sisältö
<TD>
Toisen solun sisältö
<TR>
<TD>
Kolmannen solun sisältö
<TD>
Neljännen solun sisältö
</TABLE>

Selaimesi näyttää esimerkin taulukon näin:

Ensimmäisen solun sisältö Toisen solun sisältö
Kolmannen solun sisältö Neljännen solun sisältö

TR-koodilla on seuraavat tarkenteet:

ALIGN
solujen sisältöjen tasaus vaakatasossa
arvot LEFT, CENTER ja RIGHT
VALIGN
solujen sisältöjen tasaus pystysuunnassa
arvot TOP, MIDDLE, BOTTOM

TD-koodilla on seuraavat tarkenteet:

NOWRAP
estää solun sisällön rivittymisen
ALIGN ja VALIGN
kuten TR-koodissa
huom! kumoaa TR:llä tehdyn määrityksen solussa
WIDTH=n
solun leveys pikseleissä
solun korkeus pikseleissä

TH-koodissa pätevät edellisten lisäksi seuraavat tarkentimet:

ROWSPAN=n
tekee taulukon otsakesolusta n:n solun levyisen
COLSPAN=n
tekee taulu otsakesolusta n:n solun korkuisen

Seuraava esimerkki esittelee yllä mainitut tarkentimet.

Esimerkki 3.

<TABLE ALIGN=center BORDER=4
WIDTH="50%" CELLSPACING=10 CELLPADDING=25 >
<TR>
<TH COLSPAN=2>
Kahden solun levyinen otsakesolu
<TR ALIGN=right VALIGN=bottom>
<TD>
Ensimmäisen solun sisältö
<TD>
Toisen solun sisältö
<TR>
<TD NOWRAP>
Kolmannen solun sisältö
<TD ALIGN=left VALIGN=top>
Neljännen solun sisältö
</TABLE>

Selaimesi näyttää esimerkin taulukon näin:

Kahden solun levyinen otsakesolu
Ensimmäisen solun sisältö Toisen solun sisältö
Kolmannen solun sisältö Neljännen solun sisältö

Vinkkejä taulukoiden tekoon
Pidä mielessäsi, että taulukoiden soluihin voi sijoittaa myös kuvia IMG-koodilla. Lomakkeistakin saa siistimmän näköisiä sijoittamalla lomake-elementit taulukon sisään.

Taulukoita voi laittaa myös sisäkkäin:

<TABLE BORDER=1>
<TR>
<TD>
<TABLE BORDER=1>
<TR>
<TD>
Toisen taulukon 1. solu
<TD>
Toisen taulukon 2 solu
<TR>
<TD>
Toisen taulukon 3 solu
<TD>
Toisen taulukon 4 solu
</TABLE>
<TD>
Toisen solun sisältö
<TR>
<TD>
Kolmannen solun sisältö
<TD>
Neljännen solun sisältö
</TABLE>

Selaimesi näyttää lopputuloksen näin:

Toisen taulukon 1. solu Toisen taulukon 2 solu
Toisen taulukon 3 solu Toisen taulukon 4 solu
Toisen solun sisältö
Kolmannen solun sisältö Neljännen solun sisältö
HTML-koodin kirjoittamisen tyyliohjeita
HTML-koodia kirjoitettaessa kannattaa tehdä mahdollisimman helposti luettavaa ja muokattavaa koodia. Koodin tulee olla paitsi sellaista, että siitä saa helposti selvää, myös sellaista, että itse tietosisällön päivittäminen on helppoa ihmiselle, joka ei hallitse HTML-kieltä.

1. Muista kommentoida koodi.
2. Kirjoita väljää koodia.
3. Erota HTML-koodit selvästi muusta tekstistä (esim. ISOT KIRJAIMET).
4. Kirjoita HTML-koodit ja itse teksti omille riveilleen, tietysti kohtuuden rajoissa.
5. Käytä sisennyksiä koodissasi: koodin luettavuus paranee.
6. pidä huolta siitä, että jokaisella koodilla on parinsa (myös BODY - ja HTML - koodit).
7. Laita URLit ja tiedostonnimet lainausmerkkien sisään.
8. Huomioi isojen ja pienten kirjainten välisen eron merkitsevyys URLeissa ja tiedostonnimissä.
9. Älä jaa URLeja kahdelle riville.
10. Koodi, jossa on tarkenteita voidaan jakaa kahdelle riville.

Vinkkejä HTML-tekstien kirjoittajille
Seuraavassa esitetään muutamia yleisluontoisia ohjeita WWW-dokumenttien tekemiseen.

Koska eri asiakasohjelmat näyttävät HTML-koodit eri tavoilla, kannattaa tekstit aina testata useilla selainohjelmistoilla, ainakin Lynxillä ja Netscapella tai Internet Explorerilla.

Tekstin lukeminen näytöltä on huomattavasti raskaampaa kuin paperilta lukeminen. Teksti kannattaa tästä syystä pitää suhteellisen väljänä visuaalisesti ja sisällöltään tiiviinä.

Tekstejä kirjoittaessa kannattaa ottaa mallia verkosta löytyvistä hyvin toteutetuista dokumenteista. HTML-dokumenttien lähdekoodia pääsee tutkimaan useimpien Web-asiakasohjelmien avulla. Esim. Lynxissä lähdekoodiin pääsee tutustumaan komennolla \ ja useimmista graafisista lukijoista löytyy View Source vaihtoehto joko View- tai Edit-valikossa. Huomaa, että WWW-sivuilla on käytössä myös muita tekniikoita kuin HTML (esim. Java), joten lähdekoodi ei välttämättä paljasta miten sivu kokonaisuudessaan on rakennettu.

Valitse linkkisanat huolellisesti: "Lisätietoa airoista löydät tästä" on huonoa hypertekstiä. Asian voisi kertoa esim. "Katso melontaseuran ohjeet airoista".

Jos verkkoon esiin laitettu tieto on luonteeltaan päivitettävää, kannattaa sivun loppuun lisätä tieto siitä, milloin tekstiä on viimeksi päivitetty sekä kehen voi ottaa yhteyttä päivitysehdotuksia koskevissa asioissa.

Jos kirjoitetulle HTML-tekstien kokoelmalle on olemassa mielekäs tulkinta niiden keskinäisestä järjestyksestä, kannattaa tekstin loppuun tehdä linkki seuraavaan ja edelliseen tekstiin sekä mahdolliseen sisällysluetteloon tai kotisivuun.

Koska useilla käyttäjillä on hidas linja käytössään, kannattaa liiallista kuvien käyttöä välttää. Isoja kuvia ei koskaan kannata laittaa automaattisesti siirrettävinä (in-line image) Web-sivuille. Parempi tapa on tehdä linkki, josta käyttäjä pääsee katselemaan kuvaa niin halutessaan. Webissä yksi sana kertoo enemmän kuin tuhat kuvaa, joiden hakemiseen menee ikuisuus...

Myös liiallista graafisten karttojen ("klikattavien kuvien") käyttöä kannattaa välttää. Jos karttoja kuitenkin käytetään, kannattaa oheen laittaa myös tekstilista, josta pystyy valitsemaan samat asiat kuin kartasta.

Isoihin dokumentteihin (erityisesti äänet, kuvat, animaatiot) johtavissa linkeissä on hyvä tapa ilmaista linkin kautta haettavan dokumentin koko tavuissa, esim.


Enter supporting content here

powered by lycos
SEARCH:Tripod The Web

Lycos MP3 Search

Artist or Song Name:

playstation_logo.jpg

Search this site or the web powered by FreeFind

Site search Web search