Verkkosivut ja ohjelmointi

HTML:n perusteet

Internetin käytetyin osa, World Wide Web (WWW), koostuu verkkosivuista. Tässä luvussa opiskellaan verkkosivujen tekemistä HTML-merkintäkieltä kirjoittamalla. Itse tehtyjä verkkosivuja voidaan katsoa omalta tietokoneelta verkkoselaimella. Jotta sivut kuitenkin näkyisivät kaikille internetissä, tarvitaan verkkosivuille palvelintilaa. Palvelintilaa tarjoavat useat yritykset, muun muassa teleoperaattorit. Useat yritykset (esimerkiksi nettihotelli.fi) tarjoavat melko edullisesti myös nettihotellipalveluita. Niissä on mahdollista saada verkkosivujen palvelintilan lisäksi oma domain eli verkkotunnus, jolloin verkkosivun WWW-osoitteeksi eli verkko-osoitteeksi voidaan valita omavalintainen osoite, esimerkiksi www.etunimisukunimi.net.

Tässä jaksossa käsitellään kolmea verkkosivujen tekemiseen liittyvää osa-aluetta: HTML:ää, CSS:ää ja JavaScriptiä. HTML (HyperText Markup Language) on verkkosivujen hypertekstin merkintäkieli eli ns. rakennustyökalu verkkosivujen tekemiseen. CSS (Cascading Style Sheet) tarkoittaa verkkosivun tyyliohjeita eli sen avulla määritellään verkkosivun ulkoasu. Toisin sanoen HTML-merkintäkielellä tehdään verkkosivuille rakenne ja sisältö, mutta CSS:n avulla verkkosivujen muotoilu ja asettelu saadaan halutunlaiseksi. JavaScript on sen sijaan ohjelmointikieli, jolla voidaan lisätä verkkosivuille toiminnallisuutta.

HTML

HTML:n uusin versio on HTML5, jota myös tässä oppimateriaalissa käytetään. HTML-tiedoston tiedostopääte on .html. Kun HTML-tiedostoa tarkastellaan verkkoselaimella, tiedostosta tulee verkkosivu. HTML-tiedostoja voidaan tarkastella millä tahansa verkkoselaimella. HTML-tiedoston nimessä ei saa olla ääkkösiä, erikoismerkkejä tai välilyöntejä, sillä ne voivat aiheuttaa ongelmia selailussa joillakin selaimilla.

Syntaksi

Syntaksi tarkoittaa HTML-merkintäkielen ns. kielioppia. Koska tietokoneet ymmärtävät rajallisesti kirjoitettua tekstiä, täytyy aluksi määritellä yhteiset säännöt, joiden mukaan tiettyjä asioita merkitään ja ilmaistaan. Jotta tietokone ymmärtäisi kieltä, tulee kielen syntaksin olla oikein. Koodin syntaksin oikeellisuus voidaan tarkistaa validaattorilla eli syntaksin tarkastajalla.

Elementit

HTML-tiedosto koostuu tekstistä, jossa dokumentin rakenne merkitään elementeillä. Elementit merkitään tagien väliin. Elementeillä on aina aloitus- ja lopetustagi, joiden välissä on varsinainen elementin sisältö. Esimerkiksi ensimmäisen tason otsikko merkitään h1-elementillä seuraavasti:

<h1> on aloitustagi ja se avaa elementin. </h1> on lopetustagi ja se sulkee elementin. Lopetustagissa on aina /-merkki. Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä, sarkaimia ja rivinvaihtoja. Niillä ei ole merkitystä elementin sisällön ulkoasuun. Jos siis tekstiin halutaan esimerkiksi enemmän kuin yksi välilyönti peräkkäin, täytyy ylimääräiset välilyönnit merkitä erikoismerkeillä (esimerkiksi välilyönnin koodi on  ).

Jos elementillä ei ole tekstimuotoista sisältöä, lopetustagi voidaan lyhentää suoraan aloitustagiin. Esimerkiksi pakotettu rivinvaihto voidaan merkitä kokonaisuudessaan <br />. Myös kuvaelementti voidaan päättää suoraan aloitustagiin <img src="kuva.jpg" alt="kuva" />.

Useampi sisäkkäinen elementti tulee aloittaa ja lopettaa siten, että sisempi avattu elementti suljetaan ennen ulomman elementin sulkemista. <p><strong>Moi</strong></p> on siis oikein, mutta <p><strong>Hei</p></strong> on taas väärin, sillä ulompi p-elementti on suljettu ennen sisempää strong-elementtiä.

Yksinkertainen HTML-dokumentti

Notepad++:n syntaksiväritys

