WWW-dokumentit eli WWW-sivut laaditaan HTML-merkintäkielellä (HTML = HyperText Markup Language). Dokumenttiin lisätään tekstisisällön lisäksi ohjeita tekstinosien (elementtien) loogisen rakenteen ja ulkoasun määrittelemiseksi. Ohjeet kirjoitetaan dokumenttiin tarkasti määriteltyjen koodien eli tagien avulla. Tekstin lisäksi dokumentissa voi olla viittauksia kuviin, äänitiedostoihin ja muihin sovelluksiin sekä linkkejä.

HTML-dokumentit ovat aina ASCII-muotoisia tekstitiedostoja. Dokumenttien tarkennin on .html (DOS-käyttöjärjestelmässä .htm). Tiedosto index.html (huomaa tarkennin .html) on kunkin hakemiston oletustiedosto, jonka palvelinohjelmisto hakee automaattisesti, jos hakupyynnössä ei ole nimetty mitään tiedostoa. Kuvat ja muut sovellukset haetaan aina erikseen dokumentissa olevien viittausten perusteella. HTML-dokumentteja voidaan kirjoittaa millä hyvänsä editorilla, joka tallentaa tiedostot ASCII-muotoon, esimerkiksi Notepad, Emacs tai Pico. Myös tekstinkäsittelyohjelmat käyvät, kun muistaa valita tallennusmuodoksi ASCII-muodon. Työskentelyä voi tehostaa käyttämällä erityisiä HTML-editoreita, esimerkiksi HTMLed, Front Page ja Emacsin HTML-moodi. Muiden ohjelmien (Word, Excel jne) tuottamia dokumentteja voidaan konvertoida HTML-tiedostoiksi sopivilla apuohjelmilla.

HTML-dokumentit WWW-palvelimella

Dokumenttien käyttöönotto

Valmiit HTML-dokumentit sijoitetaan käytettävissä olevalle WWW-palvelimelle, yleensä oman kotihakemiston alihakemistoon public_html.

Dokumentit voidaan kirjoittaa suoraan tekstieditorilla tai jollakin HTML-editorilla.

Lopullinen dokumentti siirretään omaan public_html-hakemistoon. Varsinaiset HTML-dokumentit (.htm tai .html) siirretään ascii-muodossa ja dokumentteihin mahdollisesti liittyvät kuvat (.gif, .jpg jne.) ja muut binääritiedostot binäärimuodossa.

Dokumentteihin pitää olla lukuoikeus (r) kaikilla (ryhmä (g) ja kaikki muut (o)) ja hakemistoihin suoritusoikeus (x). Seuraavassa on ohjeet hakemiston luomiseen ja tarvittaviin muutoksiin:

Hakemiston luominen ja suoritusoikeus hakemistoihin (nämä komennot tehdään kerran):

mkdir ~/public_html
chmod go=x ~
chmod go=x ~/public_html

Dokumentteihin lukuoikeus (tehdään aina, kun on lisätty uusia HTML-dokumentteja tai korvattu vanhoja ftp:llä tuoduilla dokumenteilla):

