Tài liệu HTML5 doc

Thuyết trình HTML5

Nhóm : 11

GVHD: Phạm Đình Sắc

SVTH : Phạm Văn Ngọc – Trần Thế Quỳnh

Phân công :

Phạm Văn Ngọc – Trần Thế Quỳnh


Lịch sử phát triển công nghệ web

Những ưu điểm của HTML5
 Giảm bớt sự phụ thuộc những công nghệ ứng dụng độc quyền.
 Tốc độ truy cập web nhanh hơn
 Tài nguyên phong phú hơn
 Các ứng dụng web và các trang web hấp dẫn hơn.

Những hạn chế của HTML5
 Quá ít trình duyệt hỗ trợ
 Ngôn ngữ lập trình mới
 Tốn chi phí nâng cấp từ HTML lên HTML5

Các Thành Phần Mới Của HTML5

Những Điểm Nổi Bật Của HTML5

HTML5 phát triển các phần tử ngữ nghĩa mới. Cải tiến biểu mẫu Web. một số trong đó được triển khai thực hiện

bằng cách sử dụng phần tử <input>

HTML5 cung cấp phần tử <canvas> và các JavaScript API vẽ 2D mới quan trọng mà bạn có thể sử dụng để tạo hình
dạng, văn bản, các hình ảnh động, các chuyển cảnh, và nhiều hơn nữa.

Ngoài ra còn có các phần tử <audio> và <video> mới dự kiến thay thế sự phụ thuộc hiện tại của trang Web vào
Flash như một nền tảng phân phối đa phương tiện.

 !"
#$%&
'()
HTML5 Xu Hướng Thiết Kế Mới
*
HTML5 Xu Hướng Thiết Kế Mới

<header> Định nghĩa khu vực đầu trang web.

<footer> Định nghĩa khu vực cuối trang web.

<nav> Định nghĩa khu vực link danh mục.

<aside> Định nghĩa khu vực bên ngoài nội
dung chính (thường là sidebar).

<section> Định nghĩa một khu vực (vùng bao).
Tương tự thẻ <div>.

<article> Định nghĩa một bài viết

HTML5

Xu
Hướng
Thiết Kế Mới
Một số thẻ mới
của HTML5

HTML5
Xu
Hướng
Thiết Kế Mới

Các Cải Tiến Về Biểu Mẫu Web

HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web
Nếu bạn đã tạo các ứng dụng Web từ trước, bạn có khả năng quen hơn với tập các nút điều khiển biểu mẫu của HTML, một số trong
đó được triển khai thực hiện bằng cách sử dụng các phần tử của thẻ <input>.

+,-

.+/,01.&2$-

 &+,3-

45,61-

&$,78-

HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

199+ ,$:.;-


9,&5:15<&-

9$&,75=-

/,>?8-

HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

@+A&BC$09D"1E$%&FGH'()IHB9E Jtrong các biểu mẫu web giúp tạo ra được tính thẩm mỹ và tiện lợiK"
F&L.&2&2$MAN1&LO?+"GP&2$MQ8G=B9DF&6+<&B>AFRS
T&DG<C2N=$0&2$M5&=6K

U21".&2F&L.&2ANB"A1"&29E J$0G>&6V>W&1=+A&F21"
A1&+ &6GP& !,XY-B+Z9E J$0.["1"&2N."G\ +]5/B(&+9+^
W&5>5&BV>]_K'()`$$JFa51FN$09D".+8D +1&=8G%CF25<&+5b>cAN
`"1+A0".&2F>A+."&2$M$%&d

HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

&$,AN&P-

&$e5+5,AN&PFR1GQ-

$+,"-

&$,P&&-

.,-


HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

+5+,$A-

$&5,GF&6E-

$,9D-

,1<$>&-

9,7$.&$-

5,F&6+<&-

Demo Một Số Kiểu Type Mới Của <Input>

Kiểu datetime-local ,AN&PFR1GQ-
*
Demo Một Số Kiểu Type Mới Của <Input>

Kiểu color

Demo Một Số Kiểu Type Mới Của <Input>

Biểu mẫu Web đơn giản

Demo Một Số Kiểu Type Mới Của <Input>

Biểu mẫu Web đơn giản


Ứng Dụng Media

Ứng Dụng Media Trên HTML5

+f?$FgNBa1h&"i&9#>& +Gj+>A"L81g
1D&0& G'5FkO.&$09c!h+5%+>&69E JiF2<+5lF1GQ
&6K:.[$NBGP&.[2/gN cFGHi>%&0& +mFlANB>A.n85ABFR
<61]59o& +,Kp>->A"L8\ +]597Fk5A$FQ&8C>&61"
>& +>Ag$K

Ứng Dụng Media Trên HTML5

N&=B'()+l$89cIH+&1E$%&Bq &+r>Aq>& +rB+1s1"A1"
&2i+l$"0& F1GQ&6$A.[GP& !A&FZ"7t$=$
7 N6K

Ứng Dụng Media Trên HTML5

N &=B $0 > FL n u >%& " 1 E F 1GQ &6 $%& AN 5A " FR < 61 FGH $k Cv&8& $k
,+ -."trên từng trình duyệt.

oFL.[S>%&>& +B +C">FLGQc>%&"+ g$K"FR <(w>A\\R<x&
"`9"B+.&FR <o+&97.[KoFL>%&g$o+&95AC.[FGH9E J0k&B +
"$"N1GQ&6 &F0>A&LO J1$L$1GQ&6.[IHCK
