HTML-sivunkuvauskieli


Index

Html-kieli
Html-kielen rakenne
Html-tagit
Värinmääritykset
Doctype
Html
Head
Body
Title
Meta
Leipäteksti
BR pakollinen rivinvaihto
H1 - H6 otsikot
P kappale
Center keskitys
Blockquote lainaus
Pre esimuotoiltu
Hr vaakaviiva
Font fontti
B lihavointi
I kursiivi
U alleviivaus
Ul lista
Ol numeroitu lista
Table, Tr, Td, Th taulukko
A linkki
 

Html- sivunkuvauskieli

          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

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-komennot (tagit)

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


Värinmääritykset

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ä.


Doctype

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></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>

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>

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>

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>

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.


Leipäteksti

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 &nbsp; )


Br pakollinen rivinvaihto

<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


H1 - H6 otsikot

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 kappale

<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 keskitys

<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 lainaus

<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 esimuotoiltu

<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 vaakaviiva

<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 fontti

<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 lihavointi

<B></B> tagiparin välissä oleva teksti näkyy lihavoituna. Ei attribuutteja.

<B>Lihavoitua tekstiä</B>


I kursiivi

<I></I> tagiparin välissä oleva teksti näkyy kursivoituna. Ei attribuutteja.

<I>Kursivoitua tekstiä</I>


U alleviivaus

<U></U> tagiparin välissä oleva teksti näkyy alleviivattuna (saattaa sekoittua linkkiin). Ei attribuutteja.

<U>Alleviivattua tekstiä</U>


Ul lista

<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 numeroitu lista

<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">

  1. <LI> listan eka kohta
  2. <LI> listan toka kohta

</OL>


Table,  Tr, Td, Th taulukko

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 &nbsp; lisää tyhjän lyönnin.

<TABLE BORDER CELLPADDING="2" WIDTH="300">
  <TR>
    <TD COLSPAN=2 BGCOLOR="#ff0000">
&nbsp;</TD>
  </TR>
  <TR>
    <TD BGCOLOR="#ffff00">
&nbsp;</TD>
    <TD BGCOLOR="#00ff00">
&nbsp;</TD>
  </TR>
</TABLE>

näyttää seuraavalta

 
   

A Linkki

<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 |