LinkkiVerkkosivut ja ohjelmointi → HTML:n perusteet

© Tekijät Creative Commons -lisenssi

Verkkosivut ja ohjelmointi

  1. Johdanto
  2. HTML:n perusteet
  3. CSS:n perusteet
  4. JavaScriptin perusteet

Verkkosivut ja ohjelmointi

HTML:n perusteet

Tässä luvussa

HTML

HTML-merkintäkielen 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 joillakin selaimilla.

Syntaksi

Syntaksi tarkoittaa HTML-merkintäkielen niin sanottua 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 tiedoston 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>Ensimmäisen tason otsikko</h1>

<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 ylimääräisiä välilyöntejä, sarkaimia ja rivinvaihtoja, eikä niillä 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ä &nbsp;.

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. Esimerkiksi kun halutaan kirjoittaa lihavoitua tekstiä, tulee käyttää p-tekstielementtiä ja strong-lihavointielementtiä sisäkkäin. Tällöin <p><strong>Moi</strong></p> on oikein, mutta <p><strong>Hei</p></strong> on taas väärin, sillä ulompi p-elementti on suljettu ennen sisempää strong-elementtiä.

tehtavakuvake

Harjoitustehtävä: Erilaisia elementtejä

Tutustu alla olevista kappaleista löytyviin hyödyllisiin HTML5-elementteihin ja kokeile niitä täällä.

Esimerkki syntaksivärityksestä

tekstieditori

Yksinkertainen HTML-tiedosto

HTML-merkintäkieltä kirjoitetaan tekstieditoriohjelmalla. Kirjoittamista varten kannattaa asentaa erillinen tekstieditori, joka tukee syntaksiväritystä ja automaattista sisennystä. Löydät lisätietoa Johdanto-luvusta.

Alla olevasta valikosta saat auki HTML-tiedoston niin sanotun peruspohjan, joka sisältää tiedoston pakolliset merkinnät ja elementit.

1  <!DOCTYPE html>
2  <html lang="fi">
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 tiedosto.
Rivillä 2 on html-elementin aloitustagi. HTML-tiedoston koko sisältö on html-elementin sisällä eli html-elementin lopetustagi on tiedoston viimeinen tagi. Sivun kieli (esim. suomi eli fi) kerrotaan lang-attribuutissa.
Rivillä 3 on head-elementin aloitustagi.
Rivillä 4 on head-elementin sisältönä tekstin merkistön koodaustapa (utf-8).
Rivillä 5 on head-elementin sisältönä title-elementillä merkitty verkkosivun otsikko. Otsikko näkyy verkkoselaimen välilehdellä. Otsikon kannattaa olla lyhyt ja informatiivinen, sillä pidemmät otsikot eivät näy kokonaan välilehdellä.
Rivillä 6 on head-elementin lopetustagi.
Riviltä 7 alkaa varsinaisen verkkosivun rakentaminen body-elementin aloitustagilla. Kaikki verkkosivuilla näkyvä sisältö sijoitetaan siis body-elementin sisään.
Riveillä 8-14 on verkkosivun sisältöä.
Rivillä 15 on body-elementin lopetustagi.
Rivillä 16 on html-elementin lopetustagi.

HTML-merkintäkieltä kirjoitettaessa on suositeltavaa, että blokki eli saman elementin aloitus- ja lopetustagin muodostama kokonaisuus sisennetään omalle tasolleen. Tämä tekee HTML-tiedostosta selkeämmän ja helpommin luettavamman.

Hyödyllisimmät HTML5-elementit

Alla olevissa valikoissa on lueteltu yleisimpiä ja hyödyllisimpiä HTML5-elementtejä.

h1 Ensimmäisen tason otsikko eli pääotsikko, yleensä vain yksi per verkkosivu.

h2, h3 Toisen ja kolmannen tason otsikko

p Normaali tekstikappale

ul Järjestämätön lista (merkitty luettelo, listamerkit tulevat automaattisesti)

ol Järjestetty lista (numeroitu luettelo, listanumerot tulevat automaattisesti)

li Järjestämättömän tai järjestetyn listan lista-alkio (sijoitetaan aina ul- tai ol-elementin sisälle)

a Linkki joko verkkosivuston sisälle tai toiseen verkko-osoitteeseen. Elementin rakenne on seuraava: <a href="linkin osoite" title="linkin otsikko">linkin teksti</a>
Linkkielementti ei voi esiintyä yksin, vaan sen tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.

img Kuva, jossa elementin rakenne on seuraava: <img src="kuvan osoite" alt="kuvan vaihtoehtoinen teksti" title="kuvan otsikko" />
Kuvan tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.

table Taulukko

tr Taulukon rivi (sijoitetaan table-elementin sisälle)

th Taulukon otsikkosolu (sijoitetaan tr-elementin sisälle)

td Taulukon solu (sijoitetaan tr-elementin sisälle)

strong Korostuselementti, jolla saadaan lihavoitua tekstiä. Strong-elementti tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.

em Korostuselementti, jolla saadaan kursivoitua tekstiä. Em-elementti tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.

hr Vaakatasoinen viiva, jonka syntaksi on <hr /> eli lopetustagi voidaan lyhentää suoraan aloitustagiin.

br Pakotettu rivinvaihto, jonka syntaksi on <br /> eli lopetustagi voidaan lyhentää suoraan aloitustagiin. Rivinvaihto tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.

span Span-elementtiä käytetään merkkaamaan tietty muotoilu (esimerkiksi tekstin väri) jollekin tekstin osalle esimerkiksi p-elementin sisällä. Span-elementti tulee olla aina jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.

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

Projektitehtävä 1

Omat verkkosivut

Aloita omien verkkosivujesi tekeminen. Tarkoituksena on tehdä verkkosivut, joilla kerrot itsestäsi esimerkiksi osaamisesi ja harrastustesi kautta.

  1. Avaa tekstieditoriohjelma ja kopioi sinne HTML-tiedostopohja täältä. Luo html-niminen kansio ja tallenna tiedosto kansioon nimellä etusivu.html. Muuta koodaus muotoon UTF-8 tallentaessasi. Tallennettuasi tiedoston, voit avata sen verkkoselaimella.
  2. Muokkaa etusivu.html-tiedostoa tekstieditorissa title-elementin ja otsikko-elementin osalta.
  3. Kirjoita tekstikappale-elementin sisään esittelyteksti itsestäsi.

Attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja. Esimerkiksi kuva lisätään verkkosivulle img-elementillä, jolle on määritelty kolme attribuuttia: osoite, kuvan vaihtoehtoinen teksti ja kuvan otsikko.

attribuutit

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

Luokka

Ääkköset

Ääkkösten käyttö ei ole suositeltavaa tiedostojen tai luokkien nimissä.

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 p-elementille voidaan antaa luokka, jonka nimi on "isompiteksti", asettamalla attribuutiksi class seuraavasti:

<p class="isompiteksti">Tämä teksti on kirjoitettu isommalla fontilla.</p>

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. Muotoilua opiskellaan lisää CSS:n perusteet -luvussa.

Tunniste

Tunniste eli id on attribuutti. Tunnistetta voidaan käyttää HTML-elementin yksilöimiseen. Toisin kuin luokka-attribuuttia, tiettyä tunnistetta voidaan käyttää vain kerran samalla sivulla. Esimerkiksi otsikkoelementti voidaan merkitä tunnisteella "tervehdys":

<h2 id="tervehdys">Otsikkoteksti</h2>

Tunnistetta käytetään JavaScript-luvun projektitehtävässä.

Kuvan lisääminen verkkosivulle

Kuva lisätään verkkosivulle img-elementillä, jolle määritellään osoite, kuvan vaihtoehtoinen teksti ja kuvan otsikko. Osoite eli kuvan sijainti määritellään src-attribuutilla. Sijaintiin merkitään kuvatiedoston sijainti hakemistorakenteessa. Vaihtoehtoinen teksti merkitään alt-attribuutilla. Vaihtoehtoinen teksti näkyy verkkosivulla silloin, jos kuvaa ei jostain syystä pystytä lataamaan. Kuvan otsikko merkitään title-attribuutilla. Kuvan otsikko näytetään, kun osoitin viedään kuvan päälle. Img-elementti näyttää siis tältä:

<img src="kuva.jpg" alt="Kuva tietokoneesta" title="Tietokone" />

Muista tallentaminen!

Muista tallentaa HTML-tiedosto aina muutosten jälkeen ja päivittää verkkosivu nähdäksesi muutokset myös verkkoselaimessa.

