Nội dung chính Khoa học máy tính 12 Chân trời bài F3: Tạo bảng và khung trong trang web HTML

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

BÀI F3: TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML

1. Tạo bảng

- Để trình bày nội dung dưới dạng bảng, HTML cung cấp:

+ Thẻ <table> để định nghĩa bảng.

+ Thẻ <tr> để định nghĩa hàng trong bảng.

+ Thẻ <th> để định nghĩa ô tiêu đề.

+ Thẻ <td> để định nghĩa các ô còn lại.

Ví dụ 1: Đoạn mã HTML sau tạo bảng trình bày các nội dung của Lịch sinh hoạt hằng tuần (Hình 1) được bổ sung thêm vào tệp portfolio.html đã được xây dựng ở Bài F2. Bảng gồm 4 cột và 3 hàng:

+ Hàng đầu tiên là hàng tiêu đề, trình bày các ngày trong tuần.

+ Hai hàng còn lại là nội dung công việc trong buổi sáng và buổi chiều.

Hình 1. Lịch sinh hoạt hằng tuần được trình bày dưới dạng bảng

Trong đoạn mã HTML trên:

+ Bảng được tạo bắt đầu từ thẻ <table> và kết thúc bằng thẻ </table>. 

+ Cặp thẻ <tr></tr> dùng để tạo các hàng.

+ Cặp thẻ <th></th> dùng để tạo các ô tiêu đề.

+ Cặp thẻ <td></td> dùng để tạo các ô còn lại. 

+ Thuộc tính border được dùng để định dạng đường viền của bảng.

- Một số thuộc tính định dạng dùng cho bảng được liệt kê trong Bảng 1 như sau:

Bảng 1. Một số thuộc tính định dạng bảng

- Bảng giúp tạo bố cục cho trang web, trong đó mỗi ô của bảng sẽ chứa các thành phần khác nhau của trang web.

Ví dụ 2: Đoạn mã HTML sau tạo bố cục cho một trang web đơn giản gồm tiêu đề trang, nội dung chính chia thành 2 cột và phần cuối trang (Hình 2).

Hình 2. Bố cục trang web bằng cách sử dụng bảng

Giá trị phần trăm của thuộc tính width dùng để chỉ định độ rộng của một phần tử dưới dạng tỉ lệ so với phần tử chứa nó:

+ width="100%" trong thẻ <table> (1) sẽ làm cho độ rộng của bảng bằng với độ rộng của trình duyệt, ngay cả khi tăng hoặc giảm độ rộng của trình duyệt.

+ width="30%" và width="70%" trong thẻ <td> (2) sẽ làm cho độ rộng của hai ô chứa Nội dung A và Nội dung B lần lượt là 30% và 70% so với độ rộng của toàn bảng.

2. Tạo khung

- HTML sử dụng thẻ <iframe> để nhúng một trang web khác vào trong trang web hiện tại.

- Cú pháp thẻ <iframe>:

Trong đó:

+ Thuộc tính src chỉ định địa đường dẫn của trang web hoặc đối tượng được nhúng vào.

+ Thuộc tính width và height chỉ định kích thước của khung.

Ví dụ 3: Đoạn mã HTML sau tạo khung để nhúng trang web chantroisangtao.vn vào mục Những trang web thường ghé thăm trong tệp portfolio.html (Hình 3).

Hình 3. Trang web được nhúng vào bằng thẻ <iframe>

Trong đoạn mã HTML trên:

+ Thuộc tính src chỉ định địa chỉ của trang web chantroisangtao.vn.

+ Thuộc tính width chỉ định độ rộng của trang web nhúng vào bằng 80% độ rộng cửa sổ hiển thị trang web.

+ Thuộc tính height chỉ định chiều cao của khung là 500 pixels.

3. Thực hành