HTML-opas

HTML-kielellä (Hypertext Markup Language) kerrotaan WWW-selaimelle, millaisia osia WWW-dokumentti sisältää. Tällaisia dokumentin osia eli elementtejä ovat esimerkiksi leipäteksti, otsikot, hyperlinkit ja kuvalinkit.

HTML:n avulla voidaan myös määrittää WWW-sivun ulkoasua, mutta monet HTML-tageista eli komennoista ovat sellaisia, että niillä ei saavuteta haluttua vaikutusta. Tämä johtuu siitä, että WWW-sivun ulkoasuun vaikuttavat sekä käytetyn selaimen asetukset että tietokoneen näytön ominaisuudet.

HTML-komennot eli tagit

Dokumentin osa, jota halutaan muotoilla tageilla erotetaan muusta tekstistä alkutagilla ja lopputagilla.

HTML-KOODIN PERUSTAGEJA
A	B	BIG	BLINK	BODY	BR	CAPTION	CITE	DD	DL
DT	FONT	H1	HEAD	HR	HTML	I	IMG	LI	META
NOBR	OL	P	SMALL	STRIKE	STRONG	SUB	SUP	TABLE	TD
TITLE	TR	TT	UL	WBR

Esimerkki 2: Tekstiä...<B>Tekstiä, joka halutaan lihavoida</B> teksti jatkuu...

HTML-tageissa kirjasinkoolla ei ole merkitystä, esimerkiksi <b> ja <B> tarkoittavat samaa asiaa.

HTML-koodia voidaan kirjoittaa millä tahansa editorilla, jolla voidaan tallentaa tietoa tekstimuodossa (txt), esimerkiksi Muistiolla (Notepad).

HTML-tiedostot on tallennettava aina .htm tai .html -tyyppisiksi tiedostoiksi. Tiedostotyypin valinta riippuu siitä palvelimesta, jolle tiedostot tallennetaan.

HTML-dokumentin perusrakenne

<HTML> ja </HTML>-tageilla määritellään dokumentin alku ja loppu. Näiden tagien avulla WWW-selain pystyy tunnistamaan tekstin nimenomaan HTML-tekstiksi.

HEAD-elementti on dokumentin otsikko-osa, ja sen sisällä määritellään esimerkiksi dokumentin nimi <TITLE></TITLE>-tagien avulla. Dokumentin nimi tulee näkyviin useimmissa selaimissa selaimen yläreunassa olevaan otsikkopalkkiin.

BODY-elementti määrittelee dokumentin varsinaisen tekstiosan. Kaikki WWW-selaimessa näkyvillä olevat asiat (leipäteksti, otsikot, linkit jne.) kirjoitetaan aina <BODY></BODY>-tagien väliin.

Sivun värimääritykset

<BODY>-tagin sisään voidaan kirjoittaa lisämääreitä varsinaisen tekstiosan määrittelyn lisäksi.

Parametri BGCOLOR määrittelee sivulle tietyn taustavärin. Jos <BODY>-tagiin ei sijoiteta BGCOLOR-parametria, näyttää selain sivun omalla oletustaustavärillään.

Tekstikappaleet

Vaikka muistiolla saisikin Enterin avulla erotettua kappaleet toisistaan, selain ohittaa Enterin painallukset ja teksti näkyy "yhtenä pötkönä", huomaa ettei selain myöskään ”tottele” välilyönneillä tehtyjä tekstin asetteluja.

Otsikko

<H1> </H1> -tageilla voidaan HTML:ssä tehdä kuuden eri tason otsikkoja. Ylimmän tason otsikko tehdään H1:llä (”suurin kirjasinkoko”) ja alimman tason otsikko on <H6> </H6> -tageilla. Tähän väliin mahtuu neljä muuta otsikkotasoa H2:sta H5:een.

Erilaiset listat

HTML-komentojen avulla on mahdollista näyttää tekstiä erilaisina listoina: numeroituina, ranskalaisina viivoina eli luetteloina sekä määritelmälistoina, joissa selitysosa on sisennettynä.

Oletuksena listan kohdat numeroidaan tavallisilla arabialaisilla numeroilla alkaen ykkösestä. Tästä voidaan halutessa poiketa kirjoittamalla <OL>-alkutagin sisään parametri, jolla numerointi voidaan muuttaa. Numeroinnin aloituskohtaa voidaan myös muuttaa.

TYPE -parametrille annetaan arvoksi jokin numerointityyppi:
A aakkoset isoin kirjaimin
a aakkoset pienin kirjaimin
I roomalaiset numerot isoin kirjaimin
i roomalaiset numerot pienin kirjaimin
<OL TYPE=”joku”>

START -parametrille annetaan arvoksi numeroinnin aloituskohta <OL START=luku>

Esimerkki 7:
<OL TYPE= ”A”>
<LI>Ensimmäinen </LI>
<LI>Toinen </LI>
</OL>

NÄYTTÖ:

<UL> </UL>-tageilla luodaan ranskalaiset viivat -luettelo. Useimmat selaimet näyttävät listan kohdat palloina, mutta joissakin selaimissa listan kohdat näkyvät tavallisina viivoina. <LI> </LI>-tageilla sijoitetaan listan kohdat UL-tagien väliin

Myös ranskalaisten viivojen "pallukoiden" ulkonäköä voidaan muuttaa. TYPE-parametrilla määritellään viivojen ulkonäkö:
tyyppi
disc täytetty ympyrä
circle ympyrä pelkällä rajaviivalla
square täytetty neliö
<UL TYPE=”TYYPPI”>

<DL></DL>-tageilla rajataan määritelmälista. Määritelmälistoissa erotetaan tekstistä jokin termi ja sille annettu määritelmä. <DT></DT>-tageilla kerrotaan ensin termi <DD></DD> -tagien väliin kirjoitetaan termin selitys.

Rivinvaihto

<BR> -tagilla saadaan tekstikappaleen sisään tai esimerkiksi otsikkoon pakollisen rivinvaihto. <BR> -tagin jälkeen teksti jatkuu seuraavan rivin alusta. Huomaa, että tällä tagilla ei ole lopputagia.

<NOBR></NOBR> -tagit toimivat päinvastoin kuin <BR>-tagi, eli niiden avulla määritellään tekstinosa, jonka alueella ei saa tulla rivinvaihtoa.

<WBR>-tagin avulla voidaan <NOBR></NOBR>-tagien rajaamalle alueelle määrittää kohta, jossa voidaan tehdä rivinvaihto. Selaimesta riippuu tehdäänkö rivinvaihto vai ei.

Väliviiva

<HR>-tagilla saadaan aikaiseksi väliviiva eli kuvaruudun poikki vaakatasossa kulkeva kolmiuloitteinen viiva, jonka avulla voidaan esimerkiksi erottaa dokumentin eri osia toisistaan.

<HR>-tagi on pariton tagi eli sille ei kirjoiteta lopputagia. SIZE - parametrin avulla voidaan muuttaa väliviivan paksuutta. WIDTH - parametri määrittelee viivan leveyden. Pelkällä luvulla ilmaistaan leveys pikseleinä. %-merkki ilmaisee leveyden prosentteina ruudun leveydestä. ALIGN-parametri kertoo aseman, josta viivaa lähdetään piirtämään:
left viiva alkaa ruudun vasemmasta reunasta
right viiva alkaa ruudun oikeasta reunasta
center viiva on keskitetty ruudun keskelle
NOSHADE poistaa viivan kolmiulotteinen vaikutelman eli varjostuksen.

Esimerkki 8:
<HR SIZE=7 WIDTH=50 ALIGN = LEFT>
<HR WIDTH=40 ALIGN = LEFT>
<HR WIDTH=10% ALIGN = LEFT>

NÄYTTÖ:

Tekstin muotoilukeinoja

Tagi	Selitys
<B></B>	lihavointi
<I></I>	kursiivi
<U></U>	alleviivaus
<TT></TT>	konekirjoitustyyli
<STRIKE></STRIKE>	yliviivattu teksti
<BIG></BIG>	normaalia suurempi teksti
<SMALL></SMALL>	normaalia pienempi teksti
<SUP></SUP>	yläindeksi
<SUB></SUB>	alaindeksi
<BLINK></BLINK>	vilkkuva teksti

Esimerkikki 9: <B><I><U> muotoiltava teksti </U></I></B>

NÄYTTÖ:
muotoiltava teksti

Huomaa, että yhdistelmätyyleissä on tagit kirjoitettava siten, että ensin merkitään teksti yhdellä tagi-parilla, esim. <U> muotoiltava teksti </U> ja tämän kokonaisuuden ympärille lisätään seuraavat tagit, esimerkissä <I><U> muotoiltava teksti </U></I> ja niin edelleen.

Fontti -tagi

<FONT></FONT>-tagien avulla voidaan muuttaa kirjasinten kokoa, tyyliä ja väriä. SIZE - parametri muuttaa kirjasimen kokoa. Luvut -2,-1,+0,+1,+2,+3,+4 ilmaisevat fontin koon suhteessa ns. normaaliin (oletusarvoiseen) tekstikokoon. Koko voidaan ilmaista myös absoluuttisesti, siis pelkällä luvulla ilman etumerkkiä..

