SlideShare a Scribd company logo
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
December 20-25, 2013
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
www.sela.co.il
Gil Fink
Introduction to HTML5
Agenda
What is HTML5?
The New Elements
HTML5 JavaScript APIs
CSS3
Q&A
Summary
What is HTML5?
HTML5 ~= HTML + CSS3 + JavaScript API
The future of the web
Still under development
A lot of features supported by modern browsers
Why to use HTML5?
Accessibility
Searchability
Interoperability
Many new
HTML elements and attributes
JavaScript APIs and improved capabilities
CSS capabilities

Recommended for you

JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model

What is the DOM? The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The W3C DOM standard is separated into 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects. With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

javascriptwebstack academy bangalorefullstack web developer
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS

CSS is used to style and lay out web pages. It allows separation of document content from page layout and design. CSS declarations are made up of selectors and properties. Selectors identify elements on the page and properties set specific styles for those elements, like color, font, size, and layout. CSS rules cascade based on specificity and source, with more specific and inline rules taking precedence over broader and external rules. Inheritance passes down text-based styles by default.

htmlbeginnercss
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation

The document covers various topics related to CSS including CSS introduction, syntax, selectors, inclusion methods, setting backgrounds, fonts, manipulating text, and working with images. Key points include how CSS handles web page styling, the advantages of CSS, CSS versions, associating styles using embedded, inline, external and imported CSS, and properties for backgrounds, fonts, text formatting, and images.

presentationcsscss presentation
What’s Under The HTML5
Umbrella?
Demo: HTML5 Sites Examples
Structural Elements
No need for div elements all over the place
New ways to mean what you actually meant to
mean
HTML 4 HTML 5
Main Structural Elements
And More
DescriptionElement
Defines an article (for example within a section)Article
Footer elements contain information about their containing
element: who wrote it, copyright, etc.
Footer
The page header shown on the page, not the same as <head>Header
Collection of links to other pagesNav
A part or chapter in a book, or essentially the content body of the
page
Section

Recommended for you

jQuery
jQueryjQuery
jQuery

The document provides an overview of jQuery including: - What jQuery is and its main features like DOM manipulation and AJAX - How to include jQuery in an HTML document and basic usage syntax - jQuery selectors to find elements and filters to refine selections - Common jQuery methods for manipulating attributes, events, HTML, CSS, and more - Examples of using various jQuery functions and concepts

jqueryhtmldileep mishra
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript

JavaScript is a scripting language originally designed for web browsers but now used everywhere. It has dynamic typing and supports object-oriented, imperative, and functional programming. JavaScript was created in 1995 and standardized in 1999. It is now the most popular language on GitHub. JavaScript can be used to build interactive web pages, desktop applications, server-side applications, IoT applications, and real-time applications. The core data types in JavaScript are Number, String, Boolean, Object, Function, Array, Date, and Regular Expressions. JavaScript supports features like variables, flow control, error handling, debugging, and JSON for data exchange.

nodejavascriptprogramming
Bootstrap
BootstrapBootstrap
Bootstrap

Bootstrap is a free front-end framework for building responsive, mobile-first websites and web apps. It contains HTML and CSS-based design templates and components for things like typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Bootstrap features responsive grid system, tables, forms, buttons, navigation and other elements for developing responsive web pages and applications. It helps developers design websites faster without writing much custom CSS code.

bootstrap
Inline Semantic Elements
DescriptionElement
Defines marked textMark
Represents a scalar gauge providing a measurement within a
known range, or a fractional value
Meter
Represents the completion progress of a taskProgress
Represents the result of a calculationOutput
Represents a specific moment in timeTime
New Input Types
Types
Email
Url
Tel
Number
Range
Search
Color
Date pickers (date,
month, week, time,
datetime, datetime-
local)
New Attributes
DescriptionAttribute
Accepted min and max valuesMin, Max
Related to file input type, allows selection of multiple filesMultiple
Specifies a pattern used to validate an input fieldPattern
A short hint intended to aid the user with data entryPlaceholder
Boolean attribute to indicate that the element is requiredRequired
Limits allowed values, thus indicating the granularity requiredStep
And many more
Demo: HTML5 New Elements

