Slide1 - Co ban HTML5

BÀI 1
NHỮNG KHÁI NIỆM ĐẦU TIÊN VỀ HTML5

MỤC TIÊU BÀI HỌC
 Định nghĩa về HTML5
 Tổng quát về cú pháp của HTML5
 Một số thành phần mới của HTML5
 Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
 Giới thiệu CSS3
Slide 1 - Những khái niệm đầu tiên về HTML5 2

ĐỊNH NGHĨA HTML5
  Thành phần của HTML5:
Thẻ
HTML
mới

Thuộc
.nh
CSS3

Javascript

Công
nghệ
hỗ
trợ
tách
biệt

HTML5

  HTML5 và họ HTML5:
 HTML5:
•  Là những thành phần đánh dấu/ cú pháp mới
•  Các thẻ (tag)
•  Ví dụ: <ul>, <li>, <div>, …
 Họ HTML5:
•  Bao gồm các thẻ mới
•  Công nghệ mới: CSS3, Geolocation, Web storage, web
workers, web socket
•  Tác dụng của công nghệ mới:
–  Cung cấp tính năng mạnh mẽ cho bộ công cụ
–  Tạo ra website hữu dụng & tinh xảo

  Phạm vi sử dụng HTML5:
 PC
 Thiết bị di động & smartphone
 .......

TỔNG QUAN VỀ CÚ PHÁP HTML5

  Ngôn ngữ HTML5 giới thiệu một số thẻ/ thành phần
mới giúp cấu trúc trang web được logic thiết thực
hơn
Phiên
bản
trước
HTML5

<div
id="header"
>
This
is
my
header

</div>

#header
{
width:960px;
height:100px;

background-‐color:gray;

}

<header>
This
is
my
header
</
header>

header
{
width:960px;
height:100px;

background-‐color:gray;

}

  Thành phần mới trong HTML5:
 A: <header>
 B: <nav>
 C: <section>
 D:<article>
 E: <aside>
 F: <footer>

  Tên của thành phần mới dựa theo tên các thành
phần thông dụng được sử dụng trong phần bố cục
trang web hiện nay (div id="footer",div
id="nav",...).
  Tác dụng của các thành phần mới trong HTML5:
 Giảm bớt sự phụ thuộc vào thẻ <div>
 Thay thế bởi một cấu trúc trang web thống nhất, dễ
đọc hơn
  HTML5 không thay thế bất kỳ cú pháp HTML nào;
mà chỉ bổ sung thêm các thành phần (thẻ) mới
vào danh sách hiện có

MỘT SỐ THÀNH PHẦN MỚI CỦA
HTML5

THÀNH PHẦN MỚI CỦA HTML5
  Một số thành phần mới:
Thành
phần

<video>

<audio>

<canvas>

Web
form

….

  <video> và <audio>:
 Cho phép nhúng video và file âm thanh vào trang web
 Không cần sử dụng tới plug-in của trình duyệt
Video
Âm
thanh

<video
src="catz.mp4"
width="400"

height="300"></video>

<audio
src="high_seas_rip.mp3"

controls
preload="auto"
autobuﬀer>

</audio>

  <canvas>:
 Cung cấp các tính năng vẽ và hoạt hình
 Làm việc giống như một bảng vẽ trên trang web
 Có thể thêm các mã JavaScript hoặc các tính năng
hoạt hình mới của CSS3 để làm cho đối tượng được
tạo ra trên bảng vẽ di chuyển, biến mất, thay đổi tỷ
lệ, ...
 Lưu hình ảnh vừa vẽ dưới dạng .png

  Khai báo <canvas>:
  Sử dụng javascript:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById ("myCanvas"), context
= canvas.getContext("2d");
// x = 10, y = 20, width = 200, height = 100 context.fillRect(10,
20, 200, 100);
</script>

  Web form:
 Thành phần form mới trong HTML khi được thực thi
sẽ giúp quá trình làm việc với các form trở nên dễ
dàng hơn so với hiện tại
<input type="email" required>

  Một số thành phần mới khác:
 <figure>, <figurecaption>: gán nhãn (hoặc chú thích
ảnh) cho các hình ảnh trên trang web
 <hgroup>: nhóm một tập các thành phần vào một
thành phần hợp lý
 ….

TỔNG QUAN VỀ HTML5 API
  API (Application Programming Interfaces – giao diện
lập trình ứng dụng):
 Là cách tạo ra các ứng dụng sử dụng các thành phần
được dựng sẵn
 Không chỉ được áp dụng trong phát triển web mà
còn cả với các ngôn ngữ kịch bản
 Mục đích chính của API là để chuẩn hóa cơ chế làm
việc và đơn giản hóa các nhiệm vụ lập trình phức tạp
 Một số HTML5 API: Drag and Drop, Web storage,
Microdata,và Geolocation

  API Geolocation:
 Giúp xác định vị trí địa lý của trình duyệt web.
 Thông tin này được sử dụng để gửi dưới dạng dữ
liệu liên quan dựa trên vị trí
 Geolocation hiện tại đang được kích hoạt trong một
số trình duyệt hiện đại

  Ví dụ :flickr.com/map

  Web workers:
 WebWorkers là một framework (nền tảng) giải quyết
vấn đề hiệu suất của trình duyệt
 Là mã kịch bản chạy trên một luồng riêng biệt
  Web storage:
 Cải tiến cookie của trình duyệt
 Cookie là một công nghệ bị giới hạn và khó khăn cho
các nhà thiết kế để có thể sử dụng.
 Web storage nâng cấp mô hình này để cung cấp
không gian lưu trữ lớn hơn cho các ứng dụng web
hiện đại

Web
storage

localStorage:

Dữ
liệu
có
thể
truy
cập
tại
bất

kỳ
thời
điểm
nào,
ngay
cả
khi

đóng
trình
duyệt
hoặc
khi
hệ

thống
khởi
động
lại

sessionStorage:

Dữ
liệu
bị
mất
đi
khi
đóng

trình
duyệt


CSS3
  CSS3 không phải là một thành phần của HTML5,
nhưng lại có mối liên quan mật thiết với HTML5
  CSS3 được phát triển song song với HTML5

CSS3
  Một số thành phần CSS3 mới:
 CSS animation (CSS hoạt hình)
 CSS transition (CSS chuyển đổi)
 CSS 2D/ 3D transformation: transform
 CSS3 background, border, RGAa color, gradient, drop
shadows, góc bo tròn, ….: border-radius, background-
image, border-image
 Web font: @font-face

TỔNG KẾT
  HTML5 cung cấp các thành phần mới, dựa theo tên
các thành phần thông dụng được sử dụng trong
phần bố cục trang web: footer, nav, section, article,
aside, footer
  Một số thành phần mới của HTML5: <video>,
<audio>, <canvas>, …
  API: Là cách tạo ra các ứng dụng sử dụng các thành
phần được dựng sẵn
  Một số HTML5 API: Drag and Drop, Web storage,
Microdata,và Geolocation
  CSS3 không phải là một thành phần của HTML5,
nhưng lại có mối liên quan mật thiết với HTML5

Slide1 - Co ban HTML5

More Related Content

What's hot

Similar to Slide1 - Co ban HTML5

Slide1 - Co ban HTML5