XHTML - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim.

Transkriptio

1 XHTML - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Taustaa Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti tieto halutaan esittää samalla tavoin kuin se on tallennettu rakenne lineaarinen sovellus- ja laiteriippuvainen Rakenteinen dokumentti: sisältö, rakenne ja ulkoasu erillään, esim. xhtmldokumentti sama sisältö voidaan esittää erilaisissa esitysmuodoissa, esim. selain, mobiili, digitv, paperi rakenne hierarkinen sovellus- ja laiteriippumaton 1

2 Selain - palvelin Selain -Lähettää pyynnön palvelimelle -Vastaanottaa xhtmldokumentin palvelimelta Palvelin -Lähettää pyynnöstä xhtmldokumentin selaimelle -Voi pitää yllä ns. lokitiedostoja -Muodostaa tarvittaessa xhtmldokumentin esim. PHPscriptikielen avulla Elementin rakenne <tagi>elementin sisältö</tagi> 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 /> (huomaa tyhjä merkki ennen lopputunnistetta) 2

3 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 Esimerkkejä elementti <tunniste nimi="arvo">sisältö</tunniste> attribuutti sisältö lopputagi alkutagi <a href= index.html >Pääsivu</a> Elementti, jolla attribuutti ja sisältö <img src= logo.gif alt= helian logo /> Elementti, jolla on kaksi attribuuttia ja jolla ei ole sisältöä (tyhjä) 3

4 XHTML dokumentin rakenne <!DOCTYPE juurielementin nimi PUBLIC "dokumentin tyyppi" dokumenttityypin osoite> <html xmlns=" xml:lang="kieli"> <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 elementteinä </body> </html> DOCTYPEt XHTML 1.0:ssa <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Strict tiukin, ei voi käyttää ei-suositeltavia elementtejä ja attribuutteja eikä kehyksiä <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Transiotional siirtymävaihe, sallii ei suositeltavien elementtien ja attributtien käytön <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Frameset sallii ei suositeltavien elementtien ja attribuuttien sekä kehysten käytön 4

5 DOCTYPE XHTML 1.1:ssä <!DOCTYPE HTML PUBLIC "-//W3C//DTD X HTML 1.1//EN" " Strict ainoana käytössä, ulkoasu tehdään css:llä, ei salli ei-suositeltavien elementtien ja attribuuttien eikä kehysten käyttöä. Esimerkki <!DOCTYPE HTML PUBLIC "-//W3C//DTD X HTML 1.1//EN" " <html xmlns=" xml:lang="fi"> <head> <meta http-equiv="content-type" content="text/html;charset=iso " /> <title> sivun otsikko </title> muita mahdollisia head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html> 5

6 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 asema strict strict strict html-elementti Alielementteinä head ja body, jotka ovat pakollisia xhtml-dokumentissä head <!DOCTYPE HTML PUBLIC "-//W3C//DTD X HTML 1.1//EN" " <html xmlns=" xml:lang="fi"> <head> head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html> html body 6

7 head-elementti Muodostaa xhtml-dokumentin otsakeosan Sisältöä ei yleensä näytetä selain-ikkunassa Alielementteinä : 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 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 7

8 meta-elementti meta-tietoa, joka kertoo käytettävän merkistön, suositellaan liitettäväksi jokaiseen xhtml-dokumenttiin: <meta http-equiv="content-type" content="text/html; charset=iso " /> Muita meta-elementin käyttöesimerkkejä <meta name="author" content="mirja" /> <meta name="description" content="xhtml-luento "/> <meta name="keywords" content="xhtml-dokumentin rakenne, ulkoinen ja sisäinen tyylitiedosto, xhtml, css" /> 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. <title>helia Tietotekniikan koulutus (in tietotekniikan koulutus)</title> 8

9 link-elementti Voidaan liittää xhtml-dokumenttiin ulkopuolinen tiedosto, esim. tyyliohje csstiedostossa, jolloin useampi xhtmldokumentti voi käyttää samaa tyyliohjetta. esim. liitetään dokumenttiin tyyli.css tiedosto, jossa on tyyliohje: <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 asema html 4 html 4 xhtml Esim. <style type = "text/css"> body {font-family:verdana,sans-serif; color: navy;} h1 {color:red;} </style> 9

10 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 attribuutti alink background bgcolor link onload onunload text vlink selitys Aktiivisen linkin väri Taustakuva Taustaväri Linkin väri Sivua ladattaessa suoritettava scripti Sivulta poistuttaessa suoritettava scripti Tekstin väri Käydyn linkin väri asema strict strict 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;} :link {color:navy;} :active {color:#cc0099;} :visited {color:#9933ff;} :hover {color:lime;} a {text-decoration:none;} 10

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

12 Sisä- eli inline-elementti Jakaa sisällön pienempiin osiin, esim. sanaan tai vaikka kirjaimeen Alielementteinä vain sisä- eli inlineelementtejä Yleensä ei aiheuta rivinvaihtoa h1, h2, h3, h4, h5, h6 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> 12

13 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 ) <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 xhtmltiedoston alussa haluamasi DOCTYPE-määrittelyn </p> hr Lohkoelementti Lisää väliviivan Tyhjä elementti <hr /> hr-elementin attribuutit: align noshade size width Vaakasuora tasaus, arvona left, center, right Varjostuksen poisto, noshade="noshade" Viivan paksuus, arvona luku Viivan leveys, arvo lukuna tai prosenttina Määreet css:llä: <hr style="color:red;background-color:red;height:3px" /> 13

