BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML<br/>(CTST

BÀI F2 - TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 106 sách ict, trang 73 sách cs)

Trong Hình 1, mỗi dòng trên trang web được định nghĩa bằng thẻ nào trong số các thẻ sau: <h1>, <h2>, <p>, <hr>?

Gợi ý trả lời

- Dòng tiêu đề lớn: dùng <h1>
- Dòng tiêu đề nhỏ hơn: dùng <h2>
- Dòng văn bản thông thường: dùng <p>
- Dòng kẻ ngang phân cách: dùng <hr>

(trang 108 sách ict, trang 75 sách cs)

1. Theo em, trong HTML có những thẻ nào dùng để định dạng để mục?
2. Cho mã lệnh:

Em hãy cho biết nội dung được kết xuất trên trang web.

Gợi ý trả lời

1. Các thẻ định dạng đề mục từ <h1> đến <h6>: tiêu đề từ lớn đến nhỏ.
2. Nội dung được kết xuất trên trang web là:

X² + Y² = 1

(trang 110 sách ict, trang 77 sách cs)

1. Thẻ <a> có thể tạo được liên kết đến những loại tài nguyên nào?
2. Nếu thẻ <a> không được khai báo thuộc tính href thì người dùng có thể nháy chuột vào nội dung bên trong thẻ <a> này không? Tại sao?

Gợi ý trả lời

1. Thẻ <a> có thể liên kết đến:
- Trang web khác (URL)
- Tệp tin (PDF, hình ảnh...)
- Địa chỉ email (mailto:)
- Vị trí trong cùng trang (liên kết neo)
- Trang khác trong cùng thư mục
2. Người dùng không thể nháy chuột như một liên kết thực sự. Vì khi thiếu href, thẻ <a> không có đích đến, nên không tạo được liên kết chức năng.

(trang 112 sách ict, trang 79 sách cs)

Chọn đáp án đúng cho câu hỏi dưới đây.
Thẻ nào được sử dụng để tạo danh sách có thứ tự?
A<li>. B. <h1>. C. <ol>. D. <p>.

Gợi ý trả lời

Chọn đáp án C. <ol>

(trang 112 sách ict, trang 79 sách cs)

1. Tác dụng của các thẻ <h1>, <h2>,..., <h6> là gì?
2. Em hãy trình bày các bước tạo siêu liên kết chuyển đến trang web trong cửa sổ khác.
3. Trong đoạn mã HTML ở Ví dụ 7, nếu thay cặp thẻ <ul></ul> thành <ol></ol> và hai cặp thẻ <ol></ol> thành <ul></ul> thì trang web hiển thị trong trình duyệt sẽ như thế nào?

Gợi ý trả lời

1. Là các thẻ tiêu đề, dùng để đánh dấu tiêu đề và phân cấp nội dung:
- <h1>: Tiêu đề lớn nhất.
- <h6>: Tiêu đề nhỏ nhất.
⇒ Giúp bố cục trang web rõ ràng và hỗ trợ SEO.
2. Các bước tạo siêu liên kết mở trang trong cửa sổ mới:
Sử dụng thuộc tính target="_blank":
<a href="https://example.com" target="_blank">Truy cập trang</a>
3. Kết quả hiển thị trên trình duyệt sẽ thay đổi như sau:
- Danh sách không thứ tự (<ul>) sẽ trở thành danh sách có thứ tự (<ol>): các dấu chấm đầu dòng sẽ được thay bằng số thứ tự (1., 2., 3.,…).
- Danh sách có thứ tự (<ol>) sẽ trở thành danh sách không thứ tự (<ul>): các số thứ tự sẽ được thay bằng dấu chấm hoặc ký hiệu khác tuỳ theo trình duyệt.

(trang 113 sách ict, trang 80 sách cs)

1. Em hãy bổ sung tên các bạn trong lớp vào ngay sau phần Thành viên lớp của trang web thanhvienlop.html ở THỰC HÀNH. Sau đó, tạo liên kết từ tên của mình trong trang web thanhvienlop.html đến trang web portfolio.html.
2. Em hãy bổ sung Sở thích và Các hoạt động đã tham gia cho trang web portfolio.html, sử dụng các thẻ tạo danh sách và các thẻ định dạng văn bản đơn giản đã học. Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.