WWW-ohjelmointi

< Johdanto Head-osio >

Dokumentin rakenne

HTML-tagit

html-johdanto.svg#4

HTML-dokumentti on tekstiä, jolle on annettu rakenne merkitsemällä sen osia erilaisilla HTML-kielen tageilla. Tekstin osan alku merkitään aloitustagilla ja loppu lopetustagilla.

  • Aloitustagi on tagin nimi ympäröitynä <- ja >-merkeillä. Esimerkiksi: <strong>
  • Lopetustagi on tagin nimi ympäröitynä </- ja >-merkinnöillä. Esimerkiksi: </strong>
  • Joillain tageilla ei ole (HTML5:ssä) pakollista lopetustagia. Esimerkiksi rivinvaihto <br> ja kuvatagi <img>. (Jos dokumentin tyypiksi on valittu XHTML niin lopputagi on aina pakollinen. Se voidaan kuitenkin kirjoittaa aloitustagin sisälle <br />)

Esimerkki:

<h1>Otsikko</h1>
<p>Pieni kappale ja vähän <strong>korostettua tekstiä</strong>.<p>
<p>Toinen kappale ja <em>toisenlainen korostus</em> tekstissä.</p>

Vaikka useimmille tageille on määritelty oletusulkoasu, jolla ne näytetään www-selaimessa, tagien tarkoitus ei kuitenkaan ole määritellä sivun osien ulkoasua vaan niiden merkitys dokumentissa. Tagit ovat siis semanttisia. Tageja ovat esimerkiksi eri tasoiset otsikot (h1, h2, h3, h4, h5, h6), linkit (a), kappaleet (p) ja listat sekä listan alkiot (ul, ol, li).

HTML-dokumentin tageista muodostuu sisäkkäinen rakennelma, jota voidaan kuvata puurakenteena tai sisäkkäisinä laatikoina.

<html> </html> <head> </head> <title> Www-ohjelmointi </title> <link> </link> <script> </script> <body> </body> <header> </header> <article> </article> <h1> Otsikko </h1> <p> Sisältöä <strong>tekstiä</strong> sisältöä... </p> <p> Sisältöä <a>linkki</a> sisältöä... </p> <footer> </footer> <nav> </nav> <h1> </h1> <ul> </ul> <li> </li> <li> </li> <li> </li>

Tagien-attribuutit

Tagin merkitystä voidaan tarkentaa lisäämällä aloitustagiin tagin tyypistä riippuen erilaisia attribuutteja ja niiden arvoja. Attribuutit kirjoitetaan tagin nimen jälkeen ennen >-merkkiä. Ne ovat muotoa attribuutti="arvo". Esimerkki:

  • Linkkitagissa attribuutti href kertoo linkin osoitteen:
    <a href="http://petrit.net/www-ohjelmointi">Linkki kurssisivulle</a>
  • Kuvatagissa attribuutti src kertoo osoitteen, josta näytettävä kuva haetaan:
    <img src="http://petrit.net/www-ohjelmointi/images/kuva.png">

Id:t ja luokat

Kaksi erityistä attribuuttia, joilla HTML-elementtejä voidaan merkitä, ovat id ja class. Näistä id on tarkoitettu attribuutiksi, jolla elementille annetaan dokumentin sisällä yksilöllinen nimi, jolla siihen voidaan viitata esimerkiksi CSS-tyylityksissä, Javascript-toiminnallisuudessa tai sivun linkityksessä. Esimerkiksi dokumentin sisällä voidaan toteuttaa linkityksiä viittaamalla näihin nimettyihin elementteihin id-attribuutin arvolla.

<a href="#linkitys">Linkitys</a>
...
<h1 id="linkitys">Linkitys</a>
Linkitys
...

Linkitys

class-attribuutilla voidaan merkitä elementti kuulumaan yhteen tai useampaan “luokkaan”, eli kertoa elementin olevan jotain tiettyä tyyppiä kyseisessä dokumentissa. Luokkia voidaan hyödyntää esimerkiksi ulkoasun tyylittelyssä määräämällä tiettyyn luokkaan kuuluville elementeille keskenään yhtenäinen ulkoasu. Attribuuttiin voidaan laittaa useampi luokka erottelemalla ne välilyönneillä.

<article class="blogpost latestpost">
    <div class="author">Petri Salmela</div>
    <div class="postcontent">
        ...
    </div>
</article>
<article class="blogpost">
    <div class="author">Petri Salmela</div>
    <div class="postcontent">
        ...
    </div>
</article>
Petri Salmela
...
Matti Meikäläinen
...

HTML-dokumentti

HTML-dokumentti kirjoitetaan <html>- ja </html>-tagien väliin heti doctype-määrittelyn jälkeen. HTML-tagin sisällä dokumentti jakautuu head- ja body osiin, jotka ympäröidään vastaavasti <head>- ja </head>-tagien sekä <body>- ja </body>-tagien väliin.

<!DOCTYPE html>
<html>
    <head>
        ... dokumentin määrittelyjä ...
    </head>
    <body>
        ... dokumentin sisältö ...
    </body>
</html>

Head-osio sisältää dokumentin määrittelyitä, kuten selaimen yläpalkissa näkyvän otsikon, käytetyn merkistökoodauksen sekä ulkoasuun vaikuttavien tiedostojen sijainnin.

Body-osio puolestaan sisältää dokumentin varsinaisen sisällön.

< Johdanto Head-osio >