HTML5 and CSS3 là hai tiêu chuẩn mới thuộc thế hệ mới nhất của công nghệ web, giúp cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào, đem đến cho người dùng những trải nghiệm thú vị về tốc độ truy cập web nhanh hơn, tốt hơn, đa sắc thái hơn.
Internet Explorer hiện vẫn là một công cụ trình duyệt còn được sử dụng nhiều song các phiên bản 8 và dưới nữa hỗ trợ rất kém hoặc không hỗ trợ HTML5 và CSS3. Tuy nhiên IE9 đã cải thiện hơn song vẫn chưa được sử dụng rộng rãi. Chrome và Firefox là hai trong số những trình duyệt hỗ trợ HTML5 và CSS3 tốt nhất.
Để tham gia khóa học HTML5 & CSS3, các bạn học viên nên cài đặt cho máy tính của mình một trình duyệt hỗ trợ tốt đối với HTML5 và CSS3 như
Chrome hoặc
Firefox.
Có một điều cần chú ý rằng, HTML5 và CSS3 vẫn đang trong quá trình phát triển và chưa có chi tiết kỹ thuật cuối cùng, đồng nghĩa với việc sẽ có những thay đổi về thông số kỹ thuật mà chúng ta không được báo trước. Tuy nhiên với những ưu điểm nổi bật thì chúng ta không ngại ngần tìm hiểu để mở mang kiến thức trước khi suy nghĩ nhiều về chuyện tương lai.
Bài 1: Trải nghiệm các thẻ mới đơn giản hơn từ HTML5
Có một vấn đề nghiêm trọng ảnh hưởng đến các nhà thiết kế web hiện nay đó là hội chứng dùng thẻ div. Đây chính là một hội chứng thâm căn cố đế thành thói quen khi các nhà thiết kế web sử dụng quá nhiều thẻ div không thiết để bao các thành phần có các ID như banner, sidebar, article, và footer. Hội chứng này có tính lây lan rất cao. Các nhà thiết kế web chuyền cho nhau hội chứng này rất nhanh chóng.
Dưới đây là ví dụ một hội chứng dùng thẻ div:
<div id="navbar_wrapper">
<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
Trên đây là cấu trúc HTML cho một danh sách không đánh số (unordered list), là một thành phần block được bao trong hai thẻ div mà 2 thẻ này cũng là những thành phần block. Tuy nhiên chúng ta có thể loại bỏ một trong hai thẻ div này mà vẫn cho kết quả tương tự. HTML5 giới thiệu những thẻ mới sẽ giúp xóa bỏ hội chứng dùng thẻ div.
Để bắt đầu bài học đầu tiên về HTML5, chúng ta cần tạo một file có tên
index.html. Đặt đoạn code sau đây vào công cụ Notepad (Chọn Start >> Programs >> Accessories) rồi lưu file theo tên
index.html.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Blog</title>
</head>
<body>
</body>
</html>
Mỗi tiêu chuẩn HTML và XHTML đều có một DOCTYPE thường được đặt ở đầu mỗi trang web để giúp khai báo với trình duyệt về quy chuẩn mà trình duyệt sẽ dựa vào đó để được render theo các chuẩn mực đúng tiêu chuẩn. Nếu bạn thử xem mã nguồn (view source) nhiều trang web bạn sẽ thấy DOCTYPE được thể hiện như sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Đối với HTML5, bạn sẽ thấy nó đơn giản và dễ nhớ hơn nhiều:
<!DOCTYPE HTML>
1. Thẻ header:
Phần đầu trang web (không nên nhầm với các thẻ tiêu đề như h1, h2, h3 …) có thể chứa các nội dung như logo, search box, banner, hay thậm chỉ có tiêu đề trang. Phần đầu trang web nằm trong thẻ header:
<header id="page_header">
<h1>HTML5 Blog</h1>
</header>
Không có giới hạn về số header trên một trang web. Mỗi phần riêng biệt cũng có thể có một header, sử dụng thêm thuộc tính ID để tạo tính duy nhất cho các thành phần, giúp dễ dàng định dạng CSS hoặc định vị các thành phần băng Javascript.
2. Thẻ footer:
Thành phần footer xác định thông tin cuối một tài liệu hoặc một phần tài liệu web. Phần chân trang web chứa các thông tin như thời gian bản quyền và người sở hữu trang. HTML5 có nhiều footer trong một tài liệu, có nghĩa chúng ta có thể sử dụng thẻ footer ngay cả trong một bài viết. Ví trong một tài liệu HTML5 có nhiều footer nên cần cho nó một ID giống như phần header giúp tạo tính duy nhất cho các thành phần.
<footer id="page_footer">
<p>© 2010-2011 HTML5 Blog</p>
</footer>
Phần footer này đơn giản chỉ chưa thời gian bản quyền. Tuy nhiên, cũng như header, nó có thể chứa các thành phần khác như thành phần điều hướng trang.
3. Thẻ nav:
Điều hướng rất quan trọng đối với một trang web. Một thanh điều hướng gồm các link dẫn đến trang chủ, trang giới thiệu, trang lưu trữ, trang liên hệ … Thanh điều hướng có thể nằm trong phần header như sau:
<header id="page_header">
<h1>HTML5 Blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="introduction.html">Introduction</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
Giống như header và footer, trang web có nhiều thành phần điều hướng, có thể nằm ở phần header, cũng có thể nằm ở phần footer:
<footer id="page_footer">
<p> © 2010-2011 HTML5 Blog</p>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="terms.html">Terms of Service</a></li>
<li><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
</footer>
4. Thẻ section và thẻ article:
Thẻ section nhằm thay thế thẻ div bị lạm dụng quá nhiều để mô tả các khu vực của một trang web.
<section id="posts">
</section>
Đoạn code trên thể hiện thành phần chứa tất cả các bài viết của trang. Mỗi bài viết cũng sẽ có thành phần riêng với thẻ article. Thẻ này mô tả nội dung thực sự của một trang web. Mỗi bài viết sẽ có phần header, nội dung và footer, được xác định như sau:
<article class="post">
<header>
<h2>How To Make A Girl Fall In Love With You</h2>
<p>Posted by Vlad Karl on
<time datetime="2006-02-22T14:39">January 22nd, 2006 at 2:39PM</time>
</p>
</header>
<p>
Getting a girl of your dreams is much like getting the car of your dream. But unlike a car which you can always bargain for, there is nothing like a 20 percent discount in courting the girl of your dreams, she's so sweet a thing to be discounted, you dearly are in love with her and your feelings for her can only be communicated not by the words of the mouth, but by the words of the heart. Getting the girl actually depends on how big your heart is - faint heart, never won fair lady.
</p>
<p>
The first step in the heart-winning exercise for any man is to make a good impression. In your doing so, you don't have to talk, dress or do the common things that all the Toms do to get a decent girl's attention. Be unique, that's all you need. Be a man of his own style. Dress decently - indecency can make one be mistaken for arrogance; watch your language - obscene language gives the impression of immaturity, being uncultured and cheap; be a man of good habits - don't drink or smoke like any other loser.
</p>
<footer>
<p><a href="comments"><i>30 Comments</i></a> ...</p>
</footer>
</article>
5. Thẻ aside và phần sidebar:
Đôi khi bạn cần thêm nột dung khác vào phần nội dung chính, như đoạn trích dẫn, biểu đồ … thì sẽ sử dụng thẻ aside để nhận diện những thành phần này (đoạn code này sẽ được đặt giữa thẻ article):
<aside>
<p>
“Never give someone a chance to say no when
selling your product.”
</p>
</aside>
Thẻ aside dùng để thể hiện nội dung liên quan đến bài viết. Để tạo phần sidebar, HTML5 khuyến nghị dùng thẻ section. Ở ví dụ sau đây thẻ section được sử dụng kết hợp với thẻ nav để tạo điều hướng lưu trữ:
<section id="sidebar">
<nav>
<h3>Archives</h3>
<ul>
<li><a href="2010/10">October 2010</a></li>
<li><a href="2010/09">September 2010</a></li>
<li><a href="2010/08">August 2010</a></li>
<li><a href="2010/07">July 2010</a></li>
</ul>
</nav>
</section>
Để định dạng cho các thành phần, cần sử dụng CSS như sau:
body{
width:960px;
margin:15px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
}
p{
margin:0 0 20px 0;
}
p, li{
line-height:20px;
}
/ * Header * /
header#page_header nav ul, #page_footer nav ul{
list-style: none;
margin: 0;
padding: 0;
}
/ * Navigation * /
#page_header nav ul li, footer#page_footer nav ul li{
padding:0;
margin: 0 20px 0 0;
display:inline;
}
/ * Posts * /
section#posts{
float: left;
width: 74%;
}
section#posts aside{
float: right;
width: 35%;
margin-left: 5%;
font-size: 20px;
line-height: 40px;
}
/ * Sidebar * /
section#sidebar{
float: left;
width: 25%;
}
/ * Footer * /
footer#page_footer{
clear: both;
width: 100%;
display: block;
text-align: center;
}
Đặt CSS vào một file ngoài theo định dạng như sau:
<link rel="stylesheet" href="style.css" type="text/css">
Cấu trúc HTML5 hoạt động tốt trên các trình duyệt như Firefox, Chrome, và Safari nhưng sẽ rất lộn xộn trên trình duyệt Internet Explorer phiên bản cũ hơn 9.0. Do IE không hỗ trợ các thành phần HTML5 nên không thể vận dụng định dạng CSS cho chúng. Cách duy nhất để định dạng CSS hoạt động là sử dụng Javascript để xác định các thành phần này như là một phần của tài liệu. Chỉ cần thêm một đoạn code sau đây vào phần đầu của trang để nó thực thi trước khi trình duyệt render bất kỳ thành phần nào. Chúng ta sẽ đặt nó trong một chú thích điều kiện, một kiểu chú thích đặc biệt mà chỉ có trình duyệt Internet Explorer mới đọc được:
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
</script>
<![endif]-->
HOMEWORK:
1. Hãy liệt kê các cặp thẻ chính trong cấu trúc HTML5 của một trang web.
2. Nêu một ví dụ mẫu của bạn về cấu trúc HTML5 của thành phần chính chứa các bài viết, trong đó có tiêu đề bài viết, thông tin bài viết (tác giả, thời gian đăng bài), nội dung bài viết và một phần trích dẫn (hay một câu danh ngôn), phần nhận xét.
3. Bài tập nâng cao (dành cho các bạn khá, giỏi): Thử hình dung phần nhận xét trên blogspot như một phần nội dung bài viết trên trang web HTML5 gồm các thẻ article, header, footer; bạn hãy áp dụng các thẻ HTML5 cho phần nhận xét của bạn.
4. Tạo một trang web HTML5 cơ bản gồm đầy đủ các thẻ trong bài học, lưu trang theo tên index.html.
Các bạn học viên trong lớp học HTML5 & CSS3 vui lòng gửi lời giải bài tập vào địa chỉ email của Ban Quản trị để được hỗ trợ trong quá trình học tập.
thì sẽ được dẫn đến Blogger nơi có thể gắn tiện ích vào blog của họ. Bạn có thể xem Demo bằng cách lick vào nút bên dưới để cài đặt tiện ích Recent Post with Thumbnail.