chmod go=r ~/public_html/*

Huomautus: Monilla Unix-palvelimilla (mm. HTOL:n viikonpäiväpalvelimet) on käyttäjän uusien tiedostojen oletussuojaus rw-r--r--, jolloin dokumenttien suojausta koskeva komento ei ole välttämätön.

Mikrotietokoneella laadittujen dokumenttien nimiä ei tarvitse muuttaa, ellei dokumenttia ole tarkoitettu hakemiston oletussivuksi eli kotisivuksi. Hakemiston oletussivun nimenä on oltava index.html (huomaa 4 kirjainta tarkentimessa).

Vihje: Jos muuttelet kotisivuasi usein mikrotietokoneella, on tiedoston nimi index.htm siis aina muutettava nimeksi index.html, kun kotisivun uusi versio on siirretty ftp:llä mikrolta Unix-palvelimelle. Tätä ei tarvitse tehdä, jos teet seuraavan linkin:
ln -s ~/public_html/index.htm ~/public_html/index.html
Nimi index.html viittaa tällöin automaattisesti tiedostoon index.htm. Jos haluat muuttaa kaikki .htm-loppuiset tiedostot .html-loppuisiksi, voit käyttää siihen sopivaa komentotulkin skriptiä.

Varsinaisten HTML-dokumenttien lisäksi voi poikkeustapauksissa WWW-sivuina olla myös paljaita ascii-tekstitiedostoja. Tällaisten tiedostojen tarkentimena ei saa olla .htm tai .html, vaan esimerkiksi .txt tai .c. WWW-selaaja näyttää tällaisen sivun sellaisenaan tasavälisellä merkkilajilla rivinvaihtoineen (kuten tagilla PRE-määritelty teksti HTML-dokumentissa).

WWW-dokumenttien käyttö

Omiin dokumentteihin (HTOL:n palvelimella) viitataan osoitteella

http://www.edu.teli.stadia.fi/~omatunnus/dokumentti

esimerkiksi

http://www.edu.teli.stadia.fi/~99999999/pullat.htm
http://www.edu.teli.stadia.fi/~99999999/

Oletustiedostoa index.html ei tarvitse kirjoittaa.

HTML-dokumentin rakenne

HTML-tiedoston pohja

HTML (HTML-tiedosto)

Dokumentti määritellään HTML-tiedostoksi tagien <HTML></HTML> avulla.

HEAD, TITLE (otsikko)

Tiedostossa tulisi olla otsikko-osa (<HEAD></HEAD>), johon kirjoitetaan dokumentin otsikko tagien <TITLE></TITLE> väliin. Dokumentin otsikko tulee näkyviin selaajaohjelman otsikkopalkkiin. Otsikko tallentuu myös kirjanmerkin nimeksi.

BODY (sisältö)

Dokumentin varsinainen sisältö kirjoitetaan tagien <BODY></BODY> väliin.

HTML-standardi edellyttää lisäksi dokumentin alkuun DOCTYPE-elementtiä, jolla ilmoitetaan dokumentissa käytetty HTML-standardi.

Minimipohja HTML-tiedostolle (pohja.html) on siis:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Tähän dokumentin otsikko</TITLE>
</HEAD>
<BODY>
Tähän varsinainen sisältö.
</BODY>
</HTML>

Näiden lisäksi suositellaan, että dokumentissa on mainittu sen URL, tekijä ja dokumentin luonti- ja päivityspäivät. Jos dokumentti on osa laajempaa kokonaisuutta, on siinä syytä olla linkki kyseisen kokonaisuuden pääsivulle. Jos dokumentti on osa laajempaa kokonaisuutta, on syytä noudattaa siinä asetettuja standardeja.

Alla on eräs mahdollinen mallipohja (malli.html). Kaikkia kenttiä ei aina tarvitse käyttää. Kommentit on kirjoitettu tagien  väliin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>HTML-malli (HTOL)</TITLE>
</HEAD>
<BODY>
Tähän varsinainen sisältö.
<HR>
<!-- Korvaa Olli Opiskelija omalla nimelläsi.  -->
<!-- Korvaa oopiskel omalla login-tunnuksellasi.   -->
<!-- Korvaa Olli.Opiskelija@stadia.fi omalla sähköpostiosoitteellasi.   -->

<A HREF="mailto:Olli.Opiskelija@stadia.fi">Olli.Opiskelija@stadia.fi</A><P>
<A HREF="http://www.teli.stadia.fi/">Helsingin teknillinen oppilaitos</A><P>
<HR>
Tämän dokumentin osoite on
<!-- Korvaa oopiskel omalla login-tunnuksellasi.   -->
<!-- Korvaa malli.htm dokumentin oikealla nimellä.   -->
<CODE>
http://www.teli.stadia.fi/~oopiskel/malli.htm
</CODE>
<P>
Tämä dokumentti on laadittu pp.kk.vvvv (päivitetty pp.kk.vvvv).
</BODY>
</HTML>

Tallenna yllä esitellyt mallitiedostot itsellesi ja muokkaa niitä haluamallasi tavalla.

Otsikot

Otsikkoelementtejä käytetään dokumentin jäsentelemiseen. HTML-standardissa on 6 eri otsikkotasoa:

H1, H2, H3, H4, H5, H6 (otsikot)

<H1>Ylin taso</H1>
<H2>2. taso</H2>
<H3>3. taso</H3>
<H4>4. taso</H4>
<H5>5. taso</H5>
<H6>6. taso</H6>

Katso esimerkkitiedostoa (otsikot.html). Otsikkotasoja on käytettävä johdonmukaisesti; yleensä 2-3 ylintä tasoa riittää. Laajat ja monitasoiset julkaisut kannattaa jakaa eri tiedostoihin.

Normaali teksti

Kappaleet

HTML-dokumenttiin tehdyllä rivinvaihdolla ei ole mitään vaikutusta (poikkeuksena tagien <PRE></PRE> ympäröimä teksti). Rivien pituudet riippuvat yleensä selailuohjelman käyttäjän valitsemasta ikkunan leveydestä.

P (kappale)

Kappale aloitetaan kappaletagilla . Selaajaohjelmat jättävät kappaleiden väliin yleensä tyhjää (riippuu ohjelmasta). Kappaleet muotoillaan oletusarvoisesti vasemmalle tasattuina. Tätä voi muuttaa attribuutilla ALIGN. Attribuutti voi saada arvot LEFT, CENTER tai RIGHT, esimerkiksi . Attribuutteja käytettäessä on kappaleen loppuun hyvä kirjoittaa myös kappaleen lopetustagi .

BR (rivinvaihto)

Rivinvaihtoja voidaan tehdä rivinvaihtotagilla  . Tätä käytettäessä rivien väliin ei jää tyhjää. Attribuutilla CLEAR voi rivin alkamiskohtaa siirtää esimerkiksi kuvan alapuolelle. Attribuutti voi saada arvot LEFT, RIGHT tai ALL, esimerkiksi  .

Tekstin looginen merkitseminen

WWW-sivujen kuvauskielen (HTML) alkuperäisenä tarkoituksena oli tarjota menetelmä dokumenttien loogisen rakenteen merkitsemiseen. Tässä korostetaan siis näkökulmaa dokumentin rakenteeseen, ei niinkään sen ulkoasuun.

EM (emphasis), STRONG

Tekstiä voidaan korostaa loogisilla merkinnöillä

tekstiä: Lievä korostaminen (emphasis) tai
tekstiä: Vahva korostaminen

Selaajaohjelmat näyttävät loogisilla tageilla EM ja STRONG merkityt tekstit yleensä samoin kuin fyysisillä tageilla  (italic, kursivoitu) ja  (bold, lihavoitu) merkityt tekstit.

CODE (ohjelmakoodi), BLOCKQUOTE (lainaus), ADDRESS (yhteystiedot)

Muita hyödyllisiä ja suositeltavia loogisia tageja ovat mm:

<CODE>tekstiä</CODE>: Tällä tagilla merkitään tekstin lomassa olevat ohjelmakoodiesimerkit tai vastaavat. Graafinen WWW-selaaja näyttää tällä tagilla merkityn tekstin yleensä tasavälisellä merkkilajilla (Courier tai vastaava).
<BLOCKQUOTE>tekstiä</BLOCKQUOTE>: Tällä tagilla merkitään dokumentissa olevat pitkähköt lainaukset. WWW-selaaja näyttää tällä tagilla merkityn tekstin yleensä erillisenä sisennettynä kappaleena.
<ADDRESS>tekstiä</ADDRESS>: Tällä tagilla merkitään dokumentin kirjoittajan yhteystiedot. Eri WWW-selaajat näyttävät tämän eri tavoin.

Esimerkki (loogmerk.html):

Tässä kappaleessa on <EM>lievästi korostettua</EM> ja
<STRONG> vahvasti korostettua</STRONG> tekstiä. <P>

C-ohjelman alkuun tulee tavallisesti rivi
<CODE>#include<stdio.h></CODE>.<P>

Robert Louis Stevenson aloittaa Aarresaaren seuraavasti:
<BLOCKQUOTE>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these
gentlemen having asked me to write down the whole
particulars about Treasure Island, from the beginning
to the end, keeping nothing back but the bearings of the
island, and that only because there is still treasure not
yet lifted, I take up my pen in the year of grace 17__
and go back to the time when my father kept the Admiral
Benbow inn and the brown old seaman with the sabre cut
first took up his lodging under our roof.
</BLOCKQUOTE>

Tekstin fyysinen merkitseminen

Tekstin fyysisellä merkitsemisellä halutaan vaikuttaa suoraan tekstin ulkoasuun. Fyysisiä tageja ovat mm:

I (kursivoitu), B (lihavoitu), U (alleviivattu)

tekstiä: Kursivoitu teksti. Voidaan korvata loogisella tagilla EM.
tekstiä: Lihavoitu teksti. Voidaan korvata loogisella tagilla STRONG.
tekstiä: Alleviivattu teksti. Tämän tagin käyttöä ei suositella, koska WWW-selaajat näyttävät usein linkit alleviivattuina.

SUB, SUP (ala- ja yläindeksi)

tekstiä
tekstiä: Ala- ja yläindeksi. Näkyy vain uusilla graafisilla WWW-selaajilla. Matemaattisten lausekkeiden ym. kirjoittamiseen ei toistaiseksi ole muita HTML-elementtejä.

BIG, SMALL

<BIG>tekstiä</BIG>
tekstiä: Normaalitekstiä suurempaa ja pienempää tekstiä. Tagia SMALL voi käyttää esimerkiksi dokumentissa oleviin huomautuksiin ("petiitillä" painettu teksti). Tagin BIG käytölle normaalin tekstin lomassa on harvoin perusteita (STRONG tai B yleensä riittää).

FONT (koko ja väri)

Tekstin kokoa ja väriä voi muuttaa FONT-tagilla seuraavasti:

tekstiä: Tämä tagi määrittelee tekstin koon. Parametrin n arvona voi olla absoluuttinen koko. Mahdollisia arvoja ovat luvut 1-7 (1 pienin, 3 normaali, 7 suurin). Parametrin arvona voi olla myös koon muutos suhteessa vallitsevaan tekstin kokoon, esimerkiksi +2 tai -1. Huomaa, että tekstin koko riippuu viime kädessä dokumentin lukijan käyttämistä perusasetuksista.
tekstiä: Tämä tagi määrittelee tekstin värin. Parametrin väri arvona voi olla värin nimi (esimerkiksi red, blue jne.) tai värin RGB-arvo (esimerkiksi "#FF00FF" eli magenta).

Fyysisiä tageja (ertyisesti FONT-tagia) on syytä käyttää harkitusti.

Huomaa, että merkkipohjaisissa WWW-selaajissa (esimerkiksi lynx) ei useimmilla fyysisillä tageilla ole vaikutusta. Kursivoidut ja lihavoidut tekstit näkyvät todennäköisesti alleviivattuina.

Katso seuraavaa esimerkkiä eri WWW-selaajilla (fyysmerk.html):

Normaalia tekstiä, <I>kursivoitua tekstiä</I>, <B>lihavoitua
tekstiä</B> ja <U>alleviivattua tekstiä</U>.<P>
Yhtälön <I>x<SUP>3</SUP> = 27</I> ratkaisu on <I>x = 3</I>.<P>
H<SUB>2</SUB>O on terveellisempää kuin
C<SUB>2</SUB>H<SUB>5</SUB>OH.<P>
Normaalia tekstiä, <BIG>suurta tekstiä</BIG> ja
<SMALL>pientä tekstiä</SMALL>. <P>
Normaalia tekstiä ja <FONT SIZE="7">jättisuurta (7) tekstiä</FONT>. <P>
Normaalia tekstiä ja <FONT SIZE="6">hyvin suurta (6) tekstiä</FONT>. <P>
Normaalia tekstiä ja <FONT SIZE="5">suurta (5) tekstiä</FONT>. <P>
Normaalia tekstiä ja <FONT SIZE="4">suurehkoa (4) tekstiä</FONT>. <P>
Normaalia tekstiä ja <FONT SIZE="3">normaalia (3) tekstiä</FONT>. <P>
Normaalia tekstiä ja <FONT SIZE="2">pientä (2) tekstiä</FONT>. <P>
Normaalia tekstiä ja <FONT SIZE="1">pikkuruista (1) tekstiä</FONT>. <P>
<FONT SIZE="5">
<FONT COLOR=red>Punaista</FONT>,
<FONT COLOR=blue>sinistä</FONT>,
<FONT COLOR=green>vihreätä</FONT>,
<FONT COLOR=gray>harmaata</FONT>,
<FONT COLOR=yellow>keltaista</FONT>,
<FONT COLOR=white>valkoista</FONT>,
ja vielä
<FONT COLOR="#FF80FF">nimetöntä väriä</FONT>
<P>
</FONT>

Tekstin asettelu

Tekstin asettelu ja dokumenttien taittaminen (layout) ei kuulu HTML:n alkuperäiseen filosofiaan. WWW:n käytön laajentuminen on johtanut siihen, että HTML-standardiin on lisätty joitakin dokumentin taittamista mahdollistavia elementtejä. Monia loogisia elementtejä käytetään lisäksi tekstin asetteluun vastoin näiden alkuperäistä ideaa.

Huomaa erityisesti, että HTML ei tunne sarkaimia.

Seuraavia elementtejä ja attribuutteja voidaan käyttää jossain määrin tekstin asetteluun.

PRE (esimuotoiltu)

<PRE>tekstiä</PRE>: Tämän tagin ympäröimä teksti näytetään WWW-selaajassa tasavälisellä merkkilajilla (Courier) sellaisenaan, myös rivinvaihdot (PRE = preformatted, esimuotoiltu). Myös kaikki välilyönnit näytetään. PRE-tagi on hyödyllinen mm. silloin, kun halutaan laatia yksinkertaisia taulukoita. Katso esimerkkiä alla.

<PRE>
KELLO	MA	TI	KE	TO	PE
8.00	mat	fys	suo	-	atk
9.00	mat	kem	eng	-	atk
....
</PRE>

ALIGN (kohdistaminen)

Teksti ja muut elementit voidaan kohdistaa sivun vasempaan tai oikeaan reunaan tai keskelle käyttämällä ALIGN-attribuuttia. Tätä voidaan käyttää useimmissa tageissa, esimerkiksi:

<H1 ALIGN="center">Otsikko</H1>: Keskitetty pääotsikko.
Kappale: Tämän tagin ympäröimä kappale esitetään vasemmalle (oletus), keskelle tai oikealle kohdistettuna.
<DIV ALIGN="left|center|right">Tekstielementtejä, kuvia, taulukoita, lomakkeita jne.</DIV>: Tällä tagilla voidaan osalle dokumenttia määritellä kohdistusta koskeva perusasetus. Yksittäisissä elementeissä voidaan asetuksesta poiketa.

Katso esimerkkiä Poems by R. L. Stevenson sekä sen lähdekoodia.

Kuvien kohdistamisesta on lisää kohdassa Grafiikka.

Sisentäminen

HTML:ssä ei ole sellaista tagia, jonka ensisijainen tarkoitus olisi kappaleiden sisentäminen. Monet loogiset elementit erotetaan tavallisesta tekstistä esimerkiksi siten, että ne näytetään sisennettyinä (riippuu WWW-selaajasta). Tällaisia 'sivuvaikutuksia' on esimerkiksi lainatulla tekstillä (BLOCKQUOTE) sekä erilaisten luetteloiden (DL, UL, OL) elementeillä. Katso tarkemmin kohdasta Luettelot.

Erityisesti tageja UL ja OL käytetään joskus pelkästään sisentämiseen ajattelematta tekstin loogista rakennetta sen kummemmin. Tämä ei ole virallisen HTML-standardin mukaista eikä lopputulos eri selaajilla ole välttämättä tekijän toivoma.

Muita asettelussa käytettäviä keinoja ovat mm. taulukot ja kehykset.

Sama teksti on neljällä eri tavalla koodattuna seuraavissa esimerkeissä. Katso, miltä ne näyttävät eri selaajilla. Varminta on pitäytyä määritelmälistan tai BLOCKQUOTE-tagin käyttöön.

Määritelmälista (DL) ja lähdekoodi.
Lainattu teksti (BLOCKQUOTE) ja lähdekoodi.
Luettelo (UL) ja lähdekoodi.
Taulukko ja lähdekoodi.

Merkistöistä

Luettelot

Tavanomaiset luettelot

Tavanomaisia luettelotyyppejä ovat järjestämätön luettelo (UL), numeroitu luettelo (OL) sekä harvinaisemmat hakemistoluettelo (DIR) ja valikkoluettelo (MENU).

Koko luetteloa kehystää luettelotyypin määrittelevä tagi (UL tai OL). Näiden sisällä on listan alkioita tagilla LI määriteltyinä. Listan alkiot esitetään yleensä sisennettyinä. Alla on tyypillinen yksinkertainen lista.

<UL>
<LI>Listan alkio
<LI>ja toinen alkio
<LI>ja vielä yksi
</UL>

UL (järjestämätön luettelo)

<UL TYPE=disc|square|circle>Listan alkiot</UL>: Tämän tagin ympäröimät lista-alkiot (<LI>...</LI>) näytetään yleensä sisennettyinä ja niiden edessä on attribuutin TYPE määrittelemä luettelomerkki (oletusarvoisesti umpinainen merkki (disc)). Jos lista-alkiosta jätetään standardin vastaisesti tagi LI pois, jää myös luettelomerkki pois. Tätä käytetään joskus hyväksi kappaleita sisennettäessä (Katso esimerkkiä sislist.html (UL) ja sen lähdekoodia.).
Listoja voi olla sisäkkäin -- tämä näkyy yleensä sisennyksen kasvamisena ja luettelomerkin muuttumisena. Katso esimerkkiä ul-lista.html ja sen lähdekoodia.

OL (numeroitu luettelo)

<OL TYPE=1|a|A|i|I START=n>Listan alkiot</UL>: Tämän tagin ympäröimät lista-alkiot (<LI>...</LI>) näytetään yleensä sisennettyinä ja niiden edessä on attribuutin TYPE määrittelemä järjestysnumero.
Järjestysnumero voidaan esittää tavanomaisin arabialaisin numeroin (attribuutin arvo 1; oletus), pienin tai isoin kirjaimin (a tai A), pienin tai isoin roomalaisin numeroin (i tai I).
Attribuutilla START asetetaan järjestysnumeron alkuarvo. Attribuuteilla TYPE ja START ei ole vaikutusta kaikissa www-selaajissa.
Katso esimerkkiä ol-lista.html ja sen lähdekoodia.

LI (listan alkio)

<LI>Tekstiä (tai kuvia jne.)</LI>: Luettelon alkio (sekä järjestämätön että mumeroitu luettelo). Lopputagi </LI> ei ole välttämätön. Numeroidun luettelon numerointia voi muuttaa kesken luettelon attribuutilla VALUE, esimerkiksi <LI VALUE=20>...</LI>.

Määritelmäluettelot

DL, DT, DD (määritelmälista, käsite ja määrittely)

<DL>Käsitteitä ja niiden määrittelyjä</DL>: Tämän tagin sisään voidaan koota määritelmälista, jossa luetteloidaan käsitteitä (termejä) ja niitä vastaavia määrittelyjä.
<DT>Käsite (termi)</DT>: Itse käsite (termi) kirjoitetaan tämän tagin sisään. Lopputagi ei ole välttämätön.
<DD>Käsitteen määrittely</DD>: Käsitteen määrittely kirjoitetaan tämän tagin sisään. Lopputagi ei ole välttämätön. Määrittely näytetään yleensä omana sisennettynä kappaleenaan.

Alla on tyypillinen esimerkki määritelmäluettelosta. Katso myös tiedostoa dl-lista.html

<DL>
  <DT>WWW
    <DD>World Wide Web, maailmanlaajuinen verkko.<P>
  <DT>HTML
    <DD>HyperText Markup Language.<P>
  <DT>URL
    <DD>Uniform Resource Locator.<P>
</DL>

Linkit

Hyperteksti

WWW eli World Wide Web muodostaa laajan hajautetun hypermediajärjestelmän.

Hypermedia tai hyperteksti voidaan määritellä koostuvaksi joukosta solmuja ja linkkejä siten, että linkit ovat solmujen välisiä yhteyksiä.

Solmut ovat useimmiten HTML-dokumentteja (WWW-sivuja). Linkit yhdistävät HTML-dokumentteja toisiinsa. Linkillä on alkupää ja loppupää. Alkupää on dokumentissa oleva paikka. Loppupää on joko dokumentti, dokumentissa oleva paikka, tai joissakin tapauksissa erillinen sovellusohjelma. Linkin yhdistämät paikat voivat olla samassa dokumentissa tai eri dokumenteissa. Dokumentissa olevia linkkien alku- ja loppupäitä kutsutaan ankkureiksi.

Hypermediaan liittyy aina selaajaohjelma, jolla dokumentteja luetaan. Selaajaohjelman avulla lukija navigoi hypertekstissä: siirtyy linkin alkupään osoittamasta paikasta linkin loppupään osoittamaan paikkaan ja sitten edelleen uuteen paikkaan.

Lyhentäen lähteestä:
Salminen, Airi. 28.1.1997. Hajautettu hypermedia: Termit ja käsitteet. [WWW-dokumentti]. <http://www.cs.jyu.fi/~airi/digmed/dishyp/kasitteet.html>.

Linkkien määrittely

Linkkien alkupäät on aina määriteltävä ankkuri-elementillä (A). Linkkien kohteet eli loppupäät ovat useimmiten tiedostoja, jolloin niitä ei tarvitse erikseen määritellä. Jos linkillä halutaan viitata HTML-dokumentin tiettyyn kohtaan, on myös kohde määriteltävä.

A (ankkuri)

<A HREF="kohteen URL">Linkin valintateksti ja/tai -kuva</A>

Linkin alkupäähän liittyvä valintateksti näytetään WWW-selaajassa yleensä erivärisenä ja alleviivattuna. Kun dokumentin lukija valitsee (hiirellä tai näppäimillä) kyseisen valintatekstin tai kuvan, hakee WWW-selaaja linkin määrittelemän kohteen.

<A NAME="nimi"></>

Linkin loppupää (kohde) voidaan asettaa dokumentissa haluttuun paikkaan tällä tagilla.

Ankkuritageja ei voi olla sisäkkäin, mutta attribuutit HREF ja NAME voivat olla samassa tagissa. Muita attribuutteja ovat mm.

TARGET="ikkuna" (kehyksiä käytettäessä) ja
TITLE="otsikko" (linkin otsikko).

Linkkien kohteet

Kohteiden nimeäminen

Linkin kohteen osoite eli URL on pisimmillään muotoa

protokolla://palvelin:portti/hakupolku/tiedosto#viite

Protokollan määrittelevä URL:n alkuosa ja vastaava palvelu voi olla:

http:// WWW-dokumentti

ftp:// ftp-palvelu

gopher:// gopher-palvelu

mailto: sähköpostin lähettäminen

news: uutisryhmät

telnet: telnet-yhteys

WWW-palvelimien nimet ovat useimmiten (muttei aina) muotoa www.organisaation_lyhenne.maan_tunnus|organisaatiotyyppi,
esimerkiksi
www.teli.stadia.fi, www.ed.gov, www.english.upenn.edu, altavista.digital.com jne.

ftp-palvelimien nimet alkavat useimmiten tunnuksella ftp, esimerkiksi
ftp.xxxxxxxxxx

Palvelun käyttämää porttiosoitetta ei tarvita, jollei se poikkea oletusarvosta.

Hakupolku ilmaisee haettavan tiedoston sijainnin kyseisen WWW-palvelimen hakemistojärjestelmässä. Hakupolku päättyy aina kauttaviivaan (/). Isoilla ja pienillä kirjaimilla on eroa useimmilla WWW-palvelimilla. Yksittäisten käyttäjien public_html-hakemistoihin viitataan hakupolulla /~käyttäjätunnus/.

Tiedosto on useimmiten HTML-dokumentti, jolloin sen nimi on muotoa jotakin.html. Poikkeuksellisesti tiedosto voi olla muunkin tyyppinen, esimerkiksi paljas tekstitiedosto, jotakin.txt. Jos tiedosto on hakemiston oletustiedosto (yleensä index.html), ei tiedoston nimeä tarvitse kirjoittaa osoitteeseen.

Tiedostonimen perään kirjoitetulla viitteellä (huomaa #-merkki) voi viitata pitkän HTML-dokumentin tiettyyn kohtaan. Tämä edellyttää, että viittauksen kohde on määritelty kyseisessä dokumentissa.

Esimerkkejä

Seuraavat esimerkit ovat sekä toimivina linkkeinä että lähdekoodina.

Linkin kohde voi olla jokin toinen HTML-dokumentti jollakin toisella WWW-palvelimella, jolloin kohteen URL on kirjoitettava täydellisenä, esimerkiksi:
Internet-lähteisiin viittaaminen
<A HREF="http://www.teli.stadia.fi/~lehtonen/intlviit.html">Internet-lähteisiin viittaaminen</A>
Jos linkin kohde on samalla palvelimella kuin näkyvillä oleva dokumentti, riittää kohteesta absoluuttinen hakupolku WWW-palvelimella, esimerkiksi (huomaa kauttaviiva polun alussa):
Energiatekniikka
<A HREF="/Koul-ohj/Kone/Energia/">Energiatekniikka</A>
tai
Heikki Parviainen
<A HREF="/~parviain/">Heikki Parviainen</A>
Jos linkin kohde on jossakin lähihakemistossa (tavallisesti alihakemistossa), riittää kohteesta suhteellinen hakupolku, esimerkiksi:
Kasvisruokia
<A HREF="Reseptit/kasvis.html">Kasvisruokia</A>
Jos linkin kohde on samassa hakemistossa kuin näkyvillä oleva dokumentti, riittää kohteen tiedostonimi, esimerkiksi:
Opettajan tiedotuksia
<A HREF="tiedotus.html">Opettajan tiedotuksia<A/>
Oletushakemisto voidaan asettaa joksikin toiseksi hakemistoksi tagilla BASE.
Linkin kohde voi olla samassa tai eri dokumentissa määritelty viittauskohde, esimerkiksi:
Luettelot
<A HREF="#luettelot">Luettelot</A>
tai
Viittausten tyyppi
<A HREF="intlviit.html#tyyppi">Viittausten tyyppi</A>
Viittauskohde on määriteltävä kirjoittamalla asianomaiseen dokumentin kohtaan kohteen nimi, esimerkiksi:
<A NAME="luettelot"></A>
Tekstin sijasta voi käyttää myös grafiikkaa linkin alkupäätä ilmaisemassa, esimerkiksi:

<A HREF="index.html"><IMG SRC="home03.gif" ALT="Takaisin kotisivulle"></A>

Grafiikka

......

Miksi kuvia?

HTML-dokumentteihin voidaan tekstin lisäksi linkittää grafiikkaa, kuvia, animaatioita ja videoita. Monia asioita ei voi esittää pelkästään tekstinä. Silloinkin, kun asian varsinainen sisältö on tekstinä, voivat hyvin laaditut kuvat helpottaa asian ymmärtämistä -- kaikki eivät ole yhtä 'lukutaitoisia'. Lisäksi grafiikka voi toimia WWW-sivuilla selkeyttävänä, jäsentävänä, koristeellisena tai viihdyttävänä elementtinä. Grafiikka ei saisi olla itsetarkoitus. Jokaisen grafiikkaelementin käytölle pitäisi olla hyvä perustelu.

Grafiikkatiedostot

WWW-sivuilla näkyvät grafiikkaelementit ovat omissa tiedostoissaan, jotka haetaan WWW-selaajaan varsinaisessa HTML-dokumentissa olevien grafiikkatagien perusteella. Grafiikkatiedostot ovat useimmiten kahta tyyppiä, GIF tai JPEG. Useimmat graafiset WWW-selaajat (Netscape, Explorer, Mosaic jne.) esittävät näissä muodoissa olevan grafiikan ilman erityisiä apuohjelmia. Muita grafiikka- ja videotiedostojen muotoja ovat mm. TIF ja MPEG. Näiden esittämiseen tarvitaan useimmiten apuohjelma. Tekstipohjaisissa WWW-selaajissa (Unixin lynx) ei grafiikka näy.

GIF - Graphics Interchange Format: Tätä esitysmuotoa käytetään erityisesti pienissä kuvissa (ikonit, painikkeet) ja yksinkertaisissa animaatioisssa. Kuvien pakkausmenetelmä on melko tehoton, joten tiedostot tulevat helposti suuriksi ja niiden latautuminen kestää kauan. Värejä voi olla enintään 256.
JPEG - Joint Photographic Experts Group: Tätä esitysmuotoa käytetään erityisesti suurissa kuvissa tehokkaan pakkausmenetelmän johdosta. Kuvan laatu riippuu jonkin verran pakkauksen asteesta. Värejä voi olla 16,7 miljoonaa.

Multimedia

Grafiikan HTML-elementit

IMG (kuva)

<IMG SRC="kuvatiedosto" ATTRIBUUTTI="arvo">: Tämä tagi sijoittaa mainitun kuvatiedoston sisältämän kuvan tekstin lomaan. Tavallisimpien attribuuttien nimet, arvot ja käyttötarkoitus on esitetty alla olevassa taulukossa.

Attribuutti	Arvot	Käyttötarkoitus
ALT	Tekstiä	Tässä ilmoitettu teksti näkyy kuvan tilalla selaajissa, jotka eivät näytä kuvia. Tätä attribuuttia on aina käytettävä.
ALIGN	TOP, MIDDLE, BOTTOM, LEFT, RIGHT	Kuvan sijoittelu suhteessa tekstiriviin.
BORDER	Kokonaisluku	Kuvan reunaviivan paksuus pikseleinä. Oletusarvo on 1.
HSPACE	Kokonaisluku	Kuvalle ylä- ja alapuolelle varattava marginaali pikseleinä.
VSPACE	Kokonaisluku	Kuvalle sivuille varattava marginaali pikseleinä.
HEIGHT	Kokonaisluku	Kuvalle varattavan tilan korkeus pikseleinä. Nopeuttaa tekstin asettelua kuvia ladattaessa.
WIDTH	Kokonaisluku	Kuvalle varattavan tilan leveys pikseleinä.
USEMAP	URL	Client-side image map
ISMAP		Image map

Esimerkkejä

Pieni kuva tekstin lomassa (ALIGN="bottom")
<IMG SRC="Kuvat/ball2blu.gif" ALT="Sininen pallo" ALIGN="bottom">
Pieni kuva tekstin lomassa (ALIGN="middle")
<IMG SRC="Kuvat/ball2blu.gif" ALT="Sininen pallo" ALIGN="middle">
Pieni kuva tekstin lomassa (ALIGN="top")
<IMG SRC="Kuvat/ball2blu.gif" ALT="Sininen pallo" ALIGN="top">
Teksti kiertää sivun vasemmassa reunassa olevaa kuvaa, kuvalle asetettu marginaalit.
<IMG SRC="finland.jpg" ALT="Suomen lippu" ALIGN="left" VSPACE="10" HSPACE="50">
Teksti kiertää sivun oikeassa reunassa olevaa kuvaa, kuvalle asetettu marginaalit.
<IMG SRC="finland.jpg" ALT="Suomen lippu" ALIGN="right" VSPACE="10" HSPACE="50">
Kuva ja sen selitys (kuvan alapuolella).
<IMG SRC="finland.jpg" ALT="Suomen lippu" VSPACE="10" HSPACE="20"> Suomen valtiolippu
Kuvia ja niiden selityksiä (kuvien vieressä).
 <IMG SRC="sweeden.jpg" ALT="Ruotsin lippu" VSPACE="10" HSPACE="20" ALIGN="middle"> Ruotsin lippu <IMG SRC="switzer.jpg" ALT="Sveitsin lippu" VSPACE="10" HSPACE="20" ALIGN="middle"> Sveitsin lippu
Ikoneilla osoitettuja linkkejä.
<A HREF="html.html"><IMG SRC="arrowbac.gif" ALT="Takaisin" BORDER="5"></A> <A HREF="html.html"><IMG SRC="arrowfor.gif" ALT="Eteenpäin" BORDER="5"></A>
Client-side image map eli WWW-selaajassa toimiva linkkikartta.
<IMG SRC="britain.jpg" BORDER=0 USEMAP="#kartta1">
<MAP NAME="kartta1">
<AREA HREF="wales.html" ALT="Wales" SHAPE=RECT COORDS="0,0,50,28">
<AREA HREF="scotland.html" ALT="Scotland" SHAPE=RECT COORDS="50,0,100,28">
<AREA HREF="england.html" ALT="England" SHAPE=RECT COORDS="0,28,50,56">
<AREA HREF="london.html" ALT="London" SHAPE=RECT COORDS="50,28,100,56">
</map>

Taulukot

Taulukkoelementtien varsinainen käyttötarkoitus on taulukoksi jäsentyvän tiedon esittäminen. Jos esitettävä informaatio jakaantuu enemmän tai vähemmän samanrakenteisina toistuviin riveihin ja nämä taas soluihin, on taulukon käyttö paikallaan.

Taulukon soluissa voi olla tekstiä, grafiikkaa jne. Taulukon ylimmän rivin voi määritellä erityiseksi otsikkoriviksi. Taulukon ulkoasua voi säädellä. Taulukon ja sarakkeiden leveydet voi määrittää tai antaa www-selaajan huolehtia niistä automaattisesti. Soluille voi määritellä eripaksuisia reunoja tai reunat voi jättää pois. Vierekkäisiä tai päällekkäisiä soluja voi yhdistää.

Taulukkoelementtejä käytetään yleisesti myös muihin tarkoituksiin, esimerkiksi tekstin asetteluun.

Yksinkertainen esimerkki:

<TABLE BORDER=1>
<TR>
<TD>Kello</TD> <TD>Maanantai</TD> <TD>Tiistai</TD> <TD>Keskiviikko</TD>
</TR>
<TR>
<TD>8.00-8.45</TD> <TD>Fysiikka</TD> <TD>Kemia</TD> <TD>Englanti</TD>
</TR>
<TR>
<TD>8.50-9.35</TD> <TD>Fysiikka</TD> <TD>CAD</TD> <TD>Ruotsi</TD>
</TR>
</TABLE>

Näyttää tältä:

Kello Maanantai Tiistai Keskiviikko

8.00-8.45 Fysiikka Kemia Englanti

8.50-9.35 Fysiikka CAD Ruotsi

Kehykset

Tämän dokumentin oikea osoite on <http://www.teli.stadia.fi/~lehtonen/html.html>.

Huomautukset ja muutosehdotukset osoitteeseen: Kari.Lehtonen@stadia.fi.

Viimeksi muutettu 1.4.1997.

Kotisivulleni.