Layout trong HTML, tạo bố cụ trang web

Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về phần tử head trong HTML, bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về layout trong HTML.

Layout là một phần trong thiết kế đồ họa liên quan đến việc sắp xếp các yếu tố trực quan hiển thị trên trang web. Về cơ bản layout được sử dụng để thiết lập giao diện tổng thể và mối quan hệ giữa các yếu tố đồ họa, làm cho trang web trở nên bắt mắt hơn.

layout trong html hoc html

Tự học Layout trong HTML

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết về Layout trong HTML.

1. Các phần tử layout trong HTML

HTML bao gồm một số thẻ có ngữ nghĩa (semantic element) xác định các phần khác nhau của trang web:

- Thẻ header: xác định tiêu đề cho tài liệu hoặc một phần trong tài liệu.

- Thẻ nav: xác định phần tử chứa các liên kết điều hướng.

- Thẻ section: xác định một phần trong tài liệu.

- Thẻ article: xác định một bài viết.

- Thẻ aside : xác định các nội dung bên ngoài (chẳng hạn như thanh sidebar).

- Thẻ footer: xác định footer cho tài liệu hoặc một phần của tài liệu.

- Thẻ details: xác định phần chi tiết bổ sung.

- Thẻ summary: xác định phần tiêu đề cho phần tử details.

2. Multicolumn layout trong HTML

Có 5 cách để tạo multicolumn layout trong HTML. Mỗi một cách sẽ có các ưu, nhược điểm riêng:

- Bảng (table) trong HTML.

- Thuộc tính float trong CSS.

- CSS flexbox.

- CSS framework.

- CSS grid.

2.1 Lựa chọn cách nào để tạo multicolumn layout trong HTML?

- Bảng (table) trong HTML:

Phần tử table trong HTML được thiết kế để hiển thị dữ liệu bảng. Vì vậy tốt nhất chúng ta không nên sử dụng phần tử này để tạo layout.

- CSS Framework:

Nếu tạo một layout nhanh chóng và đơn giản, chúng ta có thể sử dụng framework.

- CSS Float:

Thông thường để tạo layout cho toàn bộ trang web, chúng ta sẽ sử dụng thuộc tính CSS float.

Ví dụ 1: dưới đây là ví dụ sử dụng CSS float để tạo layout trong HTML:

layout trong html

- CSS Flexbox:

Flexbox là chế độ layout mới trong CSS3.

Sử dụng flexbox để đảm bảo layout hiển thị đúng cách trên các kích thước màn hình thiết bị khác nhau. Tuy nhiên nhược điểm của flexbox là không hoạt động trên IE10 và các phiên bản trước đó.

Ví dụ 2: dưới đây là ví dụ sử dụng CSS flexbox để tạo layout trong HTML:

layout trong html 2

- CSS Grid View:

Module CSS Grid Layout cung cấp một loạt layout dựa trên lưới, giúp cho việc thiết kế trang web trở nên dễ dàng hơn. Tuy nhiên nhược điểm lớn nhất của CSS Grid View là không hỗ trợ IE15 và các phiên bản trước đó.

Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về layout trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

https://thuthuat.taimienphi.vn/layout-trong-html-50801n.aspx
Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Responsive Web Design trong HTML.

Tác giả: Ngọc Link     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

URL trong HTML là gì? cấu trúc như thế nào?
Mẹo hay tùy chỉnh bàn phím máy tính laptop Win 10, 8,7
Cài và sử dụng Cartoon Maker tạo tranh biếm họa
Hướng dẫn cắt Video trực tiếp trong Windows Movie Maker
Google công bố một số tính năng mới sẽ đến với Google Meet
Từ khoá liên quan:

Layout trong HTML

, HTML, phần tử head trong HTML,

SOFT LIÊN QUAN
  • Website Layout Maker

    Thiết kế layout cho website

    Website Layout Maker là công cụ chuyên dụng để tạo layout cho một trang web. Chương trình cũng cung cấp các tính năng chỉnh sửa trang web hữu ích dành cho người dùng.

Tin Mới

  • Danh sách (list) trong HTML

    Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong

  • Thẻ img trong HTML

    Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới

  • Thuộc tính class trong HTML, cách sử dụng

    Thuộc tính class trong HTML được sử dụng để chỉ định một hoặc nhiều tên lớp cho phần tử HTML. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết thuộc tính class trong

  • Điểm mới trong IDM 6.35 Build 9

    Phần mềm IDM (Internet Download Manager) là một công cụ để tăng tốc, phục hồi, và lên lịch cho các bản tải xuống, được tích hợp trong Internet Explorer, Chrome, Opera, Firefox, Avant Browser, ..... Vậy, IDM 6.35 Build 9 có gì mới? Hãy cùng tìm hiểu trong bài viết dưới đây của Taimienphi.vn nhé!


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá