DrasaWeb

Yleistä elementeistä

Elementti tarkoittaa sivulla olevaa tekstinpätkää, kuvaa, linkkiä, otsikkoa jne. Koska xhtml on kuvauskieli, siinä kuvataan elementtejä ja niiden rakennetta kuvataan tageilla. Esim ankkurielementtiä, johon kuuluvat mm. linkit, kuvataan alkutagilla <a> ja lopputagilla </a>. (sekä tagien välisellä tekstillä ja tagien attribuuteilla) Elementin sisältö tulee näiden kahden tagin väliin. On olemassa myös ns. tyhjiä tageja, joissa ei ole sisältöä. (esim. <br />, rivinvaihto) näissä tageissa ei ole lopputagia, vaan tagin loppuminen merkitään <br />.

Xhtml:ssä elementtejen ominaisuudet määritellään aloitustagiin sijoitettavilla attribuuteilla. Esim. <a href="moikka.html"> a-elementin href-attribuutti tarkoittaa linkin kohdetta. Tätä a-elementtiä klikatessa siis siirrytään href-attribuutin mukaisesti moikka.html-sivulle.

Tageihin liittyvät säännöt

Näissä on eroja verrattuna html 4:än:

Tagien täytyy aina olla kirjoitettuna pienellä. Esim <BODY> tai <Body> ei kelpaa. Pitää olla <body>
Tageilla täytyy aina olla lopputagit. Esim <h1>Otsikko 1 ei kelpaa. Pitää olla <h1>Otsikko 1</h1>
Jos tagi on ns. tyhjä, eli sillä ei kuulukkaan olla lopputageja, (esim. <br> ja <img>) tagin loppuminen ilmaistaan tagin lopussa olevalla lopetusviivalla. Esim. <br /> ja <img /> lopetusviiva on siis sama kuin lopetustagissa, eli "/"
Tagin attribuuttien (siis esim. <a href="moikka.html">) ympärillä pitää aina olla lainausmerkit. (") Esim <td rowspan=2> ei kelpaa, pitää olla <td rowspan="2">
Xhtml:ssä ei ole olemassa ulkoasuun ja muotoiluun liittyviä elementtejä ja atribuutteja. Esim <font>-elementtiä ei saa käyttää. <body bgcolor="#99ccff"> on myös kielletty tuon bgcolorin ansiosta.

Xhtml-dokumentin rakenne

Xhtml-dokumenttin tulee aina sisältää tietyt rakenteet ja elementit. Xhtml-dokumentti alkaa xml-määrittelyllä, joka kertoo xhtml-dokumentin olevan xml-pohjainen. Seuraavaksi tulee doctype-tagi, joka kertoo että dokumentti on xhtml:ää ja mitä versiota siitä. Muistathan, että xml-määrittely ja doctype-tagi ovat erikoistapauksia, niitä ei suljeta. Olen nyttemmin siirtynyt käyttämään xhtml 1.1:n sijasta xhtml 1.0 strictiä, joka on lähes samanlaista syntaksiltaan, mutta jota ei tarvitse tarjota application/xhtml+xml -mime-tyypillä. Xhtml 1.0:an voi tarjota text/html -tyypillä, jolloin ei tarvitse muuttaa palvelimen asetuksia tai värkätä ylimääräistä php-koodia. jos et tiedä mitä mime-tyypi tarkoittaa, käytä xhtml 1.0:aa.

Xml-esittely


<?xml version="1.0" encoding="ISO-8859-1"?>

Xhtml 1.0 Strict doctype-tagi:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Sitten tulee <html>-tagi, joka sisältää xmlns-attribuutti, joka kertoo myös xhtml-dokumentin nimiavaruuden:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">

Seuraavana tulee head-elementti, minne tulee pakollinen title-elementti, joka sisältää dokumentin nimen. head-elementin sisällä voi olla myös muita ei-pakollisia elementtejä, kuten link tai meta.


<head>

   <title>Sivun nimi</title>

</head>

Tämän jälkeen tulee body-elementti, joka sisältää sivun näkyvän sisällön. Sivun loppuun tulee vielä body ja html-elementtien lopetustagit.


   <body>



      <p>Tässä on esimerkkisisältöä. Huom. bodyssa on pakko olla jotain sisältöä.

      (ei välttämättä kuitenkaan p-elementtiä, niinkuin tässä)</p>



   </body>

</html>

Hyödyllisiä elementtejä

Esitän tässä muutamia hyödyllisiä elementtejä. Koska olen laiskimus, selostan tässä vain pakolliset ja erittäin usein käytetyt attribuutit. Muista että pakollisia ei saa jättää pois.

Tekstielementti p: <p>Esimerkkitekstiä</p> p-elementti sisältää yhden tekstikappaleen. p-elementti on tarkoitettu leipätekstille, joten sitä ei pitäisi käyttää otsikkoihin ym. Käytä esim navigointivalikoihin diviä.
Kuvaelementti img: <img src="kuva.gif" alt="Esimerkkikuva" /> Pakollinen src-attribuutti ilmoittaa kuvan lähteen. (tiedostonnimi) Pakollinen alt-attribuutti ilmaisee kuvan "selityksen", joka näytetään mm. selaimilla, jotka eivät tue kuvia tai joista ne ovat pois päältä.
Ankkurielementti a: <a href="moikka.html">Moikka</a> a-elementin useimmin käytetty ominaisuus on linkki. href-attribuutti ilmaisee linkin kohteen.
Laatikkoelementti div: <div>Esimerkkitekstiä ja -koodia</div> div-elementtiä käytetään usein tekstilaatikoiden tekemiseen, joita voi sitten css:llä muotoilla.
Rivinvaihtoelementti br: <br /> br-rivinvaihtoa ei pidä käyttää sivun muotoiluun. Siihen voi käyttää css:ää.
Otsikkoelementit h1, h2, ... h6: <h1>Otsikko 1</h1> Otsikkoelementtejä käytetään tietysti otsikoissa. h1 on suurin ja h6 pienin. Älä ikinä käytä otsikoissa p-elementtiä.
Linkkielementti link: <link rel="stylesheet" type="text/css" href="tyyli.css /"> Linkkielementillä voit mm. liittää css-tyylitiedoston sivuillesi. Katso esimerkki. Linkkielementti pitää sijoittaa head-elementtiin.
Listaelementit ul ja li: <ul><li>Juttu 1</li><li>Juttu 2</li><li>Juttu 3</li></ul> ul-elementti muodostaa listat ja li-elementti muodostaa yhden "kohdan" listassa. ul-elementtiä ei saa sijoittaa tekstielementtien sisälle.

Xhtml-opas

Yleistä elementeistä

Tageihin liittyvät säännöt

Xhtml-dokumentin rakenne

Hyödyllisiä elementtejä

Xhtml-linkit