Mark Branom, Continuing Studies
HTML5 overview – what’s new? New HTML5 elements New HTML5 features Guided Demonstrations Forms Video Geolocation Local/Offline Storage Canvas
New !doctype New elements (tags) Who decided? Complete listing of what’s new:
Direct from the WhatWG (Web Hypertext Applications Technology Working Group) work/multipage/syntax.html#the-doctype work/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.” HTML5 doctype:
The root element should contain the (human) language for the document:
The contains meta information – information about the web page.
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
HGROUP defines the heading of a section, grouping h1-h6 HEADER defines the introductory or navigational parts of a page FOOTER defines the ending or navigational parts of a page, often containing the tag TIME defines a date/time -- e.g., when the document was created MARK defines text that should be highlighted for some reason
IE 8 (and earlier) doesn’t understand the new HTML5 elements. To use the HTML5 elements and have them work properly in IE, you need to “teach” IE to use them by writing a JavaScript that creates the elements: document.createElement("article"); document.createElement("section"); document.createElement("nav"); document.createElement("header"); document.createElement("footer");
BrowserMP3WavOgg IE 9 Firefox Chrome Safari* ** Opera *Safari supports anything that QuickTime supports
BrowserMP4WebMOgg IE 9 Firefox Chrome Safari* **** Opera *Safari supports anything that QuickTime supports
Audacity: Firefogg: Goldwave:
Miro: Handbrake: Firefogg:
New form types: single-line textbox for 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
Modifying the FORM tag autocomplete – browser automatically completes values the visitor has previously entered novalidate – form does NOT validate
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 locates the user using a new property: navigator.geolocation var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; }
Canvas is used to draw graphics using JavaScript. Your browser does not support the canvas element var c=document.getElementById('CanvasExample'); var ctx=c.getContext('2d'); ctx.fillStyle='#820000'; ctx.fillRect(0,0,50,50);
LocalStorage is used to store information locally on the user’s computer/device. It’s designed to be a better choice than cookies. if(typeof(Storage)!=="undefined") { localStorage.item1="item number 1"; document.getElementById("example").innerHTML="First Item: " + localStorage.item1; } else { document.getElementById("example").innerHTML="Hmmm, your browser does not support local storage..."; }
Dive Into HTML5 W3C’s HTML5 information: Web Hypertext Applications Technology Working Group: In-class examples: cs22/html5/ cs22/html5/ CanIUse: HTML5Doctor: W3Schools: