TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
GIÁO TRÌNH
THIẾT KẾ WEB CƠ BẢN
(Lưu hành nội bộ)
Hà Nội năm 2024
1
MỤC LỤC
LỜI GIỚI THIỆU ......................................... Error! Bookmark not defined.
BÀI 1: TỒNG QUAN VỀ HTML .............................................................. 8
1. Giới thiệu ............................................................................................... 8
2. Trình soạn thảo ...................................................................................... 8
3. Các thành phần chính của HTML ......................................................... 9
4. Cấu trúc thẻ ......................................................................................... 11
5. Thuộc tính của thẻ HTML .................................................................. 12
BÀI 2: CÁC THẺ ĐỊNH DẠNG .............................................................. 14
1. Thẻ định dạng kiểu cách, cỡ chữ ........................................................ 14
2. Thẻ định dạng về bố cục ..................................................................... 16
3. Bài tập ................................................................................................. 17
BÀI 3: DANH SÁCH VÀ SIÊU LIÊN KẾT ........................................... 19
1. Danh sách ............................................................................................ 19
1.1 Tạo danh sách không có thứ tự ..................................................... 19
1.2 Danh sách có thứ tự....................................................................... 20
2. Siêu liên kết ......................................................................................... 20
2.1 Cú pháp ......................................................................................... 20
2.2 Thuộc tính ..................................................................................... 21
3. Bài tập ................................................................................................. 22
BÀI 4: HÌNH ẢNH VÀ FORM ................................................................ 23
1. Hình ảnh .............................................................................................. 23
1.1 Cú pháp thẻ ................................................................................... 23
1.2 Thuộc tính thẻ ............................................................................... 23
2. Form .................................................................................................... 23
2.1 Thẻ Input ....................................................................................... 24
2.2 Thẻ Select ...................................................................................... 26
2
2.3 File Upload .................................................................................... 27
2.4 Button ............................................................................................ 27
3. Bài tập ................................................................................................. 28
BÀI 5: TABLE VÀ LAYOUT .................................................................. 30
1. Table .................................................................................................... 30
1.1 Cú pháp thẻ ................................................................................... 30
2.2 Một số thuộc tính của thẻ .............................................................. 31
2.3 Gộp ô trong bảng ........................................................................... 32
2. Layout ................................................................................................. 34
3. Bài tập ................................................................................................. 35
BÀI 6: ĐỊNH DẠNG CSS ......................................................................... 38
1. Giới thiệu CSS .................................................................................... 38
2. Cú pháp CSS ....................................................................................... 38
3. Vị trí đặt CSS ...................................................................................... 39
4. Định dạng CSS .................................................................................... 41
4.1 CSS Text ....................................................................................... 41
4.2 CSS background ............................................................................ 43
4.3 CSS Margin ................................................................................... 46
4.4 CSS padding .................................................................................. 47
4.5 CSS border .................................................................................... 47
4.6 CSS Font ....................................................................................... 49
5. Bài tập ................................................................................................. 51
BÀI 7: SỬ DỤNG CSS CHO DÀN TRANG .......................................... 54
1. CSS table ............................................................................................ 54
1.1 Thuộc tính border .......................................................................... 54
1.2 Thuộc tính border-collapse ........................................................... 54
1.3 Thuộc tính background-color ........................................................ 55
1.4 Thuộc tính padding ....................................................................... 55
3
1.5 Thuộc tính width và height ........................................................... 55
1.6 Hover ............................................................................................. 56
1.7 Thuộc tính nth-child ...................................................................... 56
1.8 Bảng reponsive .............................................................................. 57
2. Dàn trang bằng css flexbox ................................................................. 58
2.1 Flex Container ............................................................................... 60
2.2 Flex-direction ................................................................................ 62
2.3 Flex-wrap ...................................................................................... 64
2.4 justified-content ............................................................................ 66
2.5 align-items ..................................................................................... 68
TÀI LIỆU THAM KHẢO ........................................................................ 69
4
GIÁO TRÌNH MÔN HỌC/ MÔ ĐUN
Tên môn học/ mô đun: Cơ bản về HTML & CSS
Mã môn học/ mô đun: MĐ 17
1. Vị trí, tính chất của mô đun:
- Vị trí: Kiến thức cơ bản về HTML, CSS là mô đun chuyên môn trong
chương trình đào tạo. Mô đun được bố trí giảng dạy sau khi đã học xong các môn
học, mô đun cơ sở.
- Tính chất: Mô đun thuộc lĩnh vực công nghệ thông tin để thiết kế các trang
web tĩnh bằng HTML, CSS và được áp dụng trong các chuyên ngành Thiết kế đồ
họa, Thiết kế trang web và Quản trị mạng.
2. Mục tiêu mô đun:
- Về kiến thức:
+ Trình bày được cấu trúc chung tài liệu HTML.
+ Trình bày được các thẻ HTML văn bản, bảng, liên kết, ảnh, metadata,
media, form,....
+ Trình bày được các thuộc tính trong HTML.
+ Trình bày được các phương pháp nhúng mã CSS trong tài liệu HTML.
+ Trình bày được các thược tính background, căn lề, margin, padding, văn
bản, position,... trong CSS.
- Về kỹ năng:
+ Tạo được website HTML sử dụng các thành phần văn bản, bảng, liên kết,
danh sách, form, media, metadata,...
+ Tạo được website sử dụng CSS cho các thuộc tính ảnh nền, dãn dòng, căn
lề, position,...
- Về năng lực tự chủ và trách nhiệm:
+ Rèn luyện đức tính cẩn thận, chăm chỉ, khả năng tìm kiếm tài liệu chuyên
ngành và tra cứu online.
+ Chấp hành nghiêm túc các quy định về kỹ thuật, an toàn và bảo quản máy
tính.
3. Nội dung mô đun:
Bài 1: Tổng quan về HTML