HTML5

HTML 5HTML 5New Tags, New Attributes, New New Tags, New Attributes, New

JavaScript APIs, Forms, Validation, JavaScript APIs, Forms, Validation, Audio, Video, SVG, CanvasAudio, Video, SVG, Canvas

Doncho MinkovDoncho Minkov

Telerik Mobile Development CourseTelerik Mobile Development Coursemobiledevcourse.telerimobiledevcourse.telerik.comk.com

Technical TrainerTechnical Trainerhttp://www.minkov.it http://www.minkov.it

Table of ContentsTable of Contents Introduction to HTML 5Introduction to HTML 5 Changed Old TagsChanged Old Tags New TagsNew Tags

Audio and Video TagsAudio and Video Tags

New Structural Tags (New Structural Tags (<header><header>, , <footer><footer>, …), …)

New Form Elements and ValidationNew Form Elements and Validation New AttributesNew Attributes Canvas vs. SVGCanvas vs. SVG Local StorageLocal Storage 2

Introduction to HTML Introduction to HTML 55

What the … is HTML 5?What the … is HTML 5?

What is HTML 5?What is HTML 5? HTML5 – the next major revision of the HTML5 – the next major revision of the

HTMLHTML Currently under developmentCurrently under development

Far away from final versionFar away from final version

Developed under the HTML 5 working Developed under the HTML 5 working group of the World Wide Web Consortium group of the World Wide Web Consortium (W3C) in 2007(W3C) in 2007

First Public Working Draft of the First Public Working Draft of the specificationspecification January 22, 2008January 22, 2008

Parts of HTML5 are being implemented in Parts of HTML5 are being implemented in browsers before the whole specification is browsers before the whole specification is readyready 4

HTML – Past, Present, HTML – Past, Present, FutureFuture

1991 – HTML first mentioned – Tim Berners-Lee – 1991 – HTML first mentioned – Tim Berners-Lee – HTML tagsHTML tags

1993 – HTML (first public version, published at 1993 – HTML (first public version, published at IETF)IETF)

1993 – HTML 2 draft1993 – HTML 2 draft 1995 – HTML 2 – W3C1995 – HTML 2 – W3C 1995 – HTML 3 draft 1995 – HTML 3 draft 1997 – HTML 3.2 – “Wilbur”1997 – HTML 3.2 – “Wilbur” 1997 – HTML 4 – ”Cougar” – CSS 1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final)1999 – HTML 4.01 (final) 2000 – XHTML draft 2000 – XHTML draft 2001 – XHTML (final)2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft2008 – HTML5 / XHTML5 draft 2011 – feature complete HTML52011 – feature complete HTML5 2022 – HTML5 – final specification2022 – HTML5 – final specification 5

HTML 5 GoalsHTML 5 Goals Latest version is HTML5Latest version is HTML5

Aimed to have all of the power of Aimed to have all of the power of native applicationsnative applications

Run on any platform (Windows, Run on any platform (Windows, Linux, iPhone, Android, etc.)Linux, iPhone, Android, etc.)

New features should be based on New features should be based on HTML, CSS, DOM and JavaScriptHTML, CSS, DOM and JavaScript

Reduce the need for external Reduce the need for external pluginsplugins

Better error handlingBetter error handling More markup to replace scriptingMore markup to replace scripting

6

Designer OutlookDesigner OutlookWhat a Designer Should Know?What a Designer Should Know?

Changed Old TagsChanged Old Tags

Doctype tag:Doctype tag:

HTML tag:HTML tag:

Meta tag:Meta tag:

Link tag:Link tag:

<!DOCTYPE html><!DOCTYPE html>

<html lang="en" xml:lang="en"> <html lang="en" xml:lang="en">

<meta charset="utf-8"> <meta charset="utf-8">

<link rel="stylesheet" href="style-original.css"><link rel="stylesheet" href="style-original.css">

New Layout New Layout SctuctureSctucture

Better layout structure: new Better layout structure: new structural elementsstructural elements <section><section>

<header><header>

<nav><nav>

<article><article>

<aside><aside>

<footer><footer>

<header><header>

<footer><footer>

<nav><nav> <aside><aside>

<section><section><header><header>

<article><article>

<footer><footer>

New Layout Sctucture (2)New Layout Sctucture (2)

Elements like header and footer Elements like header and footer are not meant to be only at the are not meant to be only at the top and bottom of the pagetop and bottom of the page

Header and footer of each Header and footer of each document section document section Not very different from Not very different from <DIV<DIV> tag > tag

but are more semantically well but are more semantically well defined in the document structuredefined in the document structure

