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 UW-Platteville 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 -  - 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:   HTML5 has only one, simple DOCTYPE: 

HTML5 – Semantics and Structural Elements  HTML5 introduces numerous new elements to aid in properly structuring HTML5 documents:  - an standalone piece of information  - a section of text, i.e. chapter  - header information, i.e. introduction  - footer information, i.e. copyright information  - navigational tools used for a website  - 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 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.) BrowserMPEG4OggWebM Chrome 6+YES Firefox 3.6+NOYES Opera 10.6+NOYES Safari 5+NOYES IE 9+YESNO HTML5 audio compressions browser compatibility HTML5 syntax:

HTML5 – Source  The element is used to specify source files for the and elements  This allows for multiple sources for one element HTML5 syntax:

HTML5 - Track  The element allows for text tracks to be loaded into and elements HTML5 syntax:

HTML5 – Audio  The newly introduced tag allows for the in-browser playback of the following audio compressions:  MP3  Ogg  WAV  Many of the attributes included in the element are also available for the element

HTML5 – Audio (cont.) BrowserMP3WAVOgg Chrome 6+YES Firefox 3.6+NOYES Opera 10.6+NOYES Safari 5+YES NO IE9+YESNO HTML5 audio compressions browser compatibility HTML5 syntax:

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 element’s type attribute:  date, time, and datetime – display datetime pickers  number – displays a spinner for inputting a number  , 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 element  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 and  Extended information gathering via improved forms  Graphics and animations without the need for third- party plugins

HTML5 – Further Reading  W3C Documentation:   W3Schools (unrelated to W3C), practical tutorials: 