XHTML: Kirjoitussäännöt (syntaksi) 2008-01-01 18:49

Kuvaus:
XHTML
Extensible HyperText Markup Language

Sivun perusrakenne

Yksinkertainen XHTML-sivu saattaisi näyttää tältä:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
     <title>Sivun otsikko</title>
  </head>
  <body>
     <h1>Pääotsikko</h1>
     <p>Tekstikappale</p>
  </body>
</html>
  • Sivun alkuun sijoitettava DOCTYPE kertoo dokumentissa käytetyn merkkausstandardin, joka tässä esimerkissä on XHTML 1.0 Transitional.
  • Tämän jälkeen dokumentissa ilmenee laatikkorakenne. Sivu koostuu päällekkäisistä, sisäkkäisistä ja vierekkäisistä laatikoista, mutta elementit eivät mene koskaan ristiin.
  • html-elementti kattaa koko sivun. 
    <html>
...
</html>
  • html-elementin sisään sijoittuvat rinnakkain head- ja body-elementit. 
    <html>
  <head>
  </head>
  <body>
  </body>
</html>
  • head-elementtiin sijoitetaan erilaisia metatietoja sivusta 
    <head>
   <title>Sivun otsikko</title>
</head>
  • body-elementtiin sijoitetaan sivun selainikkunassa näkyvä sisältö. 
    <body>
  <h1>Pääotsikko</h1>
  <p>Tekstikappale</p>
</body>

Käsitteitä

Elementit

XHTML-dokumentti koostuu elementeistä joita on kolmenlaisia:

  • kappaletasoiset elementit (block) varaavat oman lohkon sivulta, eli ne alkavat uudelta riviltä ja niitä seuraavat elementit alkavat uudelta riviltä.

    <p>Leipätekstikappaleet alkavat ja loppuvat omilla riveillään.</p>

    <p>Leipätekstikappaleet alkavat ja loppuvat omilla riveillään.</p>

  • merkkitasoiset elementit (inline) sijoittuvat tekstinsisäisesti kappaletason elementtien sisään, eivätkä vaadi omaa riviä.
    <p>Leipätekstikappaleen sisällä voi <em>korostaa</em> tekstiä.</p>
  • tyhjät elementit eivät sisällä tekstiä 
    <img src="kuvatiedosto.jpg" alt="Esimerkkikuva" />

Kappale- ja merkkitasoiset elementit siis muodostuvat aloitustunnisteesta, varsinaisesta sisällöstä, ja lopetustunnisteesta. Tyhjät elementit ovat yksiosaisia, eivätkä ne ympäröi tekstisisältöä asiakirjassa.

Tunnisteet

Elementtien alkamisesta ja loppumisesta kertovat tunnisteet tai merkit (tag) kirjoitetaan pienillä kirjaimilla. Lopetustunniste muodostetaan aloitustunnisteesta lisäämällä kauttaviiva avaavan kulmasulkeen jälkeen. Esimerkiksi leipätekstikappaleen aloitusmerkki on <p> ja lopetusmerkki </p>.

Tyhjät elementit päätetään kauttaviivalla ennen lopetuskulmasuljetta. Kauttaviivan eteen on suositeltu jätettäväksi yksi välilyönti taaksepäinyhteensopivuussyistä, mutta ilmeisesti tämä on nykyään merkityksetöntä.

Attribuutit

Elementit voivat saada tarkennuksikseen erilaisia attribuutteja, jotka sijoitetaan aloittavan tunnisteen yhteyteen. Attribuuteilla kerrotaan esimerkiksi sisällytettävän kuvan sijainti ja linkitettävän sivun osoite. Elementtejä voidaan myös yksilöidä (id) ja ryhmitellä (class) attribuuteilla mm. CSS-muotoiluja varten.

XHTML-oppaita verkossa

HyperText Markup Language (HTML) Home Page
W3C:n kotisivut web-merkintäkielille. Huomioi että XHTML 1.0 -spesifikaatiossa ei ole listattu XHTML-elementtejä, vaan XHTML:n esitys W3C:n sivuilla perustuu siihen millä tavalla se poikkeaa HTML 4.01:stä.
HTML Dog
XHTML- ja CSS-oppaita alkeista edistyneempään. Kohdassa "References » HTML Tags" listattuna kaikki XHTML-tunnisteet.
HTML 4.01 / XHTML 1.0 Reference
Lista kaikista XHTML-elementeistä.
Web development mistakes, redux
Verkkosivujen toteutuksen tavallisia virheitä.
Luokka: »
Avainsanat:
http://raulihaverinen.fi/verkko-opas/?id=100