I. Lý thuyết trọng tâm

1. Tạo danh sách

Khi trang web chứa nhiều đoạn văn bản, việc trình bày dưới dạng danh sách sẽ giúp nội dung trở nên rõ ràng và dễ đọc hơn.

1.1. Khái niệm danh sách trong HTML

Danh sách trong HTML cho phép nhóm và liệt kê tập hợp các mục tương tự nhau thành một khối để hiển thị. Trong danh sách, các mục được hiển thị tuần tự, ký tự đầu dòng có thể là số, chữ cái, dấu chấm, ký hiệu hoặc hình ảnh.

Các dạng danh sách cơ bản trong HTML gồm:

• Danh sách có thứ tự (Ordered List)
• Danh sách không có thứ tự (Unordered List)
• Danh sách mô tả (Description List)

Ngoài ra, ta có thể tạo danh sách lồng nhau bằng cách đặt một danh sách bên trong một mục của danh sách khác.

1.2. Danh sách có thứ tự

Danh sách có thứ tự được sử dụng khi các mục cần được đánh số theo một trình tự nhất định.

Cú pháp:

<ol>
    <li>Mục thứ 1</li>
    <li>Mục thứ 2</li>
    ...
    <li>Mục thứ n</li>
</ol>

Các thuộc tính quan trọng:

Ví dụ:

<ol type="i">
    <li>Nếu <b>delta</b> < 0: ...</li>
    <li>Nếu <b>delta</b> = 0: ...</li>
    <li>Nếu <b>delta</b> > 0: ...</li>
</ol>

Kết quả hiển thị:

i. Nếu delta < 0: ...
ii. Nếu delta = 0: ...
iii. Nếu delta > 0: ...

1.3. Danh sách không có thứ tự

Danh sách không có thứ tự được sử dụng khi các mục không cần sắp xếp theo trình tự cụ thể, chỉ cần liệt kê với các ký tự đầu dòng như dấu chấm tròn, hình vuông…

Cú pháp:

<ul>
    <li>Mục thứ 1</li>
    <li>Mục thứ 2</li>
    ...
    <li>Mục thứ n</li>
</ul>

Thuộc tính chọn ký tự đầu dòng:

Để thay đổi ký tự đầu dòng, ta thiết lập giá trị của đặc tính list-style-type trong thuộc tính style:

Ví dụ:

<ul style="list-style-type:square">
    <li>Nếu <b>delta</b> < 0: ...</li>
    <li>Nếu <b>delta</b> = 0: ...</li>
    <li>Nếu <b>delta</b> > 0: ...</li>
</ul>

Kết quả hiển thị:

■ Nếu delta < 0: ...
■ Nếu delta = 0: ...
■ Nếu delta > 0: ...

1.4. Danh sách mô tả

Danh sách mô tả được sử dụng để liệt kê các mục kèm theo phần mô tả chi tiết cho từng mục. Dạng này thường dùng để giải thích thuật ngữ, định nghĩa khái niệm.

Cú pháp:

<dl>
    <dt>Tên mục 1</dt>
    <dd>Mô tả của mục 1</dd>
    <dt>Tên mục 2</dt>
    <dd>Mô tả của mục 2</dd>
</dl>

Giải thích các thẻ:

Ví dụ:

<dl>
    <dt><b>Kem</b></dt>
    <dd>Món ăn ngọt, ở dạng đông lạnh.</dd>
    <dt><b>Trà sữa</b></dt>
    <dd>Đồ uống làm từ hai nguyên liệu trà và sữa.</dd>
</dl>

Kết quả hiển thị:

Kem
    Món ăn ngọt, ở dạng đông lạnh.
Trà sữa
    Đồ uống làm từ hai nguyên liệu trà và sữa.

1.5. Danh sách lồng nhau

Ta có thể tạo danh sách lồng nhau bằng cách đặt một danh sách bên trong cặp thẻ <li>...</li> của một mục thuộc danh sách khác.

Ví dụ danh sách lồng nhau:

<ol type="1">
    <li>Mục cấp 1
        <ol type="a">
            <li>Mục cấp 2a</li>
            <li>Mục cấp 2b</li>
        </ol>
    </li>
    <li>Mục cấp 1 tiếp theo</li>
</ol>

Kết quả hiển thị:

1. Mục cấp 1
    a. Mục cấp 2a
    b. Mục cấp 2b
2. Mục cấp 1 tiếp theo

1.6. Bảng tổng hợp các thẻ tạo danh sách

2. Thiết lập bảng

2.1. Khái niệm bảng trong HTML

Phần tử bảng được sử dụng khi cần thêm dữ liệu có thể sắp xếp dưới dạng hàng và cột vào trang web. Dữ liệu trong bảng có thể là bất kỳ loại thông tin nào, không nhất thiết phải là dạng số.

Bảng là công cụ hữu ích để tạo ra các bố cục nhiều cột hoặc phân bố nội dung một cách có tổ chức. Bảng được cấu tạo từ các hàng, mỗi hàng gồm các ô dữ liệu, và hàng đầu tiên thường là hàng tiêu đề.

2.2. Các thẻ cơ bản tạo bảng

Cấu trúc cơ bản của bảng:

<table>
    <caption>Tiêu đề bảng</caption>
    <tr>
        <th>Tiêu đề cột 1</th>
        <th>Tiêu đề cột 2</th>
    </tr>
    <tr>
        <td>Dữ liệu 1</td>
        <td>Dữ liệu 2</td>
    </tr>
