SlideShare a Scribd company logo

HTML5

•Download as PPT, PDF•
•
Doncho Minkov
Doncho Minkov
Technology
1 of 41
HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it
Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Introduction to HTML 5 What the … is HTML 5?
What is HTML 5? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML – Past, Present, Future ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 Goals ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Designer Outlook What a Designer Should Know?
Changed Old Tags ,[object Object],[object Object],[object Object],[object Object],<!DOCTYPE html> <html lang=&quot;en&quot; xml:lang=&quot;en&quot;> <meta charset=&quot;utf-8&quot;> <link rel=&quot;stylesheet&quot; href=&quot;style-original.css&quot;>
New Layout Sctucture ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<header> <footer> <nav> <aside> <section> <header> <article> <footer>
New Layout Sctucture (2) ,[object Object],[object Object],[object Object]
New Layout Sctucture – Example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Layout Sctucture – Example (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Layout Structure Tags Live Demo
New Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Tags (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
New Media Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],<audio width=&quot;360&quot; height=&quot;240&quot; controls= &quot;controls&quot; > <source src=&quot;someSong.mp3&quot; type=&quot;audio/mp3&quot;> </source> Audio tag is not supported </audio>
Playing Audio Live Demo
Embed Tag – New Syntax ,[object Object],[object Object],[object Object],[object Object],<embed src=&quot;helloworld.swf&quot; />
New Attributes ,[object Object],Attribute Description Autocomplete ON / OFF . In case of “ on ”, the browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus . Input field is focused on page load Required Required . Mandates input field value for the form submit action Draggable True / false indicates if the element is draggable or not
New <input> Types ,[object Object],Attribute Description Number/Range Restricts users to enter only numbers. Additional attributes min , max and step and value can convert the input to a slider control or a spin box date, month, week, time, date + time, and date + time - time zone Providers a date picker interface. Email Input type for Email Addresses URL Input field for URL address Telephone Input type for Telephone number
New Form Tags: <input type=&quot;range&quot;> Live Demo
Built-In Forms Validation Live Demo
Canvas vs. SVG
Canvas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Canvas Example ,[object Object],<canvas id=&quot;example&quot; width=&quot;200&quot; height=&quot;200&quot;> This is displayed if HTML5 Canvas is not supported. </canvas> ,[object Object],var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = &quot;rgb(255,0,0)&quot;; context.fillRect(30, 30, 50, 50);
Canvas Example ,[object Object],<canvas id=&quot;example&quot; width=&quot;200&quot; height=&quot;200&quot;> This is displayed if HTML5 Canvas is not supported. </canvas> ,[object Object],var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = &quot;rgb(255,0,0)&quot;; context.fillRect(30, 30, 50, 50);
SVG ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
SVG Example <!DOCTYPE html> <head> <title>SVG</title> <meta charset=&quot;utf-8&quot; /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <circle id=&quot;redcircle&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;red&quot; /> </svg> </body> </html>
SVG Gradient Example <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <defs> <radialGradient id=&quot;gradient&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot; fx=&quot;50%&quot; fy=&quot;50%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(200,200,200);stop-opacity:0&quot;/> <stop offset=&quot;100%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> </defs> <ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot; style=&quot;fill:url(#gradient)&quot; /> </svg>
Canvas vs. SVG Live Demo
Local Storage ,[object Object],[object Object],[object Object]
Local Storage Demo HTML <form> <fieldset> <label for=&quot;value&quot;>enter key name:</label> <input type=&quot;text&quot; id=&quot;key&quot; /> <label for=&quot;value&quot;>enter key value:</label> <input type=&quot;text&quot; id=&quot;value&quot; /> </fieldset> <fieldset> <button type=&quot;button&quot; onclick=&quot;setValue()&quot;> store the key value</button> <button type=&quot;button&quot; onclick=&quot;getValue()&quot;> retrieve the key value</button> <button type=&quot;button&quot; onclick=&quot;getCount()&quot;> retrieve the number of keys</button> <button type=&quot;button&quot; onclick=&quot;clearAll()&quot;> clear all key values</button> </fieldset> </form>
Local Storage Demo Script ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
End User Outlook What is the Advantage to the End User?
HTML 5 – End User Outlook ,[object Object],[object Object],[object Object],[object Object]
How to Detect HTML5? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 – Showcases and Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML 5 ,[object Object]
Homework ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],Homework (2)
Homework (3) ,[object Object],[object Object],[object Object]

Recommended

HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
Doncho Minkov
 
Ajax
AjaxAjax
Ajax
wangjiaz
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
Owen Williams
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
HTML5
HTML5HTML5
HTML5
Hatem Mahmoud
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 

Recommended

HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
Doncho Minkov
 
Ajax
AjaxAjax
Ajax
wangjiaz
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
Owen Williams
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
HTML5
HTML5HTML5
HTML5
Hatem Mahmoud
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith
 
HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
Offir Ariel
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
Avinash Malhotra
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
BG Java EE Course
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
Niket Chandrawanshi
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
Ata Ebrahimi
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
Aaron Gustafson
 
Html 5
Html 5Html 5
Html 5
manujayarajkm
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
ballychohanuk
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
Kristof Degrave
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
umesh patil
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
Remy Sharp
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
Trần Khải Hoàng
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
Brendan Sera-Shriar
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
Christopher Schmitt
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
Digital Insights - Digital Marketing Agency
 
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptBusiness Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Salesforce Developers
 
[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms
Ivan Matiishyn
 
JavaScript
JavaScriptJavaScript
JavaScript
Bharti Gupta
 

More Related Content

What's hot

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
BG Java EE Course
 

What's hot (19)

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
 
HTML 5 Overview
HTML 5 OverviewHTML 5 Overview
HTML 5 Overview
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 
Html 5
Html 5Html 5
Html 5
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Html 5.0
Html 5.0Html 5.0
Html 5.0
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 

Viewers also liked

Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptBusiness Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Salesforce Developers
 
Flex security
Flex securityFlex security
Flex security
chengalva
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
Todd Anglin
 
Validation rule, validation text and input masks
Validation rule, validation text and input masksValidation rule, validation text and input masks
Validation rule, validation text and input masks
fizahPhd
 

Viewers also liked (12)

Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScriptBusiness Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
Business Interfaces using Virtual Objects, Visual-Force Forms and JavaScript
 
[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms[SoftServe IT Academy] JavaScript Forms
[SoftServe IT Academy] JavaScript Forms
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Flex security
Flex securityFlex security
Flex security
 
02. input validation module v5
02. input validation module v502. input validation module v5
02. input validation module v5
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
 
Javascript validating form
Javascript validating formJavascript validating form
Javascript validating form
 
Web forms and server side scripting
Web forms and server side scriptingWeb forms and server side scripting
Web forms and server side scripting
 
Form Validation in JavaScript
Form Validation in JavaScriptForm Validation in JavaScript
Form Validation in JavaScript
 
Validation rule, validation text and input masks
Validation rule, validation text and input masksValidation rule, validation text and input masks
Validation rule, validation text and input masks
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 

Similar to HTML5

Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
maycourse
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
Lisa Adkins
 

Similar to HTML5 (20)

Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
HTML5
HTML5HTML5
HTML5
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Html5: What is it?
Html5: What is it? Html5: What is it?
Html5: What is it?
 
HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
HTML 5
HTML 5HTML 5
HTML 5
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standard
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 

More from Doncho Minkov

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
Doncho Minkov
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
Doncho Minkov
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout Containers
Doncho Minkov
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and Styling
Doncho Minkov
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
Doncho Minkov
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
Doncho Minkov
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModel
Doncho Minkov
 

More from Doncho Minkov (20)

Web Design Concepts
Web Design ConceptsWeb Design Concepts
Web Design Concepts
 
Web design Tools
Web design ToolsWeb design Tools
Web design Tools
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS Presentation
CSS PresentationCSS Presentation
CSS Presentation
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
CSS 3
CSS 3CSS 3
CSS 3
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Slice and Dice
Slice and DiceSlice and Dice
Slice and Dice
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout Containers
 
WPF Controls
WPF ControlsWPF Controls
WPF Controls
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and Styling
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
 
WPF Concepts
WPF ConceptsWPF Concepts
WPF Concepts
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModel
 
WPF and Databases
WPF and DatabasesWPF and Databases
WPF and Databases
 

Recently uploaded

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Angeliki Cooney
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
Overkill Security
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

HTML5

  • 1. HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it
  • 2.
  • 3. Introduction to HTML 5 What the … is HTML 5?
  • 4.
  • 5.
  • 6.
  • 7. Designer Outlook What a Designer Should Know?
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. New Layout Structure Tags Live Demo
  • 14.
  • 15.
  • 16.
  • 18.
  • 19.
  • 20.
  • 21. New Form Tags: <input type=&quot;range&quot;> Live Demo
  • 24.
  • 25.
  • 26.
  • 27.
  • 28. SVG Example <!DOCTYPE html> <head> <title>SVG</title> <meta charset=&quot;utf-8&quot; /> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <circle id=&quot;redcircle&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;50&quot; fill=&quot;red&quot; /> </svg> </body> </html>
  • 29. SVG Gradient Example <svg id=&quot;svgelem&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <defs> <radialGradient id=&quot;gradient&quot; cx=&quot;50%&quot; cy=&quot;50%&quot; r=&quot;50%&quot; fx=&quot;50%&quot; fy=&quot;50%&quot;> <stop offset=&quot;0%&quot; style=&quot;stop-color:rgb(200,200,200);stop-opacity:0&quot;/> <stop offset=&quot;100%&quot; style=&quot;stop-color:rgb(0,0,255);stop-opacity:1&quot;/> </radialGradient> </defs> <ellipse cx=&quot;100&quot; cy=&quot;50&quot; rx=&quot;100&quot; ry=&quot;50&quot; style=&quot;fill:url(#gradient)&quot; /> </svg>
  • 30. Canvas vs. SVG Live Demo
  • 31.
  • 32. Local Storage Demo HTML <form> <fieldset> <label for=&quot;value&quot;>enter key name:</label> <input type=&quot;text&quot; id=&quot;key&quot; /> <label for=&quot;value&quot;>enter key value:</label> <input type=&quot;text&quot; id=&quot;value&quot; /> </fieldset> <fieldset> <button type=&quot;button&quot; onclick=&quot;setValue()&quot;> store the key value</button> <button type=&quot;button&quot; onclick=&quot;getValue()&quot;> retrieve the key value</button> <button type=&quot;button&quot; onclick=&quot;getCount()&quot;> retrieve the number of keys</button> <button type=&quot;button&quot; onclick=&quot;clearAll()&quot;> clear all key values</button> </fieldset> </form>
  • 33.
  • 34. End User Outlook What is the Advantage to the End User?
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.