Building Web Pages

Sorted by:  

How to Construct a Checkbox in Your HTML5 Form

Sometimes, you want your web page users to indicate whether information is true or false. The HTML5 checkbox element is perfect for this kind of input because the user can click to select or deselect the [more…]

How to Create a Radio Button in an HTML5 Form

To include radio buttons on your HTML5 web page, it helps to know what they are and how to use them. On the surface, radio buttons seem a lot like checkboxes, but they are different in a number of important [more…]

How to Add Buttons to an HTML5 Form

The ubiquitous button is a staple of any web page, and if you're building your page using HTML5, you can include all the usual types of buttons. There are three main types of buttons, although they all [more…]

Validating Your HTML5 Web Page

No matter how careful you are, sometimes you make silly mistakes when coding your HTML5 web pages. A tool something like a spell-checker for code would be great. Lo and behold, there is such a code-checking [more…]

New Form Elements in HTML5

HTML5 introduces a number of new form elements with new capabilities. A notable subset of these form elements is designed to let a program modify a part of the page dynamically. [more…]

Attributes of New Form Elements in HTML5

HTML5 introduces new form elements and gives all the form elements a few new goodies. As you design and build web pages, you can apply these new attributes and capabilities to any form element: [more…]

New Form Input Types in HTML5

HTML forms are centered around the humble but flexible input element. HTML5 adds a number of very useful forms of input that help turn HTML into a more modern user-interface tool. [more…]

How to Draw on Your Web Page with the HTML5 <canvas> Tag

The <canvas> tag sets up a portion of the screen to be used as a canvas for program-controlled graphics. JavaScript code executes all the drawing and manipulation of the image. The following code sets [more…]

How to Build an Image in Your HTML5 Page with the <svg> Tag

The <svg> element allows you to build a vector-based image directly in the page using the SVG markup language. It's often used to create charts or other visualizations dynamically. Sample coding looks [more…]

Using Form Structure Tags on Your HTML5 Web Page

From the beginning, web pages have had the ability to gather data from users. HTML5 has a standard but quite useful set of form elements you can use to get input. These form elements follow many of the [more…]

How to Put Text Boxes in an HTML5 Form

Many of the form elements HTML5 uses are based on the input tag. This web-page-building workhorse is a general-purpose tag used to make a number of interesting input objects, but it isn't the only type [more…]

How to Create a Drop-Down List in an HTML5 Form

Drop-down lists are a common feature in web pages, and HTML5 makes creating them pretty foolproof. Drop-down lists allow you, the programmer, to specify a number of choices that visitors to your website [more…]

HTML5 and JavaScript Selection Options

Of the many new features in HTML5, the innovations with the most far-reaching potential are in the additions to JavaScript available in modern browsers. JavaScript is usually used to interact with the [more…]

How to Set Up an HTML5 Web Page for Offline Cache

Most Web-based applications work only if you're online, which makes a certain kind of sense. But HTML5 has a mechanism for forcing part of a web page and its resources to be stored on the local machine [more…]

HTML5 and Local Storage

The local storage mechanism is a nice replacement for cookies, and with HTML5, you can write up to 5MB of data to a special file on the client. This file is not executable and cannot hold binary data [more…]

HTML5 and WebSQL Databases

Most high-end data applications use the relational database model to store data. HTML5 introduces a radical new model. The browser actually includes its own database program [more…]

HTML5 and Web Sockets

Web sockets are one of the most technically advanced additions to HTML5, and they also have the potential to afford the most dramatic change to the way Internet work is done. [more…]

What Is the HTML5 Canvas Element?

The canvas element is one of the most interesting new developments in HTML5. While the <canvas> tag is an HTML tag, it really isn't interesting without JavaScript programming. The [more…]

Draw a Basic Rectangle with the HTML5 Canvas Tag

To use the canvas tag available in HTML5, build a web page with a canvaselement in it. Typically, you provide width, height, and id parameters to indicate how big the cnavas is, like so: [more…]

Using Colors and Gradients with the HTML5 Canvas Tag

Nearly every operation in HTML5's canvas function implements a fill or stroke style. To get the most out of canvas, you need to understand how they work. The three primary types of styles you can use on [more…]

How to Draw Rectangles and Text with the HTML5 Canvas

A few primitive shapes can be drawn directly onto the graphics context of the canvas element of HTML5. The most common shapes are rectangles and text, which can also have shadows. Here's how you create [more…]

How to Include Images on Your Web Page with HTML5 Canvas

While HTML has long had support for images, the canvas interface of HTML5 adds new life to Web images. Images can be displayed inside a canvas, where they can be integrated with the vector-drawing techniques [more…]

How to Create Animation with the HTML5 Canvas Tag

Although the HTML5 canvas tag might not replace Flash as a mechanism for implementing games and animations in the browser, it is reasonably easy to add animation to a [more…]

How to Manipulate Pixels with the HTML5 Canvas Tag

With HTML5, you can extract the data of a canvas tag into the underlying pixel data. Manipulating this data gives you extensive control of your image in real time. You can use this data for color balancing [more…]

Storing and Retrieving Data in Local Storage with HTML5

With HTML5, you can write up to 5MB of data to a special file on the client computer. All the pages that come from your domain share the same storage area, so you can use this mechanism to keep data persistent [more…]

Win $500! Enter Now.