Menthal27

XHTML 1

Tuntuuko XHTML-elementtejä olevan liikaa? Etkö löydä esimääsi peruselementtiä mistään? Katso lista tärkeimmistä XHTML-elementeistä.

Tämän sivun sisällys

Mitä XHTML on?

Tiivistetty selitys

Lyhyesti sanottuna: XHTML on kieli, jolla tehdään Internet-sivuja.

XHTML kertoo selaimelle, mitä sivulla on. Sivulla olevat erityyppiset sisällöt merkitään tagien avulla. Esimerkiksi pääotsikko merkitään alkavaksi kirjoittamalla <h1> ja loppuvaksi merkinnällä </h1>. Otsikon teksti tulee näiden merkintöjen väliin:

<h1>Tämä on sivun pääotsikko</h1>

Samalla tavalla esimerkiksi tekstikappale merkitään merkintöjen <p> ja </p> väliin.

Näiden merkintöjen eli tagien avulla selain erottaa, mikä osa sivusta on leipätekstiä ja mikä otsikkoa, mitä tulee korostaa, missä kulkee rivinvaihto tai viiva ja niin edelleen.

XHTML:llä siis määritetään sivun rakenne. Otsikkotagien sisällä on otsikko, tekstikappaletagin sisällä tekstikappale, listatagin sisällä lista ja niin edelleen.

XHTML:n avulla ei kuitenkaan määritellä sivun ulkoasua. Värit, taustakuvat, reunukset ja kaikki muu ulkoasuun liittyvä muotoilu suoritetaan CSS:llä.

Faktaa

XHTML:ää on usein pidetty HTML-kielen seuraajana. Tämän vuoksi HTML:ää ei ole enää suositeltu käytettäväksi: XHTML 1 on HTML:n uusinta eli 4. versiota uudempi. Monet HTML:n elementit ovat lisäksi nykyään epäsuositeltavia, sillä ne vaikuttavat sivun ulkoasuun. Nykyään sivun ulkoasun muotoilu suositellaan tehtäväksi CSS:llä.

HTML:ää käytetään yhä melko paljon lähinnä siksi, että se on yhteensopiva myös vanhojen selainten kanssa. Lisäksi Internet Explorer, yksi suosituimmista Internet-selaimista, ei tue XHTML:ää kunnolla. Tämä on yleensä kierretty ilmoittamalla XHTML-sivujen mime-tyypiksi text/html. Tämä onnistuu kuitenkin vain XHTML:n versiossa 1.0.

Sittemmin HTML:stä on alettu kehittää 5. versiota. Suurin osa uusista Internet-sivuista käyttää kuitenkin nykyään XHTML:ää.

Mitä eroa XHTML:llä ja HTML:llä on?

XHTML:llä ja HTML:llä on paljon eroja, vaikka perusrakenne ja suuri osa koodista onkin samaa. Erot on kuitenkin hyvä tietää, ettei käytä näitä kahta kieltä sekaisin.

  • XHTML:ssä kaikki tagit tulee päättää. Kun HTML:n löyhemmissä versioissa riittää, että tagin aloittaa, XHTML:ssä se on myös pääteltävä. Mikäli tagilla ei ole luontevaa päättötagia, kuten rivinvaihdon aiheuttavalla br-tagilla, se päätellään itsensä sisällä. 
    HTML:
<p>Tässä on tekstikappale.
<br>

XHTML:
<p>Tässä on tekstikappale.</p>
<br />
  • XHTML:ssä kaikki tagit kirjoitetaan pienellä. Kun HTML:ssä kirjainten koolla ei ole väliä, XHTML:ssä tagia ei saa ikinä kirjoittaa edes osittain isoilla kirjaimilla. 
    HTML:
<BLOCKQUOTE>Lainaus.</BlockQuote>

XHTML:
<blockquote>Lainaus.</blockquote>
  • XHTML:ssä attribuutin arvon ympärillä on oltava lainausmerkit. HTML:ssä tämä ei ole pakollista, joskin suositeltavaa. 
    HTML:
<p class=mansikka>

XHTML:
<p class="mansikka">
  • XHTML ei salli lyhennettyjä attribuutteja. Attribuutilla on siis aina oltava arvo. Lyhennettyjä attribuutteja ei tosin HTML:ssäkään ole kovin montaa. 
    HTML:
<select size="3" multiple>

XHTML:
<select size="3" multiple="multiple">
  • XHTML ei suvaitse kehyksiä (framet). HTML:ssä suositut kehykset ovat sallittuja ainoastaan XHTML 1.0:n Transitional-muunnoksessa (joka on melko löysä kieliopin suhteen), mutta niitä ei suositella käytettäväksi silloinkaan.
    Kehysten kiellosta johtuen myös linkkien target-attribuutti on kielletty muualla kuin XHTML 1.0:n Transitional-muunnoksessa. Sen avulla linkkejä saadaan avautumaan kehyksiin (ja joskus väärinkäytettynä uusiin ikkunoihin).
  • XHTML:llä ei voi muotoilla ulkoasua. HTML:llä pystyy muuttamaan monia ulkoasuun vaikuttavia asioita, kuten tekstin ja taustan väriä. Koska XHTML kuvaa sivujen rakennetta, ei ulkoasua, kaikki värit ja taustat määritetään nykyisin CSS:llä. Näin rakenne ja ulkoasu pidetään erillään toisistaan, ja sivujen koodi on selkeämpää ja tarkoituksenmukaisempaa.
  • XHTML on tiukempi. Monet HTML:ssä sallitut elementit eivät kuulu XHTML:ään, koska ne eivät kuvaa rakennetta. Myös XHTML:n kielioppi on paljon tiukempi kuin HTML:n. Kiellettyjä HTML-tageja ovat esimerkiksi <font>, attribuuteista mainittakoon bgcolor, color, border ja align.
Miten CSS liittyy XHTML:ään ja HTML:ään?

Kun XHTML:llä määritetään sivun rakenne, CSS:llä muotoillaan ulkoasu. Esimerkiksi tekstikappaleille saa CSS:n avulla määritettyä vaikkapa reunuksia, taustavärejä, marginaaleja, fontin kokoja ja niin edelleen. Koko sivuston ulkoasu määritetään siis käytännössä CSS:n avulla: XHTML:llä ei voi määrittää mitään värejä tai muotoiluja.

Selityksiä yleisille termeille

Tagi

Englanniksi tag, käytetään joskus suomeksi myös nimitystä tägi. Tagi on kuitenkin yleisempi.

Tagit kertovat selaimelle, mitä niiden sisällä oleva teksti / sisältö on. Näin selain osaa näyttää sivun oikein.

Tagit ovat hakasulkujen sisällä olevia sanoja (joista suurin osa on suoraa englantia tai englannin lyhenteitä). Aloitustagi on tyyppiä <tagi> ja päättötagi tyyppiä </tagi>, ja tagien sisältö tulee näiden kahden hakasulkuvirityksen väliin.

Esimerkkejä (vihreällä merkityt ovat tageja):

<h1>H1 on otsikkotagi.</h1>
<p>P on kappalejakotagi.</p>
<textarea>Textarea-tagi aiheuttaa tekstikentän.</textarea>

On myös tageja, joilla ei ole varsinaista päättötagia, kuten rivinvaihto br ja kuva img. Tällöin tagi päätellään itsensä sisällä lisäämällä välilyönti ja /-viiva ennen viimeistä hakasulkua:

<br />

Elementti

Käytetään myös nimitystä XHTML-elementti.

Elementti tarkoittaa yhden tagin ja sen päättötagin muodostamaa kokonaisuutta. Elementin sisältö tarkoittaa tagien välissä olevaa sisältöä.

Alla on esimerkki pre-elementistä.

<pre>Elementin sisältö.</pre>

Sisäkkäiset elementit / tagit

Tagit ja elementit voivat olla toistensa sisällä. Esimerkiksi alla olevassa esimerkissä p-elementti (ja siis myös p-tagit) ovat div-elementin (ja div-tagien) sisällä.

<div><p>Kappale.</p></div>

Attribuutti

Attribuutilla tarkoitetaan aloitustagin osaa, jossa tarkennetaan tagin merkitystä, sisältöä ja ominaisuuksia. Attribuutilla voidaan esimerkiksi ilmoittaa lainauksen lähde, sijoittaa elementti johonkin CSS-luokkaan, antaa sille yksilöllinen tunniste (id) tai vaikkapa ilmoittaa linkin tai kuvan osoite.

Itse attribuutti erotetaan tagin aloituksesta välilyönnillä. Lainausmerkkien sisällä olevaa attribuutin osaa kutsutaan attribuutin arvoksi.

Teoriassa siis näin:

<tagi attribuutti="attribuutin arvo">

Toimivia esimerkkejä:

<p class="mansikka">Hei!</p>
<img src="http://www.mansikka.man/yksi.jpg" />
<blockquote cite="Matti Meikäläinen">...</blockquote>

Yhdellä tagilla voi olla myös useampia attribuutteja, mutta ei samaa attribuuttia kahta kertaa:

<p class="mansikka" id="huuhaa" alt="Heipä hei!">Hei!</p>

Class-attribuutilla voi lisäksi olla useampia arvoja (elementti voi kuulua useaan luokkaan):

<p class="mansikka huuhaa">Hei!</p>

Huomaathan, että yksi id voi esiintyä yhdellä sivulla vain kerran, sillä kyseessä on yksilöllinen tunniste, joka yksilöi elementin. Et siis voi laittaa samalle sivulle kahta elementtiä, joissa molemmissa on attribuutti id="mansikka". Sen sijaan voit käyttää toisessa attribuuttia id="mansikka" ja toisessa attribuuttia id="mansikka2″.

Mikäli haluat liittää esimerkiksi samat CSS-muotoilut useampaan elementtiin, voit liittää ne samaan luokkaan. Class-attribuutilla saa olla vaikka tuhat samaa arvoa sivulla, se vain liittää elementit samaan luokkaan keskenään eikä yksilöi mitään.

Dokumenttityyppi

Dokumenttityyppi on www-sivun koodissa ensimmäiselle riville sijoitettu tekstinpätkä, joka kertoo selaimelle, mitä XHTML:n versiota ja muunnosta sivu käyttää. Lisätietoa sivulla sivun perusrakenne.

Selain

Selain (engl. browser) tarkoittaa ohjelmaa, jolla selataan Internet-sivuja. Selaimet tulkitsevat HTML- ja CSS-koodeja hieman eri tavoin, joten kotisivut näkyvät niillä hieman erilaisina. Etenkin Internet Explorerilla on tapana tulkita koodia päin puskia. Tämän vuoksi omien kotisivujensa toimivuus kannattaa tarkistaa ainakin yleisimmillä selaimilla.

Alla on lueteltu yleisimpiä selaimia.

  • Microsoft Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari

Lähdekoodi

Lähdekoodi (englanniksi source) tarkoittaa kotisivujen sitä koodin osaa, jonka vierailijat voivat nähdä selaimensa avulla. Sivun lähdekoodin saa näkyviin ottamalla selaimen ylävalikosta "Näytä" > "Sivun lähdekoodi" (Firefox) tai "Näytä" > "Lähdekoodi" (Internet Explorer, Opera).

Käytännössä kaikki sivuilla oleva CSS ja XHTML/HTML näkyy lähdekoodissa, samoin javascript. Php, perl ja muut palvelimella suoritettavat ohjelmointikielet siellä eivät sen sijaan näy.

Selvitys: missä järjestyksessä tagit tulee päättää?

XHTML:ssä tageja ei voi päätellä mielivaltaisesti. Ne tulee päätellä päinvastaisessa järjestyksessä kuin ne on aloitettu:

Oikein:

<div><span>Hei.</span></div>

Väärin:

<div><span>Hei.</div></span>

Toisin sanoen eri tagien tulee alkaa ja päättyä siististi toistensa sisällä:

<body>
<div>
<span>
Hei!
</span>
</div>
</body>
  

Menthal27 © Sonja Valkeinen 2002-2008. Shadows. WP. Takaisin sivun alkuun.