14 address, blockquote lohkoelementtejä address-elementillä lisätään xhtmldokumentin tekijän tiedot sivulle näkyviin blockquote-elementtiä käytetään lainauksen osoittamiseen. Lainauksen kohde ilmoitetaan cite-attribuutilla pre lohkoelementti 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"> </div> 14

15 Listat eli luettelot listaelementit ovat lohkoelementtejä: lista ja listan alkiot alkavat uudelta riviltä listan jälkeen tuleva elementti alkaa uudelta riviltä listan alkuun ja loppuun selain jättää tyhjää tilaa lista-alkioiden välissä tyhjää tilaa ei ole listan vasemmassa reunassa on tyhjää tilaa tyhjää tilaa listan ja alkioiden ympärillä voidaan lisätä ja poistaa css-tyylimäärittelyillä muokkaamalla margin- ja padding-arvoja Järjestämätön lista (unordered list) Luetelmamerkillä koottu lista, jonka jäsenet ovat toisiinsa nähden saman arvoisia Juomat: <ul> <li>maito</li> <li>mehu</li> <li>kahvi</li> </ul> 15

16 ul-elementin type-attribuutti type-attribuutti on Transitional (ei Strict), korvataan CSS:ssä list-style-type:llä type-attribuutti type="circle" vastaava css-sääntö: list-style-type: circle lista-merkki type="disc" list-style-type: disc type="square" list-style-type: square Järjestetty lista (ordered list) Käytetään kun halutaan korostaa lista-alkioiden järjestystä (esim. ohjeet) lista-elementtinä toimii ol-elementti ja sen sisällä lista-alkiot merkitään li-elementillä <ol> <li>avaa editori</li> <li>kirjoita koodi</li> <li>tallenna</li> </ol> 1. avaa editori 2. kirjoita koodi 3. tallenna 16

17 ol-elementin attribuutit start kertoo mistä numerointi alkaa Esim. start="5" 5. tarkista koodi 6. korjaa virheet Transitional, CSS:ssä ei ole vastaavaa Järjestetyn listan type-attribuutti type kertoo miten numeroidaan esim. type="a" a. avaa editori b. kirjoita koodi c. tallenna Transitional, CSS:ssä korvataan list-styletype:llä typeattribuutti type="a" type="a" type="i" type="i" type="1" vastaava css-sääntö: list-style-type:upper-alpha list-style-type:lower-alpha list-style-type:upper-roman list-style-type:lower-roman list-style-type:decimal numerointi listassa A, B, C, a, b, c, I, II, III, i, ii, iii, 1, 2, 3,... 17

18 li-elementin attribuutit type Kyseisen lista-alkion edessä oleva merkki voidaan muuttaa halutun tyyppiseksi numeroksi tai listamerkiksi Vaihtoehdot samat kuin ol- ja ul-elementeissä Transitional, vastine CSS:ssä list-style-type value Kyseisen lista-alkion numero jos kyseessä on järjestetty lista Transitional, CSS:ssä ei ole vastaavaa Esimerkki <ol type="1" start="3"> <li>lista alkaa</li> <li type="a">kirjain</li> <li>lista jatkuu</li> <li value="10">kymppi</li> <li>lista loppuu</li> </ol> 18

19 Määritelmälista (definiton list) dl-elementillä kootaan joukko määritelmiä listaksi dt-elementillä lisätään listaan määriteltäviä termejä dd-elementillä lisätään listaan termien määritelmät <dl> <dt>koira <dd>musti</dd> </dt> <dt>kissa <dd>mirri</dd> </dt> </dl> CSS ja listat display:list-item oletuksena ul- ja ol-elementille halutessa voidaan laittaa myös muille elementeille esim. dt, dd tai vaikkapa p- elementille, jolloin niitä voidaan käsitellä listan tavoin display:inline käytettäessä listaelementit tulevat samalle riville peräkkäin 19

20 CSS list-style-type list-style-type kertoo listan merkin (periytyy lapsielementeille) ja sopii kaikille elementeille, joille on määritelty display:list-item li-elementille CSS:llä annettu tekstin väri vaikuttaa myös listamerkkiin, mutta ei taustaväriin vaan tastaväri tulee ul- tai olelementin vanhempi-elementiltä CSS list-style-image list-style-image määritellään listamerkin paikalle haluttu kuva esim. ul {list-style-image:url(logo.gif)} testaa eri selaimissa selaimet sijoittavat kuvan eri korkeuksille ja eri paikkaan tekstiin nähden lisää tyhjää tilaa ainakin kuvan oikealle puolelle jotta kuva mahtuu kunnolla Läpinäkyvä gif-kuva sulautuu parhaiten taustaan 20