Projektitehtävä 2

Omat verkkosivut

Jatka verkkosivujesi tekemistä mallin ja alla olevien ohjeiden mukaisesti.

  1. Lisää etusivu.html-tiedostoon kaksi vapaavalintaista kuvaa img-elementillä. Kuvat voivat olla sinusta ja jostain itsellesi tärkeästä asiasta. Tallenna kuvat samaan kansioon etusivu.html-tiedoston kanssa.
  2. Luo uusi HTML-tiedosto ja kopioi sinne HTML-tiedostopohja täältä. Tallenna tiedosto html-kansioon nimellä koulutus.html. Lisää tiedostoon tietoa koulutuksestasi. Jos olet opiskellut oppimateriaalin Tekstinkäsittely-jakson, voit hyödyntää jaksossa tekemäsi ansioluettelon Koulutus-osiota.
  3. Luo tehtävän kohdan 2 tapaan tyokokemus.html-tiedosto. Lisää tiedostoon tietoa työkokemuksestasi. Jos olet opiskellut oppimateriaalin Tekstinkäsittely-jakson, voit hyödyntää jaksossa tekemäsi ansioluettelon Työkokemus-osiota.
  4. Luo tehtävän kohdan 2 tapaan harrastukset.html-tiedosto. Lisää tiedostoon tietoa harrastuksistasi. Jos olet opiskellut oppimateriaalin Tekstinkäsittely-jakson, voit hyödyntää jaksossa tekemäsi ansioluettelon Harrastukset-osiota.

Div-elementit

Div-elementin nimi tulee sanasta division (osa / osa-alue) ja sitä merkitään <div>-tagilla. Div-elementtejä käyttämällä verkkosivu voidaan jakaa erilaisiin osiin, mikä helpottaa esimerkiksi verkkosivun muotoilua. Div-elementtien avulla voidaan tehdä esimerkiksi kappalemuotoiluja ja tekstikehyksiä verkkosivulle. Div-elementtien avulla tehtävää muotoilua opiskellaan lisää CSS:n perusteet -luvussa. Div-elementin syntaksi on:

<div class="luokan nimi"></div>

Esimerkki div-elementtien käytöstä

divit

Projektitehtävä 3

Omat verkkosivut

Jatka verkkosivujesi tekemistä mallin ja alla olevien ohjeiden mukaisesti. Tehtävässä verkkosivu jaetaan div-elementtien avulla osiin.

  1. Luo aloittamaasi etusivu.html-tiedostoon neljä div-elementtiä, joille määritä luokat "navigointi", "teksti", "kuvat" ja "alaviite".
  2. Sijoita navigointi-luokan div-elementti ensimmäiseksi heti body-aloitustagin jälkeen. Sijoita tämän jälkeen teksti-, kuvat- ja alaviite-luokan div-elementit.
  3. Siirrä teksti-luokan div-elementin sisälle aiemmin kirjoittamasi esittelyteksti itsestäsi.
  4. Siirrä kuvat-luokan div-elementin sisälle aiemmin lisäämäsi kuvat.
  5. Lisää alaviite-luokan div-elementtiin tekstinä ©, oma nimesi ja vuosiluku.

Viittaaminen

Verkkosivut koostuvat harvoin vain yhdestä HTML-tiedostosta. Verkkosivusto rakennetaan tekemällä useita verkkosivuja, joista viitataan toisiinsa linkeillä eli a-elementeillä. Linkkielementin rakenne on:

<a href="linkin osoite" title="linkin otsikko">linkin teksti</a>

Osoitteessa ei saa olla ääkkösiä, erikoismerkkejä tai välilyöntejä.

Suhteellinen viittaus on riippuvainen sijainnista, jossa viittaus tehdään. 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:

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.

Absoluuttisia viittauksia:

Projektitehtävä 4

Omat verkkosivut

Jatka verkkosivujesi tekemistä mallin ja alla olevien ohjeiden mukaisesti. Tehtävässä verkkosivulle luodaan viittaukset sivuston muihin sivuihin.

  1. Luo navigointi-luokan div-elementin sisälle ul-elementillä lista, johon teet kohdat "Etusivu", "Koulutus", "Työkokemus"ja "Harrastukset".
  2. Tee jokainen listan teksti linkiksi suhteellisella viittauksella.

Yhteenveto