HTML5

Designing Rich Internet Applications

Matthew David

• Publisher: Routledge
• Year: 2013
• Print ISBN: 9780240820767
• eBook ISBN: 9781136080777
• Topic: Design
• Subtopic: Programming Games

Implement the powerful multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is changing the web development game with this project-based book that shows you-not just tells you-what HTML5 can do for your websites. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away.

HTML5 is the future of the web. Literally every web designer and developer needs to know how to use this language to create the types of web sites consumers now expect. This new edition of the bestseller teaches you to enhance your web designs with rich media solutions and interactivity, using detailed descriptions and hands-on projects for every step along the way. The second edition contains completely updated information, including more on mobility and video standards, plus new projects.

The companion website, visualizetheweb.com, is packed full of extra information, online code libraries, and a user forum, offering even more opportunity to learn new skills, practice your coding and interact with other users.

Section 1

HTML5 Tag Structure

The core to all web design is Hypertext Markup Language (HTML), the code that sits behind every web page and allows users to create stunning web sites. Today’s web sites can do amazing things. Can you imagine not being able to use solutions such as Google’s Gmail, Microsoft’s Bing, or view content on YouTube? Web sites have moved from static pages to complex applications. The core HTML language requires more and more functionality to meet our needs. To this end, a new standard has been introduced—HMTL5.

Where HTML Code Can Be Found

Not sure how to find HTML? It can be located on any web page by right-clicking your mouse and selecting View Page Source, as shown in Figure 1.1.

How the HTML code is presented will depend on your web browser. No matter what you are doing on the Web—developing a Personal Home Page (PHP) shopping cart, implementing an ASP.NET application, updating your latest blog entry, or playing an online game—every solution on the Web must use HTML at some point. If not, then your web browser will not be able to display the page correctly.

Figure 1.1 HTML code can be viewed in any web browser. Here, Google’s Chrome is color coding the HTML code.

The Evolution of the Web

Back in the days of 1995 when the Web was just gaining mainstream attention, it was assumed that you needed a computer (preferably running the Windows 95 operating system) running Microsoft’s Internet Explorer (IE) to view the Web. Yes, you could also use Netscape’s Navigator, but Microsoft took care of that problem by 1999. There was not much of a change to this model for about ten years.

The change to the desktop PC Internet browsing model began with the easy installation and adoption of wireless networks. A bulky computer, or even a laptop, to connect online was no longer needed; rather, users only needed a device that had enough power to go online and get what they needed, wherever they were.

The first few Internet-powered devices were crude at best, but it did not take long for mobile devices to catch up with PCs. The change came with Apple’s release of the iPhone and iPad, which both support one of the most advanced web browsers. Apple’s mobile devices shipped running a mobile version of their web browser called Safari. Does “mobile version” mean that features were cut from the full Mac OS X version? In a word: no. Mobile Safari is built using an open-source web browser called WebKit. Apple makes the bold claim that their iPhone web browser displays web pages exactly the same way as a full browser running on a Windows PC. Indeed, to add insult to injury, Apple took the boast even further: The iPhone web browser supports much of the latest core web technologies that Microsoft’s Internet Explorer does not support. Namely, the iPhone, back in 2007, was already supporting HTML5, and Microsoft was a long way from this support (Figure 1.2).

Microsoft has taken the emergence of HTML5 very seriously. Internet Explorer 8 was terrible, but Internet Explorer 9 was a lightning bolt of change. IE9 is not your typical web browser. The support for HTML5 is very credible, and with IE10 just around the corner, the complete embrace of HTML5 technologies is almost complete.

Figure 1.2 The iPhone’s mobile Safari already boasts strong support for HTML5 technologies.

Today, we assume that most devices will connect to the Internet. It is not just the realm of the PC—game systems, Blu-ray DVDs, MP3 players, cameras, storage SD flash cards, and more devices connect to the Internet every day. HTML, this core language that runs how we view the Web, is changing to support a post-PC world that connects to the Internet.

The Rocky Road from HTML4 to HTML5

Tim Berners-Lee developed HTML in 1989. The Internet has been around since the 1950s, but it had a fundamental flaw— connecting from one disconnected source to another was very difficult. Tim Berners-Lee addressed this issue by creating two technologies:

• HTTP, the Hypertext Transfer Protocol, a service protocol to enable web servers to run
• HTML, the Hypertext Markup Language, a scripting language to allow the presentation of text with embedded links to documents on the same server or a different server.

The revolutionary spin on Berners-Lee’s HTML language is that the link embedded in the page did not need to know if the web page it was linking to existed. If the page did not exist, then you received an error. If the page did exist, then you jumped from one web site to another.

A second reason for the success of HTML is that the language is very easy to learn and use. HTML uses a simple concept of tags that start and end a section. For instance, the following will show as a block of text when viewed through a web browser:

The tag concept for writing web pages is easy to learn and use. Needless to say, the World Wide Web really caught on. By the early 1990s it was becoming clear that the Web, in particular HTML, was going to be a very big thing. At that time a fortunate event happened: Tim Berners-Lee decided not to cash in on the success of the Web and instead formed a coalition to standardize popular web technologies. This group, called the World Wide Web Consortium (W3C; www.w3c.org) is an open standards body made up of representatives from many different companies such as Apple, Microsoft, Adobe, Sun, Google, Real Networks, Oracle, IBM, and many more. A goal of the W3C is to prevent any one company from forcing a technology onto users. This is important, as Microsoft was effectively trying to do this as they dominated the Web from 1997 to 2007.

The W3C has produced many popular technologies used by software companies each and every day. These include HTML, Extensible Markup Language (XML), Web Services Protocol (SOAP), and the Portable Network Graphics (PNG) format, among many others. Each of these standards was proposed, defined, ratified, and published with group approval. One of the first sets of standards to go through this process was HTML.

Berners-Lee’s first version of HTML is very different from the version we use today. For instance, Berners-Lee did not care for design and did not include any way to format text in the first release of HTML. Images were also an afte...

Table of contents

• Cover Page
• Half Title page
• Title Page
• Copyright Page
• Dedication
• Contents
• Preface
• Section 1
• Section 2
• Section 3
• Section 4
• Section 5
• Index