Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
I. Lý thuyết trọng tâm
1. Thuộc tính thẻ
1.1. Khái niệm thuộc tính thẻ
Mọi phần tử HTML đều có thể có thuộc tính. Thuộc tính của thẻ có tác dụng bổ sung thông tin, làm rõ các điều khiển được thẻ chỉ định.
1.2. Cú pháp xác định thuộc tính
Cú pháp cơ bản:
tên_thuộc_tính="giá_trị"
Lưu ý: Trừ các trường hợp đặc biệt chỉ cần tên thuộc tính để xác định giá trị Có hoặc Không.
1.3. Vị trí của thuộc tính
Thuộc tính nằm trong thẻ bắt đầu (không nằm trong thẻ kết thúc), sau tên thẻ. Trong trường hợp thẻ có nhiều hơn một thuộc tính thì các thuộc tính được ngăn cách bởi dấu cách.
Ví dụ: Với thẻ có hai thuộc tính là thuộc_tính_1 nhận giá_trị_1 và thuộc_tính_2 nhận giá_trị_2, ta viết câu lệnh như sau:
<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ẻ>
1.4. Thuộc tính style
Một trong những thuộc tính được sử dụng thường xuyên nhất là thuộc tính style, dùng để thiết lập định dạng văn bản như chọn màu sắc, phông chữ, cỡ chữ, kiểu chữ, căn lề, tạo khung,… cho một phần tử HTML. Thuộc tính được viết ngay sau tên thẻ.
2. Các thẻ định dạng trình bày văn bản
Một văn bản thông thường được tạo bởi hai thành phần cơ bản là tiêu đề và các đoạn văn bản.
2.1. Định dạng tiêu đề
Để định dạng tiêu đề và các tiêu đề con xuất hiện trong văn bản, ta sử dụng các thẻ dạng <hx> trong đó x nhận một trong các giá trị từ 1 đến 6 để phân cấp tiêu đề theo các mức khác nhau.
Các mức tiêu đề:
| Thẻ | Mức tiêu đề | Mô tả |
|---|---|---|
<h1> |
Tiêu đề cấp 1 | Tiêu đề chính hay tiêu đề chung của cả văn bản (cỡ chữ lớn nhất) |
<h2> |
Tiêu đề cấp 2 | Tiêu đề ở mức thấp hơn |
<h3> |
Tiêu đề cấp 3 | Tiêu đề mức tiếp theo |
<h4> |
Tiêu đề cấp 4 | Tiêu đề mức tiếp theo |
<h5> |
Tiêu đề cấp 5 | Tiêu đề mức tiếp theo |
<h6> |
Tiêu đề cấp 6 | Tiêu đề cấp thấp nhất (cỡ chữ nhỏ nhất) |
Ví dụ 1: Đoạn mã HTML dưới đây minh họa một văn bản có bốn mức tiêu đề:
<h1>Tin học 12</h1>
<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>
Tác dụng của thẻ tiêu đề:
- Trình duyệt sử dụng chúng để hiển thị trang web và định dạng văn bản giúp người dùng đọc lướt trang web theo tiêu đề
- Các công cụ tìm kiếm sử dụng thẻ này để xác định cấu trúc và nội dung trang web
2.2. Định dạng đoạn văn bản
Một văn bản thường gồm nhiều đoạn văn bản. Các đoạn có thể được định dạng giống hoặc khác nhau tùy vào vị trí, nội dung và cách trang trí.
a) Thẻ <p> – Định dạng đoạn văn bản
Cách đơn giản nhất để xác định đoạn là đặt nội dung đoạn trong cặp thẻ <p>Nội dung</p>.
Đặc điểm:
- Khi gặp cặp thẻ
<p>...</p>, trình duyệt sẽ hiển thị nội dung đoạn trên dòng mới kèm với khoảng trống nhỏ trước và sau đoạn - Nội dung đoạn có thể chứa văn bản, hình ảnh và cả các phần tử khác
- Không được chứa tiêu đề, danh sách, phần tử phân đoạn hoặc các phần tử dạng khối khác
- Các đoạn được định dạng bằng thẻ
<p>phù hợp với văn bản chứa nhiều chữ
b) Thẻ <div> và <span> – Tạo khối chứa nội dung
Khi cần thao tác với nhiều loại nội dung, ta có thể sử dụng thẻ <div> và thẻ <span>.
| Thẻ | Đặc điểm |
|---|---|
<div>...</div> |
Tạo một khối chứa nội dung bất kỳ, bắt đầu trên dòng mới |
<span>...</span> |
Tác dụng tương tự nhưng sử dụng cho quy mô nhỏ hơn; nội dung khối hiển thị trên cùng dòng đang viết |
c) Thẻ <br> và <hr> – Xuống dòng và đường kẻ ngang
| Thẻ | Chức năng |
|---|---|
<br> |
Xuống dòng |
<hr> |
Tạo ra một đường kẻ ngang trên trang web |
Lưu ý: Đây là các thẻ đơn (không có thẻ kết thúc).
Bảng tổng hợp các thẻ định dạng đoạn văn bản:
| Thẻ | Chức năng | Hiển thị |
|---|---|---|
<p> |
Xác định đoạn văn bản | Dòng mới, có khoảng trống trước/sau |
<div> |
Tạo khối chứa nội dung | Bắt đầu trên dòng mới |
<span> |
Tạo khối nhỏ | Trên cùng dòng đang viết |
<br> |
Xuống dòng | Xuống dòng mới |
<hr> |
Đường kẻ ngang | Dòng kẻ ngang |
3. Các thẻ định dạng phông chữ
3.1. Định dạng kiểu chữ
Một số kiểu chữ thường dùng bao gồm: đậm, nghiêng, gạch chân, đánh dấu (highlight)…. Có thể sử dụng các cặp thẻ trong bảng sau để trình bày đoạn văn bản với các kiểu chữ khác nhau.
Bảng Một số thẻ định dạng kiểu chữ:
| Kiểu chữ | Thẻ | Ví dụ | Hiển thị trên trình duyệt |
|---|---|---|---|
| Chữ thường | (không có thẻ) | <p>Đây là câu chuẩn</p> |
Đây là câu chuẩn |
| Chữ đậm | <strong>; <b> |
<p>Đây <strong>là câu</strong> chuẩn</p> |
Đây là câu chuẩn |
| Chữ nghiêng | <em>; <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 (nền vàng) |
| Giảm cỡ chữ | <small> |
<p>Đây <small>là câu</small> chuẩn</p> |
Đây ᶦᵃ ᶜᵃᵘ chuẩn |
| Chỉ số trên | <sup> |
<p>Đây <sup>là câu</sup> chuẩn</p> |
Đây ˡᵃ ᶜᵃᵘ chuẩn |
| Chỉ số dưới | <sub> |
<p>H<sub>2</sub>O</p> |
H₂O |
| Đánh dấu xóa | <del> |
<p>Đây <del>là câu</del> chuẩn</p> |
Đây ~~là câu~~ chuẩn |
Lưu ý quan trọng:
① HTML5 không hỗ trợ thẻ <big> và <u>: Để điều khiển, em nên thay bằng giá trị font-size và text-decoration trong thuộc tính style.
② Sự khác biệt giữa <strong>, <em> và <b>, <i>:
- Các thẻ
<strong>,<em>có cùng tác dụng định dạng chữ đậm, nghiêng giống các thẻ<b>,<i> - Tuy nhiên, các thẻ
<strong>,<em>có ý nghĩa nhấn mạnh vào ngữ nghĩa của nội dung và được khuyến khích sử dụng nhiều hơn trong định dạng văn bản
Ví dụ 2: Trong đoạn mã HTML sau, đoạn thứ nhất nhấn mạnh vào môn học hay là “Tin học”, đoạn thứ hai nhấn mạnh vào mức độ “rất” hay của môn Tin học.
<p>Môn <em>Tin học</em> rất hay.</p>
<p>Môn Tin học <em>rất</em> hay.</p>
3.2. Định dạng phông chữ bằng thuộc tính style
Để định dạng phông chữ, ta sử dụng thuộc tính style. Các thuộc tính màu sắc, phông chữ, cỡ chữ được xác định như sau:
a) Màu sắc:
<p style="color:màu">Nội dung.</p>
b) Phông chữ:
<p style="font-family:tên_phông">Nội dung.</p>
c) Cỡ chữ:
<p style="font-size:cỡ">Nội dung.</p>
Cách xác định cỡ chữ:
- Dùng số kèm đơn vị: px (pixel), mm, cm,…
- Dùng cỡ chữ thông dụng: small, medium, large,…
Bảng tổng hợp định dạng phông chữ:
| Định dạng | Thuộc tính | Ví dụ giá trị |
|---|---|---|
| Màu sắc | color |
red, green, blue, rgb(255,0,0) |
| Phông chữ | font-family |
Tahoma, Arial, Times New Roman |
| Cỡ chữ | font-size |
15px, 12pt, small, medium, large |
| Gạch chân | text-decoration |
underline |
Lưu ý quan trọng:
① Giá trị màu sắc:
- Sử dụng theo tiếng Anh: red, green, blue, grey, yellow, black, brown,…
- Hoặc giá trị màu trong hệ RGB: rgb(255,0,0)
② Kết hợp nhiều định dạng phông đồng thời: Ta đặt các cặp tên:giá_trị trong phần giá trị của thuộc tính, ngăn cách nhau bởi dấu “;”
Ví dụ:
<p style="color:red; font-family:Tahoma; font-size:15px; text-decoration:underline">Nội dung</p>
4. Thực hành định dạng văn bản và 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
Hướng dẫn thực hiện:
Bước 1. Phân tích thành phần của đoạn văn bản:
- Tiêu đề: Dòng 1, dòng 2, dòng 3. Trong đó dòng 1 ở mức tiêu đề cao hơn.
- Đoạn: 3 đoạn, tương ứng với 3 bước làm.
- Lưu ý: Các dòng 7, 8, 9 đều bắt đầu viết trên dòng mới nhưng không là đoạn vì ta không thấy cách trước và sau như những dòng trên.
Bước 2. Dùng thẻ <h> để viết 3 dòng đầu:
- Sử dụng thẻ
<h1>cho dòng 1 và<h2>cho dòng 2, 3 (hoặc<h2>cho dòng 1 và<h3>cho dòng 2, 3) - Để thay đổi màu sắc, dùng thuộc tính style
- Dùng thẻ
<sup>để viết số mũ ở câu lệnh của dòng 2
Ví dụ:
<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>
Bước 3. Dùng thẻ <p> để viết 3 đoạn bên dưới:
- Viết mỗi đoạn bằng một thẻ
<p> - Viết chỉ số dưới, số mũ bằng thẻ
<sub>,<sup> - In đậm, in nghiêng chữ bằng thẻ
<strong>hoặc<b>,<em>hoặc<i> - Xuống dòng bằng thẻ
<br>
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