Embed Size (px)
Citation preview
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
<a href=“http://www.uwplatt.edu” > UW-Platteville </a>
• Element start tag• Attribute• Value• Element content• Element ending tag
The following is an example of a basic HTML element with an attribute, value, and content.
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 in-browser 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.)
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> audio compressions browser compatibility
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.)
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> audio compressions browser compatibility
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 third-party plugins
HTML5 – Further Reading
W3C Documentation: http://www.w3.org/html/wg/drafts/html/mas
ter/ W3Schools (unrelated to W3C), practical
tutorials: http://www.w3schools.com/html/html5_intro
.asp
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://img.dokumen.tips/doc/110x75/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
