Slide bài giảng 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

Tóm lược nội dung

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

A. KHỞI ĐỘNG

HS dựa vào hiểu biết để trả lời các câu hỏi.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

1. Tạo bảng

HTML cung cấp những thẻ nào để tạo bảng?

Nội dung ghi nhớ:

Để tạo bảng, em dùng thẻ <table> kết hợp với các thẻ <tr>, <th>, <td>.

Mỗi thẻ có một số thuộc tính dùng để định dạng màu sắc, kích thước,... cho bảng.

2. Tạo khung

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

Nội dung ghi nhớ:

Thẻ <iframe> được dùng để nhúng trang web khác vào trang web hiện tại. Thuộc tính src dùng để chỉ định đường dẫn của trang web cần nhúng, thuộc tính width và height dùng để chỉ định chiều rộng và chiều cao của khung.

THỰC HÀNH

Các bước tạo bảng trong trang web

Nội dung ghi nhớ:

+ Bước 1: Khởi động Visual Studio Code và tạo tệp tkb.html.

+ Bước 2: Nhập đoạn mã HTML sau để tạo nội dung cho các hàng từ tiết 1 đến tiết 3 trong bảng thời khoá biểu.

+ Bước 3: Bổ sung mã lệnh để tạo các hàng còn lại của bảng thời khoá biểu.

+ Bước 4: Nháy đúp chuột vào tệp tkb.html để mở trang web trong trình duyệt. Kiểm tra kết quả thực hiện.

Các bước tạo khung trong trang web

Nội dung ghi nhớ:

- Bước 1: HS tạo được tệp thanhvienlop.html.

- Bước 2: HS tạo được tệp kiyeu.html.

- Bước 3: HS sao chép hai tệp loptruong.html và loppho.html vào cùng thư mục chứa tệp thanhvienlop.html và tệp kiyeu.html.

- Bước 4: HS mở được trang web trong trình duyệt và kiểm tra kết quả thực hiện.

C. HOẠT ĐỘNG LUYỆN TẬP

GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.

Gợi ý đáp án:

A. Trắc nghiệm

Câu 1: D; Câu 2: B; Câu 3: C; Câu 4:D ; Câu 5:C

B. Đúng/sai

Câu 1. a. S;b. Đ;c. S;d. S

C. Tự luận 

Câu 1. 

- Các thẻ dùng để tạo bảng trong trang web:

+ 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.

- Một số thuộc tính của bảng:

Câu 2.

- Thẻ <iframe> được dùng để nhúng một trang web khác vào trong trang web hiện tại.

- Một số thuộc tính của thẻ <iframe>: 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.

D. HOẠT ĐỘNG VẬN DỤNG

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

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.