HTML5 XP Session 08 Tạo NavigationBar và Layout - T4
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.07 MB, 40 trang )
Bài 08:
Tạo NavigationBar và Layout
NexTGen Web
Aptech Ltd.
Mục tiêu
!"#$%&'(
!"#$)%&
!"%*'+,-
.!*/0123!
!"!1!
!"4/
Aptech Ltd.
Việc thiết kế một web site đòi hỏi phải sử dụng một số các phần tử và các nguyên tắc để
nhận được kết quả mong muốn.
Sử dụng các nguyên tắc và các phần tử giúp phát triển một trang web phong phú, hấp dẫn,
hiệu quả và thẩm mỹ.
Sử dụng một số thẻ HTML và đồ họa sẽ giúp phát triển một trang web hữu ích và hiệu quả.
Thanh điều hướng đóng một vai trò quan trọng trong việc đưa ra các trang web thân thiện với
người dùng .
5
Giới thiệu
Aptech Ltd.
HTML5 đã được phát triển tới mức độ cao hơn, nó giới thiệu các phần tử mới mang ngữ nghĩa.
HTML5 đã được phát triển tới mức độ cao hơn, nó giới thiệu các phần tử mới mang ngữ nghĩa.
Các thẻ mới đã được phát triển để tạo ra các cấu trúc ngữ nghĩa ổn định.
Các thẻ mới đã được phát triển để tạo ra các cấu trúc ngữ nghĩa ổn định.
Phiên bản HTML trước đây sử dụng phổ biến thẻ div để hoàn thành nhiều công việc khác nhau
để tạo cấu trúc HTML.
Phiên bản HTML trước đây sử dụng phổ biến thẻ div để hoàn thành nhiều công việc khác nhau
để tạo cấu trúc HTML.
Hạn chế với thẻ div là nó làm bối rối cho người dùng khi nhiều thẻ div được sử dụng trong
đoạn mã lớn.
Hạn chế với thẻ div là nó làm bối rối cho người dùng khi nhiều thẻ div được sử dụng trong
đoạn mã lớn.
HTML5 đã giới thiệu hai loại thẻ ngữ nghĩa cụ thể là, mức văn bản và cấu trúc.
HTML5 đã giới thiệu hai loại thẻ ngữ nghĩa cụ thể là, mức văn bản và cấu trúc.
6
Các thẻ ngữ nghĩa HTML5
Aptech Ltd.
Là những phần tử mức khối, được sử dụng để cấu trúc trang.
Là những phần tử mức khối, được sử dụng để cấu trúc trang.
Các phần tử ngữ nghĩa có tính cấu trúc mới như sau:
Các phần tử ngữ nghĩa có tính cấu trúc mới như sau:
Thẻ ngữ nghĩa có tính cấu trúc 1-7
Section
Section
Footer
Footer
Thẻ ngữ nghĩa có
tính cấu trúc
Thẻ ngữ nghĩa có
tính cấu trúc
Aside
Aside
Nav
Nav
Article
Article
Header
Header
Aptech Ltd.
7
Thẻ ngữ nghĩa có tính cấu trúc 2-7
Thể hiện một
vùng(section)của một tài
liệu Web
Thể hiện một
vùng(section)của một tài
liệu Web
Tương tự như một thẻ div
nhưng phần tử section có ý
nghĩa ngữ nghĩa hơn
Tương tự như một thẻ div
nhưng phần tử section có ý
nghĩa ngữ nghĩa hơn
Được sử dụng để nhóm các nội
dung liên quan
Được sử dụng để nhóm các nội
dung liên quan
Section
Section
Có ý nghĩa hơn khi nội
dung bên trong thẻ section
có liên quan với nhau
Có ý nghĩa hơn khi nội
dung bên trong thẻ section
có liên quan với nhau
Aptech Ltd.
8
Thẻ ngữ nghĩa có tính cấu trúc 3-7
Đại diện cho tiêu đề của
một trang web
Đại diện cho tiêu đề của
một trang web
Hiện nay trang web sử dụng một
tiêu đề duy nhất ở trên cùng của
trang gọi là tiêu đề trên
Hiện nay trang web sử dụng một
tiêu đề duy nhất ở trên cùng của
trang gọi là tiêu đề trên
Có thể được sử dụng một trong hai
là ở trên cùng của tài liệu hoặc ở
trên cùng của một phần
Có thể được sử dụng một trong hai
là ở trên cùng của tài liệu hoặc ở
trên cùng của một phần
Header
Header
Được sử dụng như là một container
có chứa một nhóm các nội dung giới
thiệu
Được sử dụng như là một container
có chứa một nhóm các nội dung giới
thiệu
Aptech Ltd.
9
Thẻ ngữ nghĩa có tính cấu trúc 4-7
Có thể xuất hiện như phần
chân tranghoặc trong các tài
liệu hoặc đoạn
Có thể xuất hiện như phần
chân tranghoặc trong các tài
liệu hoặc đoạn
Có thông tin về các tài
liệu Web
Có thông tin về các tài
liệu Web
Footer
Footer
Chứa thông tin của tác
giả, thông tin bản quyền,
vv
Chứa thông tin của tác
giả, thông tin bản quyền,
vv
Có thể có nhiều phần tử cuối
trang trong một tài liệu HTML5
Có thể có nhiều phần tử cuối
trang trong một tài liệu HTML5
Aptech Ltd.
:
Thẻ ngữ nghĩa có tính cấu trúc 5-7
Được sử dụng cho việc biểu diễn
nội dung có liên quan với các
văn bản chính của tài liệu
Được sử dụng cho việc biểu diễn
nội dung có liên quan với các
văn bản chính của tài liệu
Không bắt buộc phải có một phần
tử aside đặt ở bên phải bên
trái của trang web
Không bắt buộc phải có một phần
tử aside đặt ở bên phải bên
trái của trang web
Nó tự sắp đặt như một slidebar
Nó tự sắp đặt như một slidebar
Aside
Aside
Có thể được ở trên, dưới, hoặc
thậm chí ở giữa của một trang Web
Có thể được ở trên, dưới, hoặc
thậm chí ở giữa của một trang Web
Aptech Ltd.
;<
Thẻ ngữ nghĩa có tính cấu trúc 6-7
Biểu diễn cho một phần của một
trang web có chứa liên kết
chuyển hướng / các menu đến các
trang Web khác
Biểu diễn cho một phần của một
trang web có chứa liên kết
chuyển hướng / các menu đến các
trang Web khác
Được tạo ra cho các thông
tin điều hướng chính
Được tạo ra cho các thông
tin điều hướng chính
Cho phép người dùng điều hướng
thông qua các trang web và
site
Cho phép người dùng điều hướng
thông qua các trang web và
site
Nav
Nav
Aptech Ltd.
;;
Thẻ ngữ nghĩa có tính cấu trúc 7-7
Biểu diễn cho một phần của nội dung độc
lập của một trang web hoặc nội dung site
Biểu diễn cho một phần của nội dung độc
lập của một trang web hoặc nội dung site
Các nguồn cho các thẻ article là
Blog post, New Story, bình luận,
đánh giá, và vv
Các nguồn cho các thẻ article là
Blog post, New Story, bình luận,
đánh giá, và vv
Article
Article
Là khép kín và đứng trên chính nó
Là khép kín và đứng trên chính nó
<body>
<h1>My blog</h1>
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28 08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p> </p>
<footer>
<a href="?comments=1">Show comments </a>
</footer>
</article>
<body>
Aptech Ltd.
Là các phần tử inline.
Là các phần tử inline.
Một vài phần tử như sau:
Một vài phần tử như sau:
;
Các thẻ ngữ nghĩa mức văn bản 1-7
Mark
Mark
Meter
Meter
Time
Time
Thẻ ngữ nghĩa
mức văn bản
Thẻ ngữ nghĩa
mức văn bản
Progress
Progress
Aptech Ltd.
;5
Các thẻ ngữ nghĩa mức văn bản 2-7
Basically, it is used to bring the reader's attention to <mark>a part of the text</mark> that might
not have been considered important or overlooked.
Aptech Ltd.
<time> được dùng để biểu diễn thời gian(24h) hoặc ngày tháng lịch dương.
<time> được dùng để biểu diễn thời gian(24h) hoặc ngày tháng lịch dương.
Có thể được sử dụng để mã hóa ngày và thời gian trong một định dạng máy có thể đọc được và được sử
dụng tùy chọn với một thời gian và một khoảng time-zone
Có thể được sử dụng để mã hóa ngày và thời gian trong một định dạng máy có thể đọc được và được sử
dụng tùy chọn với một thời gian và một khoảng time-zone
;6
Các thẻ ngữ nghĩa mức văn bản 3-7
Thuộc tính Giá trị Mô tả
datetime datetime Cung cấp ngày tháng cho phần tử.
Pubdate pubdate Chỉ ra ngày và thời gian công bố tài liệu
=#>?'$<time>.
Aptech Ltd.
;
Các thẻ ngữ nghĩa mức văn bản 4-7
@"*
<!DOCTYPE html>
<html>
<body>
<time datetime="13:00">1pm</time>
<time datetime="2011-07-15">July 15th, 2011</time>
<time datetime="2011-07-15T13:00">1pm on July 14th</time>
</body>
</html>
Aptech Ltd.
;7
Các thẻ ngữ nghĩa mức văn bản 5-7
@"*
Science : <meter min="0" max="100" value="95">95 of 100</meter> <br />
Math : <meter min="0" max="100" value="60">60 of 100</meter><br />
Geography : <meter min="0" max="100" value="20">20 of 100</meter> <br />
History : <meter min="0" max="100" value="50">50 of 100</meter>
Aptech Ltd.
;8
Các thẻ ngữ nghĩa mức văn bản 6-7
Thuộc tính Giá trị Mô tả
form form_id Chỉ ra form mà phần tử meter sẽ đặt trong đó.
high number Được sử dụng để xác định giá trị tầm cao.
low number
Được sử dụng để xác định một loạt các giá trị được coi là thấp và phải lớn hơn giá trị
thuộc tính min.
max number Được sử dụng để xác định giá trị lớn nhất trong phạm vi.
min number Được sử dụng để xác định giá trị nhỏ nhất trong phạm vi.
optimum number Được sử dụng để xác định giá trị tối ưu cho thẻ <meter>.
value number Được sử dụng để xác định giá trị hiện tại của thẻ <meter>.
>
?'$<meter>(
Aptech Ltd.
<progress> sử dụng với JavaScript để thể hiện tiến trình của một công việc.
<progress> sử dụng với JavaScript để thể hiện tiến trình của một công việc.
;9
Các thẻ ngữ nghĩa mức văn bản 7-7
@"*
<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
} </script>
</section>
Thuộc tính Giá trị
Mô tả
max number Chỉ ra giá trị biên lớn nhất có thể là số thập phân
value number Chỉ ra giá trị biên nhỏ nhất có thể là số thập phân
A4#>?'$<progress>(
Aptech Ltd.
;:
Các phần tử HTML5 Layout 1-8
Aptech Ltd.
Phần tử <header> cung cấp thông tin mang tính chất giới thiệu, tương tự như header của một tài liệu
văn bản.
Phần tử <header> cung cấp thông tin mang tính chất giới thiệu, tương tự như header của một tài liệu
văn bản.
Thẻ <header> cũng có thể được chứa bên trong các phần tử article, aside, nav, main và section để cung
cấp header cho khu vực đó.
Thẻ <header> cũng có thể được chứa bên trong các phần tử article, aside, nav, main và section để cung
cấp header cho khu vực đó.
Ví dụ nội dung của header có thể là mô tả topic chung cho nội dung phía dưới nó, logo của công ty,
hoặc tiêu đề tin tức.
Ví dụ nội dung của header có thể là mô tả topic chung cho nội dung phía dưới nó, logo của công ty,
hoặc tiêu đề tin tức.
<
Các phần tử HTML5 Layout 2-8
@"
*<header>(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<header>
<h1>Sample Blog </h1>
</header>
</body>
</html>
Aptech Ltd.
Phần tử nav định nghĩa một khu vực, trong đó có chứa các liên kết điều hướng đến các trang khác nhau
hoặc đến các vị trí khác nhau trong trang.
Phần tử nav định nghĩa một khu vực, trong đó có chứa các liên kết điều hướng đến các trang khác nhau
hoặc đến các vị trí khác nhau trong trang.
Phần tử nav hữu ích trong việc định nghĩa khối lượng lớn các dữ liệu điều hướng.
Phần tử nav hữu ích trong việc định nghĩa khối lượng lớn các dữ liệu điều hướng.
;
Các phần tử HTML5 Layout 3-8
@"
*B
<body>
<header>
<h1>Sample Blog</h1>
</header>
<nav>
<ul>
<li> home </li>
<li> help </li>
<li> contact </li>
</ul>
</nav>
</body>
Aptech Ltd.
Phần tử section định nghĩa các khu vực của tài liệu chứa các thông tin quan trọng nhất của tài liệu.
Phần tử section định nghĩa các khu vực của tài liệu chứa các thông tin quan trọng nhất của tài liệu.
Có thể dùng để nhóm các phần tử khác như một nhóm các article, image, hay phần nội dung bất kỳ nào của
trang web
Có thể dùng để nhóm các phần tử khác như một nhóm các article, image, hay phần nội dung bất kỳ nào của
trang web
Nó có thể được tạo ra trong các định dạng khác nhau. Ví dụ, nó có thể được chia thành nhiều khối hoặc
cột.
Nó có thể được tạo ra trong các định dạng khác nhau. Ví dụ, nó có thể được chia thành nhiều khối hoặc
cột.
@"*4C*DCsection
<body>
<header>
<h1>Sample Blog </h1>
</header>
<nav>
<ul>
<li> home </li>
<li> help </li>
<li> contact </li>
</ul>
</nav>
Các phần tử HTML5 Layout 4-8
<section>
<h1>Links</h1>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</section>
</body>
Aptech Ltd.
Phần tử aside là một cột hay một phần mà thường chứa dữ liệu liên quan đến nội dung của article chính.
Phần tử aside là một cột hay một phần mà thường chứa dữ liệu liên quan đến nội dung của article chính.
Phần tử này không chỉ dùng cho các sidebar mà còn có thể cho các nhóm phần tử nav, cho mục đích quảng
cáo, hay bất kỳ nội dung nào.
Phần tử này không chỉ dùng cho các sidebar mà còn có thể cho các nhóm phần tử nav, cho mục đích quảng
cáo, hay bất kỳ nội dung nào.
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<aside>
<blockquote>Archive Number One</blockquote>
<br>
<blockquote>Archive Number Two</blockquote>
</aside>
</body>
</html>
@"*4C*DCaside
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<h1>Sample Blog </h1>
</header>
<nav>
<ul>
<li> home </li>
<li> help </li>
<li> contact </li>
</ul>
</nav>
5
Các phần tử HTML5 Layout 5-8
Aptech Ltd.
Phần tử footer định nghĩa phần dưới cùng (bottom) của trang Web tương tự như footer của tài liệu văn
bản.
Phần tử footer định nghĩa phần dưới cùng (bottom) của trang Web tương tự như footer của tài liệu văn
bản.
Phần tử footer cũng có thể được chứa trong các phần tử article, aside, nav, main, section để cung cấp
một footer trong vùng đó.
Phần tử footer cũng có thể được chứa trong các phần tử article, aside, nav, main, section để cung cấp
một footer trong vùng đó.
Có thể bao gồm tên chủ sở hữu, công ty, các link, bản quyền, liên hệ….
Có thể bao gồm tên chủ sở hữu, công ty, các link, bản quyền, liên hệ….
6
Các phần tử HTML5 Layout 6-8
Aptech Ltd.
Các phần tử HTML5 Layout 7-8
@"
*<footer>(
<body>
<header>
<h1>Sample Blog</h1>
</header>
<nav>
<ul>
<li> home </li>
<li> help </li>
<li> contact </li>
</ul>
</nav>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<aside>
<blockquote>Archive Number One</blockquote>
<br>
<blockquote>Archive Number Two</blockquote>
</aside>
<footer>
Copyright © 2012-2013
</footer>
</body>
</html>
