[HTML/HTML5] Phần 24: Bố cục trang web HTML dammio.com/2017/09/29/htmlhtml5-phan-24-bo-cuc-trang-web-html-co-ban dammio 29/09/2017 lúc 22:28:13 Để xây dựng giao diện trang HTML, trước hết bạn phải xem xét bố cục trang web hợp lý, tiếp đến trang web chứa thành phần gì, nội dung gì, phong cách sao,… Bài viết tập trung vào bố cục Như vậy, nói bố cục trang web đa dạng, tùy theo mắt thẩm mỹ người thiết kế nhu cầu web masters phù hợp với nội dung, chủ đề website đánh giá người dùng Do người dùng sử dụng điện thoại di động để lướt web trở nên phổ biến, theo xu hướng thiết kế web, bạn phải thiết kế giao diện đáp ứng (responsive) Thông thường, người ta sử dụng Bootstrap để thiết kế web đáp ứng, website dammio.com dùng Bootstrap Bạn tham khảo series Bootstrap Bootstrap Bố cục thông thường Một số thành phần thông thường mà tất website có là: header: header phần trang web, chứa logo trang web, banner ngang, menu phụ thơng tin, tìm kiếm, ngày tháng, thời tiết,… navigation: điều hướng (hay menu chính), ngang, chứa mục (thể loại chính) trang web Phần menu quan trọng giúp người dùng chế tìm kiếm định hình hiểu rõ cấu trúc website bạn content: chứa nội dung website sidebar: bên, chứa phần liên quan đến nội dung menu phụ, viết liên quan, quảng cáo,… Một số website có bên, bên tùy theo bố cục footer: phần chân (đáy) trang, chứa thơng tin trang web tình trạng quyền Ngồi cịn nhiều thành phần khác, bạn tự học thông qua kinh nghiệm thực tế thiết kế làm việc với dự án web Bố cục HTML5 Người ta có xu hướng phổ biến làm giao diện HTML5 HTML5 có chứa thẻ ngữ nghĩa, giúp chế tìm kiếm hiểu sát cấu trúc website Các thẻ HTML dùng 1/5 để xây dựng bố cục gồm: thẻ header: định nghĩa phần đầu trang web thẻ nav: điều hướng (menu) thẻ section: định nghĩa phần website thẻ article: định nghĩa nội dung viết độc lập thẻ aside: định nghĩa phần bên cạnh nội dung (như sidebar-thanh bên) thẻ footer: định nghĩa đáy (chân) trang thẻ details: định nghĩa thông tin chi tiết thẻ summary: định nghĩa tiêu đề tóm tắt phần tử details Ví dụ, định nghĩa trang web HTML5 sau: 2/5 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 < html > < head > < style > div.container { width: 100%; border: 1px solid gray; } header, footer { padding: 1em; color: white; background-color: black; clear: left; text-align: center; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } < body > < div class = "container" > < header > < h1 >Dammio < nav > < ul > < li >< a href = "#" >Trang chủ < li >< a href = "#" >Lập trình web 3/5 35 < li >< a href = "#" >Thiết kế web 36 37 < article > 38 < h1 >Trang chủ 39 < p >Đây nội dung trang chủ trang web dammio.com Trang web www.dammio.com (có thể đọc đam-mi-o) thành lập thức ngày 40 tháng 10 năm 2016 khởi điểm domain WordPress miễn phí. 41 42 < footer >Copyright © 2016 dammio.com 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 Phương pháp lựa chọn để xây dựng bố cục Có nhiều phương pháp để bạn chọn lựa kết hợp để xây dựng bố cục HTML là: Sử dụng thẻ table: Bạn hồn tồn sử dụng thẻ table để xây dựng bố cục website, nhiên cách cũ kỹ có nhược điểm lớn khơng mềm dẻo việc sử dụng dịch chuyển vị trí bố cục sử dụng nhiều lớp bố cục chồng để tạo giao diện bắt mắt Website dammio.com không khuyến khích làm cách 4/5 Sử dụng CSS Framework: bạn dùng W3.CSS, Bootstrap, Foundation,… để xây dựng giao diện đáp ứng, hướng thịnh hành Sử dụng HTML5: xác cách bạn nên dùng để xây dựng, HTML5 cung cấp thẻ mang tính ngữ nghĩa làm cho website bạn Google hiểu rõ hơn, bên cạnh việc bắt lỗi form ổn với HTML5 Đối với website dammio.com, sử dụng phương pháp cuối trên, Bootstrap (thẻ div làm bố cục) + HTML5 Vì vậy, cách bạn nên áp dụng để đảm bảo trang web xu hướng, chạy tốt mang lại hiệu SEO cao 5/5 ... dựng bố cục gồm: thẻ header: định nghĩa phần đầu trang web thẻ nav: điều hướng (menu) thẻ section: định nghĩa phần website thẻ article: định nghĩa nội dung viết độc lập thẻ aside: định nghĩa phần. .. table để xây dựng bố cục website, nhiên cách cũ kỹ có nhược điểm lớn không mềm dẻo việc sử dụng dịch chuyển vị trí bố cục sử dụng nhiều lớp bố cục chồng để tạo giao diện bắt mắt Website dammio.com... 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 Phương pháp lựa chọn để xây dựng bố cục Có nhiều phương pháp để bạn chọn lựa kết hợp để xây dựng bố cục HTML