Đáp án Tin học ứng dụng 12 chân trời Bài F3: Tạo bảng và khung trong trang web với HTML

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

KHỞI ĐỘNG

Nêu ba nội dung khi trình bày ở dạng bảng sẽ phù hợp và trực quan hơn so với cách trình bày liệt kê theo đoạn văn.

Giải chi tiết:

Ba nội dung khi trình bày ở dạng bảng sẽ phù hợp và trực quan hơn so với cách trình bày liệt kê theo đoạn văn:

- Bảng thời gian biểu.

- Bảng so sánh.

- Bảng danh sách

KHÁM PHÁ

1. Tạo bảng

Làm

Em hãy bổ sung thêm cột nội dung công việc của các ngày còn lại cho Lịch sinh hoạt hằng tuần ở Ví dụ 1.

Giải chi tiết:

- Mã HTML:

- Kết quả hiển thị:

2. Tạo khung

Làm

Em hãy tạo thêm một khung để nhúng trang web www.learnpython.org vào trong mục Những trang web thường ghé thăm.

Giải chi tiết:

- Mã HTML:

- Kết quả hiển thị:

LUYỆN TẬP

Câu 1: . Chức năng của các thẻ và thuộc tính dùng để tạo bảng trong trang web là gì?

Giải chi tiết:

Các thẻ và thuộc tính dùng để tạo bảng trong trang web có chức năng như sau:

- <table>: Thẻ này được sử dụng để tạo ra một bảng.

- border: Thuộc tính này định rõ đường viền của bảng.

- cellspacing: Được sử dụng để thiết lập khoảng cách giữa các ô trong bảng.

- cellpadding: Thiết lập khoảng cách từ nội dung đến các đường viền của ô trong bảng.

- <td> và <th>: Thẻ <td> (table data) được sử dụng để tạo ra một ô dữ liệu, thẻ <th> (table header) được sử dụng cho tiêu đề của cột hoặc hàng.

- colspan và rowspan: Thuộc tính này cho phép một ô có thể mở rộng qua nhiều cột hoặc hàng.

- width và height: Được sử dụng để thiết lập chiều rộng và chiều cao của bảng, cột, hoặc hàng.

- bgcolor: Thiết lập màu nền cho bảng, cột, hoặc hàng.

- align: Dùng để căn chỉnh vị trí của bảng hoặc nội dung trong các ô.

Câu 2: Em hãy nêu chức năng của thẻ <iframe> và một số thuộc tính dùng để nhúng trang web khác vào trang web hiện tại.

Giải chi tiết:

Thẻ <iframe> trong HTML có chức năng nhúng một trang web hoặc tài liệu khác vào trang web hiện tại. Nó tạo ra một khung (frame) trong trang web, trong đó trình duyệt sẽ hiển thị một trang riêng biệt bao gồm cả thanh cuộn và viền.

Dưới đây là cách sử dụng thẻ <iframe> và một số thuộc tính liên quan:

- <iframe>: Thẻ này tạo khung để nhúng nội dung từ một trang web khác.

- src: Thuộc tính này xác định đường dẫn đến trang web hoặc tài liệu mà bạn muốn nhúng. Ví dụ: <iframe src="https://example.com"></iframe>.

- width và height: Thuộc tính này thiết lập chiều rộng và chiều cao của khung. Ví dụ: <iframe src="https://example.com" width="500" height="300"></iframe>.

VẬN DỤNG

Em hãy thực hiện các yêu cầu dưới đây.

Câu 1: Bổ sung những nội dung sau vào trang web portfolio.html:

a) Mục Lịch sinh hoạt hằng tuần với các thẻ tạo bảng đã học.

b) Mục Những trang web thường ghé thăm với các thẻ tạo khung và danh sách đã học.

Hình 6 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Giải chi tiết:

Để bổ sung nội dung vào trang web portfolio.html, chúng ta sẽ sử dụng các thẻ HTML liên quan. Dưới đây là cách thêm các phần đã yêu cầu:

- Lịch sinh hoạt hằng tuần:

+ Sử dụng thẻ <table> để tạo bảng.

+ Mỗi hàng trong bảng sẽ được xác định bằng thẻ <tr>.

+ Sử dụng thẻ <th> để xác định ô tiêu đề (đầu cột).

+ Sử dụng thẻ <td> để xác định ô dữ liệu (các hoạt động).

-----------------------------------

------------------- Còn tiếp -------------------