Introduction
HTML5: What It Is and Why It Is Important to Learn
Web sites over the timeline of the Internet have evolved from simple one-pagers of static text and pictures to sites with thousands of pages, features, personalization, and more. In the present day, a decent web site is expected to have an appealing graphic appearance and easy navigation, and provide visitors with the information—textual or visual—for which they came to the site. Perhaps they came to research something, to make a purchase, or for some entertainment.
To offer the plateful of varied experiences, web technologies have sprung up, matured, and either kept evolving or were put to pasture. Early web sites used Common Gateway Interface (CGI) scripts to offer back-end processing. Today, a plethora of technologies is available, as well as sophisticated database usage, analytics (tracking visitor behavior), and targeted content based on location and previous browsing efforts.
The Internet started out as a somewhat idealistic and pure platform to impart information, without advertising or any other impurity to detract from the focus of web site visits. Well, progress can be delayed but rarely stopped. Marketing and advertising are common Internet realities, and have been for many years. With that comes technology to support the marketing efforts. The new geolocation feature in HTML5, which pinpoints the user’s location, will no doubt be used for many marketing campaigns. To a marketer, that means sending you targeted, focused local enticements. Figure 1 shows that I have been found!
Figure 1 Geolocation is used to locate the browser.
What We Have So Far
Web pages are built with HTML (or variations, such as XHTML). Styling is provided via Cascading Style Sheets (CSS). Back-end processing is accomplished using server-side languages, primarily PHP and ASP.NET. Animation is accomplished with Adobe Flash or through JavaScript manipulation. This tool set has been the staple of web development for many years. Some changes have occurred along the way, such as to remove HTML tags that offered style attributes instead of content or organization. The style-centric tags became incorporated into CSS. Content management systems became popular to use as the backbone for web sites, as they combine many of the essential elements in an easy-to-use package.
Animation provided by Flash provides a rich and sometimes amazing visual experience. Really a sort of art-based tool, Flash became so popular that browsers began supporting it without requiring people to go out of their way to download the Flash Player, which is essentially a browser plug-in. Flash has a powerful programming language of its own: ActionScript.
Unfortunately for Flash aficionados, the nature of Flash, essentially being a movie, cannot be properly indexed by search engines. This presents a conflict many developers have needed to wrestle with: You can have a beautiful web site, and that beauty reduces the ability to get higher up in search engine results.
Clarifying All the Terms
We’re barely into the introduction of the book and have already mentioned a good number of technologies, and more will be coming. It seems that here at the start is a good place to define these acronyms and tools—the lingo used by web designers and developers. The list is by no means exhaustive. A glossary of several pages might do justice to the world of web lingo.
NOTE
Not all of the items listed here are covered in the book, as this book focuses on multimedia and not the whole kitchen sink.
HTML and XHTML Hypertext Markup Language (HTML) is the basic web page programming language. As far as true programming languages go, HTML is not quite one at all. Comprehensive languages have the ability to repeat sections of code (looping), do conditional testing (with if and while statements), and much more. HTML does not have these capabilities.
HTML’s primary purpose is to have content appear on a web page. This is done via tags, which are ways to tell the web page what it is supposed to show or do. The tags are rendered sequentially as they appear in the code. In other words, there is no going up and down through the code (JavaScript is used for that).
XHTML is a variation of HTML. The X indicates XML (Extensible Markup Language).
CSS Cascading Style Sheets (CSS) is used for styling content. For example, a line of text might be italicized, be larger than surrounding text, or have any number of other treatments applied to it. All these visual options are of the styling camp. The text is still the text, or content. The text says the same thing, regardless of what it looks like.
CSS is applied to parts of the HTML. How this is done is shown in this book.
JavaScript JavaScript is a full-fledged programming language—looping and all—that runs in the web browser. This distinction is important. It means that the JavaScript running in my browser might be doing something different than the JavaScript running in your browser, even though we are viewing the same web page. JavaScript is arguably one of the most important items in modern web development.
AJAX Asynchronous JavaScript and XML (AJAX) is a mixed set of technologies that provides the answer to a key web need. The use of AJAX is to refresh a section of a web page without needing to reload the entire page in the browser.
PHP and ASP/ASP.NET PHP and ASP are server-side programming languages. They are mostly used to output the HTML that shows up in a web browser. They handle various server-based necessities, such as reading data from a database to present on a web page. Other server-side technologies—Perl, ColdFusion, and JSP—are also common, to a degree.
Flash Flash is an application used to make web-based movies. That simple description does not do justice to how powerful Flash is. It could be debated that much of the Web’s appeal has been based a fair amount on the visuals that Flash provides on web pages.
CMS The goal of a content management system (CMS) is to organize pages of content. Blogs are the common CMS. WordPress is the biggie in this arena.
Tag A tag is a building block of HTML and its variations. A tag is structured such that it is enveloped by the less-than and greater-than symbols (< >). For example, the body tag looks like this: <body>. Most tags require (or at least should have) a closing one, such as </body>.
Tags can have attributes. For example, the form tag often comes with the action attribute: <form action="process.php">.
Canvas Tag Canvas is a new HTML5 tag. It is essentially a drawing platform, but one on which a great amount of creative endeavors can be realized. JavaScript is used extensively with the canvas tag.
Audio Tag Audio is a new HTML5 tag. As is obvious by its name, it is used to have audio played in the browser. Previously, this was accomplished by third-party solutions, such as an audio player built with Flash. Now, HTML gains a native audio player.
Video Tag Video is a new HTML5 tag. The use of video has become a primary means of communicating to the masses. YouTube (www.youtube.com) is the leading video repository. In the past, using YouTube, a video would appear in a web page either by having code generated by YouTube embedded within the HTML code or by having an HTML link point to the video on the YouTube site. The new video tag provides a way to play video via a native core tag. The source of the video can be anywhere—most likely on your web server.
On the Horizon
HTML5 is the next-generation HTML. It is not a complete overhaul by any means. However, it does bring the over-mature HTML4 up to the needs of today. HTML5 provides functionality that was not even a consideration just a handful of years ago. An item such as client-side storage (local storage) had no place or need in the HTML years of yore. The new geolocation feature, mentioned earlier, is useful for providing location-centric features, such as suggesting a restaurant in your neighborhood.
This book introduces a variety of HTML5 features, predominantly those for multimedia, such as audio, video, and animation. A few other key features are showcased as well to make your new HTML5 endeavors a rewarding experience.
NOTE
There are endless issues with finding perfect conformance among the various available web browsers. Browser support changes often, so specific browser details become quickly outdated. In this book, the approach is to present the material and let you, the reader, experiment. Certain browsers will be named as applicable to the material, but the recommendation is to keep up with the latest!
In regard to media presentation, three new tags—audio, video, and canvas—are meant to replace third-party tools that do the same tasks. However, this is a subjective statement, as the popular third-party tools will be around for a long time to come. Just because HTML5 is available doesn’t mean web sites must be updated to this new standard. Also, even as new sites are developed, those who put these together will naturally want to stick with the tools they are the most familiar with. A sticky side to this is the use of JavaScript as the main programming language for new web development—on the browser side anyway.
Keep in mind that a web page is served from a web server. There are server-side languages to help render the pages that appear in a web browser. But once in the browser, JavaScript becomes key, as it is a programming language that runs in the browser, or the client side of the web experience.
Historically, JavaScript was the baby of the languages. It was used to provide simple actions such as image rollovers (an image can change when the mouse moves over it). A few years ago, a new use of JavaScript, named AJAX, became the rage and brought JavaScript to the attention of the developer community.
In today’s development arena, JavaScript is a very important piece. JavaScript is not a particularly easy language to learn. A background with a traditional object-oriented language such as C++ will help make JavaScript easier to learn. If your cup of tea has been drag-and-drop tools, such as Dreamweaver, well, cook up a pot of coffee, roll up your sleeves, and take it at a comfortable pace.
Now, let’s get to the fun! To get excitement started, Figure 2 shows the canvas element displaying an exploding star field effect. Stick around—you will soon be creating dazzle like this.
Figure 2 The canvas tag displays a JavaScript-run animation.
About the Code in this Book
Typing code is the best way to learn a language. If, however, you find yourself with code that refuses to work after you’ve typed it in, you can download all of the code from www.webbingways.com or www.mhprofessional.com/computingdownload.