New Layout Sctucture New Layout Sctucture – – ExampleExample

<body><body>

<header><header> <hgroup><hgroup> <h1>HTML 5 Presentation</h1><h1>HTML 5 Presentation</h1> <h2>New Layout Structure</h2><h2>New Layout Structure</h2> </hgroup></hgroup> </header></header>

<nav><nav> <ul><ul> LectureLecture </ul></ul> <ul><ul>

DemosDemos </ul></ul> <ul><ul> TrainersTrainers </ul></ul> </nav> </nav>

New Layout Sctucture New Layout Sctucture – – Example (2)Example (2)

<section><section> <article><article> <header><header> <h1>First Paragraph</h1><h1>First Paragraph</h1> </header></header> <section><section> Some textSome text </section></section> </article></article> </section> </section>

<aside><aside> <a href="http://academy.telerik.com"> more <a href="http://academy.telerik.com"> more info</a>info</a> </aside></aside>

<footer><footer> Done by Doncho Minkov, (c) 2011, Telerik Done by Doncho Minkov, (c) 2011, Telerik AcademyAcademy </footer></footer></body></body>

New Layout New Layout Structure TagsStructure Tags

Live DemoLive Demo

New TagsNew Tags <article><article>

For external content, like text from a For external content, like text from a news-article, blog, forum, or any other news-article, blog, forum, or any other external sourceexternal source

<aside><aside> For content aside from (but related to) For content aside from (but related to)

the content it is placed inthe content it is placed in <details><details>

For describing details about a document, For describing details about a document, or parts of a documentor parts of a document

<summary><summary> A caption, or summary, inside the details A caption, or summary, inside the details

elementelement

New Tags (2)New Tags (2) <mark><mark> For text that should be highlightedFor text that should be highlighted

<nav><nav> For a section of navigationFor a section of navigation

<section> <section> For a section in a document (e.g. For a section in a document (e.g.

chapters, headers, footers)chapters, headers, footers) <wbr><wbr> Word break. For defining an appropriate Word break. For defining an appropriate

place to break a long word or sentenceplace to break a long word or sentence Other tagsOther tags <command><command>,, <datalist><datalist>, , <details><details>,, <progress<progress>>, etc., etc.

New Media TagsNew Media Tags Media TagsMedia Tags

<audio><audio> Attributes: Attributes: autoplayautoplay, , controlscontrols, , looploop, , srcsrc

<video><video> Attributes: Attributes: autoplayautoplay, , controlscontrols, , looploop, , heightheight, , widthwidth, , srcsrc

<audio width="360" height="240" controls= <audio width="360" height="240" controls= "controls" > "controls" > <source src="someSong.mp3" type="audio/mp3"> <source src="someSong.mp3" type="audio/mp3"> </source></source> Audio tag is not supportedAudio tag is not supported</audio></audio>

Playing AudioPlaying AudioLive DemoLive Demo

Embed Tag – New SyntaxEmbed Tag – New Syntax <embed><embed>

Defines embedded content, Defines embedded content, such as a plug-in such as a plug-in

AttributesAttributes src="url"src="url", , type="type"type="type"

<embed src="helloworld.swf" /><embed src="helloworld.swf" />

New AttributesNew Attributes New attributesNew attributes

AttributeAttribute DescriptionDescriptionAutocompleteAutocomplete ONON//OFFOFF. In case of “. In case of “onon”, the ”, the

browser stores the value, browser stores the value, auto fill when the user auto fill when the user visits the same form next visits the same form next time time

AutofocusAutofocus AutofocusAutofocus. Input field is . Input field is focused on page loadfocused on page load

RequiredRequired RequiredRequired. Mandates input . Mandates input field value for the form field value for the form submit actionsubmit action

DraggableDraggable TrueTrue//falsefalse indicates if the indicates if the element is draggable or notelement is draggable or not

New <input> TypesNew <input> Types New New <input><input> type(s)type(s)

AttributeAttribute DescriptionDescriptionNumber/RangeNumber/Range Restricts users to enter only Restricts users to enter only

numbers. Additional numbers. Additional attributes attributes minmin, , max max and and step step and and valuevalue can convert the can convert the input to a input to a sliderslider controlcontrol or a or a spinspin boxbox

date, month, date, month, week, time, date week, time, date + time, and date + time, and date + time - time + time - time zonezone

Providers a Providers a datedate pickerpicker interface.interface.

EmailEmail Input type for Input type for EmailEmail AddressesAddresses

URLURL Input field for Input field for URL addressURL address

TelephoneTelephone Input type for Input type for TelephoneTelephone numbernumber

