Tuesday 24 April 2012

New Tags in Html 5.0 -Part 3


Keygen:

The <keygen> tag is supported in all major browsers, except Internet Explorer.

Note: Safari supports the <keygen> element on Mac only.

The <keygen> tag specifies a key-pair generator field used for forms. This tag acts as captcha.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
It has has attribute Keytype .Value of this attribute can be rsa,dsa,ec.

<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>

Result:



Mark:

The <mark> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <mark> tag.

The <mark> tag defines marked text.

Use the <mark> tag if you want to highlight parts of your text.

Example:
In this example,word milk is highlighted.
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
Result:
Do not forget to buy milk today.

Nav:

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.

The <nav> tag defines a section of navigation links.

Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

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

Output:

The <output> tag is supported in all major browsers, except Internet Explorer.
The <output> tag represents the result of a calculation (like one performed by a script).

Example:
Perform a calculation and show the result in an <output> element:
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="a" />
+<input type="number" name="b"/>
=<output name="x" for="a b"></output>
</form>
</body>
</html>

Result:



Progress

The <progress> tag is currently supported in Firefox, Opera, and Chrome.

The <progress> tag represents the progress of a task.

Example:

Downloading in progress:
<html>
<body>
Downloading progress:
<progress value="22" max="100">
</progress>
<p><b>Note:</b> The progress element is currently supported in Firefox, Opera, and Chrome.</p>
</body>
</html>
Result:

Section:

The <section> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <section> tag.
The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

Example

A section in a document, explaining what WWF is:
<!DOCTYPE html>
<html>
<body>
<section>
  <h1>WWF</h1>
  <p> WWF was founded in 1961.</p>
</section>
<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF.</p>
</section>
</body>
</html>
Result:




Time:
The <time> tag is not supported in any of the major browsers.
The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset.
This element can be used as a way to encode dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.
<!DOCTYPE html>
<html>
<body>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>
</body>
</html>

Video:

The <video> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <video> tag.
The <video> tag specifies video, such as a movie clip or other video streams.

Example

Play a video:
<html>
<body>
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</body>
</html>

Wbr:

The <wbr> tag is supported in all major browsers, except Internet Explorer.
The Word Break Opportunity (<wbr>) specifies where in a text it would be ok to add a line-break.

Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.

<!DOCTYPE html>
<html>
<body>
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>
</body>
</html>
Result:



New Tags in HTML 5.0 -Part 2


Canvas:

The <canvas> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> tag.
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>



Result:





Datalist:
The <datalist> tag is currently only supported in Firefox and Opera.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with a <datalist> element.
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit" />
</form>
</body>
</html>

Result:












Details:

The <details> tag is currently only supported in Chrome.
The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content.
The content of a <details> element should not be visible unless the open attribute is set.

<!DOCTYPE html>
<html>
<body>
<details open="open">
<summary>Copyright 1999-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>
</body>
</html>


figure and Figcaption:
The <figcaption> and <figure> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <figcaption>  and <figure> tag.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure> element.
Example:
Use a <figure> element to mark up a photo in a document. The <figure> element also contains a caption:
<!DOCTYPE html>
<html>
<body>
<figure>
  <img src="http://www.picgifs.com/graphics/g/google/graphics-google-018918.jpg" alt="The Pulpit Rock" width="304" height="228" />
  <figcaption>Fig.1 - Google Pc.</figcaption>
</figure>
</body>
</html>




Footer:
The <footer> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <footer> tag.
The <footer> tag defines a footer for a document or section.
A <footer> element should contain information about it’s containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
You can have several <footer> elements in one document.
Example:
A footer section in a document:
<html>
<body>
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</body>
</html>


Header:

The <header> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <header> tag.

The <header> tag specifies a header for a document or section.
The <header> element should be used as a container for introductory content or set of navigational links.
You can have several <header> elements in one document.  

Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

Example:
A header for an <article>:
<html>
<body>
<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>
</body>
</html>








Thursday 19 April 2012

New Tags in HTML 5.0-Part1


Article:

The <article> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <article> tag.

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:
  • Forum post
  • Blog post
  • News story
  • Comment
<html>
<body>
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>
</body>
</html>

Result:

aside:

The <aside> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
 Note: Internet Explorer 8 and earlier versions, do not support the <aside> tag.

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be related to the surrounding content.

<!DOCTYPE html>
<html>
<body>
<aside style="font-size:larger;font-style:italic;color:green;float:right;width:120px;">
70% of the world's reefs will be destroyed over the next 40 years.
</aside>
<p>Global warming is affecting coral reefs all over the world. At the current rate, 70% of the world's reefs will be destroyed over the next 40 years.</p>
</body>
</html>
 

Result:
Audio:

The <audio> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <audio> tag.

The <audio> tag defines sound, such as music or other audio streams.

<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>
</body>
</html>

Result:




Bdi:

The <bdi> tag is currently supported only in Firefox and Chrome.

bdi stands for Bi-directional Isolation.

The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown directionality.

<!DOCTYPE html>
<html>
<body>
<ul>
 <li>User <bdi>hrefs</bdi>: 60 points</li>
 <li>User <bdi>jdoe</bdi>: 80 points</li>
 <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
</body>
</html>

Result: