Bài giảng HTML5 - Bài 2: Khởi tạo, làm việc với mã HTML5 và thành phần Form (Mới)
Đị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
Tóm tắt nội dung Bài giảng HTML5 - Bài 2: Khởi tạo, làm việc với mã HTML5 và thành phần Form (Mới), để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
Đoạn văn bản cho phần nội dung.
NGÔN NGỮ ĐÁNH DẤU HTML5
Cấu trúc file mã HTML5:
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 6
CONTENT
metadata
flow
sec1oning
heading
phrasing
embedded
interac1ve
DOCTYPE
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 7
Phiên
bản
trước
HTML5
<!DOCTYPE
HTML
PUBLIC
"-‐//W3C//
DTD
HTML
4.01
Transi1onal//EN"
"hOp://www.w3.org/TR/html4/
loose.dtd">
NGÔN NGỮ ĐÁNH DẤU HTML5
Vùng mã nội dung (content) HTML5
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 8
content
Metadata
flow
sec1oning
heading
phrasing
embedded
interac1ve
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 9
SmoothieWorld: Providing access to the best smoothie
recipes anywhere.
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:
, , , ,
, ...
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 10
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.
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à
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 11
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.
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 12
Top Rated Smoothies
The Funky Orange
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
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
The advantage of having good hiking boots
ecomes extremely clear after your third day of walking.
</
audio>
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
<input type="button" value="Am I interactive?" onClick='alert("Yep I am
interactive")'>
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
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
header, section, aside, nav, footer, figure, figcaption {
display:block;}
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 17
The web's #1 resource for smoothie recipes
<img src="images/smoothieworld_logo.jpg” width="200"
height="150” alt="smoothieworld_logo" />
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 18
HTML5
CSS3
<a
class="nav-‐home”
href=“#">Home
<a
class="nav-‐about"
href=“#">About
Us
nav
{
background-‐color:#60668B;
height:
35px;
background-‐image:url(images/
bg_nav.gif);
background-‐
image:url(images/bg_nav.gif);
background-‐repeat:repeat-‐x;
}
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 21
©
copyright 2038
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 ,
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 22
A review of the Blend-o-Matic 3000
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ử .
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 23
New
Addi1ons
SmoothieWorld
features
smoothie
recipes
submiOed
by
our
community
of
users.
Need
more
Data?
See
how
we
put
the
Blend-‐O-‐
Ma1c
300
to
the
test.
Link.
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 24
HTML5
CSS3
Copyright
SmoothieWorld
2011
#siteinfo
{
clear:both;
width:960px;
height:118px;
padding-‐top:10px;
}
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
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 26
Tương tác
POST/ GET
Trả về
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:
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 :
Để 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
First name:
Last name:
Personal Information
First name: </
label>
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:
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
Email:<input id="email” type="email“
name="customeremail">
FORM VỚI HTML5
Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 31
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>
FORM VỚI HTML5
Làm việc với thành phần :
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
Mango Smoothie</
option>
Strawberry Smoothie
Banana Smoothie
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
File đính kèm:
bai_giang_html5_bai_2_khoi_tao_lam_viec_voi_ma_html5_va_than.pdf
