HTML-tiedoston perusrakenne

Tottahan siinä aikaa kluttaantuu, kuk kierästä kyliestä alakaa.

HTML-kielen tunnisteet eli komennot (tag) kuvaavat asiakirjan rakenteen osia. Tunnisteet kirjoitetaan väkäsulkuihin ("<" eli pienempi kuin ja ">" eli suurempi kuin). Useimmat tunnisteet toimivat pareina, jolloin muotoiltava teksti on tunnisteparin välissä: <h1>Johdanto</h1> tekee otsikon. Jotkin koodit toimivat yksinään, kuten rivinvaihto <br />.

Esimerkeissä näytetään ensin HTML-koodi ja sitten malli siitä, miten selain koodin esittää. Ota huomioon, että tekstin lopulliseen ulkoasuun vaikuttaa sekä tyylin määrittely tyyliarkilla että selaimen tapa tulkita se.

Tässä on yksinkertainen esimerkki toimivasta HTML-sivusta. Käytä tätä pohjana, kun teet uusia tiedostoja.

<html>
  <head>

    <meta charset="UTF-8"> 

    <title>Minun oma sivuni</title>
  </head>
  <body>
    <h1>Minun otsikkoni</h1>
    <p>Tekstikappale. Ei ole asiaa mutta kirjoitan silti.</p>
    <p>Lisää tekstiä. Jotain järkevää pitää keksiä. Mutta mitä?</p>

    <!-- Muistutus itselle: tähän pitää myöhemmin lisätä jotain -->
  </body>
</html>

<html> kertoo, että asiakirjassa on HTML-kielen rakenteita, jotka selaimen pitää tulkita.

<head>-osiossa on yleistietoja asiakirjasta. Se ei saa sisältää esitettäväksi tarkoitettua tekstiä eikä tekstin muotoiluja. Yleisiä koodeja head-osiossa ovat <title>, <meta> ja <link>.

<meta> antaa selaimelle tietoa siitä, miten sivun dataa pitää tulkita. Esimerkissä määritellään käytetty merkistö (Unicode), jolloin diakriittiset merkit (ä, ö jne.) tulostuvat oikein.

<title> kertoo dokumentin nimen, joka näkyy yleensä selainikkunassa välilehden otsikkona.

<body>-osioon tulee dokumentin varsinainen sisältö: tekstikappaleet, otsikot, kuvat ja taulukot.

Koodia voi selventää kommenteilla. Kommentit eivät näy sivun lukijalle, mutta niistä on apua, kun yritetään tulkita koodia. Kommentti alkaa merkeillä <!-- (vasen väkä, huutomerkki ja kaksi väliviivaa) ja loppuu merkeillä -->.

Sisennysten tarkoitus on selventää rakennetta: mikä määritys kuuluu minkäkin kokonaisuuden sisään. Se ei näy sivun lukijalle, mutta helpottaa koodaajan työtä.

Tehtävät

a) Aseta Geanyssa asiakirjan tyyppi, niin saat tarkistusta auttavat värit käyttöön:
Asiakirja/Aseta tiedostotyyppi/Kuvauskielet/HTML-document
Ota myös rivitys käyttöön joko tässä asiakirjassa
Asiakirja/Rivitys
tai pysyvästi
Muokkaa/Asetukset/Editori/Rivitys

b) Etsi internetistä suomenkielisiä HTML-oppaita. Valikoi sellaisia, joissa on selkeä sisällysluettelo ja joista on helppo löytää yksittäisen tunnisteen kuvaus ja esimerkkejä käytöstä. Kirjoita hyvien oppaiden URL-osoitteet muistiin.

c) Tarkastele jonkin yksikertaisen sivun HTML-koodia. Näpäytä tekstin päällä hiirenoikeanpuoleista näppäintä ja valitse pudotusvalikosta Näytä lähdekoodi tai View frame source. Selvitä oppaista, mitä eri tunnisteet tarkoittavat ja mihin niitä tarvitaan.