[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 1. Mikä on HTML ja XML asiakirjojen perusrakenne > Dokumenttipuu (jakso 3/7)

Dokumenttipuu

Elementeistä muodostetaan asiakirjoille ns. dokumenttipuu (document tree), jossa on yksi ns. juurielementti (root element), joka HTML-asiakirjoissa on HTML (XML-dokumenteissa se voi olla jokin muukin elementti).

Juurielementin sisällä on piilotieto-osa, jonka kokoavana elementtinä on HEAD. Tässä käytetty vertauskuva vaihtuu vartaloon ja head tarkoittaa päätä (emme suomenkielessä voi kuitenkaan kirjoittaa (dokumentin) pääosa, joten meidän tulee tyytyä kirjoittamaan (dokumentin) HEAD-osasta). Sen lisäksi, että joillakin elementeillä on pää ja vartalo, niillä on myös "jalkaosa" (kuten TFOOT = table foot(er) = taulukon (ei-pakollinen) jalkaosa). Sinun tulee nyt ajatella seisovaa ihmistä - tai ajattele lehmäämme istumassa takajalkojensa varassa. Kuten olet varmaan jo huomannut, silloin kun dokumentissa olevista elementeistä käytetään vertauskuvia, niitä tarkastellaan lopusta alkuun päin tai suoraan edestä päin.

Head-osan sisällä olevat elementit sisältävät esim. erilaisia piilotiedotteita sekä mahdollisesti dokumentin runko-osaan vaikuttavia ohjelmointikoodauksia. Ainoa mikä HTML-asiakirjoissa normaalisti näkyy kyseisestä osasta selaimen käyttäjille on selainikkunassa näkyvä dokumentin kutsumanimi, joka on elementin TITLE sisällä.

Dokumentin näkyvä osa on nimeltään runko-osa (suomenkielessä on parempi kirjoittaa rungosta kuin vartalosta) ja sen kokoavana elementtinä on BODY. Sellaiset runko-osan elementit, joilla on alku- ja loppumerkinnät, voivat koota sisälleen toisia elementtejä ja muodostaan hyvinkin monimutkaisia sisäkkäisiä rakenteita. Ne ovat kuin dokumenttipuun näkyviä "oksia". Tällä tavoin puu symbolisoi dokumentin olemusta.

Puu

Seuraavaksi esimerkki yksinkertaisesta dokumenttipuusta, jossa dokumentin runko koostuu yleisistä lohkoelementeistä; laitoin mukaan myös sisennetyt elementtimerkkaukset, jolloin voit ymmärtää, miten elementit ovat keskenään sisäkkäin:

HTML  - HEAD 

-META (ei-välttämätöntä (implied) piilotietoa sisältävä elementti lähinnä hakurobotteja varten)
-TITLE (vaadittu (required) elementti)
- BODY  - H1 (pääotsikko, jonka sisään laitetaan rivinsisäiselementtejä)
- P (kappale, jonka sisään voi sijoittaa rivinsisäiselementtejä)
- BLOCKQUOTE (sisennetty lohkositaatti, jonka sisään voi sijoittaa toisia lohkoelementtejä or rivinsisäiselementtejä, esim. B)
- OL (järjestetty lista, joka on eräs lohkoelementtien alaluokka )
- LI (yksittäinen listaelementti)
- LI (toinen listaelementti; listojen sisälle voi sijoittaa uusia listoja ja luoda siten "alaoksia")
 
<HTML>
   <HEAD>
      <META>
      <TITLE></TITLE>
   </HEAD>

   <BODY> 
         <H1></H1>
         <P></P>
         <P></P>
         <BLOCKQUOTE></BLOCKQUOTE>
         <OL>
            <LI></LI>
            <LI></LI>
         </OL>
   </BODY>
</HTML>

Tästä dokumenttipuusta on myös mallisivu: [M][S][Pw].

W3C: CSS2: 3 Conformance: Requirements and Recommendations[Pw].

[Alku]