FACE - parametrillä muutetaan kirjasimen tyyliä. Parametrille voi antaa useampia vaihtoehtoisia fonttityylejä. Selain näyttää sellaisen fontin, joka on asennettu tietokoneelle.

Esimerkki 10:
<FONT SIZE=+2>muotoiltava teksti</FONT>
<FONT SIZE=2>tekstiä</FONT>
<FONT FACE="Arial","Courier New">muotoiltava teksti</FONT>
Selain näyttää tekstin Arialina, edellyttäen, että koneessa on Arial-fontti. Jos ei löydy, näyttää selain tekstin Courierina. Jos tätäkään ei löydy koneelta, näyttää selain tekstin käyttäen selaimen omaa oletusfonttia.
<FONT COLOR="#FF0000">punaiseksi</FONT>
Teksti muuttuu punaiseksi.

Kuvat

WWW-sivuilla käytetään yleensä kuvia, jotka ovat .gif tai .jpg (.jpeg) muodossa. Näissä kuvamuodoissa kuvan sisältämä tieto on pakattu normaalia pienempään tilaan, joten niiden lataaminen selaimeen on nopeampaa.

IMG-tagilla (pariton) kuva liitetään dokumenttiin. SRC-parametrin arvoksi annetaan kuvan osoite tai kuvan sijaitessa samassa hakemistossa kuin sivut, niin pelkkä kuvan nimi riittää.

ALIGN -parametrin avulla kerrotaan, miten kuva asetellaan suhteessa ympäröivään tekstiin:
top - teksti kirjoitetaan kuvan yläreunan tasalle
middle - teksti kirjoitetaan kuvan keskelle
bottom - teksti kirjoitetaan kuvan alareunan tasalle
left - kuva "kelluu" selaimen vasemmassa reunassa ja teksti kiertää sitä oikealta
right - kuva "kelluu" selaimen oikeassa reunassa ja teksti kiertää sitä vasemmalta

Jos kuvaa kiertävä teksti halutaan katkaista tietyssä kohtaa, tehdään se <BR>-tagilla, jolle annetaan parametri CLEAR.

HSPACE ja VSPACE -parametrien avulla voidaan kuvan ympärille luoda tyhjää tilaa, jos ei haluta tekstin olevan ”kiinni kuvassa”. Tila määritellään pikseleinä.

BORDER -parametri määrittelee kuvan kehyksen (perustekstin värinen) paksuuden pikseleinä. Jos BORDER-parametrin arvoksi annetaan 0, niin kuvaan ei piirretä kehystä. Kehyksen väriä voidaan muuttaa <FONT></FONT>-tagien avulla.

WIDTH ja HEIGHT -parametrien avulla voidaan kertoa selaimelle kuvan koko (leveys ja korkeus). Tämä nopeuttaa jonkin verran kuvan lataamista. Näin voi tehdä, jos kuvan koko on tiedossa. Kuvan koko täytyy tietää myös sen vuoksi, että se pysyisi ”muodossaan”.

ALT - parametrin käyttö palvelee sellaisia käyttäjiä, joilla ei ole graafista selainta tai jotka eivät halua ladata kuvia (esim. hitaiden modeemiyhteyksien käyttäjät). Jos kuvaa ei näytetä selaimessa, lukee kuvan paikalla ALT-parametriin kirjoitettu teksti.

Ulkoiset ja sisäiset linkit

HTML:n avulla voidaan WWW-dokumentteihin sisällyttää linkkejä toisiin dokumentteihin ja muunkinlaisiin tiedostoihin (esim. äänitiedostoihin).

Linkkejä voi olla sekä ulkoisia että sisäisiä. Ulkoiset linkit tuovat selaimeen uuden dokumentin tms., kun taas sisäiset linkit mahdollistavat "hypyt" paikasta toiseen saman dokumentin sisällä.

<A></A>-tagien avulla muodostetaan sekä ulkoiset että sisäiset linkit. <A></A>-tagien väliin kirjoitetaan ns. hotspot eli linkkisana, jonka päällä hiiren osoitin muuttuu käden kuvaksi ja joka useinmiten näkyy alleviivattuna sanana tekstin keskellä. HREF-parametrille annetaan arvoksi WWW-osoite lainausmerkeissä

Jos linkitettävä dokumentti on täsmälleen samassa hakemistossa kuin nykyinen dokumentti, riittää että osoitteeksi kirjoitetaan linkitettävän dokumentin tiedostonimi.

Dokumentin sisäisten linkkien tekemiseen tarvitaan linkin lisäksi nimetty kohde eli kirjanmerkki (paikka johon linkitys kohdistetaan).

NAME-parametrillä varustetun <A>-alkutagin ja </A> -lopputagin väliin jäävä teksti ei selaimessa erotu mitenkään muusta tekstistä. Tagien väliin ei välttämättä tarvitse kirjoittaa mitään tekstiä.

Varsinaiseen linkkiin annetaan HREF-parametrille arvoksi sama sana kuin NAME-parametrille, mutta sanan eteen kirjoitetaan #-merkki.

Tätä käytetään esimerkiksi silloin, kun sivun alareunaan tehdään linkki, josta pääsee takaisin sivun yläreunaan.

Dokumentin sisällä tapahtuviin linkityksissä tavallaan annetaan sivun tietylle kohdalle ensin nimi ja myöhemmin viittauksessa käytetään tätä nimeä.

Useamman WWW-sivun kokonaisuudessa, voit käyttää kirjanmerkkiä hyväksesi, jos haluat linkin kohdistuvan jonkin tietyn sivun tiettyyn kohtaan. Ensiksi sinun täytyy luoda kohdedokumenttiin kirjanmerkki.

Esimerkki 16: Dokumenttiin kokous.htm teet sopivaan kohtaan kirjanmerkin <A NAME="uusi"></A>. Toisessa dokumentissa tehdään linkki <A HREF="kokous.htm#uusi">Uusin kokouspöytäkirja</A>

Tämä tapahtuu siis samalla lailla kuin siirryttäessä samalla sivulla haluttuun kohtaan, nyt vain annetaan myös kohdan nimen lisäksi sivun nimi kokonaisuudessaan

Muiden kuin WWW-dokumenttien linkittäminen tapahtuu samalla lailla kuin ulkoisilla linkeillä WWW-sivuihin voi linkittää esimerkiksi ääntä, videoleikkeitä, ohjelmatiedostoja ja tekstitiedostoja. Jos linkitettyjä tiedostoja ei voida näyttää selaimessa, avataan niitä varten erillinen ohjelma, mikäli selaimen asetuksiin on määritelty tiedostomuotoon sopiva ohjelma. Esimerkiksi .doc -päätteisen tekstitiedostolinkin klikkaaminen aiheuttaa Word for Windows -ohjelman avaamisen. Jos asetuksista ei löydy, millä ohjelmalla jokin tiedosto avataan, selain antaa mahdollisuuden tiedoston tallentamiseen omalle kovalevyllesi.

Esimerkki 17: <A HREF="ohjeet.doc">HTML-ohjeet</A> Word asiakirja aukeaa, jos se on samassa hakemistossa kuin www-sivu.

WWW-dokumenteistä voidaan tehdä linkkejä myös sähköpostiosoitteisiin ja uutisryhmiin. Kun sähköpostilinkkiä klikataan avautuu selaimen sähköpostiviestin kirjoitusikkuna, johon on valmiiksi merkitty vastaanottajan sähköpostiosoite. Sähköpostilinkissä kirjoitetaan osoitteen paikalle ensin mailto: ja heti perään sähköpostiosoite.

Uutisryhmälinkki tehdään samaan tapaan. Ensin kirjoitetaan news: ja sitten uutisryhmän nimi. Jos selaimen uutisryhmäasetukset on määritelty, aukaisee selain uutisten lukuohjelman ja kyseisen uutisryhmän.

Tekstilinkkien ohella myös kuvista voidaan muodostaa linkkejä toisiin dokumentteihin. <A></A> -tagien väliin kirjoitetaan tekstin sijasta <IMG SRC>-tagi kuvaosoitteineen.

Perustaulukko

Taulukot muodostuvat kolmesta osasta: itse taulukosta sekä taulukon riveistä ja soluista. Näitä jokaista osaa varten on omat taginsa.

<TABLE></TABLE>-tagit ovat taulukon aloitus- ja lopetustagit. Parametrilla BORDER kerrotaan taulukon reunaviivan paksuus pikseleinä. Parametri WIDTH kertoo taulukon leveyden. Leveys voidaan ilmoittaa joko %-lukuna tai pikseleinä. Jos WIDTH-parametriä ei kirjoiteta, muotoutuu taulukon leveys siihen kirjoitetun tekstin mukaan. Parametri CELLSPACING säätelee solujen välissä olevaa tilaa. Parametri CELLPADDING puolestaan määrittelee solun seinämien ja tekstin väliin jäävä tilan. Cellspacingille ja Cellpaddingille annetaan arvot pikseleinä.Koko taulukolle, sekä yksittäisille riveille ja soluille voidaan määritellä taustaväri kirjoittamalla BGCOLOR-parametri haluttuun tagiin. Parametrille annetaan RGB-väriarvo samalla lailla kuin sivun taustaväri määritellään.

<TD> </TD> -tageilla lisätään solut. Eri riveillä voi myös olla eri määrä soluja.

<CAPTION></CAPTION> -tagien avulla voidaan taulukolle antaa otsikko.Otsikon voi siirtää myös taulukon alle kirjoittamalla <CAPTION>-alkutagiin parametriksi ALIGN=BOTTOM.

Esimerkki 20:
<TABLE BORDER =1 WIDTH=50%>
<CAPTION>Taulukko-esimerkki </CAPTION>
<TR>
<TD WIDTH=50%>1. rivi 1. Solu</TD>
<TD WIDTH=50%>1. rivi 2. Solu</TD>
</TR> <
TR>
<TD WIDTH=50%>2. rivi 1. Solu</TD>
<TD WIDTH=50%>2. rivi 2. Solu</TD>
</TR>
<TR>
<TD WIDTH=50%>3. rivi 1. Solu</TD>
<TD WIDTH=50%>3. rivi 2. solu</TD>
</TR>
</TABLE>

Taulukko-esimerkki
1. rivi 1. Solu	1. rivi 2. Solu
2. rivi 1. Solu	2. rivi 2. Solu
3. rivi 1. Solu	3. rivi 2. solu

Tekstiä voidaan asetella soluissa, sillä sekä rivitageihin että solutageihin voidaan tehdä määrityksiä tekstin yms. asettelusta vaaka- ja pystysuunnassa. ALIGN-parametrillä vaikutetaan vaakasuunnassa tapahtuvaan asetteluun:
left - teksti tasataan vasempaan reunaan
right - teksti tasataan oikeaan reunaan c
enter - teksti keskitetään
VALIGN-parametrilla asetellaan tekstiä pystysuunnassa:
top - teksti asetetaan yläreunaan
bottom - teksti asetetaan alareunaan
middle - teksti asetetaan solun keskelle
COLSPAN -parametrillä voidaan solua venyttää vaakasuunnassa useamman sarakkeen kokoiseksi. ROWSPAN -parametri venyttää solua puolestaan pystysuunnassa. Huomaa, ettei ROWSPAN ja COLSPAN -parametrejä ei kannata yhdistää. WIDTH-parametrilla määritellään sarakkeen leveys. BGCOLOR-parametrilla voidaan yksittäisille riveille tai soluille määritellä taustaväri, kirjoittamalla ko. parametri haluttuun tagiin. Parametrille annetaan RGB-väriarvo samalla lailla kuin sivun taustaväri määritellään.

Esimerkki 22:
<TABLE WIDTH = 40% BORDER = 1>
<TR ALIGN=center>
<TD>WWW</TD>
<TD>HTML</TD>
<TD>INTERNET</TD>
</TR>
</TABLE>
Kaikki tämän rivin solujen tekstit keskitetään.
NÄYTTÖ:

<TABLE WIDTH = 40% BORDER = 1>
<TR>
<TD>WWW</TD>
<TD ALIGN=CENTER>2</TD>
<TD>3</TD>
</TR>
</TABLE>
Kun taas tässä vain rivin toisen solun teksti on keskitetty.

Esimerkki 23: <TD COLSPAN=2></TD>
Levittää solun kahden sarakkeen mittaiseksi.

b) <TABLE BORDER=1>
<TR>
<TD>tekstiä</TD>
<TD BGCOLOR="#00FF00">tekstiä</TD>
<TD>tekstiä</TD>
</TR>
</TABLE>

Muuta

Koodiin voidaan kirjoittaa kommentteja:

Skandinaaviset kirjaimet ja erikoismerkit

Kaikki selainohjelmat eivät ymmärrä tekstin joukkoon kirjoitettuja skandinaavisia kirjaimia oikein Lisäksi merkeille <, > ja & on HTML:ssä varattu erityismerkitykset eikä niitä voi käyttää sellaisenaan teksteissä. Erikoismerkkejä kutsutaan entiteeteiksi ja ne erotetaan muusta tekstistä ampersandilla (&) ja puolipisteellä.

Värien määritys

Väri	RGB	Väri	RGB	Väri	RGB
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"

Robottien ohjaus

Voit lisätä sivuille Internetin hakupalvelujen robottien ohjaamiseen ohjeita, antaa ns. avainsanoja kiroittamalla seuraavat rivit HEAD-tagien sisään: