Transcript HTML5 defined

The HTML5 logo was introduced by W3C in 2010
DEFINING
HTML5
THE DIFFERENCE BETWEEN HTML5
FAMILY & SPECIFICATION
HTML5 family is a combination of –
 new html mark up tags,
 CSS3 properties,
JavaScript,
 And several supporting but technically
separate technologies such as Geolocation,
Canvas, Web storage, Audio, Video etc., (ongoing
still)
HTML5 Specification is the new markup
elements (that provide syntax(the organization of words which
provide the structure of the language, just like meaningful words make up
a sentence)
that work in conjunction with traditional
HTML tags.
TIMELINE OF HTML5
HTML5 started as a Web app that
shared features with existing
browsers and proposed new
features including APIs that form the
web family.
In 2004 – WHATWG (Web Hypertext
Application Technology Working Group) was
formed to create better HTML designed to
build new and compatible Web apps with
existing browsers.
XHTML borrowed heavily from
XML but still didn’t meet the needs
of web developers in several
technical areas.
Near completion in 1998 –
HTML4 with CSS and
JavaScript was used
successfully by Web Designers
and Developers for years.
HTML4 was ended by W3C by starting
XHTML which was very similar but
stricter in language for example, correct
grammar as apposed to slang.
WHAT’S SO SPECIAL ABOUT HTML5?
• HTML alone could not play audio and video without
browser plugin such as Flash or Quicktime
• HTML had no ability to store data on a user’s
computer without a scripting language or another
technology.
• HTML did not have a drawing format; graphics and
animations were supplied as image files through
plugins such as Flash, Java, or Silverlight.
• Growing expectations for web browsers to multi
task at high performance has rendered the current
HTMLanguage limited.
LET’S COMPARE (AN OVERVIEW)
In the old html for example, the code that defines the head
of a web page would appear as follows –
<div id=“header”> This is my header </div>
The code in red is referred to as CSS Id that defines the
width, height and background color of the header and if
you wanted to style the header in CSS, you would code it
as follows –
#header {
width: 960px;
height: 100px;
background-color: gray;
}
LET’S COMPARE
CNT’D
In the new HTML5 for example, the code that defines the
head of a web page would appear as follows –
<header> This is my header </header>
And if you wanted to style the header in CSS, you would
code it as follows –
header {
width: 960px;
height: 100px;
background-color: gray;
}
Refer to page 14 of chapter 1 for a detailed explanation of CSS
NOW, FOR THE KEY ADDITIONS TO
HTML5 SYNTAX
• The HTML5 specifications now include tags
that let you incorporate multimedia without
browser plugins.
• The <video> and <audio> tags let you
embed the code as you do with the <img>
tag.
• The <canvas> tag could supply HTML with
native drawing and animation format,
currently found in Flash movies.
Refer to page 15 of chapter 1 for a complete audio and video tags.
NOW, FOR THE KEY ADDITIONS TO
HTML5 SYNTAX – CNT’D
• With Forms, currently all problems are solved
with JavaScript or another scripting however, the
new Web Forms in HTML5 will make working
with forms easier with a simple code as follows
<input type=“email” required>
• <figure> and <figcaption> elements are used to
label images on your pages.
• The <nav> element easily groups a set of
navigation elements into a logical section.
• New tags to address the <i>, <b>, <small>,
<strong> and <abbr> now have new meanings
and uses in HTML5.
HTML5 APIs and supporting technologies
• APIs (Application Programming Interfaces)
are very significant in the world of HTML5.
• APIs are the means with which
applications are created using pre-built
components and are not unique to web
development or even to scripting
languages.
• You’ve most likely already used APIs as an
end user on Twitter or YouTube
HTML5 APIS AND SUPPORTING
TECHNOLOGIES CNT’D
• The official documentation for these APIs are separate
from the official documentation of HTML5 .
• To examine code examples visit the following sites –
Drag and Drop
https://developers.whatwg.org/dnd.html#dnd
Web Storage
https://html.spec.whatwg.org/multipage/webstorage.html
Microdata
https://developers.whatwg.org/microdata.html#microdata
Geolocation
http://dev.w3.org/geo/api/spec-source.html#introduction
HTML5 APIs and supporting technologies cnt’d
• Web Workers is another API, grouped
into the HTML5 family.
• Web Workers are scripts that run on a
separate thread than user interaction of
clicking, scrolling and dragging.
• This separate processing of tasks creates
a more seamless environment for the
user.
• Web Workers are a fairly new
development and not yet supported by all
browsers.
HTML5 APIs and supporting technologies
cnt’d
• Web storage has been improved in more
powerful ways. For example, browser cookies
let websites store small pieces of data on your
computer system for faster retrieval next time.
• Cookies are limited in what they can do and
not very easy for designers to use.
• Web Storage updates the model to allow for
greater storage space for modern applications
• Web Storage makes the addition of storage
features more accessible in two ways via
localStorage and sessionStorage.
HTML5 and CSS cnt’d
• CSS or cascading style sheet is a coding program that is different and yet
closely related to HTML5.
• CSS is an evolving language, identified by version numbers, with the latest
version of CSS (3.0) having evolved alongside HTML5.
• In the past Flash was used to animate objects in the browser. CSS3
transitions along with HTML5 Canvas can now help create interactive and
animated elements on a page.
• CSS transform property allows, rotation, scaling, skewing of objects on a
page.
• CSS backgrounds, borders, RGBa colors, gradients, drop shadows allow
visual enhancements to the style.
• Web developers and designers had limited choice in font-faces however,
with @font-face web fonts, they can specify a particular font, provide a
source link to allow the browser to download it.
HTML5 IS IN TRANSITION
• Technologies behind HTML5 are in transition and
might be available one day and be replaced with
another, next.
• In addition, each of the major browsers today
such as Microsoft Internet Explorer or IE, Mozilla
Firefox, Apple Safari, Google Chrome and Opera
have different support for HTML5 features.
• Launch Safari, Firefox and Chrome one at a time,
copy and paste the link below in the url box to
test how compatible each browser is with HTML5
today.
https://html5test.com/
HTML5 in complete use today
• Mobile devices and smartphones are active
platforms for HTML5 docs and web
applications today.
• More and more platforms are having to
conform to HTML5 because of user
demand and higher expectations for high
performance.