GIÁO TRÌNH
MÔ ĐUN: CƠ BẢN VỀ HTML & CSS
NGÀNH, NGHỀ: THIẾT KẾ TRANG WEB
TRÌNH ĐỘ: CAO ĐẲNG
Ban hành kèm theo Quyết định số: /QĐ-… ngày…….tháng….năm .........
của Hiệu trưởng Trường Cao đẳng Cơ điện Hà Nội
Hà Nội, năm 2024
BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN
TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
Địa chỉ: 160 Mai Dịch, Cầu Giấy, TP. Hà Nội
ĐT: 024.38372655 Email: cdhn@codienhanoi.edu.vn
Fax: 024.3768337 Website: www.codienhanoi.edu.vn
TUYÊN BỐ BẢN QUYỀN
Giáo trình này sử dụng làm tài liệu giảng dạy nội bộ trong Trường Cao
đẳng Cơ điện Hà Nội.
Trường Cao đẳng Cơ điện Hà Nội không sử dụng và không cho phép
bất kỳ cá nhân hay tổ chức nào sử dụng giáo trình này với mục đích kinh
doanh.
Mọi trích dẫn, sử dụng giáo trình này với mục đích khác hay ở nơi khác
đều phải được sự đồng ý bằng văn bản của Trường cao đẳng Cơ điện Hà Nội.
1
LỜI GIỚI THIỆU
Mô đun Cơ bản về HTML & CSS là mô đun chuyên ngành cho sinh viên
chuyên ngành Thiết kế trang web. Giáo trình cung cấp các bài học có chỉ dẫn súc
tích và bao quát toàn bộ kỹ năng cơ bản về HTML, CSS. Giáo trình chia thành 2
phần chính:
- Phần 1: Cơ bản về HTML bao gồm các bài từ bài 1 đến bài 5
- Phần 2: Cơ bản về CSS gồm bài 6 và bài 7
Trong quá trình biên soạn giáo trình không thể tránh khỏi những thiết sót nên
nhóm tác giả rất mong nhận được ý kiến đóng góp của hội đồng thẩm định để giáo
trình đạt chất lượng tốt hơn.
Hà Nội, ngày Tháng 05 Năm 2024
Nhóm tác giả
2
MỤC LỤC
LỜI GIỚI THIỆU ....................................................................................... 1
BÀI 1: TỒNG QUAN VỀ HTML .............................................................. 9
1. Giới thiệu ............................................................................................... 9
2. Trình soạn thảo ...................................................................................... 9
3. Các thành phần chính của HTML ....................................................... 10
4. Cấu trúc thẻ ......................................................................................... 12
5. Thuộc tính của thẻ HTML .................................................................. 13
BÀI 2: CÁC THẺ ĐỊNH DẠNG .............................................................. 15
1. Thẻ định dạng kiểu cách, cỡ chữ ........................................................ 15
2. Thẻ định dạng về bố cục ..................................................................... 17
3. Bài tập ................................................................................................. 18
BÀI 3: DANH SÁCH VÀ SIÊU LIÊN KẾT ........................................... 20
1. Danh sách ............................................................................................ 20
1.1 Tạo danh sách không có thứ tự ..................................................... 20
1.2 Danh sách có thứ tự....................................................................... 21
2. Siêu liên kết ......................................................................................... 21
2.1 Cú pháp ......................................................................................... 21
2.2 Thuộc tính ..................................................................................... 22
3. Bài tập ................................................................................................. 23
BÀI 4: HÌNH ẢNH VÀ FORM ................................................................ 24
1. Hình ảnh .............................................................................................. 24
1.1 Cú pháp thẻ ................................................................................... 24
1.2 Thuộc tính thẻ ............................................................................... 24
2. Form .................................................................................................... 24
2.1 Thẻ Input ....................................................................................... 25
2.2 Thẻ Select ...................................................................................... 27
3
2.3 File Upload .................................................................................... 28
2.4 Button ............................................................................................ 28
3. Bài tập ................................................................................................. 29
BÀI 5: TABLE VÀ LAYOUT .................................................................. 31
1. Table .................................................................................................... 31
1.1 Cú pháp thẻ ................................................................................... 31
2.2 Một số thuộc tính của thẻ .............................................................. 32
2.3 Gộp ô trong bảng ........................................................................... 33
2. Layout ................................................................................................. 35
3. Bài tập ................................................................................................. 36
BÀI 6: ĐỊNH DẠNG CSS ......................................................................... 39
1. Giới thiệu CSS .................................................................................... 39
2. Cú pháp CSS ....................................................................................... 39
3. Vị trí đặt CSS ...................................................................................... 40
4. Định dạng CSS .................................................................................... 42
4.1 CSS Text ....................................................................................... 42
4.2 CSS background ............................................................................ 44
4.3 CSS Margin ................................................................................... 47
4.4 CSS padding .................................................................................. 48
4.5 CSS border .................................................................................... 48
4.6 CSS Font ....................................................................................... 50
5. Bài tập ................................................................................................. 52
BÀI 7: SỬ DỤNG CSS CHO DÀN TRANG .......................................... 55
1. CSS table ............................................................................................ 55
1.1 Thuộc tính border .......................................................................... 55
1.2 Thuộc tính border-collapse ........................................................... 55
1.3 Thuộc tính background-color ........................................................ 56
1.4 Thuộc tính padding ....................................................................... 56