HTML tutoriaali.

Kirjoittanut Antti Veräjänkorva

Versio 1.2

ESIPUHE.

Tämä tutoriaali on tarkoitettu vasta-alkajalle tai muistikirjaksi jo pidempään HTML kieltä koodanneelle. HTML kielen oppiminen tämän tutoriaalin avulla ei edellytä aikaisempaa ohjelmointi kokemusta. Tämän tutoriaalin jälkeen sinulla on täysi mahdollisuus toteuttaa vaikka jonkin firman nettisivut. Tule sinäkin HTML osaajaksi.

Mikä on HTML?

HTML on lyhenne sanoista HyperText Markup Language. HTML on Internetiin suunniteltu kieli. Sen tarkoitus on luoda nettisivun ulkonäkö. Eli HTML:ää käytetään kuvien, tekstin, yms. asemointiin (ALIGN). HTML kieltä voi käyttää myös muuhun kuin pelkkään asemointiin, mutta hyvin pian alkaa kaipaamaan jotain uutta ja se on merkki oppimisesta. Jo ilmestynyt HTML 4.0 tarjoaa uutta, mutta raskaammat koodilliset jutut tehdään CGI scripteinä, JavaScripteinä tai Javalla. On olemassa myös joukko erilaisia tyyli scriptejä kuten CSS. Nopeasti saat aikaan kotisivut kun käytät jotain WWW editoria, mutta HTML koodi olisi hyvä tuntea virhetilanteita ja editorien puutteellisuuksia silmällä pitäen.

Miten koodia näytetään?

Otsake voi olla hieman harhaanjohtava mitä kappaleen sisältöön tulee. Kyseessä ei ole koodin näyttö vaan koodin tekemä näyttö. HTML näkyy ainoastaan WWW selaimelle (Microsoft Explorer) tai joillekin editori ohjelmille. Pääasiassa HTML näkyy selaimilla. Se onkin yksi ongelma monien muiden joukossa. Eri selaimet näyttävät sivut eri tavoin ja ne voivat jopa erota hieman koodillisestikin, joten tehdessä sivuja testaa aina useilla editoreilla. Tämän tutoriaalin esimerkit toimivat ainakin IE 4.0 tai uudemmalla selaimella.

Aloitetaan sitten varsinainen tutoriaali.

SISÄLLYS :

Rakennetaan nettisivu

HTML
HEAD
TITLE
META
BODY

Tekstiä selaimelle

Tekstin kirjoitus.
Otsikot.
Tyylimuodot, rivinvaihdot ja asemointi.
Listat.

Kuvat selaimelle.

Kuva ruudulle.
Kuvakartta.

Pöydällä lisää ilmettä.

Sivu järjestykseen.
Tehokas taulukon hyödyntäminen.

Kehykset sivuja jakamaan.

Sivu kahtia.
Framet tosi käyttöön.

Form eli lomakkeet.

Napit ruutuun.
Lisää komponentteja.

THE END

ILMOITUS:

Pyydän anteeksi, jos tekstit loikkivat joissain kohtiin. Syynä tähän on, että tutoriaali on kirjoitettu WordPad:lla. Se on jälkeen päin käännetty Officen muotoon ja tämä aiheutti muutoksia asemointiin. Karsin niitä toki käsin pois, mutta aina saattaa jäädä joitain mitä en ole huomannut. Jos näet tällaisia niin voitko ilmoittaa siitä minulle sähköpostilla?

Minulle saa ilmoittaa myös muista virheistä joita tutoriaalista mahdollisesti löydätte.

1. Rakennetaan nettisivu.

a) HTML

Sivun koodaus alkaa <HTML> käskyllä ja loppuu </HTML> käskyyn.

<HTML>

tähän väliin tulee koodi.

</HTML>

Merkkijono <HTML> kertoo, että kyseessä on HTML dokumentti ja </HTML> jono kertoo, että HTML dokumentti loppuu. HTML kielessä on melkein kaikilla käskyillä on aloitus ja lopetus merkit. Eli <HTML> aloittaa HTML dokumentin ja </HTML> lopettaa dokumentin.

b) HEAD

Seuraava osio on <HEAD>. <HEAD> osioon kirjoitetaan yleistä tietoa sivusta. <HEAD> osioon tulee, myös otsikko osio eli <TITLE>. <META> koodeilla, jotka tulevat <HEAD> osioon kerrotaan sivun tietoja. Tehdäänpä tässä vaiheessa pieni sivu. Ota joku editori mihin voit kirjoittaa (NOTEPAD) älä käytä mitään lihavointeja tai kursivointeja. Kirjoita seuraava koodi editorille.

Esim 1. ekasivu.html

<HTML>

<HEAD>

<TITLE>Ekasivu</TITLE>

<META name="description" Value="Täällä on kaikki.">

<META name="keywords" Value="kaikki, täällä">

</HEAD>

<BODY></BODY>

</HTML>

Talenna koodi ekasivu.html ja naksauta syntynyttä sivua. Sivu ei tee mitään eikä sen pitänytkään. Kirjoitahan <BODY> osioon tesktiä esim.

<BODY> jeejee </BODY>.

Tällä kertaa ruutuun piti tulla tekstiä, jos tekstiä ei kuitenkaan tullut älä hermostu vastukset löytyvät kyllä. Nyt tarkastelemme Esim1 koodia.

Ensimmäinen rivi <HTML>

- Kertoo dokumentin olevan HTML dokumentti

