XHTML 1.0/1.1 ©Reino Aarinen, 2014
XML XHTML-dokumentti alkaa XML-versiom ää rittelyll ä : ja XHTML –dokumenttityyppim ää rittelyll ä (seuraava sivu). N ä m ä m ää rittelyt kertovat Internet-selaimille (browser, navigator, explorer), ett ä kyseess ä on standardi XML- dokumentti, mit ä standardimerkist öä dokumentissa on k ä ytetty, mill ä XHTML-versiolla dokumentti on kirjoitettu sek ä mist ä dokumenttityypin m ää rittelyt (DTD) l ö ytyv ä t.
XHTML 1.0/1.1 dokumenttityypit <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " HUOM! Jokaisella XML dokumentilla täytyy olla juurielementti, jonka sisällä kaikki muut elementit ovat. XHTML:ssä juurielementti on.
Seuraavaksi dokumentissa määritellään käytettävä (tässä oletus-) nimiavaruus, joka ilmoitetaan juurielementissä xmlns (XML name space) -attribuutilla ja sille annettavalla URL-osoitteella. Attribuutti xml:lang puolestaan ilmoittaa, mitä kieltä dokumentin tekstissä käytetään:... Juurielementin sisään kirjoitetaan dokumentin otsikko eli elementti ja sisältö eli elementti: elementin sisään kirjoitetaan koko dokumentin -otsikko, tietoa dokumentista, sekä sivulla käytettäviä tyylisivuja ja skriptejä. elementin sisään sijoitetaan varsinaiset WWW sivulle näkyviin tarkoitetut elementit (ja sisällöt). HTML-dokumentissa voi olla vain yksi ja yksi elementti. Juurielementti ja nimiavaruus
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ” Mallisivu Tässä sitten kappale jotakin tekstiä XHTML pystyy kaikkeen samaan kuin HTML, ja lisäksi siihen voi helposti upottaa muita XML- pohjaisia muotoja kuten SVG-kuvia tai MathML-kaavoja. XHTML saattaa tuntua hankalammalta kuin HTML, koska koodi pitää kirjoittaa tiukempien sääntöjen mukaan eikä virheitä sallita Mallipohja XHTML 1.0 dokumentista:
elementti elementin sisälle kirjoitettava elementti on HTML 4.01:ssä erikoinen elementti: se on ainoa pakollinen elementti! elementin sisältö tulee näkyviin selaimen yläpalkkiin. Se toimii myös hakukoneiden antamana otsikkona (linkkinä) dokumenttiin. Siksi sen on syytä olla sivua eli dokumenttia lyhyesti, mutta mahdollisimman tarkasti kuvaava teksti.
- elementin sisään sijoitetaan myös mahdolliset - elementit. Elementillä voidaan määritellä sivun tekijä, käytetty editori, hakusanoja ja luokitus sivun aihealueesta. Esim.... <meta name=”description” content=”Content määrite sisältää lyhyen kuvauksen sivun olennaisimmasta sisällöstä.” />... elementti
ja elementti elementti määrittelee yhteyden XHTML-dokumentin ja ulkoisen dokumentin välillä. Selaimissa näistä toteutettu on yleensä vain CSS tyylisivu (stylesheet): Tyylimääritykset (säännöt) voidaan kirjoittaa myös Säännöt elementtiin. Molemmat elementit voidaan sijoittaa vain dokumentin elementin sisään. Molempia voi tarvittaessa olla useampia, ja molemmat voivat sisältää useampia tyylimäärittelyitä. Jos sama asia tyylitellään kahteen kertaan, viimeisin pätee (Cascading Style Sheets, CSS).
elementti Elementti määrittelee asiakaspäässä (selaimessa) suoritettavan skriptin, yleensä JavaScript. Kieli määritellään type- tyyppiattribuuttilla type=”text/javascript” (oletus). Elementti sisältää skriptin koodin, tai osoittaa ulkoiseen skriptitiedostoon src-attribuutilla src=”skripti.js” JavaScript-koodi
xHTML elementit © Reiska 2014 html headbody
HTML 4.01 ja XHTML rungot
Elementtien sisältö Elementin sisältö voi olla: Tyhjä (esim.,,, … ) Tekstiä Toisia elementtejä Tekstiä ja toisia elementtejä (mix) Jokaisella elementillä on tasan yksi äitielementti, jonka sisällä se kokonaan on. Saman elementin sisällä olevat lapsielementit ovat sisaruksia (sibling). Elementit sijoittuvat näytölle normaalisti peräkkäin siinä järjestyksessä kuin ne tulevat lähdekoodissa vastaan. Ne asettuvat äitielementtinsä sisällä seuraavaan vapaaseen paikkaan. Jokainen elementti on joko inline- tai block-elementti.
Attribuutit Elementeillä voi olla lisätietoa attribuuteissa ( nimi=”arvo” pareja aloittavassa tagissa), jotka määrittelevät sisällölle ominaisuuksia tai parametreja. Kaikilla elementeillä on standardiattribuutit, joista tärkeimmät ovat: id, title, style ja class tapahtuma-attribuutit (näistä myöhemmin lisää) Jokaisen elementin ympärille voidaan määritellä CSS- tyylisivun avulla täyte (padding) ja rajaviiva (border). Lisäksi elementillä voi olla marginaali (margin)sisaruksiinsa.
Otsikot ja lohkotaso html head title meta link style script body h1..h6 p olol tai ulul li dl dt dd div Dokumentin otsikkotiedot. Koskevat koko dokumenttia. Ei renderoida näytölle. Dokumentin näkyvä (renderoitu) osa koostuu lohko- eli block-elementeistä ja niiden sisällä olevista lohko- ja inline elementeistä. Tässä ensin lohkotason elementtejä.
Lohkotaso jatkuu body jatkuu table caption theadthead, tbodytbody tr th, tdthtd formform method=GET|POST action=URL inputinput type=text|hidden|password|submit|reset| button|checkbox|radio|image|file textarea select option optgroup button label fieldset legend
Inline-taso Fyysiset tyylit tt,i,b,big,small,u,s,strike, font,basefont Loogiset tyylit em, strong, dfn, code, q, emstrongdfncodeq subsub, sup, samp, kdb, var, cite, abbr, acronymsupsampkdbvarciteabbracronym Muut tyylit br, span, bdo, ins, del brspaninsdel Linkit ja ankkurit a, navanav Median upotus img, embed, applet, object, iframe, map
xHTML sääntöjä © Reiska 2014
Sääntöjä Elementtien sisältö rajataan tageilla renderoitava sisältö. Jokaisella tagilla on oltava myös päättävä tagi. Tyhjät elementit merkitään tai. Elementtien on oltava aidosti sisäkkäin, eli elementin päättävän tagin on oltava saman elementin sisällä kuin aloittava tagi. Tästä seuraa dokumentin puurakenne. Tagit suositellaan kirjoitettavaksi pienillä kirjaimilla. Joka tapauksessa aloittava ja päättävä tagi on aina kirjoitettava samalla tavalla kuin aloittava tagi. Attribuutit kirjoitetaan aloittavaan tagiin toisistaan välilyönnillä erotettuna. Jokaisella attribuutilla on aina oltava arvo, ja se on kirjoitettava normaaleihin lainausmerkkeihin, attribuutti=”arvo”.
Lohkotason elementit Lohkotason (block-level) elementit muodostavat kukin oman itsenäisen lohkon tai kappaleen.Elementit erotetaan oletusarvoisesti ympäristöstään tyhjällä rivillä. HUOM! body -elementin sisällä pitäisi aina käyttää vain lohkotason elementtejä. Tyypillisiä esimerkkejä lohkotason elementeistä ovat otsikot ( h1..h6 ), p - elementti, luettelot ( ol, ul, dl ), taulukot ( table ), lomakkeet ( form ) … Lohkotason elementtien sisällä voi olla toisia lohkotason elementtejä (ei kuitenkaan p eikä dt elementtien sisällä). div -elementti kokoaa ja rajaa useamman elementin kokonaisuuden yhdeksi yleensä nimetyksi ( id = ”nimi” ) block-elementiksi
Tekstitason elementit Tekstitason (inline-level) elementit voivat sijaita ainoastaan lohkotason elementtien sisällä. Tyypillisiä esimerkkejä tekstitason eli inline- elementeistä on input -elementti, jonka täytyy sijaita lohkotason elementin form sisällä, tai esimerkiksi strong elementti p tai h1 jne. elementin sisällä. span -elementin avulla voi rajata useamman inline- elementin kokonaisuuden yhdeksi, yleensä nimetyksi ( id=”nimi” name=”nimi” ), inline-elementiksi.
Korvattavat elementit Korvattaviksi (replaced) elementeiksi kutsutaan elementtejä, jolla merkitään HTML dokumenttiin esimerkiksi ulkoisen (upotettavan) tiedoston paikka. Tyypillinen esimerkki korvattavaksi tarkoitetusta elementistä on img -elementti, jonka paikalla selain näyttää elementin src -attribuutilla määritellyn kuvan. Muita tällaisia elementtejä ovat audio, video, object, applet ja embed sekä iframe. Myös lomakkeiden nappulat ( button, radio - ja checkbox, valikot ja menut jne.) ovat periaatteessa tällaisia.
Attribuutit Elementtien ominaisuuksia asetetaan, ohjataan tai täsmennetään attribuuteilla. Attribuutit sijoitetaan elementin aloitustagiin. Attribuutin arvon pitää aina olla ”oikeissa” lainausmerkeissä ( attrNimi = ”attrArvo” ). Lähes kaikilla elementeillä on seuraavat attribuutit:kaikilla elementeillä on seuraavat attribuutit Ydinattribuutit (core) Kielitukiattribuutit (i18n, internationalization) Tapahtuma-attribuutit (events) Elementeillä on lisäksi omia spesifisiä attribuuttejaan, kuten width, height, align, src, href, border …, joista jotkin voivat olla jopa pakollisia.
Yhteiset attribuutit Ydin- eli core-attribuutit id, elementin yksikäsitteinen tunniste title, elementin otsikko class, välilyönnillä erotettu lista tyyliluokista, johon elementin rajaama alue kuuluu style, elementin yksityinen tyylimäärittely Kielitukiattribuutit (i18n) lang, kielikoodi (IANA) dir, kirjoitussuunta (rtl tai ltr)
Tapahtuma-attribuutit (events) onbluronkeypress onchangeonkeydown onselectonkeyup onclick ondblclick onerror onload, onunload onmousemoveonreset, onsubmit onmouseover onmouseup onmousedown onresize onscroll
XHTML Strict yhteenveto © Reiska 2014
XHTML Strict mallipohja Seuraavilla sivuilla on luettelo viimeisimmän XHTML 1.0 Strict /XHTML 1.1 version elementeistä:
XHTML 1.0 Strict elementit Text p h1, h2, h3, h4, h5, h6 strong em abbr address bdo blockquote cite q code ins del dfn kbd pre samp var br Links a base Structure html head body div span Meta Information DOCTYPE title meta link style
Images and Objects img map area object param Lists ul ol li dl dt dd Tables table tr td th tbody thead tfoot caption col colgroup Forms form input textarea select option optgroup button label fieldset legend Scripting script noscript Presentational b, i, tt, sub, sup, big, small, hr