04/10/2018, 20:13

Tự tay làm một trang web bằng HTML5 và CSS3

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ư ...

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.

Tự tay làm một trang web bằng HTML5 và CSS3
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 {
awidth: 550px;
float: left;
margin: 0 15px;
}
section#right {
float: left;
awidth: 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.
Chúc các bạn thành công !

Tags: html5 căn bản html5 tips thủ thuật html5

Chuyên Mục: HTML5

Bài viết được đăng bởi webmaster

  • Tam

    Khong biet sao post khong day du duoc code trong nay.. co the cho minh email de lien lac duoc khong vay?

Bài liên quan

Tự tay làm một trang web bằng HTML5 và CSS3

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ư ...

Tạ Quốc Bảo viết 3 tuần trước

Tự tay tạo một trang Blog đơn giản với PHP

Những đoạn code mà mình sẽ post sau đây là những kiến thức cơ bản dành cho những ai lập trình php , nếu bạn không thích php thì cũng có thể tham khảo vì nó rất đơn giản và dễ hiểu và bạn có thể áp dụng với ngôn ngữ lập trình nào khác mà bạn ưa thích. Chúng ta sẽ lần lượt tạo các file sau đây ...

Hoàng Hải Đăng viết 3 tuần trước

Tự tay làm tag cloud cho trang web của bạn bằng PHP

Bạn cần nâng cao thứ hạng tìm kiếm trang web của bạn bằng việc làm tag cloud cho trang của mình, nếu bạn chưa biết cách lập trình ra sao thì đoạn code mà mình giới thiệu sau sẽ giúp bạn làm tốt điều đó, và bạn cũng có thể dùng nó để tham khảo nếu bạn muốn viết một module cho trang joomla hoặc ...

Tạ Quốc Bảo viết 3 tuần trước

Tay trắng làm nên một trang web cá nhân chuyên nghiệp không tốn một xu (Phần 2)

Nối tiếp phần một, ở phần 2 này chúng ta sẽ làm một trang web từ một bộ giao diện độc lập. Giao diện bạn chọn tốt nhất nên là sử dụng Bootstrap (3 hoặc 4) để nó có responsive (hiển thị trên điện thoại gọn đẹp). Sau đây chúng ta hãy đi làm bước 1, đi tìm một giao diện ưng ý và áp dụng nó vào ...

Bùi Văn Nam viết 17:42 ngày 12/08/2018

[Go] Làm một trang web đơn giản dùng Go(Phần 3)

Xin chào các bạn đã quay trở lại với phần 3 của chuyên mục giới thiệu cơ bản về ngôn ngữ Golang của mình. Tại phần này mình xin giới thiệu các xử lý lỗi, validation và dùng template với Go. 1: Xử lý lỗi Có một số nơi trong chương trình của chúng ta, các lỗi đang bị bỏ qua. Đây là một thực tế ...

Bùi Văn Nam viết 17:07 ngày 12/08/2018
0