ỦY BAN NHÂN DÂN TỈNH THANH HÓA
TRƯỜNG CAO ĐẲNG CÔNG NGHIỆP THANH HÓA
GIÁO TRÌNH
MÔN HỌC/MÔ ĐUN: THIẾT KẾ GIAO DIỆN WEBSITE
NGÀNH, NGHỀ: CÔNG NGHỆ THÔNG TIN (ƯDPM)
TRÌNH ĐỘ: CAO ĐẲNG
(Ban hành kèm theo Quyết định số: /QĐ-TCĐCN ngày…tháng….năm
2025 của Hiệu trưởng Trường Cao đẳng Công nghiệp Thanh Hóa)
THANH HÓA, NĂM 2025
TUYÊN BỐ BẢN QUYỀN
Nhằm đáp ứng nhu cầu học tập và nghiên cứu cho giảng viên và sinh viên
nghề Công nghệ Thông tin (ƯDPM) trong trường Cao đẳng Công nghiệp Thanh
Hóa, chúng tôi đã thực hiện biên soạn tài liệu Thiết kế giao diện website.
Tài liệu được biên soạn thuộc loại giáo trình phục vụ giảng dạy và học tập,
lưu hành nội bộ trong Nhà trường nên các nguồn thông tin có thể được phép dùng
nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh
thiếu lành mạnh sẽ bị nghiêm cấm.
LỜI GIỚI THIỆU
Giáo trình “Thiết kế giao diện website” được biên soạn dựa trên khung
chương trình đào tạo Cao đẳng nghề Công nghệ Thông tin (ƯDPM) đã được Hiệu
trưởng Trường Cao đẳng Công nghiệp Thanh Hóa phê duyệt.
Tác giả đã nghiên cứu một số tài liệu, công nghệ hiện đại kết hợp với kinh
nghiệm làm việc thực tế để viết nên giáo trình này. Nội dung được tác giả trình bày
cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết theo nguyên tắc
quan tâm đến kết quả đầu ra, khả năng tự học và kỹ năng cần thiết để HSSV có thể
hoàn thành thiết kế và lập trình nhúng xử lý tương tác cơ bản trên trang web với sự
kết hợp của HTML5 và CSS3, lập trình nhúng xử lý cơ bản trên trang web bằng
Javascript … tạo và quản lý nội dung của website nhu cầu thực tế của doanh
nghiệp.
Nội dung giáo trình được chia thành 3 bài, trong đó:
Bài 1: Tạo trang web bằng HTML và HTML5
Bài 2: Định dạng trang web bằng CSS và CSS3
Bài 3: Ngôn ngữ Javascript
Trong quá trình biên soạn, không tránh khỏi thiếu sót. Tác giả rất mong nhận
được ý kiến đóng góp của quý thầy/cô và các em học sinh, sinh viên để tiếp tục
hoàn thiện hơn.
Xin chân thành cảm ơn quý đồng nghiệp, bạn bè đã có những ý kiến đóng góp
trong quá trình biên soạn giáo trình này.
Thanh Hóa, ngày tháng năm 2025
Tham gia biên soạn
1. Trần Thế Anh – Chủ biên
2. Nguyễn Hồng Hà
3. Lê Ngọc Tâm
MỤC LỤC
BÀI 1: TẠO TRANG WEB BẰNG HTML VÀ HTML5........................................2
1. Khái quát về HTML...........................................................................................2
1.1. Giới thiệu về HTML....................................................................................2
1.2. Thẻ (Tag) trong HTML................................................................................3
1.3. Công nghệ trong trang HTML.....................................................................4
1.4. Thẻ <html>...................................................................................................4
1.5. Thẻ <head>...................................................................................................5
1.6. Thẻ <title>....................................................................................................6
1.7. Thẻ <meta>..................................................................................................6
1.8. Thẻ <body>.................................................................................................. 6
1.9. Trang HTML đầu tiên..................................................................................7
2. Chú thích trong HTML.......................................................................................7
3. Phần tử HTML và các thuộc tính.......................................................................8
3.1. Các phần tử HTML......................................................................................8
3.2. Thuộc tính HTML........................................................................................8
4. Một số thẻ cơ bản trong HTML.......................................................................10
4.1. Các thẻ heading <h1> - <h6> của HTML..................................................10
4.2. Thẻ <p> và <br> trong đoạn văn HTML...................................................11
4.3. Ký tự khoảng trắng whitespace..................................................................11
4.4. Thẻ định dạng văn bản HTML...................................................................13
4.5. Sử dụng thẻ <hr>........................................................................................14
4.6. Thuộc tính toàn cục....................................................................................15
4.7. Chèn ảnh vảo HTML.................................................................................16
4.8. Thẻ <a> tạo liên kết HTML.......................................................................17
4.9. Tạo danh sách với <ul> <ol> <li>..............................................................19
4.10. Tạo bảng biểu...........................................................................................21
4.11. Phần tử cấp độc block và inline...............................................................26
4.12. Thẻ <div> và <span> trong HTML..........................................................28
4.13. Màu sắc HTML........................................................................................29
4.14. Tạo FORM HTML...................................................................................31
4.15. Thẻ <label>, <input>................................................................................36
4.16. Thẻ <textarea>.........................................................................................41
4.17. Thẻ <select> và <option> trong HTML...................................................42
5. Một số thẻ mới trong HTML5..........................................................................44
5.1. Giới thiệu HTML5.....................................................................................44
5.2. Cấu trúc trang HTML5...............................................................................46
5.3. Thẻ header, footer, nav trong HTML5.......................................................48
5.4. Thẻ article, section và aside trong HTML5................................................49
5.5. Thẻ audio, video trong HTML5.................................................................50
5.6. Tạo progress bar trong HTML5.................................................................51
5.7. Ảnh SVG trong HTML5............................................................................52
5.8. Một số thuộc tính mới trong Form.............................................................57
Bài tập thực hành..................................................................................................59
Bài tập 1. Thiết kế trang Gioithieu.html...........................................................59
Bài tập 2. Thiết kế trang Left.html....................................................................60
Bài tập 3. Thiết kế trang Sanpham.html............................................................60
Bài tập 4. Thiết kế trang Chitietsanpham.html.................................................61
Bài tập 5. Thiết kế trang Dangnhap.html..........................................................61
Bài tập 6. Thiết kế trang Dangky.html..............................................................62
BÀI 2: ĐỊNH DẠNG TRANG WEB BẰNG CSS VÀ CSS3.................................64
1. Khái niệm.........................................................................................................64
2. Cú pháp CSS....................................................................................................66
3. Selector chọn phần tử.......................................................................................68
3.1. Cú pháp......................................................................................................68
3.2. Nhóm nhiều selector..................................................................................69
4. Thuộc tính định dạng text.................................................................................74
4.1. Thuộc tính color và tên màu sắc................................................................74
4.2. Thuộc tính font-family...............................................................................75
4.3. Thuộc tính font-size, font-style, font-weight, font-variant.........................78
4.4. Thuộc tính text-transform..........................................................................80
4.5. Thuộc tính đổ bóng text-shadow................................................................80
