GIÁO TRÌNH THIẾT KẾ WEB (NGÀNH TIN HỌC ỨNG DỤNG - TRÌNH ĐỘ TRUNG CẤ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 (năm 2018). Đây là tài liệu học tập chính khóa thuộc khối kiến thức chuyên môn nghề của chương trình đào tạo ngành Tin học ứng dụng ở trình độ Trung cấp. Giáo trình được thiết kế nhằm trang bị cho người học hệ thống kiến thức nền tảng và kỹ năng tác nghiệp cơ bản trong lĩnh vực thiết kế và phát triển trang thông tin điện tử.

Mục tiêu học tập của giáo trình bao gồm:

  • Cung cấp các khái niệm tổng quan về mạng Internet, dịch vụ World Wide Web, máy chủ, tên miền và URL.
  • Hình thành quy trình tư duy thiết kế giao diện từ bước xác định mục đích, tìm kiếm cảm hứng mỹ thuật, định hình ý tưởng đến xây dựng khung nội dung (prototyping).
  • Huấn luyện kỹ năng lập trình cấu trúc giao diện web bằng ngôn ngữ đánh dấu siêu văn bản (HTML) theo các tiêu chuẩn kỹ thuật của W3C.
  • Cung cấp kiến thức cơ sở về định kiểu với CSS, ngôn ngữ kịch bản JavaScript phía máy khách (Client-side Scripting).
  • Hướng dẫn quy trình đăng ký tên miền và cấu hình không gian lưu trữ (hosting) miễn phí để đưa website vào vận hành thực tế.

Cấu trúc giáo trình gồm 5 chương được sắp xếp theo trình tự sư phạm chặt chẽ: từ lý thuyết hạ tầng mạng, phương pháp luận thiết kế, lập trình mã nguồn tĩnh, bổ sung tương tác và định dạng, đến xuất bản hệ thống trên Internet. Giáo trình tiếp cận theo hướng thực hành ứng dụng, hướng dẫn người học từ các công cụ đơn giản có sẵn trên hệ điều hành (Notepad, TextEdit) đến các môi trường phát triển chuyên dụng và quy trình triển khai máy chủ thực tế.

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

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

Nội dung đào tạo của giáo trình được cấu trúc qua 5 chương chuyên đề:

  • Chương 1: Giới thiệu Internet
    Trình bày các khái niệm cơ bản về mạng máy tính toàn cầu kết nối qua hệ thống router (LAN, MAN, WAN); bản chất phân tán của Internet; dịch vụ World Wide Web (WWW) và vai trò của siêu liên kết (hyperlink). Chương này chuẩn hóa hệ thống thuật ngữ chuyên ngành gồm: Webpage (.htm, .html), Website, Trang chủ (Homepage / index.html), Phân loại Website tĩnh và Website động gắn kết cơ sở dữ liệu (Database), Hệ thống tên miền (Domain name / DNS / IP), Máy chủ (Server), Địa chỉ tài nguyên URL và Cơ chế hiển thị của Trình duyệt web (Web browser).

  • Chương 2: Các bước thiết kế Website
    Thiết lập quy trình chuẩn bị trước khi viết mã nguồn. Nội dung tập trung vào: xác định mục đích nội dung và tính thiết thực của website; chiến lược thiết kế giao diện (tâm lý màu sắc, sự đơn giản); tiêu chí tiện ích với quy tắc điều hướng chuẩn (không quá 2 đến 4 lần nhấp chuột để tiếp cận trang đích). Chương này chuẩn hóa quy trình thiết kế giao diện 3 bước:

    1. Tìm nguồn cảm hứng: Lưu trữ 10–20 mẫu thiết kế theo đúng phân mục (blog, doanh nghiệp, báo chí) ở độ phân giải thực.
    2. Định hình ý tưởng: Ghi chú bố cục, màu sắc, đường viền, khoảng cách.
    3. Xây dựng khung nội dung (prototyping): Phân nhóm đối tượng và lựa chọn bố cục 1 cột, 2 cột hoặc 3 cột dựa trên giới hạn độ phân giải màn hình chuẩn 1024x768 (với độ rộng khả dụng 950px).

  • Chương 3: HTML
    Cung cấp toàn diện cú pháp và cấu trúc của ngôn ngữ đánh dấu Hyper Text Markup Language. Nội dung bao gồm:

    • Khai báo kiểu tài liệu (<!DOCTYPE>) đối chiếu giữa HTML5, HTML 4.01 và XHTML 1.0;
    • Thẻ cấu trúc gốc (<html>, <head>, <title>, <body>);
    • Các thuộc tính thành phần (Attributes: lang, title, href, src, width, height, alt, style, id, disabled, value);
    • Hệ thống thẻ tiêu đề (<h1> đến <h6>) và đoạn văn (<p>) gắn liền với cơ chế tối ưu hóa cho công cụ tìm kiếm và trình đọc màn hình;
    • Các thẻ định dạng ký tự văn bản: <b>/<strong>, <i>/<em>, <small>, <mark>, <del>, <ins>, <sub>, <sup>;
    • Cú pháp ghi chú không hiển thị (<!-- -->);
    • Thẻ liên kết <a> kèm thuộc tính target (_blank, _self, _parent, _top, framename) và neo liên kết nội bộ theo id;
    • Thẻ nhúng hình ảnh <img> với thuộc tính src, alt, style;
    • Cấu trúc bảng dữ liệu <table> kết hợp <tr>, <td>, <th>, <caption> cùng các thuộc tính gộp ô colspan, rowspan và border.

  • Chương 4: CSS và JavaScript
    Cung cấp kiến thức về ngôn ngữ định kiểu tầng CSS (Cascading Style Sheets) nhằm kiểm soát giao diện độc lập với cấu trúc HTML và giới thiệu ngôn ngữ lập trình kịch bản JavaScript để tạo tính tương tác phía trình duyệt.

  • Chương 5: Đăng ký và quản lý Website
    Hướng dẫn quy trình thực hành triển khai xuất bản trang web: đăng ký tên miền tiếng Việt, tên miền .VN, tên miền miễn phí quốc tế (.uni); thiết lập và cấu hình không gian lưu trữ hosting miễn phí trên nền tảng Freeservers và Hostinger; tải mã nguồn và quản trị dịch vụ.

Progression logic (logic tiến trình) của tài liệu đi từ: Nhận thức môi trường mạng $\rightarrow$ Hoạch định và phác thảo giao diện $\rightarrow$ Lập trình cấu trúc mã nguồn $\rightarrow$ Định dạng và tạo tương tác $\rightarrow$ Xuất bản và quản trị trực tuyến.

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

  • Lý thuyết mạng và hệ thống phân tán: Cơ chế kết nối giữa các mạng thành viên qua thiết bị định tuyến (Router), nguyên lý phân giải địa chỉ giữa tên miền chữ cái và địa chỉ IP số thông qua hệ thống DNS toàn cầu, cấu trúc siêu liên kết đa phương tiện trên World Wide Web.
  • Nguyên lý thiết kế giao diện người dùng: Quy tắc điều hướng giảm thiểu số lần nhấp chuột, tâm lý học màu sắc trong truyền tải thông điệp, quy chuẩn phân chia lưới cột (grid/layout) dựa trên độ phân giải phần cứng và tỷ lệ kích thước nội dung.
  • Chuẩn ngữ nghĩa tài liệu số (Semantic Web): Phân định ranh giới giữa thẻ nhấn mạnh mang ý nghĩa nội dung (<strong>, <em>) và thẻ định dạng hiển thị thuần túy (<b>, <i>), quy chuẩn khai báo tài liệu hợp lệ theo khuyến nghị của tổ chức W3C.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã HTML chuẩn cú pháp; thiết lập mã hóa ký tự UTF-8; cấu hình liên kết điều hướng nội bộ và ngoại vi; xây dựng bảng dữ liệu đa chiều bằng kỹ thuật gộp hàng (rowspan) và gộp cột (colspan); nhúng phương tiện đa phương tiện; thao tác trên các trình soạn thảo (Notepad, Adobe Dreamweaver, CoffeeCup HTML Editor).
  • Kỹ năng phân tích (Analytical skills): Phân tích yêu cầu chức năng để chọn bố cục giao diện 1 cột, 2 cột hay 3 cột; phân loại nội dung blog, tin tức hay doanh nghiệp; tính toán không gian pixel khả dụng trên các độ phân giải màn hình.
  • Năng lực thực hành nghề nghiệp (Practical competencies): Đăng ký, thiết lập bản ghi tên miền (tên miền tiếng Việt, tên miền quốc tế); khởi tạo tài khoản máy chủ lưu trữ (Hostinger, Freeservers); tải mã nguồn lên host và kiểm thử giao diện trên trình duyệt Google Chrome.

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

Giáo trình áp dụng mô hình sư phạm kết hợp giữa diễn giải lý thuyết định danh và thực hành thao tác từng bước (step-by-step instruction). Mỗi chủ đề kỹ thuật đều đi kèm đoạn mã minh họa cụ thể, hình ảnh giao diện phần mềm thực tế và kết quả hiển thị tương ứng trên trình duyệt web.

+-------------------------------------------------------------------------+
|                  TIẾN TRÌNH SƯ PHẠM TRONG MỖI CHƯƠNG                    |
|                                                                         |
|  [Đọc trước đề cương] --> [Tiếp thu lý thuyết] --> [Thực hành gõ mã]   |
|            |                                             |              |
|            v                                             v              |
|  [Chuẩn bị bài tập]   <-- [Trả lời câu hỏi ôn tập] <-- [Kiểm thử Web]   |
+-------------------------------------------------------------------------+
  • Phương pháp thực hành mã nguồn: Người học được rèn luyện từ công cụ soạn thảo tối giản (Notepad trên hệ điều hành Windows 7, Windows 8) nhằm nắm vững cấu trúc cú pháp nguyên bản trước khi tiếp cận các phần mềm hỗ trợ tự động (Dreamweaver, Microsoft Expression Web). Các bước lưu tệp với đuôi định dạng .htm/.html và thiết lập bảng mã UTF-8 được quy định chi tiết nhằm hạn chế lỗi hiển thị phông chữ.
  • Bài tập và tình huống thực tiễn: Giáo trình tích hợp các bài tập tạo bảng tổng kết xếp loại nhân viên, tạo menu liên kết tài liệu nhiều chương bằng thẻ neo (<a> kết hợp id), cấu hình liên kết mở tab mới (_blank). Bên cạnh đó là các tình huống phân tích tính khả thi của bố cục 3 cột trên giao diện blog cá nhân dựa trên giới hạn chiều rộng 950px.
  • Hệ thống đánh giá: Cuối mỗi chương đều có mục Câu hỏi ôn tập để kiểm tra mức độ nắm bắt kiến thức:
    • Chương 1: Kiểm tra định nghĩa Internet, WWW, phân biệt Web tĩnh - Web động, cơ chế tên miền;
    • Chương 2: Đánh giá quy trình xác định mục đích website và các bước thiết kế giao diện;
    • Chương 3, 4, 5: Đánh giá cú pháp thẻ lệnh, kỹ thuật định kiểu và quy trình cấu hình hosting/domain.
  • Hướng dẫn tự học: Đầu mỗi chương, giáo trình nêu rõ Nhiệm vụ tự học của sinh viên, yêu cầu người học phải đọc trước đề cương chi tiết và nội dung chương trong bài giảng trước khi tham gia buổi học trên lớp.

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

  • Hệ thống hóa các phiên bản HTML: Giáo trình cung cấp bảng niên biểu phát triển của ngôn ngữ HTML từ năm 1991, HTML 2.0, chuẩn HTML 4.01 (năm 1999), XHTML 1.0 (năm 2000) đến phiên bản HTML5; chỉ rõ sự khác biệt trong cú pháp khai báo <!DOCTYPE> giữa các chuẩn và khuyến nghị các thực hành tối ưu theo quy chuẩn W3C (World Wide Web Consortium).
  • Tích hợp tiêu chuẩn khả năng tiếp cận (Web Accessibility): Nhấn mạnh vai trò của thuộc tính ngôn ngữ (lang="en-US") và thuộc tính mô tả hình ảnh thay thế (alt) trong việc hỗ trợ các thiết bị đọc màn hình (Screen Readers) dành cho người khiếm thị và tối ưu hóa dữ liệu cho công cụ tìm kiếm.
  • Chuyển dịch từ định dạng cứng sang CSS: Phân tích việc loại bỏ các thẻ định dạng cũ (như thẻ <font>) trong chuẩn HTML5, hướng dẫn thay thế bằng thuộc tính style với các thuộc tính CSS cơ bản (color, font-family, font-size, text-align).
  • Quy trình triển khai dịch vụ trực tuyến thực tế: Cập nhật hướng dẫn đăng ký tên miền tiếng Việt và tên miền quốc gia qua hệ thống quản lý tại Việt Nam, kết hợp đăng ký dịch vụ lưu trữ trực tuyến thực tế trên Freeservers và Hostinger, giúp sinh viên có khả năng đưa sản phẩm bài tập lên môi trường Internet công cộng.

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

Nhóm đối tượng Yêu cầu tiên quyết (Prerequisites) Mục đích và phương thức sử dụng
Sinh viên Trung cấp ngành Tin học ứng dụng Kiến thức tin học cơ sở, kỹ năng thao tác quản lý tệp tin và thư mục trên hệ điều hành Windows. Giáo trình học tập bắt buộc; sử dụng để học lý thuyết, làm bài tập thực hành trên lớp và hoàn thành đồ án môn học.
Giảng viên chuyên ngành Nắm vững kiến thức công nghệ web và phương pháp sư phạm nghề nghiệp. Căn cứ xây dựng đề cương bài giảng, phân bổ thời lượng thực hành phòng máy và biên soạn đề kiểm tra, đánh giá học phần.
Học viên tự học / Lập trình viên mới bắt đầu Kỹ năng sử dụng máy tính và trình duyệt web ở mức độ cơ bản. Tài liệu tham khảo tự học có hướng dẫn từng bước để làm quen với quy trình xây dựng website từ mã nguồn thô đến xuất bản máy chủ.

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ụ trực tiếp cho học sinh, sinh viên theo học trình độ Trung cấp ngành Tin học ứng dụng tại các trường cao đẳng, trung cấp chuyên nghiệp hoặc cơ sở giáo dục nghề nghiệp. Tài liệu cũng phù hợp cho người bắt đầu tự học thiết kế giao diện web.

2. Cần kiến thức nền nào để học?

Người học chỉ cần có kỹ năng sử dụng máy tính căn bản: biết thao tác mở ứng dụng, quản lý thư mục, sử dụng trình soạn thảo văn bản đơn giản (Notepad) và sử dụng trình duyệt web (Google Chrome) để duyệt thông tin. Không bắt buộc phải có kiến thức lập trình chuyên sâu trước khi họ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ì?

Giáo trình không chỉ đơn thuần liệt kê cú pháp thẻ HTML mà xây dựng một quy trình trọn gói từ tư duy mỹ thuật/bố cục prototyping (nghiên cứu 10–20 mẫu thiết kế, tính toán độ phân giải màn hình 1024x768), kỹ thuật viết mã nguồn thủ công, đến các bước đăng ký tên miền (kể cả tên miền tiếng Việt) và lưu trữ hosting miễn phí.

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

Người học cần tuân thủ Nhiệm vụ tự học ở đầu mỗi chương: đọc trước bài giảng, tự tay gõ lại các đoạn mã mẫu trong Notepad (không sao chép/dán), lưu tệp đúng định dạng mã hóa UTF-8, mở kiểm thử trên trình duyệt Google Chrome và trả lời đầy đủ hệ thống câu hỏi ôn tập cuối chương.

5. Có tài liệu bổ trợ nào kèm theo giáo trình không?

Giáo trình tích hợp 20 hình ảnh minh họa chụp từ màn hình thực tế (từ sơ đồ mạng, thao tác Notepad, kết quả Chrome đến giao diện đăng ký tên miền/hosting tại Hostinger, Freeservers), bảng tổng hợp danh mục thuộc tính HTML và danh mục câu hỏi ôn tập sau mỗi chương.

Kết luận

Giáo trình Môn học: Thiết kế Web của Trường Cao đẳng Cộng đồng Đồng Tháp cung cấp hệ thống tri thức cơ bản, chuẩn mực và trực quan về kỹ thuật phát triển giao diện web cho hệ trung cấp nghề. Tài liệu định hình rõ ràng lộ trình học tập từ lý thuyết hạ tầng Internet, phương pháp lập bố cục giao diện, kỹ thuật lập trình HTML/CSS/JavaScript đến kỹ năng triển khai tên miền và dịch vụ lưu trữ trực tuyến.

Để mở rộng kiến thức, người học nên kết hợp tra cứu các tài liệu tham khảo chuyên ngành và tiêu chuẩn cập nhật tại cổng thông tin của Tổ chức W3C (World Wide Web Consortium).