XHTML-perusteita Teppo Räisänen

Esitys aiheesta: "XHTML-perusteita Teppo Räisänen"— Esityksen transkriptio:

1 XHTML-perusteita Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi

2 Johdanto XHTML = eXtensible Hypertext Markup Language Muistuttaa HTML 4.01 –versiota Tavoitteena on korvata HTML- dokumentit XHTML-muotoisilla W3C julkaisi XHTML 1.0 –version vuonna 2000

3 Johdanto XHTML:n tavoitteena on luoda HTML:ää tiukempi standardi => Laajempi selaintuki XML:ää voi pitää HTML:nä, joka on toteutettu XML-sovelluksena XHTML-selaimia on esim. erilaisissa mobiililaitteissa IE ja Netscape tukevat XHTML-sivuja

4 XHTML-versiot XHTML 1.0 Johdettu HTML 4.0 –kielestä Noudattaa XML-syntaksia Sisältää ulkoasuun liittyviä elementtejä XHTML Basic Sisältää ainoastaan keskeiset elementit Modulaarisuus Tarkoitettu etenkin mobiililaitteille

5 XHTML-versiot XHTML 1.1 Tiiviimpi XML:n noudattaminen Ulkoasun muotoilut ainoastaan tyylitiedostoilla XHTML 2 Esiteltiin vuonna 2002 Merkittäviä muutoksia aiempiin versioihin

6 Miksi XHTML? Monet verkkosivut on toteutettu ”huonolla” HTML:llä Selainohjelmat kuluttavat aikaa & koneresursseja huonon merkkauksen tulkintaan Mobiililaitteiden resursseja ei haluta tuhlata => Tarvitaan virheetöntä merkkausta

7 XHTML vs. HTML Mikään ei estä kirjoittamasta virheetöntä HTML:ääkään HTML-koodille on lukuisia validaattoreita validaattoreita Tavallisia HTML-standardista poikkeamisia ovat esim. puuttuvat kappaleiden loput suuret kirjaimet tagien merkinnässä

8 XHTML vs. HTML Tärkeimmät erot: XHTML-elementtien sisäkkäisyys ei saa horjua, esim. Tekstiä => väärin Tekstiä => oikein Dokumenttien tulee olla hyvin muodostettuja (well-formed)

9 XHTML vs. HTML Tärkeimmät erot – jatkoa: Tagit kirjoitetaan pienaakkosin Kaikki elementit tulee sulkea lopputagilla Myös tyhjät elementit tulee sulkea, esim. Rivivaihto => Väärin Rivivaihto => Oikein Huom. välilyönti kauttaviivaa ennen

10 XHTML vs. HTML Tärkeimmät erot – jatkoa: Attribuuttien nimet kirjoitetaan pienellä kirjaimella, esim. => Väärin Attribuuttien arvot ympäröidään lainausmerkein

11 XHTML vs. HTML Tärkeimmät erot – jatkoa: Attribuutteja ei saa lyhentää, esim. => Väärin => Oikein Attribuutti ‘id’ korvataan attribuutilla ‘name’, esim. Huom. välilyönti ennen /-merkkiä

12 XHTML vs. HTML Selainyhteensopivuuden vuoksi voidaan käyttää sekä id että name attribuutteja: ’lang’-attribuutilla määriteltävä kieli vaatii xml:lang-attribuutin (ks. myös):myös Suomea

13 Pakolliset XHTML-elementit XHTML-dokumenttien tulee sisältää DOCTYPE-julistus Pakollisia elementtejä ovat html head body title-tagi on kirjoitettava head-tagin sisään

14 XHTML-dokumentin perusrakenne:

15 DOCTYPE Doctype-julistus on pakollinen dokumentin alussa XHTML-dokumentin on noudatettava jotain W3C:n määrittelemää DTD:iaW3C:n määrittelemää DTD:ia Strict Transitional Frameset Yleisimmin käytetään Transitional-mallia

16 DOCTYPE DTD-mallit lyhyesti: Strict on tiukin määrittely, joka mm. estää muotoiluelementtien käytön Transitional on mahdollisimman yhteensopiva HTML-versioiden kanssa Frameset-mallia käytetään kehyksiä hyödyntävillä sivuilla

17 DOCTYPE Kun dokumentti noudattaa W3C:n määrittelyitä, sen sanotaan olevan validi (valid) Lisäksi dokumentin on oltava hyvin muodostettu (well-formed) eli noudatettava XHTML-syntaksia

18 DOCTYPE Dokumenttityypin julistuksen lisäksi DOCTYPE-elementissä esitetään DTD:n URL:

19 HTML:stä XHTML:ksi 1. DOCTYPE-julistuksen lisääminen 2. Tagit ja attribuutit pienillä kirjaimilla 3. Attribuuttien arvot lainausmerkkeihin 4. Tyhjät tagit pois, esim. => 5. Sivun validointivalidointi

20 Validointi Validointiin on olemassa useita WWW- sivuja Sivulle lähetetään URL tai tiedosto paik. koneelta Sivu antaa ilmoituksen ”This page is valid” tai näyttää ongelmakohdat sivulla