Toinen rivi <HEAD>

- Aloittaa HEAD osion

Kolmas rivi <TITLE>Ekasivu</TITLE>

- Ikkunan otsikko

Neljäs rivi <META name="description" Value="Täällä on kaikki.">

- Sivun kuvaus eli value arvo näkyy hakupalvelimella, kun sivu on löydetty hakukoneesta.

Viides rivi <META name="keywords" Value="kaikki, täällä">

- Hakupalvelin löytää sivusi mm. Value arvon mukaan eli, jos kirjoitat Altavistaan hakusanaksi kaikki tai täällä sivut löytyvät.

Kuudes rivi </HEAD>

- Sulkee HEAD osion

Seitsemäs rivi <BODY></BODY>

- BODY osion aloitus ja lopetus

Kahdeksas rivi </HTML>

- HTML dokumentti loppuu

Tämä selvennys ei varmasti auttanut paljoa, mutta kohta kaikki selviää.

c) TITLE

TITLE osio antaa ikkunalle otsikon. <TITLE> OTSIKKO </TITLE> tämä koodi muuttaisi ikkunan otsikon "OTSIKKO" nimiseksi. TITLE kirjoitetaan HEAD osioon. Esimerkkinä aiheesta käy jo aiemmin tekemämme ekasivu.html.

d) META

<META NAME="description" VALUE="Täällä kaikki"> Tälläinen koodi antaisi sivuille "Täällä kaikki" kuvauksen. Eli jos Hakukone löytää tekemäsi sivut lukee sivun kuvauksessa "Täällä kaikki".

<META NAME="keywords" VALUE="täällä, kaikki"> Tämä koodi taas antaa sivuille hakusanoja Value kentässä määritellyt sanat ovat hakusanoja sivuille. Elikkä jos taas Altavistaan kirjoitellaan täällä tai kaikki pitäisi sivut löytyä.

e) BODY

BODY on yksi tärkeimmistä elementeistä nettisivuilla. Siellä määritellään tekstin väri, linkin väri, aktiivisenlinkin väri, jo painetun linkin väri, tausta väri/kuva tai sieltä voi ajaa scriptejä.

Tekstinväri asetetaan text="väri"

Linkinväri asetetaan link="väri"

Jo painetun linkinväri vlink="väri"

Aktiivisen linkinväri alink="väri"

Taustaväri bgcolor="väri"

Kun teimme esimerkin ekasivu.html ei BODY osiota määritelty sen tarkemmin, koska sitä ei tarvittu. Seuraava esimerkki onkin BODY osion määrittelystä.

<BODY text="#800080" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

koodia ....

</BODY>

Tee ekasivu esimerkkiin pieni muutos.

Esim 2. ekasivu2.html

<HTML>

<HEAD>

<TITLE>Ekasivu</TITLE>

<META name="description" Value="Täällä on kaikki.">

<META name="keywords" Value="kaikki, täällä">

</HEAD>

<BODY text="#800080" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

</BODY>

</HTML>

Tallenna nimellä ekasivu2.html ja katso mitä tapahtui. BODY osion ominaisuudet eivät tähän loppuneet, mutta niistä lisää kun niitä tarvitaan.

Yhteenveto.

Nyt olemme käyneet läpi keskeisiä asioita HTML kielestä ja onkin aika koota asiat yhteen. Paljon jää ulkopuolelle ja paljon myös sisäpuolelle. Mikäli huomaat tässä vaiheessa, ettei sivusi toimi vaikka mitä tekisi niin ei hätää. Nyt kanttaa olla tarkkaavainen sille seuraava esittelee lyhyessä muodossa kaiken yllä olevan.

Haluamme tehdä nettisivun, jonka taustaväri on punainen ja otsake on punainen nettisivu. Homma ei kuulosta juuri miltään eikä se juuri mitään olekaan. Vaan kun sen oikein monimutkaisesti selittää niin sekin voi muuttua mitä merkillisemmäksi asiaksi. Olenkin antanut kaiken tarmoni selittää tämä asian mahdollisimman yksinkertaisesti ja lyhyesti. Olen jättänyt selittämättä asioita aivan tarkoituksella, ettei ne sekoittaisi ja mutkistaisi oppimista entisestään. Pois jätetyt asiat selviävät kyllä joten otahan mukava asento ja rentoudu.

Aloitamme esimerkillä.

Esim 3. punainen nettisivu.html

<HTML>

<HEAD>

<TITLE>Punainen nettisivu</TITLE>

</HEAD>

<BODY BGCOLOR="RED">

</BODY>

</HTML>

Tämä koodi teki halutun tehtävän.

TEE NÄIN:

· Kirjoita teksieditoriisi tuo koodi.

· Aja sivut!!!

· Jos sivut ei toiminut tarkista kirjoitusvirheet ja katso, että käytät IE selainta.

· Muuta nyt <BODY BGCOLOR="RED"> rivi seuraavan laiseksi.

<BODY BGCOLO="BLUE">

· Aja sivut!!!

· Huomasit varmaan mitä tapahtui. Seuraavaksi muuta sivun otsikko joksikin muuksi.

· Onnistuuko? Jos ei katso kohta c) TITLE uudestaan.

Tässä oli lyhyesti tämän hetkinen osaaminen. Siirry nyt eteenpäin olit sitten tajunnut yllä olevan tai et.

MUISTA:

Body osio tulee aina Head osion jälkeen.

2. Tekstiä selaimelle.

Maistele sanaa "leipäteksti". Ah kuinka kamala sana ja nyt me puhumme juuri siitä. Tämän aiheen kohdalla voi kuulla sanan leipäteksti. Sanalla ei ole mitään merkitystä kun koodaamme sivuja joten unohdamme sen. Sanan tarkoitus selviää sinulle, jos enemmän koodailet sivuja. Emme kuitenkaan voi välttyä leipätekstiltä, joten puhumme siitä vaikka sanaa emme käytäkään.

a ) Tekstin kirjoitus.

Aihe ei kuulosta kovin kaksiselta, mutta siihen liittyy yllättävän paljon asiaa. Asian paljous osaamisen myötä kuitenkin häviää tai sitä ei enää huomaa, koska se on itsestäänselvyys. No niin aloitetaan.

Kun haluat tekstiä selaimella se täytyy kirjoittaa BODY osioon. Toki tekstin voi kirjoittaa mihin haluaa, mutta se ei ole terveellistä uskokaa pois. Tee nyt esimerkki ohjelman, joka tulostaa tekstin. HUOMAA MISSÄ SELAIMELLA NÄKYVÄ TEKSTI SIAITSEE KOODISSA!!!

Esim 4. teksti1.html

<HTML>

<HEAD>

<TITLE>Teksti ruudulla</TITLE>

</HEAD>

HERE'S COME TEXT IN BLACK

</BODY>

</HTML>

Kun ajoit sivun ruudulla luki ”HERE'S COME TEXT IN BLACK”, jos ei lukenut niin tarkista kirjoitusvirheet. Näitkö missä kohtaa teksti sijaitsi. On tärkeää, että teksti on BODY osiossa muuten teksti ei tulostu oikein.

Nyt kun tiedät mihin kirjoitat tekstiä niin on aika syventyä suomalaiseen kieleen ja ennen kaikkea sen kirjoittamiseen. Kaikki suomalaiset tietävät, että kielemme sisältävät kirjaimet ä, ö ja å. Nämä kirjaimet tuottavat aina päänvaivaa koodatessa. Ensimmäinen sääntö älä luota silmiisi ne pettävät aivan varmasti. Kirjoittaessasi suomenkielisiä sivuja on muistettava ettei esim. Englannissa ole Ä eikä Ö kirjaimia. Jotkut selaimet eivät välttämättä tue skandinaavisia merkkejä suoraan. Koska niiden selaimen tai koneen kieli on Englanti. Joten aina kun Ä ja Ö kirjaimia kirjoitetaan on kirjaimet kirjoitettava näin.

(HTML:ää koodatessa skandinaaviset merkit korvataan seuraavilla koodeilla.)

Ä = Ä

ä = ä

Ö = Ö

ö = ö

Å = Å

å = å

b) Otsikot.

Jos jokin on tehty HTML kielessä hyvin se on sen samanlaisuus. Jokaisen osion lopetus ja aloitus käsky kirjoitetaan < > merkkien väliin esim. <BODY> ... </BODY>. Tämä pätee myös otsikoissa jotka ovat tyyliä <H1>...</H1>. Otetaan tähän väliin esimerkki jossa kokeillaan skandinaavisia merkkejä ja eri otsikoita.

Esim 5. otsikot.html

<HTML>

<HEAD>

<TITLE>Otsikot</TITLE>

</HEAD>

<BODY text="#000000" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

<H1>Tämä on otsikko</H1>

<H2>Tämä on otsikko</H2>

<H3>Tämä on otsikko</H3>

<H4>Tämä on otsikko</H4>

<H5>Tämä on otsikko</H5>

<H6>Tämä on otsikko</H6>

</BODY>

</HTML>

Ruudulla piti olla eri kokoisia otsikoita, jos oli niin hyvä, jos ei niin tiedät mitä tehdä (tarkista kirjoitusvirheet). Otsikkoa ei kuitenkaan kannata käyttää ulkonäön perusteella, koska eri selaimet näyttävät otsikot eri lailla. Otsikot ovat teksti tarkoitusta osoittavia välineitä ei tyylimuotoja. Tyylimuodoista kun kerran jo alettiin puhumaan niin jatketaan niistä seuraavassa.

c) Tyylimuodot, rivinvaihdot ja asemointi.

Tulet sivuillasi käyttämään paljon erilaisia fontteja ja korostuksia. Niiden käyttö HTML:llä on hankalaa ja työlästä. Joissakin tilanteissa on kuitenkin mielekästä käyttää HTML:ää. Osio FONT on avainsana ja tarkastelemme sitä nyt.

FONT osiolla on erilaisia käskyjä ja niillä erilaisia toimintoja seuraavassa on lista FONT osion tärkeistä käskyistä.

· FACE "määrää mitä fonttia käytetään."

· SIZE "määrää fontin koon."

· COLOR "määrää fontin värin."

Edellä oleva selvennys ei varmasti selventänyt mitään, mutta nyt hieman esimerkkiä niin homman nimi selviää kyllä.

Esim 6. fontti.html

<HTML>

<HEAD>

<TITLE>Fontti</TITLE>

</HEAD>

<BODY text="#000000" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

<FONT size="+2" COLOR="blue" FACE="Arial">

Koko = 2<BR>

Väri = sininen<BR>

Fontti = Arial<BR>

</FONT>

<BR>Tässä taas normaalia tekstiä.

</BODY>

</HTML>

Kuten huomataan tekstin väriä voi siis muuttaa muultakin kuin BODY osiosta, mutta eniten sivuilla käytettävä väri kanttaa laittaa BODY osioon. Äskeisestä koodista löytyy uutta ja ihmeellistä. Olen päättänyt aloittaa rivistä

<FONT size="+2" COLOR="blue" FACE="Arial">.

Koodin pätkä kertoo selaimelle, että halutaan kirjoittaa +2 kokoista kirjainta (luoja tietää miksi kokoa ei ilmoiteta pikseleinä), väri halutaan siniseksi ja fontti on Arial.

Esimerkissä ilmenee myös <BR> kirjainyhdistelmä. Tämä ei ole varsinainen osio vaan käsky (rivinvaihto). Seuraavaksi esittelen joukon tyylimuotoja jotka ovat erittäin käteviä ja suositeltavia käyttää.

· <STRONG>...</STRONG> "Tärkeä asia."

· <EM>...</EM> "Emphasis, korostus"

· <DFN>...</DFN> "Definition, määriteltävä sana."

· <BLOCKQUOTE>...</BLOCKQUOTE> "Pidempi lainaus."

· <B>...</B> "Lihavointi"

· <I>...</I> "Kursiivi"

Useat tyylit saattavat näyttää samoilta, mutta eri selaimissa eroja voi näkyä joten ole tarkka mitä teet. Yksi hyödyllinen tyylimuoto oli unohtua se on <PRE>...</PRE> sillä voi tulostaa jo muotoiltua tekstiä sellaisenaan.

<PRE>

JEE JEE

**********

KOODAAN VAAN

</PRE>

Tekstiä halutaan usein myös asemoida se tapahtuu monellakin tavalla, mutta tässä tarkastellaan yhtä tapaa. Osioilla CENTER, LEFT ja RIGHT voidaan asemoida mitä tahansa ei pelkästään tekstiä vaan kaikkea näkyvää ja ei näkyvää. Jos haluat vaikka otsikon keskelle ruutua se tapahtuu seuraavasti.

<CENTER><H1>Otsikko</H1></CENTER>

( LEFT ja RIGHT toimivat aivan samoin. )

Tässä oli hyödyllisiä tyylimuotoja joita kanttaa hioa. Seuraavaksi listoista.

d) Listat.

Listoja on HTML:ssä muutama (muutama = 2 - 99 nykysuomen sanaston mukaan) erilaista ja käsittelemme niistä nyt kaksi. Seuraavat kaksi ovat mielestäni tärkeimmät listat HTML kielessä versioon 3.2 mennessä.

UNSORTED LIST eli Lajittelematon lista.

<UL>

<LI>Asia1

<LI>Asia2

<LI>Asia3

</UL>

Tuolle koodille tulos olisi tämän kaltainen.

· Asia1

· Asia2

· Asia3

DEFINITION LIST eli Määrittely lista

<DL>

<DT>Asia1

<DD>Asia1 selvitys

<DT>Asia2

<DD>Asia2 selvitys

<DT>Asia3

<DD>Asia3 selvitys

</DL>

Selain näyttää listan tähän malliin.

Asia1

Asia1 selvitys

Asia2

Asia2 selvitys

Asia3

Asia3 selvitys

Kun kirjoitat listoja voit käyttää tyylimuotoja eri fontteja. Listoja kanttaa todella hyödyntää kun niitä voi käyttää. Tässä ei ollut kaikkia listoja mitä HTML kielestä löytyy, mutta netti täynnä ohjeita listoja varten.

3. Kuvat selaimelle.

Kuvat ovat netin suola, mutta mikä on hyvää se on myös pahasta se pätee tässäkin. Vaikeasti graafinen sivu kestää ladata kauan ja kuvat vaativat suuren tilakapasiteetin kotihakemistostasi, joka yleensä on vain 10 megatavua. Toinen ongelma on Lynxin tapaisissa selaimissa, jotka eivät näytä kuvia. Oli miten oli kuvia kannattaa käyttää tarkoin ja tunteella sillä verkkografiikkaa ei ole helppo tehdä. Selaimella voi näyttää GIF - ja JPG formaatteja. On suotavaa käyttää JPG formaattia isoissa kuvissa, koska ne latautuvat nopeammin ja vievät vähemmän tilaa ne ovat myös huonompi laatuisia. GIF kuvat ovat hyviä silloin kun halutaan näyttää kuvaa koko ajan kun se latautuu. Kuvien käytössä on HTML:n TABLE osio hyvin keskeinen osio, mutta siitä lisää myöhemmin nyt me haluamme kuvan ruudulle.

a) Kuva ruudulle.

Kuvan lataaminen selaimelle onnistuu käskyllä IMG. IMG ei ole osio vaan käsky jota käsitellään nyt. (IMG käskyllä ei ole lopetus käskyä, koska se ei ole osio.)

<IMG SRC="image.jpg">

Tämä koodi lataa image.jpg nimisen kuvan samasta hakemistosta kuin missä on itse sivu. Kuvia voi ladata myös eri hakemistoista sijoittamalla kuvan nimen eteen hakemistopolun eli netissä URL (Uniform Resource Locator). Otetaan sama esimerkki, mutta nyt kuva ladataan netistä.

<IMG SRC="http://saunalahti.fi/~ors/images/image.jpg">

( Kyseistä kuvaa ei löydy tästä URL:stä, mutta periaate on tämä. )

Kuvien kanssa voi käyttää kaikkia asemointi tyylejä mitä HTML:ssä on ja niitä käsitellään tässä luvussa.

Nyt ladataan kuva selaimelle pienen esimerkin muodossa.

Esim 7. kuva.html

<HTML>

<HEAD>

<TITLE>Kuva</TITLE>

</HEAD>

<BODY text="#000000" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

<IMG SRC="image.jpg">

</BODY>

</HTML>

Jos onnistui niin näyttöön latautui kuva tietysti vain jos sinulla on image.jpg niminen tiedosto sivun kanssa samassa hakemistossa. Nyt vähän IMG käskyä syvemmin.

· ALIGN "Kuvan asemointia."

· WIDTH "Kuvan leveys pikseleissä tai prosenteissa."

· HEIGHT "Kuvan korkeus pikseleissä tai prosenteissa."

· HSPACE "Tekee tyhjää tilaa kuvan oikealle ja vasemmalle reunalle."

· VSPACE "Tekee tyhjää tilaa kuvan ylä- ja ala puolelle."

· BORDER "Tekee kuvan ympärille reunuksen."

· ALT "Antaa kuvalle teksti kuvauksen."

Nyt katsomme koodillisesti miten yllä mainitut toimivat.

Tämä koodi tekisi selaimelle image.jpg kuvan, joka olisi tasattu oikeaan reunaan. Leveydeltään kuva olisi 200 pikseliä ja korkeudeltaan 100 pikseliä. Kuvan reunoilla olisi 20 pikseliä tyhjää tilaa ja kuvan teksti kuvaus on image.jpg.

b) Kuvakartta.

Kuvakartta onpa se hieno sana aivan kuin koodattaisiin oikeaa grafiikkaa, mutta ei sentään. HTML kuvakartta on mitä yksinkertaisin asia, sen selittäminen taas ei ole yhtä yksinkertaista joten koettakaa kestää.

Käsittelemme Client Side Map kuvakarttaa eli asiakaskartta. Homman nimi on se, että määrittelemme alueita kuvasta ja kun klikkaamme hiirellä määriteltyä aluetta se vie haluttuun URL osoitteeseen. Lataamme selaimelle kuvan aivan normaalisti pientä yksityiskohtaa luukuun ottamatta. Lisää kuvan lataus koodiin USEMAP tarkennin tähän tyyliin.

Usemap tarkennin kertoo selaimelle mitä karttaa käytetään eli usemap tarkenteeseen kirjoitetaan käytettävän kartan nimi.

Nyt tarkastellaan itse karttaa.

<MAP NAME="kartta">

<AREA HREF="index.html" ALT="MainPage" SHAPE=rect COORDS="0, 0, 100, 50">

<AREA HREF="index2.html" ALT="MainPage2" SHAPE=rect COORDS="0, 50, 100, 100">

</MAP>

Koodi saattaa koodaamattomalle näyttää vaikealta, mutta sitä se ei ole.

· Map name "Määrää kartan nimen.” (Tämän nimen kirjoitat USEMAP tarkenteeseen lisäät vain nimen eteen # -merkin.)

· Area href "Määrää URL osoitteen johon kordinaateilla rajattu alue vie kun sitä klikataan.”

· ALT "Alueen teksti kuvaus."

· Coords "Alueen kordinaatit (coords"X, Y, X2, Y2"). Ensimmäinen on X:n aloitus piste, toinen Y:n aloitus piste, kolmas X:n lopetus piste ja neljäs Y:n lopetus piste. (Tämä selviää parhaiten kokeilemalla.)”

4. Pöydällä lisää ilmettä.

Arvatenkin luku käsittelee jotain pöydistä. Aiheena on TABLE osio jolla ei ole mitään tekemistä pöydän kanssa paitsi nimi. Mielestäni parempi nimi olisi ollut GRID eli verkko, koska TABLE muistuttaa toimitavaltaan paljon verkko-layoutteja (esim. Javassa). No oli miten oli HTML se on TABLE ja se siitä. TABLE on erittäin käytännöllinen asemointi väline varsinkin kuvien kanssa.

a) Sivu järjestykseen.

TABLE osio kanttaa opetella kunnolla, koska se on paras työkalu HTML:ssä. Olet kai jo huomannut, että tekstiä ja kuvia ei tahdo saada oikeaan paikkaan oikein millään. No nyt loppui taistelu sillä TABLE pelastaa sinut monesta pulmasta.

<TABLE>

<TD><H1>Otsikko</H1></TD>

</TABLE>

Yllä oleva koodi tekisi pienen TABLE osion sivulle, jolla ei ole mitään määritteitä. TABLE osiossa elementit asetellaan eri soluihin, kuten yllä olevassa koodissa. TABLE osiolla on paljonkin määritteitä ja niistä seuraavaksi.

· ALIGN "Solun elementtien asemointia."

· WIDTH "Solun, otsikon tai taulukon levys."

· HEIGHT "Solun, otsikon tai taulukon korkeus."

· BORDER "Reunuksen leveys."

· CELLSPACING "Tyhjää tilaa solujen väliin."

· CELLPADDING "Tyhjää tilaa solun reunuksen ja sisällön väliin."

· BGCOLOR "Solun tai taulukon taustaväri."

· BACKGROUND "Taustakuva."

· <TD> "Luo solun."

· <TR> "Luo uuden rivin taulukolle."

· <TH> "Luo taulukon otsikon."

