TỔNG QUAN VỀ GIÁO TRÌNH THIẾT KẾ WEB (TRƯỜNG CAO ĐẲNG CỘNG ĐỒNG ĐỒNG THÁP)

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

Giáo trình Môn học: Thiết kế Web do tác giả Phan Quốc Cường biên soạn, được ban hành theo quyết định của Hiệu trưởng Trường Cao đẳng Cộng đồng Đồng Tháp (thuộc Ủy ban Nhân dân tỉnh Đồng Tháp) năm 2018. Tài liệu được thiết kế làm giáo trình giảng dạy chính khóa cho ngành Tin học ứng dụng ở trình độ Trung cấp, đồng thời đóng vai trò tài liệu tham khảo kỹ thuật nền tảng cho sinh viên cao đẳng và người học tiếp cận lĩnh vực công nghệ web.

Về mục tiêu học tập (learning outcomes), giáo trình cung cấp cho người học:

  • Hệ thống khái niệm cơ bản về mạng máy tính, giao thức World Wide Web và cơ chế vận hành của website trên môi trường mạng.
  • Phương pháp luận và quy trình thiết kế giao diện web, từ xác định mục đích, nghiên cứu ý tưởng đến phác thảo cấu trúc khung (prototyping).
  • Cú pháp và kỹ thuật sử dụng ngôn ngữ đánh dấu siêu văn bản HTML theo tiêu chuẩn W3C, bao gồm việc xây dựng bố cục văn bản, liên kết, hình ảnh và bảng dữ liệu.
  • Kiến thức nhập môn về ngôn ngữ định kiểu CSS và ngôn ngữ kịch bản JavaScript.
  • Quy trình đăng ký tên miền (domain) và thiết lập dịch vụ lưu trữ web (hosting) để đưa website vào vận hành thực tế.

Cấu trúc giáo trình được xây dựng theo trình tự 5 chương học phần logic: từ lý thuyết tổng quan mạng (Chương 1), phương pháp luận thiết kế (Chương 2), lập trình cấu trúc giao diện tĩnh bằng HTML (Chương 3), mở rộng tính thẩm mỹ và tương tác với CSS/JavaScript (Chương 4), đến triển khai xuất bản website (Chương 5). Điểm đặc sắc trong cách tiếp cận của giáo trình là tính thực nghiệm trực quan: lược bỏ các thiết lập môi trường phức tạp để học viên bắt đầu trực tiếp với trình soạn thảo văn bản cơ bản (Notepad/TextEdit) và trình duyệt web (Google Chrome), giúp người học hiểu rõ bản chất cấu trúc mã nguồn trước khi sử dụng các phần mềm soạn thảo chuyên nghiệp.


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

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

  • Chương 1: Giới thiệu Internet: Phân tích mô hình mạng toàn cầu liên kết các mạng LAN, MAN, WAN thông qua router (Hình 1). Trình bày định nghĩa World Wide Web, cơ chế liên kết siêu văn bản (hyperlink) và hệ thống thuật ngữ kỹ thuật cốt lõi: Webpage, Website, Homepage (index.html), phân biệt Website tĩnh và Website động (kết nối cơ sở dữ liệu), hệ thống máy chủ (Server), địa chỉ URL, trình duyệt web và hệ thống phân giải tên miền (DNS) chuyển đổi giữa tên miền và địa chỉ IP.
  • Chương 2: Các bước thiết kế website: Trình bày quy trình 3 giai đoạn để xây dựng giao diện web:
    1. Xác định mục đích và nội dung: Làm rõ thông điệp chính và định dạng nội dung hiển thị.
    2. Chiến lược thiết kế: Áp dụng tâm lý học màu sắc và nguyên tắc tối ưu tiện ích điều hướng (quy tắc người dùng không phải nhấp chuột quá 2 đến 4 lần để tiếp cận thông tin).
    3. Quy trình thiết kế giao diện 3 bước: Thu thập 10–20 mẫu thiết kế tham khảo thực tế; định hình ý tưởng về bố cục, màu sắc và kiểu ảnh (vector/ảnh chụp); xây dựng khung giao diện mẫu (prototyping) chia 1 cột, 2 cột hoặc 3 cột dựa trên phân tích độ phân giải màn hình chuẩn 1024 x 768 px (độ rộng khung nội dung tối đa 950 px).
  • Chương 3: HTML (HyperText Markup Language): Giới thiệu lịch sử phát triển của HTML từ năm 1991 đến HTML5 (2014); phân tích cấu trúc cây tài liệu với các khối <!DOCTYPE html>, <html>, <head>, <title>, <body>. Giáo trình đi sâu vào hệ thống thẻ:
    • Tiêu đề và đoạn văn: Thẻ <h1> đến <h6>, thẻ <p> và cơ chế trình duyệt tự động rút gọn khoảng trắng.
    • Các thuộc tính cơ bản: lang, title (hiển thị tooltip), href, src, alt, id, style, disabled, value.
    • Định dạng văn bản: So sánh cặp thẻ mang tính ngữ nghĩa và trực quan gồm <b><strong>, <i><em>; các thẻ định dạng đặc thù <small>, <mark>, <del>, <ins>, <sub>, <sup>.
    • Siêu liên kết và hình ảnh: Cấu trúc thẻ <a> với các giá trị của thuộc tính target (_blank, _self, _parent, _top, framename), kỹ thuật đặt neo liên kết nội bộ trang bằng thuộc tính id; thẻ hình ảnh <img> kết hợp thuộc tính src, alt và định dạng kích thước qua style.
    • Cấu trúc bảng dữ liệu: Cú pháp <table>, <tr>, <td>, <th>, <caption> cùng các thuộc tính phân chia vùng hiển thị border, colspan (gộp cột), rowspan (gộp dòng).
  • Chương 4: CSS và JavaScript: Trình bày nguyên lý hoạt động của ngôn ngữ định kiểu Cascading Style Sheets (CSS), cách phân tách nội dung HTML và tầng hiển thị; giới thiệu các đặc tính định dạng kiểu chữ, màu sắc, bố cục cơ bản; giới thiệu tổng quan về ngôn ngữ kịch bản JavaScript trong việc xử lý sự kiện và tạo tương tác phía máy khách (client-side).
  • Chương 5: Đăng ký và quản lý website: Hướng dẫn quy trình thực hành đăng ký tên miền tiếng Việt, tên miền .vn, tên miền miễn phí (qua hệ thống Uni); hướng dẫn đăng ký và cấu hình các gói dịch vụ máy chủ web lưu trữ miễn phí thông qua giao diện của Freeservers và Hostinger.

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

