Giáo án 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

Hình 1

Hình 2

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

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

- GV phân tích Ví dụ 1 để HS hiểu về cấu trúc của đoạn mã HTML dùng để tạo bảng.

- GV tiếp tục đặt câu hỏi để các nhóm thảo luận:

+ Các thẻ dùng để tạo bảng có những thuộc tính gì?

+ Ngoài giúp trình bày văn bản khoa học hơn, bảng còn có chức năng nào khác nữa?

- GV phân tích Ví dụ 2 để HS hiểu về chức năng tạo bố cục cho trang web của bảng.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.83 SGK:

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.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.81 – 83 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

-  Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.83 SGK:

+ GV có thể đưa ra nội dung công việc của các ngày còn lại để HS thực hiện hoặc HS tự bổ sung nội dung theo thời khoá biểu của mình. Sau đó yêu cầu HS trình bày phương án hoặc cho HS lên máy GV thao tác để cả lớp quan sát kết quả.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

• Để 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.

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.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: 

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

+ Thẻ <iframe> có cú pháp như thế nào?

- GV giải thích cho HS hiểu về đoạn mã HTML trong Ví dụ 3.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.84 SGK:

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.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.83 – 84 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

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.

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. 

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.84 SGK:

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Nhiệm vụ 1. Tạo bảng trong trang web

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ 1 SGK tr.84 và thực hành cá nhân theo hướng dẫn.

Yêu cầu: Tạo trang web trình bày thời khoá biểu của lớp 12A như Hình 4.

Hình 4. Thời khoá biểu lớp 12A

Hướng dẫn:

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

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 1.

- Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS quan sát bài làm của các bạn khác, nhận xét nhau.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ 1 của HS.

- Nhiệm vụ 1 được gọi là hoàn thành khi HS tạo được thời khoá biểu theo yêu cầu.

………………..

Nhiệm vụ 1. Tạo bảng trong trang web

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

- Bước 2: HS tạo được 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: HS tạo được các hàng còn lại của bảng thời khoá biểu.

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

* Đoạn mã HTML hoàn chỉnh:

………………