XHTML aloitus XHTML-dokumentin rakenne, metatieto, kommentit, tekstit Mirja Jaakkola Sisällys 3. Taustaa 4. Selain palvelin 5. Elementin rakenne 6. Attribuutti 7. XHTML-dokumentin rakenne 8. XHTML:n DOCTYPE-määrittely 9. html-elementti 10.head-elementti 11.meta-elementti 12.title-elementti il l i 13.link- ja style-elementti 14.body-elementti 15.Lohko- ja inline- eli sisäelementti 16.h1, h2, h3, h4, h5, h6 -otsikot 17.p-elementti 18. address, blockquote, pre 19.div ja span 20.Loogiset ja fyysiset tekstielementit 21.hr ja br 22.Kommentit, entiteetit ja lähteet 2 1
Taustaa Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. word-dokumentti tieto halutaan esittää samalla tavoin kuin se on tallennettu rakenne lineaarinen sovellus- ja laiteriippuvainen Rakenteellinen dokumentti: sisältö, rakenne ja ulkoasu erillään, esim. xhtml-dokumentti sama sisältö voidaan esittää erilaisissa esitysmuodoissa, esim. selain, mobiili, digitv, paperi rakenne hierarkinen sovellus- ja laiteriippumaton 3 Selain - palvelin Selain -Lähettää pyynnön palvelimelle -Vastaanottaa xhtmldokumentin palvelimelta Palvelin -Lähettää pyynnöstä xhtml- dokumentin selaimelle -Voi pitää yllä ns. lokitiedostoja -Muodostaa tarvittaessa xhtmldokumentin scripti-kielen avulla esim. PHP 4 2
Elementin rakenne Elementti alkaa alkutunnisteella eli tagilla, sitten tulee elementin sisältö ja lopuksi lopputunniste Elementin määrittely kertoo millainen elementin sisältö voi olla Alku- ja lopputunniste kirjoitetaan xhtml:ssä aina pienillä kirjaimilla xhtml:ssä elementillä on aina oltava lopputunniste Elementti voi olla myös tyhjä ts. elementillä ei ole sisältöä. Tällöin elementin lopputunnistemerkki voidaan liittää alkutunnisteeseen, esim. <br /> elementti <tunniste>sisältö</tunniste> alkutagi sisältö lopputagi 5 Attribuutti Elementin määrite eli tarkennin Kirjoitetaan aina elementin alkutunnisteeseen Nimi-arvo-pari W3C:n suositus kertoo mitä attribuuttia eri elementteihin voi liittää Attribuutit kirjoitetaan XHTML:ssä aina pienellä Attribuutin arvo laitetaan XHTML:ssä aina lainausmerkkien sisälle Attribuutille pitää XHTML:ssä antaa aina jokin arvo Yleisiä attribuutteja ovat class, id, style, lang, xml:lang, title ja dir. Voit liittää ne lähes kaikille elementeille elementti <tunniste nimi="arvo">sisältö</tunniste> attribuutti sisältö lopputagi alkutagi 6 3
XHTML dokumentin rakenne <!DOCTYPE juurielementin nimi PUBLIC "dokumentin tyyppi" dokumenttityypin osoite> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=koodaus" /> <title> sivun otsikko </title> muita mahdollisia head-osan elementtejä </head> <body> sivun sisältö body-osan osan elementteinä </body> </html> 7 XHTML:n DOCTYPE-määrittely <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Strict tiukin, ei voi käyttää ei-suositeltavia elementtejä ja attribuutteja eikä kehyksiä <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Transiotional siirtymävaihe, sallii ei suositeltavien elementtien ja attributtien käytön <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> Frameset sallii ei suositeltavien elementtien ja attribuuttien sekä kehysten käytön <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Strict ainoana käytössä, ulkoasu tehdään css:llä, ei salli ei-suositeltavien elementtien ja attribuuttien eikä kehysten käyttöä. 8 4
html-elementti Toimii xhtml-dokumentin juurielementtinä ts. kaikki muut dokumentin elementit tulevat juurielementin sisälle Pakollinen kaikissa xhtml-dokumenteissa attribuutti id xmlns xml:lang selite tunniste kertoo nimiavaruuden, pakollinen määrite kertoo dokumentin sisällön kielen Alielementteinä head ja body, jotka ovat pakollisia xhtml-dokumentissä head html body <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html> 9 head-elementti Muodostaa xhtml-dokumentin otsakeosan Sisältöä ei yleensä näytetä selain-ikkunassa Alielementit: link meta object script style title linkki toiseen dokumenttiin, esim. CSS metatietoa dokumentista määrittelee upotettavan objectin (ei upota) selaimella suoritettavaa scriptiä, esim. javascript dokumentin sisäinen tyyliohje dokumentin ulkoinen otsikko, pakollinen 10 5
meta-elementti Kertoo tietoa xhtml-dokumentista meta-elemettejä voi olla useita yhdessä dokumentissa meta-elementissä pitää olla content-attribuutti (pakollinen), joka kertoo metatiedon sisällön Lisäksi on name- tai http-equiv -attribuutti name-attribuutin arvoja: author (tekijä), keywords (avainsanat), description (kuvaus), copyright, owner (omistaja), generator (millä sivu on tehty) jne. http-equiv attribuutilla voidaan ohjata selaimen toimintaa meta-tietoa, joka kertoo käytettävän merkistön, suositellaan liitettäväksi jokaiseen xhtml-dokumenttiin: <meta http-equiv= equiv="content-type Type" content="text/html; text/html; charset=iso-8859-15 15" /> Muita meta-elementin käyttöesimerkkejä: <meta name="author" content="mirja" /> <meta name="description" content="xhtml-luento 2.4."/> <meta name="keywords" content="xhtml-dokumentin rakenne, ulkoinen ja sisäinen tyylitiedosto, xhtml, css" /> 11 title-elementti Pakollinen Lisää sivua kuvaavan otsikon selainikkunan yläreunaan ja näkyy myös hakukoneiden hakutuloksissa Ohjeena max 64 merkkiä, koska selain voi katkaista pidemmän otsikon <title>helia Tietotekniikan koulutus (in Tietotekniikan koulutus)</title> 12 6
link- ja style-elementti link-elementti: Voidaan liittää xhtml-dokumenttiin ulkopuolinen tiedosto, esim. tyyliohje css-tiedostossa, jolloinuseampixhtml-dokumentti voi käyttää samaa tyyliohjetta. <link rel="stylesheet" type="text/css" href="tyyli.css" /> Style-elementti: Lisätään dokumentin sisäinen tyyliohje Ohittaa ulkoisessa css-tiedostossa tehdyt määritykset attribuutti media type xml:space selite Tyylin esitysmedia(t) Tyyliohjeen kieli, pakollinen Välilyöntien merkitsevyys <style type="text/css"> body {font-family:verdana,sans-serif; color: navy;} h1 {color:red;} </style> 13 body-elementti Selaimessa näkyvän xhtml-dokumentin sisältö Alla olevien attribuuttien lisäksi voidaan body-elementtiin liittää yleisiä attribuutteja: class, id, style, xml:lang, title, dir attribuutti selite onload Sivua ladattaessa suoritettava scripti onunload Sivulta poistuttaessa suoritettava scripti body-elementin alielementtinä voi olla lohkoelementtejä: Tekstikappaleet: address, blockquote, p ja pre Otsikot h1,h2,h3,h4,h5 ja h6 Lista: dl, ol ja ul Lomake: form, fieldset Ryhmittely: div Taulukko: table Väliviiva: hr Lisäys / poisto merkkaus: ins, del Scriptin lisäys: script 14 7
Lohko- ja sisä- eli inline-elementit Lohkoelementit Dokumentti jaetaan lohkoelementeillä suurempiin osiin Lohkoelementit voivat sisältää lohkoelementtejä ja/tai sisä- eli inlineelementtejä (riippuu elementistä) Lohkoelementit alkavat aina uudelta riviltä ja päättyvät rivinvaihtoon Sisä- eli inline-elementit Jakaa sisällön pienempiin osiin, esim. sanaan tai vaikka kirjaimeen Alielementteinä vain sisä- eli inline-elementtejä Yleensä ei aiheuta rivinvaihtoa Validaattori http://validator.w3.org/ tarkistaa koodin oikeellisuuden ja huomauttaa virheistä. W3C:n suosituksissa on elementtien esittelyn yhteydessä kerrottu kyseisen elementin mahdolliset alielementit ja attribuutit esim. http://www.w3.org/tr/xhtml1/dtds.html#a_dtd_xhtml-1.0-strict. 15 h1, h2, h3, h4, h5, h6 -otsikot Lohkotason elementtejä Muodostaa otsikon, jonka suuruusluokka määräytyy numeron mukaan (h1 suurin) Esim. <h1>rakenteiset dokumentit</h1> <h3>rakenne, sisältö ja ulkoasu erillään</h3> <h6>esimerkkinä XHTML-dokumentti</h6> 16 8
p-elementti Muodostaa tekstissä kappaleen p-elementin sisällä ei saa olla muita lohkoelementtejä (esim. otsikko, lista, taulukko ) p-elementin sisällä saa olla sisä- eli inline-elementtejä (esim. kuva, linkki, rivinvaihto ) <p>xhtml-koodin kirjoittamiseen voidaan käyttää mitä tahansa tekstieditoria. <br/> XHTML-tiedoston loppupäätteeksi tulee.html tai.htm. Voidaan käyttää myös loppupäätettä.xml, jolloin tiedosto näkyy xml-muotoisena selainikkunassa.</p> <p>jotkut WYSIWYG-editorit osaavat tehdä xhtml-koodia jos määrität xhtml-tiedoston alussa haluamasi DOCTYPE-määrittelyn </p> 17 address, blockquote, pre address, blockquote ja pre ovat lohkoelementtejä address-elementillä lisätään xhtml-dokumentin tekijän tiedot sivulle näkyviin blockquote-elementtiä käytetään lainauksen osoittamiseen. Lainauksen kohde ilmoitetaan cite-attribuutilla pre-elementti tekee valmiiksi muotoillun tekstin ts. jättää kaikki tyhjät merkit ja rivinvaihdot paikoilleen. Fontti on tasalevyinen (monospace) <pre> XHTML The Extensible HyperText Markup Language The E x tensible H yper T ext M arkup L anguage </pre> XHTML 1.0, XHTML 1.1: recommendations XHTML 2.0: working draft 18 9
div, span div: lohkoelementti, jonka sisällä voi olla eri elementtejä span: sisä- eli inline-elementti, joka ei siis aiheuta rivinvaihtoa. Span vastaa tekstitasolla div-elementtiä. <h1>värit</h1> <div style="margin-left:20%"><h3>web-turvalliset värit</h3> <p>web-turvallisia värejä on 216 ja ne muodostetaan heksadesimaaleina, jotka sisältävät vain seuraavia perusvärien arvoja: 00, 33, 66, 99, CC, FF, esim. #3366FF. </p> </div> <p>sisä- eli <span style="color:red">inline</span>-elementti voi sisältää vain inline-elementtejä.</p> 19 Loogiset ja fyysiset tekstielementit Tekstisisällön loogista merkitystä voidaan ilmaista seuraavilla inlineelementeillä: abbr, acronym: tekstisisältö on lyhenne em, strong: painottaa tekstisisältöä cite: tekstisisältö on teoksen nimi tms., viittaa lähdeteokseen code, kbd, samp, var: kuvaavat tietokoneen käyttöön liittyvää tekstisisältöä dfn: tekstisisältö on määriteltävä termi Tekstin fyysistä merkkausta eli ulkoasun muutosta voidaan tehdä seuraavilla inline-elementeillä b: lihavointi big: suurempi fontti i: kursivointi small: pienempi fontti 20 10
hr ja br hr: lohkoelementti lisää vaakasuoran väliviivan tyhjä elementti <hr /> br: inline-elementti tekee pakollisen rivinvaihdon tyhjä elementti <br /> Esim. <p> Nimi: Mikko Mallikas <br /> Osoite: Majavakatu 3, Oulu </p> Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu 21 Kommentit, entiteetit ja lähteet <!-- tämä on xhtml-koodin kommentti --> Kommentoi xhtml-dokumenttisi hyvin Kommentteja ei voi asettaa elementin tunnisteen sisälle Kommentit eivät näy www-sivulla Seuraavat erikoismerkit täytyy xhtml-dokumentissa korvata entiteetillä: < < > > & & " " Ylim. välilyönti Lähdemateriaalina on toiminut http://www.w3.org 22 11