1. Thuộc tính thẻ
Khái niệm:
- Thẻ HTML có thể có hoặc không có thuộc tính.
- Thuộc tính thẻ bổ sung thông tin, giúp làm rõ cách xử lý cho thẻ chứa nó.
Cú pháp:
<Tên_thẻ thuộc_tính_1="giá_trị_1" thuộc_tính_2="giá_trị_2"> Nội dung </Tên_thẻ>
- Thuộc tính nằm sau tên thẻ, KHÔNG nằm trong thẻ đóng.
- Nhiều thuộc tính trong cùng một thẻ được phân tách bằng dấu cách.
2. Các thẻ định dạng trình bày văn bản
a. Định dạng tiêu đề
Sử dụng thẻ <hx> (x từ 1-6) để tạo các cấp tiêu đề <h1> dùng cho tiêu đề chính <h2> đến <h6> dùng cho các tiêu đề phụ theo thứ tự giảm dần về tầm quan trọng
Ví dụ:
<h1>Khoa Học Máy Tính</h1> <!-- Tiêu đề chính -->
<h2>1. Lập Trình Cơ Bản</h2> <!-- Tiêu đề cấp 2 -->
<h3>1.1 Giới thiệu về Python</h3> <!-- Tiêu đề cấp 3 -->b. Định dạng đoạn văn bản
Thẻ <p> dùng để tạo đoạn văn, tự động thêm khoảng trống trước và sau Thẻ <div> và <span> dùng để nhóm nội dung:
<div>tạo khối nội dung, bắt đầu trên dòng mới<span>tạo nhóm nội dung nhỏ trên cùng dòng
Thẻ <br> và <hr> dùng để xuống dòng hoặc tạo đường kẻ ngang
Dùng thuộc tính style để tạo khung, lề và các định dạng khác Các thẻ này giúp trình bày văn bản có cấu trúc rõ ràng và dễ đọc trên trang web
Ví dụ:
<!-- Sử dụng thẻ p -->
<p>Đây là một đoạn văn bản.</p>
<p>Đây là đoạn văn bản thứ hai.</p>
<!-- Sử dụng div và span -->
<div>
Khối nội dung chính
<span style="color: red">Văn bản màu đỏ</span>
<span style="font-weight: bold">Văn bản in đậm</span>
</div>
<!-- Sử dụng br và hr -->
Dòng 1<br>
Dòng 2<br>
<hr>
Dòng sau đường kẻ ngangCâu hỏi củng cố
Câu 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>Trả lời:
Đoạn mã sẽ hiển thị thành 5 dòng riêng biệt Nhận xét về khoảng cách:
- Mỗi thẻ
<p>tạo ra một dòng mới và có khoảng cách với dòng trước/sau - Thẻ
<br>chỉ xuống dòng đơn thuần, không tạo khoảng cách như thẻ <p>
Câu 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.
Trả lời:
Để thêm đường kẻ ngang, ta thêm thẻ sau thẻ trong mã HTML:
<h1>Tin học 12</h1>
<hr>
<h2>Phần chung</h2>
...3. Các thẻ định dạng phông chữ
a. Định dạng kiểu chữ
| Kiểu chữ | Thẻ HTML | Ví dụ cú pháp | Hiển thị kết quả |
| Chữ thường | (không cần thẻ) hoặc có thể sử dụng thẻ <p> | <p>Đây là câu chuẩn</p> | Đây là câu chuẩn |
| Chữ đậm | <strong> hoặc <b> | <p>Đây <strong>là câu</strong> chuẩn</p> | Đây là câu chuẩn |
| Chữ nghiêng | <em> hoặc <i> | <p>Đây <em>là câu</em> chuẩn</p> | Đây là câu chuẩn |
| Gạch chân | <u> | <p>Đây <u>là câu</u> chuẩn</p> | Đây là câu chuẩn |
| Đánh dấu | <mark> | <p>Đây <mark>là câu</mark> chuẩn</p> | Đây là câu chuẩn |
| Giảm cỡ chữ | <small> | <p>Đây <small>là câu</small> chuẩn</p> | Đây là câu chuẩn |
| Chỉ số trên/dưới | <sup>, <sub> | <p>H <sub>2</sub>O; ax<sup>2</sup> + b</p> | H2O; ax2 + b |
| Gạch ngang chữ | <del> | <p>Đây <del>là câu</del> chuẩn</p> | Đây |
Lưu ý:
- HTML5 không còn hỗ trợ thẻ
<big>và<u> - Thẻ
<strong>và<em>được khuyến khích sử dụng hơn<b>và<i> - Có thể kết hợp nhiều thẻ để tạo nhiều hiệu ứng định dạng khác nhau
b. Định dạng phông chữ
Cách sử dụng thuộc tính style cho phông chữ:
| Thuộc tính | Cú pháp | Ví dụ |
| Màu sắc | style="color:màu" | <p style="color:red">Nội dung</p> |
| Phông chữ | style="font-family:tên_phông" | <p style="font-family:Arial">Nội dung</p> |
| Cỡ chữ | style="font-size:cỡ" | <p style="font-size:15px">Nội dung</p> |
Các giá trị có thể dùng:
- Màu sắc:
- Tên màu tiếng Anh:
red, green, blue, grey, yellow, black, brown,... - Mã màu RGB:
rgb(255,0,0),rgb(0,255,0),…
- Tên màu tiếng Anh:
- Cỡ chữ:
- Đơn vị đo: px (pixel), mm, cm
- Từ khóa: small, medium, large
Kết hợp nhiều thuộc tính:
- Sử dụng dấu chấm phẩy (
;) để ngăn cách các thuộc tính - Ví dụ:
<p style="color:red; font-family:Tahoma; font-size:15px; text-decoration:underline"> ... </p>
Kết quả: Văn bản màu đỏ, phông chữ Tahoma, cỡ 15px, có gạch chân
4. Thực hành định dạng văn bản và định dạng phông chữ
Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3
Trả lời: có thể sử dụng công cụ viết code HTML online để chạy thử https://otth.vn/codeweb/
<!-- Bước 1: Phân tích thành 3 phần chính -->
<!-- Tiêu đề (h1) và 2 phần nội dung (h2) -->
<!-- Bước 2: Viết 3 dòng đầu với thẻ h và style -->
<h1>Biện luận số nghiệm của phương trình bậc 2</h1>
<h3><span style="color:rgb(205,0,0)">Bài toán:</span> Xác định số nghiệm của phương trình ax<sup>2</sup> + bx + c = 0 (a != 0)</h3>
<h3>Cách làm:</h3>
<!-- Bước 3: Viết 3 đoạn bên dưới với thẻ p -->
<p>B<sub>1</sub>: Xác định hệ số a, b và c</p>
<p>B<sub>2</sub>: Tính <strong>delta</strong> = b<sup>2</sup> - 4ac</p>
<p>B<sub>3</sub>: Kết luận<br>
+ Nếu <em>delta</em> < 0: Phương trình <em>vô nghiệm</em><br>
+ Nếu <em>delta</em> = 0: Phương trình có <em>nghiệm duy nhất</em><br>
+ Nếu <em>delta</em> > 0: Phương trình có hai <em>nghiệm phân biệt</em></p>Câu hỏi luyện tập
Câu 1.
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>
Trả lời:
<p>Thẻ <strong>strong</strong> và thẻ <em>em</em> được sử dụng để <strong>nhấn mạnh</strong> vào nội dung trong phần tử. Thẻ <b>b</b> chỉ có tác dụng <b>in đậm</b> văn bản</p>Câu 2.
Trình bày đoạn văn bản về INTERNET TỐC ĐỘ CAO bằng mã HTML:
Trả lời: ngoài ra còn gợi ý thêm một vài thẻ định dạng đã được học trong bài này
<h1>INTERNET TỐC ĐỘ CAO</h1>
<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>
<h2>Các tính năng nổi bật:</h2>
<p>
- Tốc độ siêu cao từ <strong>150 MBps</strong> trở lên<br>
- Lắp đặt nhanh chóng trong <strong>24 h</strong><br>
- Phù hợp với cá nhân/Hộ gia đình<br>
- Tặng Modem 2 băng tần<br>
- <mark>Miễn phí lắp đặt</mark><br>
- Hỗ trợ <strong>24/7</strong>
</p>Bài tập vận dụng
Câu 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ơ.
Trả lời:
Có thể thực hiện theo 4 bước sau:
- Bước 1: Mở ảnh bằng phần mềm có chức năng chỉnh sửa (GIMP, Paint,…).
- Bước 2: Sử dụng công cụ Color picker và nháy chuột vào vị trí muốn lấy màu để lấy màu tại vị trí được nháy.
- Bước 3: Nháy chuột vào màu mới chọn được để xem giá trị RGB của màu đã chọn.
- Bước 4: Sử dụng giá trị RGB của màu đã chọn để thiết lập màu cho tiêu đề bài thơ bằng đặc tính color trong thuộc tính style.
Câu 2.
Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau
Trả lời:
Để có kết quả như hình, ta dùng các thẻ <sup> lồng nhau. Từ đó, các số 0 ở phía trong sẽ nhỏ và cao hơn so với các số 0 ở phía ngoài.
<p>0<sup>0<sup>0<sup>0<sup>0</sup>0</sup>0</sup>0</sup>0<sup>0<sup>0<sup>0<sup>0</sup>0</sup>0</sup>0</sup>0<sup>0<sup>0<sup>0<sup>0</sup>0</sup>0</sup>0</sup>0<sup>0<sup>0<sup>0<sup>0</sup>0</sup>0</sup>0</sup>0</p>
