Overview of HTML 5 Mark Branom Continuing Studies
Overview of HTML 5 Mark Branom, Continuing Studies
Topics �HTML 5 overview – what’s new? New HTML 5 elements New HTML 5 features �Guided Demonstrations Forms Video Geolocation Local/Offline Storage Canvas
New HTML 5 Syntax �New !doctype �New elements (tags) �Who decided? http: //www. whatwg. org/ http: //www. w 3. org/ �Complete listing of what’s new: http: //www. w 3. org/TR/html 5 -diff
!doctype � Direct from the What. WG (Web Hypertext Applications Technology Working Group) http: //www. whatwg. org/specs/web-apps/currentwork/multipage/syntax. html#the-doctype “DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications. ” � HTML 5 doctype: <!doctype html>
Root element <html> �The root element should contain the (human) language for the document: <html lang="en">
Head element <head> � The <head> contains meta information – information about the web page. <head> <meta charset="utf-8" /> <link rel="stylesheet" href="cssfilelocation. css" /> <link rel="alternate" type="application/rss+xml" title="RSS feed" href="feedlocation. xml" /> <link rel="shortcut icon" href="faviconlocation. ico" /> <link rel="nofollow" /> </head>
New HTML 5 elements � SECTION defines sections of a web page � NAV defines navigational elements / nav bars � ARTICLE defines a self-contained composition – like a blog posting, a journal article, etc. � ASIDE defines a section that is related to an article � MAIN defines the main section (HTML 5. 1)
New HTML 5 elements (continued) �HGROUP defines the heading of a section, grouping h 1 -h 6 �HEADER defines the introductory or navigational parts of a page �FOOTER defines the ending or navigational parts of a page, often containing the <address> tag
Internet Explorer 8 (and earlier) � IE 8 (and earlier) doesn’t understand the new HTML 5 elements. � To use the HTML 5 elements and have them work properly in IE, you need to “teach” IE to use them by writing a Java. Script that creates the elements: <script> document. create. Element("article"); document. create. Element("section"); document. create. Element("nav"); document. create. Element("header"); document. create. Element("footer"); </script>
New HTML 5 features
Video and Audio <video id="movie" width="xx" height="yy"> <source src="movie. webm" type='video/webm; codecs="vp 8, vorbis"' /> <source src="movie. ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="movie. mp 4" type="video/mpeg" /> </video> <audio id="sound"> <source src="song. mp 3" type="audio/mpeg" /> <source src="song. ogg" type="audio/ogg" /> <source src="audio. wav" type="audio/wav" /> </audio>
Audio support Browser IE 9 Firefox Chrome Safari* Opera MP 3 Wav *Safari supports anything that Quick. Time supports Ogg *
Video support Browser IE 9 Firefox Chrome Safari* Opera MP 4 Web. M * *Safari supports anything that Quick. Time supports Ogg *
Tools to convert audio �Audacity: http: //audacity. sourceforge. net/ �Firefogg: http: //firefogg. org/ �Goldwave: http: //www. goldwave. com/
Tools to convert video �Miro: http: //www. mirovideoconverter. com/ �Handbrake: http: //handbrake. fr/ �Firefogg: http: //firefogg. org/
Forms New form <input> types: EMAIL: single-line textbox for email · URL: single-line textbox for URL · NUMBER: single-line textbox for a number · RANGE: single-line text box for a range of numbers · DATE/MONTH/WEEK/TIME/DATETIME: calendar date/month/week/time/date and time · SEARCH: single-line text box for searching · COLOR: picking a color
New form attributes �Modifying the FORM tag autocomplete – browser automatically completes values the visitor has previously entered novalidate – form does NOT validate
New form attributes �Modifying the INPUT tag autofocus – field gets focus when page loads form – lets you specify which form this field belongs formaction – overrides the action attribute formmethod – overrides the method attribute novalidate – field does NOT validate required– field must be filled out to validate
Geolocation � Geolocation locates the user using a new property: navigator. geolocation <script> var x=document. get. Element. By. Id("demo"); function get. Location() { if (navigator. geolocation) { navigator. geolocation. get. Current. Position(show. Position); } else{x. inner. HTML="Geolocation not supported by this browser. "; } } function show. Position(position) { x. inner. HTML="Latitude: " + position. coords. latitude + " Longitude: " + position. coords. longitude; } </script>
Canvas �Canvas is used to draw graphics using Java. Script. <canvas id="Canvas. Example">Your browser does not support the canvas element</canvas> <script type="text/javascript"> var c=document. get. Element. By. Id('Canvas. Example'); var ctx=c. get. Context('2 d'); ctx. fill. Style='#820000'; ctx. fill. Rect(0, 0, 50); </script>
Local Storage/Offline Storage � Local. Storage is used to store information locally on the user’s computer/device. It’s designed to be a better choice than cookies. <div id="example"></div> <script> if(typeof(Storage)!=="undefined") { local. Storage. item 1="item number 1"; document. get. Element. By. Id("example"). inner. HTML="First Item: " + local. Storage. item 1; } else { document. get. Element. By. Id("example"). inner. HTML="Hmmm, your browser does not support local storage. . . "; } </script>
Resources � Dive Into HTML 5 http: //diveintohtml 5. info � W 3 C’s HTML 5 information: http: //www. w 3. org/TR/html 5 � Web Hypertext Applications Technology Working Group: http: //www. whatwg. org/ � In-class examples: http: //web. stanford. edu/group/csp/ cs 22/html 5/ � Can. IUse: http: //caniuse. com/ � HTML 5 Doctor: http: //www. html 5 doctor. com/ � W 3 Schools: http: //www. w 3 schools. com
- Slides: 22