Transcript HTML 5
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. UW-Platteville • • • • • 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 -
- 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:
HTML5 – Structural Example
HTML – Non-Structural Example
HTML5 - Video
The newly introduced
HTML5 – Video (cont.)
HTML5
Browser
Chrome 6+ Firefox 3.6+ Opera 10.6+ Safari 5+ IE 9+
MPEG4
YES NO NO NO YES
Ogg
YES YES YES YES NO
WebM
YES YES YES YES NO HTML5
HTML5 – Source
The
HTML5 - Track
The
HTML5 – Audio
The newly introduced
HTML5 – Audio (cont.)
HTML5
Browser
Chrome 6+ Firefox 3.6+ Opera 10.6+ Safari 5+ IE9+
MP3
YES NO NO YES YES
WAV
YES YES YES YES NO
Ogg
YES YES YES NO NO HTML5
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 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
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
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