[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

1. Mikä on HTML ja XML asiakirjojen perusrakenne

Yleistä

HTML-sivujen tekeminen on helppoa. On olemassa paljon ohjelmia, joilla sivuja voi tehdä ymmärtämättä oikeastaan juuri mitään HTML-asiakirjojen koodin rakenteesta, sillä ne näyttävät sivut suoraan lähes sellaisina kuin ne näkyvät eri selaimissa (aivan tarkka tuo yhtäläisyys ei yleensä ole). Tällaisia sovelluksia nimitetään WYSIWYG-ohjelmiksi (What You See Is What You Get = mitä näet sen saat).

Web-dokumentti

Tämän tason sivujen tekeminen ei riitä, mikäli pyritään tehokkaasti käyttämään CSS:ää. On siksi ainakin suhteellisen syvällisesti ymmärrettävä HTML- ja XML-dokumenttien rakenne. Jaksot 1-4 ovat yleisluontoisia johdantosivuja HTML:n ja CSS:n ymmärtämiseen ennen tarkempia opassivuja. Käsittelen niissä ensisijaisesti HTML-koodausta ja viimeisessä jaksossa XML-koodausta. Jos HTML on sinulle ennestään tuttua, voit jättää osan jaksoista välistä ja siirtyä suoraan kohtaan HTML 4.0 + CSS ja CSS:n tavoitteet. Suosittelen kuitenkin, että luet elementtien käyttäytymiseen liittyviä kommentteja sivulta Help for TM CSS menu (kommentit ovat englanniksi).

[Alku]

Yleistä elementeistä ja HTML:n perusidea

HTML ja XML dokumentit (selostan myöhemmin, mitä XML tarkoittaa) sisältävät ns. elementtejä (elements), jotka ovat em. asiakirjojen perusrakenneosia. Elementtien ensisijaisena tarkoituksena on luoda dokumenteille selkeä rakenne (structure), joskin niillä on myös muita tehtäviä (Alaviite 1[S][Pw]). Rakenteen merkityksen ymmärtää, jos vertaa seuraavia kahta asiakirjaa:
Ilman rakennetta oleva teksti: [M][S][Pw].
Asiakirja, jonka tekstillä on yksinkertainen rakenne: [M][S][Pw].

Jotta elementit erottuisivat (asia)sisällöstä (content), niiden olemassaolo tarvitsee merkitä alku- ja yleensä myös loppukoodauksilla. Niistä käytetään englanninkielisissä teksteissä nimeä tag (start-tag ja end-tag tai muut vastaavat ilmaisut), joka sananmukaisesti tarkoittaa merkintää eli kansanomaisemmin merkkausta. Kun kyseessä on elementti, asiallisesti tarkka käännösvastine olisi elementtimerkkaus.

HTML perustuu SGML-kieleen (Standard Generalized Markup Language = standardi yleismerkintäkieli. SGML on yleinen dokumenttien rakenteen esittämiskieli, joka sisältää välineet eri dokumenttityyppien kuvaamiseksi (käsittelen dokumenttityyppiä koskevia näkökulmia tarkemmin edempänä). SGML ei ole siis merkintäkieli vaan metakieli eli tapa kuvata merkintäkieliä, jotka ovat sekä ihmisen että koneen luettavissa.

Gentle Introduction to SGML.

SGML-dokumentaatiossa kirjoitetaan elementtimerkkauksista seuraavasti (lisäsin tekstiin hieman korosteita; voit katsoa myös sanan tag selityksen[S][Pw]):

Markup that describes the structure and other attributes of a document in a non-system specific manner, independently of any processing that may be performed to it. In particular, SGML descriptive markup uses tags to express the element structure.

Elementtimerkkaukset ovat dokumentin elementtirakennetta kuvaavia ja siten kielen tärkeimpiä merkintäkoodeja (markup codes; HTML ja XML-kielissä on eräitä muitakin merkintäkoodeja, joita käsittelee Alaviite 2[S][Pw]). Jos sana tag haluttaisiin "kääntää" sen selityksen perusteella, voisimme nimittää sitä kuvausmerkinnäksi.

Elementin nimeä kutsutaan sen yleistunnisteeksi (generic identifier) ja se tarkoittaa eri asiaa kuin tag, mikä käy ilmi seuraavista SGML- ja modularisaatio­dokumentaatioiden sitaateista:

SGML:

Generic identifier (GI) = A name that identifies the element type of an element

Modularization of XHTML (Terms and Definitions):
Tag
Descriptive markup delimiting the start and end (including its generic identifier and any attributes) of an element.
W3C: CSS2: 4 CSS2 syntax and basic data types, 4.1.3[Pw].
Modularization of XHTML.

Tosiasiassa elementin nimi yhdessä rajoittimien kanssa toimii tunnistimena (mitä tarkoitetaan rajoittimilla, tulee esille elementin käsitekaaviossa[S][Pw], jossa esimerkkinä on elementti HTML). On silti terminologinen asiavirhe sanoa, että elementtimerkkaus kokonaisuudessaan on tunniste, sillä elementin alkumerkkaus saattaa sisältää useita tunnisteita (käsittelen tätä asiaa tarkemmin myöhemmin; voit tutkia asiaa myös käännösvastineen perusteluista[S][Pw]).

SGML:ssä elementtimerkkaukset eivät itsessään sisällä mitään toimintaohjetta, mutta HTML:ssä niillä on määritellyt tehtävät. Perustehtävä on kuitenkin sama kuin SGML:ssä eli kuvata dokumentin rakennetta. Nimi HTML johtuu osaltaan siitä, että aloitus- ja päätösmerkkaukset merkitsevät alueita. Siksi puhumme merkintäkielestä (markup language).

Elementtimerkkaus eli alkukielessä tag on ikään kuin "leima", joka "isketään" elementin alkuun ja mahdollisesti myös loppuun, jotta elementti varmasti erottuisi muusta koodista. Sitä voisi verrata puiden leimaamiseen. tai voit ajatella sen "lapuksi", joka laitetaan valitun sisällön alkuun ja loppuun. Toivon, että sitä havainnollistaa käyttämäni eläinvertaus. Tälle eläimelle laitetaan eräitä merkintöjä. Mutta ei toki kuvassa olevia! Asiakirjamme nimi voisi olla vaikka Lehma.html.

Lehmä, jolla on HTML elementtimerkkaukset

Toinen keskeinen merkitys on se, että elementtien avulla luodaan linkkejä. HTML suunniteltiin alun alkaen hyvin yksinkertaiseksi kieleksi luoda dokumentteja, jotka sisältävät hyperlinkkejä (hyperlinkit ovat dokumentin sisäisiä tai dokumenttien välisiä linkkejä). Tämän vuoksi puhumme HTML:n yhteydessä hypertekstistä ja HTML-kielestä (Hyper Text Markup Language = hypertekstin merkintäkieli - alunperin HTML sisälsi vain tekstilinkkejä). Itse asiassa alun alkaen muut kuin linkitykseen tarvittavat elementit olivat lähinnä vain viestinnän selkeyttämisen apukoodeja, jotta asiasisältö olisi luettavampaa ja se voisi olla selkeästi jäsenneltyä ([M][S][Pw]).

Elementit, jotka voivat saada sekä alku- että päätösmerkkaukset, voivat toimia sisällön ja toisten elementtien säilyttiminä eli "konttielementteinä" (element containers). Tällaiset elementit voivat olla emoelementtejä (parent elements) lapsielementeille (child-elements) eli elementeille, jotka ovat jonkun emoelementin alku- ja päätösmerkkauksen välissä ilman että elementtien välissä on muita elementtitasoja (käsittelen tätä näkökulmaa tarkemmin myöhemmin). Emoelementeillä voi olla sisältömalleja (content models; vastaavasti elementillä, joka on jonkun toisen elementin lapsielementti, voi olla emomalleja, parent models).

Jotkut elementit eivät voi saada päätösmerkkauksia, sillä ne eivät rajaa mitään sisältöaluetta. Tällöin niitä nimitetään "tyhjiksi elementeiksi" (empty elements). Esimerkki elementtien käytöstä (esimerkissä on elementit P= paragraph eli kappale ja BR = pakotettu rivikatko), joka näkyy seuraavanlaisena ns. lähdekoodia (source code) katsomalla ([M][S][Pw]):

<P>Tämä teksti on aloitus-<BR> ja päätösmerkkausten välissä,<BR> mutta välissä on eräitä BR-elementtejä,<BR> jotka aiheuttavat ylimääräisiä rivikatkoja.</P>
[Alku]
 

Alaviite 1. Jotkut käyttävät elementeistä nimitystä komento, mitä en pidä onnistuneena. Se antaa niistä liian aktiivisen mielikuvan. Elementeillä voi olla HTML ja XML dokumenteissa kuitenkin sangen passiviinen rooli, vaikka on niitäkin elementtejä, jotka suorittavat käyttäjän aktivoivan komennon. Koska elementeillä on hyvin monenlaisia käyttötarkoituksia, pitäydyn neutraaliin ilmaisuun. Sana elementti antaa mielestäni paremman kuvan siitä, että elementit ovat kielen rakenneosia. Tällainen tehtävä niillä on kaikissa merkintäkielissä. Lisäksi käyttämäni termi on täysin läpinäkyvä, jolloin lukijan on helppo siirtyä suomenkielisestä tekstistä englanninkielisten spesifikaatioiden pariin.

Alaviite 2. Esimerkkinä HTML standardi dokumenttityypistä on http://www.w3.org/TR/REC-html40/loose.dtd. Selain ei tarvitse tietoa käytetystä dokumenttityypistä. Tiedostoa ei voi tarkistuttaa ilman, että asiakirjassa on käytettyihin elementteihin ja attribuutteihin viittaava DTD-ilmoitus, esim.: <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">. DTD:ssä määriteltävät kuvaukset (declarations) ja niiden muoto (... = jonkin kuvauksen sisältö):

W3C: loose.dtd (HTML 4.01).

 

Elementit, <!ELEMENT ... >
Attribuuttilistat, <!ATTLIST ... >
Parametrientiteetit (parameter entities). Kyseessä ovat ns. DTD-makrot, joilla kootaan yhteen DTD-tiedostoissa käytetyjä arvoja, attribuutteja ja elementtejä, esim. <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">. Selitän niiden käyttöä eräässä parissa englanninkielisessä sivussa (Help for HTML All[S] ja Help for TM ../HTMLKit/wappush[S]). Yritän löytää termiluetteloon[S][Pw] termille mielekkään suomenkielisen vastineen.
Henri Ruini: XML sanasto[Pw].

Yleisentiteetit (common entities/ general entities), esim. <!ENTITY amp "&#38;#38;">. HTML-dokumenteissa näitä ovat eräät sovitut koodien merkintätavat, jotka on standardi DTD-tiedostoissa joko lueteltu tai ne on löydettävissä viitatuista osoitteista. Niitä tarvitaan esim. esittämään tämä merkki näytöllä <. Kyseistä merkkiä tarvitaan koodaukseen. Sen näyttäminen tekstinä tulee toteuttaa erityiskoodauksella, joka alkaa &-merkillä, keskellä lukee lt ja se päättyy ; - merkkiin. Aksentoidut kirjaimet tulisi aina merkitä entiteetteinä, esim. ä = &auml; ja ç = &ccedil; (espanjalais-portugalilainen kirjain). Tekstiä, jossa entiteetit käännetään tietyiksi kirjaimiksi, kutsutaan nimellä PCDATA (Parsed Character Data; katso myös selitys viittaukselle #PCDATA[S]).
 

Koodin sisällä käytetyt entiteetit sekä kommentit ovat viittaamiani muita merkintäkoodeja.
Merkintäkoodit (markup codes) = elementtimerkkaukset, kommenttimerkkaukset, yleisentiteetit. Lisäksi XML käyttää merkkausta <![CDATA[ ja ]]>, joka vaihtaa moodin. Merkkauksen sisällä oleva koodi käsitellään sellaisenaan, ilman jäsentelyä (CDATA = Character Data). Eräät käytöstä poistuneet HTML 2.0 ja HTML 3.2 -elementit[S] toteuttavat joillakin selaimilla saman asian.

[Alku]

Lohko- ja rivinsisäiselementit

Sen lisäksi, että elementit on luokittelu normaaleihin ja tyhjiin elementteihin, HTML:ssä on olemassa myös toinen perusluokittelu: lohkoelementit (tarkemmin sanottuna lohkotason elementit, block level elements) ja rivinsisäiselementit (tarkemmin sanottna rivinsisäistason elementit, inline level elements). Lohkoelementin kohdalla selain luo elementin ympärille ikään kuin näkymättömän suorakaiteen muotoisen laatikon (box) eli lohkon. CSS1 spesifikaatioissa sanotaan lohkoelementeistä, että niitä ennen ja niiden jälkeen on rivikatko.

Lohkoelementit voidaan luokitella joihinkin alaluokkiin. Yleisiä lohkoelementtejä ovat H1-H6, P, BLOCKQUOTE, OL, UL ja TABLE. Lohkoelementit voivat yleensä sisältää toisia lohkoelementtejä (eräitä rajoituksia on kuitenkin olemassa, joihin en tässä puutu) ja rivinsisäiselementtejä. Tämäkin teksti on lohkoelementin sisällä. Lohkoelementit toimivat ensisijaisesti asiasisällön jäsentely-, ryhmittely- ja rakenne-elementteinä (structural elements).

Rivinsisäiselementtejä on kahdentyyppisiä. Ensinnäkin erilaiset tekstiin liittyvät rivinsisäiselementit, esim. B ja I, joita voidaan pitää esitysasullisina elementteinä (inline presentational). Useimmilla tämän ryhmän elementeillä on tietty semanttinen (semantic = merkitysopillinen) sisältö. Em. elementit voidaan ilmaista myös semanttista puolta kuvaavilla elementeillä EM (emphasized = painotteinen) ja STRONG. Näitä elementtejä voisi kutsua rivinsisäisiksi fraasielementeiksi (inline phrasal). Tällaiset rivinsisäiselementit voivat olla rajoituksetta keskenään sisäkkäisiä (nested).

W3C: Modularization of XHTML (käytetyt termit).

Ne eivät luo ympärilleen lohkoelementtien tavoin suorakaiteen muotoisia laatikoita vaan elementit liikkuvat rivin mukana. Ne käyttäytyvät kuin rivillä oleva fraasi. Tekstiin vaikuttavia rivinsisäiselementtejä käytetään ensisijaisesti korostamaan jotain asiasisällön kohtaa.

Opiskeluaikana monet pistivät kirjoihinsa keltaisella paksulla tussilla merkkauksia. Käytän samaan tapaan elementtiä CODE, jonka avulla merkitsen sinisellä vain lähdekoodissa näkyvät merkintäkoodit - huomaa, että tässä lauseessa olevat korosteiset sanat ovat rivinsisäiselementtejä (CODE ja STRONG).

Kuva elementtimerkkauksesta

Myös linkitykseen käytetty erityiselementti A (sanasta Anchor = ankkuri) kuuluu rivinsisäiselementteihin. Se käyttäytyy tekstiin vaikuttavien elementtien tavoin, mutta sen rajoituksena on se, että linkitykseen käytetyt elementit eivät saa olla sisäkkäisiä.

Toiseksi on olemassa rivinsisäiselementtejä, jotka luovat ympärilleen yhtenäisen laatikon, mutta jotka kuitenkin liikkuvat rivin mukana toisin kuin lohkoelementit. Näitä elementtejä voisi käyttäytymisen perusteella nimittää rivinsisäislohkoelementeiksi (inline block elements). Eräät tyhjät elementit ovat luonteeltaan rivinsisäiselementtejä ja ne käyttäytyvät juuri tällä tavoin (kuten IMG = kuva).

Yleisesti ottaen rivinsisäiselementtejä tulisi yleensä käyttää vain lohkoelementtien sisällä. Tosin jotkin HTML-versiot sallivat niiden käyttämisen yksinäänkin, mutta niiden käyttö tällä tavoin ei ole suositeltavaa.

Lohko- ja rivinsisäiselementit tulisi sijoittaa toisiinsa nähden oikein. Elementtien väärinkäyttö on yleistä. Vaikka selaimet hyväksyvät jonkin verran elementtien väärää sijoittelua, se voi kuitenkin aiheuttaa ennalta odottamatonta virhekäyttäytymistä ja jopa kaataa selaimen. Voit opetella lohko- ja rivinsisäiselementtien oikeaa käyttöä englanninkielisistä eri spesifikaatioita käsittelevistä nooteista[S] ja taulukoista[S]. Myös tälle sivustolle määrittelemäni semantiikka[S] opettaa jonkin verran elementtien oikeaa käyttöä.

[Alku]

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]

Dokumenttien kokonaisrakenne

Aiheet

Attribuutit, kuvausilmoitukset ja kommentit

Elementeillä voi olla myös lisämääritteitä, ns. attribuutteja (attributes), jotka sijoitetaan elementin alkumerkkauksen sisään.

Attribuuteilla on monenlaisia tehtäviä. Niitä käytetään esim. tarkentamaan elementin esitysasua (presentation). Linkit toteutetaan yleensä elementin A erityisattribuuttien avulla (href, id ja name).

Koska tyhjät elementit eivät voi toimia säilytinelementteinä, ne voivat saada jonkinlaisen sisällön vain attribuuttiensa avulla. Joissakin tapauksissa elementti korvataan viitatulla sisällöllä. Esim. elementti IMG korvataan kuvalla, johon attribuutti src viittaa (tällaista elementtiä kutsutaan nimityksellä korvattava rivinsisäiselementti, replaced inline (level) element - muut ovat tietenkin ei-korvattavia rivinsisäiselementtejä, non-replaced inline level elements).

Yksittäisillä attribuuteilla on arvoja (values). HTML 3.2 dokumentissa elementille P voi olla esim. attribuutti align="center", joka tarkoittaa keskitä kappale ([M][S][Pw]):

<P align="center">Tässä on tavallinen kappale, joka on keskitetty kuten tämä esimerkkikappale käyttäen attribuuttia align="center".</P>

Selvyyden vuoksi pyrin siihen, että tekstissä ja esimerkeissä elementit on merkitty isolla kirjaimella (esim. BLOCKQUOTE) ja kaikki attribuutit ja niiden määrittelyt pienellä kirjaimella (esim. style=" ... ").

On kuitenkin kaksi poikkeusta. Dokumenttityypin kuvausilmoitus on isolla kirjaimilla, koska se on yleinen tapa. Se ei kuulu dokumentin varsinaiseen rakenteeseen. Mikäli ilmoitus sisältää tiedostonimen, se antaa selaimelle mahdollisuuden ladata DTD-tiedosto tietokoneen muistiin. Erilaisille validaattori ohjelmille tieto on välttämätön. Alkuerottimessa on huutomerkki (<!DOCTYPE ... >).

W3C on luonut HTML -dokumenteille ns. DTD-tiedostot (Document Type Definition = dokumenttityyppimäärittely), jotka sisältävät tiedot elementeistä ja käytetyistä attribuuteista sekä tiedon siitä, millaisia rakenteita dokumentissa sallitaan.

Dokumenttityypin kuvausilmoitus on kuin lehmän korvamerkkaus (eartag). Lehmä ei tarvitse korvamerkintää, mutta sen isäntä (ja viranomaiset) tarvitsee. Selain osaa ne ilman ilmoitustakin, mutta periaatteessa juuri dokumenttityyppi ilmoittaa sen kielen, jolla dokumentti on kirjoitettu (kuten aiemmin on tullut esille, määrittelykielenähän HTML-dokumenteissa on SGML).

Lehmä, jolla on korvamerkinnät

XML-dokumentit sen sijaan saattavat tarvita dokumenttityyppi-ilmoitusta, sillä sivujen tekijä voi luoda oman dokumenttityyppikuvauksen. XML-dokumenteissa korvamerkintää vastaakin <?xml version="1.0"?>. Käytän viitatessani XML-elementteihin pieniä kirjaimia.

Kommenteissa käytetään seuraavan kaltaisia merkitsemistapoja, joita olen itsekin käyttänyt esimerkeissäni (katso kommentin käsitekaavio[S][Pw]):

/* tämä on CSS-kommentti, joka CSS-määrittelyjä ymmärtävillä selaimilla selvyyden vuoksi pitäisi näkyä vihreänä */
<!--
merkitsen myös mahdolliset HTML-kommenttien aloitus- ja päätösmerkit vihreällä -->

Dokumentin osasten merkitys

Yksinkertainen HTML dokumentti koostuu vain elementeistä, attribuuteista sekä sisällöstä, jossa käytetään erityiskirjaimille omia merkintäkoodeja (lue Alaviite 2[S][Pw], jos haluat tietää tarkemmin asiasta).

Dokumentin osaset luovat asiakirjoille seuraavat perustekijät (esitän ne siinä tärkeysjärjestyksessä, minkä katson niillä olleen ensimmäisissä HTML-dokumenteissa):

  • Sisältö (content)
  • Rakenne (structure)
  • Linkitys (linking)
  • Semantiikka (semantics)
  • Esitysasu (presentation)

HTML:n alkuperäinen idea on, että se on ensisijaisesti rakenne- ja semantiikkakieli, ei esitysasukieli, vaikka muutamat elementit voidaan ymmärtää esitysasullisina elementteinä. Seuraavassa jaksossa käydään lävitse hieman eri HTML:n historiaa.

[Alku]

Esi-HTML:stä HTML 3.2:een

Ensimmäiset HTML asiakirjat olivat hyvin yksinkertaisia dokumentteja, joissa oli vähän elementtejä ja attribuutteja. Elementit loivat lähinnä yksinkertaisen rakenteen. Koska mitään virallisia spesifikaatioita ei ollut, ensimmäisiä nykyistä HTML:ää muistuttavia koodauksia voidaan kaiketi kutsua "esi-HTML:ksi".

Ensimmäiset Web-dokumentit

Rakenne-elementtien lisäksi jotkut elementit olivat semanttisia (esim. STRONG), mutta esitysasua kuvaavia elementtejä ei Dan Connollyn ensimmäisessä DTD:ssä ollut. Sen sijaan W3C:n hakemistossa, joka käsittelee ensimmäisiä HTML-dokumentteja on käytetty elementtejä B ja I (niidenkin käytön voi ymmärtää osittain semanttisesti). Ensimmäiset dokumentit eivät sisältäneet lainkaan kuvia eikä fonttimäärittelyjä, sillä dokumenttien tuli olla käyttöympäristöstä riippumattomia, kuten seuraavasta sitaatista käy ilmi:

It is required that HTML be a common language between all platforms. This implies no device-specific markup, tai anything which requires control over fonts tai colors, for example. This is in keeping with the SGML ideal.

Tutustu varhaisien HTML-versioiden historiaan sivun Help for HTML All johdanto-osa Document types[S]avulla.

W3C: HTML Home page[Pw]; esimerkkihakemisto.
Muita sivustoja: Dan Connollyn ensimmäinen DTD, Dmitry Kirsanov.

HTML 2.0 toi jo mahdollisuuden käyttää kuvia, mutta elementtien ja attribuuttien määrä pysyi sangen pienenä. Vähitellen niihin haluttiin yhä lisää tekstinkäsittelyohjelmien (kuten Word, WordPerfect) tapaisia muotoiluja ja lisäelementtejä, jolloin elementtien ja attribuuttien määrää kasvatettiin, mikä näkyy HTML 3.2:ssa.

HTML 3.2:ssa kaikki attribuutit liitettiin aikaisempien versioiden tapaan elementtien sisään ja siten myös osaksi asiakirjan runkoa (BODY). Sisältö, rakenne ja esittäminen ovat yleensä samassa dokumentissa lukuun ottamatta linkitettyjä kuvia ja ns. upotettuja (embed) elementtejä (kuten esim. ns. Java-kielellä tehtyjä pienoissovelluksia (applets), joita en käsittele näillä sivulla lainkaan). Tällaisen HTML asiakirjan luominen on erittäin helppoa. Ongelmana on muotoilun staattisuus - kerran tehtyjä muotoiluja voi olla hidasta muuttaa jälkikäteen varsinkin, jos esitysasua kuvaavia elementtejä ja attribuutteja on paljon!

HTML 3.2 johti HTML:n käytön harhapoluille. HTML:ää itseään pyrittiin käyttämään sivuntaittokielenä (layout language), mihin sitä ei oltu alunperin suunniteltu ja mihin se soveltuu huonosti. HTML 3.2 oli väliaikaisratkaisu, josta ei koskaan pitänyt tulla niin yleisesti käytetty sivuntekotapa kuin siitä käytännössä tuli.

Tosin jos sivu muodostetaan automaattisesti generoituna tietokannasta (esim. Java-servleteillä (servlets) tai Perl -skripteillä), HTML 3.2 toimii ihan hyvin, sillä esim. automaattisesti luotu linkkilista tarvitsee vain yhden pohjatiedoston. HTML 3.2:lla ei kuitenkaan saa tehtyä kaikkea sitä, mihin CSS pystyy. Lisäksi CSS:ää käytettäessä lopullisen koodin määrä on useimmiten selvästi pienempi, jolloin sivut voivat latautua nopeammin.

Suurin etu CSS:llä saavutetaankin käsinkirjoitetuissa laajoissa opetus- ja opassivustoissa, kuten CSS-sivuissani. Toiseksi suurin etu on sivustoissa, joissa osa tuotetaan automaattisesti ja osa käsin. Joku voi tehdä automaattisesti tuotetun osa, joku toinen voi tehdä käsin kirjoitetut osan ja joku kolmas voi CSS:n avulla määritellä yhteisen esitysasun.

[Alku]

HTML 4.0 + CSS ja CSS:n tavoitteet

HTML 4.0:n ja CSS:n avulla sisältö ja sen ulko- eli esitysasu (esittämistapa) voidaan eriyttää osittain or lähes kokonaan toisistaan käyttäen CSS-koodausta. Lyhenne CSS tarkoittaa seuraavaa (käsitteet ovat loogisessa järjestyksessä):

  1. Style = tyyli eli elementtien ulkoasun esittäminen käyttäen erityisiä tyylikuvauksia ja -sääntöjä (käsittelen niitä tarkemmin edempänä).
  2. Style Sheets = kirjaimellisesti tyyliarkit = tyylikuvaukset ja -säännöt kootaan "tyyliarkeiksi" eli tyylisivuiksi (nykyisin tyylisivu on standardiksi muodostunut sanan sheet vastine, mitä voi pitää oikeutettuna, sillä arkkikin on sivu); yksittäinen tyylisivu on paikka, jossa on yksi tai useampia varsinaisia or loogisia tyylisääntöjä, jotka määrittelevät dokumentin esitysasun (spesifikaatioissa on hieman epätarkat määritelmät; lue Alaviite 1[S][Pw]).
  3. Cascading = tyylisivut voidaan kytkeä toisiinsa ja alistaa eli ikään kuin limittää tai porrastaa keskenään. Juuri siksi käsittelemme Cascading Style Sheets -määrittelyjä, emme vain style tai style sheet määrittelyjä. Suomennan sen tilanteesta riippuen joko limitetyt tyylisivut tai porrastetut tyylisivut. Nämä käännökset ovat sopusoinnussa W3C-organisaation logon kanssa!
    CSS-logo - hae se!
Porrastetut tyylisivut

CSS:ssä on kyse useiden, eri lähteistä peräisin olevien tyylikuvauksien ja -sääntöjen soveltamisesta samanaikaisesti. Tämän vuoksi spesifikaatio kirjoittaa sheets monikossa ja suomenkielessä tulee käyttää monikkomuotoista ilmausta arkit. Tyylisäännöillä on toisiinsa nähden ikään kuin porrastetut, tarkoin säädellyt painoarvot (weigth).

CSS ei ole täyspiirteinen kieli, sillä se toimii vain toisten kielten apukielenä (yleisimmin HTML, XML ja XSL). Se ei se sisällä lainkaan HTML:n kaltaisia elementtimerkkauksia. CSS:n käyttöä voi verrata pikemminkin JavaScript ja ECMAScript ohjelmointikieliin, joita kutsutaan nimellä scripting languages. Sekä JavaScript-kieltä että CSS:ää voidaan käyttää dokumentin runko-osassa hyvin lyhyinä koodikatkelmina. CSS ei ole kuitenkaan ohjelmointikieli, vaikka sen syntaksi on niiden perua.

CSS1 on rajoitettu mekanismi käyttää erilaisia tyylejä Web-asiakirjoissa ja se on siten rajoittunut muotoilukieli (formatting language). CSS1:tä ei voi pitää varsinaisena sivuntaittokielenä.

Sen sijaan CSS2 on jo lähes täysipainoinen sivuntaittokieli, sillä sen avulla pystyy luomaan suurimman osan Web-dokumenttien tarvitsemista muotoiluista ja sivujen tarvitsemista kontrolleista. Tosin eräitä puutteita siinäkin on. Nämä puutteet pyritään korjaamaan CSS3:ssa[S]. Muotoilu merkitsee ensisijaisesti visuaalista muotoilua (visual formatting). CSS on kuitenkin monessa muussakin mielessä muotoilukieli.

Jos selain toteuttaisi täysin CSS2:n, kielellä voisi teoriassa määritellä useimpien HTML:n rakenneosien eli elementtien muotoilupiirteet kokonaan uudestaan. CSS käyttäisi tällöin HTML-elementtejä lähinnä vain merkkauskoodeina. HTML itsessään ei toimisi juuri lainkaan muotoilukielenä. Elementtien todellista järjestystä CSS:llä ei tosin pysty muuttamaan (kylläkin poistamaan elementtejä näytöltä tai sijoittamaan ne toisiin paikkoihin - miten se tapahtuu selviää myöhemmin).

Muotoilu- ja sivuntaittokielen keinoin CSS2 pyrkii seuraaviin tavoitteisiin:

  1. Sisältö ja sen esittäminen voidaan irrottaa toisistaan.

  2. Muotoilukeinoja käyttäen voidaan muuttaa myös dokumentin rakennetta. CSS ei ole kuitenkaan keino irrottaa rakenne ja sisältö kokonaan toisistaan, koska se ei kykene muuttamaan elementtien todellista järjestystä.

  3. Sillä voidaan luoda tarkempia ja monipuolisempia esitysasumäärittelyjä elementeille kuin mitä HTML-kielellä yksinään on mahdollista.

  4. Tiedostot voivat olla alaspäin yhteensopivia.

  5. Perusasiakirjat voivat olla rakenteeltaan hyvin yksinkertaisia.

  6. Sama asiakirja voidaan tarjota hyvin erilaisena erilaisille laitteille. Visuaalisen esittämisen sijaan tiedot voidaan syöttää näkövammaisia ajatellen erityiskirjoittimille tai puhesyntetisaattoreille. Tällöin kyseessä on kuuloon ja kosketukseen perustuva dokumenttien muotoilu.

  7. CSS-tiedostoja voidaan käyttää muissakin kuin HTML-asiakirjoissa, kuten XML-asiakirjoissa.

CSS mahdollistaa palaamisen HTML:n alkuperäiseen ideaan eli paluu juurille! äärimmilleen vietynä HTML 4.0 asiakirja ei itsessään sisällä ainuttakaan esitysasua kuvaavaa attribuuttia, vaan lähinnä rakenne- ja linkityselementtejä ja -attribuutteja. Sellaisia elementtejä ja attribuutteja, jotka koskevat puhtaasti tekstin esittämistyyliä (kuten esim. elementtejä FONT, B, I, U ja attribuutteja align, bgcolor) ei käytetä. Osa em. elementeistä ovat sinänsä sallittuja, mutta ne ovat joka tapauksessa ei-suositeltavia, sillä elementtien ensisijaisena tarkoituksena on ilmaista dokumenttien rakenne ja semantiikka, ei sen esitystapa. Tämä sivu ei käytä edes sallittuja esitysasullisia elementtejä.

Muotoilut linkitetään useimmiten pääosin erillistiedostoon käyttäen muotoa <LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css"> kuten tässä esimerkissä ([M][S][Pw]):

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<TITLE>
Asiakirjan otsikko</TITLE>
</HEAD>
<BODY>
<H2>
Otsikkoteksti</H2>
<P>
Kappale</P>
<P>
Toinen kappale. <A href="html_asiakirja.html">Linkki</A >. Ainoat välttämättä tarvittavat attribuutit ovat linkit sekä mahdolliset linkitettävät objektit kuten kuvat.</P>
</BODY>
</HTML>

Tiedostossa tyylisivutiedosto.css kuvataan, miten esim. elementti H2 näytetään tietokoneruudulla. Sama koskee tätä dokumenttia. CSS mahdollistaa korvata HTML 3.2 tyyliset dokumentin esitysasua koskevat attribuuttimäärittelyt paljon rikkaammalla tavalla esittää asiakirjan ulkoasu.

Lopputuloksena voi olla äärimmäisen pelkistetty, vähän koodia sisältävä ja nopeasti latautuva asiakirja, joka on kaikesta huolimatta hyvin näyttävä selaimelle, joka ymmärtää CSS:ää - mutta samalla äärimmäisen karu selaimelle, joka ei sitä ymmärrä. Todellisuudessa esim. Netscape 3.x pudotetaan ulkonäön esittämisen suhteen lähes alkuajan selainten tasolle. Tätä on HTML 4.0 Strict (strict= ankara, tinkimätön)!

Vaikka rakenne on pääosin itse asiakirjassa, siihen voidaan periaatteessa joiltakin osin vaikuttaa myös CSS:n avulla. Koska elementtien ulkoasun määrittelyt ovat erillistiedostossa, sivuston ulkoasun ja eräiden rakenteiden muuttaminen on äärimmäisen helppoa! Sivun tekijän (author) ei tarvitse uudestaan koodata yksittäisiä elementtejä. Minimitapauksessa riittää, että muutat vain muutaman kirjainmerkin ja tuhansien sivujen ulkoasu muuttuu kerralla!

On mahdollista luoda myös löysiä (loose), HTML 4.0 Transitional asiakirjoja. Transitional tarkoittaa "murrosvaiheen" dokumenttityyppimäärittelyä. Asiakirja sisältää muotoiluja, jotka HTML 4.0:ssa strict ei tarvita ja jotka siinä voidaan korvata CSS:llä. Tällaiset määrittelyt katsotaan vähitellen poistuviksi ja korvautuviksi. Paremman yhteensopivuuden vuoksi niitä käytetään vanhempia selaimia varten. Tosin poistuvuuden suhteen olen hieman eri mieltä kuin jyrkimmät CSS:n käyttäjät. Monin paikoin on joustavampaa käyttää HTML 3.2 attribuutteja kuin CSS:ää.

Tämä dokumentti on lähes strict-kriteerit täyttävä. Olen käyttänyt dokumentin varsinaisessa asiaosassa lähes yksinomaan sellaisia elementtejä ja attribuutteja, jotka on mainittu HTML 4.0 strict.dtd asiakirjassa (sen sijaan yksittäisissä linkkeissä ja linkkikokonaisuuksissa on strict-dokumenttityyppiin kuulumattomia elementtejä ja attribuutteja, joihin kuuluu elementille A annettu attribuutti target; lue viimeksi mainittuun attribuuttiin liittyvä Alaviite 2[S][Pw]). Tämän dokumentin näyttäminen riippuu vanhoilla selaimilla niiden oletusasetuksista ja käyttäjän niihin tekemistä mahdollisista muutoksista. Testaa ero! Vertaa tiedostoa tyylisivun kanssa ([S][Pw]) ja ilman sitä ([S][Pw]). Jälkimmäinen on kuin HTML 2.0 asiakirja.

Huomautus. HTML 4.01 (HTML 4.0:n korjattu versio) ja CSS2 spesifikaatiot on suunniteltu toteuttamiskelpoisiksi. Selaimen pitää toimia mahdollisimman pitkälle niin, että sen tukemat spesifikaatiot pääsevät toteutumaan. On kuitenkin muistettava se, että HTML ja CSS spesifikaatiot kehittyvät ja niiden kesken tulee olla priorisointi.

Jos eri spesifikaatioiden välillä ilmenee ristiriitoja, toimitaan selaimen tukeman uusimman spesifikaation mukaan. Vanhempia spesifikaatioita toteutetaan siinä määrin kuin niitä voidaan toteuttaa aiheuttamatta ristiriitaa uudempien kanssa.

Koska CSS:n perusideana muualta käsin (kuten erillistiedostoista) pystyä poistamaan tai muuttamaan minkä tahansa esitysasua koskevan HTML-elementin tai -attribuutin vaikutusta, CSS:lle pitää antaa suhteessa HTML:ään etusija, mikäli sekä HTML että vastaava CSS on annettu tai HTML ylipäätänsä käsittelee jollakin tavalla samoja esitysasullisia piirteitä kuin CSS.

Käyn lävitse näillä sivuilla seuraavia asioita:

  1. Yritän tällä sivulla selittää, mitä ovat tyylisivut.

  2. Sivulla 2 käsittelen sitä, missä niitä voidaan määritellä. Annan joitakin käytännön esimerkkejä yksinkertaisista tyylisivuista.

  3. Sivulla kolme käsittelen mahdollisia mittayksiköitä ja värejä.

  4. Sivuilla 4-5 käsittelen sitä, milloin käyttäjäsovellukset (UA = User agents, useimmiten WWW-selaimet) käsittelevät niitä lopullisessa prosessissa.

  5. Sivut 6-9 käsittelevät sivun yksityiskohtia (fontit, ankkurit ja linkit, tausta, reunukset ja listat).

  6. Sivut 10-11 käsittelevät dokumentin perusrakenteiden hallintaa.

  7. Sivu 12 on vilaus tulevaisuuteen.

Seuraava jakso käsittelee HTML 4.01:n jälkeisiä XHTML-spesifikaatiota sekä XML-dokumentteja. Mikäli et ole niistä kiinnostunut, voit hypätä sivulle 2.

John Allsop: The key ideas of CSS[Pw].
Keijo Kortelainen: Tyylimäärittelyjen käytöstä aiheutuvat hyödyt ja haitat.

[Alku]
 

Alaviite 1. Seuraavat spesifikaatioiden määritelmät vaativat vähän selittämistä:

CSS1:
a collection of rules
CSS2:
A set of statements that specify presentation of a document.

Yksittäinen tyylisivu ei sisällä välttämättä useaa sääntöä eli sääntö- tai lausekokoelmaa (a collection of rules (sama kuin a rule set) tai a set of statements). Yksinkertaisimmillaan se sisältää joko yhden säännön tai se ei sisällä lainkaan varsinaista sääntöä, esim. style="color:blue". Tällaisessa tapauksessakin on kuitenkin kyse loogisesti säännöstä, sillä tyylisivuilla on aina suhteellinen painoarvo toisiin tyylisivuihin nähden. CSS2-spesifikaation määritelmä on tosi, kun a set of statements (lausejoukko) määritellään seuraavasti:
Lausejoukko = yksi tai useampi varsinainen tai looginen CSS-sääntö.

Alaviite 2. Strict ei salli kehysten käyttöä. Keskusteltuani erään W3C organisaation HTML-työryhmän (working group) jäsenen kanssa asiasta. Hänen mukaansa kehykset eivät ole riittävän hyvin määriteltyjä, että ne kelpaisivat tiukkaan dokumenttimäärittelyyn. Poistin välillä joitakin linkkejä, jotta sain tämän dokumentin hyväksytyksi. Totesin kuitenkin, etten voi tehdä mielekkäällä tavalla tehdä tämän kriteerin täyttäviä dokumentteja. Tarvitsen aina target-attribuutteja linkittäessäni muiden tekemiin asiakirjoihin (käytän näillä sivuilla target="new" ja yleinen tapa avata rinnakkaisikkuna on target="_blank"). En katso ollenkaan hyväksi ratkaisuksi sitä, että kehyksien käyttöä pidettäisiin virheellisenä. Juuri target-määritteet tuovat mahdollisuuden monipuoliseen ikkunoiden käyttöön.

[Alku]

XMLja XHTML

Aiheet

XML

XML on syntynyt kaupallisten yhtiöiden erityistarpeiden takia. HTML-elementit ovat rajoittuneita eivätkä ne kuvaa aina itse asiaa riittävän hyvin. XML-dokumenteissa voi käyttää omia elementtejä, jotka kuvaavat itsessään käyttötarkoitusta, esim. <BOOK-CONTENTS>.

Haluatko luoda XML-dokumentteja?

Erityisesti Microsoftin tarkoituksena on ollut luoda laajoja maailmanlaajuisia tietokantoja, joissa on mahdollista käyttää etsintäkriteereinä elementtejä ja elementtiryhmiä. Myös erilaiset tieteenalat, kuten matematikka ja kemia voisivat käyttää omia elementtejä. Koska mahdollisille elementeille ei ole mitään rajoituksia ei ole, XML kertoo jo nimenä tämän asian XML is extensible (eXtensible M arkup Language = 'laajennettavissa oleva merkkauskieli').

HTML-dokumenteissa elementeillä on esimääritellyt esitystavat. XML-elementeillä ei ole mitään oletusesitystapaa. Määrittelemätön XML-elementti ei tee yhtään mitään! Eräs tapa antaa XML-elementeille esitystapa on CSS. Jos XML-dokumentit käyttävät samoja elementtejä kuin HTML-elementit, samaa CSS-tiedostoa voidaan käyttää niin HTML- kuin XML-dokumenteillekin (tein lisäsivu:n tästä asiasta[S]).

Toinen keino on XSL (eXtensible Stylesheet Language), jossa on enemmän mahdollisuuksia vaikuttaa XML-dokumenttien rakenteeseen. Microsoft suosii sitä. Se antaa enemmän mahdollisuuksia asettaa elementit toiseen järjestykseen kuin CSS. On kuitenkin huomattava, XSL:n suosiminen johtuu osittain siitä, että Microsoft Internet Explorer:n CSS-tuki ei ole valmis. Puuttuvat piirteet olisivat XML-dokumenttien suhteen tärkeitä. CSS:llä ei voi saada MS IE -selaimille kunnon esitysasua.

Jos toteutus olisi parempi tilanne voisi olla toinen. Lyhyesti sanottuna MS IE ei CSS-tuen osalta täytä XML-vaatimuksia. Esim. Netscape 6.x+ ja Opera 4.x+ -selaimille on XML-dokumenteille luotavissa kunnollinen esitysasu. Käsittelen MS IE 5.5+n ongelmia eräällä lisäsivu:lla[S]).

XML-dokumenttien yhteensopivuus (compatibility) HTML 3.2 -tasoon kykenevien selainten kanssa riippuu XML-sivujen tekijästä. Pahimmassa tapauksessa XML-dokumentit ovat vanhoille selaimille toisiinsa liittynyttä tiivistä tekstiä ja erityiskoodeja (lue alaviite 1[S][Pw], jos tahdot tietää mitä tarkoitan erityiskoodeilla) - käytännössä mahdotonta tai erittäin vaikea lukea. Itse asiassa sivujen tekijä voi luoda oman HTML:ää muistuttavat kielen - XML on ihanne kieli "tee se itse" -ihmisille! XML-dokumentit voidaan kuitenkin laatia sangen luettaviksi myös vanhoille selaimille, jollin kaikki tai useimmat elementit ovat samoja kuin HTML-dokumenteissa (elementtien ei kuitenkaan tarvitse käyttäytyä samalla lailla kuin XML:ää osaavilla selaimilla).

XHTML

Mitä XHTML (eXtensible Hyper Text M arkup Language) dokumentteihin tulee kyse on erityisistä XML-dokumenteista, jotka käyttävät pääosin täysin samoja elementtejä kuin HTML-dokumentit. Ne voidaan ilmoittaa joko HTML tai XML dokumentteina. XHTML-dokumentit pitää aina tehdä XML-sääntöjen mukaan, jotka ovat paljon tiukemmat kuin HTML-dokumenteilta edellytettävät vaatimukset. Ensinnäkin kaikki dokumentit täytyy olla hyvin muotoiltua (well-formed) - enää ei ole sallittua tehdä niin paljon virheitä kuin aiemmin! HTML-dokumenttien ja XHTML-dokumenttien välillä on esim. seuraavia eroja:

 
  1. Dokumentissa voi olla XML-ilmoitus (<?xml ...?>), mutta se ei ole pakollinen. HTML-dokumentille ei ole olemassa vastaavaa ilmoitusta. HTML-dokumenttien tavoin dokumentit tulee ilmoittaa XHTML-dokumentiksi ainakin standardilla DTD-ilmoituksella, esim. <!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/"/dtd/transitional.dtd"> (tiukassa DTD-ilmoituksessa on pieni virhe - lue alaviite 2[S][Pw]).

  2. Dokumentin juurielementti (root element) on aina html ja siihen liittyy aina XML-nimiavaruusilmoitus: <html xmlns="http://www.w3.org/TR/xhtml1/">.

  3. Kaikki HTML-elementit ja -attribuutit kirjoitetaan pienillä kirjaimilla. Kaikki elementit ovat pieni-iso-eroavia. Tämän kaltainen kombinaatio on XML-dokumenteissa laiton vaikka se on kelpaa HTML-dokumenteille: <BODY>... </body>. Mikäli attribuutille on standardit arvot, nekin kirjoitetaan pienillä kirjaimilla (esim. align="center").

  4. Kaikki attribuuttien arvot ympäröidään sitaateilla mukaan luettuina nekin, joissa arvot ovat vain numeroita. Attribuutti width=3 ei ole kelpaa XHTML-dokumentille, sen täytyy olla merkattu width="3".

  5. Id-attribuuttien arvot ovat pieni-iso-eroavia (lisäksi on huomattava, että jos esim. elementille A antaa tunnisteen, name-attribuutti ei riitä vaan sen ohella tai sen sijaan tulee käyttää id-attribuuttia, jolla on täsmälleen sama arvo).

  6. Elementit jaetaan tiukemmin normaaleihin ja ns. tyhjiin elementteihin. Tyhjät elementit eivät HTML-dokumenteissa kaipaa mitään päätösmerkkausta. Menettely ei kuitenkaan käy XML-dokumenteille. Myös tyhjillä elementeillä täytyy olla jonkinlainen päätösmerkkaus. Päätösmerkkaus sisällytetään elementin aloitusmerkkaukseen ennen sen päättävää > -merkkiä, esim. <br /><img scr="image.gif" /> (jos ennen etukenoviivaa (/) jätetään tyhjä väli kaikki selaimet osaavat lukea merkkauksen oikein). Siten elementin aloitusmerkkaus on samalla sen päätösmekkaus. HTML-dokumentissa esim. elementeiltä P ja LI voidaan jättää pois päätösmerkkaus vaikka päätösmerkkaukset voidaan niihin laittaa (on jopa suositeltavaa laittaa elementille P päätösmerkkaus - käytän itse tälle elementille aina päätösmerkkausta). Menettely on laitonta XHTML-dokumenteille. Myös <p />      tai <li /> merkkaukset ovat laittomia, sillä em. elementit eivät ole olemukseltaan tyhjiä elementtejä.

Alla on esimerkki hyvin yksinkertaisesta XHTML-dokumentista ([M][S][Pw]):

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>Esimerkki XHTML-dokumentista</title>
   </head>

   <body>
      <h1>Pääotsikko</h1>
      <br />
      <p>Tekstiä.</p>
      <p>Tekstiä.</p>
      <blockquote>Tekstiä lohkositaatin sisällä.</blockquote>
      <ol>
         <li>Tekstiä listan sisällä.</li>
         <li>Tekstiä listan sisällä.</li>
      </ol>
</body>
</html>

CSS-oppaan sivut ovat nykyisin XHTML 1.0 dokumentteja mallisivuja lukuun ottamatta. HTML-tiedostoja on helppo kääntää XHTML:ksi käyttämällä ilmaisen HTML-Kit-editorin HTML Tidy-toimintoa. Jos haluat käyttää samaa CSS-tiedostoa HTML, XHTML ja XML-dokumenteille, on järkevää kirjoittaa elementtien nimet aina pienillä kirjaimilla. Olen pyrkinyt tekemään esimerkkini siten, että niitä voi käyttää myös XHTML-dokumenteissa. Skriptien käyttö on kuitenkin ongelmallista, mutta olen käyttänyt niitä HTML-dokumenttien tapaan.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML[Pw].
Other sites: HTML-Kit Home Page[Pw]
.

Seuraava sivu käsittele perus menetelmiä, joilla CSS liitetään Web-sivuille.

[Alku]
 

Alaviite 1. XML-tiedostoille tarkoitetut DTD-tiedostot laaditaan pääsääntöisesti samoja periaatteita noudattaen kuin HTML-tiedostoillekin. Omat yleisentiteetit[S] (common entities - yleensä lyhenteitä) tulee ilmoittaa. On suositeltavaa käytää CDATA jaksoja sections[S] (CDATA sections) yleisentiteettien sijaan jos tarkoituksena on esittää näytöllä erityiskoodeja. Jos koodin tekijä luo omia entiteettejä, dokumentit ovat joiltakin osin vanhoille selaimille lukukelvottomia, sillä vanhat selaimet eivät tiedät mitä omat entiteetit merkitsevät.

Alaviite 2. XHTML 1.0 Strict DTD-tiedostossa on virheellinen parametrientiteetti-ilmoitus (<!ENTITY % FrameTarget "CDATA"> <!-- render in this frame -->), koska se ei vastaa elementin A attribuuttilistaa kuten se tekee HTML 4.0 loose -dokumenttityypin DTD:ssä (target %FrameTarget; #IMPLIED -- render in this frame --).

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004