Tạo một Responsive HTML5 Template đơn giản

HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản HTML. Các phiên bản trước của HTML, như HTML 4.01 đã ra đời từ năm 1999. Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó, nhiều nhà phát triển web đả sử dụng HTML5 trong thiết kế và phát triển ứng dụng web của họ.Một số quy tắc cho HTML5 đã được thành lập:

Các tính năng mới sẽ được dựa trên HTML, CSS, DOM và JS
Giảm thiểu các plugin từ bên ngoài (như Flash)
Xử lý lỗi tốt hơn
Thêm các thẻ đánh dấu mới để thay thế cho các mã lập trình
HTML5 là thiết bị độc lập
Khả năng hoạt động xuyên suốt giữa các trình duyệt

1. Tạo ra một mẫu HTML5 trống

Đầu tiên chúng ta sẽ tạo ra một trang trống ( đặt tên là index.html) để bắt đầu mẫu HTML5.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>

<body>
</body>

</html>

2. Thêm các thẻ HTML5 mới

Một số thẻ HTML5 mới như:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

Ta sẽ thêm một số thẻ HTML5 vào thẻ <body> như HEADER, NAVIGATION, CONTENT, SIDEBAR và FOOTER.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>

<body>
<div id="wrapper">

<!-- start html block -->
<header></header>
<nav></nav>
<section class="content"></section>
<aside class="sidebar"></aside>
<footer></footer>
<!-- end html block -->

</div>
</body>

</html>

3. Thêm code vào các thẻ HTML5

Bây giờ ta sẻ thêm các mã HTML vào các khối HTML5
Thêm code html vào thẻ <header>

<header>
<hgroup><h1 class="site-title"><a href="#">Simple HTML5 Template</a></h1></hgroup>
</header>

Thêm code html vào thẻ <nav>

<nav>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Parent Page</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two with child</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a></li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Thêm code html vào thẻ <section class="content">

<section class="content">

<!-- post 1 -->
<article class="post">
<h1 class="post-title"><a href=#">This is a title for post</a></h1>

<!-- adding post meta -->
<div class="entry post-meta">
<span class="post-author">Richard KS</span>
<span class="post-date">20th March 2013</span>
<span class="post-category">Tutorials</span>
<span class="post-tag">HTML5, CSS3 and Responsive</span>
<span class="post-comment">10 Comments</span>
</div>

<!-- adding post content -->
<div class="entry post-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

</article>
<!-- end post 1 -->

</section>

Thêm code html vào thẻ <aside class="sidebar">

<aside class="sidebar">
<ul class="widget-sidebar">

<!-- some sample list -->
<li class="widget widget_categories">
<h3 class="widget-title">Categories</h3>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Parent Category</a>
<ul class="children">
<li><a href="#">Child One</a></li>
<li><a href="#">Child Two</a>
<ul class="children">
<li><a href="#">Grandchild One</a></li>
<li><a href="#">Grandchild Two</a></li>
<li><a href="#">Grandchild Three</a></li>
</ul>
</li>
<li><a href="#">Child Three</a></li>
</ul>
</li>
<li><a href="#">Category 3</a></li>
</ul>
</li>

<!-- some sample text block -->
<li class="widget widget_text">
<h3 class="widget-title">Text</h3>
<div class="textwidget">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</li>

</ul>
</aside>

Thêm code html vào thẻ <footer>

<footer>
<div class="footer-left">Copyright@ 2013 HTML5.com</div>
<div class="footer-right">Privacy Policy - About Us</div>
</footer>

Và ta sẽ có được kết quả như hình dưới đây (chưa có css nên nhìn nó hơi xấu xí 1 tí):

4. Thêm CSS vào template HTML5

Tạo một tập tin css với tên là style.css
Khai báo tập tin css vừa tạo cho trang index.html bằng cách thêm đoạn mã dưới đây vào ngay phía sau cặp thẻ <title></title>

<link href="style.css" rel="stylesheet" type="text/css">

- Tiếp theo, ta Reset CSS bằng cách Download file normalize.css copy và paste toàn bộ css vào style.css mới.
- Thêm mã CSS dưới đây vào style.css ngay phía sau đoạn normalize css

body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0; 
margin:0;
}

*, html { line-height: 1.6em; }

article img { width:auto; max-width:100%; height:auto; }

.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }

#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}

/* css for <header> */
header {
 padding: 1em 0;
 margin: 0px;
 float: left;
 width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }


/* css for <nav> */
nav {
 display: block;
 margin: 0 0 2em;
 padding: 0px;
 float: left;
 width: 100%;
 background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
 
nav ul {
 padding: 0;
 list-style: none;
 position: relative;
 display: inline-table;
 z-index: 9999;
 margin: 0px;
 float: left;
 width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;}

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

nav ul li a {
 display: block;
 padding: 1em;
 font-size: 1.125em;
 color: #ccc;
 text-decoration: none;
 margin: 0px;
 background-color: #000;
 border-right: 1px solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}

nav ul ul {
 background: #5f6975;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top: 100%;
 width: auto;
 float: none;
}
nav ul li:hover {
 background: #5f6975;
 color: #FFF;
}
nav ul ul li a:hover {
 background-color: #4b545f;
}

nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}

nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
} 


nav ul ul ul {
position: absolute; left: 100%; top:0;
}

/* css for <section class='content'> */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}

/* css for <aside class='sidebar'> */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul {
 width:100%;
 margin: 0px;
 padding: 0px;
 float: left;
 list-style: none;
}
aside.sidebar ul li {
 width:100%;
 margin: 0px 0px 2em;
 padding: 0px;
 float: left;
 list-style: none;
}
aside.sidebar ul li ul li {
 margin: 0px 0px 0.2em;
 padding: 0px;
}
aside.sidebar ul li ul li ul li {
 margin: 0px;
 padding: 0px 0px 0px 1em;
 width: 90%;
 font-size: 0.9em;
}
aside.sidebar ul li h3.widget-title {
 width:100%;
 margin: 0px;
 padding: 0px;
 float: left;
    font-size: 1.45em;
}

/* css for <footer> */
footer {
 width: 98%;
 float:left;
 padding: 1%;
 background-color: white;
 margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }

5. Thêm CSS3 cho @media để Template Responsive

thêm đoạn css dưới đây vào cuối file style.css

/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } /*lets add some background color so we know which dimension we're in */
#wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}

/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } /*lets add some background color so we know which dimension we're in */
#wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}

6. Thêm jquery, modernizr và html5shiv vào thẻ <head>

Download Modernizr hoặc tại đây và đặt nó vào cùng thư mục với index.html
Thêm mã dưới đây trước thẻ </head>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="modernizr-latest.js" type="text/javascript"></script>

Với các đoạn CSS và JavaScript vừa thêm vào, bạn sẽ được một giao diện như hình dưới đây:

Hoàn thành

Bây giờ bạn thử mở trình duyệt với kích thước 768px hoặc 468px giao diện bây giờ sẽ được co giản và hiển thị đúng kích thước trình duyệt của bạn.

Demo

Đó là tất cả, hy vọng hướng dẫn này sẽ giúp ích cho bạn!

1 comment:

Unknown26/2/20 04:01
As claimed by Stanford Medical, It's in fact the SINGLE reason women in this country get to live 10 years longer and weigh on average 19 kilos lighter than us.

(And by the way, it has totally NOTHING to do with genetics or some secret diet and EVERYTHING around "how" they eat.)

P.S, I said "HOW", and not "WHAT"...

CLICK on this link to reveal if this short test can help you release your true weight loss potential

Subscribe by:	RSS	Email
Follow me on:	Google+	Facebook	Twitter