HTML5 alkaa. Mirja Jaakkola

Transkriptio

1 HTML5 alkaa Mirja Jaakkola

2 W3C Word Wide Web Consortiumin (W3C) perustettiin 1994 kehittämään yhteisiä ja yhteensopivia Webin pelisääntöjä ja teknologioita. W3C:n muodostavat sen jäsenet (W3C members). Nykyisin W3C:llä on n. 400 jäsenorganisaatiota ympäri maailmaa (The list of current W3C Members). W3C tuottaa runsaasti erilaisia dokumentteja ja asiakirjoja. Työryhmän teknisestä dokumentista voi tulla W3C-suositus alla olevaa suosituspolkua noudattaen (W3C Recommendation Track Process): 1. working draft (WD) 2. candidate recommendation (CR) 3. proposed recommendation (PR) 4. W3C-suositus eli recommendation 2

3 Historiaa 1989 Tim Berners-Lee alkoi kehittämään nettiä ja ensimmäisen selaimen prototyyppi saatiin aikaan 1990 HTML ensimmäiset kuvaukset v HTML 2.0 luonnos v ja suositus v HTML 3.0 luonnos v ja HTML 3.2 suositus v (tammikuu) HTML 4 suositus v (joulukuu) ja HTML 4.01 suositus v XML suositus v XHTML 1.0 suositus v ja XHTML 1.1. suositus v XHTML 2.0 luonnos v HTML 5 luonnos v Tarkemmin 3

4 HTML:n aikaisempien versioiden ongelmat HTML:n aikaisempien versioiden ongelmat: Aluksi HTML-kieli muuttui eri selainten tekijöiden visioiden mukaan Eri selaimet tekivät omia elementtejä, jotka eivät ole W3C:n suosituksien mukaisia eivätkä toimi muissa selaimissa Selaimet näyttävät sivut, vaikka ne eivät olisi W3C:n suosituksien mukaisia ja eivät siis myöskään ole valideja Eri selaimet tulkitsevat koodia & virheitä erilailla Ulkoasu tehtiin varhaisissa HTML-versioissa elementtien ja attribuuttien avulla. Myöhemmin kehitettiin CSS-kieli ulkoasun määritykseen. Siirtymävaiheessa HTML 4:een määriteltiin kolme erilaista dokumentintyyppi- eli DOCTYPE-määritystä: Strict: elementit kuvaavat vain rakennetta, ulkoasu CSS:n avulla Transitional: sisältää vielä ei-suositeltavat ulkoasuun vaikuttavat määritykset Frameset: sisältää vielä ei-suositeltavien ulkoasuun vaikuttavien määritysten lisäksi kehysrakenteen. 4

5 XHTML XHTML:n tarkoitus oli korvata HTML:n aikaisemmat versiot ja tehdä XHTML:stä formaali sivunkuvauskieli XHTML 1.0 on HTML4:n elementit sisältävä sivunkuvauskieli kirjoitettuna XML:n syntaksin mukaisesti dokumentti on hyvin muodostunut: elementit sijaitsevat sisäkkäin ja kaikilla elementeillä on alkutagin lisäksi myös lopputagi elementit ja attribuutit kirjoitetaan aina pienillä kirjaimilla attribuuttien arvot erotetaan lainausmerkein XHTML 1.0 sisältää vielä samat dokumenttityyppimääritykset (DOCTYPE) kuin HTML 4: Strict, Transitional ja Frameset XHTML 1.1. ei enää salli ulkoasuun liittyvä määreitä vaan ulkoasu muodostetaan CSS-tyylikielen avulla 5

6 XHTML:n ongelmat XHTML:n ongelmat: XHTML ei tue aikaisemmin webbiin tuotettua sisältöä XHTML keskittyy virheenkäsittelyyn ja MIME-tyypeihin (application/xhtml+xml): pienikin virhe XHTML-koodissa olisi XML-syntaksiin perustuen estänyt sivun sisällön näytön selaimessa XHTML-sivujen tekijät siirtyivät käyttämään MIME-tyyppiä txt/html, jolloin virheellisten sivujen näyttö selaimessa onnistui. 6