· COLSPAN "Tämä kuuluu vain <TD> ja <TH> osioille ja se tekee solusta halutun levyisen."

· ROWSPAN "Tämä kuuluu vain <TD> ja <TH> osioille ja se tekee solusta halutun korkuisen."

Sitten olisikin paikallaan vähän esimerkkiä.

Esim 8. table.html

<HTML>

<HEAD>

<TITLE>TABLE</TITLE>

</HEAD>

<BODY text="#FFFFFF" link="#FF0000" alink="#000080" BGCOLOR="#FFFFFF">

<TABLE WIDTH="80%" BORDER="1" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#000000">

<TH colspan="2" ALIGN=center>

Otsikko

</HT>

<TR>

<TD WIDTH="50%">

Solu 1</TD>

<TD WIDTH="50%">

Solu 2</TD>

</TR>

<TR>

<TD WIDTH="50%">

Solu 3</TD>

<TD WIDTH="50%">

Solu 4</TD>

</TR>

<TR>

<TD colspan="2" align=center>

Loppu</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Nyt vähän tarkastellaan koodia. Ensinnäkin meillä on taulu, joka on 80% leveä framesta jossa se on ja sillä on ohut reunus 1 yksikköä. Taulukon taustaväri on valkoinen ja siinä ne näkyvät jutut sitten olikin. <TH colspan="2" ALIGN=center> koodi teki otsikon, joka on kaksi solua leveä ja sisältö eli elementit sijoittuvat keskelle solua. <TD WIDTH="50%">

Antaa solulle leveydeksi 50% taulukon leveydestä. <TR> vaihtoi vain riviä. Nyt tiedät alkeet taulukoista ennen kuin siirryt eteen päin hio tätä noin kymmenen kertaa. Kokeile joka kerta jotain erilaista taulukko mallia. Tämä ei ole vaikea asia, mutta sen tehokas hyödyntäminen ei ole aina niin helppoa.

b) Tehokas taulukon hyödyntäminen.

Tehokkaasti taulukkoa oppii hyödyntämään kun soluihin asetellaan grafiikkaa. Kun monista pikku palasista halutaan yhtenäinen kuva on TABLE osio juuri se mitä tarvitset onnistuaksesi tehtävässä.

Onpa upea kuva, mutta se vastaa tarkoitustaan. Vastaan voi tulla tilanne, että nuo kuvat pitäisi asettaa saumattomasti yhteen. Silloin kuvista muodostuu kulma.

Eipä se juuri miltään näytä, mutta kun kuvina ovat jotain hienompaa niin johan alkaa tapahtua. Tällainen kulma halutaan yleensä silloin kun tarkoitus on tehdä laatikko jonka sisällä on tekstiä tai kuvia ehkä jopa molempia.

Jos loppu tulokseksi halutaan yllä olevan kaltainen niin saa kokematon koodari tehdä töitä aikalailla, että homma onnistuu. Tässä vaiheessa lienee syytä sanoa, että taulukkoja voi rakennella myös sisäkkäin. Se ei kuitenkaan ole minusta suositeltavaa, mutta joskus se on jopa välttämätöntä tai ainakin järkevää. Nyt annan sinulle tehtävän ja se on rakentaa tuollainen laatikko. Jos sinulla on sen verran piirtäjän vikaa että voit piirtää palaset aina parempi, mutta sinun ei tarvitse piirtää mitään saadaksesi laatikon onnistumaan. Tietysti laatikon sisälle pitää pystyä kirjoittamaan tekstiä ja asettelemaan kuvia. Eli tee kuvan mukainen laatikko (tekstiä tekstin ei tarvitse olla tuossa kohdassa).

Onnistuiko? Jos onnistuit voit olla tyytyväinen itseesi. Jos taas et onnistunut niin enpä voi väittää olevani hämmästynyt, koska tehtävä ei ollut helppo. No tässä vähän apuja.

<TABLE WIDTH="200" border="0" cellpadding="0" cellspacing="0">

<TD WIDTH="100%" height="32" bgcolor="silver" colspan="3"></td>

<TR>

<TD bgcolor="silver" width="32"></TD>

<TD bgcolor="white" width="136" height="200">TEKSTIÄ...</TD>

<TD bgcolor="silver" width="32"></TD>

</TR>

<TR>

<TD WIDTH="100%" height="32" bgcolor="silver" colspan="3"></TD>

</TR>

</TABLE>

Tämä koodi teki halutun työn. Tapa jolla sen olin tehnyt ei ole hyvä, mutta se teki halutun tehtävän. On olemassa paljon eri tapoja tehdä sama, mutta tässä on yksi. Tämän tyylin heikkous löytyy sisälle jäävästä tilasta ... no keksit sen kun koodailet sivujasi. Parempi on käyttää ROWSPAN tarkenninta monien TD osioiden sijaan. Tämä tulee kyllä sinulle vastaan ja silloin tajuat mitä tarkoitan. Useasti huomaa, ettei taulukot mene oikein vaikka mitä tekisi. Tällöin auttaa pikku kuva huomattavasti. Eli tee yhden pikselin kokoinen transparent kuva ja sijoita se TD osioon, jos sen on jäätävä tyhjäksi, mutta se ei tahdo pitää kokoaan.

5. Kehykset sivuja jakamaan.