New Form Tags:New Form Tags:<input <input

type="range">type="range">Live DemoLive Demo

Built-In Forms Built-In Forms ValidationValidation

Live DemoLive Demo

Canvas vs. Canvas vs. SVGSVG

CanvasCanvas Allows dynamic, scriptable rendering Allows dynamic, scriptable rendering

of 2D shapes and bitmap imagesof 2D shapes and bitmap images Low level, procedural model Low level, procedural model

Updates a bitmapUpdates a bitmap Does not have a built-in scene graphDoes not have a built-in scene graph

Consists of a drawable region defined Consists of a drawable region defined in HTML in HTML Has height and width attributesHas height and width attributes Accessible by JavaScript CodeAccessible by JavaScript Code

Used for building graphs, animations, Used for building graphs, animations, games, and image compositiongames, and image composition

Canvas ExampleCanvas Example In HTML:In HTML:

25

<canvas id="example" width="200" height="200"><canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not This is displayed if HTML5 Canvas is not supported.supported.</canvas></canvas>

Access with JavaScript:Access with JavaScript:

var example = var example = document.getElementById('example');document.getElementById('example');var context = example.getContext('2d');var context = example.getContext('2d');context.fillStyle = "rgb(255,0,0)";context.fillStyle = "rgb(255,0,0)";context.fillRect(30, 30, 50, 50);context.fillRect(30, 30, 50, 50);

Canvas ExampleCanvas Example In HTML:In HTML:

26

<canvas id="example" width="200" height="200"><canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not This is displayed if HTML5 Canvas is not supported.supported.</canvas></canvas>

Access with JavaScript:Access with JavaScript:

var example = var example = document.getElementById('example');document.getElementById('example');var context = example.getContext('2d');var context = example.getContext('2d');context.fillStyle = "rgb(255,0,0)";context.fillStyle = "rgb(255,0,0)";context.fillRect(30, 30, 50, 50);context.fillRect(30, 30, 50, 50);

SVGSVG SVG stands for SVG stands for SScalable calable VVector ector GGraphics raphics

A language for describing 2D-graphics A language for describing 2D-graphics

Graphical applicationsGraphical applications Most of the web browsers can display Most of the web browsers can display

SVG just like they can display PNG, GIF, SVG just like they can display PNG, GIF, and JPGand JPG Internet Explorer users may have to Internet Explorer users may have to

install the install the Adobe SVG ViewerAdobe SVG Viewer HTML5HTML5 allows embedding allows embedding SVGSVG

Directly using Directly using <svg><svg>......</svg></svg> https://developer.mozilla.org/en/SVG https://developer.mozilla.org/en/SVG

27

SVG ExampleSVG Example

28

<!DOCTYPE html><!DOCTYPE html><head><head> <title>SVG</title><title>SVG</title> <meta charset="utf-8" /><meta charset="utf-8" /></head></head><body><body> <h2>HTML5 SVG Circle</h2><h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" <circle id="redcircle" cx="50" cy="50" r="50" r="50" fill="red" />fill="red" /> </svg></svg></body></body></html></html>

SVG Gradient ExampleSVG Gradient Example

29

<svg id="svgelem" height="200" <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">xmlns="http://www.w3.org/2000/svg"> <defs><defs> <radialGradient id="gradient" cx="50%" cy="50%" <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">r="50%" fx="50%" fy="50%"> <stop offset="0%" <stop offset="0%" style="stop-color:rgb(200,200,200);stop-style="stop-color:rgb(200,200,200);stop-opacity:0"/>opacity:0"/> <stop offset="100%" <stop offset="100%" style="stop-color:rgb(0,0,255);stop-style="stop-color:rgb(0,0,255);stop-opacity:1"/>opacity:1"/> </radialGradient></radialGradient> </defs></defs> <ellipse cx="100" cy="50" rx="100" ry="50" <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />style="fill:url(#gradient)" /></svg></svg>

Canvas vs. SVGCanvas vs. SVGLive DemoLive Demo

Local StorageLocal Storage More persistent than temporary More persistent than temporary

internet files and cookiesinternet files and cookies Most useful for (mobile) devices Most useful for (mobile) devices

that are not connected to the that are not connected to the Internet all the time, or when Internet all the time, or when bandwidth is scarcebandwidth is scarce

More storage space available - 5MB More storage space available - 5MB limit per domain (recommended by limit per domain (recommended by W3C), compared to 4KB per cookieW3C), compared to 4KB per cookie

31

Local Storage Demo Local Storage Demo HTMLHTML

32