Nội dung giáo trình hình thành ba mảng kiến thức lý thuyết cơ bản:

  1. Kiến trúc mạng và Web Client-Server: Bản chất của việc truyền tải thông tin qua mạng Internet, cơ chế máy chủ lưu trữ tài nguyên và máy trạm truy cập thông qua giao thức địa chỉ URL và hệ thống định tuyến DNS.
  2. Ngữ nghĩa và chuẩn hóa siêu văn bản (W3C Standards): Khái niệm về thẻ đánh dấu, sự phân biệt giữa thẻ mở/thẻ đóng, cấu trúc phân cấp cây DOM (Document Object Model) và quy định khai báo chuẩn loại tài liệu (DOCTYPE).
  3. Nguyên lý thiết kế giao diện trực quan (UI/UX Foundation): Tư duy phân chia không gian hiển thị (grid/column layout), tính toán kích thước điểm ảnh (pixel) theo độ phân giải thiết bị và nguyên tắc phân cấp thông tin theo hành vi người dùng.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Soạn thảo mã nguồn HTML5 chuẩn xác, cấu hình đầy đủ các thuộc tính thẻ; sử dụng CSS inline và mã định kiểu cơ bản để kiểm soát màu sắc (color), phông chữ (font-family), cỡ chữ (font-size), căn lề (text-align); tổ chức bảng biểu phức tạp và chèn siêu liên kết điều hướng nội bộ/ngoại vi; tải dữ liệu lên hosting và trỏ tên miền.
  • Kỹ năng phân tích (Analytical skills): Phân tích và lựa chọn cấu trúc bố cục (1 cột, 2 cột hay 3 cột) phù hợp với loại hình trang web (blog cá nhân hay báo chí); phân biệt ngữ cảnh sử dụng thẻ cấu trúc và thẻ định dạng (như việc sử dụng thẻ heading cho tiêu đề thay vì lạm dụng in đậm để phóng to chữ).
  • Kỹ năng thực hành nghề nghiệp (Practical competencies): Khả năng chuyển đổi từ ý tưởng sang bản vẽ phác thảo bố cục (wireframing/prototyping); kỹ năng biên tập mã nguồn với các công cụ soạn thảo khác nhau; thao tác xuất bản một trang web hoàn chỉnh lên môi trường Internet công cộng.

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 theo quy trình thực hành từng bước (step-by-step instruction), kết hợp chặt chẽ giữa diễn giải lý thuyết cú pháp và minh họa trực quan.

  • Cấu trúc bài giảng thực hành: Trong từng nội dung kỹ thuật (như Chương 3 về HTML), cấu trúc bài học luôn tuân thủ 4 bước rõ ràng:
    1. Nêu định nghĩa và cú pháp chuẩn của thẻ/thuộc tính.
    2. Cung cấp đoạn mã nguồn mẫu (Code snippet).
    3. Minh họa kết quả hiển thị thực tế trên trình duyệt Google Chrome (ảnh chụp màn hình).
    4. Đưa ra các lưu ý kỹ thuật về chuẩn W3C hoặc hành vi biên dịch của trình duyệt.
  • Tình huống thực tế và bài tập thực hành: Giáo trình tích hợp các bài thực hành mang tính ứng dụng cụ thể như:
    • Tạo tệp web đầu tiên index.htm sử dụng phần mềm Notepad trên hệ điều hành Windows 7/8, thiết lập định dạng lưu trữ văn bản chuẩn mã hóa UTF-8.
    • Xây dựng bảng biểu hoàn chỉnh: bài thực hành thiết kế "BẢNG TỔNG KẾT XẾP LOẠI NHÂN VIÊN" kết hợp định dạng đường viền border="1", bề rộng width="100%" và các ô gộp dữ liệu.
    • Kỹ thuật điều hướng trang dài: xây dựng cấu trúc liên kết neo (jump link) từ đầu trang trực tiếp tới đề mục Chapter 4 thông qua cú pháp <a href="#C4">.
  • Phương pháp đánh giá: Cuối mỗi chương đều có hệ thống câu hỏi ôn tập nhằm kiểm tra mức độ nắm bắt kiến thức của sinh viên:
    • Chương 1: 5 câu hỏi kiểm tra khái niệm mạng, phân biệt Webpage/Website, Website tĩnh/động, cơ chế tên miền.
    • Chương 2: 3 câu hỏi tổng hợp về quy trình xác định mục đích, chiến lược tiện ích và các bước thiết kế giao diện.
    • Chương 3, 4, 5: Các câu hỏi củng cố về cú pháp thẻ, thuộc tính CSS, kịch bản JavaScript và quy trình đăng ký tài khoản hosting/domain.
  • Hướng dẫn tự học đối với sinh viên: Giáo trình đặt ra yêu cầu bắt buộc tại phần mở đầu mỗi chương: sinh viên phải đọc trước toàn bộ nội dung lý thuyết và xem đề cương chi tiết trước khi tham gia giờ học trên lớp. Đồng thời, tài liệu hướng dẫn học viên tự rèn luyện thói quen sưu tầm, lưu giữ ảnh chụp màn hình các trang web mẫu ở độ phân giải thực để phục vụ quá trình hình thành ý tưởng thiết kế.

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

  • Cập nhật tiêu chuẩn HTML5 và khuyến nghị từ W3C: Giáo trình hệ thống hóa sự phát triển của các chuẩn khai báo <!DOCTYPE>, so sánh trực tiếp giữa cú pháp phức tạp của HTML 4.01, XHTML 1.0 với cú pháp rút gọn của chuẩn HTML5 (<!DOCTYPE html>). Giáo trình cập nhật các khuyến nghị mới của tổ chức W3C:
    • Khuyến cáo không sử dụng thẻ <font> đã lỗi thời, chuyển sang sử dụng các thuộc tính CSS như font-family, font-size, color.
    • Khuyến nghị sử dụng thuộc tính style nội tuyến thay thế cho các thuộc tính kích thước tĩnh trực tiếp trên thẻ <img> nhằm tối ưu hóa tính linh hoạt của giao diện.
  • Phân định rõ ràng giữa ngữ nghĩa (Semantics) và định dạng hiển thị: Tài liệu làm rõ sự khác biệt bản chất giữa các thẻ có cùng hiệu ứng thị giác nhưng khác nhau về mặt ngữ nghĩa đối với trình duyệt và công cụ tìm kiếm: phân biệt thẻ nhấn mạnh ý nghĩa <strong> với thẻ thuần in đậm <b>, thẻ nhấn mạnh nội dung <em> với thẻ thuần in nghiêng <i>.
  • Chú trọng tiêu chuẩn tiếp cận web (Web Accessibility): Giáo trình phân tích vai trò của thuộc tính alt trong thẻ hình ảnh <img>. Thuộc tính này không chỉ đóng vai trò hiển thị văn bản thay thế khi hình ảnh gặp sự cố tải dữ liệu mà còn cung cấp thông tin mô tả cho các ứng dụng đọc màn hình (screen readers), hỗ trợ người khiếm thị tiếp cận nội dung website.
  • Phân tích thiết kế gắn liền với bối cảnh kỹ thuật thực tế: Tại thời điểm biên soạn, giáo trình cung cấp số liệu phân tích cụ thể về độ phân giải màn hình phổ biến tại Việt Nam (1024 x 768 px). Từ đó, tài liệu đưa ra các chỉ dẫn thực tế về việc khống chế chiều rộng website ở mức tối đa 950 px để phân chia tỷ lệ các cột nội dung, giúp sinh viên hiểu rõ mối quan hệ giữa thiết kế kỹ thuật và thiết bị đầu cuối của người dùng.

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

  • Học viên và sinh viên:
    • Sinh viên theo học hệ Trung cấp và Cao đẳng ngành Tin học ứng dụng, Công nghệ thông tin, Kỹ thuật phần mềm hoặc Truyền thông đa phương tiện.
    • Học viên các khóa đào tạo ngắn hạn về lập trình web cơ bản, thiết kế giao diện web hoặc phát triển ứng dụng front-end.
  • Yêu cầu kiến thức tiên quyết (Prerequisites):
    • Kỹ năng tin học văn phòng cơ bản.
    • Thao tác cơ bản trên hệ điều hành Windows hoặc macOS: quản lý tệp và thư mục, sử dụng các phần mềm soạn thảo văn bản thô (Notepad, TextEdit), thao tác lưu tệp với phần mở rộng tùy chỉnh (.html, .htm) và lựa chọn bảng mã UTF-8.
    • Khả năng sử dụng trình duyệt web để tra cứu thông tin và kiểm tra kết quả hiển thị.
  • Giảng viên và cơ sở đào tạo:
    • Được sử dụng làm khung giáo trình chính thức cho môn học Thiết kế Web tại Trường Cao đẳng Cộng đồng Đồng Tháp và các trường đào tạo nghề tương đương.
    • Cung cấp cấu trúc phân bổ bài giảng 5 chương rõ ràng, kèm hệ thống ví dụ mẫu và câu hỏi ôn tập chuẩn hóa phục vụ công tác biên soạn đề cương chi tiết, bài kiểm tra định kỳ và bài thực hành tại phòng máy.
  • Người tự học và nghiên cứu tài liệu:
    • Phù hợp cho người mới bắt đầu tiếp cận lập trình web nhờ văn phong diễn giải trực quan, các chỉ dẫn từng bước chi tiết và không đòi hỏi cấu hình môi trường lập trình phức tạp.

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

1. Giáo trình này phù hợp với đối tượng người học nào?

Giáo trình được biên soạn chuyên biệt cho học sinh, sinh viên ngành Tin học ứng dụng ở trình độ Trung cấp và Cao đẳng, đồng thời phù hợp với mọi người học mới bắt đầu tìm hiểu về thiết kế và xây dựng website tĩnh.

2. Cần chuẩn bị kiến thức nền tảng gì trước khi học giáo trình này?

Người học chỉ cần nắm vững kỹ năng sử dụng máy tính cơ bản, thao tác quản lý tệp tin trên hệ điều hành và biết cách sử dụng các trình duyệt web như Google Chrome. Giáo trình không yêu cầu người học phải có kiến thức lập trình chuyên sâu từ trước.

3. Điểm khác biệt của giáo trình này so với các tài liệu khác là gì?

Tài liệu tích hợp hoàn chỉnh một quy trình khép kín: từ trang bị kiến thức nền về mạng Internet, phương pháp phác thảo bố cục (prototyping theo độ phân giải màn hình), viết mã HTML/CSS/JavaScript cho đến các thao tác thực tế về đăng ký tên miền và tải dữ liệu lên hosting miễn phí (Hostinger, Freeservers). Ngoài ra, tài liệu hướng dẫn học viên thực hành trực tiếp trên các công cụ sẵn có như Notepad để nắm vững bản chất mã nguồn.

