Tài liệu The Definitive Guide to HTML5 doc

Freeman US $44.99 Shelve in Web Design/HTML User level: Intermediate–Advanced www.apress.com SOURCE CODE ONLINE RELATED BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® The Definitive Guide to HTML5 The Definitive Guide to HTML5 covers everything you need to create standards- compliant, semantic, modern websites. You’ll learn how to: • Use all of the core features of HTML5. • Make the most of the APIs that surround HTML5, such as Geolocation, Web Storage, and drag and drop. • Leverage the media capabilities of the modern web: Canvas, audio, and video. The Definitive Guide to HTML5 begins by tackling the basics of HTML5, ensuring that you know best practices and key uses of all of the important elements, including those new to HTML5. It covers extended usage of CSS3, JavaScript, and DOM manipula- tion, making you proficient in all core aspects of modern website creation. The final part of the book covers the associated W3C APIs that surround the HTML5 specification. You will achieve a thorough working knowledge of the Geolocation API, Web Storage, creating offline applications, and the new drag and drop functionality. The Definitive Guide to HTML5 also dives into the key media enhancements of HTML5 and its surrounding technologies: Canvas, video and audio. Turn to The Definitive Guide to HTML5 and find the knowledge you need to start creating the next generation of websites. www.it-ebooks.info For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info iv Contents at a Glance  About the Author xxxiii  About the Technical Reviewers xxxiv  Acknowledgments xxxv  Part I: Getting Started 1  Chapter 1: Putting HTML5 in Context 3  Chapter 2: Getting Ready 9  Chapter 3: Getting Started with HTML 13  Chapter 4: Getting Started with CSS 39  Chapter 5: Getting Started with JavaScript 71  Part II: The HTML Elements 103  Chapter 6: HTML Elements in Context 105  Chapter 7: Creating HTML Documents 117  Chapter 8: Marking Up Text 151  Chapter 9: Grouping Content 191  Chapter 10: Creating Sections 217  Chapter 11: Table Elements 251  Chapter 12: Working with Forms 281  Chapter 13: Customizing the Input Element 311  Chapter 14: Other Form Elements and Input Validation 351  Chapter 15: Embedding Content 371  Part III: Cascading Style Sheets 395  Chapter 16: CSS in Context 397  Chapter 17: Using the CSS Selectors—Part I 411 www.it-ebooks.info  CONTENTS AT A GLANCE v  Chapter 18: Using the CSS Selectors—Part II 437  Chapter 19: Using Borders and Backgrounds 465  Chapter 20: Working with the Box Model 497  Chapter 21: Creating Layouts 531  Chapter 22: Styling Text 555  Chapter 23: Transitions, Animations, and Transforms 581  Chapter 24: Other CSS Properties and Features 611  Part IV: Working with the DOM 631  Chapter 25: The DOM in Context 633  Chapter 26: Working with the Document Object 653  Chapter 27: Working with the Window Object 679  Chapter 28: Working with DOM Elements 705  Chapter 29: Styling DOM Elements 735  Chapter 30: Working with Events 765  Chapter 31: Using the Element-Specific Objects 793  Part V: Advanced Features 819  Chapter 32: Using Ajax – Part I 821  Chapter 33: Using Ajax—Part II 849  Chapter 34: Working with Multimedia 873  Chapter 35: Using the Canvas Element – Part I 897  Chapter 36: Using the Canvas Element – Part II 929  Chapter 37: Using Drag & Drop 957  Chapter 38: Using Geolocation 975  Chapter 39: Using Web Storage 987  Chapter 40: Creating Offline Web Applications 997  Index 1015 www.it-ebooks.info P A R T I 1 Getting Started Before you can begin to explore HTML5, you have some preparation to do. In the next five chapters, I’ll describe the structure of the book, show you how to get set up for HTML5 development, and give you a refresher in basic HTML, CSS, and JavaScript. www.it-ebooks.info C H A P T E R 1 3 Putting HTML5 in Context The Hypertext Markup Language (HTML) has been around since the early 1990s. My earliest encounter was somewhere around 1993 or 1994, when I was working at a university research lab not far from London. There was only one browser—NCSA Mosaic—and the number of web servers could be counted on one hand. When I think back to those days, I wonder why we were so excited about HTML and the World Wide Web. (We had to laboriously type all three words in those days. There wasn’t the critical mass or current sense of importance to refer to just “the Web.” Everything was very basic. I remember some images of gemstones that we could watch load slowly. This was before the broadband revolution and the entire university had the kind of bandwidth that is common on a mobile phone these days. But we were excited. Grant proposals were hurriedly rewritten to embrace the new world, and there was a real sense that the world of technology had fractured into before-Web and after-Web periods, even if all we could do was see pictures of a coffee pot in another university not far from London (but too far to go for coffee). Since then, the Web has become indistinguishable from the Internet for many users and we are long past the point of being excited about pictures of gems. Along the way, HTML has been extended, enhanced, twisted, tortured, fought over, litigated over, ignored, embraced, denigrated for being too simple, hailed as being the future and, ultimately, settling into its current position as part of the indispensable plumbing in the daily lives of billions of people. This book is about HTML5—the latest version of the HTML standard and an attempt to bring order, structure, and enhancement to a critical technology that has finally matured after years of difficult adolescence. The History of HTML All HTML books have a section titled The History of HTML, and most use this section to give a careful timeline of the HTML standard from the moment it was created until the present day. If you need that information, I encourage you to find it on Wikipedia—although it isn’t very interesting or useful. To understand how HTML has been shaped and how we ended up at HTML5, we care about a small number of key turning points and one long-lived trend. The Introduction of JavaScript JavaScript (which, despite the name, has very little to do with the Java programming language) was developed by a company called Netscape. It marked the start of client-side scripting embedded in the web browser, moving HTML from a carrier of static content into something a little richer. I say a little richer because it took a while for the kind of complex interactions we see in the browser today to emerge. www.it-ebooks.info CHAPTER 1  PUTTING HTML5 IN CONTEXT 4 JavaScript isn’t part of the core HTML specification, but the association between web browsers, HTML, and JavaScript is so close that it makes no sense to tease them apart. The HTML5 specification assumes that JavaScript is available, and we need to use JavaScript to use some of the most interesting new features that have been added to HTML5. The End of the Browser Wars There was a period where the browser market was hotly contested. The main competitors were Microsoft and Netscape, and these companies competed by adding unique features to their web browsers. The idea was that these features would be so compelling that web developers would build their content so that it would work only on a particular browser—and this content would be so compelling that users would prefer one browser over another and market domination would follow. It didn’t quite work out that way. Web developers ended up using only features that were available in all browsers or coming up with elaborate workarounds that used roughly comparable features in each. It was pretty painful, and web development still bears the scars of this period. In the end, Microsoft was found guilty of antitrust violations after giving away Internet Explorer for free, undercutting Netscape’s paid-for Navigator product. Microsoft has been blamed for Netscape going out of business. There may be some truth in this, but I consulted for Netscape for 18 months or so during this period, and I have never encountered a company so bent on self-destruction. Some companies are destined to be lessons to others, and Netscape is one such company. The destruction of Netscape and the penalties given to Microsoft ended the browser wars and set the scene for standards-based web browsing. The HTML specification was improved, and adherence to it became the norm. These days, browsers compete on their level of compliance to the standards—a complete turnabout that has made life easier for developers and users alike. The Dominance of Plugins Plugins have been a good thing for the web. They have allowed companies to provide support for advanced features and rich content that cannot be easily achieved using HTML alone. Some of these plugins have become so feature rich and so widely installed that many sites are just vehicles for that plugin’s content. This is especially true for Adobe Flash, and I often encounter sites that are completely implemented in Flash. There is nothing intrinsically wrong with this, but it does mean that the browser and HTML are not being used beyond their ability to act as a Flash container. Plugins make the creators of browsers uncomfortable because it puts control in the hands of the plugin maker, and one key area of enhancement in HTML5 is an attempt to put the kind of rich content that Flash is used for directly into the browser. Two companies in particular are driving the move away from Flash: Apple and Microsoft. Apple does not support Flash in its iOS, and Microsoft has disabled Flash from the Metro-style version of Internet Explorer in Windows 8. The Emergence of Semantic HTML Early versions of the HTML standard didn’t do much to separate the significance of content from the way it was presented. If you wanted to indicate that a span of text was important, you applied an HTML element that made the text bold. It was up to the user to make the association that bold content is important content. This is something that humans do very easily and that automated agents find very hard to do. The automated processing of content has become important in the years since HTML was first introduced, and there has been a gradual effort to separate the significance of HTML elements from the way that content is presented in the browser. www.it-ebooks.info CHAPTER 1  PUTTING HTML5 IN CONTEXT 5 The Trend: The HTML Standard Lags Behind HTML Use The process for creating a standard is always a long one, especially for something as widely used as HTML. There are a lot of stakeholders, and each wants to influence new versions of the standard to their commercial benefit or particular point of view. Standards are not laws, and standards bodies fear fragmentation above all else—which leads to a lot of time-consuming reconciliation around how potential features and enhancements may work. The standards body for HTML is the World Wide Web Consortium (known as W3C). They have a difficult job, and it takes a long time for a proposal to become a standard. It takes a very long time for a revision to the core HTML specification to be approved. The consequence of the lengthy standards process is that the W3C has always been following the curve, trying to standardize what has already become accepted practice. The HTML specification has been a reflection of leading-edge thinking about web content from several years ago. This has reduced the importance of the HTML standard because the real innovation was happening away from the W3C, partly in the browsers and partly in plugins. Introducing HTML5 HTML5 isn’t just the latest version of the HTML specification. It is also an umbrella term that describes a set of related technologies that are used to make modern, rich web content. I’ll introduce you to these technologies in later chapters, but the three most important ones are the core HTML5 specification, Cascading Style Sheets (CSS), and JavaScript. The core HTML5 specification defines the elements we use to mark up content, indicating its significance. CSS allows us to control the appearance of marked-up content as it is presented to the user. JavaScript allows us to manipulate the contents of an HTML document, respond to user interaction, and take advantage of some programming-centric features of the new HTML5 elements.  Tip Don’t worry if none of this makes sense—I’ll introduce you to HTML elements in Chapter 3, familiarize you with CSS in Chapter 4, and refresh your JavaScript in Chapter 5. Some people (picky, obsessive, detail-oriented people) will point out that HTML5 refers to just the HTML elements. Ignore these people—they are missing a fundamental shift in the nature of web content. The technologies used in web pages have become so interconnected that you need to understand them all to create content. If you use HTML elements without CSS, you create content that users find hard to parse. If you use HTML and CSS without JavaScript, you miss the opportunity to give users immediate feedback on their actions and the ability to take advantage of some of the new advanced features that HTML5 specifies. The New Standard(s) To deal with the long standardization process and the way that the standard lags behind common usage, HTML5 and related technologies are defined by a larger number of small standards. Some are just a handful of pages focused on a very particular aspect of a single feature. Others, of course, are still hundreds of pages of dense text that cover whole swathes of functionality. www.it-ebooks.info CHAPTER 1  PUTTING HTML5 IN CONTEXT 6 The idea is that smaller groups can cooperate in developing and standardizing features that are important to them and that less contentious topics can be standardized without being held up by arguments about other features. There are some positive and negative consequences to this approach. The positives are that standards are being developed more quickly. The main negative is that it is hard to keep track of all of the different standards in development and how they relate to one another. The quality of the specifications has also fallen—there is ambiguity in some of standards, which leads to inconsistent implementations in the browsers. Perhaps the biggest drawback is that there is no baseline against which HTML5 compliance can be assessed. We are still in the early days, but we can’t rely on features being implemented in all of the browsers that our users might employ. This makes adopting features problematic and requires a careful assessment of how widely adopted a standard has become. The W3C has released an official HTML5 logo, shown in Figure 1-1, but it doesn’t indicate support for any particular aspect of the HTML5 standard or its related technologies. Figure 1-1. The official W3C HTML5 logo Embracing Native Multimedia A key enhancement in HTML5 is the support for playing video and audio files natively in the browser that is, without needing a plugin). This is one part of the response from the W3C to the dominance of plugins, and the integration between the native multimedia support and the rest of the HTML features offers a lot of promise. I explain these features in Chapter 34. Embracing Programmatic Content One of the biggest changes in HTML5 is the addition of the canvas element, a feature that I describe in Chapters 35 and 36. The canvas is another response to the domination of plugins, and it provides a general-purpose drawing surface we can use to achieve some of the tasks that Adobe Flash is commonly used for. Part of the significance of this feature arises because we have to use JavaScript to work with the canvas element. This makes programming a first-class activity in an HTML document, which is an important change. www.it-ebooks.info CHAPTER 1  PUTTING HTML5 IN CONTEXT 7 Embracing the Semantic Web HTML5 introduces a number of features and rules to separate the meaning of elements from the way that content is presented. This is an important concept in HTML5, and I cover it in more detail in Chapter 6. This is a theme I will return to several times in this book, and it marks a new maturity in HTML and reflects the diversity of ways in which HTML content is produced and consumed. This change (which has been gradually introduced in earlier versions of HTML) creates slightly more work for the web developer because we have to mark up content and then define its presentation, but there are some useful new enhancements to make this process less burdensome. The Current State of HTML5 The core HTML5 standard is still under development, and it is not expected to be finalized for some time. This means there are likely to be some changes between the features I describe in this book and the final standard. However, the standard is unlikely to be finished for several years and the changes are likely to be minor. Browser Support for HTML5 The most popular web browsers already implement many HTML5 features, and throughout this book I show you how examples are displayed by viewing HTML5 documents in browsers such as Google Chrome or Mozilla Firefox. Not all browsers support all features, however, and it is worth checking whether support exists before using a feature in a real project. Some browsers, such as Chrome ad Firefox, are updated on an almost continuous basis. I have lost count of the number of browser updates I applied as I wrote this book, and each update brings some new feature or bug fix. This means I have been unable to give definitive information about which features are supported by which browsers. But given the fragmented nature of the HTML5 standards, it makes sense to check for features using a JavaScript library such as Modernizr (http://www.modernizr.com). Modernizr allows you to programmatically check to see if the browser the user has employed supports key HTML5 features, giving you the ability to make decisions in the document about which features you rely on. If you want to plan in advance, I recommend the site When Can I Use? (http://caniuse.com), which provides detailed information about browser support and adoption rates and seems to be very well maintained. Site Support for HTML5 The number of sites that use HTML5 features is growing rapidly. Some are simply demonstration sites, showing how a given HTML5 features appears, but there is an increasing number of more substantial sites that can take advantage of an HTML5 browser. A good example is YouTube, which now offers native HTML5 video support—although, of course, Flash video is used for older browsers. The Structure of This Book I have split this book into five parts. This part, Part I, contains the information you need to get ready to use this book and a refresher in basic HTML, CSS, and JavaScript. If you haven’t done any web development recently, you will find these chapters bring you up to speed. Part II covers the HTML elements, including those that are new or modified in HTML5. Each element is described and demonstrated, and you’ll find information about the default presentation for elements. www.it-ebooks.info [...]... Between the tags is the element’s content (in this case, the word apples) Together, the tags and the content form the code element, as shown in Figure 3-1 Figure 3-1 The anatomy of an HTML element Elements are the way you tell the browser about your content The effect of the element is applied to the element contents Each of the HTML elements has a different and quite specific meaning the code element,... 3-11 The Outer Structure of an HTML Document The DOCTYPE element tells the browser it is dealing with an HTML document This is expressed through the HTML boolean attribute: You follow the DOCTYPE element with the start tag of the html element This tells the browser that the contents of the element should be treated as HTML all the. .. elements to manage the way content is presented is now strongly discouraged The idea is that you use HTML elements to define the structure and meaning of your content and Cascading Style Sheets (CSS) to control the way the content is presented to the user We’ll come to CSS in Chapter 4 The elements that do affect presentation tend to be those that originated in the early versions of HTML, when the idea... the disabled attribute stops the user from entering data Boolean attributes are a little odd because it is the presence of the attribute that configures the element, not the value you assign to the attribute I didn’t specify disabled="true"—I just added the word disabled You can achieve the same effect by assigning the empty string ("") or by setting the value to be the name of the attribute, as shown... 1-5 Fine-tune the way that a browser handles HTML elements Apply one or more attributes to the element 6-10 Declare that a document contains HTML Use the DOCTYPE and html elements 11 Describe an HTML document Use the head element to contain one or more of the metadata elements (which are described in Chapter 7) 12 Add content to an HTML document Use the body element to contain text and other HTML elements... documents are expected to contain a title element, although browsers will generally ignore any omissions Most browsers display the contents of the title element in the menu bar of the browser window or at the top of the tab that displays the page The head and title elements are described fully in Chapter 7, along with all of the other metadata elements that can be placed in the head element  Tip The. .. HTML elements have defined relationships with the other elements in an HTML document An element that contains another element is the parent of the second element In Listing 3-13, the body element is the parent to the code element, because the code element is contained between the start and end tags of the body element Conversely, the code element is a child of the body element An element can have multiple... Types The HTML5 specification groups elements into three categories: metadata elements, flow elements, and phrasing elements Metadata elements are used to create the basic structure of an HTML document and to provide information and direction to the browser about how the document should be processed I describe the metadata elements in Chapter 7 The other two categories are slightly different—you use them... > I like apples and oranges The body element tells the browser which part of the document is to be displayed to the user—and, of course, a lot of this book is given over to what you can put inside the body element With the addition of the body element, you have the skeletal HTML document I will use for most of the examples in this book Understanding Parents, Children,... addition to these global attributes, elements can define their own attributes that provide configuration information that is specific to the role of the element The href attribute is local to the a element, and it configures the URL that is the destination of the hyperlink The a element defines a number of specific attributes, which I describe in Chapter 8  Tip I have used double quotes ("myvalue") to delimit . PROFESSIONALS BY PROFESSIONALS ® The Definitive Guide to HTML5 The Definitive Guide to HTML5 covers everything you need to create standards- compliant,. drop. • Leverage the media capabilities of the modern web: Canvas, audio, and video. The Definitive Guide to HTML5 begins by tackling the basics of HTML5, ensuring