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ó 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.
Các bạn tham khảo đoạn html sau :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!doctype html><head><meta charset="utf-8"><title>Trang web HTML5 đầu tiên</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="#">Trang chủ</a></li><li><a rel="external" href="#">Về tôi</a></li><li><a rel="external" href="#">Liên hệ</a></li></ul></nav></header><div id="core"><section id="left"><p>Nội dung ở đây</p></section><section id="right"><p>Nhưng tốt hơn là ở đây</p></section></div><footer><p>Đây làcopyright và một số thông tin khác ...</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 :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| 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 {width: 550px;float: left;margin: 0 15px;}section#right {float: left;width: 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. Tiếp theo Blog Designer 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.
Blog Designer
Hãy cho đi rồi sẽ nhận lại nhiều hơn thế
Đã có nhiều lúc tôi không biết mình sẽ làm được gì ??? Nhưng hãy cứ tin vào chính bản thân mình, tin vào mọi người và đừng để con tim bạn lạc lối. Bạn và tôi sẽ tìm ra được đâu là đích đến để mình biết đường đi.Nếu bạn cần một người bạn, đừng ngại kết bạn với tôi.
Thư Viện Đồ Họa: www.izdesigner.com
Kết nối với tôi: