Mark Branom, Continuing Studies. HTML5 overview – what’s new? New HTML5 elements New HTML5...
22
Overview of HTML5 Mark Branom, Continuing Studies
-
Upload
christopher-brandon-pierce -
Category
Documents
-
view
223 -
download
3
Transcript of Mark Branom, Continuing Studies. HTML5 overview – what’s new? New HTML5 elements New HTML5...
Overview of HTML5
Mark Branom, Continuing Studies
Topics
HTML5 overview – what’s new? New HTML5 elements New HTML5 features
Guided Demonstrations Forms Video Geolocation Local/Offline Storage Canvas
New HTML5 Syntax
New !doctype New elements (tags)
Who decided? http://www.whatwg.org/ http://www.w3.org/
Complete listing of what’s new: http://www.w3.org/TR/html5-diff
!doctype
Direct from the WhatWG (Web Hypertext Applications Technology Working Group)
http://www.whatwg.org/specs/web-apps/current-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:
<!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 HTML5 elements
SECTIONdefines 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
New HTML5 elements (continued)
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 <address> tag
TIME defines a date/time -- e.g., when the document was created
MARK defines text that should be highlighted for some reason
Internet Explorer 8 (and earlier) 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:
<script>document.createElement("article");document.createElement("section");document.createElement("nav");document.createElement("header");document.createElement("footer");</script>
New HTML5 features
Video and Audio
<video id="movie" width="xx" height="yy"> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="movie.mp4" type="video/mpeg" /></video>
<audio id="sound"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> <source src="audio.wav" type="audio/wav" /></audio>
Audio support
Browser MP3 Wav OggIE 9
Firefox Chrome Safari* *Opera
*Safari supports anything that QuickTime supports
Video support
Browser MP4 WebM OggIE 9
Firefox Chrome Safari* * *Opera
*Safari supports anything that QuickTime supports
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.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 + "<br />Longitude: " + position.coords.longitude; }</script>
Canvas
Canvas is used to draw graphics using JavaScript.
<canvas id="CanvasExample">Your browser does not support the canvas element</canvas>
<script type="text/javascript">var c=document.getElementById('CanvasExample');var ctx=c.getContext('2d');ctx.fillStyle='#820000';ctx.fillRect(0,0,50,50);</script>
Local Storage/Offline Storage LocalStorage 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") { 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..."; }</script>
Resources
Dive Into HTML5http://diveintohtml5.info
W3C’s HTML5 information:http://www.w3.org/TR/html5
Web Hypertext Applications Technology Working Group:http://www.whatwg.org/
In-class examples:http://web.stanford.edu/group/csp/cs22/html5/
CanIUse:http://caniuse.com/
HTML5Doctor:
http://www.html5doctor.com/
W3Schools:
http://www.w3schools.com
