1. Tiêu đề, đoạn văn và ngắt dòng
1.1 Thẻ tiêu đề
HTML có sáu cấp tiêu đề, từ <h1> (cấp cao nhất, chữ lớn nhất) đến <h6> (cấp thấp nhất). Nội dung trong thẻ tiêu đề được trình duyệt hiển thị in đậm, tách thành dòng riêng.
Thẻ tiêu đề dùng để thể hiện cấu trúc phân cấp của nội dung (chương, mục, tiểu mục), không nên dùng chỉ để làm chữ to. Mỗi trang thường chỉ có một <h1>.
1.2 Đoạn văn, ngắt dòng, đường kẻ ngang
<p>…</p>: tạo một đoạn văn. Trình duyệt tự xuống dòng và để khoảng cách giữa các đoạn.<br>: ngắt dòng (xuống dòng mới nhưng vẫn trong cùng đoạn văn). Đây là thẻ rỗng, không có thẻ đóng.<hr>: tạo một đường kẻ ngang, thường dùng để phân tách các phần nội dung. Đây cũng là thẻ rỗng.<pre>…</pre>: giữ nguyên định dạng văn bản đã gõ (dấu cách, xuống dòng), hiển thị bằng phông chữ đều nhau.
Trình duyệt coi nhiều dấu cách, dấu xuống dòng liên tiếp trong mã HTML là một dấu cách. Muốn xuống dòng phải dùng <br> hoặc tạo đoạn mới bằng <p>; muốn giữ nguyên cách trình bày thì dùng <pre>.
2. Định dạng kí tự
| Thẻ | Tác dụng |
|---|---|
<b>, <strong> | In đậm; <strong> còn cho biết nội dung quan trọng. |
<i>, <em> | In nghiêng; <em> còn cho biết nội dung được nhấn mạnh. |
<u> | Gạch chân. |
<s>, <del> | Gạch ngang chữ (nội dung không còn đúng hoặc đã bị xoá). |
<sup> | Chỉ số trên, ví dụ x<sup>2</sup> hiển thị . |
<sub> | Chỉ số dưới, ví dụ H<sub>2</sub>O hiển thị HO. |
<mark> | Đánh dấu (tô nền) như bút dạ quang. |
<small> | Chữ nhỏ hơn bình thường. |
Các thẻ định dạng kí tự có thể lồng nhau, nhưng thẻ mở sau phải đóng trước, ví dụ <b><i>Chú ý</i></b>.
Một số kí tự trùng với kí hiệu của HTML phải viết bằng mã thực thể: < cho dấu <, > cho dấu >, & cho dấu &, cho một dấu cách không bị gộp, © cho kí hiệu ©.
3. Ví dụ minh hoạ
Viết đoạn mã HTML (đặt trong <body>) hiển thị: tiêu đề cấp 1 “Hoá học vui”, một đoạn văn có công thức nước và chữ in đậm, một đường kẻ ngang, rồi đoạn văn có công thức trên hai dòng.
Lời giải · 2 bước
<h1>Hoa hoc vui</h1> <p>Cong thuc cua nuoc la <b>H<sub>2</sub>O</b>.</p> <hr> <p>Dinh li Pythagore:<br> a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
Bước 2
Thẻ <sub> hạ số 2 xuống dưới, <sup> nâng số 2 lên trên; <br> cho công thức xuống dòng nhưng vẫn thuộc cùng đoạn văn; <hr> kẻ đường ngang ngăn cách hai phần.
Đoạn mã sau hiển thị thế nào?
<p>Gia cu: <del>50 000 dong</del> Gia moi: <mark>40 000 dong</mark></p>
Lời giải
Toàn bộ nằm trên cùng một đoạn (dấu xuống dòng trong mã chỉ thành một dấu cách): “50 000 dong” bị gạch ngang, “40 000 dong” được tô nền vàng.
4. Lưu ý và lỗi hay gặp
- Gõ Enter trong mã HTML không làm văn bản xuống dòng trên trình duyệt.
- Lồng thẻ chéo nhau như
<b><i>Chào</b></i>là sai; phải đóng</i>trước</b>. - Không viết thẻ đóng cho thẻ rỗng
<br>,<hr>. - Không dùng thẻ tiêu đề chỉ để phóng to chữ; định dạng cỡ chữ, màu chữ nên làm bằng CSS (học ở các bài sau).
5. Câu hỏi ôn tập
HTML có bao nhiêu cấp tiêu đề? Thẻ nào là cấp cao nhất?
Gợi ý trả lời
Sáu cấp, từ <h1> đến <h6>; <h1> là cấp cao nhất.
Phân biệt <p> và <br>.
Gợi ý trả lời
<p> tạo đoạn văn mới (có khoảng cách với đoạn khác, cần thẻ đóng); <br> chỉ ngắt dòng trong cùng đoạn và là thẻ rỗng.
Viết mã HTML hiển thị công thức CO và biểu thức .
Gợi ý trả lời
CO<sub>2</sub> và 2<sup>10</sup> = 1024.
Muốn hiển thị nguyên văn dòng chữ <p> trên trang web thì viết thế nào?
Gợi ý trả lời
Viết <p>.