Giải Tin học 12 - Định hướng khoa học máy tính trang 52
Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 52–53
Nguon: Tin Hoc 12 KHMT (trang 52 – 53)
(Lưu ý: Các trang trong ảnh hiển thị số trang 50 và 51, nội dung thuộc Bài 8 – Định dạng văn bản và phông chữ bằng HTML.)
🔍 Kiến thức cần nhớ
- Định dạng phông chữ trong HTML5 dùng thuộc tính style, viết dưới dạng các cặp
tên:giá trị, ngăn cách nhau bởi dấu;. - Một số thuộc tính thường dùng:
color– màu chữ (dùng tên tiếng Anh: red, blue,… hoặc hệ RGB).font-family– phông chữ.font-size– cỡ chữ (px).text-decoration– gạch chân, gạch ngang…- Các thẻ định dạng kiểu chữ:
,– in đậm.,– in nghiêng.– chỉ số trên (số mũ);– chỉ số dưới.…– tiêu đề (mức giảm dần).– đoạn văn bản.
💡 Mẹo nhớ: strong/em mang ý nghĩa nhấn mạnh nội dung, còn b/i chỉ thuần thay đổi hình thức (đậm/nghiêng). Khi cần làm nổi bật ý chính, nên ưu tiênvà.
⚙️ Bài tập
Câu hỏi (hộp ❓ 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:
- Kiểu 2:
Cách 1 — So sánh từng thuộc tính
Điểm giống nhau:
- Màu chữ: đều màu đỏ. Vì
redchính làrgb(255,0,0)(đỏ = 255, lục = 0, lam = 0). - Phông chữ: đều dùng
font-family:Tahoma.
Điểm khác nhau:
| Thuộc tính | Kiểu 1 | Kiểu 2 |
|---|---|---|
| Cỡ chữ | 15px (lớn hơn) | 10px (nhỏ hơn) |
| Gạch chân | Có (text-decoration:underline) | Không |
➡️ Kết luận: Hai kiểu cho chữ cùng màu đỏ, cùng phông Tahoma, nhưng Kiểu 1 chữ to hơn và có gạch chân, còn Kiểu 2 chữ nhỏ hơn, không gạch chân.
💡 Mẹo nhớ:red≡rgb(255,0,0)≡#FF0000– ba cách viết khác nhau cho cùng một màu.
Nhiệm vụ thực hành — Viết mã HTML cho Hình 8.3
Đề bài: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3 (bài "Biện luận số nghiệm của phương trình bậc 2").
Cách 1 — Làm theo 3 bước hướng dẫn của SGK
Phân tích (Bước 1):
- Tiêu đề: dòng 1 (mức cao nhất), dòng 2 và dòng 3 (mức thấp hơn).
- Nội dung: 3 đoạn tương ứng 3 bước làm (B₁, B₂, B₃).
- Các dòng 7, 8, 9 viết xuống dòng bằng
Mã HTML hoàn chỉnh:
Biện luận số nghiệm của phương trình bậc 2
Bài toán: Xác định số nghiệm
của phương trình ax2 + bx + c = 0 (a != 0)
Cách làm:
B1: Xác định hệ số a, b và c
B2: Tính delta = b2 - 4ac
B3: Kết luận
+ Nếu delta < 0: Phương trình vô nghiệm
+ Nếu delta = 0: Phương trình có nghiệm duy nhất
+ Nếu delta > 0: Phương trình có hai nghiệm phân biệt
Giải thích các thẻ:
cho dòng 1 (tiêu đề cao nhất),cho dòng 2, 3.tô đỏ riêng cụm "Bài toán:" và "Cách làm:".2viết số mũ ởax²vàb².1,2,3viết chỉ số dưới ở B₁, B₂, B₃.in đậm chữ "delta",in nghiêng các kết luận..
⚠️ Lưu ý thi: Trong HTML, dấu<và>phải viết là<và>để trình duyệt không nhầm với thẻ. Đây là lỗi rất hay quên khi gõ điều kiệndelta < 0.
⚙️ LUYỆN TẬP
Câu 1
Đề bài: Hãy sửa lại phần tử sau để làm nổi bật ý chính của câu:
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
Cách 1 — Dùng thẻ nhấn mạnh cho các từ khóa
Ý chính cần làm nổi bật là tên các thẻ (strong, em, b) và hành động (nhấn mạnh, in đậm). Đồng thời sửa thẻ đóng
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.
⚠️ Lưu ý thi: Thẻ kết thúc đoạn phải là(có dấu/), không phải. Đề bài viết sai thẻ đóng – cần sửa lại.
Câu 2
Đề bài: Trình bày đoạn văn bản "INTERNET TỐC ĐỘ CAO" bằng mã HTML.
Cách 1 — Dùng tiêu đề, đoạn và các thẻ định dạng
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
Giải thích:
cho tiêu đề "INTERNET TỐC ĐỘ CAO".in nghiêng cả câu giới thiệu dịch vụ.in đậm dòng "Các tính năng nổi bật:".- 6 tính năng dùng
.
💡 Mẹo nhớ: Khi nhiều dòng đứng sát nhau (không cách dòng trống) → dùng; khi muốn tách đoạn rõ ràng (có khoảng cách) → dùngriêng.
⚙️ VẬN DỤNG
Câu 1
Đề bài: 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ơ.
Cách 1 — Lấy mã màu từ ảnh rồi áp dụng vào style
- Mở bức ảnh bằng phần mềm chỉnh sửa ảnh (Paint, Photoshop, GIMP…) hoặc công cụ chọn màu trực tuyến.
- Dùng công cụ chọn màu (eyedropper / ống hút màu) bấm vào điểm ảnh có màu mong muốn.
- Đọc và ghi lại giá trị màu hiển thị, dạng RGB
rgb(r,g,b)hoặc mã hex#rrggbb. - Đưa giá trị màu đó vào thuộc tính
stylevới thuộc tính concolorcho thẻ tiêu đề:
Tên bài thơ
➡️ Tiêu đề bài thơ sẽ hiển thị đúng màu lấy từ bức ảnh.
💡 Mẹo nhớ: Hệ RGB cho phép tái tạo chính xác bất kỳ màu nào trong ảnh, điều mà danh sách tên màu tiếng Anh (red, blue…) không làm được.
Câu 2
Đề bài: Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như hình (các chữ "0" nhấp nhô lên xuống tạo hình sóng).
Cách 1 — Dùng kết hợp thẻ
Để tạo hiệu ứng nhấp nhô, ta đẩy các chữ "0" lên cao dần bằng các thẻ lồng nhau (mỗi mức lồng cao thêm một bậc), rồi hạ xuống thấp dần bằng các thẻ lồng nhau. Lặp lại quy luật này tạo thành chuỗi sóng.
Mô phỏng cho một con sóng (đi lên rồi đi xuống):
0000000
Diễn giải quy luật:
0– nằm ở mức gốc.0– chữ "0" cao hơn một bậc.00– lồngđể cao thêm bậc nữa (đỉnh sóng).- Sau đỉnh, dùng
lồng tương tự để hạ thấp dần (đáy sóng).
Cứ lặp lại cụm "lên rồi xuống" này nhiều lần là được dải sóng dài như trong hình.
💡 Mẹo nhớ:đẩy chữ lên,kéo chữ xuống. Lồng càng nhiều thẻ thì chữ càng lệch xa khỏi dòng gốc → biên độ sóng càng lớn.
🎯 Ghi nhớ: - Định dạng phông chữ trong HTML5 chủ yếu qua thuộc tính style với các cặptên:giá trịngăn cách bởi;. -/mang ý nghĩa nhấn mạnh;/chỉ thay đổi hình thức đậm/nghiêng. -(chỉ số trên) và(chỉ số dưới) dùng cho số mũ, chỉ số, và cả hiệu ứng nhấp nhô. - Tiêu đề dùng–(mức giảm dần), đoạn dùng, xuống dòng trong đoạn dùng. - Trong mã HTML, viết<và>thành<và>để tránh nhầm với thẻ.