Bài giảng HTML5 - Bài 1: Những khái niệm đầu tiên về HTML5 (Mới)

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 
ĐỊNH NGHĨA HTML5 
Slide 1 - Những khái niệm đầu tiên về HTML5 4 
   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 
ĐỊNH NGHĨA 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ụ: , , ,  
  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 
Slide 1 - Những khái niệm đầu tiên về HTML5 5 
ĐỊNH NGHĨA HTML5 
   Phạm vi sử dụng HTML5: 
  PC 
  Thiết bị di động & smartphone 
   ....... 
Slide 1 - Những khái niệm đầu tiên về HTML5 6 
TỔNG QUAN VỀ CÚ PHÁP HTML5 
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 
Slide 1 - Những khái niệm đầu tiên về HTML5 8 
Phiên	
  bản	
  trước	
   HTML5	
  
	
  This	
  is	
  my	
  header	
  
#header	
  {	
  width:960px;	
  height:100px;	
  
background-­‐color:gray;	
  
}	
  
	
  This	
  is	
  my	
  header	
  </
header>	
  
header	
  {	
  width:960px;	
  height:100px;	
  
background-­‐color:gray;	
  
}	
  
TỔNG QUAN VỀ CÚ PHÁP HTML5 
   Thành phần mới trong HTML5: 
  A: 
  B: 
  C: 
  D: 
  E: 
  F: 
Slide 1 - Những khái niệm đầu tiên về HTML5 9 
TỔNG QUAN VỀ CÚ PHÁP HTML5 
   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ẻ 
  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ó 
Slide 1 - Những khái niệm đầu tiên về HTML5 10 
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: 
Slide 1 - Những khái niệm đầu tiên về HTML5 12 
Thành	
  phần	
  
Web	
  form	
  
.	
  
THÀNH PHẦN MỚI CỦA HTML5 
   và : 
  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 
Slide 1 - Những khái niệm đầu tiên về HTML5 13 
Video	
   Âm	
  thanh	
  
<video	
  src="catz.mp4"	
  width="400"	
  
height="300">	
  
<audio	
  src="high_seas_rip.mp3"	
  
controls	
  preload="auto"	
  autobuffer>	
  
THÀNH PHẦN MỚI CỦA HTML5 
Slide 1 - Những khái niệm đầu tiên về HTML5 14 
THÀNH PHẦN MỚI CỦA HTML5 
  : 
  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 
Slide 1 - Những khái niệm đầu tiên về HTML5 15 
THÀNH PHẦN MỚI CỦA HTML5 
   Khai báo : 
   Sử dụng javascript: 
Slide 1 - Những khái niệm đầu tiên về HTML5 16 
 var canvas = document.getElementById ("myCanvas"), context 
= canvas.getContext("2d"); 
 // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 
20, 200, 100); 
THÀNH PHẦN MỚI CỦA HTML5 
  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 
Slide 1 - Những khái niệm đầu tiên về HTML5 17 
THÀNH PHẦN MỚI CỦA HTML5 
  Một số thành phần mới khác: 
  , : gán nhãn (hoặc chú thích 
ảnh) cho các hình ảnh trên trang web 
  : nhóm một tập các thành phần vào một 
thành phần hợp lý 
  . 
Slide 1 - Những khái niệm đầu tiên về HTML5 18 
TỔNG QUAN VỀ HTML5 API 
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 
Slide 1 - Những khái niệm đầu tiên về HTML5 20 
TỔNG QUAN VỀ HTML5 API 
   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 
Slide 1 - Những khái niệm đầu tiên về HTML5 21 
TỔNG QUAN VỀ HTML5 API 
   Ví dụ :flickr.com/map 
Slide 1 - Những khái niệm đầu tiên về HTML5 22 
TỔNG QUAN VỀ HTML5 API 
  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 
Slide 1 - Những khái niệm đầu tiên về HTML5 23 
TỔNG QUAN VỀ HTML5 API 
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	
  
Slide 1 - Những khái niệm đầu tiên về HTML5 24 
CSS3 
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 
Slide 1 - Những khái niệm đầu tiên về HTML5 26 
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 
Slide 1 - Những khái niệm đầu tiên về HTML5 27 
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: , 
, ,  
   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 
Slide 1 - Những khái niệm đầu tiên về HTML5 28