Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Transkriptio

1 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 2 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 3 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 4 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 /> 2

3 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 6 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 7 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> 8 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 9 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öä. 10 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 11 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 12 html-elementti Alielementteinä head ja body, jotka ovat pakollisia xhtml-dokumentissä head html body <!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> 6

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

8 15 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 2.4."/> <meta name="keywords" content="xhtml-dokumentin rakenne, ulkoinen ja sisäinen tyylitiedosto, xhtml, css" /> 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. <title>helia Tietotekniikan koulutus (in tietotekniikan koulutus)</title> 8

9 17 link-elementti Voidaan liittää xhtml-dokumenttiin ulkopuolinen tiedosto, esim. tyyliohje css-tiedostossa, 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" /> 18 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 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 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 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 10

11 21 body-elementti body-elementin alielementtinä -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 (): Lisäys / poisto merkkaus: ins, del Scriptin lisäys: script 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 11

12 23 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> 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 ) <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> 12

13 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 citeattribuutilla 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> 26 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 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> 27 span 28 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> 14

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

16 31 Fyysiset tekstielementit Tekstin fyysistä merkkausta eli ulkoasun muutosta voidaan tehdä seuraavilla inline-elementeillä: elementti merkitys asema CSS:llä vastaava b lihavointi font-weight:bold; big Isompi fontti font-size:120%; font fonttimäärityksiä color:blue;font:arial; i kursivointi font-style:italic; s ja strike yliviivaus text-decoration:line-through; small pienempi fontti font-size:80%; tt tasalevyinen fontti font-family:courier,monospace; u alleviivaus text-decoration:underline; 32 Kommentit  Kommentoi xhtml-dokumenttisi hyvin Kommentteja ei voi asettaa elementin tunnisteen sisälle Kommentit eivät näy www-sivulla 16