Recommended for you

Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt

This document introduces JavaScript, explaining that it allows for interactivity on web pages by manipulating the browser and reacting to user actions. It is embedded in HTML and executes on the client side for fast interactions without a connection. JavaScript statements can include code combined with HTML tags. The document also discusses using JavaScript with HTML forms to process and display user input on the page.

Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.

It is a Very basic introduction to JavaScript. It includes Advantages and Disadvantages of JavaScript, JavaScript Basic Syntax, and JavaScript DOM.

javascriptjavascript basicsjavascript dom
Html frames
Html framesHtml frames
Html frames

Using this presentation you will learn dividing the browser window into different parts(frame). With frames, several Web pages can be displayed in the same browser window.

htmlsoapado
HTML5 <video> Element
Enables to play video natively in the browser
Video can be composited with anything else on the page
HTML content, images, SVG graphics
Include standard codecs like: h.264, ogg and webm
Hardware accelerated, GPU-based decoding in most of the browsers
<video src="video.mp4" id="videoTag" width="640px" height="360px">


</video>
HTML5 <audio> Element
Enables to play audio natively in the browser
Industry-standard MP3 and AAC audio
Fully scriptable via the DOM
<audio src="audio.mp3" id="audioTag" autoplay controls>


</audio>
Demo: Video and Audio Elements
HTML5 Canvas
A block element that allows developers to draw 2D or
3D graphics using JavaScript
For 3D you use WebGL API
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>

Recommended for you

Basic html structure
Basic html structureBasic html structure
Basic html structure

This document provides an overview of basic HTML structure and elements. It discusses what HTML is, how it uses markup tags to describe web page structure with elements like headings, paragraphs, and links. It also covers HTML syntax and documents, how to structure a basic HTML page with tags for the root, head, title, and body. The document demonstrates using block and inline elements and attributes to build out web pages. It provides examples of different text formatting tags and tags for things like quotes, lines, and comments.

html5web designweb design and development
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)

The document discusses the Document Object Model (DOM), which defines the logical structure of objects in an HTML document and how they can be manipulated with JavaScript. The DOM represents an HTML document as nodes and objects that can be accessed and modified with JavaScript. All HTML elements, text, and attributes can be accessed through the DOM to be modified, deleted, or have new elements created. Events allow scripts to run in response to user actions on a page.

and iframe objects image object etc dom hiearchymanaging events onload and onunload using the onclframeset
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation

The <div> tag defines sections in an HTML document and is used to group block elements to apply styles. It can contain other tags and attributes like id, class, style, and title can be used to identify and style the <div> section. Common uses include wrapping content in containers with specific backgrounds, alignments, or other styles.

Demo: Canvas
Scalable Vector Graphics
Create and draw 2D vector graphics
Vector images are composed of shapes instead of
pixels
Based on the SVG 1.1 2nd Edition Full specification
Support for:
Full DOM access to SVG elements
Document structure, scripting, styling, paths, shapes,
colors, transforms, gradients, patterns, masking,
clipping, markers, linking and views
2D Vector Graphics
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
Demo: SVG
2

Recommended for you

Html ppt
Html pptHtml ppt
Html ppt

Hypertext Markup Language (HTML) is a markup language that is used to structure and present content on the World Wide Web. It was created by Tim Berners-Lee in 1980. The document defines various HTML tags such as headings, paragraphs, bold, italics, lists, images, and links. It provides examples of how to use each tag, including the opening and closing syntax. Common tags discussed include <h1> for main headings, <p> for paragraphs, <b> for bold text, <i> for italics, <ol> for ordered lists, <ul> for unordered lists, and <a> for creating links between pages.

Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap

This document provides an overview and introduction to responsive design using Bootstrap. It defines responsive design as designs that work on any resolution and are user friendly. It explains Bootstrap's grid system and standard device resolutions for extra small, small, medium, and large devices. Key Bootstrap components are summarized like the grid system, Glyphicons, and JavaScript plugins. The basic differences between HTML, CSS, and Bootstrap are outlined. Finally, the main purposes of using Bootstrap are listed as decreasing costs and code while providing an excellent and understandable user experience.

