TỔNG QUAN VỀ GIÁO TRÌNH THIẾT KẾ WEB

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

Giáo trình môn học: Thiết kế Web là tài liệu đào tạo chính thức được biên soạn bởi tác giả Phan Quốc Cường (hoàn thành bản thảo tháng 04 năm 2015) và được ban hành kèm 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) vào năm 2017. Giáo trình được thiết kế chuyên biệt cho ngành Công nghệ thông tin ở trình độ Cao đẳng, phục vụ mục tiêu chuẩn hóa khối kiến thức nền tảng về phát triển giao diện web trong chương trình đào tạo nghề nghiệp.

Về 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 từ tổng quan hạ tầng mạng máy tính đến kỹ năng thiết kế, lập trình giao diện và xuất bản một trang web hoàn chỉnh. Cụ thể, sau khi hoàn thành học phần, sinh viên có khả năng:

  • Hiểu và phân biệt các khái niệm cốt lõi của Internet, dịch vụ World Wide Web, hệ thống phân giải tên miền (DNS), máy chủ và địa chỉ định danh tài nguyên (URL).
  • Vận dụng quy trình thiết kế website qua các giai đoạn: xác định mục tiêu, xây dựng chiến lược trải nghiệm người dùng, thu thập tài liệu mẫu và lập mô hình khung giao diện (prototyping).
  • Soạn thảo và cấu trúc mã nguồn trang 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 Tổ chức World Wide Web Consortium (W3C).
  • Ứng dụng các thuộc tính CSS cơ bản và ngôn ngữ kịch bản JavaScript để định dạng và tạo tương tác cho trang web.
  • Thực hiện quy trình đăng ký tên miền (domain) và thiết lập dịch vụ lưu trữ web (hosting) trên các nền tảng máy chủ trực tuyến.

Về cấu trúc và cách tiếp cận, giáo trình gồm 5 chương lý thuyết kết hợp thực hành, 20 hình vẽ minh họa chi tiết, hệ thống câu hỏi ôn tập cuối mỗi chương và phần tài liệu tham khảo. Nội dung được triển khai theo mô hình sư phạm tuyến tính: đi từ lý thuyết hạ tầng mạng, đến phương pháp luận thiết kế, thực thi mã nguồn giao diện, và hoàn tất bằng quy trình phát hành website lên môi trường Internet.

Điểm đặc thù của giáo trình là tính thực nghiệm cao. Tác giả lựa chọn cách tiếp cận đơn giản hóa môi trường học tập ban đầu bằng các công cụ có sẵn như Notepad trên hệ điều hành Windows, giúp sinh viên tập trung tối đa vào bản chất cấu trúc cú pháp của mã lệnh trước khi tiếp cận 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

Nội dung giáo trình được phân chia thành 5 chương học tập với logic phát triển kiến thức từ tổng quan đến chi tiết kỹ thuật:

Chương 1: GIỚI THIỆU INTERNET

Chương 2: CÁC BƯỚC THIẾT KẾ WEBSITE

Chương 3: HTML

Chương 4: CSS VÀ JAVASCRIPT

Chương 5: ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE
  • Chương 1: Giới thiệu Internet: Cung cấp định nghĩa về Internet như một mạng toàn cầu kết nối các mạng LAN, MAN, WAN thông qua router. Định nghĩa World Wide Web là dịch vụ trao đổi thông tin đa phương tiện dựa trên các siêu liên kết (hyperlink). Hệ thống hóa các thuật ngữ nền tảng: webpage (tập tin mở rộng .htm hoặc .html), website, homepage (trang chủ mặc định index.htm), phân biệt website tĩnh (nội dung cố định) và website động (kết nối cơ sở dữ liệu Database), nguyên lý ánh xạ địa chỉ IP và tên miền qua hệ thống DNS, khái niệm máy chủ (Server), cấu trúc URL và cơ chế đọc mã HTML của trình duyệt web (Web Browser).
  • Chương 2: Các bước thiết kế website: Hệ thống hóa phương pháp luận xây dựng trang web. Phân tích 2 bước xác định mục đích (nội dung và tính thiết thực); xây dựng chiến lược thiết kế dựa trên tâm lý học màu sắc và tính tiện ích (quy tắc điều hướng không quá 2 đến 4 lần nhấp chuột). Quy trình 3 bước thiết kế giao diện gồm:
    1. Tìm nguồn cảm hứng: Lưu trữ từ 10 đến 20 thiết kế mẫu ở độ phân giải thực.
    2. Định hình ý tưởng: Phân tích màu sắc, hình thức bố cục, viền ảnh.
    3. Xây dựng khung nội dung (prototyping): Phân loại nội dung, sắp xếp thành khối và lựa chọn bố cục 1 cột, 2 cột hoặc 3 cột dựa trên tiêu chuẩn độ phân giải màn hình phổ biến (1024x768 pixel với bề rộng tối đa 950 pixel).
  • Chương 3: HTML: Trình bày chi tiết ngôn ngữ Hyper Text Markup Language. Khái quát lịch sử phát triển từ năm 1991 đến HTML5; giải thích quy chuẩn khai báo <!DOCTYPE html>; hướng dẫn quy trình 4 bước tạo trang web đầu tiên bằng Notepad và lưu trữ dưới bảng mã UTF-8. Giới thiệu chi tiết hệ thống thuộc tính: thuộc tính ngôn ngữ (lang="en-US"), tiêu đề chú giải (title), liên kết (href), nguồn ảnh (src), văn bản thay thế (alt hỗ trợ thiết bị screen reader cho người khiếm thị). Hướng dẫn cú pháp hệ thống thẻ: tiêu đề từ <h1> đến <h6>, đoạn văn <p>, nhóm thẻ định dạng trực quan và ngữ nghĩa (<b>, <strong>, <i>, <em>, <small>, <mark>, <del>, <ins>, <sub>, <sup>), cú pháp ghi chú (<!-- -->), siêu liên kết (<a> với các giá trị target: _blank, _self, _parent, _top, framename và liên kết neo id), chèn hình ảnh (<img> kết hợp thuộc tính style kích thước) và tạo bảng (<table>, <tr>, <td>, <th>, <caption>, border, colspan, rowspan).
  • Chương 4: CSS và Javascript: Giới thiệu tổng quan về ngôn ngữ định kiểu CSS (Cascading Style Sheets) nhằm tách biệt cấu trúc và giao diện; phân tích các đặc tính cơ bản của CSS; giới thiệu cú pháp và vai trò của ngôn ngữ kịch bản JavaScript chạy phía trình duyệt client để xử lý tương tác người dùng.
  • Chương 5: Đăng ký và quản lý website: Hướng dẫn các thao tác quản trị trực tuyến: quy trình tra cứu và đăng ký tên miền tiếng Việt, tên miền miễn phí qua nền tảng uni, tên miền quốc gia .vn; quy trình khởi tạo tài khoản và cấu hình không gian lưu trữ (web hosting) miễn phí trên các dịch vụ thực tế như Freeservers và Hostinger.

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

Giáo trình hình thành cho người học 3 nhóm kiến thức lý thuyết cơ bản:

  • Lý thuyết truyền thông và mạng máy tính: Mô hình phân tầng mạng, nguyên lý chuyển mạch gói thông qua thiết bị định tuyến (router), cơ chế chuyển đổi địa chỉ vật lý IP sang tên miền dạng ký tự thông qua máy chủ DNS.
  • Nguyên lý kiến trúc giao diện web: Các quy chuẩn thiết kế bố cục (layout grid), phân cấp thị giác theo tỷ lệ cột, sự tương thích giữa kích thước giao diện và độ phân giải hiển thị phần cứng máy tính.
  • Tiêu chuẩn tài liệu siêu văn bản W3C: Cấu trúc phân cấp cây tài liệu DOM (Document Object Model), sự khác biệt giữa cấu trúc hiển thị và ý nghĩa ngữ nghĩa (semantic structure) của các thẻ HTML, chuẩn tương thích ngược giữa các phiên bản HTML 4.01, XHTML 1.0 và HTML5.

Kỹ năng phát triển

Tài liệu tập trung rèn luyện các nhóm kỹ năng chuyên môn:

  • Kỹ năng kỹ thuật (Technical skills): Kỹ năng viết mã HTML hợp thức, định dạng style inline, tạo cấu trúc bảng biểu phức tạp (gộp dòng rowspan, gộp cột colspan), xử lý đường dẫn tương đối/tuyệt đối trong liên kết và hình ảnh; cấu hình bản ghi DNS và tải dữ liệu lên hosting.
  • Kỹ năng phân tích (Analytical skills): Phân tích cấu trúc trang web, đánh giá hiệu quả của luồng điều hướng dựa trên số lượt nhấp chuột (click depth), phân loại các thành phần giao diện theo chức năng và nội dung.
  • Kỹ năng thực hành chuyên môn (Practical competencies): Kỹ năng xây dựng bản vẽ mẫu (prototyping/wireframing), kỹ năng debug mã nguồn trên trình duyệt Google Chrome, quản lý tập tin mã nguồn với bảng mã ký tự quốc tế UTF-8.

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

Giáo trình được thiết kế theo phương pháp sư phạm tiếp cận từng bước (step-by-step instruction), kết hợp chặt chẽ giữa lý thuyết định nghĩa và bài tập thực hành ứng dụng:

  • Tiếp cận sư phạm: Mỗi khái niệm kỹ thuật đều bắt đầu bằng định nghĩa chuẩn, tiếp nối bởi cú pháp mã nguồn tổng quát, ví dụ minh họa thực tế (code snippets) và kết quả hiển thị tương ứng trên trình duyệt (thể hiện qua các hình chụp giao diện thực tế).
  • Hệ thống bài tập và thực hành: Các bài tập thực hành được phân chia từ mức độ căn bản (như 4 bước tạo tập tin HTML đầu tiên trên Notepad với cấu trúc <!DOCTYPE html>, <html>, <body>, <h1>, <p>) đến nâng cao (như xây dựng bảng tổng kết xếp loại nhân viên có sử dụng tiêu đề <caption> và đường viền border="1").
  • Phương pháp đánh giá: Giáo trình tích hợp hệ thống 5 bộ "Câu hỏi ôn tập" ở cuối mỗi chương. Các câu hỏi tập trung kiểm tra khả năng ghi nhớ khái niệm, phân biệt các thành phần kỹ thuật tương đồng (ví dụ: phân biệt Webpage và Website, Web tĩnh và Web động, thẻ <b> và <strong>, thẻ <i> và <em>), cũng như trình bày quy trình thao tác (các bước tìm mục đích website, các bước thiết kế giao diện).
  • Hướng dẫn tự học: Đầu mỗi chương, tác giả đều quy định rõ "Mục đích" và "Nhiệm vụ tự học và tài liệu tham khảo của sinh viên". Sinh viên được yêu cầu bắt buộc phải đọc trước nội dung bài giảng và nghiên cứu đề cương chi tiết trước khi tham gia buổi học trên lớp.

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

Tài liệu thể hiện các nội dung kỹ thuật mang tính thực tiễn và cập nhật theo tiêu chuẩn công nghệ tại thời điểm biên soạn:

Tiêu chí Nội dung thể hiện trong giáo trình Dẫn chứng trong tài liệu
Tiêu chuẩn HTML5 Cập nhật cú pháp khai báo rút gọn <!DOCTYPE html>, loại bỏ các khai báo DTD phức tạp của HTML 4.01 và XHTML 1.0. Mục 3.1: So sánh bảng khai báo DOCTYPE giữa HTML5, HTML 4.01 và XHTML 1.0
Loại bỏ thẻ lỗi thời Khuyến cáo không sử dụng các thẻ định dạng trực quan cũ mà thay thế bằng thuộc tính style và CSS. Mục 3.6: "Thẻ <font> được hỗ trợ trong các phiên bản HTML trước đây, tuy nhiên nó không còn phù hợp trong HTML5."
Ý nghĩa ngữ nghĩa (Semantics) Phân biệt rõ bản chất hiển thị và ý nghĩa thông tin giữa các cặp thẻ. Phân tích cặp thẻ <b> - <strong>, <i> - <em> (nhấn mạnh ý nghĩa quan trọng của <strong> và <em>).
Trợ năng (Accessibility) Tích hợp thuộc tính hỗ trợ người dùng đặc thù. Mục 3.3: Thuộc tính alt dùng cho các ứng dụng đọc màn hình (screen readers) hỗ trợ người khiếm thị.
Tối ưu hóa tìm kiếm (SEO) Ứng dụng cấu trúc thẻ để hỗ trợ bot tìm kiếm. Mục 3.3 & 3.4: Thuộc tính lang="en-US" và phân cấp thẻ Heading <h1>-<h6> phục vụ công cụ tìm kiếm.
Tính tương thích thực tế Phân tích giới hạn phần cứng và độ phân giải màn hình tại Việt Nam. Mục 2.3: Phân tích độ phân giải 1024x768 pixel (độ rộng khả dụng 950px) để quyết định số cột layout.
Công cụ trực tuyến Hướng dẫn sử dụng các dịch vụ đăng ký tên miền và lưu trữ miễn phí. Mục 5.1 & 5.2: Minh họa đăng ký tên miền tiếng Việt, uni, host Freeservers, Hostinger.

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

