Html programming crash course (2015)

Chapter 1: The Essentials Of HTML5

HTML5 has broken the barrier that stood between scripting and HTML. It has turned out to be extremely script-intensive. It offers a number of new elements as well as attributes; however, the major improvement in HTML5 are related to the features that can only be accessed through scripting.

HTML5 relies heavily on scripting, regardless of whether it is about dragging and dropping of items, drawing in a canvas or a whole lot of other things. This scripting means, for most people, more use of JavaScript. With that said, in order to make HTML5 work, you must use scripting.

This is actually a very good thing because as a result of these new capabilities, an increasing number of internet browser manufacturers would have to implement support for the new capabilities. It is often seen that the capabilities of JavaScript vary from one browser to another, and the heavy reliance of HTML5 on scripting would help make all new features uniform across different browsers.

Let us now take a quick glance of the capabilities of HTML5, many of which we will discuss in detail in this book.

Drawing With Canvas Element

The Canvas element feature has been anticipated for a long time. Just as its name suggests, this element can be used to draw upon, including drawing some really complex figures such as circles, arcs, curves, and rectangles. It also allows you to insert images and color the figures.

The powerful Canvas control can effectively incorporate dynamic graphics into web pages, and display graphics that change their response depending on the user’s actions. This particular feature of HTML5 relies heavily on JavaScript, just like the majority of elements of HTML5. So basically, you do all your drawing in JavaScript.

For the majority of figures, you would use a relatively simple function of JavaScript, such as stroke(), lineTo(), or fill().

Dragging And Dropping

Another long-awaited feature of HTML5 is the drag and drop capability. Before the release of HTM5, dragging and dropping of items were carried out based on ad hoc JavaScript – which needed to be written in a different manner altogether for different browsers.

With the advent of the latest version of HTML, drag and drop feature will become uniform across the browsers.

Those of you who have written the drag and drop code in JavaScript would understand what a huge help this would be. There will no longer be the need of testing your code on individual browsers to see whether it is executing correctly on each of them.

The majority of visual elements in HTML5 possess a draggable attribute. If this attribute is set to true, users can easily drag and drop the specific element as long as they implement it in JavaScript.

New Web Form Controls

A number of new web form controls are a part of HTML5, and these extend the number of controls that are already available in HTML4, such as option buttons, check boxes, etc.

Just as an example, developers can now use a color picker, a datetime control, an email field as well as a telephone number control.

These controls add a lot of power to HTML. For instance, the color control shows a color picker from which a user can choose any color he or she likes. The actual implementation of each of these controls depends on browser manufacturers; however, many of the latest controls are already being incorporated.

Editing Web Pages On The Go

HTML5 has made web pages more interactive, and has also empowered users to edit text within a web page.

Handling Browser History

HTML5 also provides an enhanced control of the browser history. We will look at this in more detail later on in this book.

Interdocument Messaging

HTML5 enables you to send messages between numerous parts of a document. This includes even those parts that are actually come from varying documents. For example, you may want to display a web page in another web page using an <iframe>.

With HTML5, you can now send text messages to the contained document.

Superb Audio And Video Support

A major advancement in HTML5 is the enhanced support for audio and video. The brand new <video> element is capable of displaying videos, while the <audio> element can seamlessly play audio – all of this can happen without the need of external plugins such as QuickTime or Flash!

Web Storage

HTML/JavaScript authors missed out on the ability to store data between page accesses in the past. This means that whenever you re-open a particular web page that contains JavaScript, all of your JavaScript variables were restored to their original values.

This has been fixed for good in HTML5, and now there is an option to save data within the browser along with saving it in the browser’s session with a particular server.

New Elements

HTML5 would be no good without the new elements that it boasts right out of the box. We will discuss the following new elements in the last chapter of this book:

The following elements have been dropped out and are no longer present in HTML5:

Summary

In this chapter, we discussed the basics of the capabilities offered by HTML5, including the following:

Drawing with Canvas

Dragging and Dropping

New Web Form Controls

Editing Web Pages On The Go

Interdocument Messaging

Superb Audio and Video Support

Web Storage

New Elements

You learnt about the new elements that have been added to, and the elements that have been removed from, HTML5.