HTML5 alkaa Mirja Jaakkola.

Esitys aiheesta: "HTML5 alkaa Mirja Jaakkola."— Esityksen 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): working draft (WD) candidate recommendation (CR) proposed recommendation (PR) W3C-suositus eli recommendation ICT1TN004

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

4 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. ICT1TN004

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 ICT1TN004

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. ICT1TN004

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. ICT1TN004

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ä. ICT1TN004

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: ICT1TN004

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 ICT1TN004

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 ICT1TN004

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

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. ICT1TN004

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 } ICT1TN004

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ä ICT1TN004

16 Elementin rakenne elementti <tunniste>Sisältö</tunniste>
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 ICT1TN004

17 Attribuutti elementti
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 ICT1TN004

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. ICT1TN004

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

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 ICT1TN004

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

22 html-elementti html head body
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. html head body <!DOCTYPE html > <html > <head> head-osan elementtejä </head> <body> sivun sisältö body-osan elementteinä </body> </html> ICT1TN004

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: Attribuutit: globaalit attribuutit base url-osoite dokumentin suhteellisiin viittauksiin link linkki toiseen dokumenttiin, esim. CSS meta metatietoa dokumentista script selaimella suoritettavaa scriptiä (javascript) style dokumentin sisäinen tyyliohje title dokumentin ulkoinen otsikko, pakollinen (yleensä) ICT1TN004

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

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 ICT1TN004

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

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 ICT1TN004

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

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=" ICT1TN004

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 ICT1TN004

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 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:ää. <style> body {font-family:verdana,sans-serif; color: navy;} h1 {color:red;} </style> ICT1TN004

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. ICT1TN004

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

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

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

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 XHTML 1.0, XHTML 1.1: recommendations XHTML 2.0: working draft </pre> ICT1TN004

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

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ä div-elementtien 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 ICT1TN004

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 ICT1TN004

40 Sivurakenne esim.1. header nav article article footer
Uusien elementtien tarkoitus on kuvata sivun rakennetta korvaten div-elementin. header nav article article footer ICT1TN004

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

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

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

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, ICT1TN004

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 url-osoitteen 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> ICT1TN004

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>

47 br Nimi: Mikko Mallikas Osoite: Majavakatu 3, Oulu
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 ICT1TN004

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

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 ICT1TN004

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. ICT1TN004

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 ICT1TN004

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

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

54 progress Toimii samalla lailla kuin meter, tarkoituksena kuitenkin on progress-elementillä 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: ICT1TN004

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>

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 ICT1TN004

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

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 ICT1TN004

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