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

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![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:

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

<canvas id="canvasExample" width="200" height="100"
style="border:1px solid #ccc;">
Bad Luck, It seems your browser won't support :(
</canvas>

Implementing Canvas

var c = document.getElementById("canvasExample"); //Get the element
var ctx = c.getContext("2d"); // Get the context for the element
var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
grd.addColorStop(0, "blue"); // Apply the colors
grd.addColorStop(1, "white"); // Apply the colors
ctx.fillStyle = grd; //apply the style
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

<canvas id="canvasExample" width="200" height="100"
style="border:1px solid #ccc;">
Bad Luck, It seems your browser won't support :(
</canvas>

See the complete HTML here:

<!DOCTYPE html>
<html>
<body>
<table style="border:1px solid #ccc;">
<tr style="border:1px solid #ccc;">
<td style="border:1px solid #ccc;">
<h2 style="text-align:center;">Canvas</h2>
<canvas id="canvasExample" width="200" height="100"
style="border:1px solid #ccc;">
Bad Luck, It seems your browser won't support :(
</canvas>
</td>
<td style="border:1px solid #ccc;">
<h2 style="text-align:center;">SVG</h2>
<svg width="200" height="200">
<circle cx="100" cy="100" r="50"
stroke="green" stroke-width="4" fill="yellow" />
Bad Luck, It seems your browser won't support :(
</svg>
</td>
</tr>
</table>
<script>
var c = document.getElementById("canvasExample"); //Get the element
var cctx = c.getContext("2d"); // Get the context for the element
var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
grd.addColorStop(0, "blue"); // Apply the colors
grd.addColorStop(1, "white"); // Apply the colors
ctx.fillStyle = grd; //apply the style
ctx.fillRect(10, 10, 150, 80); // Fill
</script>
</body>
</html>

I hope you have tried this. See you soon with another set of elements in the next article.

Kindest Regards

Sibeesh

HTML 5 Elements in a Look: Part 2

Reactions

2 Comments

Introduction

Introduction to Canvas Element

Introduction to SVG