Tổng quan về giáo trình

Giáo trình "Thiết kế giao diện website" (Mã mô đun: MĐ17) là tài liệu đào tạo chuyên môn thuộc chương trình đào tạo ngành Công nghệ thông tin (chuyên ngành Ứng dụng phần mềm), trình độ Cao đẳng. Tài liệu được ban hành chính thức theo quyết định của Hiệu trưởng Trường Cao đẳng Công nghiệp Thanh Hóa vào năm 2025, do nhóm tác giả gồm Trần Thế Anh (Chủ biên), Nguyễn Hồng Hà và Lê Ngọc Tâm biên soạn.

Trong chương trình đào tạo, mô đun MĐ17 được bố trí giảng dạy sau khi sinh viên đã hoàn thành các môn học thuộc khối kiến thức cơ sở ngành và học phần Đồ họa ứng dụng. Về mặt mục tiêu học tập (learning outcomes), giáo trình trang bị cho người học hệ thống kiến thức toàn diện về công dụng của các thẻ đánh dấu HTML, chuẩn HTML5, các thuộc tính định dạng CSS, CSS3 và các cấu trúc cơ bản của ngôn ngữ kịch bản JavaScript. Về chuẩn đầu ra kỹ năng, sinh viên có khả năng phân chia bố cục, thiết kế giao diện hoàn chỉnh bằng HTML/CSS và lập trình nhúng xử lý tương tác cơ bản trên trang web bằng JavaScript. Đồng thời, mô đun rèn luyện năng lực tự chủ và trách nhiệm, bao gồm tác phong công nghiệp, kỷ luật lao động, kỹ năng làm việc độc lập và làm việc nhóm, bảo đảm an toàn và vệ sinh thiết bị trong phòng máy.

Cấu trúc giáo trình bao gồm 3 bài học chính:

  • 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

Về cách tiếp cận, giáo trình áp dụng nguyên tắc đào tạo dựa trên kết quả đầu ra, trình bày cô đọng lý thuyết, tích hợp các bước hướng dẫn thực hành chi tiết. Điểm đặc thù của tài liệu là phục vụ công tác giảng dạy nội bộ, tích hợp đồng bộ công nghệ hiện đại với quy trình sản xuất giao diện thực tế nhằm đáp ứng yêu cầu tuyển dụng của doanh nghiệp.

Nội dung kiến thức cốt lõi

Các chương/chủ đề chính

