Chào mừng các bạn đã trở lại với Series bài giảng HTML & CSS căn bản!
Ở các bài giảng trước, chúng ta đã tìm hiểu về cú pháp của HTML, cụ thể là cấu tạo của 1 văn bản HTML cũng như cấu tạo (các thành phần chính) của 1 phần tử HTML (HTML Element). Trong bài giảng này, chúng ta sẽ tìm hiểu về bố cục của 1 trang/văn bản HTML thường được sử dụng ở hầu hết các website hiện nay, cũng như cách xây dựng 1 trang HTML đơn giản sử dụng bố cục này.
TÓM TẮT NỘI DUNG
Bố cục của 1 trang/văn bản HTML
Bố cục của 1 trang/văn bản HTML sẽ bao gồm 2 loại bố cục liên quan, bao gồm bố cục phần tử HTML và bố cục nội dung HTML.
Bố cục phần tử HTML là gì?
Bố cục phần tử HTML là cách sắp xếp các phần tử HTML theo một trật tự nhất định. Bố cục này chỉ có thể xem ở chế độ view source của trình duyệt web, hoặc trên file soạn thảo của các lập trình viên.
Bố cục nội dung HTML là gì?
Bố cục nội dung HTML là nội dung mà cả lập trình viên viết nên văn bản HTML đó, cũng như người dùng thông thường đều có thể thấy được bằng mắt thường. Bố cục nội dung có thể xem ở chế độ render (mặc định) của trình duyệt web.
Bố cục phần tử HTML
Mặc dù trong thực tế, số lượng phần tử tồn tại trong 1 văn bản HTML là rất nhiều, nhưng về cơ bản bố cục phần tử HTML thường được sử dụng khá đơn giản, tuân theo 4 số quy tắc chung, và mình sẽ tóm tắt như sau:
Quy tắc 1: Tất cả các phần tử con của văn bản HTML đều nằm gọn trong phần tử cha duy nhất, đó chính là phần tử thẻ <html></html>.
Ví dụ mô phỏng:
| Mẫu code | Thông tin về thẻ được sử dụng trong ví dụ |
<html>.....</html> |
<html></html> là một loại thẻ thường được dùng để chứa hoặc bao lấy tất cả các phần tử HTML trong một trang (văn bản) HTML. Tra cứu thêm tại đây. |
Quy tắc 2: Ngay bên trong phần tử thẻ <html></html> sẽ luôn tồn tại ít nhất 2 phần tử con, bao gồm 1 phần tử thẻ <head></head> và 1 phần tử thẻ <body><body>.
Ví dụ mô phỏng:
| Mẫu code | Thông tin về thẻ được sử dụng trong ví dụ |
<html> <head> ... </head> <body> ... </body></html> |
<head></head> là một loại thẻ thường được dùng để chứa các phần tử liên quan đến Metadata của trang (văn bản) HTML đó, cũng như các phần tử dùng để liên kết với các tập tin CSS, Javascript và một số phần tử đặc biệt khác. Tra cứu thêm tại đây.
Tip: Phần tử Meta trong HTML là gì? Phần tử Meta trong HTML là những phần tử chứa các thông tin cần phải khai báo (Metadata) theo yêu cầu của trình duyệt hoặc để phục vụ cho các Bot (1 dạng phần mềm tự động). |
Quy tắc 3: Bên trong phần tử thẻ <head></head> sẽ luôn chứa các phần tử Meta (Ví dụ phần tử thẻ <title></title>, phần tử thẻ <meta/>) và các phần tử dùng để kết nối với các tập tin bên ngoài thuộc ngôn ngữ CSS, Javascript.
Ví dụ mô phỏng:
| Mẫu code | Thông tin về thẻ được sử dụng trong ví dụ |
<head> <title>Bố cục của 1 trang (văn bản) HTML</title> <meta name="description" content="Tìm hiểu chi tiết về bố cục của 1 trang (văn bản) HTML"/></head> |
<title></title> là một loại thẻ Meta, được dùng để chứa thông tin tiêu đề của trang. Nội dung bên trong thẻ này phải ở dạng text thuần tuý, và khi ở chế độ render, nội dung này sẽ nằm trên thanh tab của trình duyệt web. Tra cứu thêm tại đây.
|
Quy tắc 4: Bên trong phần tử thẻ <body></body> sẽ luôn chứa tất cả các phần tử dùng để xây dựng bố cục nội dung văn bản HTML như các heading, đoạn văn, hình ảnh, liên kết…
| Mẫu code | Thông tin về thẻ được sử dụng trong ví dụ |
<body> <h1>Bố cục của 1 trang (văn bản) HTML</h1> <p>Trang này sẽ hướng dẫn bạn về bố cục của 1 trang (văn bản) HTML, cũng như cách xây dựng một trang HTML với đầy đủ các thành phần cơ bản</p></body> |
<h1></h1> là một trong các loại thẻ Heading, chứa dòng nội dung quan trọng nhất của trang (thông thường là tiêu đề). Tra cứu thêm tại đây.
|
Kết hợp 4 quy tắc trên, ta sẽ có một đoạn mã HTML như sau:
| Mẫu code | Ghi chú |
<html> <head> <body> <h1>Bố cục của 1 trang (văn bản) HTML</h1> <p>Trang này sẽ hướng dẫn bạn về bố cục của 1 trang (văn bản) HTML, cũng như cách xây dựng một trang HTML với đầy đủ các thành phần cơ bản</p> </body></html> |
Khi kết hợp 4 quy tắc trên, ta có một mẫu bố cục phần tử HTML được sử dụng gần như ở hầu hết các website từ nhỏ đến lớn hiện nay. |
Bố cục nội dung
Trong thực tế, tuỳ theo chủ đề của mỗi website, hay mỗi trang HTML mà bố cục nội dung của một trang (văn bản) HTML có thể khác nhau, nhưng nhìn chung, tất cả đều có những thành phần chính sau đây:
| Thanh Menu (hoặc còn được gọi là thanh Navbar, thanh Navigation, thanh điều hướng…) | Là khu vực chứa các liên kết giúp người dùng có thể nhanh chóng chuyển sang các trang khác, hay trượt xuống mục nội dung mà mình đang muốn xem. |
| Khu vực nội dung chính | Là khu vực chứa những nội dung chính của trang, xoay quanh chủ đề mà trang muốn bàn luận (giới thiệu sản phẩm, dịch vụ, bài viết tin tức, tuyển dụng….).
Tuỳ chủ đề mà mỗi trang hướng đến mà bố cục bên trong khu vực nội dung chính sẽ khác nhau, nhưng chúng hầu như đều có điểm chung sau đây:
|
| Footer (thường được gọi là chân trang) | Là khu vực chứa các thông tin liên quan đến chủ sở hữu của website (cá nhân, tổ chức, doanh nghiệp…) và một số liên kết đến những trang khác. |
Như vậy là chúng ta đã vừa tìm hiểu xong bố cục, các thành phần chính và những quy tắc liên quan đến bố cục của một trang (văn bản) HTML. Nếu có những điểm nào mình làm chưa rõ, hãy để lại bình luận bên dưới nhé! Trong bài giảng kế tiếp, hoccode.org sẽ đưa vào nội dung thực hành để bạn có thể áp dụng các kiến thức của bài giảng trước.
Chúc bạn có một ngày học tập & làm việc hiệu quả!
>> Tham Khảo : Xây dựng một trang (văn bản) HTML đơn giản | Series HTML & CSS căn bản | Bài 5
