Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > HTML5 template design cho Blog
HTML5 template design cho Blog
Nguyễn Trung Hiếu
Share Code Web Company 2013

HTML5 template design cho Blog

Bài viết này lấy nguồn từ 9lessions được dịch và trình bày cho dễ hiểu hơn một chút. Giúp cho các bạn có thể học làm quen với cách thiết kế template HTML5 cơ bản nhất.

DOCTYPE

Thành phần này có thể là quan trọng nhất, nó giúp cho trình duyệt của bạn hiểu được bạn đang dùng version nào của phiên bản HTML

1.<!DOCTYPE html>

Trong HTML5 thì bỏ thuộc tính Type. Khi đó những thẻ như sau sẽ được rút ngắn lại

1.<meta http-equiv=”Content-Type” content="text/html";>
2.thành
3.<meta charset=”UTF-8”>
4. 
5.<link rel=”stylesheet” href=”style.css” type=”text/css”>
6.thành
7.<link rel=”stylesheet” href=”style.css”>

Bạn cũng nên tránh theo những thẻ hay thuộc tính trong HTML5 như

1.<font>, <center>,<frame> align, bgcolor, height, width, size, type

Okie, bắt đầu nhé

Bước 1 – Thiết kế khung website

Layout của website của chúng ta sẽ được thiết kế thành các thành phần như Hearder, Nav, Section and Footer.

1.<header class='container'>1 Header</header>
2.<nav class='container'>2 Nav</nav>
3.<section class='container'>3 Main</section>
4.<footer class='container'>4 Footer</footer>

HTML5 template design for blog

CSS đầu tiên

01.*{margin:0px; padding:0px}
02.header, footer, section, nav
03.{
04.display:blocks
05.}
06..container
07.{
08.margin:0 auto;
09.width:950px;
10.margin-top:20px
11.}

Bước 2 – Làm việc với thẻ ul tạo thanh menu

01.<nav class='container' id='nav'>
02.<ul>
03.<li>HOME</li>
04.<li>PROJECT</li>
05.<li>TUTORIALS</li>
06.<li>FACEBOOK</li>
07.<li>JQUERY</li>
08.</ul>
09.</nav>

HTML5 template design for blog
Và CSS cho nó

01.#nav
02.{
03.overflow:auto;
04.}
05.#nav ul
06.{
07.list-style:none;
08.height:30px;
09.padding:0px;
10.margin:0px;
11.}
12.#nav ul li
13.{
14.float:left;
15.margin:10px;
16.}

Bước 3 – Phần content

Section Main của chúng ta sẽ được chia làm 2 thành phần, một bên chứa Article, và một bên là sidebar

1.<section class='container'>
2.<section id="content">Article</section>
3.<aside id='sidebar'>Sidebar</aside>
4.</section>

HTML5 template design for blog

01.#main
02.{
03.overflow:auto;
04.}
05.#content
06.{
07.float:left;
08.width:600px;
09.}
10.#sidebar
11.{
12.float:right;
13.width:330px;
14.}

Article

Trong Section có id là Content kia, chúng ta lại tiếp tục chia ra các Article nhỏ hơn, gọi là các bài viết

01.<section id='content'>
02. 
03.<article>
04.<header>
05.<h1>Article Title</h1>
06.</header>
07.<p>
08.Article Description
09.</p>
10.</article>
11. 
12.</section>

HTML5 template design for blog
Như đã nói, phần homepage sẽ chứa nhiều Article khác nhau, sắp xếp theo dạng list giống như sharecodeweb.net đang dùng vậy,

01.<section id='content'>
02. 
03.<article>
04.<header>
05.<h2>Article Title 1</h2>
06.</header>
07.<p>
08.Article Short Description
09.</p>
10.</article>
11. 
12.<article>
13.<header>
14.<h2>Article Title 2</h2>
15.</header>
16.<p>
17.Article Short Description
18.</p>
19.</article>
20. 
21........
22. 
23.</section>

HTML5 template design for blog

Modernizr

Ngoài ra chúng ta cũng cần nhúng bộ thư viện hỗ trợ cực mạnh cho HTML5 CSS3 này vào nữa. Các bạn có thể download tại đây
HTML5 template design for blog

Hoàn thành

Cuối cùng, toàn bộ mã HTML của chúng ta sẽ nhìn như sau

01.<!DOCTYPE html>
02.<!--[if lt IE 7]>
03.<html class="no-js lt-ie9 lt-ie8 lt-ie7">
04.<![endif]-->
05.<!--[if IE 7]>
06.<html class="no-js lt-ie9 lt-ie8">
07.<![endif]-->
08.<!--[if IE 8]>
09.<html class="no-js lt-ie9">
10.<![endif]-->
11.<!--[if gt IE 8]><!-->
12.<html class="no-js">
13.<!--<![endif]-->
14.<head>
15.<title>Responsive Design with CSS</title>
16.//Meta tag for devices
17.<meta name="viewport" content="width=device-width">
18.<link rel="stylesheet" href="style.css"> //Style Sheet
19.<script src="modernizr.min.js"></script>
20.</head>
21.<body>
22.<header class='container' id='header'>
23.Logo Part
24.</header>
25. 
26.<nav class='container' id='nav'>
27.<ul>
28.<li><a href='#'>Home</a></li>
29.<li><a href='#'>DEMOS</a></li>
30.<li><a href='#'>PROJECT</a></li>
31......
32......
33.</ul>
34.</nav>
35. 
36.<section class='container' id='main'>
37.<section id='content'>
38.<article>
39.<header>
40.<h1>Article Title</h1>
41.</header>
42.<p>
43.Article Description
44.</p> 
45.</article>
46.</section>
47.  
48.<aside id='sidebar'>
49.</aside>
50.</section>
51. 
52.<footer class='container' id='footer'>
53.<p>
54.© 2009-2013 9lessons.info.
55.</p>
56.</footer>
57.<body>
58.</html>

Đoạn mã HTML này chạy tốt ngay cả trên những trình duyệt IE đời thấp. Chú ý nữa là bộ mã js bên trên không làm việc với các đoạn mã CSS dạng inline ngay trong HTML nhé.

01.*{margin:0px; padding:0px}
02.header, footer,section,nav{display:blocks}
03..container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
04.#main, #header, #nav
05.{
06.overflow:auto;
07.}
08.#content
09.{
10.float:left;
11.width:600px;
12.}
13.#sidebar
14.{
15.float:right;
16.width:330px;
17.}
18.#nav
19.{
20.overflow:auto;
21.}
22.#nav ul
23.{
24.list-style:none;
25.height:30px;
26.padding:0px;
27.margin:0px;
28.}
29.#nav ul li
30.{
31.float:left;
32.font-size:12px;
33.font-weight:bold;
34.}

Vậy là xong rồi đó, bạn có thể dựa vào khung này để thiết kế cho mình một template hợp lý và rất hiện đại nhé. Chúc bạn thành công.

Download code

Bạn có thể download bộ code hoàn chỉnh tại link dưới đây

Download codeDemo

Bài viết được chia sẻ bởi
Sharecodeweb.com

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 6.215 hits
%d bloggers like this: