Bài 20: Bố Cục Trang Web Trong HTML - Tìm ở đây
Có thể bạn quan tâm
Bố cục (layout) của website rất quan trọng, nó quyết định việc bố trí các thành phần trên trang có hợp lý và chuyên nghiệp hay không. Các Website thường hiển thị nội dung theo nhiều cột (giống như một tạp trí hoặc một tờ báo)
Các thành phố lớn ở Việt Nam Hà Nội Đà Nẵng Hồ Chí Minh Hà NộiHà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.
Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.
Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.
Copyright © timoday.edu.vnTạo bố cục với thẻ <div>
Thẻ <div> thường được sử dụng để tạo bố cục cho trang web vì nó có thể dễ dàng đặt vị trí với CSS. |
Ví dụ dưới đây sử dụng bốn thẻ <div> để tạo bố cục nhiều cột:
Ví dụ 1
<body>
<div id=“header”> <h1>Các thành phố lớn ở Việt Nam</h1> </div>
<div id=“nav”> Hà Nội<br> Đà Nẵng<br> Hồ Chí Minh </div>
<div id=“section”> <h1>Hà Nội</h1> <p>Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.</p> <p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p> <p>Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.</p> </div>
<div id=“footer”> Copyright © timoday.edu.vn </div>
</body>
Ví dụ 1 tạo bố cục trang web
CSS đi kèm:
<style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style>Thiết kết bố cục sử dụng HTML5
HTML5 cung cấp một số phần tử mới cho định nghã các phần khác nhau của một trang web:
|
Đây là ví dụ sử dụng <header>, <nav>, <section>, và <footer> để tạo một bố cục nhiều cột:
Ví dụ
<body>
<header> <h1>Các thành phố lớn ở Việt Nam</h1> </header>
<nav> Hà Nội<br> Đà Nẵng<br> Hồ Chí Minh </nav>
<section> <h1>Hà Nội</h1> <p>Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.</p> <p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p> <p>Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.</p> </section>
<footer> Copyright © timoday.edu.vn </footer>
</body>
Ví dụ 2 tạo bố cục trang web
CSS đi kèm:
<style> header { background-color:black; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style>Tạo bố cục sử dụng thẻ <table>
Thẻ <table> không được thiết kế để bố trí bố cục. Mục đích của thẻ <table> là hiển thị dữ liệu theo dạng bảng. |
Bố cục trang web có thể đạt được kết quả với việc sử dụng thẻ <table>, vì các thẻ <table> có thể được định kiểu với CSS:
Ví dụ
<body>
<table class=“lamp”> <tr> <th> <img src=“/images/lamp.jpg” alt=“Note” style=“height:32px;width:32px”> </th> <td> Phần tử table không được thiết kế để tạo bố cục cho trang web. </td> </tr> </table>
</body>
Ví dụ 3 tạo bố cục với table
CSS đi kèm:
<style> table.lamp { width:100%; border:1px solid #d4d4d4; } table.lamp th, td { padding:10px; } table.lamp th { width:40px; } </style>Cảnh báo: Tạo bố cục bằng thẻ <table> không sai, nhưng nó không được khuyến khích! Vì vậy nên tránh thẻ <table> để tạo bố cục cho website. |
Từ khóa » Bố Cục Html
-
[HTML/HTML5] Phần 24: Bố Cục Trang Web HTML Cơ Bản - DAMMIO
-
HTML - Bố Cục - Tự Học Tin - Tin Học Cho Người Việt
-
[Tự Học CSS] Tìm Hiểu Layout - Bố Cục Một Trang Web đơn Giản Với ...
-
Thiết Kế Layout - Bố Cục Website Trong CSS
-
Chia Bố Cục Web Html - Tạo Website Layout Cơ Bản - In4tintuc
-
Chia Bố Cục Web Html - Tạo Website Layout Cơ Bản
-
Bố Cục Website Là Gì - Tiêu Chuẩn đánh Giá Bố Cục Trang Web đẹp
-
Bố Cục Trang HTML - TEDU
-
Layout - Cách Thiết Kế Bố Cục Cho Trang Web Trong HTML
-
[Thực Hành] Tạo Bố Cục Cơ Bản
-
Thiết Kế Trang Web Bố Cục (layout) Tùy Biến Theo Từng Thiết Bị Màn ...
-
Tạo Bổ Cục Layout HTML đơn Giản
-
Kỹ Thuật Css Grid, Chia Bố Cục Trang Html Chưa Bao Giờ đơn Giản đến ...
-
Bố Cục Website Và Cách Thiết Kế Layout Website Hiệu Quả [2022] - Bizfly
-
Sử Dụng Layout Trong HTML | Lê Vũ Nguyên Dạy Học Lập Trình
-
Các Loại Bố Cục Website Chuẩn SEO đẹp Trong Thiết Kế Website 2022