HTML-sivunkuvauskieli
Index
HTML = HyperTextMarkUpLanguage
HTML-kieli on web-dokumenttien (tulkattava) kuvauskieli, jota
web-selaimet (HTML -tulkki) ymmärtävät ja näyttävät sivut
halutunnäköisinä käyttäjälle . HTML-koodin kirjoittamiseen ei välttämättä tarvita
kuin tekstieditori (esim. Windowsin Notepad eli Muistio),
vaikkakin sivujen tekeminen on helpompaa graafisilla
editoreilla.
HTML-kielestä on olemassa useita eri versioita joista
tällä hetkellä merkityksellisin on HTML 4.0. tässä materiaalissa käsittellyt asiat
pätevät ainakin HTML 3.2 ja 4.0 versioihin (paitsi milloin
toisin ilmoitetaan). Lisäksi selainvalmistajat (Microsoft,
Netscape) ovat tehneet omia lisäyksiään (laajennukset) HTML-kieleen,
jotka toimivat vain valmistajan omassa selaimessa. Näiden
tagien käyttöä ei suositella, koska sivun pitäisi toimia
kaikilla käyttäjillä.
HTML-kielen kehitystä valvoo World
Wide Web Consortium (W3C). Sen sivulta löytyy myös
tarkka tieto eri versioiden sisällöstä.
HTML-koodia voidan tuottaa tekstieditoreilla (Muistio,
Pico). tekstipohjaisilla html-editoreilla (UltraEdit,
CuteHtml), graafisilla html-editoreilla (FrontPage,
Dreamweaver) ja joillakin työvälineohjelmilla (esim.
Microsoft Word ja Powerpoint).
Html-kielen rakenne on hierarkinen. On olemassa eri
elementtejä, jotka sijoittuvat hierarkiassa eri tasoille.
Usein koodissa tätä kuvataan sisentämällä hierarkiassa
alempana olevia elementtejä, mikä helpottaa koodin
hahmottamista (mutta ei vaikuta sen toimivuuteen).
Seuraavassa karkea hahmotelma elementeistä ja niiden
hierarkiasta:
- Doctype-elementti (ensimmäisenä koodissa,
kertoo html-version, ei välttämätön)
- Html-elementti (aloittaa ja lopettaa
dokumentin varsinaisen koodin)
- Head-elementti (sisältää selaajalle
näkymättömän tiedon, kuten sivun nimi, hakusanoja,
javaskriptiä ym.)
- tageja mm. Title, Meta, Script jne
- Body-elementti (sisältää kaiken selaajalle
näkyvän sisällön, kuten
tekstiä, otsikoita, tekstimuotoiluja,
taulukoita, kuvia, multimediaelementtejä
jne. )
- Tageja H1, H2, Table, Img, Embed jne.
Html-tagit ovat kulmasulkujen <> (pienempi
kuin ja suurempi kuin) sisään kirjoitettuja www-sivun rakenteeseen
vaikuttavia komentoja. Muotoilukomentoja (tageja) ovat esim:
<HTML>
<BODY>
<IMG>
Jotkut elementit vaativat alku- ja lopputagin. Lopputagi
on samanlainen kuin alkutagi, paitsi, että siinä on <
-merkin jälkeen kauttaviiva / Tällaisia tagipareja ovat mm:
<HTML></HTML>
<BODY></BODY>
<TABLE></TABLE>
Toiset elementit kuvataan ilman lopputagia. Tällaisia
elementtejä ovat. mm:
<BR>(pakollinen rivinvaihto)
<IMG>
<EMBED>(upotettu elementti, esim. ääni).
On myös olemassa elementtejä joihin lopputagi kuuluisi,
mutta sitä ei yleensä käytetä. Tällainen on mm:
<P></P>(kappale)
(tällöin <P> tagia käytetään oikeastaan
yhden rivin yli hyppäävänä <BR> tagina,
kappaleenvaihtona).
Monissa tageissa on mahdollista määritellä erilaisia
attribuutteja ja näille arvoja. Nämä tulevat
välilyönnillä eroteltuina alkutagin sisään.
esim. body-tagissa voidaan määritellä mm. sivun
taustakuva:
<BODY BACKGROUND="taustakuva.gif">
jolloin BACKGOUND on attribuutti ja "taustakuva.gif"
on sen arvo (arvot tulisi laittaa lainausmerkkeihin).
Img-tagissa voidaan määritellä esim. tiedoston nimi,
leveys ja korkeus (pikseleinä):
<IMG SRC="Images/kuva.jpg"
WIDTH="100" HEIGHT="150">
jolloin SRC tarkoittaa polkua kuvatiedostoon, WIDTH
leveyttä ja HEIGHT korkeutta pikseleinä. Arvot
lainausmerkeissä.
Joihinkin tageihin kuuluu aina loogisena osana jokin
toinen tagi. Tällainen on mm järjestämätön lista:
<UL> Järjestämättömän listan alkutagi
<LI> Listan ensimmäinen kohta
<LI> Listan toinen kohta
</UL> Lopputagi
Html-koodissa värit ilmoitetaan yleensä heksakoodeina
(#RRGGBB") joissa kaksi ensimmäistä merkkiä
tarkoittaa punaisen , keskimmäiset vihreän ja viimeiset
sinisen osavärin arvoa. Jokaisella merkillä voi olla arvoja
välillä 0-f seuraavasti:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
Muutamia esimerkkejä:
| #ffffff |
#000000 |
#ff0000 |
#00ff00 |
#0000ff |
#ffff00 |
#888888 |
#880000 |
#f0990f |
#123456 |
| |
|
|
|
|
|
|
|
|
|
Helpoimmin löydät haluamasi värit
kuvankäsittelyohjelmalla, joka näyttää heksakoodit
väreistä (esim. Photoshop 5.5 tai PaintShopPro).
Värejä voi ilmoittaa myös niiden englanninkielisellä
nimellä, esim "white", "black",
"red" jne. Ne täytyy silloin tietää.
Ns. webbiturvalliset värit ovat väripaletti joka
sisältää 216 sellaista väriä, jotka näkyvät selaimissa
samanlaisina silloin kun näytön värimäärä on 256
väriä. Nämä värit tuntee siitä, että niiden
heksakoodissa olevat osavärien kaksi arvoa ovat samanlaiset
(esim. #ff2288, #7700ff, #888888 jne.) Ei liene enää
tarkoituksenmukaista pitäytyä näissä väreissä.
Tällä kerrotaan mitä versiota html-kielestä sivulla
käytetään. Jos et ole varma, voit jättää Doctypen
kokonaan pois.
Mikäli käytät HTML 3.2 standardia doctype elementti on
seuraavanlainen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
Jos taas HTML 4.0 versiota:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0//EN">
Doctype laitetaan html-koodin aivan alkuun seuraavasti:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
<HTML>
<HEAD>
<TITLE> ja niin edelleen...
<HTML></HTML>
Tämä kertoo että kyseessä on html-dokumentti. Tähän
ei liity mitään attribuutteja. Alkutagi <HTML>
tulee doctypen jälkeen ensimmäisenä ja lopputagi
</HTML> viimeisenä koodissa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
<HTML>
tässä välissä kaikki muu
</HTML>
<HEAD> </HEAD>
Head-elementtiin tulee sellaista informaatiota joka ei
varsinaisesti näy www-sivulla, kuten sivun nimi, avainsanoja
hakukoneille, kuvaus dokumentista, tekijä tai javascriptiä.
Head-elementillä ei ole attribuutteja. Head-elementti tulee
koodissa <HTML>alkutagin jälkeen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
<HTML>
<HEAD>
tähän head-elementtiin tuleva informaatio
</HEAD>
</HTML>
<BODY></BODY>
Body-elementtiin tulee sellainen tieto joka näkyy
sivulla, Otsikot, teksti, kuvat, multimediaelementit,
muotoilut jne. Body elementti tulee </HEAD> lopputagin
jälkeen.
Body-elementin attribuutteja ovat:
BGCOLOR sivun taustaväri (heksakoodina, esim.
"#ffffff" valkoinen, "#ff0000" punainen)
TEXT sivulla olevan tekstin väri
VLINK vieraillun linkin väri
ALINK aktiivisen linkin väri
BACKGROUND taustakuva (polku kuvatiedostoon, esim
"kuvat/tausta.gif"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#333333"
TEXT="#ffff00">
tähän väliin kaikki sivulla näkyvä
sisältö.
</BODY>
</HTML>
<TITLE></TITLE>
Title tagiparin väliin tulee sivun nimi, joka näkyy
selaimen yläreunan statuspalkissa. Kannattaa valita kuvaava
nimi. Maksimi 63 merkkiä. Title kuuluu Head-elementtiin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
<HTML>
<HEAD>
<TITLE>Oy-Firma ab:n linkkisivu</TITLE>
</HEAD>
jne...
<META>
Meta-elementissä voi olla esim. hakusanoja, kuvaus
sivusta, tekijä nimi tai ohjelma jolla sivu on tehty.
Meta-elementit sijoitetaan head-elementin sisään ja ne
sisältävät aina attribuuttiparin..
Esimerkkejä attribuuteista
<META NAME="description" CONTENT="Oy
Firma Ab:n multimediasivusto. Meiltä löytyy kaikki
tarvitsemasi osaaminen"
<META NAME="keywords" CONTENT="digitaalinen,
kuva, ääni, multimedia, kamera, video, midi, animaatio"
<META NAME="author" CONTENT="Matti
Meikäläinen"
<META NAME="generator" CONTENT="muistio"
Muitakin metatageja on olemassa.
Body-elementtiin voit kirjoittaa normaalia tekstiä. On
huomattava että näppäimistöllä tehdyt rivinvaihdot tai
useammat kuin yksi välilyönti eivät vaikuta www-sivulle
tulevaan tekstiin (rivinvaihto <BR>-tagilla ja
välilyönnit kirjoittamalla )
<BR> tagilla voit vaihtaa riviä, niin että
seuraava sana alkaa seuraavalta riviltä. ei lopputagia eikä
attribuutteja.
Esimerkki:
Tässä ensimmäinen rivi<BR>
Tässä toinen rivi
Html-kielessä on kuusi eri otsikkotasoa joita kuvataan
tageilla <H1> - <H6>. H1 on suurin
otsikko ja H6 pienin. Näytteet otsikoista (voivat näyttää
erilaisilta eri selaimissa):
<H1>Otsikko 1</H1>
<H2>Otsikko2</H2>
<H3>Otsikko 3</H3>
<H4>Otsikko 4</H4>
<H5>Otsikko 5</H5>
<H6>Otsikko 6</H6>
Kolme viimeistä otsikkotasoa ovat niin pieniä, että
niiden käyttökelpoisuus on kyseenalainen.
Otsikkotagien attribuutteja ovat ALIGN="left"
(center, right) (tasaus vasemmalle, keskelle tai
oikealle)
<P> eli kappaletta tarkoittavaan tagiin
kuuluu myös lopputagi </P>, vaikka sitä ei
yleensä käytetä. Kappaleet erottuvat toisistaan niin,
että niiden väliin jää yksi tyhjä rivi.
<P ALIGN="left">Tässä on
ensimmäinen kappale joka sisältää ensimmäisen kappaleen
asioita ja on tasattu vasemmalle </P>
<P ALIGN="center">Tässä
on toinen kappale joka sisältää toisen kappaleen asioita
ja on tasattu keskelle</P>
<P ALIGN="right">Tässä
on kolmas kappale joka sisältää kolmannen kappaleen
asioita ja on tasattu oikealle </P>
<P ALIGN=Justify">Tässä on neljäs
kappale joka sisältää neljännen kappaleen asioita ja on
tasattu niin, että teksti ulottuu vasemmasta reunasta
oikeaan reunaan, ainakin suurinpiirtein niin (keksin
tekstiä, että sitä riittää oikeaan reunaan asti) </P>
Yleensä ilman attribuuttia (ALIGN) kappale tasaantuu
vasemmalle. Attribuutit siis ALIGN="left" (center,
right, justify).
<CENTER></CENTER> tagipari keskittää
kaiken alku ja lopputagin välissä olevan. Ei attribuutteja.
<CENTER> kaikki mitä tässä
on (teksti, kuvat taulukot jne.) on keskitettyä.
</CENTER>
<BLOCKQUOTE></BLOCKQUOTE> tagiparia on
alunperin käytetty kuvaamaan lainausta, mutta nykyään
sitä käytetään yleisesti sisennykseen. (esim tämä
kappale on sisennetty ko-tagilla). Ei attribuutteja.
<PRE></PRE>tagiparin välissä olevassa
tekstissä toimivat välilyönnit ja rivinvaihdot. Ei
attribuutteja. Fontti riippuu selaimesta (usein Courier)
Tämä teksti on
esimuotoiltua voit siis muokata tekstiä vapaammin.
<HR> lisää sivulle vaakasuoran viivan
(tällä sivulla käytetty erottamaan eri aihealueita
toisistaan).
Attribuutteja:
ALIGN="left" (center, right,
SIZE = "5" viivan paksuus pikseleinä
WIDTH = "75%" Viivan leveyden joko
pikseleinä tai prosentteina tilan leveydestä.
alla äskeisessä määritellyn kaltainen viiva
<FONT></FONT> tagiparin välissä
olevaan tekstinosaan voidaan määritellä väri ja koko
seuraavilla attribuuteilla:
SIZE="1" (2, 3, 4, 5, 6, 7 tai +1, +2,
+3, -1, -2, -3 eli suhteessa perustekstiin plussaa tai
miinusta)
COLOR="#ff0000"
Esim.
<FONT SIZE="1" COLOR="#ff0000">
pikkiriikkistä punaista tekstiä</FONT>
näyttää seuraavalta:
pikkiriikkistä punaista
tekstiä
<B></B> tagiparin välissä oleva
teksti näkyy lihavoituna. Ei attribuutteja.
<B>Lihavoitua tekstiä</B>
<I></I> tagiparin välissä oleva
teksti näkyy kursivoituna. Ei attribuutteja.
<I>Kursivoitua tekstiä</I>
<U></U> tagiparin välissä oleva
teksti näkyy alleviivattuna (saattaa sekoittua linkkiin). Ei
attribuutteja.
<U>Alleviivattua tekstiä</U>
<UL></UL> tagien välissä oleva teksti
näkyy listana. Listan kohdat merkitään tagilla <LI>
attribuutteja ovat:
TYPE="square" (disc, circle, compact)
kuvaavat alussa olevan merkin ulkonäköä (compact
säästää tilaa).
Voivat olla joko <UL> tai >LI> tagissa.
Esimerkki:
<UL TYPE="square">
- <LI> listan eka kohta
- <LI> listan toka kohta
- <LI TYPE="disc">
listan kolmas kohta
</UL>
<OL></OL> tagien välissä oleva teksti
näkyy listana. Listan kohdat merkitään tagilla <LI>
attribuutteja ovat:
TYPE="1" (a, A, i, I, compact) kertoo onko
lista numeroitu numeroilla, aakkosilla vai roomalaisilla
numerolla (compact säästää tilaa).
Esimerkki:
<OL TYPE="i compact">
- <LI> listan eka kohta
- <LI> listan toka kohta
</OL>
Taulukkoa on alunperin käytetty nimensä mukaisesti
taulukoiden tekemiseen www-sivuille. Nykyisin sen tärkein
käyttö lienee kuitenkin sivun asemointi. Koska taulukolle
ja sen soluille voi määrätä leveyksiä ja korkeuksia,
voidaan varmistaa, että sivu näyttää suurinpiirtein
samalta kaikilla käyttäjillä.
<TABLE></TABLE>tagipari tarkoittaa
taulukkoa. Attribuutit:
ALIGN="left" (center, right) tasaus
käytettävissä olevaan tilaan nähden.
BORDER="1" (2, 3,) reunuksen leveys.
WIDTH ="600" (50%) taulukon leveys
käytettävissä olevaan tilaan nähden pikseleinä tai
prosentteina.
CELLPADDING Tyhjä tila solujen sisällön ja
reunuksien välissä pikseleinä.
CELLSPACING Tyhjä tila eri solujen reunuksien
välissä.
<TR></TR> tagipari tarkoittaa taulukon
riviä. Attribuutit:
ALIGN="left" (center, right) Solujen
sisällön vaakasuuntainen kohdistus. TD-elementtien vastaava
attribuutti ohittaa tämän määrityksen.
VALIGN="top" (middle, bottom, baseline)
Solujen sisällön pystysuuntainen kohdistus. Oletusarvo on
middle. TD-elementtien vastaava attribuutti ohittaa tämän
määrityksen.
<TD></TD> tagipari tarkoittaa taulukon
solua. Attribuutit:
ALIGN="left" (center, right) Solujen
sisällön vaakasuuntainen kohdistus. Nämä ohittavat
TR-elementille annetut vastaavat attribuutit.
VALIGN="top" (middle, bottom,
baseline)Solujen sisällön pystysuuntainen kohdistus. Nämä
ohittavat TR-elementille annetut vastaavat attribuutit.
WIDTH ="300" (50%) solun leveys pikseleinä
tai prosentteina.
HEIGHT ="200" (50%) solun korkeus
pikseleinä tai prosentteina.
NOWRAP Solun sisältöä ei jaeta useille riveille.
ROWSPAN Solujen yhdistäminen pystysuunnassa. Arvona
kokonaisluku 2 -> rivien lukumäärään.
COLSPAN Solujen yhdistäminen vaakasuunnassa. Arvona
kokonaisluku 2 -> sarakkeiden lukumäärään
Esimerkki 1: Seuraavassa taulukossa on kaksi
riviä, joilla kaksi solua.
<TABLE BORDER="2">
<TR>
<TD>eka solu</TD>
<TD>toka solu</TD>
</TR>
<TR>
<TD>koka solu</TD>
<TD>neka solu</TD>
</TR>
</TABLE>
ja se näyttää tältä:
| eka solu |
toka solu |
| koka solu |
neka solu |
<TH></TH> otsikkosolu, näyttää
yleensä tekstin lihavoituna, muuten sama kuin <TD>
<CAPTION></CAPTION> väliin tulee
taulukon otsikko.
BGCOLOR="#RRGGBB" taustaväri, voidaan
käyttää Table, Tr, Td tagien attribuuttina (ei kuulu html
3.2 määritykseen).
BACKGROUND="kuva.gif" taustakuva, voidaan
käyttää Table, Tr, Td tagien attribuuttina (ei kuulu html
3.2 määritykseen).
BORDERCOLOR, BORDERCOLORLIGHT ja BORDERCOLORDARK
määritellään reunuksen väriä (ei kuulu html 3.2
määritykseen).
Esimerkki 2: Ylemmällä rivillä kaksi solua
yhdistetty, kaikilla soluilla omat taustavärit. Soluissa
täytyy olla jotakin sisältöä, että niiden reunat
näkyvät lisää tyhjän lyönnin.
<TABLE BORDER CELLPADDING="2"
WIDTH="300">
<TR>
<TD COLSPAN=2
BGCOLOR="#ff0000"> </TD>
</TR>
<TR>
<TD BGCOLOR="#ffff00"> </TD>
<TD BGCOLOR="#00ff00"> </TD>
</TR>
</TABLE>
näyttää seuraavalta
<A></A> eli hyperlinkki-elementillä
tehdään linkkejä muihin www-sivuihin, samalla sivulla
oleviin ankkureihin, sähköpostiosoitteisiin tai muihin
tiedostoihin (esim.kuva tai ääni).
Attribuutteja:
HREF
Esimerkkejä linkeistä:
Linkittäminen toiselle sivulle: <A
HREF="http://www.jkl.fi">Jyväskylä</A>
Toimii seuraavasti: Jyväskylä
Linkittäminen sähköpostiosoitteeseen: <A
href="mailto:natunen@co.jyu.fi">Hannu</A>
Toimii seuraavasti: Hannu
Linkittäminen kuvaan: <A
HREF="kuva/fp_ikkuna.jpg">Kuva</A>
Toimii seuraavasti: Kuva
Kuva voi myös olla hyperlinkkinä: <A
HREF="http://www.jypoly.fi"><IMG
SRC="kuva/lomake.jpg"></A>
Toimii seuraavasti: 
Linkittäminen samalla sivulla olevaan ankkuriin: <A
HREF="#tagit">Html-tagit</A>
Toimii seuraavasti: Html-tagit
NAME ankkuri
Esimerkki ankkurista
Tehdään ankkuri johonkin kohtaan sivua: <A
NAME="tagit">Html-tagit</A>
(tämän sivun alkupuolella)
SUHTEELLISET JA ABSOLUUTTISET OSOITTEET
osoitteet voivat olla suhteellisia, jolloin linkki
viittaa esim. samassa hakemistossa olevaan kohteeseen.
esim. linkki samassa hakemistossa olevaan sivuun
<A HREF="sivu2.html">sivu kakkoselle</A>
linkki alihakemistossa olevaan sivuun
<A HREF="muut/sivu2.html">sivu
kakkoselle</A>
linkki ylähakemistossa olevaan sivuun
<A HREF="../sivu2.html">sivu
kakkoselle</A>
Jos osoite on absoluuttinen, se sisältää koko
URL:in joka alkaa http://
esim.
<A
HREF="http://batman.jypoly.fi/~hannu/verkko_julk/index.html">digikuvasivulle</A>
Kannattaa käyttää suhteellisia viittauksia, kun se on
mahdollista
| 9.1.2003 |
|
