Tổng quan lập trình HTML 5

The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos... HTML5 Audio• Example: Your browser does not support the element...

HTML5 = HTML + CSS + JS API

New and Updated HTML5 Elements

HTML5 introduces 28 new elements:

<section>, <article>, <aside>, <hgroup>,

<header>,<footer>, <nav>,

<figure>, <figcaption>, <video>, <audio>,

<source>, <embed>, <mark>,<progress>,

<meter>, <time>, <ruby>, <rt>, <rp>,<wbr>,

<canvas>, <command>, <details>,<summary>,

<datalist>, <keygen> and <output>

4

HTML5 Structure

5

Structure

Lets put altogether

8

• The section element represents a generic section

of a document or application A section, in this context, is a thematic grouping of content,

typically with a heading

• A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required The

header element can also be used to wrap a

section's table of contents, a search form, or any relevant logos

• The footer element represents a footer for its nearest ancestor sectioning content or

sectioning root element A footer typically

contains information about its section such as who wrote it, links to related documents,

copyright data, and the like

• The article element represents a self-contained

composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g in syndication This could be a forum post,

a magazine or newspaper article, a blog entry, a submitted comment, an interactive widget or gadget, or any other independent item of content

• The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links

Block semantic element

• <aside>

• <figure>

that content Such sections are often

represented as sidebars in printed typography.

• Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc

Inline semantic element

• <mark>

• <time>

• <meter>

• <progress>

• Defines marked/highlighted text

• Defines a date/time

• Defines a scalar measurement within a known range (a gauge)

• The progress element provides a simple and

effective way for a web designer to notify a user

of their progress regarding a specified task

HTML Audio/Video

24

Ebook for HTML5 Media

Audio/Video

HTML5 in Action on the Web

<param name="movie" value="movie.swf">

<param name="quality" value="high">

<param name="menu" value="true">

<param name="LOOP" value="false">

</object>

CODEC == COmpressor/DECompressor

Support for (and demo of) HTML5 Audio

• http://caniuse.com/audio

• http://beta.theexpressiveweb.com/#!/html5-audio

Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Support for (and demo of) HTML5 Video

• HTML5 Video

– http://caniuse.com/video

– http://beta.theexpressiveweb.com/#!/html5-video

Format IE Firefox Opera Chrome Safari

MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No

Audio/Video for Publishers

HTML5 lets you embed audio/video directly in your content without any plugins needed:

<audio id="new_slang">

<source src="new_slang.wav" type="audio/wav"/>

<source src="new_slang.mp3" type="audio/mp3"/>

<source src="new_slang.ogg" type="audio/ogg"/>

<em>(Sorry, &lt;audio&gt; element not supported in your

browser/ereader, so you will not be able to listen to this song.)</em>

</audio>

<video id="dancing_pony" width="300" height="300">

<source src="dancing_pony.mp4" type="video/mp4"/>

<source src="dancing_pony.ogg" type="video/ogg"/>

<em>(Sorry, &lt;video&gt; element not supported in your

browser/ereader, so you will not be able to watch this video.)</em>

</video>

HTML5 Audio

• Example:

<audio src=" foo.wav " controls autoplay>

Your browser does not support the <audio> element.

</audio>

• Property:

– src, autoplay, controls – loop, autobuffer, preload

Handling Media Events

Event Description

abort This event is generated when playback is aborted canplay This event is generated when enough data is

available that the media can be played.

ended This event is generated when playback completes error This event is generated when an error occurs.

loadeddataThis event is generated when the first frame of

the media has finished loading.

loadstart This event is generated when loading of the media

begins.

Handling Media Events

Event Description

pause This event is generated when playback is paused.

play This event is generated when playback starts or

resumes.

progress This event is generated periodically to inform the

progress of the downloading the media.

ratechange This event is generated when the playback speed

changes.

seeked This event is generated when a seek operation

completes.

Handling Media Events

waiting This event is generated when the requested

