Html5

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=“[email protected]" />

• 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

Date post:	20-Jun-2015
Category:	Technology
Upload:	mohammed-qasem
View:	94 times
Download:	2 times

Html5

Technology