Giáo trình HTML5 - Bài 2: Khởi tạo, làm việc với mã HTML5 và thành phần FORM

Nội dung text: Giáo trình HTML5 - Bài 2: Khởi tạo, làm việc với mã HTML5 và thành phần FORM

1. BÀI 2 KHỞI TẠO, LÀM VIỆC VỚI MÃ HTML5 VÀ THÀNH PHẦN FORM
2. NHẮC LẠI BÀI TRƯỚ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 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 2
3. MỤC TIÊU BÀI HỌC Sử dụng ngôn ngữ đánh dấu HTML5 Làm việc với các phần tử nội dung (content) của HTML5 Tổng quan về những thành phần form mới của HTML5 Làm việc với thành phần form mới trong HTML5 Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 3
4. NGÔN NGỮ ĐÁNH DẤU HTML5
5. NGÔN NGỮ ĐÁNH DẤU HTML5 Cú pháp HTML5 rất mở: Không phân biệt kiểu chữ in hoa, in thường Đoạn tiêu đề 1 Các phần tử không bắt buộc phải có thẻ đóng Đoạn văn bản cho phần nội dung. Không bắt buộc phải có dấu nháy kép cho thuộc tính Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 5
6. NGÔN NGỮ ĐÁNH DẤU HTML5 Cấu trúc file mã HTML5: DOCTYPE CONTENT metadata flow seconing heading phrasing embedded interacve Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 6
7. NGÔN NGỮ ĐÁNH DẤU HTML5 Khai báo DOCTYPE: DOCTYPE được sử dụng để kiểm tra hợp lệ các tài liệu Phiên bản trước HTML5 DTD HTML 4.01 Transional//EN" "hp://www.w3.org/TR/html4/ loose.dtd"> Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 7
8. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng mã nội dung (content) HTML5 Metadata interacve flow content embedded seconing phrasing heading Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 8
9. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng nội dung Metadata: Là phần nội dung thiết lập cách trình bày hoặc hành vi của các nội dung còn lại trên trang Có thể sử dụng nội dung metadata để thiết lập quan hệ giữa các tài liệu HTML Thường chứa các từ khóa hoặc mô tả cho trang web, và được các bộ máy tìm kiếm sử dụng để phân loại trang web Được đặt trong thành phần SmoothieWorld: Providing access to the best smoothie recipes anywhere. Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 9
10. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng Flow: Đại diện cho các phần tử được coi là nội dung của trang web Các thẻ đánh dấu nội dung đều thuộc vùng này Những phần tử được thêm mới trong HTML5: , , , , , This is flow content Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 10
11. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng Sectioning: Là vùng nội dung mới của HTML5 Bao gồm 4 phần tử: , , , và New Additions New Additions SmoothieWorld features smoothie recipes submitted by our community of users. Here are some of the highest rated recipes of the last 30 days. Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 11
12. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng Heading: Chứa tất cả các phần tử tiêu đề tiêu chuẩn hiện đang được sử dụng trong HTML 4.0 bao gồm: , , Với HTML5: bổ sung thêm Top Rated Smoothies The Funky Orange Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 12
13. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng Phrasing: Là văn bản của tài liệu bao gồm các phần tử đánh dấu văn bản bên trong một đoạn văn Là tập con của vùng flow The advantage of having good hiking boots ecomes extremely clear after your third day of walking. Vùng Embedded: Là nội dung nhập một tài nguyên khác như hình ảnh hay video vào trong tài liệu Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 13
14. NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng Interactive: Là những phần tử được sử dụng để tương tác ngườ i dùng Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 14
15. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5
16. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Hỗ trợ sự tương thích trên các trình duyệt cho thành phần HTML5: Sử dụng file reset.css: khai báo để buộc các phần tử mới của HTML5 hiển thị như một khối (block) thay vì hiển thị inline header, section, aside, nav, footer, figure, figcaption { display:block;} Sử dụng javascript (đối với phiên bản IE 6,7,8) Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 16
17. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Phần tử : Đại diện cho một nhóm hỗ trợ giới thiệu hoặc định hướng Có thể chứa: phần tử tiêu đề (h1 à h6), , bảng chứa nội dung, form tìm kiếm, Trong HTML5 có thể sử dụng phần tử này nhiều lần The web's #1 resource for smoothie recipes Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 17
18. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Phần tử : Thường được sử dụng để chứa các thành phần điều hướng cho web HTML5 CSS3 nav { background-color:#60668B; height: bg_nav.gif); background- background-repeat:repeat-x; } Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 18
19. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 19
20. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Thành phần : biểu diễn một vùng chung của tài liệu hoặc ứng dụng Nên sử dụng một section khi muốn phân chia nội dung quan trọng như văn bản và hình ảnh, thành các vùng Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 20
21. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 © copyright 2038 Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 21
22. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Thành phần : Là thành phần tự chứa trong một tài liệu, trang, ứng dụng hoặc site Có thể lồng phần tử vào trong phần tử Là lựa chọn tối ưu để chứa nội dung sẽ được đăng tải trong những ngữ cảnh khác nhau hay thậm chí trên các thiết bị riêng biệt Phần tử article có thể có một , A review of the Blend-o-Matic 3000 Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 22
23. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Thành phần : Cách sử dụng: • Sử dụng cho vùng sidebar của website • Sử dụng cho một vùng nội dung liên quan bên trong phần tử . New Addions Need more Data? SmoothieWorld features See how we put the Blend-O- smoothie recipes submied by our Mac 300 to community of users. the test. Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 23
24. PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5 Thành phần : Không thuộc lớp các phần tử chia đoạn; có thể có nhiều footer trên một trang web HTML5 CSS3 #siteinfo { Copyright SmoothieWorld clear:both; 2011 width:960px; height:118px; padding-top:10px; } Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 24
25. FORM VỚI HTML5
26. FORM VỚI HTML5 Các thành phần mới của form HTML5 bổ sung thêm chức năng mà các nhà thiết kế cũng như các nhà phát triển web thường phải kết hợp thông qua các phương tiện khác như JavaScript và Flash Cách làm việc của form POST/ GET Tương tác Trả về Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 26
27. FORM VỚI HTML5 Cấu trúc mã form: ID: cho phép định kiểu form với CSS Action: • nơi gửi dữ liệu của người dùng để xử lý • Thường là URL trỏ tới mã kịch bản được lưu trên máy chủ Method: • Xác định phương thức gửi dữ liệu • giá trị POST/ GET Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 27
28. FORM VỚI HTML5 Làm việc với thành phần : First name: Last name: Là thành phần không bắt buộc Tăng khả năng truy cập cho form Làm việc với thành phần : Personal Information First name: Để nhóm các phần tử form trên trang Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 28
29. FORM VỚI HTML5 Kết hợp với thành phần để thêm tiêu đề cho form Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 29
30. FORM VỚI HTML5 Thêm điều khiển mới và thuộc tính: Email: Cho phép các nhà thiết kế sắp xếp dữ liệu từ các website một cách dễ dàng Dữ liệu có thể được gửi tự động tới một cơ sở dữ liệu xác định Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 30
31. FORM VỚI HTML5 Website: First name: Last name: Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 31
32. FORM VỚI HTML5 Làm việc với thành phần : Mango Smoothie Strawberry Smoothie Banana Smoothie Xác định một danh sách tùy chọn cho thành phần input Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 32
33. FORM VỚI HTML5 Một số thành phần mới trong điều khiển input: Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 33
34. TỔNG KẾT Cú pháp của HTML5 mở hơn các phiên bản trước: không phân biệt chữ in hoa – thường, không bắt buộc phải có thẻ đóng, không bắt buộc phải có dấu nháy kép cho thuộc tính Cách khai báo của HTML5 đơn giản, rút gọn hơn rất nhiều so với các phiên bản trước: , , Cấu trúc mã HTML5 gắn liền với cấu trúc bố cục trang: , , , HTML5 cung cấp nhiều điều khiển trong form hơn, dễ dàng hơn cho người thiết kế & phát triển Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 34