21 CSS list-style-position list-style-position:lla määritellään listamerkin sijoitus tekstiin nähden list-style-position:outside list-style-position:inside CSS list-style list-style Lyhennemerkintä, jolla voidaan elementille antaa yhdellä kertaa seuraavat ominaisuudet: list-style-type list-style-image list-style-position Käytännössä kannattaa antaa kaikki tarvittavat ominaisuudet, jotta toimisi oikein eri selaimilla. 21

22 div Lohkoelementti Muodostaa sivun osasta lohkon, jonka sisällä voi olla elementtejä ja tekstiä, esim. <h1>värit</h1> <div style="margin-left:20%"> <h3>web-tuvalliset 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> span Sisä- eli inline-elementti Ei aiheuta rivinvaihtoa Vastaa tekstitasolla div-elementtiä Esim. <p>sisä- eli <span style="color:red">inline</span>-elementti voi sisältää vain inline-elementtejä.</p> 22

23 br Tekee rivinvaihdon Tyhjä elementti Esim. <p> Nimi: Mikko Mallikas <br /> Osoite: Majavakatu 3, Oulu </p> Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu 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 23

24 Fyysiset tekstielementit Tekstin fyysistä merkkausta eli ulkoasun muutosta voidaan tehdä seuraavilla inline-elementeillä: elementti b big font i s ja strike small tt u merkitys lihavointi Isompi fontti fonttimäärityksiä kursivointi yliviivaus pienempi fontti tasalevyinen fontti alleviivaus asema strict strict strict strict CSS:llä vastaava font-weight:bold; font-size:120%; color:blue;font:arial; font-style:italic; text-decoration:line-through; font-size:80%; font-family:courier,monospace; text-decoration:underline; XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan hrefattribuutilla Absoluuttinen linkki Helian pääsivulle: <a href=" Helian sivuille</a> linkin kohde url-osoitteena linkkiteksti xhtml-sivulla target-attribuutilla (Transitional) voidaan määrittää mihin ikkunaan linkin kohde avautuu. Vaihtoehtoja _blank, _self, _top, _parent. <a href=" target="_blank">siirry Heliaan</a> avaa Helian sivut uuteen ikkunaan mailto-linkki avaa sähköpostiohjelman ja linkin kohteeksi laitetaan sähköpostiosoite <a href="mailto:anna.malli@mallit.fi">lähetä viesti Annalle</a> 24

25 Suhteellinen linkki Linkki samaan kansioon <a href="kuvat.html"katso kuvia</a> Linkki alikansioon <a href="harrastukset/tanssi.html">tanssiharrastus</a> Linkki hakemistossa yksi ylöspäin <a href="../uutiset.html">uutiset</a> Voit linkittää myös muihin kuin xhtml-tiedostoihin. Esim. linkki kuvaan <a href="maisema.jpg">maisema rannalta</a> Linkki word-dokumenttiin <a href="ohje.doc">kameran käyttöohje</a> Linkki.swf-tiedostoon <a href="harjoitus.swf">flash-harjoitustyö 2.3.</a> Sivun sisäinen linkki Linkin kohde eli ankkuri sijaitsee samalla sivulla, jolloin linkissä kohde merkitään #kohdesana: <a href="#kappale2">kappale 2: Luokat</a> Linkin kohde voi sijaita myös toisella sivulla, jolloin siirrytään toiselle sivulle ankkurin osoittamaan kohtaan: <a href="mallit.html/#kappale2">kappale 2: Luokat</a> Ankkurin paikka sivulla merkitään a-elementillä käyttäen nameattribuuttia. Esimerkissä viitataan sivulla olevaan otsikkoon: <h3><a name="kappale2 >Kappale 2: Luokat</a></h3> Ankkuri voidaan merkitä myös liittämällä kohteena olevaan elementtiin id-attribuutti, mikä on suositeltavaa ja xhtml 1.1.:ssä ainoa tapa tehdä sivun sisäiseen linkkiin ankkuri: <h3 id="kappale2">kappale 2: Luokat</h3> 25

26 CSS ja linkit Pseudoluokkaa eli näennäisluokkaa käytetään linkkien tyylimäärittelyssä seuraavasti: a:link a:visited a:active a:hover linkki käyty linkki aktiivinen linkki eri selaimilla erilainen tulkinta: linkki, jonka päällä hiiri on alhaalla, esim. Opera 6 linkki, jota on juuri klikattu, esim. Mozilla 1.2. linkki, jossa juuri on käyty, esim. IE6 hiiri linkin päällä toimii Mozillassa myös muilla elementeilläkin esim. p Esimerkki: <style> a:link {color:navy} a:active {color:#cc0033} a:visited {color:#9933ff} a:hover {color:lime; background:yellow; border:solid; border-color:pink; text-decoration:none} </style> Kommentit  Kommentoi xhtml-dokumenttisi hyvin Kommentteja ei voi asettaa elementin tunnisteen sisälle Kommentit eivät näyt www-sivulla 26