</table>

2.3. Định dạng bảng

a) Thêm tiêu đề cho bảng:

Sử dụng thẻ <caption> đặt ngay sau thẻ <table> và trước thẻ <tr> đầu tiên.

<table>
    <caption>Hóa đơn</caption>
    ...
</table>

b) Tạo khung viền cho bảng:

Trong HTML5, độ dày và kiểu khung viền được thiết lập bằng thuộc tính border trong style với cú pháp:

style="border: độ_dày_px kiểu_viền [màu_viền]"

Trong đó:

• Độ dày: tính theo đơn vị px (pixel)
• Kiểu viền: solid (nét liền), dotted (nét chấm), double (nét đôi), none (không viền)
• Màu viền: tùy chọn, mặc định là màu đen

Ví dụ:

<table style="border: 1px solid black">
    <tr>
        <td style="border: 1px solid">Ô 1</td>
        <td style="border: 1px solid">Ô 2</td>
    </tr>
</table>

c) Điều chỉnh kích thước:

Sử dụng thuộc tính width (chiều rộng) và height (chiều cao) trong style.

Kích thước có thể đặt theo:

• Tỉ lệ phần trăm (%): tính theo tỉ lệ với khối bao ngoài
• Điểm ảnh (px): kích thước cố định

Lưu ý: Không nên sử dụng kích thước theo px vì các thiết bị hiển thị có sự khác nhau về kích thước và độ phân giải, có thể dẫn đến bảng không hiển thị đúng như mong đợi.

Ví dụ:

<table style="width:80%; height:400px">
    <tr style="height:15%">
        <td style="width:10%">...</td>
    </tr>
</table>

d) Gộp ô:

Để tạo bảng có cấu trúc phức tạp, ta sử dụng hai thuộc tính:

Cách thực hiện gộp ô:

• Bước 1: Thêm thuộc tính rowspan hoặc colspan cho phần tử <th> hoặc <td> thuộc ô đầu tiên cần gộp
• Bước 2: Đối với các hàng/cột tiếp theo, bỏ qua cặp thẻ <th> hoặc <td> tại vị trí đã được gộp

Ví dụ:

<table border="1">
    <tr>
        <th rowspan="2">Họ và tên</th>
        <th colspan="3">Điểm thi</th>
    </tr>
    <tr>
        <td>Toán</td>
        <td>Vật lí</td>
        <td>Hoá học</td>
    </tr>
</table>

2.4. Bảng tổng hợp các thuộc tính định dạng bảng

3. Thực hành tạo danh sách và bảng

3.1. Nhiệm vụ 1: Tạo danh sách

Yêu cầu: Viết đoạn mã HTML để tạo danh sách các câu lạc bộ của trường.

Hướng dẫn thực hiện:

Bước 1: Xác định thành phần của văn bản

• Văn bản gồm hai phần tử: một phần tử tiêu đề và một phần tử danh sách lồng nhau

Bước 2: Tạo tiêu đề bằng cặp thẻ <h2>...</h2>

<h2>Danh sách Câu lạc bộ</h2>

Bước 3: Tạo danh sách không có thứ tự (danh sách mức 1)

<ul>
    <li></li>
    <li></li>
</ul>

Bước 4: Tạo mục THỂ THAO với danh sách con có thứ tự

<li>THỂ THAO
    <ol>
        <li>Bóng đá</li>
        <li>Bóng chuyền</li>
        <li>Bóng rổ</li>
        <li>Võ
            <ol type="a">
                <li>Karatedo</li>
                <li>Taekwondo</li>
                <li>Vovinam</li>
            </ol>
        </li>
        <li>Bơi</li>
    </ol>
</li>

Bước 5: Làm tương tự với mục NGHỆ THUẬT để hoàn thiện danh sách

3.2. Nhiệm vụ 2: Tạo bảng

Yêu cầu: Lập bảng lịch hoạt động của các câu lạc bộ.

Hướng dẫn thực hiện:

Bước 1: Xác định các thông số của bảng

• Bảng có 7 hàng, 7 cột
• Thuộc tính Caption: “Lịch hoạt động CLB Thể thao”
• Hai ô cột 1 và cột 2 ở hàng 1, 2 được gộp (rowspan="2")
• Các ô cột 3, 4, 5, 6, 7 của hàng 1 được gộp (colspan="5")
• Khung viền: border="1" hoặc style="border:1px solid"

Bước 2: Tạo bảng kèm caption

<table border="1">
    <caption>Lịch hoạt động CLB Thể thao</caption>

Bước 3: Tạo hai hàng đầu với gộp ô

<tr style="border: 1px solid">
    <th rowspan="2">Bộ môn</th>
    <th rowspan="2">GV phụ trách</th>
    <th colspan="5">Ngày</th>
</tr>
<tr>
    <th>Thứ 2</th>
    <th>Thứ 3</th>
    <th>Thứ 4</th>
    <th>Thứ 5</th>
    <th>Thứ 6</th>
</tr>

Bước 4: Tạo các hàng dữ liệu còn lại

<tr>
    <td>Bóng đá</td>
    <td>Thầy Khai</td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
</tr>
<!-- Tiếp tục với các hàng còn lại -->
</table>

Bước 5: Lưu lại tệp với tên CLB.html

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