Nội dung chuyên môn của giáo trình được cấu trúc thành 3 bài học kỹ thuật:

  1. Bài 1: Tạo trang web bằng HTML và HTML5 (Mã bài: MĐ17.01): Khái quát về ngôn ngữ đánh dấu siêu văn bản, phân biệt trang web tĩnh (tệp tin .htm/.html lưu trên web server) và trang web động (phát sinh từ ứng dụng máy chủ như PHP, C#). Nội dung hướng dẫn cấu trúc tệp HTML cơ bản (<!DOCTYPE html>, <html>, <head>, <body>); các thẻ chức năng trong <head> gồm <title> và <meta> (thiết lập charset="utf-8", description, viewport); quy tắc ghi chú thích <!-- -->; hệ thống thẻ tiêu đề <h1> đến <h6>; thẻ đoạn văn <p>, ngắt dòng
    , đường kẻ <hr>; quy chuẩn xử lý khoảng trắng (whitespace) và ký tự thực thể &nbsp;; các thẻ định dạng ký tự (<b>, <strong>, <i>, <em>, <sub>, <sup>, <ins>, <del>); các thuộc tính toàn cục (class, id, style, title, data-*, draggable, hidden, accesskey, contenteditable); chèn ảnh <img>; liên kết <a> (thuộc tính href, target, rel="nofollow"); danh sách <ol>, <ul>, <li>; bảng dữ liệu <table>, <tr>, <td>, <th>, <caption>, <thead>, <tfoot> cùng thuộc tính colspan, rowspan; phân biệt cấp độ hiển thị block và inline thông qua thẻ <div> và <span>; quy tắc màu sắc RGB và Hexadecimal; xây dựng biểu mẫu <form> với phương thức GET/POST, thẻ <label>, các loại <input> (text, password, radio, checkbox, color, date, email, number, range, file, url), thẻ <textarea>, <select>, <option> và <optgroup>; giới thiệu thẻ ngữ nghĩa HTML5 (header, nav, section, article, aside, footer), thẻ đa phương tiện (audio, video), thanh tiến trình <progress> và đồ họa véc-tơ SVG.
  2. Bài 2: Định dạng trang web bằng CSS và CSS3 (Mã bài: MĐ17.02): Giới thiệu các bộ chọn (selectors), kỹ thuật nhóm selector, thuộc tính định dạng văn bản và phông chữ (font-family, font-size, text-align, line-height, text-shadow), mô hình hộp (Box Model gồm padding, border, margin, box-sizing), cơ chế hiển thị và định vị (display, visibility, overflow, float, clear, position, z-index), thiết lập nền (background-color, background-image, background-size, background-clip). Đồng thời cập nhật các tính năng CSS3 gồm bóng đổ box-shadow, màu trong suốt rgba, hsla, màu chuyển sắc linear-gradient, radial-gradient, biến đổi transform, chuyển động transition, animation, bộ lọc filter, quy tắc @font-face, kỹ thuật bố cục Flexbox, CSS Grid và thiết kế đáp ứng qua @media.
  3. Bài 3: Ngôn ngữ Javascript (Mã bài: MĐ17.03): Hướng dẫn phương pháp nhúng JavaScript vào tài liệu HTML, cấu trúc cú pháp, kiểu dữ liệu, khai báo biến, biểu thức, toán tử, các cấu trúc điều khiển rẽ nhánh và vòng lặp, khái niệm đối tượng, xử lý sự kiện tương tác và các đối tượng giao diện thường dùng.

Logic phát triển nội dung tuân thủ tiến trình kỹ thuật: thiết lập cấu trúc ngữ nghĩa (HTML) -> định hình bố cục và mỹ thuật (CSS) -> tích hợp tương tác hành vi phía client (JavaScript).

Kiến thức nền tảng được xây dựng

Giáo trình hình thành hệ thống nguyên lý nền tảng của công nghệ web:

  • Cơ chế phân cấp phần tử: Xác lập ranh giới kỹ thuật giữa phần tử khối (block) dàn trải theo chiều dọc và phần tử nội dòng (inline) chiếm không gian theo dữ liệu; nguyên tắc mô hình nội dung quy định inline không chứa block (ngoại trừ thẻ liên kết <a>).
  • Xử lý hiển thị văn bản: Quy chuẩn trình duyệt tự động gộp nhiều khoảng trắng thành một khoảng trắng đơn và loại bỏ khoảng trắng ở đầu/cuối thẻ; cách dùng thực thể &nbsp; để duy trì khoảng cách.
  • Không gian màu kỹ thuật số: Nguyên lý pha trộn màu RGB (từ 0 đến 255) và định dạng số thập lục phân Hex 6 ký tự (#RRGGBB) để biểu diễn 16 triệu màu sắc.
  • Cơ chế truyền thông biểu mẫu: Cấu trúc thông điệp HTTP Request Message, phân định độ an toàn giữa phương thức GET (hiển thị tham số trên thanh URL) và POST (đóng gói dữ liệu trong thân bản tin), cơ chế tải tệp lên máy chủ với thuộc tính enctype="multipart/form-data".
  • Mô hình hộp và hiển thị đa thiết bị: Nguyên tắc Box Model trong tính toán kích thước phần tử và cấu hình thẻ <meta name="viewport"> để kiểm soát tỷ lệ thu phóng trên các loại màn hình.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã nguồn HTML5 chuẩn cấu trúc; xây dựng bảng biểu có tổ chức tiêu đề và gộp ô phức tạp; thiết kế biểu mẫu nhập liệu đa thành phần; viết mã định dạng CSS3 kiểm soát màu sắc, phông chữ, bố cục dạng lưới; nhúng mã JavaScript để bắt và xử lý sự kiện người dùng.
  • Kỹ năng phân tích (Analytical skills): Phân tích giao diện mẫu thành các phân vùng ngữ nghĩa phù hợp; xác định đúng phương thức truyền dữ liệu biểu mẫu dựa trên yêu cầu bảo mật; lựa chọn đúng kiểu selector và giải pháp bố cục (Flexbox, Grid hoặc Box Model) để xử lý hiển thị.
  • Năng lực ứng dụng thực tế (Practical competencies): Chuyển đổi yêu cầu giao diện thành mã nguồn hoàn chỉnh; sử dụng các công cụ kiểm thử endpoint trực tuyến (httpbin.org/anything) để kiểm tra dữ liệu gửi đi từ form; viết mã nguồn có chú thích khoa học; vận hành thiết bị phòng máy đúng quy trình an toàn.

Phương pháp giảng dạy và học tập

Giáo trình áp dụng phương pháp sư phạm tiếp cận năng lực thực hành (competency-based training), kết hợp giữa việc giải thích nguyên lý kỹ thuật và cung cấp các đoạn mã nguồn mẫu minh họa trực tiếp. Cấu trúc mỗi phần lý thuyết luôn đi liền với ví dụ mã và phân tích kết quả hiển thị trên trình duyệt.

Hệ thống bài tập thực hành được phân bổ chi tiết theo từng bài học:

  • Thực hành Bài 1: Sau khi học xong các thẻ cơ bản và kỹ thuật form, sinh viên thực hiện 6 bài tập thiết kế các trang web thành phần của một website thương mại điện tử, bao gồm: trang Giới thiệu (Gioithieu), trang Cột trái (Left), trang Sản phẩm (Sanpham), trang Chi tiết sản phẩm (Chitietsanpham), trang Đăng nhập (Dangnhap), và trang Đăng ký (Dangky).
  • Thực hành Bài 2: Sinh viên áp dụng kiến thức CSS và CSS3 để xây dựng hoàn chỉnh giao diện trang web theo hệ thống mẫu quy định tại mục 28 của giáo trình, yêu cầu kết hợp bộ chọn, Box Model, định dạng bảng, Flexbox, Grid và quy tắc @media.
  • Thực hành Bài 3: Sinh viên thực hiện các bài tập lập trình xử lý sự kiện và thao tác trên đối tượng tại mục 63, kiểm soát tương tác giao diện người dùng.

Phương pháp đánh giá học phần căn cứ trên kết quả đầu ra:

  • Đánh giá kiến thức: Kiểm tra mức độ hiểu công dụng của các thẻ HTML, thuộc tính CSS, Box Model và các cấu trúc lệnh JavaScript.
  • Đánh giá kỹ năng: Chấm điểm trực tiếp sản phẩm thực hành dựa trên tính chuẩn xác của mã nguồn, khả năng phân chia bố cục giao diện, tính hoàn thiện của form nhập liệu và khả năng xử lý tương tác client-side.
  • Đánh giá năng lực tự chủ và trách nhiệm: Đánh giá tính kỷ luật, ý thức tổ chức, tác phong công nghiệp, khả năng làm việc độc lập, năng lực hợp tác nhóm, cùng việc chấp hành an toàn và vệ sinh phòng máy.

Về quy trình tự học, sinh viên được hướng dẫn đọc hiểu mã nguồn mẫu, tự nhập mã vào trình soạn thảo để quan sát kết quả kết xuất, đồng thời tận dụng các dịch vụ kiểm thử trực tuyến (như httpbin.org/anything) để tự đánh giá tính chính xác của các tham số form.

Điểm nổi bật và cập nhật

Tài liệu thể hiện rõ các điểm cập nhật công nghệ thiết kế giao diện web theo các tiêu chuẩn mới:

  • Loại bỏ các định dạng lỗi thời, chuẩn hóa theo CSS: Giáo trình phân tích rõ sự chuyển dịch từ các thuộc tính trình bày cũ trong HTML sang CSS. Tài liệu chỉ rõ các thuộc tính và thẻ không còn được khuyến nghị như: thuộc tính align trên các thẻ cấu trúc (<p>, <hr>, <table>), thuộc tính bgcolor, thẻ đổi màu chữ <font>, hay thẻ phóng to kích thước <big>. Toàn bộ các định dạng hiển thị này được hướng dẫn thay thế hoàn toàn bằng các thuộc tính CSS tương ứng.
  • Tích hợp các tiêu chuẩn mới của HTML5: Tài liệu cập nhật cấu trúc trang HTML5 hiện đại bắt đầu bằng khai báo <!DOCTYPE html>, bổ sung thẻ cấu hình khung nhìn <meta name="viewport" content="width=device-width, initial-scale=1.0"> đáp ứng đa thiết bị. Giáo trình đưa vào hệ thống thẻ ngữ nghĩa cấu trúc (header, footer, nav, article, section, aside), các phần tử đa phương tiện nhúng trực tiếp (<audio>, <video>), thanh đo tiến trình <progress>, cùng khả năng nhúng ảnh véc-tơ SVG.
  • Áp dụng các kỹ thuật bố cục CSS3 hiện đại: Bên cạnh các kỹ thuật cơ bản như float, clear và position, giáo trình cập nhật hai phương pháp bố cục giao diện chuẩn hiện nay là Flexbox và CSS Grid. Đi kèm với đó là quy tắc @media hỗ trợ thiết kế đáp ứng (Responsive Web Design), quy tắc nhúng phông chữ ngoại vi @font-face, các hiệu ứng đồ họa box-shadow, màu trong suốt rgba/hsla, màu chuyển sắc gradient, cùng các phép biến đổi và chuyển động transform, transition, animation.
  • Gắn liền bài tập với ứng dụng doanh nghiệp: Các bài tập thực hành không dừng lại ở mức ví dụ cú pháp đơn lẻ mà mô phỏng các trang chức năng thực tế trong dự án doanh nghiệp: trang giới thiệu, cấu trúc cột điều hướng, trang danh mục và chi tiết sản phẩm, hệ thống bảng tính đơn hàng phức tạp bằng colspan/rowspan, và biểu mẫu đăng nhập, đăng ký tích hợp xác thực dữ liệu đầu vào.

Đối tượng sử dụng giáo trình

Giáo trình "Thiết kế giao diện website" được biên soạn phục vụ các nhóm đối tượng cụ thể:

  • Sinh viên chuyên ngành: Đối tượng trọng tâm là sinh viên hệ Cao đẳng nghề Công nghệ thông tin (chuyên ngành Ứng dụng phần mềm) tại Trường Cao đẳng Công nghiệp Thanh Hóa, học tập trong khuôn khổ mô đun MĐ17.
  • Điều kiện tiên quyết (Prerequisites): Để tiếp thu hiệu quả nội dung mô đun, người học cần hoàn thành các môn học cơ sở của nghề Công nghệ thông tin và học phần Đồ họa ứng dụng. Khối kiến thức này cung cấp tư duy logic về công nghệ phần mềm và các kỹ năng xử lý hình ảnh, thẩm mỹ giao diện cần thiết trước khi viết mã nguồn.
  • Giảng viên chuyên môn: Tài liệu đóng vai trò là giáo trình chuẩn để giảng viên xây dựng kế hoạch bài giảng, phân bổ thời lượng giữa lý thuyết kỹ thuật và thực hành phòng máy, đồng thời làm căn cứ biên soạn đề kiểm tra, đánh giá kỹ năng nghề của sinh viên.
  • Người tự học và tham khảo kỹ thuật: Giáo trình là tài liệu tra cứu có hệ thống cho người học muốn tìm hiểu quy trình xây dựng giao diện web từ đầu. Hệ thống bảng mục lục chi tiết, danh mục thuộc tính form, phân loại thẻ block/inline, và các ví dụ mã cụ thể hỗ trợ người học tự củng cố kỹ năng lập trình web client-side.

Câu hỏi thường gặp

1. Giáo trình này phù hợp với ai?
Tài liệu được biên soạn phục vụ sinh viên đào tạo trình độ Cao đẳng nghề Công nghệ thông tin (chuyên ngành Ứng dụng phần mềm) và giảng viên giảng dạy mô đun thiết kế web. Tài liệu cũng phù hợp làm tài liệu tham khảo cho người tự học các kiến thức nền tảng về HTML, CSS và JavaScript.

2. Cần kiến thức nền nào để học?
Người học cần học xong các môn học thuộc khối kiến thức cơ sở ngành công nghệ thông tin và học phần Đồ họa ứng dụng theo khung chương trình đào tạo của nhà trường.

3. Điểm khác biệt với giáo trình khác?
Giáo trình tích hợp liên hoàn ba thành phần công nghệ nền tảng (HTML5, CSS3, JavaScript) trong một mô đun thống nhất (MĐ17). Nội dung tập trung vào chuẩn đầu ra thực hành, phân tích rõ các thẻ lỗi thời cần tránh, và xây dựng hệ thống bài tập thực tế gắn với 6 trang giao diện cụ thể của một website thương mại điện tử.

4. Làm sao để tự học hiệu quả?
Người học cần thực hiện tuần tự từ Bài 1 đến Bài 3, tự gõ lại toàn bộ các đoạn mã ví dụ trong giáo trình để quan sát kết quả hiển thị, sử dụng dịch vụ trực tuyến httpbin.org/anything để kiểm tra luồng gửi dữ liệu biểu mẫu, và hoàn thành đầy đủ các bài tập thiết kế trang web mẫu.

5. Có tài liệu bổ trợ nào kèm theo?
Giáo trình cung cấp sẵn hệ thống mã nguồn mẫu minh họa cú pháp từng thẻ, các bảng mã màu Hex/RGB, cấu trúc bảng dữ liệu mẫu, danh mục các mẫu giao diện web tại mục 28 của Bài 2 và hệ thống bài tập thực hành lập trình sự kiện tại mục 63 của Bài 3.

Kết luận

Giáo trình "Thiết kế giao diện website" (Mã mô đun: MĐ17) của Trường Cao đẳng Công nghiệp Thanh Hóa là tài liệu giảng dạy chuyên môn mang tính hệ thống và đồng bộ. Giá trị cốt lõi của giáo trình thể hiện ở việc trang bị đầy đủ kiến thức cấu trúc trang ngữ nghĩa bằng HTML5, kỹ thuật tổ chức bố cục thẩm mỹ bằng CSS3 và khả năng xử lý tương tác cơ bản bằng JavaScript, bám sát yêu cầu kỹ năng thực tế của doanh nghiệp phần mềm.

Lộ trình học tập đề xuất cho người học là tiếp cận tuần tự theo 3 giai đoạn: làm chủ cấu trúc tài liệu và biểu mẫu với HTML/HTML5 (Bài 1), làm chủ Box Model, Flexbox, Grid và định dạng đáp ứng với CSS/CSS3 (Bài 2), sau đó hoàn thiện tương tác giao diện với JavaScript (Bài 3). Quá trình học tập cần kết hợp chặt chẽ giữa việc nghiên cứu nội dung giáo trình, thực hành trên hệ thống phòng máy tính chuyên dụng và tận dụng các công cụ kiểm thử giao thức web trực tuyến để kiểm chứng kết quả mã nguồn.