HTML5, Overview and new features

Download Report

Transcript HTML5, Overview and new features 

HTML5, OVERVIEW AND
NEW FEATURES
PowerPoint by Mason O’Mara
Introduction







Quick HTML overview
History
Semantics and structural elements
HTML5 multimedia, video and audio
Flash vs. HTML5
Extended HTML5 forms
HTML5 graphics and animations
Quick HTML overview





HTML – Hypertext Markup Language
Markup language used to construct web pages
Web pages connected to other web pages through
hyperlinks
Developed and overseen primarily by World Wide
Web Consortium (W3C)
Structure separated from style and scripting
HTML elements
The following is an example of a basic HTML element
with an attribute, value, and content.
<a href=“http://www.uwplatt.edu” > UW-Platteville </a>
• Element start tag
• Attribute
• Value
• Element content
• Element ending tag
HTML document

An example of a basic web page:
History





1989 : Tim Berners-Lee working at CERN finds the need
for a global hypertext system
1991 : Berners-Lee shows his hypertext system, named
HTML, to the scientific community
1991 – 1993 : Various names further develop HTML
1994 : HTML2 is released as a means to standardize
the growing language. Netscape developed. W3C
(World Wide Web Consortium) is formed
1995 : Microsoft’s Internet Explorer developed.
JavaScript initially released.
History (cont.)








1996 : CSS (Cascading Style Sheets) initially released.
1997 : HTML3.2 released, first completely W3C
developed HTML version
1999 : HTML4.01 released
2004 : WHATWG (Web Hypertext Application
Technology Work Group) starts HTML5 development
2006 : W3C joins HTML5 development
2008 : First working draft of HTML5 released
2010 : Steve Jobs publishes “Thoughts on Flash”
2012: HTML5 becomes a W3C Candidate
Recommendation
HTML5 - <!DOCTYPE>


<!DOCTYPE> - The HTML document’s DOCTYPE is the
first line declared in the document and tells the browser
what version of HTML is being used
HTML4.01 had multiple DOCTYPEs:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML5 has only one, simple DOCTYPE:

<!DOCTYPE html>
HTML5 – Semantics and Structural
Elements

HTML5 introduces numerous new elements to aid in
properly structuring HTML5 documents:
 <article>
- an standalone piece of information
 <section> - a section of text, i.e. chapter
 <header> - header information, i.e. introduction
 <footer> - footer information, i.e. copyright information
 <nav> - navigational tools used for a website
 <figure> - structural element for figures and tables
 For a full list of these structural elements visit the W3C
HTML5 documentation (in PowerPoint notes)
HTML5 – Structural Example
HTML – Non-Structural Example
HTML5 - Video

The newly introduced <video> tag allows for the inbrowser viewing of the following video compressions:
MP4
 Ogg
 WebM


Attributes include:
width, height – specify the size of the video player
 src – defines the video source
 controls – show controls for the video
 autoplay – start the video as soon as possible
 loop – automatically replay the video upon competition

HTML5 – Video (cont.)
HTML5 <video> audio compressions browser
compatibility
Browser
MPEG4
Ogg
WebM
Chrome 6+
YES
YES
YES
Firefox 3.6+
NO
YES
YES
Opera 10.6+
NO
YES
YES
Safari 5+
NO
YES
YES
IE 9+
YES
NO
NO
HTML5 <video> syntax:
<video src=“example.ogg” width=“320” height=“240” controls autoplay></video>
HTML5 – Source

The <source> element is used to specify source files
for the <audio> and <video> elements
 This
allows for multiple sources for one <video>
element
HTML5 <source> syntax:
<video width=“320” height=“240” controls>
<source src=“example.mp4” type=“video/mp4”>
<source src=“example.webm” type=“video/webm”>
<source src=“example.ogg” type=“video/ogg”>
</video>
HTML5 - Track

The <track> element allows for text tracks to be
loaded into <audio> and <video> elements
HTML5 <source> syntax:
<video width=“320” height=“240” controls>
<source src=“example.mp4” type=“video/mp4”>
<track src=“example.fr.srt” srclang=fr kind=subtitles label=“FrenchSubs” >
</video>
HTML5 – Audio

The newly introduced <audio> tag allows for the
in-browser playback of the following audio
compressions:
 MP3
 Ogg
 WAV

Many of the attributes included in the <video>
element are also available for the <audio>
element
HTML5 – Audio (cont.)
HTML5 <audio> audio compressions browser
compatibility
Browser
MP3
WAV
Ogg
Chrome 6+
YES
YES
YES
Firefox 3.6+
NO
YES
YES
Opera 10.6+
NO
YES
YES
Safari 5+
YES
YES
NO
IE9+
YES
NO
NO
HTML5 <audio> syntax:
<audio src=“example.mp3” width=“320” height=“240” controls autoplay></audio>
HTML5 Multimedia vs. Flash

HTML5:
 Pros:
Standard markup language, cross-platform,
access to DOM and APIs, no thrid-party plug-ins
 Cons: No built-in fullscreen, not all users use HTML5
ready browsers, long-term limitations of
standardization, cannot display live-streaming, new
standards can be difficult to adapt

Adobe Flash
 Pros:
Much wider userbase, very familiar
 Cons: Third-party plug-in, not supported on some
devices, not a web standard
HTML5 – Extended Forms

datalist
A
datalist allows autocompletion in an input with a
given list of autocomplete options

required
 the
required attribute forces the user to enter in data
for the input before committing the form to the server

output
 the
output element allows for calculation and output of
this calculation using form fields
HTML5 – Extended Forms (cont.)

Many new values have been added for the <input>
element’s type attribute:
 date,
time, and datetime – display datetime pickers
 number – displays a spinner for inputting a number
 email, url, telephone – these types of inputs, among
others, are used for data validation
 range – displays a movable slider to specify values
 color – displays a color picker for choosing color values
in hex
HTML5 – Graphics and Animations


HTML5 allows for the rendering of graphics and
animations in-browser
One way HTML5 accomplishes this is through the
new <canvas> element
 <canvas>
creates a 2D canvas in which graphics can
be drawn via scripting
 JavaScript
 WebGL
 SVG
HTML5 – Graphics and Animations

CSS3 is fully supported in HTML5 and improves on
styling options available
 Skewing,
rotation, and scaling can be done in CSS3
 CSS3 allows for easily downloadable fonts locally
stored on the web-server
 Animations and transitions can be coded using CSS3
 Page layouts can easily be done using CSS3
HTML5 - Conclusion

HTML5 introduces:
 Improved
semantics to web documents
 Multimedia elements, including <video> and <audio>
 Extended information gathering via improved forms
 Graphics and animations without the need for thirdparty plugins
HTML5 – Further Reading

W3C Documentation:
 http://www.w3.org/html/wg/drafts/html/master/

W3Schools (unrelated to W3C), practical tutorials:
 http://www.w3schools.com/html/html5_intro.asp