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

Giáo trình môn học Thiết kế Web (Mã mô đun: MĐ 38) được biên soạn bởi Thạc sỹ Phạm Anh Đức, xuất bản năm 2019 tại Ninh Bình, phục vụ công tác đào tạo nghề Thiết kế đồ họa và Quản trị mạng máy tính trình độ Cao đẳng tại Khoa Công nghệ thông tin và Ngoại ngữ – Trường Cao đẳng Cơ điện Xây dựng Việt Xô (thuộc Bộ Nông nghiệp và Phát triển Nông thôn).

+-------------------------------------------------------------------------+
|                  CHƯƠNG TRÌNH ĐÀO TẠO NGHỀ CAO ĐẲNG                     |
|                                                                         |
|  [Môn học chung & Cơ sở ngành] --> [MĐ 38: Thiết kế Web (90 giờ)]       |
+-------------------------------------------------------------------------+

Về vị trí trong chương trình đào tạo, mô đun được bố trí giảng dạy sau khi sinh viên đã hoàn thành các môn học chung và các môn cơ sở chuyên ngành. Về tính chất, đây là mô đun chuyên môn nghề thuộc chương trình khung quốc gia, được kết cấu theo hình thức tích hợp giữa lý thuyết và thực hành nghề nghiệp.

Mục tiêu học tập của giáo trình bao gồm ba nhóm năng lực chuẩn đầu ra:

  • Về kiến thức: Sinh viên trình bày được cấu trúc hoàn chỉnh của một website, quy trình 6 bước xây dựng và phát triển website, cùng các nguyên tắc về an toàn và bảo mật hệ thống web.
  • Về kỹ năng: Sinh viên có năng lực xây dựng trang web hoàn chỉnh dựa trên các ngôn ngữ HTML, CSS, JavaScript, XML và triển khai hệ quản trị nội dung mã nguồn mở.
  • Về năng lực tự chủ và trách nhiệm: Rèn luyện phương pháp làm việc khoa học, bảo đảm tiến độ xây dựng, vận hành hệ thống và tuân thủ các quy chuẩn an toàn trong học tập và sản xuất.

Giáo trình có tổng thời lượng 90 giờ, bao gồm 29 giờ lý thuyết, 58 giờ thực hành/thảo luận và 3 giờ kiểm tra. Cấu trúc nội dung tiếp cận từ các khái niệm mạng căn bản, kỹ thuật xây dựng giao diện tĩnh, đến ứng dụng hệ quản trị nội dung mã nguồn mở và quy trình xuất bản website lên máy chủ Internet.

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

+--------------------------------------------------------------------------+
|                       TIẾN TRÌNH 5 BÀI HỌC CỐT LÕI                       |
|                                                                          |
|  [Bài 1] Khái niệm, Dịch vụ Internet & Quy trình 6 bước (03 giờ)         |
|  [Bài 2] Bố cục Giao diện Web & Thẻ ngữ nghĩa HTML5 (16 giờ)             |
|  [Bài 3] Lập trình HTML, CSS & Mô hình Hộp Box Model (41 giờ)            |
|  [Bài 4] CMS WordPress, Themes, Plugins & Tối ưu SEO (23 giờ)            |
|  [Bài 5] Xuất bản Hosting, Tên miền & Bảo mật Website (07 giờ)           |
+--------------------------------------------------------------------------+

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