<form><form><fieldset><fieldset> <label for="value">enter key name:</label><label for="value">enter key name:</label> <input type="text" id="key" /><input type="text" id="key" /> <label for="value">enter key value:</label><label for="value">enter key value:</label> <input type="text" id="value" /><input type="text" id="value" /></fieldset></fieldset><fieldset><fieldset> <button type="button" onclick="setValue()"><button type="button" onclick="setValue()"> store the key value</button>store the key value</button> <button type="button" onclick="getValue()"><button type="button" onclick="getValue()"> retrieve the key value</button>retrieve the key value</button> <button type="button" onclick="getCount()"><button type="button" onclick="getCount()"> retrieve the number of keys</button>retrieve the number of keys</button> <button type="button" onclick="clearAll()"><button type="button" onclick="clearAll()"> clear all key values</button>clear all key values</button></fieldset></fieldset></form></form>

Local Storage Demo Local Storage Demo ScriptScript

var $ = function (id) {var $ = function (id) { return document.getElementById(id);return document.getElementById(id);}}

function setValue() {function setValue() { window.localStorage.setItem($("key").value, $window.localStorage.setItem($("key").value, $("value").value);("value").value);}}

function getValue() {function getValue() { alert(window.localStorage.getItem($alert(window.localStorage.getItem($("key").value));("key").value));}}

function getCount() function getCount() {alert(window.localStorage.length);}{alert(window.localStorage.length);}

function clearAll() {window.localStorage.clear();}function clearAll() {window.localStorage.clear();}33

End User OutlookEnd User OutlookWhat is the Advantage to the End What is the Advantage to the End

User?User?

HTML 5 – End User HTML 5 – End User OutlookOutlook

Provides a very rich user Provides a very rich user experience without Plug-insexperience without Plug-ins

RIA replacement?RIA replacement? Better PerformanceBetter Performance Leverages GPU for betterLeverages GPU for better

graphical experiencegraphical experience

How to Detect HTML5?How to Detect HTML5? HTML5 is not a thing someone can detectHTML5 is not a thing someone can detect

It consists of many elements that can be It consists of many elements that can be detecteddetected <canvas><canvas>, , <video><video>, etc., etc.

The HTML5 specification defines how tags The HTML5 specification defines how tags interact with JavaScriptinteract with JavaScript Through the Through the DDocument ocument OObject bject MModel (odel (DOMDOM))

HTML5 doesn’t just define a HTML5 doesn’t just define a <video><video> tag tag There is also a corresponding DOM API for There is also a corresponding DOM API for

video objects in the DOMvideo objects in the DOM You can use this API to detect support for You can use this API to detect support for

different video formats, etc.different video formats, etc.36

HTML 5 – HTML 5 – Showcases and Showcases and

ResourcesResources HTML 5 Rocks – Examples, Demos, HTML 5 Rocks – Examples, Demos,

TutorialsTutorials http://www.html5rocks.com/http://www.html5rocks.com/

HTML 5 DemosHTML 5 Demos http://html5demos.com/http://html5demos.com/

Internet Explorer 9 Test Drive for HTML 5Internet Explorer 9 Test Drive for HTML 5 http://ie.microsoft.com/testdrive/http://ie.microsoft.com/testdrive/

Apple Safari HTML 5 ShowcasesApple Safari HTML 5 Showcases http://www.apple.com/html5/http://www.apple.com/html5/

Dive into HTML 5Dive into HTML 5 http://diveintohtml5.org/http://diveintohtml5.org/

37

HTML 5HTML 5

Questions?Questions?

HomeworkHomework1.1. Make the following Web Page.Make the following Web Page.

Note that there should be validators for Note that there should be validators for emails and url (email and url are required emails and url (email and url are required fields)fields)

2.2. Using the previouslyUsing the previouslymade Web Page, add made Web Page, add functionality to check iffunctionality to check ifthe text in "email"the text in "email"and "repeat email" fields and "repeat email" fields is equal. If not showis equal. If not showwarning message and warning message and reload the pagereload the page

39

3.3. Using Canvas draw the following Using Canvas draw the following figuresfigures

4.4. Try doing the sameTry doing the sameusing SVGusing SVG

Hint: Use JavaScriptHint: Use JavaScript

40

Homework (2)Homework (2)

Homework (3)Homework (3)

41

5.5. Build the following Web Page using Build the following Web Page using HTML5 and CSS 2.1HTML5 and CSS 2.1

Use "Lorem Ipsum" to fill with some Use "Lorem Ipsum" to fill with some sample Contentsample Content

Try to make Try to make the pagethe pagelook OK whenlook OK whenthe window the window is resizedis resized

Technology

HTML5