HTML-merkintäkieltä voidaan kirjoittaa tekstieditoriohjelmalla (ei kuitenkaan tekstinkäsittelyohjelmalla). Käyttöjärjestelmiin valmiiksi asennetuista ohjelmista (Windows-koneilla Notepad, MacOS-koneilla Texturi) on yleensä karsittu ylimääräiset ominaisuudet pois, kuten syntaksiväritys ja automaattinen sisennys. Syntaksiväritys tarkoittaa, että elementtimerkintöjä selkeytetään erilaisin värimerkinnöin ja automaattisessa sisennyksessä elementit sisennetään koodin lukemisen helpottamiseksi. Nämä ovat merkintäkielen kirjoittamista helpottavia ominaisuuksia (kts. kuva), jotka ovat yleensä internetistä saatavissa ilmaisissa tekstieditoriohjelmissa.

Pakolliset ominaisuudet omaava peruspohja HTML-sivusta on seuraava:

1  <!DOCTYPE html>
2  <html>
3  <head>
4  <meta charset="utf-8”>
5  <title>Otsikko</title>
6  </head>
7  <body>
8
9     <h1>Ensimmäisen tason otsikko</h1>
10       <p>
11          Tämä on tekstikappale. <br />
12          Tähän tulee myös kuva myöhemmin.
13       </p>
14
15 </body>
16 </html>
		  

Rivillä 1 kerrotaan tietokoneelle, että tiedosto on HTML-tyyppinen dokumentti. Seuraavalla rivillä 2 on html-aloitustagi. Verkkosivun koko sisältö on html-elementin sisällä. Html-elementin lopetustagi on tiedoston viimeinen tagi rivillä 16. Riviltä 3 alkaa head-elementti, joka sisältää tekstin merkistön koodaustavan (utf-8) ja <title>-tageilla merkityn verkkosivun otsikon. Otsikko näkyy verkkoselaimen välilehdellä. Otsikko kannattaa valita informatiiviseksi, sillä pidemmät otsikot eivät näy kokonaan välilehdellä. Lisäksi head-elementissä voidaan kertoa tietokoneelle HTML-tiedoston käyttämä tyylitiedosto, erilaiset muut linkit ja verkkosivulla olevat skriptit. Head-elementti päättyy riville 6. Riviltä 7 alkaa varsinaisen verkkosivun rakentaminen body-tagilla. Kaikki verkkosivuilla näkyvät elementit sijoitetaan body-tagien väliin.

HTML-merkintäkieltä kirjoittaessa on suositeltavaa, että omat elementit eli blokit sisennetään omalle tasolleen (em. esimerkissä siis otsikko ja tekstiosio ovat sisennettynä, koska ne ovat samantasoisia elementtejä eli omissa blokeissaan). Tämä tekee koodista helpommin luettavampaa.

Hyödyllisimmät HTML5-elementit

Lisää HTML5-elementtejä löytyy esimerkiksi Mozillan kirjoittamasta html-dokumentaatiosta.

Attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, joilla määritellään elementtiin liittyviä ominaisuuksia. Esimerkiksi kuva lisätään img-elementillä, jolle voidaan määritellä osoite, kuvan vaihtoehtoinen teksti ja kuvan otsikko. Osoite määritellään src-attribuutilla, vaihtoehtoinen teksti alt-attribuutilla ja kuvan otsikko title-attribuuteilla seuraavasti:

Attribuuttien arvot siis merkitään lainausmerkkeihin =-merkin jälkeen. Elementtien ominaisuuksien lukumäärää ei ole rajoitettu.

Luokka

Luokka eli class on attribuutti. HTML-elementit voidaan määrittää kuuluvaksi tiettyyn luokkaan. Luokka-attribuutin avulla jokainen saman luokan elementti voi esimerkiksi saada saman muotoilun. Luokka-attribuutti voidaan antaa mille tahansa elementille. Esimerkiksi tekstikappale-elementille p voidaan antaa luokka, jonka nimi on "isompiteksti", asettamalla attribuutiksi class:

Luokan nimeä määritettäessä isoilla ja pienillä kirjaimilla on väliä. Tästä johtuen "isompiteksti", "ISOMPITEKSTI" ja "IsompiTeksti" ovat kaikki eri luokkia. Luokkia käyttäviä elementtejä voidaan muotoilla CSS:n avulla. CSS:stä kerrotaan enemmän seuraavassa luvussa.

Div-elementit

Div-elementin nimi tulee sanasta division (osa / osa-alue) ja niitä merkitään <div>-tagilla. Div-elementtejä käyttämällä verkkosivu voidaan jakaa erilaisiin osiin, mikä helpottaa esimerkiksi muotoilujen ryhmittelyä. Div-elementtien avulla voidaan tehdä esimerkiksi kappalemuotoiluja ja tekstikehyksiä. Div-elementtejä voidaan laittaa myös sisäkkäin.

<div class="sisalto">
  <h3>Otsikko</h3>
    <p>Ja tähän tulee tekstiä.</p>
</div>

<div class="sivupalkki">
  <h3>Toinen otsikko</h3>
    <p>Ja tähän tulee myös tekstiä.</p>
</div>
		  

<div class="kokonaisuus">

  <div class="alkupuhe">
     <h1>Pääotsikko</h1>
       <p>Alkuteksti kotisivuilleni</p>
  </div>

  <div class="tarkempitieto">
     <h2>Toinen otsikko</h2>
       <p>Tähän kirjoitan lyhyesti, kuka olen.</p>
  </div>

</div>
		  

HTML-sivu (harmaa), johon sisällytetty kolme div-elementtiä: Ensimmäisen div-elementin (vihreät reunukset ja valkoinen pohja) sisällä on rinnakkaiset div-elementit 2 ja 3.

Linkittäminen

Verkkosivut koostuvat harvoin vain yhdestä HTML-sivusta. HTML eli HyperText Markup Language on nimensä mukaisesti on tarkoitettu hypertekstin eli toisiinsa linkitetyn tekstin merkitsemiseen. Verkkosivut voidaankin ajatella hypertekstinä, sillä ne sisältävät linkkejä toisiin verkkosivuihin. Verkkosivusto rakennetaan tekemällä useita verkkosivuja, joista viitataan toisiinsa linkeillä (a-elementti). Useasta verkkosivusta koostuvan verkkosivuston pohjaksi on järkevää luoda hakemistorakenne. Kaikkien HTML-tiedostojen ei ole hyvä sijaita samassa hakemistossa, vaan loogisesti jaoteltuina eri hakemistoihin. Eri hakemistoihin ja hakemistoissa sijaitseviin HTML-tiedostoihin viittaaminen tapahtuu seuraavalla periaatteella:

Absoluuttiseen viittaukseen merkitään viitattavan kohteen koko verkko-osoite. Absoluuttista viittausta kannattaa käyttää vain oman sivuston ulkopuolelle kohdistuvissa viittauksissa. Absoluuttinen viittaus on riippumaton sivusta tai sijainnista, jossa viittaus tehdään. Absoluuttista viittaamista voidaan verrata esimerkiksi paikannukseen, jossa maantieteellisiksi koordinaateiksi määritellään 62°14′25″N, 025°44′40″E. Koordinaatit eivät ole riippuvaisia siitä, missä ne mainitaan.

Absoluuttisia viittauksia:

• http://www.example.com/ viittaa example.com-verkkotunnuksen juurihakemistoon "/". Juurihakemistoon linkittäminen vie yleensä sivuston etusivulle.
• https://www.google.fi/search viittaa google.fi-verkkotunnuksen "search"-nimiseen sivuun juurihakemistossa "/".

Toisin kuin absoluuttinen viittaus, suhteellinen viittaus on riippuvainen sijainnista, jossa viittaus tehdään. Käyttäen aiempaa paikannusvertausta, suhteellinen viittaus sijaintiin liittyen voisi olla esimerkiksi "viisisataa metriä etelään sieltä, missä nyt olet". Verkkosivustolla suhteellisella viittauksella tarkoitetaan verkkosivun sijaintia hakemistorakenteessa omalla sivustolla. Suhteellisten viittausten hyötyjä ovat viittausten toimiminen millä tahansa palvelimella sekä viittausten pituus, sillä ne ovat lyhyempiä kuin absoluuttiset viittaukset.

Suhteellisia viittauksia:

• etusivu.html viittaa saman hakemiston etusivu.html-sivuun: koodina tämä merkittäisiin <a href="etusivu.html">
• kuvat/ viittaaa saman hakemiston kuvat-nimiseen alihakemistoon (oletuksena näytetään alihakemistosta etusivu, jos sellainen löytyy): koodina tämä merkittäisiin <a href="kuvat/">
• kuvat/logo.jpg viittaa saman hakemiston kuvat-alihakemistossa olevaan logo.jpg-tiedostoon: koodina tämä merkittäisiin <a href="kuvat/logo.jpg">
• ../ viittaa ylempään hakemistoon (hakemisto, jossa aktiivinen alihakemisto sijaitsee). Koodina tämä merkittäisiin <a href="../">
• ../sivut/ viittaa ylemmässä hakemistossa sijaitsevaan "sivut”-nimiseen alihakemistoon. Koodina tämä merkittäisiin <a href="../sivut/">