Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
12th August 2009

An introduction to the new tags in HTML 5

THE LATEST BROWSERS ARE ALREADY IMPLEMENTING SOME OF THE UPCOMING HTML 5 SPECIFICATIONS, SO IT’S A GOOD TIME TO START EXPERIMENTING WITH WHAT THE NEXT WEB WILL BRING

An introduction to the new tags in HTML 5
THE LATEST BROWSERS ARE ALREADY IMPLEMENTING SOME OF THE UPCOMING HTML 5 SPECIFICATIONS, SO IT’S A GOOD TIME TO START EXPERIMENTING WITH WHAT THE NEXT WEB WILL BRING

HTML 5 IS still working its way through the standards process, but some of its features are already in your browsers. If you’re using the latest Opera, Firefox or Internet Explorer, you’ve already downloaded a browser that can handle one or two pieces of the next generation of the web. With the standard still months or even years away, it’s not surprising that each browser offers a different set of HTML 5 components. Some just offer new JavaScript APIs, while others are starting to include intriguing new tags, like the <canvas> drawing surface. It’s worth getting to grips with these new features, as they’re going to be important web design tools in the future – but remember that they’re not end-user ready. As the specification
gets finalised, what’s in your browser is likely to change. The skills you’ll pick up now, however, will be ready for the final HTML 5, whenever it arrives.

Author: Simon Bisson | Originally appeared in Issue 149

01 Drawing with <canvas>
HTML 5’s <canvas> tag lets you draw complex 2D images using simple JavaScript commands. You can start with basic shapes, and can quickly combine these to make more complex illustrations that can be animated. Remember to add content that can be displayed by browsers that can’t use <canvas> inside the <canvas></canvas> tags.

<html>
<head>
<title>HTML 5 demo</title>
<script type=”text/javascript”>
function drawCanvas()
{
var canvas = document.getElementById(‘testCanvas’);
var ctx = canvas.getContext(‘2d’);
ctx.fillStyle=’#FF2200’;
ctx.fillRect(10,10,100,100);
}
</script>
</head>
<body>
<body onload = “drawCanvas();”>
<canvas id = “testCanvas” width =
“300” height = “300”>Your browser does not support the
canvas tag.</canvas>
</body>
</html>

02 Drawing a square
An introduction to the new tags in HTML 5
That created an area to draw objects. We’re starting with a coloured square, which we’re drawing using the fillRect JavaScript method. We can use fillStyle to set the colour of the object. HTML 5 supports other primitive image shapes,
which we can combine to make more complex objects.

03 Adding a circle
Drawing circles is harder than squares or rectangles. Here, we have to use an arc function to draw and fill a circle. One problem is that HTML 5’s drawing API expects angles to be expressed in radians, so we’ll need to convert our 360
degrees of arc using JavaScript’s built-in mathematical functions. Add this code to the canvas JavaScript block:

ctx.beginPath();
var x = 120
var y = 120;
var radius = 50;
var startAngle = 0;
var endAngle = (Math.PI / 180)* 360;
var anticlockwise = true
ctx.arc(x,y,radius, startAngle, endAngle, anticlockwise);
ctx.fill();

04 Blending colours
HTML 5’s drawing APIs let you use an alpha blend to mix colours. You can do this by choosing an appropriate fill style. Here, we’re using an RGB colour mix, and all we need to do to specify alpha blending is to specify ‘rgba’ instead of ‘rgb’. The transparency level is a number between zero and one.

ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;

05 Paths to pictures
An introduction to the new tags in HTML 5
The secret to drawing shapes in HTML 5 is using paths. We’ve already used a startPath function to draw our circle, and we can change the shape we’re drawing by using 270 degrees. Add a closePath function after you draw your arc (and switch to draw clockwise) to get this image.

06 Stroke versus Fill
Paths can be treated as strokes – for line drawing – or fills. Strokes are simple lines that follow the path described by a set of drawing instructions. You can move between points without drawing a line using a moveTo() function, allowing
complex shapes to be drawn with one single stroke() function. This code adds two concentric triangles to our drawing in just one action.

ctx.beginPath();
ctx.moveTo(35,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.lineTo(35,50);
ctx.moveTo(45,50);
ctx.lineTo(90,65);
ctx.lineTo(90,35);
ctx.closePath();
ctx.stroke();

07 Colouring strokes
An introduction to the new tags in HTML 5
We’ve already used fillStyle to set colours and apply alpha blending to the shapes in our canvas drawing. We can do similar things with our line drawings, using strokeStyle to set colours for the canvas stroke-drawing operation. Set strokeStyle to rgb(0, 300, 0) to draw your triangles in green.

08 Gradients
We’ve already used a local transparency value, but you can do a lot more with colours using the HTML 5 canvas API. One option is to use a colour gradient, where you can set the shape and direction of a gradient, either using a linear
or radial gradient. The result can be a very simple drawing but have a very effective effect – perhaps a stylised sunset or a forest fading off into the horizon.

var radialgradient = ctx.
createRadialGradient(75,75,0,75,75,100);
radialgradient.addColorStop(0,’rgb(200,0,0)’);
radialgradient.addColorStop(1,’rgb(0,0,200)’);
ctx.fillStyle=radialgradient;

09 Go further with <canvas>
An introduction to the new tags in HTML 5
JavaScript drawing commands can be used to produce simple animations, and can even interact with the mouse or the keyboard – letting you replace Flash with animations that are built into the page HTML rather than loaded into a plug-in player.

10 Web Forms 2.0
An introduction to the new tags in HTML 5
HTML 4’s forms are a familiar, if limited, way of getting info from a web browser to a server. HTML 5 builds on the old forms standard to deliver a more flexible way of working. Opera is the first browser to implement Web Forms 2.0, taking advantage of features like validity checking.

11 Validity checking
Adding a validity checker to a Web Forms 2.0 form doesn’t require any JavaScript. All you need to do is set the input type, with type options including URLs and email addresses. Set the form to be ‘required’ and the browser will alert the user if there is an error. You can add your own error message by hooking an alert to the field’s oninvalid event.

<form>
<label>Home page: <input type=”url”
name=”webaddress” required=”required”
oninvalid=”alert(‘You must enter a valid web page
address.’); return false;”>
</label>
</form>

12 Minimum and maximum
An introduction to the new tags in HTML 5
Web Forms 2.0’s validity-checking features aren’t just for checking whether your users have typed in an email address when asked for one. You can also use them to handle minimum and maximum values for a field, which can even be a date range. Opera will render this code as a field with up and down  arrows that can be used to select a time inside the range specified.

<label>Select a time during business hours:<input type=”time” min=”09:00” max=”17:30”></label>

13 Stepping
One-minute intervals are a bit on the short side for a
booking system, so we’ll need to modify the default. Web
Forms 2.0 includes a step operator, which we can use to
control how Opera’s up/down control works. While the
Opera controls use a one-minute default, the minimum
step for a time input is one second. Set step to 1,800
seconds to allow users to pick appointments with 30-
minute intervals.

<label>Select a time during business hours:<input
type=”time” min=”09:00” max=”17:30” step=1800>
</label>

14 Complete with datalists
Modern browsers (and the Google toolbar) often store commonly used form responses. With Web Forms 2.0, sites can keep their own lists of responses, using datalists associated with form inputs. This code snippet will hold
a list of site URLs that can be used as a quick-pick list for a URL input field, or your user can type in a URL that isn’t on the list.

<input type=”url” name=”location” list=”urls”>
<datalist id=”urls”>
<option label=”Site 1” value=”http://www.site1.org/”>
<option label=”Site 2” value=”http://www.site2.org/”>
<option label=”Site 3” value=”http://www.site3.org/”>
<option label=”Site 4” value=”http://www.site4.org/”>
<option label=”Site 5” value=”http://www.site5.org/”>
<option label=”Site 6” value=”http://www.site6.org/”>
<option label=”Site 7” value=”http://www.site7.org/”>
</datalist>

Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Pingback: MacDaddy Links of the Week: Aug. 9-15 | bkmacdaddy designs

    • Pingback: Monthly Mother Lode of MacDaddy Links: August 2009 | bkmacdaddy designs

    • horninc

      i love that you use Opera :D

    • Kathleen

      Why are the images broken?

    • Chris

      I just downloaded Opera yesterday and I must say I was impressed based simply off of opening it for the first time. There are a lot of cool features that I like that none of the others currently have. I definitely recommend downloading it.

      Thanks for the HTML5 info. Looks like there are a lot of really good tools in store for us :)

    • http://www.rig-designs.com Hugo

      “Kathleen said:

      Why are the images broken?”

      The images are only broken in Internet Explorer. I opened the page in Firefox and they work just fine!

      I’ve just installed Opera and I think I’m an Opera convert too! Looks great and very smooth. It’s a bit heavy on memory usage but will see how it performs compared to the competition.

      Great article about drawing in the new HTML5. Looking forward to see what the new programming standards are going to be!

    • http://www.rig-designs.com Hugo

      Actually, I’ll take back what I said about memory usage. I’ve just re-tested IE, Firefox and Opera and the later outperformed any of its opponents. IE opened taking 47Mb of ram. Firefox used up 52Mb. Opera used only 5Mb!! All of them tested opening the same site.

      So here is another reason to use it! I’m definitely going to be using it from now on.

    • http://msn.com Emile

      “An introduction to the new tags in HTML 5 | Blog
      | Web Designer” world3dfilmexposition.com ended up being a beneficial posting.
      If solely there was way more web blogs like this particular one in the
      online world. Anyway, thanks for your time, Branden

    • Napester Shine

      Can I use placeholder in