Lập trình web với HTML5

Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5Lập trình web với HTML5

Chapter 1: Getting started with HTML5 In this chapter: Introduction HTML Differences from HTML4 and HTML5 New API Introduction Development of HTML stopped in 1999 with HTML 4. The W3C focused its efforts on changing the underlying syntax of HTML from Standard Generalized Markup Language (SGML) to XML, as well as completely new markup languages like Scalable Vector Graphics (SVG), XForms, and MathML. Browser vendors focused on browser features like tabs and RSS readers. Web designers started learning CSS and the JavaScript™ language to build their own applications on top of the existing frameworks using Asynchronous JavaScript + XML (Ajax). But HTML itself grew hardly at all in the next eight years. Recently, the beast came back to life. Three major browser vendors—Apple, Opera, and the Mozilla Foundation—came together as the Web Hypertext Application Technology Working Group (WhatWG) to develop an updated and upgraded version of classic HTML. More recently, the W3C took note of these developments and started its own next-generation HTML effort with many of the same members. Eventually, the two efforts will likely be merged. Although many details remain to be argued over, the outlines of the next version of HTML are becoming clear. This new version of HTML—usually called HTML 5, although it also goes under the name Web Applications 1.0—would be instantly recognizable to a Web designer frozen in ice in 1999 and thawed today. There are no namespaces or schemas. Elements don't have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table. At the same time, this proverbial unfrozen caveman Web designer would encounter some new and confusing elements. Yes, old friends like div remain, but now HTML includes section, header, footer, and nav as well. em, code, and strong are still present, but so are meter, time, and m. img and embed continue to be used, but now there are video and audio too. However, closer inspection by the caveman designer would reveal that these elements aren't that different. Many Page 1 HTML5 Chapter 1: Getting started Chapter 1: Getting started with HTML5 with HTML5 Chapter 1: Getting started with HTML5 of them might be things the designer needed back in 1999 but didn't have. All these new elements are easily learned by simple analogy with elements the designer already understands. In fact, they're a lot easier to learn than Ajax or CSS. Finally, when the caveman fired up the 300MHz laptop running Windows 98 that was also frozen in 1999, they might be astonished to realize that the new pages display fine in Netscape 4 and Windows® Internet Explorer® 5. Sure, the browser wouldn't recognize or do anything with the new elements, but the page still displays, and the content is all there. That's not a happy coincidence. HTML 5 was explicitly designed to degrade gracefully in browsers that don't support it. The reason is simple: We are all cave people. Browsers now have tabs, CSS, and XmlHttpRequest, but their HTML renderers are stuck in 1999. The Web can't move forward without accounting for the installed base. HTML 5 understands this. It offers real benefits to page authors today while promising even more to page readers tomorrow as browsers are slowly upgraded. With that in mind, let's look at what HTML 5 brings you. Background The World Wide Web's markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents. The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. Quick introduction to HTML A basic HTML document looks like this: Sample 1.1: HTML file <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <! this is a comment > </body> </html> HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as "<body>", and an end tag, such as "</body>". (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.) Page 2 HTML5 Chapter 1: Getting started with HTML5 Tags have to be nested such that elements are all completely within each other, without overlapping: Sample 1.2: nested tags <p>This is <em>very <strong>wrong</em>!</strong></p> <p>This <em>is <strong>correct</strong>.</em></p> This specification defines a set of elements that can be used in HTML, along with rules about the ways in which the elements can be nested. Elements can have attributes, which control how the elements work. In the example below, there is a hyperlink, formed using the a element and its href attribute: Sample 1.3: <a> tag <a href="demo.html">simple</a> Attributes are placed inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn't contain spaces or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string. Sample 1.4: attributes <! empty attributes > <input name=address disabled> <input name=address disabled=""> <! attributes with a value > <input name=address maxlength=200> <input name=address maxlength='200'> <input name=address maxlength="200"> HTML user agents (e.g. Web browsers) then parse this markup, turning it into a DOM (Document Object Model) tree. A DOM tree is an in-memory representation of a document. DOM trees contain several kinds of nodes, in particular a DOCTYPE node, elements, text nodes, and comment nodes. The markup snippet at the top of this section would be turned into the following DOM tree: Page 3 HTML5 Chapter 1: Getting started with HTML5 Figure 1.1: Document tree The root element of this tree is the html element, which is the element always found at the root of HTML documents. It contains two elements, head and body, as well as a text node between them. There are many more text nodes in the DOM tree than one would initially expect, because the source contains a number of spaces (represented here by "␣") and line breaks (" ") that all end ⏎ up as text nodes in the DOM. The head element contains a title element, which itself contains a text node with the text "Sample page". Similarly, the body element contains an h1 element, a p element, and a comment. This DOM tree can be manipulated from scripts in the page. Scripts (typically in JavaScript) are small programs that can be embedded using the script element or using event handler content attributes. For example, here is a form with a script that sets the value of the form's output element to say "Hello World": Page 4 HTML5 Chapter 1: Getting started with HTML5 Sample 1.5: form <form name="main"> Result: <output name="result"></output> <script> document.forms.main.elements.result.value = 'Hello World'; </script> </form> Each element in the DOM tree is represented by an object, and these objects have APIs so that they can be manipulated. For instance, a link (e.g. the a element in the tree above) can have its "href" attribute changed in several ways: Sample 1.6: Using javascript to change attribute var a = document.links[0]; // obtain the first link in the document a.href = 'sample.html'; // change the destination URL of the link a.protocol = 'https'; // change just the scheme part of the URL a.setAttribute('href', 'http://example.com/'); // change the content attribute directly Since DOM trees are used as the way to represent HTML documents when they are processed and presented by implementations (especially interactive implementations like Web browsers), this specification is mostly phrased in terms of DOM trees, instead of the markup described above. HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display. To influence exactly how such rendering takes place, authors can use a styling language such as CSS. In the following example, the page has been made yellow-on-blue using CSS. Sample 1.7: Using CSS <html> <head> <title>Sample styled page</title> <style> body { background: navy; color: yellow; } </style> </head> <body> <h1>Sample styled page</h1> <p>This page is just a demo.</p> </body> </html> Page 5 HTML5 Chapter 1: Getting started with HTML5 HTML5 difference from HTML4 Syntax HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents. Documents using the HTML syntax are almost always served with the text/html media type. HTML5 also defines detailed parsing rules (including "error handling") for this syntax which are largely compatible with popular implementations. User agents must use these rules for resources that have the text/html media type. Here is an example document that conforms to the HTML syntax: Sample 1.8: normal syntax <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> HTML5 also defines a text/html-sandboxed media type for documents using the HTML syntax. This can be used when hosting untrusted content. The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. Below is an example document that conforms to the XML syntax of HTML5. Note that XML documents must be served with an XML media type such as application/xhtml+xml or application/xml. Sample 1.9: xhtml and xml syntax Page 6 HTML5 Chapter 1: Getting started with HTML5 <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> New Elements The links in this section may stop working if elements are renamed and/or removed. They should function in the latest version of this draft. The following elements have been introduced for better structure: section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. article represents an independent piece of content of a document, such as a blog entry or newspaper article. aside represents a piece of content that is only slightly related to the rest of the page. hgroup represents the header of a section. header represents a group of introductory or navigational aids. footer represents a footer for a section and can contain information about the author, copyright information, et cetera. nav represents a section of the document intended for navigation. figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. Sample 1.10: figure tag <figure> <video src="ogg"></video> <figcaption>Example</figcaption> </figure> figcaption can be used as caption (it is optional). Then there are several other new elements: Page 7 HTML5 Chapter 1: Getting started with HTML5 video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types. embed is used for plugin content. mark represents represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. progress represents a completion of a task, such as downloading or when performing a series of expensive operations. meter represents a measurement, such as disk usage. time represents a date and/or time. ruby, rt and rp allow for marking up ruby annotations. wbr represents a line break opportunity. canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. command represents a command the user can invoke. details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption. datalist together with the a new list attribute for input can be used to make comboboxes: Sample 1.11: datalist tag <input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist> • keygen represents control for key pair generation. • output represents some type of output, such as from a calculation done through scripting. • The input element's type attribute now has the following new values: o tel o search o url o email o datetime o date Page 8 HTML5 Chapter 1: Getting started with HTML5 o month o week o time o datetime-local o number o range o color The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback. New Attributes HTML5 has introduced several new attributes to various elements that were already part of HTML4: • The a and area elements now have a media attribute for consistency with the link element. • The a and area elements have a new attribute called ping that specifies a space- separated list of URLs which have to be pinged when the hyperlink is followed. Currently user tracking is mostly done through redirects. This attribute allows the user agent to inform users which URLs are going to be pinged as well as giving privacy-conscious users a way to turn it off. • The area element, for consistency with the a and link elements, now also has the hreflang and rel attributes. • The base element can now have a target attribute as well, mainly for consistency with the a element. (This is already widely supported.) Also, the target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with iframe. • The value attribute for the li element is no longer deprecated as it is not presentational. The same goes for the start attribute of the ol element. • The meta element has a charset attribute now as this was already widely supported and provides a nice way to specify the character encoding for the document. • A new autofocus attribute can be specified on the input (except when the type attribute is hidden), select, textarea and button elements. It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience as the user can turn it off if the user does not like it, for instance. • A new placeholder attribute can be specified on the input and textarea elements. It represents a hint intended to aid the user with data entry. • The new form attribute for input, output, select, textarea, button and fieldset elements allows for controls to be associated with a form. I.e. these elements can now be placed anywhere on a page, not just as descendants of the form element. Page 9 HTML5 Chapter 1: Getting started with HTML5 Sample 1.12: form attribute <label>Email: <input type=email form=x name=email> </label> <form id=x></form> The new required attribute applies to input (except when the type attribute is hidden, image or some button type such as submit) and textarea. It indicates that the user has to fill in a value in order to submit the form. The fieldset element now allows the disabled attribute. It disables all descendant controls when specified. The input element has several new attributes to specify constraints: autocomplete, min, max, multiple, pattern and step. As mentioned before it also has a new list attribute which can be used together with the datalist element. The form element has a novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted). The input and button elements have formaction, formenctype, formmethod, formnovalidate, and formtarget as new attributes. If present, they override the action, enctype, method, novalidate, and target attributes on the form element. The menu element has two new attributes: type and label. They allow the element to transform into a menu as found in typical user interfaces as well as providing for context menus in conjunction with the global contextmenu attribute. The style element has a new scoped attribute which can be used to enable scoped style sheets. Style rules within such a style element only apply to the local tree. The script element has a new attribute called async that influences script loading and execution. The html element has a new attribute called manifest that points to an application cache manifest used in conjunction with the API for offline Web applications. The link element has a new attribute called sizes. It can be used in conjunction with the icon relationship (set through the rel attribute) to indicate the size of the referenced icon. Thus allowing for icons of distinct dimensions. The ol element has a new attribute called reversed. When present, it indicates that the list order is descending. The iframe element has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e.g. blog comments. Several attributes from HTML4 now apply to all elements. These are called global attributes: class, dir, id, lang, style, tabindex and title. There are also several new global attributes: Page 10 HTML5 [...]... Worldwide Web Web pages are by no means limited to text and graphics All major browsers can handle a variety of audio (and video) formats with ease, and including audio on a Web site is theoretically no more complicated than including graphics Web audio is booming in certain areas such as Internet radio stations and online music distribution, but few mainstream Web sites include sound Why is the Web still... to page with HTML5 Basic structure Lets have a look at the structure of a HTML 5 website, as many of you will be familiar with the content management dubbed “WordPress” we will emulate a basic 2 column HTML 5 web page The picture below represents how a HTML 4 page would look Figure 2.1: HTML 4 structure And the picture below represents how a HTML 5 page would look Page 16 HTML5 Chapter 2: HTML5 Structure... Sample Sample 2.1: A HTML5 file stuff Page 18 HTML5 Chapter 2: HTML5 Structure My Site Home About Contact My Article Sample 2.2: output Page 19 HTML5 Chapter 2: HTML5 Structure... tags and closing tags HTML5 will be the new standard for HTML, XHTML, and the HTML DOM HTML5 is still a work in progress However, most modern browsers have some HTML5 support Some rules for HTML5 were established: New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device... (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent Page 15 HTML5 The development process should be visible to the public Some of the most interesting new features in HTML5: Chapter 2: HTML5 Structure for drawing The canvas element Chapter 2: HTML5 Structure The video and audio elements for media playback In this Better support for local offline storage... document.createElement("nav"); Sample HTML5 Structure Home About Page 21 HTML5 Chapter 2: HTML5 Structure Main Section This is a sample HTML5 Page This is the content for the first article ... in HTML 5 is for marking up conversations — a chat transcript, an interview, a bit dialog from a screenplay Page 27 HTML5 Chapter 3: Embed audio and video Chapter 3: Embed audio and video In this chapter: Audio on the web Using tag Video on the web Using tag Audio on the web There's a revolution under way in the audio world Personal computers are now powerful enough to be viable professional... td and th rules attribute on table Page 13 HTML5 Chapter 1: Getting started with HTML5 scrolling attribute on iframe size attribute on hr type attribute on li, ol and ul valign attribute on col, colgroup, tbody, td, tfoot, th, thead and tr width attribute on hr, table, td, th, col, colgroup and pre APIs HTML5 introduces a number of APIs that help in creating Web applications These can be used together... begin to paint a picture of how important native audio support will soon become Video on the web Anyone who has visited YouTube.com in the past four years knows that you can embed video in a web page But prior to HTML5, there was no standards-based way to do this Virtually all the video you’ve ever watched “on the web has been funneled through a third-party plugin — maybe QuickTime, maybe RealPlayer,... vary a lot Sample 2.4: Javascript using createElement Sample HTML5 Structure header, nav, article, footer, address, section { display: block; } #container { width:900px; Page 20 HTML5 Chapter 2: HTML5 Structure margin:auto; background-color:white; } header { background-color:#666; } nav li { display:inline; padding-right:1em; . aren't that different. Many Page 1 HTML5 Chapter 1: Getting started Chapter 1: Getting started with HTML5 with HTML5 Chapter 1: Getting started with HTML5 of them might be things the designer. just a demo.</p> </body> </html> Page 5 HTML5 Chapter 1: Getting started with HTML5 HTML5 difference from HTML4 Syntax HTML5 defines an HTML syntax that is compatible with HTML4. closing tags HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support. Some rules for HTML5 were