1. Bài 4 – Web Danh Sách Lộ Trình Học Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 1
BÀI 4 – WEBSITE DANH SÁCH LỘ TRÌNH HỌC
Mục tiêu bài học
- Danh sách là gì?
- Danh sách – Ordered list
- Danh sách – Unordered list
- Danh sách – Definition list
- CSS – List
- Vận dụng kiến thức thực hành dự án hiển thị danh sách lộ trình học
1. Danh sách là gì?
Danh sách là những thứ có liên quan mật thiết với nhau do có đặc điểm chung nào đó, chẳng hạn như danh
sách học sinh, danh sách các công ty giàu nhất thế giới, … Khi sử dụng thẻ danh sách, nghĩa là bạn đã thông
báo cho các công cụ tìm kiếm biết sự liên quan của các phần tử trong danh sách.
Nói cách khác, Danh sách trong HTML là cách để hiển thị thông tin theo cách có cấu trúc, bao gồm một danh
sách các mục hoặc thông tin tương tự.
Có ba loại danh sách chính trong HTML:
Danh sách không có thứ tự (Unordered list - <ul>)
Danh sách có thứ tự (Ordered list - <ol>)
Danh sách mô tả (Definition list - <dl>)
Cùng nhau đi tìm hiểu xem từng loại như thế nào nhé!
2. Danh sách – Ordered List
Loại danh sách này được sử dụng khi có một thứ tự cụ thể cho các mục trong danh sách. Mục trong danh sách
có thứ tự này thường được đánh số.
Loại danh sách này được định nghĩa bằng thẻ tag: <ol>
Ví dụ Danh sách các trường đại học tại thành phố Hồ Chí Minh
<h1>Các Trường Đại học tại TP Hồ Chí Minh</h1>
<ol>
<li>Đại học Quốc gia TP Hồ Chí Minh</li>
<li>Trường Đại học Khoa học Xã hội và Nhân văn</li>
<li>Trường Đại học Khoa học Tự nhiên</li>
<li>Trường Đại học Kinh tế - Luật</li>
<li>Trường Đại học Ngoại ngữ - Tin học</li>
<li>Trường Đại học Sư phạm Kỹ thuật</li>
<li>Trường Đại học Sư phạm</li>
</ol>
3. Danh sách – Unordered List
Loại danh sách này được sử dụng khi không có thứ tự cụ thể cho các mục trong danh sách. Mục trong danh
sách không có thứ tự này thường được đánh dấu bằng các ký hiệu điểm đen.
Loại danh sách này được định nghĩa bằng thẻ tag: <ul>
Ví dụ
<h2>Unordered List</h2>
<ul>
2. Bài 4 – Web Danh Sách Lộ Trình Học Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 2
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
4. Danh sách – Definition List
Loại danh sách này được sử dụng để hiển thị các cặp khóa-giá trị hoặc định nghĩa.
Một danh sách mô tả gồm các phần tử <dt> (danh sách tiêu đề) và <dd> (danh sách mô tả).
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Management</title>
</head>
<body>
<h1>Job Management</h1>
<dl>
<dt>Task 1</dt>
<dd>Define project scope and objectives</dd>
<dt>Task 2</dt>
<dd>Create project schedule</dd>
<dt>Task 3</dt>
<dd>Assign roles and responsibilities</dd>
<dt>Task 4</dt>
<dd>Monitor progress and track milestones</dd>
</dl>
</body>
</html>
5. CSS List
CSS list (danh sách CSS) đề cập đến các kiểu và quy tắc mà bạn có thể áp dụng cho các danh sách HTML
(unordered list - <ul>, ordered list - <ol>, và definition list - <dl>) để tùy chỉnh và trang trí chúng.
5.1. List-style-type
Xác định loại ký hiệu điểm (marker) được sử dụng trong danh sách.
Ví dụ:
Với thẻ <ol> (decimal, lower-alpha, upper-alpha, lower-roman, …)
Với thẻ <ul> (disc, square, circle, none)
Ví dụ 1 Ví dụ với dạng unordered-list
ul {
list-style-type: circle; /* Ký hiệu điểm tròn */
}
3. Bài 4 – Web Danh Sách Lộ Trình Học Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 3
Ví dụ 2 Ví dụ với dạng ordered-list
ol {
list-style-type: upper-roman; /* Đánh số bằng số La Mã in hoa */
}
5.2. List-style-image
Sử dụng hình ảnh làm ký hiệu điểm thay vì các ký tự tiêu chuẩn.
Ví dụ Ví dụ với dạng unordered-list và cách sử dụng với ordered-list cũng tương tự
ul {
list-style-image: url('marker.png'); /* Sử dụng hình ảnh 'marker.png' */
}
5.3. List-style-position
Xác định vị trí của ký hiệu điểm (inside hoặc outside).
Ví dụ Ví dụ với dạng unordered-list và cách sử dụng với ordered-list cũng tương tự
ul {
list-style-position: inside; /* Ký hiệu điểm bên trong vùng nội dung */
}
5.4. List-style
Kết hợp các thuộc tính list-style-type, list-style-image và list-style-position thành một thuộc tính duy nhất.
Ví dụ Ví dụ với dạng unordered-list
ul {
list-style: square inside url('marker.png');
/* Ký hiệu điểm vuông, bên trong, sử dụng hình ảnh */
}
5.5. List-style-color
Xác định màu sắc của ký hiệu điểm.
Ví dụ Ví dụ với dạng unordered-list và cách sử dụng với ordered-list cũng tương tự
ul {
list-style-color: red; /* Màu đỏ cho ký hiệu điểm */
}
4. Bài 4 – Web Danh Sách Lộ Trình Học Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 4
THỰC HÀNH
Sử dụng các kiến thức đã học ở trên và dự án đã thực hiện ở bài trước, hãy thực hiện trang web như sau:
