Câu hỏi mở đầu trang 46

Đề bài: Cho hai đoạn văn bản như Hình 8.1. Cách định dạng đoạn văn bản nào đẹp hơn? Tại sao?

Lời giải:

Cách định dạng b) đẹp hơn. Vì:

• Tiêu đề “Vội vàng” được in đậm, tách biệt với phần nội dung → dễ nhận biết đâu là tiêu đề.
• Mỗi câu thơ được xuống dòng riêng → đúng cấu trúc thơ, dễ đọc, dễ theo dõi.
• Cách trình bày a) viết liền các câu thơ thành một khối chữ khó nhìn, không đúng cấu trúc bài thơ.

1. Thuộc tính thẻ

Hoạt động 1 trang 46

Đề bài: Hãy quan sát các thẻ trong tệp newpage.html ở Hoạt động 2, Bài 7. Trong các thẻ đó có một thẻ có thêm thuộc tính. Theo em đó là thẻ nào? Em hãy đưa ra dự đoán về tác dụng của các thuộc tính thẻ.

Lời giải:

• Thẻ có thêm thuộc tính là thẻ <meta> với thuộc tính charset="utf-8".
• Dự đoán tác dụng của thuộc tính thẻ: bổ sung thông tin cho thẻ, làm rõ cách xử lí nội dung thẻ. Ở ví dụ trên, thuộc tính charset="utf-8" cho biết trang web sử dụng mã hoá kí tự UTF-8 để hiển thị được tiếng Việt và các kí tự đặc biệt.

Câu hỏi củng cố mục 1 trang 47

Đề bài: Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7.

Lời giải:

2. Các thẻ định dạng trình bày văn bản

Hoạt động 2 trang 47

Đề bài: Thảo luận: Khi trình bày một văn bản (bài thơ, đoạn văn, trang web,…) có thể có những thành phần nào? Hãy kể tên các thành phần đó.

Lời giải:

Một văn bản khi trình bày có thể gồm các thành phần:

• Tiêu đề (tiêu đề chính, tiêu đề phụ, các mức tiêu đề khác nhau).
• Đoạn văn bản (paragraph).
• Đường kẻ ngang phân tách các phần.
• Hình ảnh, bảng, danh sách.
• Các khối văn bản (khung chứa nội dung).
• Các định dạng chữ: in đậm, in nghiêng, gạch chân, đánh dấu, chỉ số trên/dưới,…
• Định dạng phông chữ: kiểu chữ, cỡ chữ, màu sắc.

Câu hỏi củng cố mục 2 trang 48

Đề bài:

1. Trình duyệt hiển thị đoạn mã HTML sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?

<p> Thẻ p tạo đoạn nội dung, </p><p>thẻ div tạo khối chứa dữ liệu. </p><p> Các thẻ này <br> không có hình thức trình bày riêng </p><p> mà được định dạng </p><p> bằng thuộc tính style. </p>

Lời giải:

Đoạn mã trên hiển thị thành 6 dòng:

1. Thẻ p tạo đoạn nội dung,
2. thẻ div tạo khối chứa dữ liệu.
3. Các thẻ này
4. không có hình thức trình bày riêng
5. mà được định dạng
6. bằng thuộc tính style.

Nhận xét về khoảng cách:

• Có 5 cặp thẻ <p>...</p> tạo ra 5 đoạn, mỗi đoạn có khoảng trống rõ ràng trước và sau đoạn.
• Bên trong đoạn thứ 3 có thẻ <br> giúp xuống dòng nhưng không tạo khoảng trống → dòng 3 và dòng 4 sát nhau hơn so với khoảng giữa các đoạn.

2. Chỉnh sửa đoạn mã HTML trong Ví dụ 1 để hiển thị thêm một đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung phía dưới.

Lời giải:

Chỉ cần thêm thẻ đơn <hr> sau thẻ <h1>:

<h1>Tin học 12</h1>
<hr>
<h2>Phần chung</h2>
<h3>Chủ đề 1. Máy tính và xã hội tri thức</h3>
<h4>1. Trí tuệ nhân tạo và ứng dụng</h4>
<h4>2. Trí tuệ nhân tạo trong khoa học và đời sống</h4>
<h3>Chủ đề 2. Mạng máy tính và Internet</h3>
<h4>3. Thiết bị mạng</h4>

3. Các thẻ định dạng phông chữ

Hoạt động 3 trang 48

Đề bài: Thảo luận: Khi muốn nhấn mạnh vào một nội dung trong văn bản, em thường thấy nội dung đó được viết như thế nào?

Lời giải:

Một số cách thường dùng để nhấn mạnh nội dung:

• In đậm (bold): thu hút sự chú ý.
• In nghiêng (italic): thể hiện nhấn mạnh nhẹ hoặc trích dẫn.
• Gạch chân (underline): làm nổi bật cụm từ.
• Đánh dấu (highlight): tô nền màu vàng hoặc màu nổi.
• Đổi màu chữ, tăng cỡ chữ để nội dung trở nên nổi bật.

Câu hỏi củng cố mục 3 trang 50

Đề bài: Với cùng một đoạn văn bản, kết quả khi định dạng trong các trường hợp sau giống và khác nhau như thế nào?

• Kiểu 1: <p style="color:red;font-family:Tahoma;font-size:15px;text-decoration:underline">
• Kiểu 2: <p style="color:rgb(255,0,0);font-family:Tahoma;font-size:10px">

Lời giải:

Giống nhau:

• Màu chữ đỏ: vì red và rgb(255,0,0) cùng biểu thị màu đỏ.
• Phông chữ Tahoma ở cả hai kiểu.

Khác nhau:

Luyện tập

Luyện tập trang 51

Đề bài:

1. Hãy sửa lại phần tử sau để làm nổi bật ý chính của câu:

<p> Thẻ strong và thẻ em được sử dụng để nhấn mạnh vào nội dung trong phần tử. Thẻ b chỉ có tác dụng in đậm văn bản </p>

Lời giải:

Ý chính cần làm nổi bật là tên các thẻ (strong, em, b) và tác dụng (nhấn mạnh, in đậm). Sửa lại như sau:

<p> Thẻ <strong>strong</strong> và thẻ <strong>em</strong> được sử dụng để 
<em>nhấn mạnh</em> vào nội dung trong phần tử. Thẻ <strong>b</strong> chỉ có 
tác dụng <em>in đậm</em> văn bản </p>

Giải thích:

• Dùng thẻ <strong> để in đậm tên các thẻ HTML (strong, em, b) → dễ nhận diện.
• Dùng thẻ <em> để in nghiêng các cụm “nhấn mạnh” và “in đậm” → nhấn mạnh ý về tác dụng của thẻ.

2. Trình bày đoạn văn bản sau bằng mã HTML:

INTERNET TỐC ĐỘ CAO

Dịch vụ Internet tốc độ cao là dịch vụ Internet cáp quang chất lượng cao, ổn định, giá cả hợp lí.

Các tính năng nổi bật:

• Tốc độ siêu cao từ 150 MBps trở lên
• Lắp đặt nhanh chóng trong 24 h
• Phù hợp với cá nhân/Hộ gia đình
• Tặng Modem 2 băng tần
• Miễn phí lắp đặt
• Hỗ trợ 24/7

Lời giải:

<h2>INTERNET TỐC ĐỘ CAO</h2>
<p><em>Dịch vụ Internet tốc độ cao là dịch vụ Internet cáp quang chất lượng
cao, ổn định, giá cả hợp lí.</em></p>
<p><strong>Các tính năng nổi bật:</strong></p>
<p>Tốc độ siêu cao từ 150 MBps trở lên</p>
<p>Lắp đặt nhanh chóng trong 24 h</p>
<p>Phù hợp với cá nhân/Hộ gia đình</p>
<p>Tặng Modem 2 băng tần</p>
<p>Miễn phí lắp đặt</p>
<p>Hỗ trợ 24/7</p>

Giải thích:

• Thẻ <h2> cho tiêu đề chính “INTERNET TỐC ĐỘ CAO”.
• Thẻ <em> cho dòng in nghiêng giới thiệu dịch vụ.
• Thẻ <strong> cho dòng đậm “Các tính năng nổi bật:”.
• Mỗi tính năng đặt trong một thẻ <p> riêng để hiển thị trên dòng riêng.

Vận dụng

Vận dụng trang 51

Đề bài:

1. Hãy chỉ ra các bước cần thực hiện để sử dụng một màu cụ thể trong bức ảnh làm màu cho tiêu đề một bài thơ.

Lời giải:

Các bước thực hiện:

• Bước 1: Mở bức ảnh bằng phần mềm xem/chỉnh sửa ảnh (ví dụ Paint, Photoshop, GIMP,…).
• Bước 2: Dùng công cụ chọn màu (Color Picker / Eyedropper) để lấy màu tại điểm mong muốn trên ảnh.
• Bước 3: Ghi lại mã màu RGB (ví dụ rgb(120, 200, 50)) hoặc mã HEX (ví dụ #78C832) của màu vừa chọn.
• Bước 4: Trong tệp HTML, dùng thuộc tính style với thuộc tính con color để đặt màu cho tiêu đề bài thơ:

<h1 style="color:rgb(120,200,50)">Tiêu đề bài thơ</h1>

2. Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau:

Lời giải:

Có thể sử dụng thẻ <sup> (chỉ số trên) và <sub> (chỉ số dưới) xen kẽ với các kí tự “0” để tạo hiệu ứng zigzag.

Mã HTML:

<p>0<sup>0</sup>0<sub>0</sub>0<sup>0</sup>0<sub>0</sub>0<sup>0</sup>0<sub>0</sub>0<sup>0</sup>0<sub>0</sub>0<sup>0</sup>0<sub>0</sub>0<sup>0</sup>0<sub>0</sub>0<sup>0</sup>0<sub>0</sub></p>

Giải thích:

• Kí tự “0” bình thường được viết trực tiếp trong đoạn <p>.
• Kí tự “0” cần đưa lên cao dùng thẻ <sup>0</sup>.
• Kí tự “0” cần đưa xuống thấp dùng thẻ <sub>0</sub>.
• Xen kẽ các kí tự bình thường – trên – bình thường – dưới tạo thành hình zigzag lên xuống.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa