Understanding HTML5 Basics
Explore the new HTML5 elements, features, and guidelines, including the importance of the doctype declaration, language specification, metadata in the head section, and structural elements like sections, navigation, articles, headers, and footers. Gain insights into creating well-structured web pages that comply with HTML5 standards for optimal rendering and compatibility.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
HTML5 overview whats new? New HTML5 elements New HTML5 features Guided Demonstrations Forms Video Geolocation Local/Offline Storage Canvas
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
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>
The root element should contain the (human) language for the document: <html lang="en">
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>
SECTION defines sections of a web page NAV defines navigational elements / navbars 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)
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
IE 8 (and earlier) doesnt 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>
<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>
Browser IE 9 Firefox Chrome Safari* Opera MP3 Wav Ogg * *Safari supports anything that QuickTime supports
Browser IE 9 Firefox Chrome Safari* Opera MP4 WebM * Ogg * *Safari supports anything that QuickTime supports
Audacity: http://audacity.sourceforge.net/ Firefogg: http://firefogg.org/ Goldwave: http://www.goldwave.com/
Miro: http://www.mirovideoconverter.com/ Handbrake: http://handbrake.fr/ Firefogg: http://firefogg.org/
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
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 <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 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>
LocalStorageis used to store information locally on the users 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>
Dive Into HTML5 http://diveintohtml5.info In-class examples: http://web.stanford.edu/group/csp/ cs22/html5/ W3C s HTML5 information: http://www.w3.org/TR/html5 CanIUse: http://caniuse.com/ HTML5Doctor: http://www.html5doctor.com/ Web Hypertext Applications Technology Working Group: http://www.whatwg.org/ W3Schools: http://www.w3schools.com
