1

HTML5/CSS3 Course

Introduction to HTML5

Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP.

2

HTML5 = HTML + CSS + JS API

Contents

• HTML5 Structure

• HTML5 Audio/Video

• HTML5 Form

• HTML5 Canvas

3

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

6

Structure

7

Lets put altogether

8

Structure

<section>

<header >

<hgroup>

<footer>

<article>

<nav>

9

<section>

• 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

10

<header>

• 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

11

<hgroup>

• The hgroup element represents the heading of a

section. The element is used to group a set of

h1–h6 elements when the heading has multiple

levels, such as subheadings, alternative titles, or

taglines

12

<footer>

• 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

13

<article>

• 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 user-

submitted comment, an interactive widget or gadget, or

any other independent item of content..

14

<nav>

• 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

15

Block semantic element

• <aside>

• <figure>

16

<aside>

• The aside element represents a section of a page

that consists of content that is tangentially

related to the content around the aside element,

and which could be considered separate from

that content. Such sections are often

represented as sidebars in printed typography.

17

<figure>

• Specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc

18

Inline semantic element

• <mark>

• <time>

• <meter>

• <progress>

19

<mark>

• Defines marked/highlighted text

20

<time>

• Defines a date/time

21

<meter>

• Defines a scalar measurement within a known

range (a gauge)

22

<progress>

• The progress element provides a simple and

effective way for a web designer to notify a user

of their progress regarding a specified task

23

HTML Audio/Video

24

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>

25

HTML5 Video

• Example:<video src="foo.mp4" width="300" height="200" controls> Your browser does not support the <video> element. </video>

• Property:

– src, autoplay, controls, height, width,

– loop, autobuffer, preload, poster

26

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

27

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.

28

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.

29

Handling Media Events

Event Description

seeking This event is generated when a seek operation begins.

suspend This event is generated when loading of the media is suspended.

volumechange This event is generated when the audio volume changes.

waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

30

Example

<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

31

32

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

33

Một số thẻ trong Form

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

• <input type = “radio” … />

• <input type = “checkbox” … />

• <input type = “file” … />

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

• <textarea> …. </textarea>

• <select>

<option> …. <option>

</select>

• <fieldset>, <legend>

■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text

34

13 New Input Types

35

Một số thuộc tính mới

• Của thẻ <form>: autocomplete, novalidate

• Của thẻ <input>:

– autocomplete

– autofocus

– form

– formaction

– formenctype

– formmethod

– formnovalidate

– formtarget36

– height and width

– list

– min and max

– multiple

– pattern (regexp)

– placeholder

– required

– step

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

• email

• url

• tel

• datetime

• date

• month

• week

• time

• datetime-local

• number

• range

• color

37

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

38

Search

<input type> search

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

Search Google:

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

39

Email

<input type> email

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

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

40

URL

<input type> url

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

Field sẽ được tự động validate khi form

submit.

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

Add your homepage:

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

41

Range

<input type> range

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

Dùng hỗ trợ validate nhập liệu số

<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>

<input type="range" min="1" max="10" name="rating“>

42

Sliders

<form>

<input type="range" min="0" max="20" step="2"

value="2">

<input type=“submit” value=“Go”>

</form>

43

color

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

44

Spin Boxes

<form>

<input type="number" min="0" max="20" step="2"

value="2">

</form>

45

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>

46

Color Pickers<form>

<input type="color">

</form>

47

keygen

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

48

output

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

49

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>

50

list

51

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

placeholder, maxlength, và pattern. Trong

đó required và placeholder sử dụng cho

textbox.

HTML5 Form Attribute Enhancements

52

Placeholder Text

<form>

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

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

</form>

53

Autofocus Fields

<form>

<input name="q" autofocus>

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

</form>

54

Validation

<form>

<input type="text" required>

<input type="hidden" required>

<input type="image" required>

</form>

<form novalidate>

<input type="text">

<input type=“submit” value=“Submit”>

</form>

55

Validation Example

56

References

• “Web Forms – Dive into HTML 5”

http://diveintohtml5.org/forms.html

• “Dectecting HTML5 Features”

http://diveintohtml5.org/detect.html

• http://www.w3schools.com/html/html5_intro.asp

57

Q & A

58

THE END

59