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

Giáo trình Thiết kế Web được biên soạn bởi tác giả Phan Quốc Cường, thuộc Trường Cao đẳng Cộng đồng Đồng Tháp, ban hành phục vụ chương trình đào tạo ngành Tin học ứng dụng ở trình độ Trung cấp (theo Quyết định của Hiệu trưởng nhà trường, tài liệu hoàn thành biên soạn năm 2015 và xuất bản năm 2018). Trong khung chương trình đào tạo, môn học đóng vai trò cung cấp kiến thức và kỹ năng cơ sở chuyên ngành, trang bị cho người học năng lực xây dựng và triển khai các ứng dụng web tĩnh và tương tác cơ bản trên không gian mạng.

Mục tiêu học tập của giáo trình hướng đến việc giúp người học nắm vững bản chất kỹ thuật của mạng Internet và World Wide Web, hiểu rõ quy trình phân tích và thiết kế bố cục giao diện website, làm chủ cú pháp ngôn ngữ đánh dấu siêu văn bản (HTML) cùng các thành phần định dạng và xử lý tương tác cơ bản (CSS, JavaScript). Đồng thời, tài liệu hướng dẫn hoàn chỉnh quy trình đưa một website hoàn thiện lên môi trường mạng thông qua việc đăng ký tên miền và cấu hình dịch vụ lưu trữ (web hosting).

Cấu trúc giáo trình gồm 5 chương được xây dựng theo mô hình tiếp cận tuần tự, từ nền tảng lý thuyết hạ tầng mạng, tư duy quy hoạch cấu trúc giao diện, hiện thực hóa mã nguồn giao diện, đến triển khai hạ tầng kỹ thuật trực tuyến:

  • 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

Điểm đặc thù của tài liệu là phương pháp tiếp cận trực quan hóa thao tác kỹ thuật, kết hợp mã nguồn mẫu với hệ thống 20 hình ảnh minh họa chi tiết (từ mô hình mạng, bố cục trang, giao diện soạn thảo Notepad, đến các bước đăng ký dịch vụ tên miền và hosting trực tuyến).

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

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

Nội dung học thuật của giáo trình được phân bổ chi tiết qua 5 chương chuyên đề:

+-----------------------------------------------------------------------+
|                TIẾN TRÌNH NỘI DUNG GIÁO TRÌNH THIẾT KẾ WEB            |
+-----------------------------------------------------------------------+
| Chương 1: Giới thiệu Internet (Hạ tầng mạng, thuật ngữ www, DNS, IP)  |
|                                   ↓                                   |
| Chương 2: Các bước thiết kế Website (Mục đích, tiện ích, prototyping) |
|                                   ↓                                   |
| Chương 3: Ngôn ngữ HTML (Cấu trúc thẻ, thuộc tính, định dạng, bảng)  |
|                                   ↓                                   |
| Chương 4: CSS và JavaScript (Định kiểu hiển thị & tương tác)          |
|                                   ↓                                   |
| Chương 5: Đăng ký và quản lý Website (Tên miền, hosting trực tuyến)   |
+-----------------------------------------------------------------------+
  1. Chương 1: Giới thiệu Internet: Trình bày tổng quan về hệ thống mạng máy tính toàn cầu kết nối thông qua hệ thống dây cáp mạng và đường điện thoại; định nghĩa các mạng thành viên gồm LAN (Local Area Network), MAN (Metropolitan Area Network), WAN (Wide Area Network) liên kết qua router. Chương làm rõ khái niệm World Wide Web (WWW) như một dịch vụ đa phương tiện dựa trên siêu liên kết (hyperlink). Đồng thời, chương chuẩn hóa các thuật ngữ cốt lõi: Webpage (tập tin .htm hoặc .html), Website, Homepage (trang chủ index.html), phân biệt Website tĩnh và Website động (liên kết cơ sở dữ liệu), hệ thống tên miền (Domain Name), cơ chế phân giải DNS sang địa chỉ IP, khái niệm Máy chủ (Server), định dạng URL (Uniform Resource Locator) và nguyên lý hoạt động của Trình duyệt web (Web Browser) trong việc biên dịch mã HTML.
  2. Chương 2: Các bước thiết kế Website: Cung cấp quy trình xây dựng website từ giai đoạn xác định mục tiêu và phân loại nội dung (phân biệt phong cách blog cá nhân với website doanh nghiệp). Chương xác lập chiến lược thiết kế qua hai yếu tố: Giao diện (ứng dụng tâm lý màu sắc, sự cân bằng thẩm mỹ) và Tính tiện ích (Usability - quy tắc điều hướng chuẩn từ 2 đến tối đa 4 lần nhấp chuột). Quy trình thiết kế giao diện được mô hình hóa qua 3 bước:
    • Bước 1: Tìm nguồn cảm hứng: Thu thập và lưu trữ ảnh chụp độ phân giải thực của 10–20 mẫu website tiêu chuẩn.
    • Bước 2: Định hình ý tưởng: Đúc kết ý tưởng bố cục, giải pháp màu sắc, cách bố trí phân mục nội dung.
    • Bước 3: Xây dựng khung nội dung (Prototyping): Thiết lập mô hình thô không màu sắc, phân loại đối tượng hiển thị, tính toán số cột (1, 2 hoặc 3 cột) tương thích với độ phân giải màn hình tiêu chuẩn 1024 x 768 px (giới hạn độ rộng tối đa 950px cho 3 cột).
  3. Chương 3: HTML: Khảo sát toàn diện ngôn ngữ đánh dấu siêu văn bản HyperText Markup Language. Phân tích cấu trúc tài liệu HTML chuẩn gồm phần khai báo <!DOCTYPE html>, cặp thẻ gốc <html>, phần thông tin <head> chứa tiêu đề <title>, và khối nội dung hiển thị <body>. Chương giới thiệu lịch sử phát triển các phiên bản HTML từ năm 1991, phân loại cú pháp khai báo DOCTYPE giữa HTML5, HTML 4.01 và XHTML 1.0. Các công cụ soạn thảo được đề cập bao gồm Notepad, TextEdit, Adobe Dreamweaver, Microsoft Expression Web và CoffeeCup HTML Editor. Nội dung chi tiết bao gồm:
    • Các thuộc tính phần tử: lang (hỗ trợ công cụ tìm kiếm và truy cập), title (hiển thị tooltip), href (siêu liên kết), src, width, height, và thuộc tính alt (văn bản thay thế hỗ trợ screen readers cho người khiếm thị theo khuyến nghị W3C).
    • Hệ thống tiêu đề: Phân cấp từ <h1> (quan trọng nhất) đến <h6>.
    • Đoạn văn bản <p> và cơ chế xử lý khoảng trắng/xuống dòng của trình duyệt.
    • Định dạng hiển thị qua thuộc tính style (color, font-family, font-size, text-align).
    • Các thẻ định dạng ngữ nghĩa: <b> và <strong> (nhấn mạnh ý nghĩa), <i> và <em>, <small>, <mark>, <del>, <ins>, <sub>, <sup>.
    • Cú pháp ghi chú không hiển thị: <!-- nội dung -->.
    • Thẻ liên kết <a> với các giá trị điều hướng target (_blank, _self, _parent, _top, Framename) và điều hướng nội bộ bằng thuộc tính id.
    • Thẻ hình ảnh <img> không có thẻ đóng và kỹ thuật kiểm soát kích thước bằng style hoặc width/height.
    • Cấu trúc bảng <table>, hàng <tr>, ô dữ liệu <td>, tiêu đề cột <th>, tiêu đề bảng <caption>, kết hợp thuộc tính đường viền border, gộp cột colspan và gộp dòng rowspan.
  4. Chương 4: CSS và JavaScript: Giới thiệu ngôn ngữ định kiểu tầng CSS (Cascading Style Sheets) để thiết lập các đặc tính hiển thị giao diện tách biệt với mã HTML, cùng ngôn ngữ lập trình kịch bản JavaScript nhằm xử lý các hành vi logic và tương tác người dùng trên trang web.
  5. Chương 5: Đăng ký và quản lý Website: Hướng dẫn quy trình đưa website vào vận hành thực tế thông qua việc tra cứu và đăng ký tên miền (tên miền tiếng Việt, tên miền quốc gia .vn, tên miền miễn phí qua hệ thống uni.me), kết hợp đăng ký và cấu hình các gói dịch vụ lưu trữ miễn phí như freeservers và Hostinger.

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

