• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Trải nghiệm các thẻ mới đơn giản hơn từ HTML5

22
12/10/2011

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.

{22 bình luậnAdd yours ?}

21:26:00, 12 thg 10, 2011

HTML5 cũng chính là HTML như đã thấy ở các cấu trúc tmeplate các blog phải không hà? :C)

Reply
21:33:00, 12 thg 10, 2011

Fabie có mặt !!! :D)
Chúc mọi người học tốt, khóa học diễn ra thành công.
Anh Hà cho em hỏi là có cần điểm danh tất cả các bài có trong ngày hay chỉ cần 1 bài trong ngày anh post là đủ rồi ạ?

Reply
21:35:00, 12 thg 10, 2011

Em Quang xin báo cáo có mặt:D)

Reply
21:36:00, 12 thg 10, 2011

Em tưởng anh ra từng bài một chứ? Anh post 1 lúc 5 bài luôn đấy à!

Reply
21:41:00, 12 thg 10, 2011

@Linh Dung Đâu có, là 1 bài thôi, do lúc đâu dùng code tô màu cho rõ, k ngờ code này nhiều quá dẫn đến bài rất dài khiến mất trang ở trang chủ, do đó mới phân ra từng phần, nhưng khi phân ra thì lại k đều, cho nên cuối cùng gộp lại 1 bài luôn. Tạm thời để dạng raw như thế đã. Rảnh sẽ tô lại. Bây giờ đang bận rồi. Đúng là hôm nay trúng ngày bận quá đi mất. Cũng ráng post bài đầu như đã hứa.

Reply
21:41:00, 12 thg 10, 2011

Mình đến lớp đây bác Hà nhé! Chúc mừng khai giảng lớp học :P) :G)

Reply
21:50:00, 12 thg 10, 2011

@*Fabie* Mỗi tuần 1 bài là đủ nhức đầu rồi, còn thời gian thực hành và vọc thủ thuật nữa chứ lị. Mỗi bài điểm danh 1 lần thôi mà, tiện thể có câu hỏi gì cứ nêu nhé.

Reply
22:53:00, 12 thg 10, 2011

Buổi sáng, VP chờ không thấy bài. Chiều và tối thì bận. Bây giờ mới có thể online và đọc bài.
Mừng khai giảng lớp học.

Reply
23:52:00, 12 thg 10, 2011

@VnAbout: Blogger K hoàn toàn như thế. Cấu trúc Template là XML. Hiện nay HTML5 đã được bắt đầu vận dụng vào Template nhưng chưa phổ biến. Hy vọng trong thời gian tới sẽ có những phát triển.

Reply
06:18:00, 13 thg 10, 2011

mình khong online tối, mong bạn thông cảm

Reply
06:26:00, 13 thg 10, 2011

hic giờ mới vô được

Reply
08:16:00, 13 thg 10, 2011

@Đam mê seo Không sao mà, có thể điểm danh bất kỳ lúc nào trong tuần mà. Cứ thong thả.

Reply
08:41:00, 13 thg 10, 2011

em diem danh.dk dung hum post bai hen qua

Reply
20:45:00, 13 thg 10, 2011

Anh Hà cho em hỏi tại sao không nên lạm dụng nhiều thẻ div vậy ạ!

Reply
21:22:00, 13 thg 10, 2011

@Linh Dung Bởi vì dùng nó nhiều quá đôi khi bị thừa thải, nếu để ý trong Template sẽ thấy rất nhiều thẻ div đi kèm những chú thích, như thế làm tăng bandwith, tác hại như thế nào thì e cũng biết rồi đấy.

Reply
22:51:00, 28 thg 10, 2011

anh Hà còn chỗ học hok cho em đăng ký 1 chỗ.

Reply
12:48:00, 20 thg 11, 2011

Anh hà ơi em đang rất muốn học HMTL5 và CSS3, em chỉ tìm thấy bài 1 thôi, làm sao xem các bài còn lại đây?

Reply
17:56:00, 25 thg 12, 2011

cho hỏi bài 2 đâu :|

Reply
14:55:00, 22 thg 2, 2012

Hi Bạn, mình cũng đang tìm hiểu về HTML5 & CSS3. Mình thấ bài viết của bạn rất hay và dễ hiểu nhưng chỉ thấy Bài 1 thôi. Mình thể tìm những bài tiếp theo ở đâu? Bạn giúp mình nhé. Thanks

Reply
13:39:00, 5 thg 5, 2012

thanks bác na..em về nhà ngâm cứu..điện tử nhưng thích mấy món này..hehehe

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn