Đáp án Khoa học máy tính 12 chân trời Bài F2: Tạo và định dạng trang web với các thẻ HTML

Bài F2. TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML

KHỞI ĐỘNG

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>?

Giải chi tiết:

Trong Hình 1, mỗi dòng trên trang web được định nghĩa bằng các thẻ HTML sau:

- Danh sách tài liệu tham khảo: Có thể được định nghĩa bằng thẻ <h1> hoặc <h2>.

- Tài liệu thiết kế trang web và Tài liệu tin học văn phòng: Có thể sử dụng thẻ <h2> hoặc <p>.

- Tài liệu HTML, Tài liệu CSS, v.v.: Có thể được định nghĩa bằng thẻ <p>.

KHÁM PHÁ

1. Các thẻ định dạng cơ bản

Làm

Câu 1: Theo em, trong HTML có những thẻ nào dùng để định dạng để mục?

Giải chi tiết:

Các thẻ dùng để định dạng đề mục: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Câu 2: Cho mã lệnh: 

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

Giải chi tiết:

Nội dung được kết xuất trên trang web: 

2. Thẻ tạo liên kết

Làm

Câu 1: Thẻ <a> có thể tạo được liên kết đến những loại tài nguyên nào?

Giải chi tiết:

Thẻ <a> có thể tạo liên kết đến các loại tài nguyên sau:

- Trang web.

- Địa chỉ email.

- Đa phương tiện.

Câu 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?

Giải chi tiết:

Nếu thẻ <a> không được khai báo thuộc tính href, thì người dùng vẫn có thể nhấp chuột vào nội dung bên trong thẻ <a>. Tuy nhiên, nếu không có thuộc tính href, không có đích đến cụ thể được chỉ định, và khi người dùng nhấp vào liên kết, không có hành động chuyển hướng xảy ra. Thông thường, khi sử dụng thẻ <a>, thuộc tính href được khai báo để chỉ định đích đến của liên kết.

3. Thẻ tạo danh sách

Làm

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

Giải chi tiết:

Đáp án đúng: A và C.

Để tạo danh sách có thứ tự, em sử dụng thẻ <o1> và thẻ <li>.

LUYỆN TẬP

Câu 1: Tác dụng của các thẻ <h1>, <h2>,..., <h6> là gì?

Giải chi tiết:

Các thẻ <h1>, <h2>,..., <h6> là các thẻ dùng để định dạng đề mục.

Câu 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.

Giải chi tiết:

Để tạo siêu liên kết trong trang web, ta sử dụng thẻ <a>. Dưới đây là các bước để tạo siêu liên kết chuyển đến trang web trong cửa sổ khác:

Tạo thẻ <a>: Sử dụng cú pháp sau để tạo liên kết:

<a href="URL">nội dung đại diện cho liên kết</a>

Trong đó:

+ URL là đường dẫn đến trang web mà bạn muốn người dùng sẽ được chuyển đến.

+ nội dung đại diện cho liên kết có thể là văn bản hoặc hình ảnh.

Ví dụ: Để tạo liên kết đến Google:

<a href="https://www.google.com">Go to Google</a>

Câu 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ẻ <01></ol> thành <ul></ul> thì trang web hiển thị trong trình duyệt sẽ như

thế nào?

Giải chi tiết:

Nếu thay cặp thẻ <ul></ul> thành <ol></ol> và hai cặp thẻ <ol></ol> thành <ul></ul>, trang web hiển thị trong trình duyệt sẽ thay đổi như sau:

- Danh sách cha sẽ trở thành danh sách có thứ tự (số thứ tự).

- Danh sách con sẽ trở thành danh sách không có thứ tự (dấu đầu dòng).

Tóm lại, thay đổi này sẽ làm thay đổi kiểu hiển thị của danh sách, nhưng vẫn giữ nguyên cấu trúc lồng nhau.

VẬN DỤNG

Câu 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 ở  . Sau đó, tạo liên kết từ tên của mình trong trang web thanhvienlop.html đến trang web portfolio.html.

Giải chi tiết:

- Bổ sung thành viên lớp vào trang web thanvienlop.html:

- Tạo liên kết đến trang web portfolio.html:

Câu 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.

Giải chi tiết:

- Sở thích sử dụng thẻ <ul>, ví dụ:

- Các hoạt động đã tham gia sử dụng thẻ <ol>, ví dụ:

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