operation (such as playback) is delayed pending the completion of another operation (such as a seek).

<audio id="audio" controls>

<source src="orion.ogg" type="audio/ogg" />

</audio>

var clip = document.getElementById('audio');

clip.muted = false; //câm

clip.play(); //phát

clip.pause(); //tạm dừng

39

Learning by example

• Prepare video and audio file

• http://html5media.info/

HTML5/CSS3

HTML5 Forms

Giới thiệu

• Các thành phần mới trong HTML5 bổ sung thêm chức năng mà các nhà thiết kế/phát triển web thường kết hợp quan các

phương tiện khác như javascript và Flash.

• HTML5 = HTML4 + một số thẻ thêm +

validation

42

Một số thẻ trong Form

• <input type = “text” … /> (password)

• <input type = “radio” … />

• <input type = “checkbox” … />

• <input type = “file” … />

• <input type = “submit” … /> (reset, button)

13 New Input Types

– required– step

Thẻ input có thuộc tính type mới

Thành phần label

• Thành phần không bắt buộc, tăng khả

năng truy cập cho form.

• <label for="txtPhone">Phone</label>

• <input type="text" name="txtPhone"

id="txtPhone">

47

<input type> search

Dùng để search hỗ trợ bởi Chrome, Opera, và Safari.

Search Google:

<input type="search" name="googlesearch" />`

<input type> email

Hỗ trợ bởi Chrome, Opera, firefox và safari.

E-mail: <input type="email" name="usermail" />

<input type> url

Dùng để nhập liệu địa chỉ web(URL address).

submit.

Hỗ trợ bởi Chrome, Opera, firefox.

Add your homepage:

<input type="url" name="homepage" />

<input type> range

Hỗ trợ Opera và WebKit (Chrome) Gồm có các thuộc tính min, max, và step

<input type> color

The color input type (type="color") provides the

user with a color picker Supported only in Opera,

Chrome

Select your favorite color:

<input type="color" name="favcolor" />

Date Pickers

<form>

<input type="date">

<input type="datetime">

<input type="datetime-local">

<input type=“time">

<input type="week">

<input type="month">

<input type="submit">

</form>

JavaScript Date Picker

function show_calendar(str_target, str_datetime) {

var arr_months = ["January", "February", "March", "April", "May", "June",

"July", "August", "September", "October", "November", "December"];

var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

var n_weekstart = 1; // day week starts from (normally 0 or 1)

var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); var dt_prev_month = new Date(dt_datetime);

Color Pickers

<form>

<input type="color">

</form>

<input type> keygen

The purpose of the <keygen> element is to provide a secure way to authenticate users

The <keygen> tag specifies a key-pair generator field in a form When the form is submitted, two keys are generated,

one private and one public.

The private key is stored locally, and the public key is sent

to the server The public key could be used to generate a

client certificate to authenticate the user in the future

<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

<input type> output

The <output> element represents the result of a calculation (like one performed by a script)

<form

oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50" />100

+<input type="number" name="b" value="50" />

=<output name="x" for="a b"></output>

</form>

Data Lists

<form>

<input type=“text” list=“states”>

<datalist id=“states” >

<option value=“AK” label=“Alaska”>

<option value=“AL” label=“Alabama”>

<option value=“AR” label=“Arkansas”>

</datalist>

</form>

61

<datalist id="frameworks">

<option value="MooTools">

<option value="Moobile">

<option value="Dojo Toolkit">

<option value="jQuery">

<option value="YUI">

</datalist>

<input name="frameworks" list="frameworks" />

• Các thuộc tính mới autofocus , required ,

textbox.

HTML5 Form Attribute Enhancements

Placeholder Text

<form>

<input name="q" placeholder=“Search Text">

<input type="submit" value="Search">

</form>

Autofocus Fields

<form>

<input name="q" autofocus>

<input type="submit" value="Search">

</form>

<form>

<input type="text" required>

<input type="hidden" required>

<input type="image" required>

Validation Example

Q & A

THE END