Nopeaan oppimiseen HTML tutoriaali

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.