XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML–dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style.

Esitys aiheesta: "XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML–dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style."— Esityksen transkriptio:

1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML–dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23 h1,h2…h6 s.24 p s.25 address, blockquote, pre s.26 hr s.27 div s.28 span s.29 br s.30 Loogiset tekstielementit s.31 Fyysiset tekstielementit s.32 Kommentit 1

2 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 Rakenteinen 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 2

3 Selain - palvelin Selain -Lähettää pyynnön palvelimelle -Vastaanottaa xhtml- dokumentin palvelimelta Palvelin -Lähettää pyynnöstä xhtml- dokumentin selaimelle -Voi pitää yllä ns. lokitiedostoja -Muodostaa tarvittaessa xhtml- dokumentin esim. PHP- scriptikielen avulla 3

4 Elementin rakenne elementin sisältö 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. 4

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 5

6 Esimerkkejä elementti Sisältö attribuutti sisältö lopputagi alkutagi Pääsivu Elementti, jolla attribuutti ja sisältö Elementti, jolla on kaksi attribuuttia ja jolla ei ole sisältöä (tyhjä) 6

7 XHTML–dokumentin rakenne sivun otsikko muita mahdollisia head-osan elementtejä sivun sisältö body-osan elementteinä 7

8 DOCTYPEt XHTML 1.0:ssa Strict – tiukin, ei voi käyttää ei-suositeltavia elementtejä ja attribuutteja eikä kehyksiä Transiotional – siirtymävaihe, sallii ei suositeltavien elementtien ja attributtien käytön Frameset – sallii ei suositeltavien elementtien ja attribuuttien sekä kehysten käytön 8

9 DOCTYPE XHTML 1.1:ssä Strict ainoana käytössä, ulkoasu tehdään css:llä, ei salli ei-suositeltavien elementtien ja attribuuttien eikä kehysten käyttöä. 9

10 Esimerkki sivun otsikko muita mahdollisia head-osan elementtejä sivun sisältö body-osan elementteinä 10

11 html-elementti Toimii xhtml-dokumentin juurielementtinä ts. kaikki muut dokumentin elementit tulevat juurielementin sisälle Pakollinen kaikissa xhtml-dokumenteissa attribuuttiseliteasema idtunnistestrict xmlnskertoo nimiavaruuden, pakollinen määritestrict xml:langkertoo dokumentin sisällön kielenstrict 11

12 html-elementti Alielementteinä head ja body, jotka ovat pakollisia xhtml-dokumentissä html headbody head-osan elementtejä sivun sisältö body-osan elementteinä 12

13 head-elementti Muodostaa xhtml-dokumentin otsakeosan Sisältöä ei yleensä näytetä selain-ikkunassa Alielementteinä : linklinkki toiseen dokumenttiin, esim. CSS metametatietoa dokumentista objectmäärittelee upotettavan objectin (ei upota) scriptselaimella suoritettavaa scriptiä, esim. javascript styledokumentin sisäinen tyyliohje titledokumentin ulkoinen otsikko, pakollinen 13

14 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 14

15 meta-elementti meta-tietoa, joka kertoo käytettävän merkistön, suositellaan liitettäväksi jokaiseen xhtml-dokumenttiin: Muita meta-elementin käyttöesimerkkejä: 15

16 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 esim. Helia – Tietotekniikan koulutus (in tietotekniikan koulutus) 16

17 link-elementti Voidaan liittää xhtml-dokumenttiin ulkopuolinen tiedosto, esim. tyyliohje css-tiedostossa, jolloin useampi xhtml- dokumentti voi käyttää samaa tyyliohjetta. esim. liitetään dokumenttiin tyyli.css –tiedosto, jossa on tyyliohje: 17

18 style-elementti Lisätään dokumentin sisäinen tyyliohje Ohittaa ulkoisessa css-tiedostossa tehdyt määritykset attribuuttiseliteasema mediaTyylin esitysmedia(t)html 4 typeTyyliohjeen kieli, pakollinenhtml 4 xml:spaceVälilyöntien merkitsevyysxhtml Esim. body {font-family:verdana,sans-serif; color: navy;} h1 {color:red;} 18

19 body-elementti Selaimessa näkyvän xhtml-dokumentin sisältö Alla olevien attribuuttien lisäksi voidaan body-elementtin liittää yleisiä attribuutteja: class, id, style, xml:lang … attribuuttiselitysasema alinkAktiivisen linkin väritransitional backgroundTaustakuvatransitional bgcolorTaustaväritransitional linkLinkin väritransitional onloadSivua ladattaessa suoritettava scripti strict onunloadSivulta poistuttaessa suoritettava scripti strict textTekstin väritransitional vlinkKäydyn linkin väritransitional 19

20 body-elementin määreitä CSS:llä Esim. body {color:navy; background-color:#CCFFFF; background-image:url(taustakuva.gif); background-repeat:no-repeat; background-position:center; font-family:verdana, arial, sans-serif;} a:link {color:navy;} a:active {color:#CC0099;} a:visited {color:#9933FF;} a:hover {color:lime;} a {text-decoration:none;} 20

21 body-elementti body-elementin alielementtinä strict-versiossa voi olla lohkoelementit (block):  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äksi body-elementin alielementteinä voi olla (strict):  Lisäys / poisto –merkkaus: ins, del  Scriptin lisäys: script 21

22 Lohkoelementit Dokumentti jaetaan lohkoelementeillä suurempiin osiin Lohkoelementit voivat sisältää lohkoelementtejä ja/tai sisä- eli inline-elementtejä (riippuu elementistä) Lohkoelementit alkavat aina uudelta riviltä ja päättyvät rivinvaihtoon Sisä- eli inline-elementti Jakaa sisällön pienempiin osiin, esim. sanaan tai vaikka kirjaimeen Alielementteinä vain sisä- eli inline-elementtejä Yleensä ei aiheuta rivinvaihtoa 22

23 h1, h2, h3, h4, h5, h6 Lohkotason elementtejä Muodostaa otsikon, jonka suuruusluokka määräytyy numeron mukaan (h1 suurin) Esim. Rakenteiset dokumentit Rakenne, sisältö ja ulkoasu erillään Esimerkkinä XHTML-dokumentti 23

24 p-elementti Muodostaa tekstissä kappaleen p-elementin sisällä ei saa olla muita lohkoelementtejä (esim. listaa, taulukkoa…) p-elementin sisällä saa olla sisä- eli inline-elementtejä (esim. kuva, rivinvaihto…) XHTML-koodin kirjoittamiseen voidaan käyttää mitä tahansa tekstieditoria. XHTML-tiedoston loppupäätteeksi tulee.html tai.htm. Voidaan käyttää myös loppupäätettä.xml, jolloin tiedosto näkyy xml-muotoisena selainikkunassa. Jotkut WYSIWYG-editorit osaavat tehdä xhtml-koodia jos määrität xhtml- tiedoston alussa haluamasi DOCTYPE-määrittelyn 24

25 address, blockquote, pre 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). Vastaava css:llä: <div style="white-space:pre;font-family:courier,monospace"> … 25

26 hr Lohkoelementti Lisää väliviivan Tyhjä elementti hr-elementin attribuutit: alignVaakasuora tasaus, arvona left, center, righttransitional noshadeVarjostuksen poisto, noshade="noshade"transitional sizeViivan paksuus, arvona lukutransitional widthViivan leveys, arvo lukuna tai prosenttinatransitional Määreet css:llä: 26

27 div Lohkoelementti Muodostaa sivun osasta lohkon, jonka sisällä voi olla elementtejä ja tekstiä, esim. Värit Web-tuvalliset värit 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. 27

28 span Sisä- eli inline-elementti Ei aiheuta rivinvaihtoa Vastaa tekstitasolla div-elementtiä Esim. Sisä- eli inline -elementti voi sisältää vain inline-elementtejä. 28

29 br Tekee rivinvaihdon Tyhjä elementti Esim. Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu 29

30 Loogiset tekstielementit Tekstisisällön loogista merkitystä voidaan ilmaista seuraavilla inline-elementeillä:  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 30

31 Fyysiset tekstielementit Tekstin fyysistä merkkausta eli ulkoasun muutosta voidaan tehdä seuraavilla inline-elementeillä: elementtimerkitysasemaCSS:llä vastaava blihavointistrictfont-weight:bold; bigIsompi fonttistrictfont-size:120%; fontfonttimäärityksiätransitionalcolor:blue;font:arial; ikursivointistrictfont-style:italic; s ja strikeyliviivaustransitionaltext-decoration:line-through; smallpienempi fonttistrictfont-size:80%; tttasalevyinen fontti transitionalfont-family:courier,monospace; ualleviivaustransitionaltext-decoration:underline; 31

32 Kommentit Kommentoi xhtml-dokumenttisi hyvin Kommentteja ei voi asettaa elementin tunnisteen sisälle Kommentit eivät näy www-sivulla 32