html5/css3 course introduction to html5 · html5/css3 course introduction to html5 presenter: msc....
Post on 15-Mar-2020
122 Views
Preview:
TRANSCRIPT
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, <audio> 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, <video> 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
• 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
<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
top related