Introduction to HTML5

INTRODUCTION
HTML 5 is the new standard for HTML. HTML5 is still a work in progress HTML 5 is a cooperation between the World Wide Web Consortium(W3C) and the Web Hypertext Application Technology Working Group (WHATWG). New features of HTML 5 are based on HTML, CSS, DOM, and JavaScript. Reduce the need for external plug-ins (like Flash).

HTML 5 New Input Types

Color Your favorite color: <input type="color name="favcolor"/> Date Datetime Datetime-local Email E-mail: <input type="email name="usrmail"/> Month Number Range Search Tel

Telephone: <input type="tel name="usrtel"/> Time url

HTML 5 New Input Types

<datalist> The list is created with <option> elements inside the <datalist>. The <datalist> element specifies a list of options for an input field.
<form action="demoform.htmlmethod="get"> Webpage: <input type="url list="url_list name="link"/> <datalist id ="url_list"> <option label = "W3Schools value=http://www.w3schools.com /> <optionlabel="Google value="http://www.google.com"/> <optionlabel="Microsoft value="http://www.microsoft.com"/> </datalist> <inputtype="submit"/> </form>

HTML 5 New Input Types

<keygen> <form action ="demokeygen.html method="get"> Username: <input type="text name="usr_name"/> Encryption:<keygen name="security"/> <input type="submit"/> </form>

HTML 5 New Input Types

<output> <form oninput ="x.value=parseInt(a.value) + parseInt(b.value)">0 <input type="range name="a value="50"/> 100+ <input type="number name="b value="50"/> =<output name="x for="ab"> </output> </form>

HTML 5 New Form Attribute

Autocomplete Novalidate 1) Autocomplete <form action="demo_form.html method="get autocomplete= "on"> Firstname: <input type="text name="fname"/><br/> E-mail: <input type="email name="email"/> <br/> <inputtype="submit"/> </form> 2)Novalidate <form action="demo_form.html novalidate="novalidate"> E-mail: <input type="email name="user_email"/> <inputtype="submit"/> </form>

New input Attribute

Autocomplete Autofocus Form Form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) Height and width List min, max and step
<input type="number name="points min="0 max="10 step="3"/>

Multiple Placeholder
<input type="search name="user_search placeholder="SearchW3Schools"/>

required

HTML 5 Global Attribute

Contenteditable
<p contenteditable="true"> This is a paragraph. It is editable.</p>

Contextmenu <element contextmenu="menu_id"> Draggable(true) Dropzone <elementdropzone="copy|move|link"> Hidden Spellcheck

Firstname:<input type="text name="fname spellcheck="true"/>

HTML5 Tags
<fieldset> <form> <fieldset disabled=disabled> <legend>Personalia:</legend> Name:<inputtype="text"/><br/> Email:<inputtype="text"/><br/> Date of birth: <inputtype="text"/></fieldset> </form> NewAttributes 1)Disabled 2)Form 3)Name

<video>
<video width="320 height="240 controls="controls"> <source src="movie.mp4 type="video/mp4"/> </video>

New Attributes
1)Autoplay 2)Controls(play,pause.seeking,volume,caption,track) 3)Height 4)Loop 5)Muted 6)Poster 7)Preload <video controls="controls preload="none"> 8)Width 9)src

<details>
The open attribute is a boolean attribute. When present, it specifies that the details should be visible (open) to the user. <details open="open"> <summary>Copyright1999-2011.</summary> <p>-by Refsnes Data. All Rights Reserved. </p> <p>All content and graphics on this web site are the property of the company Refsnes Data. </p> </details>

<area>
<img src="planets.gif width="145 height="126 alt="Planets usemap="#planetmap"/> <map name="planetmap"> <area shape="rect coords="0,0,82,126 href="sun.htm alt="Sun"/> <area shape="circle coords="90,58,3 href="mercur.htm alt="Mercury"/> </map>

NewAttributes:1)Hreflang 2)Media <img src="planets.gif width="145 height="126 alt="Planets usemap="#planetmap"/> <map name="planetmap"> <area shape="rect coords="0,0,82,126 alt="Sun"href="sun.htm media="screen and (min-color-index: 256)/> </map> 3)Rel

<select>
New Attributes 1)Autofocus: It specifies that the drop-down list should automatically get focus when the page loads. 2)Form: <form action="demo_form.asp id="carform"> Firstname: <input type="text name="fname"/> <br/> <input type="submit"/> </form> <select name="carlist form="carform"> <option value="volvo"> Volvo </option> <option value="saab">Saab</option> </select>

<button> <button type="button"> ClickMe!

</button>
NewAttributes:1)Autofocus 2)Disabled 3)Form 4)Formaction 5)Formenctype 6)Formmethod 7)Formnovalidate 8)formtarget

<nav>:It defines a section of navigation links.

<nav> <a href="/html/"> HTML </a> | <a href ="/html5/"> HTML5 </a> | <a href="/css/"> CSS</a> | <a href="/css3/">CSS3 </a>| <a href="/js/">JavaScript</a> </nav>

<html>manifest Attribute
Advantages: 1) Offline browsing 2) Increased Speed 3) Reduced server load

<!DOC TYPE HTML> <html manifest="demo_html.manifest"> <head> <title>Title of the document </title> </head> <body> The content of the document...... </body> </html>

Example of manifest file

CACHE MANIFEST index.html theme.css images/logo.png scripts/main.js NETWORK: server.cgi FALLBACK: /offline.htm