Framet eli kehykset ovat erittäin suosittuja internetsivuilla ympäri maailman. Kehyksien käyttöä kanttaa mielestäni kuitenkin välttää niiden työlään toteutuksen takia. Näiden kehysten tarkoitus on näyttää monta nettisivua samalla sivulla yhtäaikaa. Voi siis sanoa, että kehykset jakavat nettisivun palasiin minne voi ladata eri sivuja. Kehykset toimivat siten, että kirjoitetaan FRAME osio omaan html-sivuun. Tämän jälkeen tehdään näkyvät sivut aivan kuin ennenkin.

a) Sivu kahtia.

Käsittelemme nyt sivun jakamista kehyksillä. Esimerkki tehtävä on jakaa nettisivu kahtia ja asettaa molemmille puolille eri sivut. No niin ja sitten vaan esimerkin kimppuun.

· Avaa tekstieditorisi

Kirjoita sinne seuraava koodi:

<HTML>

<HEAD>

<TITLE>Kehykset</TITLE>

</HEAD>

<FRAMESET cols="50%,50%">

<FRAME NAME="vasen" SRC="vasen.html">

<FRMAE NAME="oikea" SRC="oikea.html">

<NOFRAMES>Selaimesi ei tue frameja</NOFRAMES>

</FRAMESET>

</HTML>

· Tallenna tiedosto index.html nimellä

· Tee kaksi mielivaltaista nettisivua ja tallenna toinen nimellä vasen.html ja toinen oikea.html

· Käynnistä index.html

Näin helppoa se on. Jos syystä tai toisesta et onnistunut niin kokeile uudestaan ja tarkista, että kaikki kolme sivua ovat samassa hakemistossa.

b) Framet tosi käyttöön.

Yleinen tilanne jossa kehyksiä käytetään on kun halutaan, että linkit näkyvät koko ajan vaikka viereinen sivu muuttuukin. No tuohan oli aivan selvä asia, se ei varmaan ollut kenellekään epäselvä. Nyt emme puhukaan siitä vaan pikemminkin kehyksien asettelusta ja teosta. Kehyksillä kuten kaikilla muillakin osioilla on tarkentimia ja niitä nyt.

· Name "Kehyksen nimi."

· Src "Kehyksen sivu."

· Cols "Kehyksien määrä vaakasuunnassa."

· Rows "Kehyksien määrä pystysuunnassa."

· Frameborder "Kehyksen kehys."

· Marginwidth "Kehyksen leveys-marginaali."

· Marginheight "Kehyksen korkeus-marginaali."

· Noresize "Ei voi muuttaa kokoa. (YES/NO)"

· Scrolling "Vierityspalkit. (YES/NO)"

Siinä tärkeimpiä. Nyt siirrymme todelliseen kehysten leikkiin.

Tarkoitus on luoda kuvan mukainen sivu frameilla.

Jos onnistuit voit olla taas tyytyväinen itseesi, koska tehtävä ei ollut kokemattomalle helppo. Ja tässä apuja teille jotka ette onnistuneet. Ei huolta opitte kyllä.

Tässä on Framesivu eli index.html

<HTML>

<HEAD>

<TITLE>Kehysleikki</TITLE>

</HEAD>

<FRAMESET ROWS="80%,20%">

<frame src="yla.html" NAME="yla">

<frame src="ala.html" NAME="ala">

</FRAMESET>

</HTML>

Tässä on yläsivu eli yla.html

<html>

<head>

</head>

<body bgcolor="white" text="black">

<CENTER><FONT FACE="arial" size="+3">YLÄ SIVU</FONT></CENTER>

</BODY>

</HTML>

Tässä on sivu 1 eli 1.html

<html>

<head>

</head>

<body bgcolor="white" text="black">

<CENTER><FONT FACE="arial" size="+3">1</FONT></CENTER>

</BODY>

</HTML>

Tässä on sivu 2 eli 2.html

<html>

<head>

</head>

<body bgcolor="white" text="black">

<CENTER><FONT FACE="arial" size="+3">2</FONT></CENTER>

</BODY>

</HTML>

Tässä on sivu 3 eli 3.html

<html>

<head>

</head>

<body bgcolor="white" text="black">

<CENTER><FONT FACE="arial" size="+3">3</FONT></CENTER>

</BODY>

</HTML>

Kuten joillekin varmasti jo selvisikin ettei sivujen nimillä ole mitään merkitystä kunhan arvot täsmää. Homma oli kuitenkin todella työläs ja kiusallinen tehdä. TABLE osiolla tämä olisi onnistunut puolta helpommin, mutta se ei aina vastaa käyttötarpeita.

6. Form eli lomakkeet.

Joillekin saattaa olla tuttu ”Form” sana esim. Delphistä, mutta luvun sisäistäminen ei millään muotoa vaadi sanan tuntemusta. Sanan tuntemuksesta ei nyt niin hirveästi apua olisikaan. Form tarkoittaa lomakkeita eli tässä tapauksessa ne ovat nappuloita ja tekstikenttiä. Tästä Form osiosta ei ole juurikaan mitään hyötyä sivuilla ilman CGI- tai JavaScriptejä, mutta tässä kuitenkin hieman asiaa Form osiosta.

a) Napit ruutuun.

Painonapin luominen HTML kielellä on helppoa, mutta pelkän painonapin hyödystä voidaan olla erimieltä. Itse asiassa pelkkä nappula sivulla ei tee yhtään mitään. Nappi tarvitsee tehdäkseen jotain lisäkoodia jota ei HTML:llä voi tehdä. Painonappi kuitenkin luodaan seuraavasti.

