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

Koko: px
Aloita esitys sivulta:

Download "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 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

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

4 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 />

5 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 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ä)

7 XHTML dokumentin rakenne <!DOCTYPE juurielementin nimi PUBLIC "dokumentin tyyppi" dokumenttityypin osoite> <html xmlns="http://www.w3.org/1999/xhtml" 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> 7

8 8 DOCTYPEt XHTML 1.0:ssa <!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

9 9 DOCTYPE XHTML 1.1:ssä <!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öä.

10 10 Esimerkki <!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" 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>

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

12 12 html-elementti 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" xml:lang="fi"> <head> head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html>

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

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

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

19 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 transitional transitional transitional transitional strict strict transitional transitional

20 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;}

21 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

22 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

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

25 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 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 transitional transitional transitional transitional Määreet css:llä: <hr style="color:red;background-color:red;height:3px" />

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

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

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

31 31 Fyysiset tekstielementit Tekstin fyysistä merkkausta eli ulkoasun muutosta voidaan tehdä seuraavilla inline-elementeillä: elementti merkitys asema CSS:llä vastaava b lihavointi strict font-weight:bold; big Isompi fontti strict font-size:120%; font fonttimäärityksiä transitional color:blue;font:arial; i kursivointi strict font-style:italic; s ja strike yliviivaus transitional text-decoration:line-through; small pienempi fontti strict font-size:80%; tt tasalevyinen fontti transitional font-family:courier,monospace; u alleviivaus transitional text-decoration:underline;

32 32 Kommentit <!-- 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

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. 3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Lisätiedot

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa: XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

3 WWW-hypermedian perusta: HTML

3 WWW-hypermedian perusta: HTML 3 WWW-hypermedian perusta: HTML Hypertext Markup Language HTML (Hypertext Markup Language) on tapa koodata (merkata) rakenteisia (teksti)dokumentteja WWW:ssä Esimerkki: Tästä kaikki alkaa

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

HTML-ohjeet. Sivun perusrakenne