Hướng dẫn tạo trang web đơn giản sử dụng HTML 5

Trong bài viết này, chúng tôi sẽ hướng dẫn tạo trang web đơn giản sử dụng HTML 5, áp dụng cho các bạn mới bắt đầu tìm hiểu nhé.

1.Cấu trúc 1 tài liệu HTML 5 đơn giản

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />

</head>
<body>

</body>
</html>
Bạn có thể nhận thấy rằng không giống như các hương vị XHTML gần đây của HTML, thẻ <html> đang mở không còn đòi hỏi các thuộc tính xmlns hoặc xml:lang nữa, và chỉ riêng thuộc tính lang cũng đủ. Tương tự như vậy, phần tử <meta> mô tả một tập ký tự thuộc tính tốc ký mới để định nghĩa mã hóa ký tự của trang. Thật đáng giá để nói rằng những thay đổi này chỉ làm dễ dàng hơn và làm giảm số lượng mã cần thiết để thực hiện các nhiệm vụ đơn giản. Các phương thức cũ vẫn hoàn toàn hợp lệ

2. Sử dụng các phần tử ngữ nghĩa trong HTML 5

<header>
<hgroup>
<h1>Company Name</h1>
<h2>An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

<article>
<header>
<time datetime="2010-01-12" pubdate>
<span>Jan</span> 12
</time>
<h1>
<a href="#" title="Link to this post"
rel="bookmark">Article Heading</a>
</h1>
</header>
<p>This is an article that demonstrates some of the new features
that HTML5 and CSS3 has to offer. This article contains several sections, each
with its own heading, as well as a video element which will play a video without
Flash on browsers that support it.</p>
<section>
<header>
<h1>This is a section heading</h1>
</header>
<p>This is an example of a basic section of a document.
A section can refer to different parts of a document, application, or page.
According to the draft W3C spec, HTML5 sections usually have headings.</p>
</section>
</article>

<footer>
<p>© 2009 Company Name. All rights reserved.</p>
</footer>
Đoạn mã trong Liệt kê 2 tương đối rõ ràng. Phần tử <header> > chính bao gồm một phần tử <hgroup> có hai nhóm tiêu đề: một phần tử tiêu đề <h1> và một phần tử phụ đề <h2>. Phần tử <nav> chính là một danh sách không theo thứ tự có ba mục, mỗi một mục liên kết đến một trang hư cấu trên trang Web đó. Phần tử <article> chứa <header> riêng của mình, có một phần tử <time> chỉ ngày công bố bài viết. Bạn sẽ thấy rằng phần tử này có chứa một thuộc tính datetime (ngày giờ), để chỉ rõ một biểu mẫu chuẩn hóa của ngày đăng bài để các máy tính có thể đọc nó dễ dàng.

3. Đinh dạng CSS cho các phần tử ngữ nghĩa mới

* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
width: 480px; margin: 0px auto;
}

header h1 {
font-size: 36px; margin: 0px;
}

header h2 {
font-size: 18px; margin: 0px; color: #888;
font-style: italic;
}

nav ul {
list-style: none; padding: 0px; display: block;
clear: right; background-color: #666;
padding-left: 4px; height: 24px;
}

nav ul li {
display: inline; padding: 0px 20px 5px 10px;
height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
color: #EFD3D3; text-decoration: none;
font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
color: #fff;
}

article > header time {
font-size: 14px; display: block; width: 26px;
padding: 2px; text-align: center; background-color: #993333;
color: #fff; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin-bottom: 10px;
}

article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}

article > header h1 {
font-size: 20px; float: left;
margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
color: #993333;
}

article > section header h1 {
font-size: 16px;
}

article p {
clear: both;
}

footer p {
text-align: center; font-size: 12px;
color: #888; margin-top: 24px;
}
Hầu hết các quy tắc CSS này đều chứa các đặc tính đã có sẵn trong CSS vào lúc này, nhưng bạn có thể nhận thấy rằng quy tắc article > header time chứa các thuộc tính bán kính-đường viền (bao gồm các đặc tính riêng biệt của trình duyệt cho các trình duyệt dựa trên Mozilla và WebKit). Quy tắc này thêm góc được làm tròn cho hộp ngày/giờ trên các trình duyệt được hỗ trợ, chẳng hạn như Firefox, Safari, và Chrome.
Bài viết do: tủ chậu cao cấp Thái Nguyên sưu tầm