7 W3C & WHATWG 2004 Apple, Mozilla ja Opera perustivat WHATWG-yhteisön ja esittivät uuden web-sovelluksen toteuttamista seuraavin periaattein: Yhteensopivuus aiempien toteutusten kanssa Hyvin määritelty virhetilanteiden hallinta Käyttäjän suojaaminen sivuston virheiltä Käytännöllisyys Skriptaus Laitetasoista profilointia tulee välttää Spesifikaation kehittäminen avointa Tämän perusteella alettiin kehittää HTML5:sta Kehitysryhmänä oli WHATWG ( Vuonna 2007 W3C tuli mukaan HTML5:n kehitystyöhön lopettaen samalla XHTML 2.0:n kehittämisen Vuonna 2008 tammikuussa julkaistiin W3C:n ensimmäinen HTML5-luonnos HTML5:n kehitys jatkuu yhä ja kestänee vielä useita vuosia. 7

8 HTML5 ja vanhat webbisivut Webbisivut ovat perinteisesti olleet joko vanhempaa HTML4-koodia tai uudempaa XHTML-koodia Voit siirtyä HTML4.01 strict:sta ja XHTML:stä suoraan HTML5 :seen, koska HTML5:lle on määritelty kaksi erilaista esitysmuotoa: HTML ja XHTML. Vanhat HTML4.01 strict:ssa ja XHTML:ssä käytetyt elementit ovat täysin tuettuja tehdessäsi HTML5-sivuja HTML4.01 strict:ssä ja XHTML:ssä elementit jaotellaan lohko (block) ja sisä (inline ) elementteihin. Lohko (block) elementit muodostavat XHTML:ssä web-sivun rakenteen ja sisä (inline) elementit sijoitetaan aina lohkoelementtien sisälle. HTML5 sallii myös joitakin sellaisia elementtien sijoitteluja, jotka ovat HTML4.01 strict:ssä ja XHTML:ssä kiellettyjä. 8

9 HTML5 elementtien pääryhmät Elementtien pääryhmiä kuvaa alla oleva W3C:n esittämä kuva osoitteesta Elementti voi kuulua useampaan ryhmään. Jotkut elementit kuuluvat ryhmiin, joita viereisessä pääryhmiä esittävässä kuvassa ei esiinny. HTML5 elementtien tarkempi ryhmittely ja mitä attribuutteja voit liittää eri elementille on esitetty W3C:n sivulla: HUOM! Tarkista webbisivusi koodin oikeellisuus aina validaattorin avulla: 9

10 HTML5 uudet piirteet HTML5:n uusia ominaisuuksia ovat: Rakenteiset elementit, joilla merkitään sivun jakautuminen eri osiin Uusia lomake-elementtejä ja tiedon tarkistukset Videon ja äänen esittäminen omilla elementeillä Piirtoalue canvas-elementillä ja piirtotoimintojen & vuorovaikutuksen lisääminen javascriptin avulla Paikkatiedot (geologation), joiden avulla sivun sisältö voidaan toteuttaa käyttäjän sijainnin mukaisesti. Tosin tämä on erillinen kehityshanke, mutta usein liitetään html5:seen. Selaimen muisti, kehittyneempi tiedon tallennustapa kuin evästeissä (cookies). Offline-sovellukset, voidaan ladata tarvittavat tiedot etukäteen selaimeen offline käyttöä varten 10

11 Selaimet ja HTML5:n uudet piirteet Selaimet tukevat vaihtelevasti HTML5:n uusia piirteitä. Eri selainten tuen uusille HTML5 elementeille näet sivustolta. Testaa sivuja eri selaimilla ja mahdollisesti myös eri selainversioilla. Tärkeimmät selaimet ovat IE, Firefox, Opera, Safari, Chrome IE9 tukee hyvin uusia piirteitä, vanhemmat versiot eivät tue. IE9:ssä saat F12-näppäimellä käyttöösi sivunkehitystyökalut. Firefoxissa on saatavilla lisäosia asenna Työkalut-valikosta esim. Web Developer Extension sivun muokkaamiseen Firebug virheiden etsintään. Pienten laitteiden selaimet (esim. Android, iphone) tukevat yleensä hyvin HTML5:sta 11

12 Uudet elementit ja vanha IE IE:n vanhempien versioiden käyttäjiä on vielä paljon, koska uusinta IE9- versioita ei voida asentaa vanhoihin koneisiin & käyttöjärjestelmiin (esim. xp). IE9 käy siis vain vistaan ja windows 7:aan. Vanhat IE-selaimet eivät ymmärrä uusia elementtejä ja sivua muodostaessaan sijoittavat sille oudot elementit sivun loppuun. Vanhemmat IE-selaimet versioon 8 asti voivat muodostaa uudet elementit seuraavan javascript-koodin avulla: <!-- [if lt IE 9]> <script> document.createelement("header"); document.createelement("nav"); document.createelement("article"); document.createelement("footer"); </script> <![endif] --> 12

13 Uudet elementit ja vanha IE Webistä löydät valmiin javascript-funktion, jonka avulla voit tehdä uudet HTML5-elementit niille, jotka käyttävät vanhaa IE:tä. <!-- [if lt IE 9]> <script src=" </script> <![endif] --> Jos haluat varmistaa funktion toimivan aina (webissä oleva sivu voi joskus olla tavoittamattomissa) voit kopioida tuon javascript-funktion omalle palvelimellesi osoitteesta ja käyttää sitä suoraan omalta palvelimeltasi. 13

14 Selainten tuki HTML5:lle Ominaisuuksien tunnistustekniikkaan voit käyttää javascript-kirjastoa Lataa kirjasto sivustosi yhteyteen ja liitä se html-sivun head-osioon: <script src="modernizr.min.js"></script> ominaisuuden voit nyt tarkistaa javascript-ehtolauseella, esim.: if(modernizr.canvas){ // true, voidaan käyttää canvas-elementin lauseita. } else { //false, ei tukea canvas-elementille. Muu esitystapa tai selite. } 14

15 HTML 5 merkkaus HTML 5 sallii sekä HTML-muotoisen merkkauksen että XHTML-muotoisen merkkauksen. Sekä isot että pienet kirjaimet ovat sallittuja elementtien nimissä. Voit jättää halutessasi seuraavista elementeistä lopputagin pois: body, colgroup, dd, dt, head, li, optgroup, option, p, rp, rt, tbody, td, tfoot, th, thead ja tr Voit jättää halutessasi (ei kuitenkaan suositeltavaa) seuraavista elementeistä alkutagit pois: body, colgroup, head, html ja tbody Tyhjän elementin voi kirjoittaa sekä lopputagin kanssa tai ilman lopputagia esim. <br> on sallittu HTML:n aikaisemmissa versioissa ja HTML5:ssa <br/> on sallittu XHTML:ssä ja HTML5:ssa <br></br> on kielletty HTML5:ssa vaikka se on sallittu XHTML:ssä 15

16 Elementin rakenne Elementti alkaa alkutunnisteella eli tagilla, sitten tulee elementin sisältö ja lopuksi mahdollinen lopputunniste Elementin määrittely kertoo millainen elementin sisältö voi olla, millaisia attribuutteja elementtiin voi liittää, mitä alielementtejä elementillä voi olla, pitääkö elementillä olla lopputagi jne. Elementti voi olla myös tyhjä ts. elementillä ei ole sisältöä eikä erillistä lopputagia. Lopputagimerkin voi halutessa kirjoittaa alkutagiin tunnisteen jälkeen, mutta se ei ole pakollista HTML5:ssa. elementti <tunniste>sisältö</tunniste> alkutagi sisältö lopputagi 16

17 Attribuutti Elementin määrite eli tarkennin Kirjoitetaan aina elementin alkutunnisteeseen Nimi-arvo -pari W3C:n suositus kertoo mitä attribuuttia eri elementteihin voi liittää elementti <tunniste nimi="arvo">sisältö</tunniste> attribuutti sisältö lopputagi alkutagi 17

18 HTML 5 merkkaus: attribuutit HTML 5 sallii sekä HTML-muotoisen merkkauksen että XHTML-muotoisen merkkauksen. Sekä isot että pienet kirjaimet ovat sallittuja attribuuttien nimissä. Attribuuttien kirjoittamisessa ei kirjaisinkoolla ole merkitystä Attribuutin arvo voidaan laittaa lainausmerkkien sisälle tai arvo voi olla ilman lainausmerkkejä. Lainausmerkit pitää kuitenkin laittaa jos attribuutin arvossa on välilyönti, lainausmerkki (" tai ), gravis (`), yhtäsuuruusmerkki (=) tai pienempi (<) tai suurempi (>) kuin merkki. Boolean-attribuutit voidaan kirjoittaa joko arvon kanssa tai ilman arvoa Esim. checked="checked" voidaan kirjoittaa ilman arvoa eli käyttäen pelkästään boolean-attribuutin nimeä checked. 18

19 Globaalit attribuutit Seuraavat globaalit attribuutit voidaan liittää kaikkiin html-elementteihin: accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title translate pikanäppäin luokka (CSS) sisällön muokattavuus tilannekohtaisen komentovalikon menu kirjoitussuunta hiirellä siirto pudotuksen vaikutus piilotus yksilöivä tunniste sisällön kieli kielen tarkastus tyyli järjestysnro otsikko käännös 19

20 Tapahtuma-attribuutit Seuraavat tapahtuma-attribuutit voidaan liittää osaan elementteistä: onafterprint onbeforeprint onbeforeunload onblur onerror onfocus onhashchange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onresize onscroll onstorage onunload 20

21 HTML5 HTML 4 strict:sta ja XHTML:stä voidaan siirtyä suoraan HTML5 :seen, koska HTML5:lle on määritelty kaksi erilaista esitysmuotoa: HTML ja XHTML. Dokumentissa kannattaa valita toinen noista esitystavoista, jotta koodaus lopputageineen olisi johdonmukaista. Molemmat esitystavat ovat yhtä oikeita. Selainten tuki kannattaa tarkistaa uusille elementeille esim. osoitteesta: HTML5 elementtejä voi lisätä jo olemassa oleviin vanhoihin sivuihin. Tällöin sivun DOCTYPE-määritys kannattaa muuttaa HTML5:n mukaiseksi. HTML5:n DOCTYPE määritys on yksinkertaisesti: <!DOCTYPE html> 21

22 html-elementti Toimii html-dokumentin juurielementtinä ts. kaikki muut dokumentin elementit tulevat juurielementin sisälle Alku- ja lopputagin voi jättää pois ei kuitenkaan suositeltavaa Attribuutteina globaalit attribuutit. Alielementteinä on ensin head-elementti ja sitten body-elementti. head html body <!DOCTYPE html > <html > <head> head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html> 22

23 head-elementti Muodostaa html-dokumentin otsakeosan Sisältöä ei yleensä näytetä selain-ikkunassa Alku- ja lopputagin voi jättää pois ei kuitenkaan suositeltavaa Alielementit määrittelevät metatietoa ja scriptausta: base link meta script style title url-osoite dokumentin suhteellisiin viittauksiin linkki toiseen dokumenttiin, esim. CSS metatietoa dokumentista selaimella suoritettavaa scriptiä (javascript) dokumentin sisäinen tyyliohje dokumentin ulkoinen otsikko, pakollinen (yleensä) Attribuutit: globaalit attribuutit 23

24 title-elementti Pakollinen Attribuutit: globaalit 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>haaga-helia ammattikorkeakoulu</title> 24

25 meta-elementti meta-elementtejä voi olla useita yhdessä dokumentissa meta-elementistä on neljä erilaista vaihtoehtoa: <meta http-equiv=" " content=" " > sisältää tietoa, joka ohjaa selainta. Tätä kutsutaan HTML5:ssa pragmaksi. <meta charset=" "> ilmoittaa lyhyesti merkistökoodauksen <meta name=" " content=" "> kertoo sivukohtaisia metatietoja <meta itempromp=" " content=" " > kertoo mikrotietomäärittelyn 25

26 Koodiston ilmoittaminen Merkistökoodaus ilmoitetaan yksinkertaisemmin meta-elementissa: <meta charset="windows-1252"> Windows-1252 on ISO :n laajennus. Toinen vaihtoehto koodaukseksi on UTF-8, joka mahdollistaa kaikkien Unicode-merkkien esittämisen suoraan. Tällöin muista tarkistaa sivua tallennettaessa myös koodaus, jotta ääkköset tulevat selainikkunassa oikealla tavalla. <meta charset="utf-8"> 26

27 meta-elementti name-attribuutin arvoja (standardi): application-name: web-sovellus author: tekijä description: kuvaus generator: millä sivu on tehty keywords: avainsanat, erota pilkulla Muita name-attribuutin arvoja: http-equiv attribuutin arvoja: content-language: kieli HUOM: käytä mieluummin lang-attribuuttia content-type: mitä merkistöä koodauksessa käytetään default-style: oletustyyli refresh: päivitys, uudelleen ohjaus set-cookie : HTTP-evästeet päälle 27

28 meta-elementin käyttöesimerkkejä Metatietoa html-dokumentista: <meta name="author" content="mirja" > <meta name="description" content="html-luento 2.4."> <meta name="keywords" content="html-dokumentin rakenne, ulkoinen ja sisäinen tyylitiedosto, html, css" > Käyttäjän siirtäminen toiseen osoitteeseen: <meta http-equiv="refresh" content="10; URL=uusi_sivu.html"> Sivun päivitys 2 minuutin välein: <meta http-equiv="refresh" content="120"> 28

29 base-elementti elementillä määritellään web-sivulle url-osoite, johon kaikki web-sivun suhteelliset viittaukset osoitetaan käyttökelpoinen silloin kun web-sivu on irti ympäristöstään, esim. sähköpostilla lähetetty web-sivu, jolla ei ole url-osoitetta ollenkaan. Sijainti head-elementissä ennen viitauksia ulkopuolisiin lähteisiin. Web-sivulla voi olla vain yksi base-elementti. Tyhjä elementti Pakollisena attribuuttina href, jossa ilmoitetaan web-sivun absoluuttinen url-osoite. Lisäksi voi olla globaaleja attribuutteja target-attribuutti. Esim. web-sivun normaali sijaintipaikka, johon web-sivun suhteelliset viittaukset osoitetaan: <base href=" 29

30 link-elementti link-elementti: Voidaan liittää html-dokumenttiin ulkopuolinen tiedosto Esim. tyyliohjeen liittäminen, jolloin useampi html-dokumentti voi käyttää samaa tyyliohjetta. <link rel="stylesheet" href="tyyli.css" type="text/css"> Globaalien attribuuttien lisäksi voit liittää seuraavat attribuutit: href : kohdetiedoston url-osoite rel : nykyisen ja kohdetiedoston suhde media : mille medialle, esim. eri tyyliohje näytölle, tulostukseen hreflang : kohdetiedoston kieli type : kohdetietoston mime-tyyppi sizes : koko title : kohdetiedoston title 30

31 style-elementti Lisätään dokumentin sisäinen tyyliohje Ohittaa ulkoisessa css-tiedostossa tehdyt määritykset Globaalien attribuuttien lisäksi voi olla type, media ja scoped -attribuutit <style> body {font-family:verdana,sans-serif; color: navy;} h1 {color:red;} </style> Aikaisemmin style-elementin yhteydessä piti ilmoittaa type="text/css" - attribuutti, mutta HTML5:ssa se ei ole enää pakollista ja voit siis jättää sen pois. Selain siis automaattisesti ymmärtää style-elementissä käytettävän css:ää. 31

32 script-elementti Liitetään javascript-koodia tai tiedosto (käsitellään myöhemmin) Globaalien attribuuttien lisäksi voit liittää seuraavat attribuutit: src : tiedoston nimi async : jos true niin scripti suoritetaan asynkronisesti heti kun se on saatavilla defert: jos true ja async false niin odotetaan kunnes sivu on valmis ennen scriptin suoritusta. Jos defert false ja async on myös false suoritetaan scripti välittömästi. type : tiedoston tyyppi charset: merkkien koodisto Myös script-elementissä ei enää tarvitse kirjoittaa type="javascript" attribuuttia. Selain automaattisesti ymmärtää script-elementissä kirjoitetun scriptin olevan javascriptiä. Noscript-elementillä voidaan antaa vaihtoehtoinen sisältö sellaisille selaimille, jotka eivät tue javascriptiä tai joissa javascript on estetty selainasetuksin. 32

33 body-elementti Selaimessa näkyvän html-dokumentin sisältö html-elementillä voi olla vain yksi body-elementti Attribuutteina globaalit attribuutit ja tapahtuma (event) -attribuutit Alku- ja lopputagin voi jättää pois ei kuitenkaan suositeltavaa Alielemetit muodotavat web-sivun rakenteen ja sivulla näkyvät osat. <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>html esimerkki</title> </head> <body> sivun sisältö </body> </html> 33

34 h1, h2, h3, h4, h5, h6 -otsikot Muodostaa otsikon, jonka suuruusluokka määräytyy numeron mukaan (h1 suurin) Attribuutteina globaalit attribuutit <h1>rakenteiset dokumentit</h1> <h3>rakenne, sisältö ja ulkoasu erillään</h3> <h6>esimerkkinä XHTML-dokumentti</h6> 34

35 p-elementti Muodostaa tekstissä kappaleen (paragraph) tai muun tekstilohkon Alkaa aina uudelta riviltä. Selaimet erottaa tekstilohkon muista lohkoista tyhjällä rivillä. Vain globaalit attribuutit. P-elementin alkutagi on pakollinen, mutta lopputagi ei ole. On suotavaa lisätä myös lopputagi. Jos lopputagi puuttuu selain tulkitsee p-elementin loppuvan seuraavaan sivun rakennetta kuvaavan elementin alkuun. P-elementin sisälle et voi sijoittaa sivun rakennetta kuvaavia elementtejä kuten otsikko (h1, h2, ), div, article, header, footer, nav <p>html-koodin kirjoittamiseen voidaan käyttää mitä tahansa tekstieditoria. HTML-tiedoston loppupäätteeksi tulee.html tai.htm.</p> <p> WYSIWYG ( what you see is what you get ) -editorin avulla voit myös tehdä webbisivuja. Luokan koneissa on Adoben Dreamweaver, joka ymmärtää jo jollakin tasolla HTML5:n uusia elementtejä.</p> 35

36 pre pre-elementti tekee valmiiksi muotoillun tekstin ts. jättää kaikki tyhjät merkit ja rivinvaihdot paikoilleen. Oletusfontti on tasalevyinen (monospace), jotta tekstinmuotoilun tulos olisi mahdollisimman yhdenmukainen. Lopputagi pakollinen Vain globaalit attribuutit <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 36

37 div div: sivuston sisältö voidaan jakaa osiin. Lopputagi pakollinen. Vain globaalit attribuutit. Nykyään hyvin suosittu sivun kokoamisväline, jossa eri div-lohkot yksilöidään käyttäen id-attribuuttia Tulevaisuudessa uusien semanttisten elementtien käytön toivotaan vähentävän div-elementin käytön tarvetta. <h1>värit</h1> <div id="web_varit" 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> 37

38 Semanttiset rakenne-elementit Uusien HTML5:n semanttisten rakenne-elementtien avulla voidaan tehdä sivulle sisällön kannalta mielekäs rakenne Uusia elementtejä kehiteltiin sen perusteella, minkä nimisiä divelementtien id- ja class-tunnuksia sivustoilla eniten käytettiin. Näille semanttisille elementeille voit antaa vain globaaleja attribuutteja. <article>: Artikkelin tulee olla kokonainen, itsekseen julkaistavissa oleva kokonaisuus Artikkelin sisällä voi olla toinen artikkeli <aside> Sivupalkki, sisältönä esim. kuvia, mainosbanneri <footer> Alatunniste, esim. yhteystiedot, copyright 38

39 Semanttiset rakenne-elementit <header> Ylätunniste, otsikkolohko, esim. logo ja pääotsikko <hgroup> Otsikkoryhmä, esim. otsikko ja alaotsikko <nav> navigointipalkki <section> Sivun rakenteen jakamiseen osiin tai artikkelin koostamista osista, joilla on oma otsikko 39

40 Sivurakenne esim.1. Uusien elementtien tarkoitus on kuvata sivun rakennetta korvaten divelementin. header nav article article footer 40

41 Sivurakenne esim.2. header nav article section section section footer 41

42 Sivurakenne esim.3. nav header article header section aside section footer footer 42

43 Semanttisten rakenne-elementtien merkitys Miten article ja section eroavat toisistaan? Section on osa dokumenttia Article on itsenäinen tekstikokonaisuus, artikkeli, uutinen, blogi Section-elementin sisällä voi olla article-elementti tai useampia Article-elementin sisällä voi olla section- tai article-elementtejä Uusien semanttisten rakenne-elementtien merkitys tulevaisuudessa riippuu miten niitä aletaan käyttämään ja käytetäänkö niitä oikein. Selaimet eivät näytä semanttisia rakenne-elementtejä toisistaan poikkeavasti eli niillä ei ole vaikutusta sivun ulkoasuun. Ulkoasu täytyykin siis määritellä CSS:n avulla. Elementit on hyvä myös määritellä CSS:ssä lohkolementeiksi, esim.: article, header, footer, nav, section {display:block;} 43

44 address address-elementillä lisätään html-dokumentin tekijän yhteystiedot sivulle näkyviin Oma address-elementti voisi olla myös article-elementillä, aikaisemmin address ajateltiin sivukohtaiseksi. Attribuutteina vain globaalit attribuutit. Address-elementin sisällä pitää XHTML:ssä olla vain tekstitason merkkausta, HTML5:ssa sisältönä voi olla muutakin, esim. lista tai taulukko. <address>esa Merkki, 44

45 blockquote ja cite blockquote-elementtiä käytetään lainauksen osoittamiseen. Selaimet yleensä sisentävät blockquote-elementillä erotetun tekstin. Käytännössä blockquote-elementtiä on aikaisemmin käytetty tekstin sisentämiseen. Tämä ei ole HTML-suositusten mukaista, vaan sisennys pitää aina tehdä CSS:n avulla. Attribuuttina globaalien lisäksi cite, joka ilmoittaa lainauksen kohteen urlosoitteen Lainauksen kohde, teoksen nimi, ilmoitetaan usein tekstitason cite-elementillä. Lopputagi on pakollinen molemmilla elementeillä. <h3>aleksis Kivi: kirjoituksia</h3> <blockquote>jukolan taloeteläisessä Hämeessä, seisoo erään mäen pohjoisella rinteellä, liki Toukolan kylää. <br><span style="font-size:12px">aleksis Kivi: <cite> Seitsemän veljestä</cite></span> </blockquote> 45

46 hr hr-elementti Lyhenne sanoista horizontal rule Käytännössä lisää vaakasuoran väliviivan Semanttinen merkitys html5:ssa: tarkoittaa aiheen vaihtumista kappaletasolla Tyhjä elementti, esitysmuoto joko <hr> tai <hr /> Attribuutteina globaalit attribuutit. CSS ei tue kovinkaan hyvin hr-elementin ulkoasun muotoilua. CSS antaa enemmän mahdollisuuksia ulkoasunmuokkaukseen jos teet poikkiviivan elementteihin liitetyllä ala- tai yläreunuksella eli border-määreellä. <p>mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemahan, sukuvirttä suoltamahan, lajivirttä laulamahan. Sanat suussani sulavat, puhe'et putoelevat, kielelleni kerkiävät, hampahilleni hajoovat. </p> <hr> 46

47 br br tekee pakollisen rivinvaihdon Suositellaan vain tilanteisiin, jossa rivinvaihto kuuluu tekstin sisältöön. Ei kovinkaan hyödyllinen rivityksessä, koska selainikkunan koko vaihtelee. Ongelmia voi tulla myös jos tekstiä tai palstan leveyttä muutetaan Globaalit attribuutit Tyhjä elementti, esitystapa joko <br> tai <br /> <p> Nimi: Mikko Mallikas <br /> Osoite: Majavakatu 3, Oulu </p> Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu 47

48 span span: elementti, jolla voit erottaa tekstin osan erikseen. Tekstitason elementtinä ei aiheuta rivinvaihtoa. Globaalit attribuutit Käytetään kun halutaan joku tekstin osa erilaiseksi muusta tekstistä esim. CSS-määrittelyn avulla <p><span style="color:red">v</span><span style="color:blue">ä</span> <span style="color:#f90">r</span><span style="color:rgb(185,0,185)">i</span> <span style="color:#48e41b">t</span> voidaan ilmoittaa sanalla, heksadesimaalikoodina tai rgb-arvona. </p> 48

49 Tekstielementtejä Tekstisisällön loogista merkitystä voidaan ilmaista seuraavilla elementeillä: abbr: tekstisisältö on lyhenne em: ilmausta painottava korostus strong: painottaa asian tärkeyttä cite: viittaa lähdeteoksen nimeen dfn: tekstisisältö on määriteltävä termi Tekstielementit, jotka kuvaavat tietokoneen käyttöä: code: koo di kbd: syöte samp: tuloste var: muuttuja 49

50 Tekstielementtejä Aikaisemmin tekstin fyysistä merkkausta korostavat elementit ovat saaneet uusia semanttisia merkityksiä: b: lihavointi. Uusi semanttinen merkitys: esiin nostettu teksti. i: kursivointi. Uusi semanttinen merkitys: erilainen teksti, erottuu ympäristöstä ilman korostusta tai tärkeyttä. s: yliviivaus. Uusi semanttinen merkitys: teksti, joka ei enää pidä paikkansa ts. on vanhentunutta. small: pienempi fontti. Uusi semanttinen merkitys: sivuhuomautus. sub: alaindeksi, käytettävä vain sisällölliseen merkkaukseen. sup: yläindeksi, käytettävä vain sisällölliseen merkkaukseen. u: alleviivaus. Uusi semanttinen merkitys: merkitty teksti, kuitenkin suositus varoittaa erityisesti, että useimmiten jokin muu elementti sopii paremmin u-elementin tilalle. Suositus myös kehottaa välttämään alleviivausta jos se voidaan tulkita väärin linkiksi. 50

51 HTML5: Uusia tekstielementtejä HTML5:ssä on määritelty seuraavat uudet tekstielementit: bdi: isolaatti, tekstin ladonnan suunta erillisessä saarekkeessa. Olematon selaintuki vielä. details: kontrolli, esim. painike, jolla saa lisätietoa. Ei selaintukea vielä. mark: tekstin merkkaus. meter: suureen arvon esitys graafisesti. nobr: kieltää rivivaihdon elementin sisällä. progress: prosessin edistymisen kuvaus graafisesti. ruby: Ruby-merkintä, käytetään lähinnä itä-aasialaisten kielten tekstiin liittyviin pieniin huomautuksiin time: ajanilmaus wbr: kohta, josta rivinvaihto on suositeltavaa 51

52 mark Mark-elementillä voidaan korostaa tekstiä kuten korostuskynällä tehdään. Käytännössä usein määritellään tekstinosalle CSS:n avulla korostava taustaväri. <p> Tämä teksti on <mark>nyt korostettu</mark> ja tässä on taas normaalia tekstiä. <p> 52

53 meter Graafinen esitys jollekin suurelle. Suure ilmaistaan joko lukuna tai prosentteina. Elementti esittää yhtä arvoa value-attribuutilla, jota päivitetään tarvittaessa javascriptin avulla. Min- ja max-attribuuteilla annetaan rajat. Elementin sisältö toimii varasisältönä, joka esitetään vain jos selain ei tue meter-elementin graafista näyttöä. Käyttöaste: <meter value="70" min="0" max="100">70%</meter> Chrome: Matkasta suoritettu 30 km<meter value="30" min="0" max="150"></meter> Chrome: 53

54 progress Toimii samalla lailla kuin meter, tarkoituksena kuitenkin on progresselementillä kuvata vain prosessin edistymistä. Päivittäminen javascriptin avulla tarpeen, jotta prosessin edistymisestä saadaan todellinen kuva. Attribuutit: globaalien attribuuttien lisäksi value ja max. Minimiarvoa ei anneta vaan se oletetaan olevan aina nolla. Odota, tietojen haku on käynnissä: <progress value="60" max="100">60%</progress> Chrome: 54

55 time Ajan ilmaisu kelloajan ja/tai päivämäärän mukaan. <time datetime=" ">30. lokakuuta 2011</time> Datetime-attribuutti kertoo ISO-standardin mukaisen päivämäärän Jos time-elementin sisältö on ISO-standardin mukainen ei tarvita datetime-attribuuttia. <time> </time> Jos time-elementin sisältö on muussa muodossa on datetime-attribuutin käyttö pakollista. Lisäksi on pubdate-attribuutti (boolean), joka ilmoittaa kyseessä olevan julkaisemisajankohdan. <time pubdate datetime=" "> </time> 55

56 wbr wbr ilmoittaa sallitun rivinvaihtokohdan eli kohdan, josta teksti voidaan jakaa tarvittaessa useammalle riville. Automaattisesti selaimet jakavat tekstin välilyönnin kohdalta. Useat selaimet jakavat myös = merkin kohdalta ja jotkut myös muiden erikoismerkkien kohdalta Parantaa sivun asettelua jos tekstissä on pitkiä merkkijonoja ja/tai erikoismerkkejä Tyhjä elementti, esitystapa joko <wbr> tai <wbr/> Esim. Kurssisivut 56

57 Merkkiviittaukset Seuraavat erikoismerkit täytyy html-dokumentissa korvata merkkiviittauksilla: < < > > & & " " Ylimääräinen välilyönti Tavutusvihje, kannattaa käyttää mm. pitkissä sanoissa ja otsikoissa Löydät lisää merkkiviittauksia osoitteesta: 57

58 Kommentit <!-- tämä on HTML-koodin kommentti --> Kommentoi HTML-dokumenttisi hyvin Kommentteja ei voi asettaa elementin tunnisteen sisälle Kommentit eivät näy www-sivulla 58

59 Lähteet working draf, jota tätä kirjoittaessa käytetty versiota päiväyksellä 29 March living standard HTML5:n opiskeluun Jukka K. Korpela: HTML5 uudet ominaisuudet kattava teos HTML5:n tämän hetkiseen kehitystilanteeseen 59