Giáo trình gồm 5 bài học với tiến trình phát triển kiến thức logic:

  1. Bài 1: Các định nghĩa và thuật ngữ (3 giờ Lý thuyết): Cung cấp tổng quan về hạ tầng Internet, cơ chế chuyển mạch gói (packet switching) trên nền giao thức IP; các dịch vụ mạng (E-Mail, FTP với mô hình máy chủ - máy khách, Gopher, Newsgroup, Usenet, Mailing List, Telnet, VoIP như dịch vụ 178 Viettel hay 171 VNPT, Video Conference, WAP). Giới thiệu lịch sử World Wide Web với ý tưởng siêu văn bản (Hypertext) của Ted Nelson (1965) và phát triển của Tim Berners-Lee (1989), vận hành qua 3 cơ chế: URL, HTTP, HTML. Trình bày quy trình 6 bước xây dựng website và hướng dẫn thao tác cơ bản trên trình duyệt Google Chrome (tìm kiếm, duyệt web ẩn danh, quản lý bookmark, quản lý tab).

  2. Bài 2: Giao diện Web (16 giờ: 4 LT, 12 TH): Phân loại giao diện và các thành phần cấu trúc tiêu chuẩn của một trang web: Header (chứa logo, banner, menu phụ), Navigation (thanh điều hướng chính), Content (nội dung chính), Sidebar (thanh bên hiển thị thông tin bổ trợ), Footer (chân trang chứa thông tin bản quyền). Giới thiệu hệ thống thẻ ngữ nghĩa trong HTML5 bao gồm <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>.

  3. Bài 3: Ngôn ngữ HTML - CSS (41 giờ: 11 LT, 28 TH, 2 KT):

    • Ngôn ngữ HTML: Chuẩn W3C; cấu trúc tài liệu (<html>, <head>, <title>, <body>); các thẻ định dạng tiêu đề <h1> đến <h6>, đoạn văn <p>, kiểu chữ (<strong>, <i>, <u>, <strike>); thẻ liên kết <a> (thuộc tính href, title, target với _blank, _self, _top, _parent và liên kết neo #id); thẻ nhúng ảnh <img /> (thuộc tính src, alt, title); bảng dữ liệu <table>, <tr>, <th>, <td>; cấu trúc biểu mẫu <form> (phương thức GET/POST, định dạng mã hóa enctype) cùng các phần tử điều khiển (input text, password, textarea, checkbox, radio button, select box, file upload, button submit/reset, hidden form); nhúng đa phương tiện qua thẻ <video>.
    • Ngôn ngữ CSS: Khái niệm Cascading Style Sheets; cú pháp Selector { property: value; }; các loại bộ chọn (tag, class, id, selector phân cấp, selector thuộc tính input[name="..."], selector đại diện *); đơn vị đo lường (chiều dài: px, em, pt, pc, in, cm, mm, ex, %; màu sắc: color-name, RGB, Hexadecimal); 3 phương pháp nhúng CSS (inline, internal qua <style>, external qua thẻ <link>); các nhóm thuộc tính Background, Font, Text; định dạng lớp giả (pseudo-classes) cho liên kết (a:link, a:hover, a:visited, a:active); phân biệt phạm vi khối giữa thẻ <div> và thẻ nội dòng <span>; mô hình hộp (Box Model) gồm margin, border, padding, content.

  4. Bài 4: Mã nguồn mở (23 giờ: 8 LT, 14 TH, 1 KT): Khái niệm mã nguồn mở; khái niệm và cài đặt Web Server; cài đặt và cấu hình hệ quản trị nội dung WordPress; quản trị nội dung qua AdminCP (quản lý danh mục, bài viết, thư viện hình ảnh, người dùng); cấu trúc mã nguồn WordPress; quản lý Theme (tìm kiếm, cài đặt, chỉnh sửa CSS giao diện theme, tùy biến header và background, 21 website tìm kiếm theme miễn phí); quản lý Plugin (tác dụng, cài đặt plugin cơ bản); kỹ thuật tối ưu hóa công cụ tìm kiếm (SEO) trên website WordPress.

  5. Bài 5: Xuất bản và duy trì Website (7 giờ: 3 LT, 4 TH): Đăng ký tên miền (domain) và dịch vụ hosting; cài đặt website lên server (xác nhận thông tin máy chủ, chuyển mã nguồn lên hosting); kiểm tra, thử nghiệm và phát triển nội dung website; quản lý an ninh và đối phó với các hiểm họa bảo mật đối với website.

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

+--------------------------------------------------------------------------+
|                  HỆ THỐNG KIẾN THỨC NỀN TẢNG (THEORY & FRAMEWORK)        |
|                                                                          |
|  1. Lý thuyết Siêu văn bản & Mạng: Hypertext, URL, HTTP, HTML (W3C)       |
|  2. Kiến trúc Giao diện: Cấu trúc HTML5 Semantics & Phân cấp Layout      |
|  3. Nguyên lý Định dạng: CSS Box Model (Margin - Border - Padding)       |
|  4. Hệ thống Động & Triển khai: Web Server, CMS WordPress, FTP, Hosting  |
+--------------------------------------------------------------------------+
  • Lý thuyết truyền thông và siêu văn bản: Nguyên lý hoạt động của giao thức IP, dịch vụ chuyển tệp FTP, dịch vụ thư tín (Mailing List, Newsgroup), nền tảng World Wide Web dựa trên chuẩn hóa của W3C.
  • Nguyên lý tách biệt cấu trúc và định dạng: Sử dụng HTML để định nghĩa cấu trúc ngữ nghĩa của dữ liệu và sử dụng CSS để kiểm soát cách thức hiển thị trên trình duyệt.
  • Mô hình hộp (CSS Box Model): Cơ chế định vị và phân bổ không gian cho các phần tử giao diện web thông qua 4 lớp: vùng nội dung (content), vùng đệm (padding), đường viền (border), và khoảng lề (margin).
  • Hệ thống quản trị cơ sở dữ liệu và máy chủ web: Nguyên lý vận hành của trang web động trên nền tảng Web Server và hệ thống CMS mã nguồn mở.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật: Viết mã HTML chuẩn cú pháp; tổ chức và viết mã CSS theo cấu trúc module (inline, internal, external); định kiểu linh hoạt với bộ chọn ID, Class, Pseudo-classes; cài đặt và cấu hình WordPress CMS, Themes, Plugins.
  • Kỹ năng phân tích: Phân tích yêu cầu giao diện từ phía người dùng; bẻ tách bố cục trang web thành các thành phần Header, Navigation, Content, Sidebar, Footer; phân tích cấu trúc dữ liệu form thu thập thông tin người dùng.
  • Năng lực thực hành: Đăng ký tên miền và hosting; sử dụng FTP hoặc công cụ quản trị server để đưa mã nguồn lên máy chủ; kiểm thử giao diện trên trình duyệt và vận hành các biện pháp bảo mật website cơ bản.

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

+--------------------------------------------------------------------------+
|                 PHÂN PHỐI THỜI LƯỢNG MÔ ĐUN (TỔNG 90 GIỜ)                |
|                                                                          |
|  [ Lý thuyết: 29 giờ (32.2%) ]                                           |
|  [ Thực hành, bài tập, thảo luận: 58 giờ (64.4%) ]                       |
|  [ Kiểm tra đánh giá: 03 giờ (3.4%) ]                                    |
+--------------------------------------------------------------------------+

Tiếp cận sư phạm

Giáo trình được thiết kế theo hình thức đào tạo nghề tích hợp, trong đó thời lượng thực hành và bài tập ứng dụng chiếm 64,4% (58/90 giờ), lý thuyết chiếm 32,2% (29/90 giờ) và kiểm tra định kỳ chiếm 3,4% (3/90 giờ). Cách tiếp cận này giúp sinh viên tiếp thu lý thuyết song song với thao tác trực tiếp trên công cụ lập trình và môi trường mạng.

Bài tập và bài thực hành mẫu

Giáo trình tích hợp nhiều bài tập thực hành mẫu có tính ứng dụng cụ thể:

  • Thao tác cấu hình trình duyệt Google Chrome (duyệt web ẩn danh Ctrl+Shift+N, quản lý bookmark Ctrl+Shift+B, quản lý tab Ctrl+T, Ctrl+W).
  • Lập trình cấu trúc bảng và hệ thống biểu mẫu (form đăng ký gồm đầy đủ các trường nhập: text, password, textarea, radio button, checkbox, select dropdown, upload file, button submit/reset, hidden field).
  • Xây dựng bài toán áp dụng Class, ID, <div>, <span> thông qua tình huống thực tế: định dạng màu sắc khác nhau cho danh sách các tỉnh và thành phố của Việt Nam (Hà Nội, TP. Hồ Chí Minh, Đà Nẵng, Thừa Thiên Huế, Khánh Hòa, Quảng Ninh, Tiền Giang).
  • Thực hành xây dựng hiệu ứng hiển thị liên kết đa trạng thái bằng pseudo-classes (a:link, a:hover, a:visited, a:active).
  • Thực hành cài đặt máy chủ Web Server cục bộ, cài đặt mã nguồn WordPress, cấu hình AdminCP, tạo danh mục, đăng bài viết và quản lý người dùng.

Phương pháp đánh giá và hướng dẫn tự học

  • Đánh giá: Gồm 3 bài kiểm tra định kỳ phân bổ vào cuối Bài 3 (HTML-CSS) và Bài 4 (Mã nguồn mở), tập trung vào sản phẩm giao diện web tĩnh và khả năng cấu hình website trên CMS.
  • Tự học: Sinh viên thực hành trực tiếp các đoạn mã nguồn mẫu; tra cứu tài liệu từ W3C; khảo sát và tải theme từ danh sách 21 website cung cấp theme WordPress miễn phí được hướng dẫn trong giáo trình; tự kiểm thử hiển thị trên các trình duyệt khác nhau (Chrome, Firefox, Opera).

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

  • Tích hợp các thẻ ngữ nghĩa HTML5: Giáo trình cập nhật cấu trúc bố cục HTML5 chuẩn (<header>, <nav>, <section>, <article>, <aside>, <footer>), giúp việc phân chia khối giao diện rõ ràng và hỗ trợ tối ưu hóa cấu trúc cho các cơ chế tìm kiếm (SEO).
  • Ứng dụng công nghệ Multimedia hiện đại: Cập nhật kỹ thuật nhúng video trực tiếp qua thẻ <video> của HTML5, phân tích sự chuyển dịch công nghệ nhằm loại bỏ sự phụ thuộc vào tiện ích Adobe Flash trên trình duyệt máy tính và các thiết bị di động.
  • Đào tạo toàn diện về CMS WordPress: Chuyển tiếp từ thiết kế web tĩnh sang quản trị web động bằng WordPress; hướng dẫn chi tiết từ việc thiết lập AdminCP, can thiệp mã CSS trong theme, cấu hình widget, tạo menu, tối ưu SEO on-page đến quản lý plugin.
  • Gắn liền với thực tiễn viễn thông Việt Nam: Đưa vào các ví dụ thực tế về hạ tầng mạng và viễn thông trong nước, điển hình như phân tích các dịch vụ gọi điện qua giao thức Internet VoIP (dịch vụ 178 của Viettel, dịch vụ 171 của VNPT).

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

+--------------------------------------------------------------------------+
|                         ĐỐI TƯỢNG SỬ DỤNG GIÁO TRÌNH                     |
|                                                                          |
+--------------------------------------------------------------------------+
  • Sinh viên: Sinh viên trình độ Cao đẳng theo học ngành Thiết kế đồ họa và ngành Quản trị mạng máy tính. Giáo trình được học sau khi sinh viên đã hoàn thành các học phần tin học cơ sở và kiến thức đại cương.
  • Yêu cầu tiên quyết: Sinh viên cần nắm vững kỹ năng sử dụng máy tính căn bản, thao tác quản lý tệp tin, kiến thức cơ bản về mạng máy tính và kỹ năng sử dụng các trình duyệt web.
  • Giảng viên: Sử dụng làm tài liệu giảng dạy chính thức theo khung chương trình 90 giờ của Tổng cục Giáo dục nghề nghiệp; làm căn cứ xây dựng đề cương chi tiết, giáo án tích hợp lý thuyết - thực hành và thiết kế các bài kiểm tra đánh giá năng lực nghề.
  • Tự học và tham khảo: Kỹ thuật viên quản trị mạng, chuyên viên đồ họa có nhu cầu học thiết kế giao diện web tĩnh bằng HTML5/CSS, hoặc người dùng cần tài liệu hướng dẫn xây dựng và vận hành website cá nhân, doanh nghiệp trên nền tảng WordPress.

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 biên soạn chuẩn hóa cho sinh viên hệ Cao đẳng nghề Thiết kế đồ họa và nghề Quản trị mạng máy tính; đồng thời phù hợp với những người bắt đầu học về lập trình giao diện web tĩnh và quản trị web mã nguồn mở.

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

Người học cần trang bị kiến thức tin học cơ sở, kỹ năng sử dụng hệ điều hành máy tính, quản lý tệp tin và thao tác lướt web trên các trình duyệt tiêu chuẩn trước khi bắt đầu mô đun này.

3. Điểm khác biệt với giáo trình khác?

Giáo trình thiết kế theo mô hình đào tạo nghề tích hợp với tỷ lệ thực hành chiếm hơn 64% thời lượng. Nội dung bao quát toàn bộ quy trình xây dựng website: từ viết mã HTML/CSS căn bản, ứng dụng Box Model, đến triển khai CMS WordPress, đăng ký tên miền, hosting và xuất bản website lên máy chủ thực tế.

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

Người học cần kết hợp đọc lý thuyết với việc gõ lại toàn bộ các đoạn mã ví dụ (HTML, CSS); thực hành từng bước trên phần mềm quản trị WordPress AdminCP; tự giải quyết các bài toán phân khối giao diện bằng thẻ <div>, <span>, class, id và kiểm tra kết quả hiển thị trên trình duyệt.

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

Giáo trình cung cấp các biểu bảng tóm tắt về đơn vị CSS (px, em, pt, %, RGB, Hex), bảng thuộc tính form/table, danh sách 21 website cung cấp theme WordPress miễn phí và hệ thống các tài liệu tham khảo về lập trình web trong và ngoài nước.

Kết luận

Giáo trình Thiết kế Web (MĐ 38) của ThS. Phạm Anh Đức là tài liệu đào tạo nghề chuẩn mực, cung cấp đầy đủ hệ thống kiến thức từ cấu trúc Internet, chuẩn giao thức WWW, ngôn ngữ đánh dấu HTML, định dạng CSS, đến kỹ thuật vận hành CMS WordPress và xuất bản website lên môi trường máy chủ mạng.

Lộ trình học tập được thiết kế khoa học theo thứ tự: tiếp thu thuật ngữ Internet -> phân tích bố cục giao diện -> viết mã HTML5/CSS -> quản trị CMS WordPress -> cấu hình tên miền/hosting và bảo mật. Tài liệu là căn cứ giảng dạy và học tập bám sát thực tiễn sản xuất cho các cơ sở giáo dục nghề nghiệp trình độ cao đẳng.