Giáo trình thiết lập cho người học 3 khối kiến thức nền tảng:

  • Nguyên lý hạ tầng và truyền thông web: Cơ chế phân giải tên miền thành địa chỉ IP thông qua hệ thống DNS toàn cầu, mô hình mạng phân tán không tập trung quyền điều khiển, nguyên lý máy trạm - máy phục vụ (Client - Server).
  • Cấu trúc tài liệu siêu văn bản chuẩn W3C: Quy chuẩn cú pháp thẻ mở/thẻ đóng, phân biệt phần tử rỗng (như <img>), phân cấp cấu trúc cây tài liệu, chuẩn mã hóa ký tự UTF-8 so với ANSI.
  • Nguyên tắc tổ chức giao diện và công thái học web (Web Usability): Tính toán kích thước giao diện theo điểm ảnh (pixel), sự tương thích độ phân giải màn hình, giới hạn nhấp chuột điều hướng, tối ưu khả năng tiếp cận (Accessibility) thông qua văn bản thay thế.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã HTML chuẩn cú pháp bằng trình soạn thảo văn bản thuần (Notepad); thiết lập bảng mã UTF-8; sử dụng đúng các thuộc tính điều hướng, liên kết neo (anchor link), định dạng văn bản, nhúng hình ảnh và tổ chức dữ liệu dạng bảng.
  • Kỹ năng phân tích (Analytical skills): Phân tích mục đích của website; bóc tách cấu trúc giao diện mẫu; phân loại khối nội dung và lựa chọn mô hình phân cột (1 cột, 2 cột hoặc 3 cột) phù hợp với dung lượng thông tin.
  • Kỹ năng thực thi thực tế (Practical competencies): Tạo lập tập tin web hoàn chỉnh trên máy cục bộ; kiểm thử hiển thị trên trình duyệt (Google Chrome); tra cứu tên miền; thao tác đăng ký tài khoản và cấu hình không gian lưu trữ trên các nền tảng hosting.

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 cung cấp lý thuyết định nghĩa và hướng dẫn thực hành từng bước (Step-by-step tutorial). Nội dung bài giảng được thiết kế để người học tiếp cận trực tiếp từ các công cụ sẵn có trên hệ điều hành trước khi tiếp cận các phần mềm phức tạp.

+-------------------------------------------------------------------------+
|                  QUY TRÌNH THỰC HÀNH TẠO TRANG WEB TRONG GIÁO TRÌNH     |
+-------------------------------------------------------------------------+
| Bước 1: Khởi động Notepad từ Start Menu / Accessories                   |
| Bước 2: Nhập cấu trúc mã HTML tiêu chuẩn (<!DOCTYPE html>, html, body)  |
| Bước 3: Lưu tập tin với đuôi .htm hoặc .html, định dạng mã hóa UTF-8   |
| Bước 4: Kiểm thử và xem kết quả hiển thị trên trình duyệt Google Chrome |
+-------------------------------------------------------------------------+

Hệ thống bài tập và câu hỏi ôn tập được bố trí ở cuối mỗi chương nhằm củng cố kiến thức:

  • Chương 1: 5 câu hỏi lý thuyết tập trung vào khái niệm Internet, WWW, phân biệt Webpage với Website, khái niệm Tên miền, và phân biệt Website tĩnh với Website động.
  • Chương 2: 3 câu hỏi quy trình yêu cầu trình bày các bước xác định mục đích website, xây dựng chiến lược thiết kế và các bước thiết kế giao diện.
  • Chương 3, 4, 5: Các câu hỏi ôn tập và bài tập thực hành viết mã, định dạng hiển thị, cấu hình đăng ký dịch vụ trực tuyến.

Phương pháp đánh giá kết quả học tập dựa trên khả năng tái hiện đúng các khái niệm kỹ thuật và năng lực xây dựng sản phẩm trang web thực tế, chạy đúng trên trình duyệt và trực tuyến hóa thành công. Giáo trình quy định rõ nhiệm vụ tự học của người học tại từng chương: phải đọc trước tài liệu bài giảng và xem trước đề cương chi tiết trước khi lên lớp để nắm bắt mục đích và cấu trúc nội dung.

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

  • Cập nhật tiêu chuẩn HTML5: Giáo trình phân tích sự khác biệt về cú pháp DOCTYPE giữa HTML5 (<!DOCTYPE html>) với các chuẩn cũ như HTML 4.01 Transitional và XHTML 1.0 Transitional; chỉ rõ thẻ <font> trong các phiên bản cũ đã không còn phù hợp trong chuẩn HTML5 và được thay thế bằng thuộc tính style.
  • Tích hợp tiêu chuẩn khuyến nghị của W3C: Cung cấp các chỉ dẫn kỹ thuật theo tổ chức World Wide Web Consortium (W3C), bao gồm việc chuẩn hóa viết chữ thường cho tên thuộc tính, sử dụng dấu ngoặc kép cho giá trị thuộc tính trong các tài liệu chuẩn hóa, và sử dụng thuộc tính style trong thẻ <img> thay vì phụ thuộc hoàn toàn vào width/height.
  • Hỗ trợ khả năng tiếp cận (Accessibility): Nhấn mạnh vai trò của thuộc tính alt trong thẻ <img> phục vụ phần mềm đọc màn hình (screen readers) cho người khiếm thị, và thuộc tính lang trong thẻ <html> phục vụ ứng dụng truy cập cùng công cụ tìm kiếm.
  • Gắn liền triển khai thực tế: Giáo trình không dừng lại ở mức độ viết mã cục bộ (localhost) mà hướng dẫn trực tiếp các bước thao tác trên các dịch vụ có thật tại thời điểm biên soạn như tra cứu tên miền tiếng Việt, đăng ký tên miền uni.me, và thiết lập hosting trên freeservers, Hostinger.

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

  • Đối tượng đào tạo chính: Sinh viên theo học hệ 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 (áp dụng trực tiếp tại Trường Cao đẳng Cộng đồng Đồng Tháp).
  • Yêu cầu kiến thức nền tảng (Prerequisites): Người học cần có kỹ năng sử dụng máy tính cơ bản, thao tác với hệ điều hành Windows (mở ứng dụng qua menu Start, quản lý thư mục, sử dụng phần mềm soạn thảo Notepad, lưu trữ tập tin đúng phần mở rộng và chọn chuẩn mã hóa ký tự).
  • Phạm vi sử dụng đối với giảng viên: Tài liệu đóng vai trò là giáo trình chuẩn để xây dựng đề cương bài giảng, phân bổ thời lượng lý thuyết - thực hành, và làm căn cứ ra đề kiểm tra, câu hỏi ôn tập kết thúc học phần.
  • Phạm vi sử dụng đối với người tự học: Phù hợp cho người bắt đầu tiếp cận lĩnh vực thiết kế web từ con số 0 nhờ tiến trình hướng dẫn từ công cụ cơ bản nhất, không đòi hỏi cài đặt môi trường phát triển phức tạp ngay từ đầu.

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

1. Giáo trình này được biên soạn cho đối tượng nào?

Giáo trình được biên soạn chính thức cho học sinh, sinh viên ngành Tin học ứng dụng trình độ Trung cấp của Trường Cao đẳng Cộng đồng Đồng Tháp, đồng thời có thể dùng làm tài liệu tham khảo cho người mới bắt đầu học thiết kế web.

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

Người học chỉ cần nắm vững kỹ năng tin học văn phòng cơ bản, thao tác quản lý tệp tin và thư mục trên hệ điều hành Windows (như thao tác trên Windows 7, Windows 8), không bắt buộc phải có kiến thức lập trình từ trước.

3. Giáo trình tiếp cận việc xây dựng website bằng công cụ nào?

Giáo trình hướng dẫn tiếp cận từ trình soạn thảo văn bản đơn giản có sẵn trong hệ thống là Notepad (trên PC) hoặc TextEdit (trên Mac) để hiểu rõ bản chất mã nguồn, sau đó giới thiệu thêm các công cụ chuyên nghiệp như Adobe Dreamweaver, Microsoft Expression Web và CoffeeCup HTML Editor.

4. Người học có thể tự đưa website lên mạng sau khi học giáo trình này không?

Có. Chương 5 của giáo trình hướng dẫn cụ thể từng bước tra cứu và đăng ký tên miền (miễn phí và tên miền Việt Nam), cùng cách tạo tài khoản và đưa dữ liệu lên các dịch vụ hosting trực tuyến như Freeservers và Hostinger.

5. Cấu trúc một trang web HTML chuẩn theo giáo trình gồm những thành phần nào?

Một trang HTML chuẩn bắt đầu bằng khai báo <!DOCTYPE html>, tiếp đến là thẻ gốc <html>, khối thông tin tiêu đề <head> chứa thẻ <title>, và khối nội dung hiển thị <body> chứa các tiêu đề <h1>-<h6>, đoạn văn <p>, hình ảnh <img>, bảng <table> và các siêu liên kết <a>.

Kết luận

Giáo trình 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 lộ trình học tập hoàn chỉnh về quy trình xây dựng website từ nền tảng. Giá trị học thuật cốt lõi của tài liệu nằm ở tính hệ thống, chuẩn hóa theo các khuyến nghị của W3C và cấu trúc bài học gắn liền giữa lý thuyết với thao tác thực hành cụ thể.

Lộ trình học tập được thiết lập rõ ràng: người học bắt đầu từ việc nắm vững bản chất mạng Internet (Chương 1), hoạch định cấu trúc giao diện theo tiêu chuẩn màn hình (Chương 2), lập trình cấu trúc giao diện bằng HTML (Chương 3), mở rộng định dạng và xử lý tương tác qua CSS/JavaScript (Chương 4), và hoàn thiện kỹ năng xuất bản website lên không gian mạng (Chương 5). Đây là tài liệu nền tảng phục vụ hiệu quả cho công tác đào tạo nghề và tự nghiên cứu kỹ thuật web căn bản.