KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 8. ĐỊNH DẠNG VĂN BẢN
1. THUỘC TÍNH THẺ
Khái niệm:
Thuộc tính của thẻ dùng để bổ sung thông tin và làm rõ các điều khiển được thẻ chỉ định.
Vị trí và Cú pháp:
- Nằm trong thẻ bắt đầu, sau tên thẻ.
- Cú pháp: tên_thuộc_tính="giá trị".
- Nếu có nhiều thuộc tính thì ngăn cách nhau bởi dấu cách.
Thuộc tính phổ biến:
Thuộc tính style thường xuyên được dùng để định dạng văn bản (màu sắc, phông chữ, cỡ chữ...).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 1: Trong ngôn ngữ HTML, để bổ sung thông tin và làm rõ các điều khiển được thẻ chỉ định, người ta sử dụng các thuộc tính. Thuộc tính của thẻ được đặt ở vị trí nào?
Câu 2: Khi thiết lập một phần tử HTML phức tạp, người lập trình có thể cần sử dụng nhiều thuộc tính khác nhau để điều khiển. Khi đó, cú pháp chính xác để ngăn cách các thuộc tính là gì?
Câu 3: Bạn muốn định dạng một đoạn văn bản sao cho chữ được căn giữa màn hình và có màu đỏ. Đoạn mã HTML nào sau đây thể hiện đúng cách sử dụng thuộc tính style để đạt được kết quả đó?
2. CÁC THẺ ĐỊNH DẠNG TRÌNH BÀY VĂN BẢN
a) Định dạng tiêu đề
Thẻ sử dụng:
Sử dụng các thẻ từ <h1> đến <h6>.
Ý nghĩa:
- Số càng nhỏ (1) thì độ quan trọng càng cao (tiêu đề chính), số càng lớn (6) độ quan trọng càng giảm.
- Trình duyệt và công cụ tìm kiếm dùng thẻ này để xác định cấu trúc nội dung.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 4: Để xác định cấu trúc phân cấp và các mục chính của trang web, HTML cung cấp các thẻ định dạng tiêu đề. Có tất cả bao nhiêu cấp độ tiêu đề được hỗ trợ bởi ngôn ngữ HTML?
Câu 5: Khi sử dụng các thẻ tiêu đề từ <h1> đến <h6>, trình duyệt và các công cụ tìm kiếm hiểu mức độ quan trọng của nội dung như thế nào dựa trên con số đi kèm thẻ?
Câu 6: Bạn đang viết một bài báo có tiêu đề chính là "Công nghệ AI", bên trong có mục lớn là "Lợi ích", và mục nhỏ hơn là "Trong giáo dục". Bạn sẽ sử dụng lần lượt các thẻ tiêu đề nào cho cấu trúc này?
b) Định dạng đoạn văn bản
Thẻ đoạn văn <p>:
- Dùng cặp thẻ <p>...</p> để xác định một đoạn văn bản.
- Trình duyệt sẽ tự động xuống dòng và tạo khoảng trống nhỏ trước/sau đoạn.
Thẻ khối <div> và thẻ nội dòng <span>:
- <div>...</div>: Tạo một khối chứa nội dung, bắt đầu trên dòng mới (thường dùng cho các khối lớn).
- <span>...</span>: Tạo nhóm nội dung trong cùng một dòng (thường dùng để định dạng một cụm từ nhỏ).
Các thẻ hỗ trợ khác:
- <br>: Để xuống dòng.
- <hr>: Để tạo đường kẻ ngang.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 7: Trong HTML, để xác định một đoạn văn bản thông thường (paragraph), người ta sử dụng cặp thẻ nào sau đây?
Câu 8: Mặc dù nhấn Enter trong phần mềm soạn thảo không làm trang web xuống dòng, HTML cung cấp một thẻ riêng biệt để thực hiện việc này. Thẻ nào sau đây được sử dụng để ngắt xuống dòng mới?
Câu 9: Cả thẻ <div> và thẻ <span> đều được sử dụng để chứa hoặc nhóm nội dung. Điểm khác biệt cơ bản nhất về cách thức hiển thị của thẻ <div> so với thẻ <span> trên trình duyệt là gì?
Câu 10: Khi trình duyệt gặp cặp thẻ <p>...</p>, nó sẽ xử lý việc hiển thị đoạn văn bản này như thế nào so với các đoạn văn bản xung quanh?
Câu 11: Bạn có một đoạn văn bản dài và muốn đổi màu đỏ cho ba chữ "Lưu ý quan trọng" nằm ở giữa câu mà không làm đoạn văn bị ngắt xuống dòng. Bạn nên sử dụng thẻ nào bọc quanh ba chữ đó?
3. CÁC THẺ ĐỊNH DẠNG PHÔNG CHỮ
a) Định dạng kiểu chữ
Chữ đậm:
Dùng <b> hoặc <strong> (thẻ <strong> mang ý nghĩa nhấn mạnh ngữ nghĩa hơn).
Chữ nghiêng:
Dùng <i> hoặc <em> (thẻ <em> mang ý nghĩa nhấn mạnh ngữ nghĩa hơn).
Gạch chân:
Dùng <u>. (Lưu ý: HTML5 ít dùng, nên dùng style).
Đánh dấu (Highlight):
Dùng <mark>.
Chỉ số trên / Chỉ số dưới:
- Chỉ số trên (số mũ): <sup>.
- Chỉ số dưới (hóa học): <sub>.
Gạch xóa:
Dùng <del>.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 12: Để hiển thị chữ in đậm trên trang web, HTML hỗ trợ hai loại thẻ khác nhau. Đó là hai thẻ nào sau đây?
Câu 13: Trong các ứng dụng liên quan đến thương mại điện tử, người ta thường dùng thẻ gạch ngang chữ để biểu thị giá cũ đã bị hủy bỏ. Thẻ nào thực hiện chức năng gạch xóa này?
Câu 14: Mặc dù cả hai thẻ <b> và <strong> đều làm cho văn bản hiển thị in đậm trên trình duyệt, nhưng thẻ <strong> mang một ý nghĩa đặc biệt hơn đối với các công cụ tìm kiếm. Ý nghĩa đó là gì?
Câu 15: Trong ngôn ngữ HTML, để soạn thảo các công thức hóa học (ví dụ H2O) hoặc các biểu thức toán học có số mũ (ví dụ x2), người lập trình web sẽ cần dùng đến cặp thẻ nào?
Câu 16: Bạn đang thiết kế một trang web tóm tắt bài học và muốn đánh dấu highlight (tô sáng nền) cụm từ "Định dạng kiểu chữ" để học sinh dễ chú ý. Bạn sẽ viết đoạn mã HTML như thế nào?
b) Định dạng phông chữ
Màu sắc (color):
Giá trị là tên màu tiếng Anh (red, blue...) hoặc mã RGB.
Kiểu phông (font-family):
Xác định loại phông chữ (Arial, Tahoma...).
Cỡ chữ (font-size):
Dùng đơn vị px, cm hoặc từ khóa (small, large).
Kết hợp nhiều định dạng:
<p style="color:blue; font-size:20px">Chữ xanh và to</p>
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 17: Khi sử dụng thuộc tính style để định dạng văn bản, đặc tính nào sau đây được sử dụng để xác định kích thước của chữ (cỡ chữ) hiển thị trên màn hình?
Câu 18: Để thay đổi loại phông chữ cho một đoạn văn bản (ví dụ như chuyển từ phông mặc định sang phông Arial hoặc Tahoma), người lập trình sử dụng đặc tính nào trong thuộc tính style?
Câu 19: Trong việc định dạng màu sắc cho văn bản bằng đặc tính color, hệ thống cho phép người dùng khai báo giá trị màu bằng những phương pháp phổ biến nào?
Câu 20: Khi thiết lập giá trị cho cỡ chữ (font-size), ngoài việc dùng các đơn vị đo lường cụ thể như pixel (px) hay centimet (cm), người dùng còn có thể sử dụng các từ khóa. Từ khóa nào dưới đây hợp lệ?
Câu 21: Bạn muốn tạo một thẻ tiêu đề cấp 2 (<h2>) hiển thị phông chữ Tahoma, kích thước 30px và có màu xanh dương (blue). Đoạn mã HTML nào sau đây kết hợp đúng và đủ các định dạng này?
4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ
Quy trình để chuyển một văn bản thông thường sang HTML gồm 3 bước:
Bước 1: Phân tích thành phần: Xác định đâu là tiêu đề (cấp mấy), đâu là đoạn văn, đâu là xuống dòng.
Ví dụ: Dòng "Bài toán" là tiêu đề, các bước giải là đoạn văn.
Bước 2: Sử dụng thẻ tiêu đề <h>: Áp dụng cho các mục lớn, kết hợp style màu sắc nếu cần.
Ví dụ: <h3>Phương trình bậc 2</h3>
Bước 3: Sử dụng thẻ đoạn văn <p> và định dạng chi tiết: Viết nội dung, dùng <sub>, <sup> cho công thức toán, <strong> cho chỗ cần nhấn mạnh.
Ví dụ: <p>Nghiệm x = x<sub>1</sub></p>