Introduction

THE BASIC TECHNOLOGIES BEHIND THE WEB are now almost a quarter of a century old. HTML dates all the way back to 1993, the same year the first popular web browser, Mosaic, appeared on the scene.

You may have thought, therefore, that the technologies behind the Web would have entered a comfortable middle-age—still improving around the edges maybe—but not innovating with the pace and excitement of their early years.

In fact, nothing could be further from the truth. The last ten years have been some of the most ­exciting and innovative in the history of the Web, and this pace of change is continuing to ­accelerate. As a result, the Web is no longer the preserve of simple websites. It is the realm of web ­applications: feature-rich applications that just happen to run inside web browsers.

A whole new class of computing devices has accentuated the pace of this change. Web browsers are no longer the preserve of desktops and laptops: They now appear on a myriad of devices from smart phones to smart TVs. The fact that web browsers are the one universal feature across these diverse devices has served to enhance the appeal of browser-based web applications: You write the web application once, and your users use it from any device they choose.

This innovation of the last decade did not happen by accident. Various standards committees have been hard at work for more than a decade devising a set of standards that have been grouped under the umbrella of HTML5. These standards have now made their way into all the major web-browsers.

If you are familiar with HTML, the term HTML5 may simply imply a new version of the HTML markup language—which may be interesting—but not revolutionary. In fact, HTML5 is far more than a markup language; it is a set of programming APIs, implemented by browsers, that allow web pages to perform tasks that had never before been possible.

For example, it is now possible for an HTML page to store massive amounts of data in your browser, operate without a network connection, request more information from a web server as and when it needs it, and perform complex computations in the background without interfering with your browsing experience.

The goal of this book is to teach you how to write web applications. In order to achieve this, you need to understand more than HTML5. You need to understand a set of related technologies. More importantly, however, you need to understand how these technologies work together.

HTML5, for instance, is closely tied to JavaScript. In many cases, if you want to use HTML5, you need to do so through a JavaScript API. It is thus not possible to master HTML5 without also mastering JavaScript.

JavaScript is also approaching middle age, yet it too continues to evolve in tandem with HTML5. Historically considered something of an oddity, JavaScript has turned into a rich and expressive programming language, capable of much more than the simple tasks (such as form validation) that it was consigned for so many years.

A large part of the appeal of JavaScript is the myriad of enormously useful, freely available libraries that are written in the language. Chief among these is jQuery, a JavaScript library that has taken on a life of its own and come to redefine the way programmers add dynamic features to their web pages. You can write web applications without learning jQuery, but your code will lack the conciseness of expression the jQuery library affords.

Finally, in order to produce visually appealing web applications you will need to learn Cascading Style Sheets. Just like all other web technologies, CSS also continues to grow and evolve, and the newest version of CSS—called CSS3—means that web pages can achieve dazzling visual effects.

Who This Book Is For

This book is for anyone who wants to learn how to build dynamic websites and web applications using standards-based technologies.

You may have experience with HTML4, although that is not required because the early lessons provide an in-depth look at all of the most important features of HTML. More experienced readers may, on the other hand, choose to skip these lessons.

This book contains many code examples based on JavaScript. It is expected that you have some programming experience before reading this book, although not necessarily with JavaScript. If you have no experience with programming, you may want to prepare with some online tutorials and exercises before beginning.

Finally, this book is for programmers who want to learn by doing.

What This Book Covers

HTML5 is a versionless standard. The specifications behind HTML5 continue to grow and evolve, but this evolution is not matched with official or versioned releases.

As such, this book does not focus on a specific version of HTML5; instead, it focuses on the aspects of HTML5 that have achieved widespread adoption in all of the most common web browsers.

The JavaScript language does contain versioned releases, but unlike most programming languages, you have no control over the version that your users will choose because this is a byproduct of the browser that they select. As a result, this book will not focus on a specific version of JavaScript: It will focus on the features that are universally available in all the major browsers.

This book will use a number of JavaScript libraries that are subject to change over time. Whenever a library is used, a specific version will be specified. In many cases, a more recent version of the library will work without issue, although the code is only guaranteed to work with the specified version.

This book is intended as a hands-on guide. Each lesson includes code and exercises that you can follow along with, and even augment if you choose. It is important that you follow along with these exercises because it is this process that will consolidate your understanding of how the technologies really work.

How This Book Is Structured

This book is split into five sections. The first two sections are intended to be read in order because they provide you with the foundation knowledge required to add more complex functionality. The remaining three sections can be read in any order you choose.

The first section of the book provides an introduction to HTML and CSS and looks at how to build static web pages with these technologies. By the end of this lesson, you will have a solid foundation on which to start adding more complex functionality.

In the second section, you turn your attention to JavaScript and jQuery, and look at how a static web page can be converted into a dynamic web application.

The third section of the book looks at the multimedia capabilities of web browsers and how you can harness these through technologies such as the Canvas API and CSS3.

Once you have an understanding of JavaScript, you can turn your attention to the HTML5 APIs that allow you to store data inside the browser, access data from web servers, and execute tasks on background processes. It is these features that truly turn your website into a feature-rich web application.

In the final section of the book, you will turn your attention to mobile devices and address the question of how you can convert your web application into a mobile web application that functions on any mobile device your users may choose to use.

A large portion of this book is structured around the development of a sample web application. If you choose to skip a lesson, you will therefore need to download a completed version of that lesson's web application before starting the next lesson.

What You Need to Use This Book

In order to complete most of the exercises in this book, you will need nothing more than a text editor and the Chrome web browser.