designbootstrap responsiveux
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner

HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website. If you have any doubt contact me for more details. WhatsApp:8008877940

htmlhtml basicsbasics of html
Differences Between Canvas and SVG
Geolocation
Many applications are based on user location
Finding nearby restaurants, fuel stations, etc.
Other applications want to gather information
about user locations for future use
HTML5 introduces a new Geolocation
specification
The user must agree to share his or her location
The browser will get the user’s coordinates and other
location information
Geolocation API
The Geolocation API includes the following main
functions:
getCurrentPosition(success, error, options)
watchId = watchPosition(success, error, options)
clearWatch(watchId)
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{ enableHighAccuracy: true,
maximumAge: 600000,
timeout: 0 });
Demo: Geolocation

Recommended for you

Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)

This document provides an overview of dynamic HTML (DHTML) and its components. DHTML uses HTML for content, CSS for styling and presentation, and scripting languages to manipulate and change the page after it loads. The three components are linked via the Document Object Model (DOM), which provides a standard interface. DHTML allows creating animations, games and applications by dynamically building web pages without plugins. It makes the web experience more interactive for users.

Css
CssCss
Css

This document provides an overview of Cascading Style Sheets (CSS) including: - CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more. - CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms. - There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags. - The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to

cascading style sheetswebstyle builder
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5

This document provides an overview of HTML5, including what it is, new elements and attributes, forms, media capabilities, and APIs. Key points include HTML5 simplifying the DOCTYPE, making small semantic changes to existing elements, removing obsolete elements, adding new semantic elements like article, section, header, footer, and aside, and introducing new form input types. It also covers new media elements like video and audio, the canvas element, local storage, and geolocation.

web devhtml5
Web Workers
Background workers that run scripts in parallel
with their main page
Independent of any user interface scripts
Allow thread-like operations that include
message-passing mechanisms for coordination
Expected to
Be long-lived
Have a high start-up performance cost
Have high per-instance memory cost
Initializing a Web Worker
<p>Result: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').
textContent = event.data;
};
</script>
Web Worker Script
What appears in the worker.js from the
previous slide
Use the postMessage function in order to send
messages to the UI thread
var n = 1;
while (n < 10000) {
postMessage(n);
n += 1;
}
Demo: Web Workers

Recommended for you

An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5

This document provides an introduction to HTML5: - It discusses backwards compatibility, progressive enhancement, and the <!DOCTYPE html> declaration in HTML5. - It describes the syntax options of HTML or XHTML and provides examples of new HTML5 elements like <video>, <canvas>, and various new <input> types. - It includes a full sample HTML5 page with new elements, semantics, and WAI-ARIA roles for accessibility.

html5 fosdem geek meet swdc
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5

This document provides an introduction to HTML5 and discusses some of its new features. It begins with an overview of HTML5 and its updated document structure, then describes several new HTML5 elements such as <header>, <nav>, <article>, <section>, <figure>, and <footer>. It also discusses new form attributes, input types, and multimedia capabilities such as audio, video, and geolocation. Finally, it briefly mentions features like drag and drop, SVG graphics, canvas drawing, and server-sent events.

HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5

This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.

Web Sockets
Bidirectional communication channel, over a
single TCP socket
Don’t allow raw access to the underlying
network
Uses the new WebSocket JavaScript object
Can replace long-polling and commet
The Web Sockets protocol RFC:
http://tools.ietf.org/html/rfc6455
Web Sockets – JavaScript API
Use the WebSocket object’s built-in events:
onopen: fired when a web socket has opened
onmessage: fired when a message has been received
onclose: fired when a web socket has been closed
socket.onopen = function() {
console.log(‘Socket Status: ‘ + socket.readyState + ‘ (open)’);
}
var socket = new WebSocket('ws://someURL');
Create a WebSocket object using a URL and a list of
protocols
URL must direct to a Web Sockets server endpoint (ws://)
Demo: Web Sockets
Other HTML5 APIs
HTML5 includes other APIs that you can
consider.
For example:
Web Notifications – display simple notifications to
the user
File API – exposes sandboxed sections of a user’s local
file system to web applications
IndexedDB – an index database on client-side
And many more

Recommended for you

HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics

This document provides an overview of HTML and CSS for website development. It discusses how websites use HTML for content, CSS for presentation, and JavaScript for behavior. It then covers basic HTML tags and structure, as well as CSS selectors, the box model, positioning, and floats. The goal is to teach the essentials of using HTML to structure content and CSS to style and position that content for websites.

htmlcsslearn
html5.ppt
html5.ppthtml5.ppt
html5.ppt

This document compares HTML4 and HTML5, discussing their versions over time. It notes that HTML5 introduced new structures like drag and drop, can embed video/audio without Flash, and handles inaccurate syntax, while HTML4 used older structures and required Flash for media. HTML5 also introduced new APIs, tags, and features like local storage that enhanced flexibility, while HTML4 had more limited traditional APIs and no local storage capability.

Html5
Html5Html5
Html5

A look at some of exciting features of HTML5, a presentation given by me at Universtiy Seminar in 7th Semester.

htmlhtml5geolocation
CSS3 - Media Queries
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (max-width:1199px)" type=“text/css" />
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (min-width:1301px)" type="text/css" />
<link href="Presentation.css" rel="stylesheet"
media="screen and (min-width:1200px) and (max-width: 1300px)"
type="text/css" />
CSS3 Colors & Opacity
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
CSS3 Backgrounds and Borders
Round corners with the border-radius property
Multiple background images per element
box-shadow property on block elements
Demo: CSS3 Enhancements
Other CSS3 Enhancements
CSS3 include much more:
CSS3 Animations
CSS3 Transformations
CSS3 Fonts
CSS3 Border and Background
CSS3 layouts:
Flexbox
Templating
Multi-Columns
More

Recommended for you

Html5
Html5Html5
Html5

The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.

HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps

This document provides an overview of HTML5 and CSS3 concepts for building web applications. It begins with defining what a web app is and its basic anatomy. It then covers new HTML5 structural tags, forms, multimedia capabilities like audio and video, offline data storage, geolocation, and canvas/SVG graphics. For CSS3, it discusses new selectors, the box model, positioning, fonts, visual effects, and media queries. Key topics are presented at a high level with examples to illustrate the main capabilities and uses of HTML5 and CSS3 for mobile web development.

mobile application developmentmobile apps
Web Apps
Web AppsWeb Apps
Web Apps

In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.

html5web applications
HTML5 Integration Strategies
HTML5 is HTML
you’re already most of the way there
Most visitors’ browsers can handle most things
Many strategies can be used to implement:
Lowest common denominator
Vertical slices – target a specific HTML5 functionality
JavaScript ‘Polyfills’ can be used to patch the holes
Using fallbacks strategies
Questions?
HTML5 Bottom Line
Develop once!
Multiple devices reach Multiple platforms reach
Resources
Session slide deck and demos –
HTML5Rocks - http://www.html5rocks.com
HTML5 Landscape Overview -
http://dret.typepad.com/dretblog/html5-api-
overview.html
My Website – http://www.gilfink.net
Follow me on Twitter – @gilfink

Recommended for you

HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher

Mobile applications Development - Lecture 10 HTML5 Refresher This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy). http://www.di.univaq.it/malavolta

momobile applicationsmobile application development
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb

This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.

Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb

This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.

Thank You
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net

More Related Content

What's hot

Html 5
Html 5Html 5
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
WebStackAcademy
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
jQuery
jQueryjQuery
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
Bala Narayanan
 
Bootstrap
BootstrapBootstrap
Bootstrap
Jadson Santos
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
 
Html frames
Html framesHtml frames
Html frames
eShikshak
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
Jhaun Paul Enriquez
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
Partnered Health
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
alyssa_lum11
 