<Input Type="Button" Value="Nappi">

Tämä koodi ei nyt kovin kaksista tehtävää tee. Se kaikessa yksinkertaisuudessaan luo nappulan. Napille on olemassa tapahtumia esim. onClick. Se reagoi napin painallukseen. Tämä menee kuitenkin jo JavaScriptin puolelle joten se siitä. Emme tosiaan syvenny onClick tapahtumaan, mutta käytämme sitä saadaksemme nappulalle jotain hyötyä.

Esim 9. form.html

<HTML>

<HEAD>

<TITLE>Form</TITLE>

</HEAD>

<BODY>

<H1>Lomakkeet :</H1>

<BR>

<FORM>

<Input Type="Button" Value="Paina" onClick="alert('Painoit nappia.');">

</FORM>

</BODY>

</HTML>

Jos onnistuit piti nappia painamalla tulla 'Painoit nappia' ilmoitus. Seuraavaksi tarkemmin napin ominaisuuksista.

· Type "Kertoo selaimelle mitä komponenttia halutaan käyttää (komponenteista lisää tuonnempana).

· Value "Antaa napille tekstin eli Value arvon.

· onClick "JavaScript tapahtuma mm. simuloi napin painallusta."

· Name "Antaa painonapille nimen."

Nyt pystymme tuottamaan nappulan sivulle, mutta se ei tosiaankaan aina riitä joten seuraavassa lisää vaihto ehtoja.

b) Lisää komponentteja.

Emme käsittele tässä kaikkia Form osion komponentteja, vain keskeisemmät.

· text

· submit

· reset

· checkbox

· textarea

Yllä on luettelo komponenteista voita voit Form osiossa käyttää. Tarkastellaanpa yllä olevia komponentteja hieman tarkemmin. Komponentti määritellään selaimelle kirjoittamalla Input type kohdan arvoksi halutun komponentin nimi. Esim. <Input Type="Checkbox">. Nyt kuitenkin tarkastellaan komponentteja.

TEXT komponentti:

Text komponentti on tekstikenttä johon voi kirjoittaa tekstiä Esim. hakusanan. Sillä on myös erinäisiä tarkentimia kuten muillakin komponenteilla.

· Value "Antaa oletus arvon eli teksti mikä näkyy heti kun sivu on latautunut."

· Size "Kentän koko."

· Maxlength "Maksimi koko."

Sitten onkin pienen demonstraation paikka.

<Form>

<Input Type="TEXT" Size="20" Value="Koko on 20">

</FORM>

SUBMIT komponentti:

Submit komponentti on kuin painonappi, mutta ei ihan. Sillä meinaan on valmiiksi koodattu tapahtuma. Submit komponentin avulla voi lähettää lomakkeen tiedot ACTION kohdan ohjelmalle. ACTION käskyä ei ole käyty läpi, koska emme sitä tarvitse ilman ulkoisia ohjelmia.

· Value "Painikkeen teksti."

REST komponentti:

Rest komponentti on, myös kuin painonappi, mutta sen ominaisuutena on asettaa lomakkeet oletustilaan.

· Value "Painikkeen teksti."

Checkbox komponentti:

Checkbox eli valintaruutu se on varmasti kaikille tuttu jostain Windows ohjelmasta. Sen tarkoitus on näyttää onko jokin valittu vai ei.

· Value "Antaa kentälle tämän arvon kun se on valittuna."

· Checked "Esivalitsee ruudun."

TEXTAREA komponetti:

Otamme tähän loppuun vielä Textarea komponentin. Tämä komponentti toimii aivan erilailla kuin aiemmat. Textarea komponentti toimii samoin kuin osiot eli <TEXTAREA>...</TEXTAREA>. Textarea on tekstikenttä, mutta text komponenttia suurempi.

· Cols "Leveys."

· Rows "Korkeus."

Tarkastelemme Textarea komponenttia vielä tarkemmin esimerkin muodossa.

<TEXTAREA>

Tähän kirjoitetaan kaikki teksti mikä halutaan kentässä näkyvän.

</TEXTAREA>

Ja näin olemme käyneet nopeasti läpi Form osion. Kuten jo aiemmin sanoin se on suht turha ilman mitään scriptejä.

THE END

Voitte jo huokaista helpotuksesta sillä homma lähentelee loppuaan. On aina internetsivuja tehdessä muistettava, että jokaisella sivulla on oma yhteinen tekijä josta pidetään kiinni (siis hyvillä sivuilla). Se yhteinen tekijä voi olla väri saman tyylinen grafiikka yms. Sivuja ei kannata tehdä niin, että tällä sivulla tätä ja tällä tätä. On parempi tehdä sivut niin, että tällä sivulla tätä ja tällä sitä samaa muttei ihan. Mottona voitaisiinkin pitää Samankaltainen toteutus on heti osaavan merkki.

Verkkografiikasta vielä sen verran, että kanttaa pitää kuvat pieninä ja pyrkiä käyttämään sivuilla paljon samoja kuvia. Kotihakemisto on yleensä pieni kotikäyttäjillä parhaimmillaan, ehkä 30 MB.

Vinkki sulle ja kaikille muillekin:

· Hio Table osiota

· Tutustu kunnolla verkkografiikkan

· Suunnittele sivut aina etukäteen

· Pysy suunitelmassasi

KIITOS KAIKILLE KETKÄ LUITTE TÄMÄN TUTORIAALIN!!!