Có lẽ bạn sẽ tự hỏi tại sao phải dùng tới HTML5 cho web hay blog của mình. Thực ra có rất nhiều lý do, nhưng lý do quan trọng nhất đó là bạn phải làm việc với tiêu chuẩn quốc tế trong lĩnh vực thiết kế web. Mà HTML5 lại là một trong những công nghệ tương lai mà cả thế giới đang phát triển. Nếu như bạn không tự trang bị kiến thức cơ bản về HTML5 thì bạn sẽ bị bỏ lại phía sau và sẽ khó cạnh tranh với những bạn thiết kế web khác.
Theo mình thì cách tốt nhất để học một cái gì đó mới đó là bắt tay làm ngay với nó với những ứng dụng đơn giản nhất. Và trong bài viết này mình sẽ cùng các bạn tự tay làm một trang đơn giản làm bằng HTML5. Các bạn tham khảo đoạn html sau :
<!doctype html>
<head>
<meta charset="utf-8">
<title>Our First HTML5 Page</title>
<meta name="description" content="Welcome to my basic template.">
<link rel="stylesheet" href="css/style.css?v=1">
</head>
<body>
<div id="wrapper">
<header>
<h1>Welcome, one and all!</h1>
<nav>
<ul>
<li><a rel="external" href="#">Home</a></li>
<li><a rel="external" href="#">About us</a></li>
<li><a rel="external" href="#">Contacts</a></li>
</ul>
</nav>
</header>
<div id="core">
<section id="left">
<p>some content here.</p>
</section>
<section id="right">
<p>but some here as well!</p>
</section>
</div>
<footer>
<p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
</footer>
</div>
</body>
</html>
Các bạn thấy thế nào, không khác gì mấy so với phiên bản HTML4 phải không ? Nhưng nếu để ý các bạn sẽ thấy xuất hiện những thẻ mới như header, nav, section và footer. Chúng ta cùng tìm hiểu ý nghĩa của các thẻ có tác dụng thế nào:
– Thẻ <header> : thẻ này được dùng để chỉ định tiêu đề của bài viết hoặc một danh mục, bạn có thể sử dụng nhiều thẻ <header> trong cùng một văn bản.
– Thẻ <nav> : Thẻ này được dùng để chứa menu chính của một trang web.
– Thẻ <section> : Thẻ này định nghĩa phân vùng trong một trang web, các bạn để ý trong đoạn html bên trên, thẻ này được dùng để phân chia nội dung bên trái và bên phải của trang web.
– Thẻ <footer> : Dựa vào tên thẻ , chúng ta cũng biết nó làm nhiệm vụ gì, thẻ này cũng có thể được dùng nhiều lần trong trang web của bạn.
Để hoàn tất trang web mà chúng ta tạo bên trên cần có thêm đoạn CSS sau :
nav {
display: block;
margin-bottom: 10px;
}
nav ul {
list-style: none;
font-size: 14px;
}
nav ul li {
display: inline;
}
nav ul li a {
display: block;
float: left;
padding: 3px 6px;
color: #575c7d;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
background: #deff90;
color: #485e0f;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 0;
text-decoration: none;
}
/* page core */
div#core {
display: block;
clear: both;
margin-bottom: 20px;
}
section#left {
width: 550px;
float: left;
margin: 0 15px;
}
section#right {
float: left;
width: 300px;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Trên đây chỉ là một ví dụ rất đơn giản về xây dựng web bằng HTML5, nó sẽ giúp bạn có cái nhìn đầu tiên về HTML5. Mình sẽ giới thiệu tới các bạn nhiều ứng dụng về HTML5 hơn trong các bài viết sắp tới.