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ụ: <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
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	
  
<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;	
  
}	
  
	
  
TỔNG QUAN VỀ CÚ PHÁP HTML5
  Thành phần mới trong HTML5:
 A: <header>
 B: <nav>
 C: <section>
 D:<article>
 E: <aside>
 F: <footer>
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ẻ <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ó
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	
  
<video>	
  
<audio>	
  
<canvas>	
  
Web	
  form	
  
….	
  
THÀNH PHẦN MỚI CỦA HTML5
  <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
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"></video>	
  
	
  
<audio	
  src="high_seas_rip.mp3"	
  
controls	
  preload="auto"	
  autobuffer>	
  
</audio>	
  
	
  
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
  <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
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 <canvas>:
  Sử dụng javascript:
Slide 1 - Những khái niệm đầu tiên về HTML5 16
<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>
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
<input type="email" required>
THÀNH PHẦN MỚI CỦA HTML5
  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ý
 ….
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: <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
Slide 1 - Những khái niệm đầu tiên về HTML5 28

Slide1 - Co ban HTML5

  • 1.
    BÀI 1 NHỮNG KHÁINIỆM ĐẦU TIÊN VỀ HTML5
  • 2.
    MỤC TIÊU BÀIHỌ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
  • 3.
  • 4.
    ĐỊNH NGHĨA HTML5 Slide1 - 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
  • 5.
    ĐỊ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ụ: <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 Slide 1 - Những khái niệm đầu tiên về HTML5 5
  • 6.
    ĐỊ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
  • 7.
    TỔNG QUAN VỀCÚ PHÁP HTML5
  • 8.
    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   <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;   }    
  • 9.
    TỔNG QUAN VỀCÚ PHÁP HTML5   Thành phần mới trong HTML5:  A: <header>  B: <nav>  C: <section>  D:<article>  E: <aside>  F: <footer> Slide 1 - Những khái niệm đầu tiên về HTML5 9
  • 10.
    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ẻ <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ó Slide 1 - Những khái niệm đầu tiên về HTML5 10
  • 11.
    MỘT SỐ THÀNHPHẦN MỚI CỦA HTML5
  • 12.
    THÀNH PHẦN MỚICỦ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   <video>   <audio>   <canvas>   Web  form   ….  
  • 13.
    THÀNH PHẦN MỚICỦA HTML5   <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 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"></video>     <audio  src="high_seas_rip.mp3"   controls  preload="auto"  autobuffer>   </audio>    
  • 14.
    THÀNH PHẦN MỚICỦA HTML5 Slide 1 - Những khái niệm đầu tiên về HTML5 14
  • 15.
    THÀNH PHẦN MỚICỦA HTML5   <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 Slide 1 - Những khái niệm đầu tiên về HTML5 15
  • 16.
    THÀNH PHẦN MỚICỦA HTML5   Khai báo <canvas>:   Sử dụng javascript: Slide 1 - Những khái niệm đầu tiên về HTML5 16 <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>
  • 17.
    THÀNH PHẦN MỚICỦ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 <input type="email" required>
  • 18.
    THÀNH PHẦN MỚICỦA HTML5   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ý  …. Slide 1 - Những khái niệm đầu tiên về HTML5 18
  • 19.
  • 20.
    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
  • 21.
    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
  • 22.
    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
  • 23.
    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
  • 24.
    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
  • 25.
  • 26.
    CSS3   CSS3 khôngphả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
  • 27.
    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
  • 28.
    TỔNG KẾT   HTML5cung 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 Slide 1 - Những khái niệm đầu tiên về HTML5 28