HTML:n perusteet

HTML (HyperText Markup Language) on hypertekstiin pohjautuva ns. merkintäkieli jolla luodaan WWW-sivuja

Kaikki maailman WWW-sivut käyttävät HTML:ää.

HTML on tarkoitettu esitysmuodoksi, joka on riippumaton käytettävistä laitteista ja ohjelmista ja joka muun muassa automaattisesti mukautuu selaimen ikkunan kokoon ja käyttäjän fonttivalintoihin.

HTML on tekstiä joka sisältää tietyllä tavalla kirjoitettuja sanoja ja merkkejä jotka selain sitten tulkitsee.

Näitä tietyllä tavalla kirjoitettuja sanoja kutsutaan HTML elementeiksi.

Elementit voi ympäröidä sivun eri sisältöjä saaden ne näyttämään tai käyttäytymään eri tavoilla.

esim:
moi maailma

se on pelkkää tekstiä (plain text)

sama mutta HTML:llä


  <p>moi maailma</p>

lisäämällä sisällön (moi maailma) ympärille <p> tägin, ilmoitamme selaimelle että kysessä on paragraph elementti

alkutägi aloittaa rakenteen


  <p>moi maailma</p>

lopputägi lopettaa rakenteen


  <p>moi maailma</p>

niiden välissä sisältö


  <p>moi maailma</p>

Yleisimpiä elementtejä ovat:
<h1></h1>, <h2></h2>, <a></a>, <div></div>, <video></video>

Muutamalla elementeillä voi jo tehdä kiinnostavan nettisivun, jos vain on kiinnostavaa sisältöä.

Kaikki elementit

Pakolliset elementit


<!DOCTYPE html>
<html>
    <head>
        <title>Ekat kotisivut</title>
        <meta charset="UTF-8">
    </head>
    <body>
    </body>
</html>

kertoo selaimelle että kysessä on HTML dokumentti


  <!DOCTYPE html>

HTML elementti


  <html></html>

Näkymätön metadata


    <head></head>

Titteli


    <title>Ekat kotisivut</title>

Merkkikoodaus


    <meta charset="UTF-8">

Sivun sisältö näiden väliin


    <body>
    </body>

Elementtien määritteet (attribuutit) tarkentaa elementin merkitystä.


  <a href="https://hlnet.neocities.org">HLNET</a>

Yleisesti määrite on elementin alkutägiin liitettävä tarkenne, joka on muotoa:


  nimi="arvo"

Tyhjät elementit:


  
    <img src="/img/heikki.jpg" title="Heikki vuonna 1996">

Sisäkkäisyys


  <p>moi <strong>maailma</strong></p>

TÄMÄ ON VÄÄRIN! Elementit ei voi olla lomittain


  <p>moi <strong>maailma</p></strong>