Post on 20-Jun-2015
transcript
HTML5
New thingsMohammed Qasem
•What is HTML 5 ??
HTML vs HTML5
• NO NEED FOR MORE PLUGIN
Some Rule ….
• The need for external plugins (like Flash) should be reduced
• Error handling should be easier than in previous versions
• Scripting has to be replaced by more markup
• HTML5 should be device-independent
• The development process should be visible to the public
HTML5 - New Features
• Some of the most interesting new features in HTML5 are:
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media playback
HTML5 - New Features
• Support for local storage• New content-specific elements,
like <article>, <footer>, <header>, <nav>, <section>
• New form controls, like calendar, date, time, email, url, search
HTML VS HTML5: NEW FEATURES
HTML5
DOCTYPE
• HTML5–<!DOCTYPE html>
• HTML–<!DOCTYPE html PUBLIC "-//W3C//
DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• HTML Tags• <div>• <p>• <dl>,*<dt>,*<dd>• <ol>,*<ul>,*<li>• <fieldset>• <input>
• HTML5 Tags• <article>• <aside>• <section>• <header>,*<hgroup>• <nav>• <footer>• <datalist>• <progress>• <time>
<Figure>
• The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<Figure>
• HTML5– <figure>
<img src="path/to/image" alt="About image" /><figcaption><p>This is an image of something interesting. </p></figcaption>
– </figure>
• HTML– N/A
“Type” – Links & Js
• HTML5– Not necessary • <script src="path/to/script.js"></script>
• HTML– Necessary• <script src="path/to/script.js“
type=“text/javascript”></script>
“” – ID’s & Classes
• HTML5– Not necessary • <p class=myClass id=someId>
• HTML– Necessary• <p class=“myClass” id=“someId”>
UL Editable
• HTML5–<ul contenteditable=true>
• HTML– N/A
Type=“Email”
• HTML5–<input id="email" name="email"
type="email" />
• HTML– N/A
Placeholders
• HTML5–<input name="email" type="email"
placeholder=“mail@domain.com" />
• HTML– N/A
Semantic Tags
• HTML5–<Nav>–<Header>–<Article>• <Section>
–<Aside>–<Footer>
• HTML– N/A
html5 Recursiveness
• HTML5 allows for multiple sections and articles within a single page. Each section/article can have its own header, footer, aside and nav.
Required
• The required attribute is a boolean attribute.
• HTML5–<input type="text" name="someInput"
required>
• HTML– N/A
Autofocus
• HTML5–<input type="text" name="someInput"
placeholder="Douglas Quaid" required autofocus>
• HTML– N/A
HTML5 Registration Form
• <form>• <input name="Full Name"• placeholder="Enter your full4name"• Autofocus required>• <input type="email“ name="Email"• placeholder="Enter your email address"• required>• <input type="url“ name="URL"• placeholder="What’s your website• address?">• <input type="submit“ value="Register">• </form>
Audio
• HTML5–<audio autoplay="autoplay"
controls="controls"><source src="file.ogg" /><source src="file.mp3" /> <a href="file.mp3">Download this file.</a>
–</audio>
• HTML– N/A
Audio
• Supported formats
Video
• HTML5–<video controls preload>
<source src=“video.ogv" type="video/ogg" /><source src=“video.mp4" type="video/mp4”/><p> Your browser is old. <a href=“video.mp4">Download this video instead.</a> </p>
–</video>
• HTML– N/A
Video
• Supported formats
Demo
More help
• http://joshduck.com/periodic-table.html