Html ppt
Html pptHtml ppt
Html ppt
santosh lamba
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
 
Css
CssCss

What's hot (20)

Html 5
Html 5Html 5
Html 5
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
jQuery
jQueryjQuery
jQuery
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Html frames
Html framesHtml frames
Html frames
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
Html ppt
Html pptHtml ppt
Html ppt
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
 
Css
CssCss
Css
 

Viewers also liked

An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Sayed Ahmed
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
Niharika Gupta
 

Viewers also liked (6)

An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 

Similar to Introduction to HTML5

Html5
Html5Html5
Html5
Html5Html5
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
Ivano Malavolta
 
Web Apps
Web AppsWeb Apps
Web Apps
Tim Wray
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
Ivano Malavolta
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
Panagiotis Grigoropoulos
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Rômulo Reis de Oliveira
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
George Kanellopoulos
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
Muktadiur Rahman
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
php
phpphp
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
Html5
Html5Html5
Html5
mikusuraj
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
Html 5
Html 5Html 5
Html 5
Nguyen Quang
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
Caleb Jenkins
 

Similar to Introduction to HTML5 (20)

Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
Web Apps
Web AppsWeb Apps
Web Apps
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
php
phpphp
php
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Html5
Html5Html5
Html5
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Html 5
Html 5Html 5
Html 5
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
 

More from Gil Fink

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
Gil Fink
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
Gil Fink
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
Gil Fink
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
Gil Fink
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
Gil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
Gil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
Gil Fink
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
Gil Fink
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
Gil Fink
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
Gil Fink
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Web components
Web componentsWeb components
Web components
Gil Fink
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
Gil Fink
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
Gil Fink
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
Gil Fink
 

More from Gil Fink (20)

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Web components
Web componentsWeb components
Web components
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
 

Recently uploaded

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 

Recently uploaded (20)

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 

Introduction to HTML5

  • 1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE December 20-25, 2013 © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il Gil Fink Introduction to HTML5
  • 2. Agenda What is HTML5? The New Elements HTML5 JavaScript APIs CSS3 Q&A Summary
  • 3. What is HTML5? HTML5 ~= HTML + CSS3 + JavaScript API The future of the web Still under development A lot of features supported by modern browsers
  • 4. Why to use HTML5? Accessibility Searchability Interoperability Many new HTML elements and attributes JavaScript APIs and improved capabilities CSS capabilities
  • 5. What’s Under The HTML5 Umbrella?
  • 6. Demo: HTML5 Sites Examples
  • 7. Structural Elements No need for div elements all over the place New ways to mean what you actually meant to mean HTML 4 HTML 5
  • 8. Main Structural Elements And More DescriptionElement Defines an article (for example within a section)Article Footer elements contain information about their containing element: who wrote it, copyright, etc. Footer The page header shown on the page, not the same as <head>Header Collection of links to other pagesNav A part or chapter in a book, or essentially the content body of the page Section
  • 9. Inline Semantic Elements DescriptionElement Defines marked textMark Represents a scalar gauge providing a measurement within a known range, or a fractional value Meter Represents the completion progress of a taskProgress Represents the result of a calculationOutput Represents a specific moment in timeTime
  • 10. New Input Types Types Email Url Tel Number Range Search Color Date pickers (date, month, week, time, datetime, datetime- local)
  • 11. New Attributes DescriptionAttribute Accepted min and max valuesMin, Max Related to file input type, allows selection of multiple filesMultiple Specifies a pattern used to validate an input fieldPattern A short hint intended to aid the user with data entryPlaceholder Boolean attribute to indicate that the element is requiredRequired Limits allowed values, thus indicating the granularity requiredStep And many more
  • 12. Demo: HTML5 New Elements
  • 13. HTML5 <video> Element Enables to play video natively in the browser Video can be composited with anything else on the page HTML content, images, SVG graphics Include standard codecs like: h.264, ogg and webm Hardware accelerated, GPU-based decoding in most of the browsers <video src="video.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --> </video>
  • 14. HTML5 <audio> Element Enables to play audio natively in the browser Industry-standard MP3 and AAC audio Fully scriptable via the DOM <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --> </audio>
  • 15. Demo: Video and Audio Elements
  • 16. HTML5 Canvas A block element that allows developers to draw 2D or 3D graphics using JavaScript For 3D you use WebGL API <canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry. </canvas> <script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
  • 18. Scalable Vector Graphics Create and draw 2D vector graphics Vector images are composed of shapes instead of pixels Based on the SVG 1.1 2nd Edition Full specification Support for: Full DOM access to SVG elements Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views
  • 19. 2D Vector Graphics <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>
  • 22. Geolocation Many applications are based on user location Finding nearby restaurants, fuel stations, etc. Other applications want to gather information about user locations for future use HTML5 introduces a new Geolocation specification The user must agree to share his or her location The browser will get the user’s coordinates and other location information
  • 23. Geolocation API The Geolocation API includes the following main functions: getCurrentPosition(success, error, options) watchId = watchPosition(success, error, options) clearWatch(watchId) navigator.geolocation.getCurrentPosition(successCallback, errorCallback, { enableHighAccuracy: true, maximumAge: 600000, timeout: 0 });
  • 25. Web Workers Background workers that run scripts in parallel with their main page Independent of any user interface scripts Allow thread-like operations that include message-passing mechanisms for coordination Expected to Be long-lived Have a high start-up performance cost Have high per-instance memory cost
  • 26. Initializing a Web Worker <p>Result: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result'). textContent = event.data; }; </script>
  • 27. Web Worker Script What appears in the worker.js from the previous slide Use the postMessage function in order to send messages to the UI thread var n = 1; while (n < 10000) { postMessage(n); n += 1; }
  • 29. Web Sockets Bidirectional communication channel, over a single TCP socket Don’t allow raw access to the underlying network Uses the new WebSocket JavaScript object Can replace long-polling and commet The Web Sockets protocol RFC: http://tools.ietf.org/html/rfc6455
  • 30. Web Sockets – JavaScript API Use the WebSocket object’s built-in events: onopen: fired when a web socket has opened onmessage: fired when a message has been received onclose: fired when a web socket has been closed socket.onopen = function() { console.log(‘Socket Status: ‘ + socket.readyState + ‘ (open)’); } var socket = new WebSocket('ws://someURL'); Create a WebSocket object using a URL and a list of protocols URL must direct to a Web Sockets server endpoint (ws://)
  • 32. Other HTML5 APIs HTML5 includes other APIs that you can consider. For example: Web Notifications – display simple notifications to the user File API – exposes sandboxed sections of a user’s local file system to web applications IndexedDB – an index database on client-side And many more
  • 33. CSS3 - Media Queries <link href="DoNotDisplay.css" rel="stylesheet" media="screen and (max-width:1199px)" type=“text/css" /> <link href="DoNotDisplay.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /> <link href="Presentation.css" rel="stylesheet" media="screen and (min-width:1200px) and (max-width: 1300px)" type="text/css" />
  • 34. CSS3 Colors & Opacity CSS3 Color Alpha color with rgba() and hsla() color functions Transparency control with the opacity property CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elements
  • 36. Other CSS3 Enhancements CSS3 include much more: CSS3 Animations CSS3 Transformations CSS3 Fonts CSS3 Border and Background CSS3 layouts: Flexbox Templating Multi-Columns More
  • 37. HTML5 Integration Strategies HTML5 is HTML you’re already most of the way there Most visitors’ browsers can handle most things Many strategies can be used to implement: Lowest common denominator Vertical slices – target a specific HTML5 functionality JavaScript ‘Polyfills’ can be used to patch the holes Using fallbacks strategies
  • 39. HTML5 Bottom Line Develop once! Multiple devices reach Multiple platforms reach
  • 40. Resources Session slide deck and demos – HTML5Rocks - http://www.html5rocks.com HTML5 Landscape Overview - http://dret.typepad.com/dretblog/html5-api- overview.html My Website – http://www.gilfink.net Follow me on Twitter – @gilfink
  • 41. Thank You Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net