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>

Mã 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.
}
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>
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>
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>
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>
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 và CSS3 này vào nữa. Các bạn có thể download tại đây
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
Bài viết được chia sẻ bởi
Sharecodeweb.com
You must log in to post a comment.