HTML 5
advertisement
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