Giáo trình Thiết kế Web được biên soạn nhằm phục vụ các nhóm đối tượng cụ thể trong môi trường đào tạo chuyên nghiệp:

  • Sinh viên chuyên ngành: Tài liệu là giáo trình chính khóa dành cho sinh viên ngành Công nghệ thông tin trình độ Cao đẳng tại Trường Cao đẳng Cộng đồng Đồng Tháp, đồng thời có thể sử dụng cho sinh viên các khối ngành kỹ thuật, kinh tế số có học phần nhập môn phát triển web.
  • Điều kiện tiên quyết (Prerequisites): Người học cần trang bị kiến thức cơ bản về tin học đại cương, khả năng thao tác trên hệ điều hành Windows (quản trị tập tin, thư mục, sử dụng các phần mềm hệ thống như Notepad), và kỹ năng sử dụng các trình duyệt web để tra cứu thông tin.
  • Giảng viên chuyên ngành: Giảng viên sử dụng giáo trình làm khung bài giảng chuẩn, tham chiếu hệ thống 20 hình vẽ và bảng cú pháp mẫu để xây dựng bài giảng điện tử, thiết kế đề thi kết thúc học phần dựa trên hệ thống câu hỏi ôn tập cuối chương.
  • Người tự học và tham khảo: Phù hợp cho người học có nhu cầu tự nghiên cứu kỹ thuật lập trình web từ mức độ cơ bản, nắm bắt quy trình tạo lập và đưa một trang web tĩnh lên môi trường Internet mà không đòi hỏi chi phí đầu tư ban đầu về phần mềm hay máy chủ.

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

1. Giáo trình này phù hợp với ai?

Giáo trình được thiết kế chuẩn hóa cho sinh viên hệ Cao đẳng ngành Công nghệ thông tin theo khung chương trình đào tạo của Trường Cao đẳng Cộng đồng Đồng Tháp. Ngoài ra, tài liệu phù hợp với người mới bắt đầu tiếp cận lĩnh vực thiết kế website và cần nắm vững nguyên lý cơ bản về HTML, CSS, JavaScript và quản trị host/domain.

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

Người học cần có kỹ năng sử dụng máy tính căn bản, hiểu biết thao tác tập tin trên hệ điều hành (như Windows 7, Windows 8) và biết cách sử dụng các trình duyệt web thông dụng (Google Chrome, Internet Explorer). 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 với giáo trình khác?

Giáo trình tích hợp đồng thời cả 3 khía cạnh: tư duy mỹ thuật/bố cục giao diện (quy tắc số cột, tâm lý màu sắc, độ phân giải màn hình 1024x768), kỹ thuật viết mã (HTML/CSS/JS) và kỹ năng triển khai thực tế (đăng ký domain tiếng Việt, cấu hình host miễn phí trên Freeservers, Hostinger). Mọi bài học đều được tối giản hóa công cụ, cho phép thực hành trực tiếp trên trình soạn thảo Notepad.

4. Làm sao để tự học hiệu quả?

Người học cần tuân thủ hướng dẫn tự học ở đầu mỗi chương: đọc trước bài giảng và đề cương chi tiết trước khi thực hành. Trong quá trình học, cần tự gõ trực tiếp các đoạn mã mẫu trong sách vào Notepad, lưu tệp với định dạng đuôi .html (chọn bảng mã UTF-8), mở kiểm tra trên trình duyệt và tự trả lời các câu hỏi ôn tập ở cuối mỗi chương.

5. Có tài liệu bổ trợ nào kèm theo?

Giáo trình cung cấp danh mục 20 hình vẽ chụp trực tiếp từng bước thao tác phần mềm, sơ đồ mạng, bảng đối chiếu thuộc tính HTML, hệ thống 5 bộ câu hỏi ôn tập cuối chương và danh mục tài liệu tham khảo chuyên ngành ở trang 118.

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 một hệ thống bài giảng hoàn chỉnh, nhất quán về mặt học thuật và mang tính ứng dụng thực tiễn cao cho bậc đào tạo Cao đẳng Công nghệ thông tin.

Lộ trình học tập khuyến nghị được thiết lập xuyên suốt qua 5 giai đoạn:

  1. Nắm vững hạ tầng mạng Internet và các khái niệm dịch vụ web (Chương 1).
  2. Xây dựng phương pháp tư duy bố cục, phân tích tiện ích và tạo bản mẫu wireframe (Chương 2).
  3. Thực hành lập trình cấu trúc trang web bằng HTML theo chuẩn W3C (Chương 3).
  4. Mở rộng định dạng giao diện và xử lý tương tác qua CSS và JavaScript (Chương 4).
  5. Thực hiện quy trình xuất bản, cấu hình tên miền và máy chủ lưu trữ (Chương 5).

Người học và bạn đọc có thể tham khảo thêm các nguồn tài liệu bổ trợ tại danh mục Tài liệu tham khảo (trang 118 của giáo trình) hoặc liên hệ trao đổi chuyên môn trực tiếp với tác giả qua địa chỉ thư điện tử: pqcuong@dtcc (Tác giả Phan Quốc Cường, Trường Cao đẳng Cộng đồng Đồng Tháp).