HTML on verkkosivujen rakennuspalikka, jolla luodaan sivun rakenne ja sisältö näkyville selaimelle. Sivun koodissa on omat säännöt ja rakenteet, jotka vaikuttavat siihen, miten nettisivu lopulta käyttäjälle näkyy. HTML-kielen perusasiat voi oppia nopeasti, ja niillä pääsee jo hyvin alkuun omien sivujen teossa.

Mikä on HTML ja mihin sitä käytetään

HTML tarkoittaa Hypertext Markup Languagea. Sitä käytetään kuvaamaan verkkosivun rakennetta sekä järjestämään elementit, kuten otsikot, linkit ja kuvat, omille paikoilleen sivulla. Ilman HTML:ää eli merkkikieltä verkkoselaimet eivät ymmärtäisi, mikä sivulla on otsikko, kappale tai vaikka kuva.

HTML ei ole ohjelmointikieli, vaan kuvauskieli. Tämän tarkoitus on kertoa selaimelle, miten tietoa esitetään, ei niinkään miten sitä käsitellään. Ihmiset voivat avata HTML-tiedostot millä tahansa selaimella. HTML on avoin, ja sitä kehittää standardointiorganisaatio. Lisää tietoa ja esimerkkejä löytyy HTML perusteet -sivulta.

HTML-tiedoston rakenne

Jokainen HTML-tiedosto noudattaa tiettyä rakennetta. Se alkaa usein -rivilä, jonka jälkeen sivua kuvaavat HTML-tägit. Tiedoston alussa on -avauselementti, jonka sisään kaikki muu sisältö lisätään.

HTML-tiedoston kaksi pääosiota ovat ja . Head-osioon laitetaan esimerkiksi sivun otsikko, merkkikoodaus ja metatietoja. Body-osassa puolestaan on kaikki se sisältö, jonka käyttäjä näkee selaimessa. Tagit kirjoitetaan nuolisulkeisiin ja useat elementit suljetaan lopuksi kauttaviivalla, kuten

… . Ohjeita ja esimerkkejä voi katsoa tästä oppaasta.

Yleisimmät HTML-elementit

HTML-koodauksessa käytetään paljon samoja peruselementtejä. Tässä taulukossa näkyvät tärkeimmät elementit ja niiden käyttötarkoitus:

Elementti	Tarkoitus	Esimerkki
<h1>	Pääotsikko	<h1>Tervetuloa</h1>
<p>	Tekstikappale	<p>Tämä on tekstiä.</p>
<a>	Linkki	<a href="#">Nettisivu</a>
<img>	Kuva	<img src="kuva.jpg">
<ul>/<li>	Lista ja listan kohta	<ul><li>Asia</li></ul>

Elementit kirjoitetaan aina nuolisulkeisiin. Useimmilla on alku- ja lopputagi, mutta esimerkiksi <img> on yksittäinen merkintä. Jokaisella elementillä voi olla lisämääritteitä, kuten väri tai linkin osoite. Voit lukea lisää HTML-elementeistä ja niiden käytöstä nettisivujen ohjelmointioppaasta.

Keskeiset HTML-elementit pähkinänkuoressa

Yleisimpiä HTML-elementtejä ovat otsikot, tekstikappaleet, linkit, kuvat sekä erilaiset listaustavat. Nämä elementit muodostavat sivun rungon ja tekevät verkkosivusta helpommin luettavan ja selattavan.

Otsikot ja kappaleet

Otsikot on merkitty

–

-tageilla.

on tärkein ja isoin otsikko, jota käytetään yleensä sivun pääotsikkona. Alemmat otsikkotasot kuten

ja

auttavat jäsentämään sisältöä selkeämmäksi kokonaisuudeksi. Hyvin käytetyt otsikot tekevät sivusta helppolukuisen ja parantavat sivun saavutettavuutta. Tekstikappaleet merkitään -tagilla. Kappaleet auttavat jakamaan tekstiä selkeästi, jolloin sisältö ei ole raskas lukea. Kappaleiden ja otsikoiden käyttö yhdessä luo loogisen ja siistin rakenteen HTML-sivulle. Otsikot ja kappaleet ovat HTML-rakenteen perusta. Jokainen verkkosivu alkaa yleensä otsikolla ja jatkuu tekstikappaleilla, joten näiden ymmärtäminen on tärkeää HTML-perusteet.

Linkit ja kuvat

Linkit tehdään -tagilla ja niillä voi ohjata käyttäjän toiselle sivulle tai eri kohtaan samalla sivulla. Esimerkiksi: <a href="https://www.example.com">Käy sivulla</a>. Linkin kohde määritetään href-määritteellä, ja näkyvä teksti sijoitetaan -tägien väliin.

Kuvat lisätään -tagilla. Käytetään src-määritettä kuvan osoitteeseen ja alt-määritettä vaihtoehtoiselle tekstille. Esimerkki: <img src="kuva.jpg" alt="Kuvaus">. Kuvat elävöittävät sivua ja alt-teksti auttaa saavutettavuudessa.

Linkit ja kuvat ovat tärkeitä verkkosivun vuorovaikutteisuuden ja visuaalisuuden kannalta. Lisätietoa HTML-elementeistä.

Listat: järjestetyt ja järjestämättömät

Järjestämättömät listat (bulleted) tehdään

• -tagilla. Esimerkiksi:
  • Lista 1
  • Lista 2
  Kirjoitetaan näin: <ul> <li>Lista 1</li> <li>Lista 2</li> </ul>Järjestetyt listat tehdään
  1. -tägeissä, mutta numerointi tulee automaattisesti:
     1. Eka kohta
     2. Toka kohta
     Kirjoitetaan näin: <ol> <li>Eka kohta</li> <li>Toka kohta</li> </ol> Listat sopivat hyvin, kun halutaan esittää tietoa selkeässä muodossa, kuten ohjeissa ja luetteloissa. Listojen käyttö lisää luettavuutta ja järjestelmällisyyttä HTML-merkkauskielen perusteista. Vinkit tehokkaaseen HTML-koodaukseen Hyvä tapa aloittaa on käyttää selkeitä ja ymmärrettäviä nimiä elementeille ja tiedostoille. Tämä auttaa pysymään järjestyksessä, kun koodi kasvaa. HTML-tiedosto kannattaa rakenne selkeästi. Käytä otsikoita (–), kappaleita () ja muita loogisia osia. Näin koodi ja sivu pysyvät luettavina. Yksi tärkeä vinkki on hyödyntää sisennystä. Jokainen HTML-elementti kannattaa sisentää selkeyden vuoksi. Tästä on apua etenkin, kun koodaus jatkuu myöhemmin. Vähemmän on enemmän. Vältä turhia tageja ja pidä koodi yksinkertaisena. Lyhyt ja siisti HTML on helpompi lukea ja muokata. Alla taulukko muistettavista asioista: Vinkki Miksi tärkeä? Sisennä koodi Parantaa luettavuutta Käytä kommentteja Helpottaa ymmärtämistä Nimeä tiedostot järkevästi Helpottaa tiedostojen löytöä Yksinkertaista rakennetta Säästää aikaa ja vaivaa Lisää vinkkejä löytyy verkkosivun suunnittelusta WEB-opas, HTML – Tästä alkuun -oppaasta.