If you have a favorite text editor, you can continue to use it for this book. If you do not have a text editor installed, Notepad++ (http://notepad-plus-plus.org) is a good option for Windows, Text Wrangler (http://www.barebones.com/products/textwrangler) is a good choice for Macs, and EMacs is a good choice for Linux. You may also choose to use an Integrated Development Environment (IDE) such as Eclipse.

The Chrome web browser has been chosen for this book not so much for the capabilities of the browser itself, but for the developer tools that accompany it. You can choose to use an alternative web browser if you wish, but the examples will focus on Chrome.

The Chrome web browser is subject to frequent updates, and it is assumed that you will use the latest version of the browser.

In later sections of this book, you will also need a web server. A lesson is provided to guide you through the process of installing and configuring a web server.

The source code for the samples is available for download from the Wrox website at:

www.wrox.com/go/html5jsjquery24hr

Conventions

To help you get the most from the text and keep track of what's happening, we've used a number of conventions throughout the book.

Warning

Warnings hold important, not-to-be-forgotten information that is directly relevant to the surrounding text.

Note

Notes indicate notes, tips, hints, tricks, or asides to the current discussion.

As for styles in the text:

We highlight new terms and important words when we introduce them.

We show keyboard strokes like this: Ctrl+A.

We show filenames, URLs, and code within the text like so: persistence.properties.

We present code in two different ways:

We use a monofont type with no highlighting for most code examples.

We use bold to emphasize code that is particularly important in the present ­context or to show changes from a previous code snippet.

Source Code

As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All the source code used in this book is available for download at www.wrox.com. For this book, the code download is on the Download Code tab at:

www.wrox.com/go/html5jsjquery24hr

You can also search for the book at www.wrox.com by ISBN (the ISBN for this book is 978-1-1190-0116-4) to find the code. A complete list of code downloads for all current Wrox books is available at www.wrox.com/dynamic/books/download.aspx.

Most of the code on www.wrox.com is compressed in a .ZIP or .RAR archive, or a similar archive format appropriate to the platform. Once you download the code, just decompress it with an appropriate compression tool.

Errata

We make every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in one of our books, such as a spelling mistake or faulty piece of code, we would be very grateful for your feedback. By sending in errata, you may save another reader hours of frustration, and at the same time, you will be helping us provide even higher quality information.

To find the errata page for this book, go to

www.wrox.com/go/html5jsjquery24hr and click the Errata link. On this page you can view all errata that has been submitted for this book and posted by Wrox editors.

If you don't spot your error on the Book Errata page, go to www.wrox.com/contact/techsupport.shtml and complete the form there to send us the error you have found. We'll check the information and, if appropriate, post a message to the book's errata page and fix the problem in subsequent editions of the book.

p2p.wrox.com

For author and peer discussion, join the P2P forums at http://p2p.wrox.com. The forums are a Web-based system for you to post messages relating to Wrox books and related technologies and interact with other readers and technology users. The forums offer a subscription feature to email you topics of interest of your choosing when new posts are made to the forums. Wrox authors, editors, other industry experts, and your fellow readers are present on these forums.

At http://p2p.wrox.com, you will find a number of different forums that will help you, not only as you read this book, but also as you develop your own applications. To join the forums, just follow these steps:

Go to http://p2p.wrox.com and click the Register link.

Read the terms of use and click Agree.

Complete the required information to join, as well as any optional information you wish to provide, and click Submit.

You will receive an email with information describing how to verify your account and complete the joining process.

Note

You can read messages in the forums without joining P2P, but in order to post your own messages, you must join.

Once you join, you can post new messages and respond to messages other users post. You can read messages at any time on the Web. If you would like to have new messages from a particular forum emailed to you, click the Subscribe to this Forum icon by the forum name in the forum listing.

For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to questions about how the forum software works, as well as many common questions specific to P2P and Wrox books. To read the FAQs, click the FAQ link on any P2P page.

Part I

HTML and CSS

Lesson 1: Introduction to HTML5

Lesson 2: Basic HTML

Lesson 3: Lists and Tables

Lesson 4: Introduction to CSS

Lesson 5: Structuring Pages with CSS

Lesson 6: HTML Forms

Lesson 7: Semantic Tags

Lesson 8: HTML5 Validation

Lesson 9: Drag and Drop

Lesson 10: Dynamic Elements

Lesson 1

Introduction to HTML5

This lesson is an introduction to the HTML5 markup language. The HTML5 markup ­language is a language for structuring and expressing the content of a web page in a manner that can be consistently interpreted by a web browser.

If you are already familiar with HTML, much of this chapter will look very familiar. It is still important that you read through this lesson, however, because there are a number of ­important changes in HTML5, and many of these are very subtle.

If you are not familiar with HTML, or have only a passing familiarity, this lesson will ­provide you with the background you need to understand the basics of an HTML web page. This lesson is only an introduction, however; the material in this lesson will be enhanced in the remainder of this section.

What Is a Markup Language?

A markup language is a language for annotating a document with a set of tags. These tags are used to provide additional meaning and structure to the text of the document, or provide instructions on the manner in which it should be displayed to the reader.

For instance, a tag may state that one portion of the text is a header, while another portion is a paragraph of text. Consider the following document fragment:

This is a heading

This is a paragraph of text

In this example, the tags can be clearly differentiated from the content of the document by the angle brackets. The following represents the start of a heading:

while this represents the end of the heading:

Note

HTML defines six categories of header from h1 to h6. The lower the number, the more important the header is.

The entire h1 structure—including the start tag, the end tag, and its textual content—is referred to as an element.

The HTML5 markup language specifies the tags that can be used in an HTML document, how they should be used, and what additional information (called attributes) they can contain.

In the early days of HTML, many of the tags included in the markup language instructed the browser how to present information. For instance, tags were used to dictate font size and color.

The HTML markup language is no longer responsible for dictating the ­presentation of a document, and in HTML5 most of the remaining ­presentation tags have been removed. Presentation is now the sole preserve of another technology called Cascading Style Sheets, which will be examined later in this section.

Instead, the HTML5 markup language is responsible for conveying the ­meaning of the various components of the document and how they interact with other components.

Note

Browsers can still provide their own default styles for tags, however, and this is why an h1 element will appear in large, bold text.

HTML5 greatly enhances the expressiveness of earlier version of HTML, however, and allows sections of the document to be marked as, amongst other things, headers, footers, and asides.

Earlier versions of HTML were based on a technology called SGML, which is a language for expressing markup languages. As of HTML5, the HTML markup language is not based on any other technology. This has removed a number of restrictions from the language; therefore, if you are familiar with HTML, you will notice in the sections that follow that a number of the old rules no longer apply.

The Simplest HTML Page Possible

When learning any technology, it's always a good idea to start out with the simplest implementation possible. In HTML5, the simplest page you can possibly write is as follows:

hello world!!!

Open your favorite text editor, enter this text, and save the document as hello.html.

Now, open Chrome, and select Ctrl-O in Windows or -O on a Mac, ­navigate to the file you have just saved, and select Open. This should look like Figure 1.1 when loaded in the web browser.

Figure 1.1

This may not look like a web page; after all, there are no tags in the page except the strange looking tag on the first line of the document.

With the page open in Chrome, now select to open the developer tools:

Command+Option+I on OS X

F12 or Ctrl+Shift+I on Windows

This should open the window shown in Figure 1.2 below the web page.

Figure 1.2

This is the web-browser's internal representation of the web page. As you can see, this has normalized the structure of the document, and does provide a set of tags nested inside one another. On the outermost level is the html element, and inside this are two elements: head and body. The content of the body element is the text you wrote in the text editor.

The document has been normalized to conform to the rules of the Document Object Model (DOM). The DOM will turn out to be enormously important throughout this book because much of the power of modern web pages comes from their ability to manipulate the DOM after the page has loaded.

The manner in which a Document Object Model should be constructed from an HTML page has been a contentious issue since HTML first appeared. Historically, different browsers would generate different models for the same HTML, and this made it very difficult to write cross-browser web pages.

In order to counteract cross-browser issues, the World Wide Web Consortium (W3C), which is the standards body behind web standards such as HTML, decided to recommend a set of standards placing the onus on the web page developer. These standards, called HTML Strict and XHTML, forced the web page developer to create a normalized web page, and therefore made it easy for web browsers to render pages consistently.

This approach did not work very well. The real power behind HTML is not the standards bodies, but the browser vendors because they ultimately decide what is a valid web page. They did not want to enforce this strictness on web pages because failing to load web pages would only serve to make their browser look deficient.

As the W3C continued on with their strict standards, a rival group called WHATWG started work on a rival standard that would eventually become HTML5. The members of this group were made up of participants from the main browser vendors, and their goals were far more pragmatic. Rather than creating a whole new set of standards, this group first looked at what browsers were already doing and, where possible, formed standards from this.

W3C eventually abandoned their efforts for strictness and joined WHATWG's efforts, and the two groups each publish a version of the HTML5 standard.

A large part of the HTML5 standard describes how browser vendors should create a normalized DOM from a non-normalized HTML document. This is why Chrome created the DOM that it did in the preceding example, and why Firefox, IE, and Safari would create exactly the same structures.

An HTML Template

In the previous section, you wrote the simplest web page you could write. In this section, you will write a web page following a basic template that is intended to represent the simplest HTML ­structure you should write.

I will first present the template, and then I will walk you through it line by line. Open a new document in your text editor, and save the following as template.html:

en>

    utf-8>

      This is the body of the document.

If you open this in Chrome, and then view the DOM in the developer tools, it will look like the example in Figure 1.3.

Figure 1.3

As you can see, in this case there is far closer alignment between the content you provided in the HTML file and the normalized structure generated by the browser.

Let's now walk through each line in the document and examine its purpose.

The first line in the document is as follows:

This line defines the document type of the page. Because there have been many different HTML standards over the years, the browser uses this line to understand which of these standards the page is using, and then uses the rules applicable for this standard to interpret the content of the page and render it accordingly.

This is the HTML5 document type definition, and comes as a pleasant surprise for developers who may be accustomed to copying and pasting DOCTYPE declarations such as:

-//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>

The other main surprise about this document type definition is that it does not include a version number: The document type is simply html.

Although the specification is referred to as HTML5, it defines a living-standard that will be ­subject to incremental change as and when browser vendors implement, and agree on, new ­features. Put another way, there will never be another version of HTML, but HTML will always continue to evolve.

The next line contains the opening html tag, which encapsulates the remainder of the document:

en>

This tag contains an attribute called lang, which has been given the value en. Attributes provide a mechanism for providing extra meaning to tags. This particular attribute is stating that the language of the document is English.

Note

The ISO standard 639-1 defines the set of two-letter codes that can be used for ­languages. These can also be paired with a country code, for instance en-US. Country codes are defined in the ISO standard 3166.

As with many aspects of HTML5, although the specification defines the attributes and their expected values, it is up to the browser to decide what to do with this information. The browser may use this information to suggest a translation to a non-English speaker, or it may do absolutely nothing with this information.

The next element in the document is the head element. This is the section of the document where you can provide important metadata about the document, along with links to other files needed by the document. The head section never contains any visual components of the web page. In this particular case, the head contains one important piece of metadata:

utf-8/>

This specifies that the character encoding of the document is UTF-8. I will not cover character encodings in this section, but the specification recommends setting this.

There is one other element that is commonly added to the head element: the title element. This is the text that the browser will display in the title bar when the web page is loaded. Therefore, add the following inside the head section:

and then view the page in Chrome; the tab header will appear as follows:

Figure 1.4

Next you come to the body element. This is where all the visual elements of the page will be described. In this particular example, the body consists of a single text string, but it is this area of the document that you will enhance in the chapters ahead to create interesting web pages.

Understanding Elements and Attributes

Even though the examples you have created are very simple, you can already see that elements can be nested inside one another, and as a result, create a tree-like structure.

Every HTML document has a single top-level element, which is always the html element (the document type element is not part of the document as such).

In addition, every element in the document can have zero or more children. The html element has two children: head and body. The head element in turn has a child of its own: the meta element.

Every element in the document (except the html element) has one (and only one) parent. The parent of the head element is the html element. The parent of the meta element is the head element.

As you will see, the structure of pages will become considerably more complex, and the degrees of nesting will increase enormously. No matter how complex the pages become, however, all the elements will follow these simple rules.

You have examined how elements consist of an opening and closing tag; for instance the opening of the head tag is while the closing is an identically named tag preceded by a forward slash .

Some elements do not require any content: The tag and its attributes provide all the information that is required. In this case, the start and the end tag can be combined into the following construct:

utf-8/>

The forward slash before the end of the tag indicates that the tag is being closed. This is the direct equivalent of the following:

utf-8/>

You should always ensure that all tags are closed in the reverse order they are opened. For example, you should never write markup as follows:

Hello

In this case, the strong element is supposed to be the child of the p element, but the p element ends before the strong element.

Note

The strong tag is used to indicate that a piece of text is important. Although this is often confused with the now deprecated bold tag, it is, in fact, still a valid HTML5 tag. This tag is not considered a presentation tag because it indicates that text is important, not how this text should be styled. You may decide that strong ­elements are colored red rather than with a bold font.

If you add this to your template.html file before the ­ending body tag, and then view the normalized structure in Chrome, you will notice that the browser has rearranged these tags, as you can see in Figure 1.5.

Figure 1.5

Although the HTML5 specification does have rules for fixing up your mistakes, it is generally best not to make mistakes in the first place because the rules of the HTML5 specification may not be what you intended.

I generally find it best to write tags in lowercase. As it turns out, tag names are entirely case insensitive because they are automatically converted to lowercase in the DOM. The following is therefore valid, but should be avoided for obvious readability reasons:

The final feature I will cover in this lesson is attributes. You have already seen two examples of attributes, on the html tag and on the meta tag. Many other tags also support attributes, and you will examine these throughout the book.

Attributes often consist of a name/value pair. When an attribute has a value, the value can either be included in single or double quotes. The following are equivalent:

utf-8/>

A tag can contain more than one attribute, in which case they are simply separated by white space:

firstParagraph class=bold>

Additionally, some attributes do not have a value. These are referred to as Boolean attributes. The presence of the attribute is all that is required. For instance:

In this case, the attribute is called read-only, but the presence of the attribute is enough to indicate that the element is read-only. It is still possible to add a value to a Boolean attribute, but it has no meaning. For instance, the following input field is still read-only:

false/>

Attribute names should also be written in lowercase (because this is how they will be represented in the DOM). Generally attribute names will also use hyphens if they contain more than one word.

Try It

In this Try It, you will duplicate the template html page outlined in the lesson. You may choose to skip this portion if you are familiar with HTML, but the simple act of typing code word for word enhances your understanding.

If you get stuck in this example, you can refer back to the example earlier in the lesson, or use the screencast to guide you though the process.

Lesson Requirements

You will need a text editor and a web browser.

Step-by-Step

Open your text editor and create a new document.

Add the HTML5 doctype to the document.

Add an html element (both the opening and closing tags) below the document type.

Indicate the language of the document using an attribute on the html tag.

Add a head element inside the html element. You will need both an opening and a closing tag.

Add a title inside the head element, and give the document a name. Remember that this needs to be a child of the head element.

Add a body element inside the html element just below the closing head tag.

Add a meta element to the head indicating that the charset is UTF-8.

Add any text you like to the body of the document. Any text that you add should be displayed back to you when you open the web page in Chrome.

Save the document with a .html extension.

Open the document in Chrome and inspect the Document Object Model in the developer tools.

When you open this in Chrome, and then open the development tools to inspect the elements, the markup should look like Figure 1.6.

Figure 1.6

There is also a complete example in the Lesson 1 folder on the book's website called tryit.html.

Reference

Please select the video for Lesson 1 online at www.wrox.com/go/html5jsjquery24hr. You will also be able to download the code and resources for this lesson from the website.

Lesson 2

Basic HTML

This lesson provides a basic introduction to the most common HTML tags. If you are already familiar with HTML and are reading this book primarily to learn about HTML5, you could choose to skip the next two lessons, although each lesson does include material that is specific to HTML5.

In the previous lesson, you created an HTML template. In this lesson, you will start adding content to the body of this template using some of the most common HTML tags.

Structuring Text

You will begin by examining the ways you can structure text in a web page. HTML originally started life as a means of sharing research papers; thus, text formatting has always been an important part of HTML.

Begin by opening the template.html file created in the previous chapter. Replace the body of the web page, as shown in the following markup:

en>

    utf-8>

This is a top level heading

This is a second level heading

This is a third level heading

The body now contains three separate header elements. If you open this in Chrome, it should look like Figure 2.1.

Figure 2.1

Notice that the h1 element's text is displayed in a larger font than the h2 element. As it happens, this has nothing to do with the HTML specification; this is simply the default style provided by the web browser, just as the font is the default font of the browser. In Lesson 4, you will see how this can be overridden with Cascading Style Sheets (CSS).

You will also notice that each heading is displayed on a new line. This is not because the elements are placed on new lines in the HTML file; in fact, white space is mostly ignored in HTML. In order to prove this, change the h1 tag as follows:

This is    a    top

        level heading

This is a second level heading

If you reload the web page, you will see that this change makes no difference to the way the headings display. Although a single whitespace character is displayed as a space inside an element, a sequence of whitespace characters, even if it contains new-line characters, is collapsed down to a single white space character.

HTML does provide a special character sequence,  , for adding extra whitespace characters, but new lines should be created using the tags introduced shortly.

Note

The ampersand character, followed by a sequence of characters and terminated by a semicolon, indicates that this is a special character sequence.

There are a number of special character sequences in HTML. Perhaps the most common ones you will encounter are < and >, which are used for the less than (<) and greater than (>) characters respectively. These are required because the < and > characters have special meaning in HTML. In case you were wondering, nbsp stands for non-breaking space.

So what did generate the new lines after each heading? These appear because the elements h1 through h6 are block elements. All visual HTML elements have a display type, the most common of which are block and inline. Whenever a block element ends, the next element automatically begins on a new