4. Làm thế nào để tự học giáo trình này đạt hiệu quả cao nhất?

Người học cần tuân thủ yêu cầu đọc trước lý thuyết và đề cương chi tiết của từng chương; thực hiện tuần tự việc gõ trực tiếp từng đoạn mã mẫu vào trình soạn thảo (không sao chép - dán); kiểm tra kết quả hiển thị trên trình duyệt; trả lời đầy đủ các câu hỏi ôn tập cuối chương và rèn luyện thói quen sưu tầm các mẫu giao diện web đẹp để định hình ý tưởng thiết kế.

5. Có tài liệu bổ trợ và công cụ nào được khuyến nghị trong giáo trình?

Giáo trình hướng dẫn sử dụng các công cụ phần mềm gồm: trình soạn thảo Notepad, TextEdit, Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor; trình duyệt Google Chrome; tài liệu tham khảo chuẩn W3C (W3Schools); cùng hệ thống các dịch vụ web trực tuyến như Freeservers, Hostinger và các trang đăng ký tên miền tiếng Việt, tên miền .vn.


Kết luận

Giáo trình Môn học: Thiết kế Web của tác giả Phan Quốc Cường (Trường Cao đẳng Cộng đồng Đồng Tháp) cung cấp một hệ thống kiến thức nền tảng, hoàn chỉnh và mang tính thực hành cao về lĩnh vực phát triển web. Tài liệu dẫn dắt người học đi theo lộ trình sư phạm mạch lạc qua 5 giai đoạn: hiểu rõ bản chất mạng Internet -> hoạch định chiến lược và phác thảo khung giao diện -> lập trình cấu trúc bằng HTML5 -> định kiểu và tương tác với CSS/JavaScript -> xuất bản và quản trị website trên môi trường mạng thực tế.

Với cấu trúc trình bày trực quan, gắn liền mã nguồn mẫu với kết quả hiển thị và hệ thống câu hỏi ôn tập định hướng, giáo trình là tài liệu học tập và giảng dạy chuẩn mực cho chương trình đào tạo nghề Tin học ứng dụng, đồng thời là tài liệu tham khảo hữu ích cho người học trên lộ trình xây dựng nền tảng phát triển web.