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

c với mã HTML5 và thành phần Form 2 
 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 
NGÔN NGỮ ĐÁNH DẤU HTML5 
 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 
 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 
 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 
 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 
 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 
 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 
 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 
 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 
 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 
 </
 audio> 
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 13 
 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 
 <input type="button" value="Am I interactive?" onClick='alert("Yep I am 
 interactive")'> 
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 14 
PHẦN TỬ NỘI DUNG (CONTENT) CỦA 
 HTML5 
 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 
 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 
 <img src="images/smoothieworld_logo.jpg” width="200" 
 height="150” alt="smoothieworld_logo" /> 
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 17 
 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:
 	<a	class="nav-home”	 35px;	background-image:url(images/
 href=“#">Home	 bg_nav.gif);	background-
 	<a	class="nav-about"	 image:url(images/bg_nav.gif);	
 href=“#">About	Us	 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 
 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 
 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 
 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 
 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 
 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.	Link.	
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 23 
 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 
FORM VỚI HTML5 
 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 
 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 
 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: </
 label> 
   Để 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 
 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 
 FORM VỚI HTML5 
   Thêm điều khiển mới và thuộc tính: 
 Email:<input id="email” type="email“ 
 name="customeremail"> 
   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 
 FORM VỚI HTML5 
 Website:<input id="website" type="url” 
 name="customerwebsite"> 
 First name:<input id="firstname" type="text" 
 name="firstname" placeholder="Enter Your First Name" required> 
 Last name:<input id="lastname" type="text" 
 name="lastname" placeholder="Enter Your Last Name" required> 
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 31 
 FORM VỚI HTML5 
   Làm việc với thành phần : 
 Mango Smoothie</
 option> 
 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 
 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 
 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: <! DOCTYPE 
 html>, , ... 
   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