Perusteita

HTML-kielellä kerrotaan selainohjelmalle sivujen sisältö ja ulkonäkö. Koodissa kerrotaan mitä sivulla lukee ja missä kohdassa, minkä kokoista teksti on ja minkä värisiä tekstit ja taustat ovat. Jos sivuille tulee kuvia, ohjainkoodilla vain kerrotaan missä kohdassa kyseinen kuva näytetään ja minkä kokoisena. Internet-sivut näkyvät siis tekstinkäsittelyohjelmassa tavallisena tekstinä, mutta selainohjelmassa Internet-sivuna.

Tämä ohjelmointikieli on suhteellisen helppo oppia; jo muutamassa tunnissa huomaat olevasi perillä asioista.

Tarkennuksen vuoksi sanottakoon, että on muitakin koodauskieliä joilla voidaan tehdä nettisivuja, näitä ovat mm. xhtml, php, asp, java, flash jne. Vaikka tämä opas kertookin html-kielestä, olen ottanut avuksi myös php-kielen. Php yhdistää sekä omia koodeja ja html-kieltä, ja php:n mukana tulee tiettyjä apuja joita en ole vielä löytänyt html-kielestä.

Tiedoston tyypiksi HTML

Ei ole väliä, millä ohjelmalla Internet-sivut on tehty. Tärkeintä onkin niiden tyyppi ja muoto. Jotta tietokone ymmärtäisi että kyseessä on HTML-tiedosto joka näytetään selainohjelmassa Internet-sivuna, täytyy tiedostot tallentaa HTML-tyyppisiksi. Editori tekee sen automaattisesti. Notepad-ohjelmassa tiedoston tarkennusosaksi pitää laittaa "htm" tai "html". Juuri tämä tarkenne kertoo tietokoneelle, että kyseessä on HTML-tiedosto. Eli tiedoston tallennuksen yhteydessä nimi annetaan kokonaan. Nimeksi kirjoitetaan vaikkapa index.htm eikä pelkkä index.

HUOM!
Myös muut tekstinkäsittelyohjelmat käyvät koodin kirjoittamiseen. Silloin tallennusmuodoksi pitää vaihtaa "ASCII" tai "Tekstitiedosto". Tällöin tekstinkäsittelyohjelma ei lisää tiedostoon omia koodejaan eikä tiedostoon automaattisesti mitään tarkennusosaa.

Tiedostojen hallinta

Kun Internet-sivulle halutaan kuvia, niitä ei tallenneta sivulle, vaan ne haetaan sivulle tiettyyn kohtaan määritellystä hakemistosta. Jokaisen sivun koodit ja kaikki kuvat ovat siis omina tiedostoinaan ja tarvittaessa omissa hakemistoissaan.

Esimerkki Jos kotisivusi sisältävät etusivun, jonkin tarkempia tietoja sisältävän sivun ja linkkisivun, on sinulla jo kolme eri HTML-tiedostoa. Jos vielä haluat jokaiselle sivulle erilaisen kuvan, on sinulla yhteensä kuusi tiedostoa. Mutta jos käytät samaa kuvaa jokaisella sivulla, tiedostoja on vain neljä: yksi kuva ja kolme HTML-tiedostoa.

Tiedostojen tallentamiseen on kaksi koulukuntaa: toisten mielestä kannattaa kaikki tiedostot (koodit ja kuvat jne.) laittaa samaan hakemistoon, toisten mielestä ne kannattaa eritellä: kuvat omaan ja koodit omaan hakemistoonsa. Pienissä sivukokonaisuuksissa tiedostot voi hyvin tallentaa samaan hakemistoon, koska tiedostoja ei kerry montaa. Toisaalta jos on sivujen laajeneminen on mahdollista, silloin tiedostojen sijainnit kannattaa suunnitella etukäteen ettei laajennusvaiheessa jouduta tekemään sellaista työtä jonka olisi voinut tehdä heti aluksi.

Jos Internet-sivuillasi on useita sivuja ja kuvia, kokonaisuutta saattaa olla helpompi hallita jos kuvat ja kooditiedostot ovat eri hakemistoissa.

Olennaista ei ole se, missä tiedostot sijaitsevat. Olennaisinta on se, että HTML-kielellä viitataan sivulle haettavien kuvien oikeaan sijaintiin. Jos Internet-sivu ja sivulle haettava kuva ovat samassa hakemistossa, hakemistopolkua ei tarvita. Muuten sijainti kerrotaan selaimelle laittamalla hakemistopolku koodiin. Jos laitat sivusi Internetiin, sijainti pitää määritellä palvelinkoneella olevan hakemistorakenteen mukaan.

Helpointa on tehdä omalle koneellesi samanlainen hakemistorakenne kuin palvelinkoneella. En tarkoita koko koneen hakemistorakennetta, vaan Internet-sivujen tallennushakemistoa ja sen alihakemistoja.

Koodin kirjoittamiselle löytyy vaihtoehto

Helpompi ratkaisu koodin kirjoittamiselle on HTML-editori. Editoreissa koodien kirjoittamisen sijaan sivut rakennetaan ulkoasultaan sen näköisiksi kuin ne halutaan ja editori hoitaa koodin kirjoittamisen. Mutta vaikka käyttäisitkin editoria, HTML-perusteet on hyvä osata. Kun osaat HTML-kielen perusteet, ymmärrät ohjelmointiperiaatteita kotisivujen tekemisessä ja pystyt korjaamaan yksityiskohtia ongelmatilanteissa.

Esim. Microsoftin Office-ohjelmissa on valmiina HTML-editori, mutta asennusohjelma ei asenna sitä kuin erikseen pyydettäessä.

Uusimpien editorien ja vanhimpien selaimien yhteensopivuus ei kuitenkaan ole taattu, koska editori saattaa käyttää ohjainkoodeja joita jotkut selainohjelmat eivät tunnista. Myös eri ohjelmistotalojen välillä on eroja. Eli jos olet tehnyt sivut Microsoftin editorilla, ei Firefox osaa välttämättä näyttää sivuja siten kuin olet suunnitellut. Samantapaiseen ongelmaan voit törmätä vaikka et käyttäisikään editoria. Tosiasia on vain niin, että osa olemassa olevista koodeista toimii vain Firefox-selaimissa. Myös Microsoft on keksinyt muutamia koodeja, jotka toimivat vain Explorer-selaimessa. Tosin tätä ongelmaa yritetään poistaa koko ajan, mutta koska aiheesta kilpailevat kaksi isoa ohjelmistotaloa, yhteistyö ei aina ole kovin sulavaa.

HTML-kielen mahdollisuudet laajenevat jatkuvasti. Jotta kehityksessä pysyy mukana, on aiheellista käydä aika-ajoin katsomassa, mitä uusia ominaisuuksia HTML-kieleen on lisätty. Oppaita on Internetissä joka lähtöön ja monella kielellä. Niistä löytyvät myös uusimmat vinkit ja vihjeet.

Sivuja voi siis tehdä tekstinkäsittelyohjelmalla tai editorilla. Erilaisia ohjelmia on todella paljon markkinoilla. Kannattaakin miettiä tarkkaan, mikä on sopivin vaihtoehto. Windowsin Notepad on helpoin vaihtoehto Windowsin omistajalle, silloin ei tarvitse erikseen hankkia lisäohjelmia.