Tự tạo một giao diện chuẩn HTML5
Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt đầu phanh phui nó nhé.
Nếu bạn tham khảo một số website được viết bằng HTML5 thì các bạn sẽ thấy các thẻ như header, nav, section, footer, ... Tất cả những thẻ này nguyên bản HTML không tồn tại, chỉ có HTML5 mới có những thẻ này. Để dễ hình dung ta đi vào xem một ví dụ nhé:
Cấu Trúc Template HTML5
Các bạn xem ví dụ dưới đây:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!doctype html> < html lang = "vi" > < head > < meta charset = "utf-8" /> < title >Chương Trình HTML Đầu Tiên</ title > </ head > < body > < header > < h1 >HTML5 Cho Người Mới Bắt Đầu Tại Dancongnghe.com</ h1 > </ header > < nav > < ul > < li >< a href = "#" >Home</ a ></ li > < li >< a href = "#" >Serie</ a ></ li > < li >< a href = "#" >Tutorial</ a ></ li > < li >< a href = "#" >Ebook</ a ></ li > </ ul > </ nav > < section > Nội dung trang web </ section > < aside > < h3 >Tuts HTML</ h3 > Học Lập Trình HTML5 </ aside > < footer > Copyright 2014 By Dancongnghe.com </ footer > </ body > </ html > |
Bạn xem xét dòng đầu tiên
<!doctype html>
, đây là một khai báo bắt buộc nếu một template được xây dựng bằng HTML5. Tiêp theo là phần <html lang="vi">
, các bạn cũng nên đặt lang vào thẻ html cho rõ ràng.
Phần
head
dưới đây thì khỏi bàn cãi rồi nhỉ? Không phải là chỉ HTML5 mới có :D
1
2
3
4
| < head > < meta charset = "utf-8" /> < title >Chương Trình HTML Đầu Tiên</ title > </ head > |
body
là quan trọng nhất, ở phần body tôi có sử dụng các thẻ sau:
Thẻ
header
dùng để chứa nguyên phần header website của bạn. Nếu lúc trước bạn dùng thẻ div thì với HTMl5 bạn sẽ dùng thẻ này để thay thế.
1
2
3
| < header > < h1 >HTML5 Cho Người Mới Bắt Đầu Tại Dancongnghe.com</ h1 > </ header > |
Nav
, thẻ này thường dùng để chứa những phần navigation như menu.
1
2
3
4
5
6
7
8
| < nav > < ul > < li >< a href = "#" >Home</ a ></ li > < li >< a href = "#" >Serie</ a ></ li > < li >< a href = "#" >Tutorial</ a ></ li > < li >< a href = "#" >Ebook</ a ></ li > </ ul > </ nav > |
section
là thẻ dùng để chứa nội dung chính của website. Nếu bạn không dùng HTMl5 thì bạn hay dùng thẻ div với id là content để bao quan nó đấy
1
2
3
| < section > Nội dung trang web </ section > |
aside
, thẻ này thường dùng để chứa khung sidebar như left-sidebar, right-sidebar.
1
2
3
4
| < aside > < h3 >Tuts HTML</ h3 > Học Lập Trình HTML5 </ aside > |
footer
, thay vì khai báo một cái div và định dạng thì ta dùng thẻ footer để bao quanh lại.
1
2
3
| < footer > Copyright 2015 By Dancongnghe.com </ footer > |
Bạn thấy đó nếu ta dùng những thẻ theo chuẩn HTML5 này thì nhìn vào website ta khỏi cần comment phần nào là header, phần nào là footer phải không nào? Rất trực quan và dễ cập nhật.
Lời Kết
Đơn giản phải không nào? Qua bài này mình muốn giới thiệu cho các bạn một cấu trúc template chuẩn theo html5, trong bài này dùng mới được vài thẻ thông dụng nhưng cũng rất là trực quan. Ở những bài tiếp theo ta sẽ tìm hiểu thêm nhiều thẻ tags mới trong html nữa. Các bạn đón chờ nhé
Tự tạo một giao diện chuẩn HTML5
Reviewed by Unknown
on
05:50
Rating:
Không có nhận xét nào: