Post
Ask Question

HTML 5 Elements in a Look: Part 2

Introduction

 
If you are new to HTML 5, I suggest you read my first part article here: HTML 5 Elements in a Look: Part 1.
 
New Attribute syntax
 
In HTML 5, we have new attribute syntax as in the following:
  • Empty
  • Unquoted
  • Double Quoted
  • Single Quoted
Example
 
We can assign the text property of an input type as follows.
  • <input type="text" value="Sibeesh" disabled>
  • <input type="text" value=Sibeesh>
  • <input type="text" value="Sibeesh" >
  • <input type="text" value=’Sibeesh’ >
To make IE lower versions to read HTML5 elements:
 
Add The Shiv
  1. <!--[if lt IE 9]>  
  2. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
  3. <![endif]-->  
Apply CSS to Elements
 
Since we can apply styles to our normal HTML4 elements, we can apply styles to our new semantic elements too.
 
Example:
  1. footer{border:1px solid;}   
The preceding style will be applied to all the footers available on a page.
 
NB: Please be noted that it is not recommended (Footer, FOOTER) to use the upper-case in the elements.
 

Introduction to Canvas Element

 
If you want to create some graphic content, the Canvas element is the right choice.
 
Let us see how to use it.
 
Declaring the Canvas
  1. <canvas id="canvasExample" width="200" height="100"  
  2. style="border:1px solid #ccc;">  
  3. Bad Luck, It seems your browser won't support :(  
  4. </canvas>  
Implementing Canvas
  1. var c = document.getElementById("canvasExample"); //Get the element  
  2. var ctx = c.getContext("2d"); // Get the context for the element  
  3. var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line  
  4. grd.addColorStop(0, "blue"); // Apply the colors  
  5. grd.addColorStop(1, "white"); // Apply the colors  
  6. ctx.fillStyle = grd; //apply the style  
  7. ctx.fillRect(10, 10, 150, 80); // Fill  
Here we are applying the gradient to the canvasExample canvas.
 

Introduction to SVG

 
Scalable Vector Graphics is for implementing graphics for the web as the canvas. One of the differences between canvas and SVG is that SVG supports event handlers but canvases don't. We will discuss that later.
 
Declaring SVG
  1. <canvas id="canvasExample" width="200" height="100"  
  2. style="border:1px solid #ccc;">  
  3. Bad Luck, It seems your browser won't support :(  
  4. </canvas>  
See the complete HTML here:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.     <table style="border:1px solid #ccc;">  
  5.         <tr style="border:1px solid #ccc;">  
  6.             <td style="border:1px solid #ccc;">  
  7.                 <h2 style="text-align:center;">Canvas</h2>  
  8.                 <canvas id="canvasExample" width="200" height="100"  
  9.                         style="border:1px solid #ccc;">  
  10.                     Bad Luck, It seems your browser won't support :(  
  11.                 </canvas>  
  12.             </td>  
  13.             <td style="border:1px solid #ccc;">  
  14.                 <h2 style="text-align:center;">SVG</h2>  
  15.                 <svg width="200" height="200">  
  16.                     <circle cx="100" cy="100" r="50"  
  17.                             stroke="green" stroke-width="4" fill="yellow" />  
  18.                     Bad Luck, It seems your browser won't support :(  
  19.                 </svg>  
  20.             </td>  
  21.         </tr>  
  22.     </table>  
  23.     <script>  
  24.         var c = document.getElementById("canvasExample"); //Get the element  
  25.         var cctx = c.getContext("2d"); // Get the context for the element  
  26.         var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line  
  27.         grd.addColorStop(0, "blue"); // Apply the colors  
  28.         grd.addColorStop(1, "white"); // Apply the colors  
  29.         ctx.fillStyle = grd; //apply the style  
  30.         ctx.fillRect(10, 10, 150, 80); // Fill  
  31.     </script>  
  32. </body>  
  33. </html>  
I hope you have tried this. See you soon with another set of elements in the next article.
 
Kindest Regards
 
Sibeesh
 


Similar Articles