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

Trang 1

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

Chapter 1: Getting started with HTML5

Trang 2

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

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.)

Trang 3

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

<! attributes with a value >

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:

Trang 4

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":

Trang 5

"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>

</head>

<body>

<h1>Sample styled page</h1>

</body>

</html>

Trang 6

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

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

Trang 7

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

<figcaption>Example</figcaption>

</figure>

figcaption can be used as caption (it is optional)

Then there are several other new elements:

Trang 8

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

• keygen represents control for key pair generation

• output represents some type of output, such as from a calculation done through

Trang 9

• 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

Trang 10

Sample 1.12: form attribute

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

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:

Trang 11

The contenteditable attribute indicates that the element is an editable area The user can change the contents of the element and manipulate the markup

The contextmenu attribute can be used to point to a context menu provided by the author The data-* collection of author-defined attributes Authors can define any attribute they want

as long as they prefix it with data- to avoid clashes with future versions of HTML The only requirement on these attributes is that they are not used for user agent extensions

The draggable attribute can be used together with the new drag & drop API

The hidden attribute indicates that an element is not yet, or is no longer, relevant

The role and aria-* collection attributes which can be used to instruct assistive technology The spellcheck attribute allows for hinting whether content can be checked for spelling or not

Changed Elements

These elements have slightly modified meanings in HTML5 to better reflect how they are used

on the Web or to make them more useful:

The a element without an href attribute now represents a placeholder for where a link

otherwise might have been placed It can also contain flow content rather than being restricted

to phrase content

The address element is now scoped by the new concept of sectioning

The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened The cite element now solely represents the title of a work (e.g a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc)

Specifically the example in HTML4 where it is used to mark up the name of a person is

no longer considered conforming

The hr element now represents a paragraph-level thematic break

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized Usage varies widely by language

For the label element the browser should no longer move focus from the label to the control unless such behavior is standard for the underlying platform user interface

The menu element is redefined to be useful for toolbars and context menus

The small element now represents small print (for side comments and legal print)

The strong element now represents importance rather than strong emphasis

The head element no longer allows the object element as child

Trang 12

The language attribute on script It is required to have the value "JavaScript"

(case-insensitive) when present and cannot conflict with the type attribute Authors can simply omit it

as it has no useful function

The name attribute on a Authors can use the id attribute instead

The summary attribute on table The HTML5 draft defines several alternative solutions

Absent Elements

The elements in this section are not to be used by authors User agents will still have to support them and various sections in HTML5 define how E.g the obsolete isindex element is handled

by the parser section

The following elements are not in HTML5 because their effect is purely presentational and their function is better handled by CSS:

The following elements are not included because they have not been used often, created

confusion, or their function can be handled by other elements:

acronym is not included because it has created a lot of confusion Authors are to use abbr for abbreviations

applet has been obsoleted in favor of object

isindex usage can be replaced by usage of form controls

Trang 13

Finally the noscript element is only conforming in the HTML syntax It is not included in the XML syntax as its usage relies on an HTML parser

Absent Attributes

Some attributes from HTML4 are no longer allowed in HTML5 If they need to have any impact

on user agents for compatibility reasons it is defined how they should work in those scenarios rev and charset attributes on link and a

shape and coords attributes on a

longdesc attribute on img and iframe

target attribute on link

nohref attribute on area

profile attribute on head

version attribute on html

name attribute on img (use id instead)

scheme attribute on meta

archive, classid, codebase, codetype, declare and standby attributes on object

valuetype and type attributes on param

axis and abbr attributes on td and th

scope attribute on td

In addition, HTML5 has none of the presentational attributes that were in HTML4 as their

functions are better handled by CSS:

align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr

alink, link, text and vlink attributes on body

background attribute on body

bgcolor attribute on table, tr, td, th and body

border attribute on table and object

cellpadding and cellspacing attributes on table

char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead and tr

clear attribute on br

compact attribute on dl, menu, ol and ul

frame attribute on table

frameborder attribute on iframe

height attribute on td and th

hspace and vspace attributes on img and object

marginheight and marginwidth attributes on iframe

noshade attribute on hr

nowrap attribute on td and th

rules attribute on table

Trang 14

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 with the new elements introduced for applications:

API for playing of video and audio which can be used with the new video and audio elements

An API that enables offline Web applications

An API that allows a Web application to register itself for certain protocols or media types Editing API in combination with a new global contenteditable attribute

Drag & drop API in combination with a draggable attribute

API that exposes the history and allows pages to add to it to prevent breaking the back button

Extensions to HTMLDocument

HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways

The interface is now implemented on all objects implementing the Document interface so it

stays meaningful in a compound document context It also has several noteworthy new

The HTMLElement interface has also gained several extensions in HTML5:

getElementsByClassName() which is basically a scoped version of the one found on

HTMLDocument

innerHTML as found in Web browsers today It is also defined to work in XML context (when it is

Trang 15

classList is a convenient accessor for className The object it returns, exposes methods (contains(), add(), remove(), and toggle()) for manipulating the element's classes The a, area and link elements have a similar attribute called relList that provides the same

functionality for the rel attribute

Page 15 HTML5

HTML is a language for describing web pages

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

Start and end tags are also called opening 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 independent

The development process should be visible to the public

Some of the most interesting new features in HTML5:

The canvas element for drawing

The video and audio elements for media playback

Better support for local offline storage

SUMMARY

Trang 16

Chapter 2: HTML5 Structure

In this chapter:

Basic struture

Some elements

The first sample

Add semantic value 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

Chapter 2: HTML5 Structure

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

Start and end tags are also called opening 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 independent

The development process should be visible to the public

Some of the most interesting new features in HTML5:

The canvas element for drawing

The video and audio elements for media playback

Better support for local offline storage

New content specific elements, like article, footer, header, nav, section

New form controls, like calendar, date, time, email, url, search

Trang 17

Figure 2.2: HTML 5 structure

As you can see above the page is very simple yet also very clean, HTML 5 has plenty of new elements which effectively make it easier to structure pages and also helps browsers have more control as to how the web pages are displayed Once all the big named browsers are compatible with HTML 5 you should notice faster loading times, easier navigation and much richer content.Here’s a quick overview of the new structural tags available in HTML 5:

<header>

The header tag is intended as a container for introductory information about a section or an entire webpage The <header> tag can include anything from your typical logo/slogan that sits atop most pages, to a headline that introduces a section If you’ve been using <div

id="header"> in your pages, that would be the tag to replace with <header>

<nav>

The nav element is pretty self-explanatory — your navigation elements go here Of course what constitutes navigation is somewhat debatable — there’s primary site navigation, but in some cases there may also be page navigation elements as well The WHATWG, creators of HTML 5, recently amended the explanation of <nav> to show how it could be used twice on the same page

The short story is that if you’ve been using a <div id="nav"> tag to hold your page navigation, you can replace it with a simple <nav> tag

Trang 18

Section is probably the most nebulous of the new tags According the HTML 5 spec, a section is

a thematic grouping of content, typically preceded by a header tag, and followed by a footer tag But sections can also be nested inside of each other, if needed

In our example above, the div labeled “content” would be a good candidate to become a

section Then within that section, depending on the content, we might have additional sections

<article>

According the WHATWG notes, the article element should wrap “a section of content that forms

an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.”

Keep in mind that you can have more than one article tag on the page; for example a blog homepage might have the last ten articles, each wrapped in an article tag Articles can also be broken into sections using the section tag, though you’ll want to be somewhat careful when planning your structure otherwise you’re liable to end up with some ugly tag soup

<aside>

Another fairly nebulous tag, the aside element is for content that is “tangentially related to the content that forms the main textual flow of a document.” That means a parenthetical remark, inline footnotes, pull quotes, annotations or the more typical sidebar content like you see to the right of this article

<footer>

Footer should also be self-explanatory, except perhaps that you can have more than one In other words, sections can have footers in addition to the main footer generally found at the bottom of most pages

Trang 20

Compatibility with older browsers

But wait, what about IE? None of these styles are working in IE 6 If you still need to support legacy browsers like IE, there is a fix IE 6 parses and displays these tags just fine, but it won’t apply any CSS to them The fix is to use a bit of JavaScript

All we need to do to get IE to style our HTML 5 tags is use the createElement method so IE 6 becomes aware of the new tags Add this bit to the head of your HTML 5 file Or alternatively, you can save it in a separate file and include it that way

Sample 2.3: Javascript using createElement

to group various content heading, for example when you have an Article title and a Subtitle.The JavaScript part of the code will create the tags so that older browsers and IE will accept them This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot

Sample 2.4: Javascript using createElement

Trang 22

Add Semantic Value to Your Pages With HTML 5

In the part above, we looked at some of the language’s new structural markup tags that are designed to reduce the “<div>-soup” of HTML 4 and add semantic meaning to your page’s layout But not every new tag in HTML is strictly structural There are other tags that also add valuable semantic meaning to your pages in non-structural ways In this part, we’ll take a look at how to use them and what they can do for your content

Trang 23

The <time> tag

There have been a couple of cases recently where old news stories or blog posts have been recycled or republished as if they were new, breaking stories Sometimes this happens through human error, or sometimes just through news search crawler error In some cases, the damage was worse than just making the perpetrators look bad — it actually sent a few stocks into a tailspin

While there’s not much HTML5 can do to help human error, the <time> tag could have saved the search engine spiders

Despite the timelessness of the web, most things published online carry some sort of date/time stamp, and that’s exactly the data the <time> tag is intended to convey The most basic usage looks something like this:

Sample 2.6: <time> tag

Published <time>12/20/2009</time>

However, the <time> tag also has an attribute called datetime that makes it even more useful because it allows you to display a nice date format to your human readers inside the tag More importantly, it also provides search engine spiders with something more useful to them Let’s amend the above code slightly:

Sample 2.7: <time> tag

Published <time datetime="2009-12-20T17:22:28-05:00">

Thursday, December 20, 2009 at 10:28PM EST</time>

A couple of things to note According to the HTML 5 spec, if you omit the datetime attribute, then the tag must contain a valid date string The valid part means it must be in the format: year, month, day

Also worth mentioning: when you use the datetime attribute, the tag itself can be empty While both of these variants are OK according to the spec, we suggest you use both a machine

readable datetime for the attribute and human readable format inside the actual tag

The <figure> tag

The figure tag was designed to make image embedding more descriptive and easier to

recognize The figure tag isn’t limited to images though, it can also be used for diagrams, code snippets and other visual elements

Trang 24

But <figure> also isn’t intended for every image The key defining phrase in the spec is any illustrative element “that could, without affecting the flow of the document, be moved away from that primary content, e.g to the side of the page, to dedicated pages, or to an appendix.” The most common use case is an image that you refer to in the body of an article To use

<figure>, you simply wrap your image tag and add a legend like this:

Sample 2.8: <figure> tag

<legend>July 2009 TCP Reports</legend>

</figure>

The <figure> tag can also be used for code snippets For example, to markup the code snippet

in the previous example, you’d have something like this:

Sample 2.9: <figure> tag

in question to illustrate a point or use as an example in your article

The <dialog> tag

The dialog element in HTML 5 is for marking up conversations — a chat transcript, an interview,

a bit dialog from a screenplay, and so on The <dialog> tag works pretty much like a definition list, but specifically denotes dialog

For example, here’s the famous Abbot and Costello “Who’s on First” routine represented in HTML 5:

Trang 25

Sample 2.10: <dialog> tag

Revisiting the <aside> tag

In part one of this walk-through of HTML5, we looked at the <aside> tag as way to mark up a sidebar or other structural content wells But <aside> can also be used in less structural ways For example, it can also be used to highlight a quote within an article

Trang 26

Here’s one of the official examples (also note the use of the <q> tag, a little-used HTML 4 element):

Sample 2.13: <aside> tag

<p>He later joined a large company, continuing on the same work.

<q>I love my job People ask me what I do for fun when I'm not at work But I'm paid to

do my hobby, so I never know what to answer Some people wonder what they would do if they didn't have to work but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p>

<aside>

<q> People ask me what I do for fun when I'm not at work But I'm

paid to do my hobby, so I never know what to answer </q>

</aside>

<p>Of course his work - or should that be hobby? - isn't his

only passion He also enjoys other pleasures.</p>

This is essentially what newspapers and magazines refer to as a “pull-quote,” an excerpt from an article that’s been “pulled out” and typeset separately (usually a larger font) Other examples include the traditional, Hamlet-style aside, but not, according to the spec, parenthetical asides that fit the normal flow of the document

Who knew HTML 5 would require a linguistics degree? Like we said in the first tutorial, the spec isn’t perfect

The <mark> tag

The mark tag is intended to denote text that is particularly relevant It’s a bit like <strong> but instead of denoting the importance of its contents, it denotes relevance

The <mark> tag isn’t one that you’ll probably use very often, but it does have one particularly handy use case: highlighting search terms that brought a visitor to your site You’ve probably seen sites that do this, somewhat like the way Google highlights your search terms when you access a cached page rather than the live site That’s the perfect time to use the <mark> tag

Trang 27

The new structural tags available in HTML 5:

The header tag is intended as a container for introductory information about a

section or an entire webpage

The nav element is pretty self-explanatory — your navigation elements go here

Section is probably the most nebulous of the new tags

the article element should wrap “a section of content that forms an independent

part of a document or site"

the aside element is for content that is “tangentially related to the content that

forms the main textual flow of a document.”

Footer should also be self-explanatory, except perhaps that you can have more

than one

the <time> tag could have saved the search engine spiders

The figure tag was designed to make image embedding more descriptive and

easier to recognize

The dialog element in HTML 5 is for marking up conversations — a chat transcript,

an interview, a bit dialog from a screenplay

SUMMARY

Trang 28

In this chapter:

Audio on the web

Using <audio> tag

Video on the web

Using <video> 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 audio workstations Musicians and recording enthusiasts are

like kids in an ear-candy store, as audio recording gets better, easier and cheaper at an amazing

tempo

Meanwhile, there's another little revolution going on, called the 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 mainly a silent world? The main reason is simply bandwidth

Digital audio files are large CD-standard audio (44.1 kHz, 16-bit stereo) hogs up about 10

megabytes per minute Even with a fast modem, forget it It takes far longer to download an

audio clip than it does to play the darn thing back In the sweet bye-and-bye, when we all have

bandwidth to burn, we'll look back on these days and laugh as we download whole albums and

movies in a femtosecond For now, however, if Web audio is to happen at all, every trick in the

book must be used to slim it down to a manageable size, or otherwise get around the

bandwidth bottleneck

Fortunately, there are all kinds of tricks in the book, and some of them work pretty well The

obvious first step is to reduce the file size Of course, this reduces the sound quality as well, but

the mother of invention tends to leave some eggshells around when she makes an omelet (or

something like that) 22.05 kHz, 8-bit mono is a fairly standard format for lower-fidelity

applications like CD-ROMs, and is usually considered adequate quality for speech, if barely

Chapter 3: Embed audio and video

Trang 29

tolerable for music Files in this format are one-eighth the size of CD-standard audio (44.1 kHz, 16-bit stereo)

By the way, ordinary file-compression schemes like WinZip don't work worth a darn for audio

To compress audio or video files, you need a special type of compression scheme called a

"codec" (so called because it codes and decodes data) There are many codecs out there, but the

only ones that are really popular for audio are the various versions of MPEG, including the current rage, MP3 (more on this below)

For short clips like sound effects, dog barks (http://SassyDog.com) and so forth, the best bet is usually simply to include a wave file in the page (in a low-quality format to minimize download time) As we'll see below, it's very easy to set up a short audio clip to play automatically when a Web page is opened, or to play in response to various kinds of events For music, however, simply embedding a sound file like this will never do A musical piece of any length will take forever to download, and the quality doesn't really make it worth waiting for If you want to add

a "background track" to a Web site, there are two more appropriate ways to do it: the old standby MIDI, or the more cutting-edge streaming audio

Currently, the only way to reliably embed video on a web page so that all users can see it

regardless of browser or operating system, is with Flash This requires the Adobe Flash plugin and a combination of the <object>and <embed> tags

Until now, there has never been a standard for playing audio on a web page Today, most audio are played through a plugin (like flash) However, not all browsers have the same plugins

HTML5 specifies a standard way to include audio, with the audio element The audio element can play sound files, or an audio stream

Audio Formats

Currently, there are 3 supported formats for the audio element:

Format IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Table 3.1: supported formats

Trang 30

Using the <audio> tag

The audio tag is more or less a duplicate of the video tag The same codec limitations apply — Mozilla only supports Ogg Vorbis files, while Safari can handle pretty much anything QuickTime can

To play an audio file in HTML5, this is all you need:

Sample 3.1: <audio> tag

Your browser does not support the audio element.

</audio>

Sample 3.2: output

The control attribute is for adding play, pause, and volume controls

Insert content between the <audio> and </audio> tags for browsers that do not support the audio element The example above uses an Ogg file, and will work in Firefox, Opera and Chrome

To make the audio work in Safari, the audio file must be of type MP3 or Wav

The audio element allows multiple source elements Source elements can link to different audio files The browser will use the first recognized format:

Sample 3.3: <audio> tag

Your browser does not support the audio element.

</audio>

Trang 31

All <audio> Attributes

Autoplay Autoplay Specifies that the audio will start playing as soon as it

is ready

Controls Controls Specifies that controls will be displayed, such as a

play button

Loop Loop Specifies that the audio will start playing again

(looping) when it reaches the end

Preload Preload Specifies that the audio will be loaded at page load,

and ready to run Ignored if autoplay is present

Table 3.1: audio attributes

Cross-Browser Implementation

With growing support for HTML 5 in modern browsers, we were inspired to break our Flash dependency and use native audio when it was supported

The most significant issue is the cross-browser implementation, where lack of a common

supported audio format among browsers causes complications If developers want to take full advantage of all browsers that support HTML 5 audio, they’ll need to create both MP3 and Ogg (and in Opera’s case, WAV) versions of the audio file they want to stream!

Available information:

Firefox 3.5 — quite a detailed document

Safari 4 — technically complete, but lacks explanations and examples

Opera 10 — only a short note

Chrome 3 — a wiki

Since the HTML 5 standard is still a work in progress, several aspects of the <audio> element vary from browser to browser For example, there seems to be no way to determine the load progress of an audio file Although Safari 4 can determine how much of an audio file has

Trang 32

downloaded, Firefox 3.5 does not yet implement the buffered DOM attribute (It is, however, included as part of the Firefox’s documentation, so we presume it will be implemented.)

Firefox 3.5 does appear to enable “seeking” of the file, allowing you to start the download from any point in the media Other browsers, such as Safari 4, grab the file from the beginning and only allow seeking within the part already downloaded (or wait until the particular part being seeked to have been downloaded)

Although these inconsistencies aren’t showstoppers, in order to compete effectively with plugin based solutions, we believe any HTML 5 audio implementation should be consistent across all browsers and match current implementations feature for feature

JavaScript solutions

If we intend to take advantage of each browser’s audio capabilities, we need to create different solutions for different browsers We could use browser sniffing, but considering the rapidly changing landscape, it’s better to check what capabilities a particular browser supports and adapt accordingly

To demonstrate this “feature sniffing”, we’ve created a rough and ready HTML 5 audio checker.Using JavaScript, you can check for audio tag support:

Sample 3.4: check audio support

// returns a boolean

var audioTagSupport = !!(document.createElement('audio').canPlayType);

or check for the Audio() object:

Sample 3.5: check Audio() object

Trang 33

or check file type compatibility:

Sample 3.6: check file type compatibility

// Need to check the canPlayType first or an exception

// will be thrown for those browsers that don't support it

if (myAudio.canPlayType) {

// Currently canPlayType(type) returns: "no", "maybe" or "probably"

canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" !=

So, to create a solution that takes full advantage of HTML 5 audio, you’ll typically need to:

1 check for HTML 5 audio support, and if not present, fall back on Flash,

2 check the level of HTML 5 audio support and adapt your code accordingly for each browser, and

3 check what file types are supported and link to appropriate formats of the files

The Road Ahead

Although HTML 5 audio is a relatively immature part of the standard, if recent trends continue and users upgrade to the latest versions of Safari and Firefox, browser support will likely rise above the 25% mark in the very near future This is a significant chunk of the browser market that will no longer need to rely on Adobe’s Flash, Microsoft’s Silverlight, or any other browser plugin for audio support

And when you consider that mobile and other lower-spec devices — like Apple’s iPod and iPhone (Safari), Nintendo’s Wii (Opera), and Google Android-powered devices (Chrome) — are choosing to support HTML 5 audio rather than Flash, you 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, maybe Flash (YouTube uses Flash.) These plugins

integrate with your browser well enough that you may not even be aware that you’re using them That is, until you try to watch a video on a platform that doesn’t support that plugin

Trang 34

HTML5 defines a standard way to embed video in a web page, using a <video> element

Support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet At least, it doesn’t work everywhere But don’t despair! There are alternatives and fallbacks and options galore

IE9 IE8 IE7 Fx3.5 Fx3.0 Saf4 Saf3 Chrome Opera

Table 3.2: <video> element support

But support for the <video> element itself is really only a small part of the story Before we can talk about HTML5 video, you first need to understand a little about video itself

Video Containers

You may think of video files as “AVI files” or “MP4 files.” In reality, “AVI” and “MP4″ are just container formats Just like a ZIP file can contain any sort of file within it, video container formats

only define how to store things within them, not what kinds of data are stored (It’s a little more

complicated than that, because not all video streams are compatible with all container formats, but never mind that for now.)

A video file usually contains multiple tracks — a video track (without audio), plus one or more

audio tracks (without video) Tracks are usually interrelated An audio track contains markers within it to help synchronize the audio with the video Individual tracks can have metadata, such

as the aspect ratio of a video track, or the language of an audio track Containers can also have metadata, such as the title of the video itself, cover art for the video, episode numbers (for television shows), and so on

There are lots of video container formats Some of the most popular include

• MPEG 4, usually with an mp4 or m4v extension The MPEG 4 container is based on Apple’s older QuickTime container (.mov) Movie trailers on Apple’s website still use the older QuickTime container, but movies that you rent from iTunes are delivered in an MPEG 4 container

• Flash Video, usually with an flv extension Flash Video is, unsurprisingly, used by Adobe Flash Prior to Flash 9.0.60.184 (a.k.a Flash Player 9 Update 3), this was the only container format that Flash supported More recent versions of Flash also support the MPEG 4 container

• Ogg, usually with an ogv extension Ogg is an open standard, open source–friendly, and unencumbered by any known patents Firefox 3.5, Chrome 4, and Opera 10.5 support — natively, without platform-specific plugins — the Ogg container format, Ogg video (called “Theora”), and Ogg audio (called “Vorbis”) On the desktop, Ogg is supported out-of-the-box by all major Linux distributions, and you can use it on Mac and Windows

Trang 35

by installing the QuickTime components or DirectShow filters, respectively It is also playable with the excellent VLC on all platforms.

• WebM is a new container format It is technically similar to another format, called

Matroska WebM was announced at Google I/O 2010 It is designed to be used

exclusively with the VP8 video codec and Vorbis audio codec (More on these in a

minute.) It will be supported natively, without platform-specific plugins, in the next versions of Chromium, Google Chrome, Mozilla Firefox, and Opera Adobe has also announced that the next version of Flash will support WebM video

• Audio Video Interleave, usually with an avi extension The AVI container format was invented by Microsoft in a simpler time, when the fact that computers could play video

at all was considered pretty amazing It does not officially support features of more recent container formats like embedded metadata It does not even officially support most of the modern video and audio codecs in use today Over time, companies have tried to extend it in generally incompatible ways to support this or that, and it is still the default container format for popular encoders such as MEncoder

Video Codecs

When you talk about “watching a video,” you’re probably talking about a combination of one video stream and one audio stream But you don’t have two different files; you just have “the video.” Maybe it’s an AVI file, or an MP4 file These are just container formats, like a ZIP file that contains multiple kinds of files within it The container format defines how to store the video and audio streams in a single file

When you “watch a video,” your video player is doing at least three things at once:

1 Interpreting the container format to find out which video and audio tracks are available, and how they are stored within the file so that it can find the data it needs to decode next

2 Decoding the video stream and displaying a series of images on the screen

3 Decoding the audio stream and sending the sound to your speakers

A video codec is an algorithm by which a video stream is encoded, i.e it specifies how to do above (The word “codec” is a portmanteau, a combination of the words “coder” and “decoder.”) Your video player decodes the video stream according to the video codec, then displays a series

of images, or “frames,” on the screen Most modern video codecs use all sorts of tricks to

minimize the amount of information required to display one frame after the next For example, instead of storing each individual frame (like a screenshot), they will only store the differences between frames Most videos don’t actually change all that much from one frame to the next, so this allows for high compression rates, which results in smaller file sizes

There are lossy and lossless video codecs Lossless video is much too big to be useful on the web, so I’ll concentrate on lossy codecs A lossy video codec means that information is being irretrievably lost during encoding Like copying an audio cassette tape, you’re losing information

Trang 36

about the source video, and degrading the quality, every time you encode Instead of the “hiss”

of an audio cassette, a re-re-re-encoded video may look blocky, especially during scenes with a lot of motion (Actually, this can happen even if you encode straight from the original source, if you choose a poor video codec or pass it the wrong set of parameters.) On the bright side, lossy video codecs can offer amazing compression rates by smoothing over blockiness during

playback, to make the loss less noticeable to the human eye

There are tons of video codecs The three most relevant codecs are H.264, Theora, and VP8

H.264

H.264 is also known as “MPEG-4 part 10,” a.k.a “MPEG-4 AVC,” a.k.a “MPEG-4 Advanced Video Coding.” H.264 was also developed by the MPEG group and standardized in 2003 It aims to provide a single codec for low-bandwidth, low-CPU devices (cell phones); high-bandwidth, high-CPU devices (modern desktop computers); and everything in between To accomplish this, the H.264 standard is split into “profiles,” which each define a set of optional features that trade complexity for file size Higher profiles use more optional features, offer better visual quality at smaller file sizes, take longer to encode, and require more CPU power to decode in real-time

To give you a rough idea of the range of profiles, Apple’s iPhone supports Baseline profile, the AppleTV set-top box supports Baseline and Main profiles, and Adobe Flash on a desktop PC supports Baseline, Main, and High profiles YouTube (owned by Google, my employer) now uses H.264 to encode high-definition videos, playable through Adobe Flash; YouTube also provides H.264-encoded video to mobile devices, including Apple’s iPhone and phones running Google’s Android mobile operating system Also, H.264 is one of the video codecs mandated by the Blu-Ray specification; Blu-Ray discs that use it generally use the High profile

Most non-PC devices that play H.264 video (including iPhones and standalone Blu-Ray players) actually do the decoding on a dedicated chip, since their main CPUs are nowhere near powerful enough to decode the video in real-time These days, even low-end desktop graphics cards support decoding H.264 in hardware There are competing H.264 encoders, including the open source x264 library The H.264 standard is patent-encumbered; licensing is brokered through the MPEG LA group H.264 video can be embedded in most popular container formats, including MP4 (used primarily by Apple’s iTunes Store) and MKV (used primarily by non-commercial video enthusiasts)

Theora

Theora evolved from the VP3 codec and has subsequently been developed by the Xiph.org Foundation Theora is a royalty-free codec and is not encumbered by any known patents other than the original VP3 patents, which have been licensed royalty-free Although the standard has been “frozen” since 2004, the Theora project (which includes an open source reference encoder and decoder) only released version 1.0 in November 2008 and version 1.1 in September 2009.Theora video can be embedded in any container format, although it is most often seen in an

Trang 37

3.5 includes native support for Theora video in an Ogg container And by “native”, I mean

“available on all platforms without platform-specific plugins.” You can also play Theora video on Windows or on Mac OS X after installing Xiph.org’s open source decoder software

VP8

VP8 is another video codec from On2, the same company that originally developed VP3 (later Theora) Technically, it is similar in quality to H.264 Baseline, with lots of potential for future improvements

In 2010, Google acquired On2 and published the video codec specification and a sample

encoder and decoder as open source As part of this, Google also “opened” all the patents that On2 had filed on VP8, by licensing them royalty-free (This is the best you can hope for with patents You can’t actually “release” them or nullify them once they’ve been issued To make them open source–friendly, you license them royalty-free, and then anyone can use the

technologies the patents cover without paying anything or negotiating patent licenses.) As of May 19, 2010, VP8 is a royalty-free, modern codec and is not encumbered by any known

patents, other than the patents that On2 (now Google) has already licensed royalty-free

What works on the Web

If your eyes haven’t glazed over yet, you’re doing better than most As you can tell, video (and audio) is a complicated subject — and this was the abridged version! I’m sure you’re wondering how all of this relates to HTML5 Well, HTML5 includes a <video> element for embedding video into a web page There are no restrictions on the video codec, audio codec, or container format you can use for your video One <video> element can link to multiple video files, and the

browser will choose the first video file it can actually play It is up to you to know which

browsers support which containers and codecs.

As of this writing, this is the landscape of HTML5 video:

• Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg

container

• Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container

• Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg

container It also supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container

• As of this writing (June 9, 2010), the “dev channel” of Google Chrome, nightly builds of Chromium, nightly builds of Mozilla Firefox, and experimental builds of Opera all support VP8 video and Vorbis audio in a WebM container (Visit webmproject.org for more up-to-date information and download links for WebM-compatible browsers.)

• Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports In theory, you could require your users to install third-party QuickTime plugins

In practice, few users are going to do that So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include Theora video, Vorbis

Trang 38

audio, or the Ogg container However, QuickTime does support H.264 video (main

profile) and AAC audio in an MP4 container

• Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container

• Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container

• Internet Explorer 9 will support some as-yet-unspecified profiles of H.264 video and AAC audio in an MP4 container

• Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash

That might be easier to digest in table form

Codecs/container IE Firefox Safari Chrome Opera iPhone Android Theora+Vorbis+Ogg · 3.5+ · 5.0+ 10.5+ · ·

H.264+AAC+MP4 · · 3.0+ 5.0+ · 3.0+ 2.0+

Table 3.3: Video codec support in shipping browsers

A year from now, the landscape will look significantly different as WebM is implemented in multiple browsers, those browsers ship non-experimental WebM-enabled versions, and users upgrade to those new versions

Codecs/container IE Firefox Safari Chrome Opera iPhone Android

Theora+Vorbis+Ogg · 3.5+ · 5.0+ 10.5+ · ·

H.264+AAC+MP4 · · 3.0+ 5.0+ · 3.0+ 2.0+

Table 3.4: Video codec support in upcoming browsers

* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves

† Google has committed to supporting WebM “in a future release” of Android, but there’s no firm timeline yet

Trang 39

Using <video> tag

Many modern websites shows videos HTML5 provides a standard for showing them

Sample 3.7: check for browser support video tag

Trang 40

To show a video in HTML5, this is all you need:

Sample 3.9: Using <video> tag

</video>

The control attribute is for adding play, pause, and volume controls

It is also always a good idea to include the width and height attributes

Định dạng
Số trang	116
Dung lượng	1,44 MB