BÀI NHỮNG KHÁI NIỆM ĐẦU TIÊN VỀ HTML5 MỤC TIÊU BÀI HỌC  Định ngh a HTML5  Tổng quát cú pháp HTML5  Một số thành phần HTML5  Tổng quan HTML5 API (giao diện lập trình ứng dụng) cơng nghệ hỗ trợ  Giới thiệu CSS3 Slide - Những khái niệm HTML5 ĐỊNH NGH A HTML5 ĐỊNH NGH A HTML5   Thành phần HTML5: Thẻ HTML mới  Thuộc .nh CSS3  HTML5 Javascript   Công nghệ hỗ trợ tách biệt  Slide - Những khái niệm HTML5 ĐỊNH NGH A HTML5   HTML5 họ HTML5:   HTML5: •  Là thành phần đánh dấu/ cú pháp •  Các thẻ (tag) •  Ví dụ:

,
• , , …   Họ HTML5: •  Bao gồm thẻ •  Cơng nghệ mới: CSS3, Geolocation, Web storage, web workers, web socket •  Tác dụng cơng nghệ mới: –  Cung cấp tính mạnh mẽ cho công cụ –  Tạo website hữu dụng & tinh xảo Slide - Những khái niệm HTML5 ĐỊNH NGH A HTML5   Phạm vi sử dụng HTML5:   PC   Thiết bị di động & smartphone   Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5   Ngôn ngữ HTML5 giới thiệu số thẻ/ thành phần giúp cấu trúc trang web logic thiết thực Phiên bản trước  HTML5   This is my header        #header { width:960px; height:100px;  background‐color:gray;  }           This is my header       header { width:960px; height:100px;  background‐color:gray;  }    Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5   Thành phần HTML5:   A:   B:   C:   D:   E:   F: Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5   Tên thành phần dựa theo tên thành phần thông dụng sử dụng phần bố cục trang web (div id="footer",div id="nav", )   Tác dụng thành phần HTML5:   Giảm bớt phụ thuộc vào thẻ   Thay cấu trúc trang web thống nhất, dễ đọc   HTML5 không thay cú pháp HTML nào; mà bổ sung thêm thành phần (thẻ) vào danh sách có Slide - Những khái niệm HTML5 10 THÀNH PHẦN MỚI CỦA HTML5 Slide - Những khái niệm HTML5 14 THÀNH PHẦN MỚI CỦA HTML5   :   Cung cấp tính vẽ hoạt hình   Làm việc giống bảng vẽ trang web   Có thể thêm mã JavaScript tính hoạt hình CSS3 để làm cho đối tượng tạo bảng vẽ di chuyển, biến mất, thay đổi tỷ lệ,   Lưu hình ảnh vừa vẽ dạng png Slide - Những khái niệm HTML5 15 THÀNH PHẦN MỚI CỦA HTML5   Khai báo :   Sử dụng javascript: var canvas = document.getElementById ("myCanvas"), context = canvas.getContext("2d"); // x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100); Slide - Những khái niệm HTML5 16 THÀNH PHẦN MỚI CỦA HTML5   Web form:   Thành phần form HTML thực thi giúp trình làm việc với form trở nên dễ dàng so với Slide - Những khái niệm HTML5 17 THÀNH PHẦN MỚI CỦA HTML5   Một số thành phần khác:   , : gán nhãn (hoặc thích ảnh) cho hình ảnh trang web   : nhóm tập thành phần vào thành phần hợp lý   … Slide - Những khái niệm 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 ứng dụng sử dụng thành phần dựng sẵn   Không áp dụng phát triển web mà cịn với ngơn ngữ kịch   Mục đích API để chuẩn hóa chế làm việc đơn giản hóa 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 - Những khái niệm HTML5 20 TỔNG QUAN VỀ HTML5 API   API Geolocation:   Giúp xác định vị trí địa lý trình duyệt web   Thông tin sử dụng để gửi dạng liệu liên quan dựa vị trí   Geolocation kích hoạt số trình duyệt đại Slide - Những khái niệm HTML5 21 TỔNG QUAN VỀ HTML5 API   Ví dụ :flickr.com/map Slide - Những khái niệm HTML5 22 TỔNG QUAN VỀ HTML5 API   Web workers:   WebWorkers framework (nền tảng) giải vấn đề hiệu suất trình duyệt   Là mã kịch chạy luồng riêng biệt   Web storage:   Cải tiến cookie trình duyệt   Cookie cơng nghệ bị giới hạn khó khăn cho nhà thiết kế để sử dụng   Web storage nâng cấp mơ hình để cung cấp không gian lưu trữ lớn cho ứng dụng web đại Slide - Những khái niệm HTML5 23 TỔNG QUAN VỀ HTML5 API 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  Web storage  sessionStorage:   Dữ liệu bị mất đi khi đóng  trình duyệt  Slide - Những khái niệm HTML5 24 CSS3 CSS3   CSS3 thành phần HTML5, lại có mối liên quan mật thiết với HTML5   CSS3 phát triển song song với HTML5 Slide - Những khái niệm 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, backgroundimage, border-image   Web font: @font-face Slide - Những khái niệm HTML5 27 TỔNG KẾT   HTML5 cung cấp thành phần mới, dựa theo tên thành phần thông dụng sử dụng phần bố cục trang web: footer, nav, section, article, aside, footer   Một số thành phần HTML5: , , , …   API: Là cách tạo ứng dụng sử dụng thành phần dựng sẵn   Một số HTML5 API: Drag and Drop, Web storage, Microdata,và Geolocation   CSS3 thành phần HTML5, lại có mối liên quan mật thiết với HTML5 Slide - Những khái niệm HTML5 28 ... Slide - Những khái niệm HTML5 ĐỊNH NGH A HTML5   Phạm vi sử dụng HTML5:   PC   Thiết bị di động & smartphone   Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5. .. kích hoạt số trình duyệt đại Slide - Những khái niệm HTML5 21 TỔNG QUAN VỀ HTML5 API   Ví dụ :flickr.com/map Slide - Những khái niệm HTML5 22 TỔNG QUAN VỀ HTML5 API   Web workers:   WebWorkers... A HTML5 ĐỊNH NGH A HTML5   Thành phần HTML5: Thẻ HTML mới  Thuộc .nh CSS3  HTML5 Javascript   Công nghệ hỗ trợ tách biệt  Slide - Những khái niệm HTML5 ĐỊNH NGH A HTML5   HTML5 họ HTML5:   HTML5: