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

Giáo trình môn học Thiết kế Web (Mã mô đun: MĐ 23) là tài liệu đào tạo chuyên môn nghề được biên soạn bởi Khoa Công nghệ thông tin và Ngoại ngữ thuộc Trường Cao đẳng Cơ điện Xây dựng Việt Xô (Bộ Nông nghiệp và Phát triển Nông thôn), nghiệm thu và lưu hành tại Tam Điệp năm 2018. Trong khung chương trình đào tạo quốc gia, mô đun này đượ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 của nghề Tin học văn phòng (trình độ Trung cấp) cũng như nghề Quản trị mạng máy tính.

Tài liệu được kết cấu với tổng thời lượng 90 giờ học, bao gồm 29 giờ lý thuyết, 58 giờ thực hành/thảo luận/bài tập và 3 giờ kiểm tra đánh giá định kỳ. Mô đun hướng tới ba mục tiêu học tập (learning outcomes) cốt lõi:

  • Về kiến thức: Trang bị cho người học khả năng trình bày cấu trúc tổng thể 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 lý liên quan đến an toàn và bảo mật hệ thống web.
  • Về kỹ năng: Hình thành năng lực trực tiếp tạo lập website hoàn chỉnh dựa trên ngôn ngữ đánh dấu siêu văn bản HTML, bảng kiểu định tầng CSS, mã kịch bản JavaScript, cấu trúc dữ liệu XML và triển khai hệ quản trị nội dung mã nguồn mở WordPress.
  • Về năng lực tự chủ và trách nhiệm: Rèn luyện phương pháp tổ chức 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ủ an toàn lao động trong môi trường thiết bị máy tính.

Cấu trúc giáo trình tiếp cận theo mô hình tích hợp đồng bộ giữa lý thuyết kỹ thuật và thực hành ứng dụng, kết hợp các kiến thức chuẩn hóa từ tổ chức World Wide Web Consortium (W3C) với quy trình phát triển website trong thực tế sản xuất.

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

[Xuất bản Hosting/Domain & Bảo mật Hệ thống Web]

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

Giáo trình phân chia chương trình đào tạo thành 5 bài học tuần tự theo logic phát triển phần mềm web:

  • Bài 1: Các định nghĩa và thuật ngữ (4 giờ Lý thuyết): Cung cấp bức tranh toàn cảnh về mạng Internet, cơ chế truyền thông chuyển gói dữ liệu (packet switching) trên giao thức IP. Khái quát các dịch vụ Internet truyền thống và hiện đại: E-Mail, FTP (mô hình máy chủ - máy khách), Gopher, Newsgroup, Usenet, Mailing List, Telnet, hệ thống thoại qua giao thức mạng VoIP (dẫn chứng dịch vụ 178 của Viettel và 171 của VNPT), dịch vụ hội nghị truyền hình (Video Conference), giao thức ứng dụng không dây WAP trên mạng GSM. Giới thiệu nguồn gốc World Wide Web (WWW) dựa trên ý tưởng siêu văn bản (Hypertext) của Ted Nelson (1965) và dự án chính thức của Tim Berners-Lee (1989), vận hành qua ba trụ cột: cơ chế định danh URL, giao thức HTTP và ngôn ngữ HTML. Phân biệt trang web đơn lẻ (Web page) và tập hợp trang mạng (Website tĩnh bằng HTML hoặc Website động trên CMS); phân tích nguyên lý trình duyệt web (Internet Explorer, Mozilla Firefox, Safari, Google Chrome, Opera, Lynx, Konqueror...) và hướng dẫn các thao tác kỹ thuật trên Google Chrome (tra cứu, duyệt web ẩn danh Incognito qua tổ hợp phím Ctrl + Shift + N, đánh dấu trang Bookmark bằng Ctrl + Shift + B, quản lý thẻ Tab qua Ctrl + T, Ctrl + W).

  • Bài 2: Giao diện Web (16 giờ: 4h Lý thuyết, 12h Thực hành): Phân tích cấu trúc bố cục website tiêu chuẩn bao gồm: Header (chứa logo, banner, menu phụ), Navigation (thanh điều hướng chính), Content (khu vực nội dung), Sidebar (thanh bên chứa liên kết phụ, quảng cáo), Footer (chân trang chứa thông tin bản quyền). Trình bày hệ thống thẻ ngữ nghĩa của HTML5 dùng để xây dựng khung layout: <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>. Hướng dẫn phương pháp sử dụng phần mềm Photoshop để thiết kế bản mẫu giao diện theo yêu cầu kỹ thuật.

  • Bài 3: Ngôn ngữ HTML - CSS (40 giờ: 10h Lý thuyết, 28h Thực hành, 2h Kiểm tra):

    • Ngôn ngữ HTML: Trình bày cấu trúc tài liệu cơ bản (<html>, <head>, <title>, <body>), hệ thống 6 cấp độ tiêu đề từ <h1> đến <h6> theo chuẩn SEO (khuyến nghị 1 thẻ <h1>, tối thiểu 2 thẻ <h2>), đoạn văn <p>, các thẻ định dạng ký tự (<strong>, <i>, <u>, <strike>), thuộc tính nội tuyến style (color, background-color, font-size, font-family, text-align). Thiết lập liên kết <a> (thuộc tính href, title, target với các giá trị _self, _blank, _top, _parent, liên kết neo #id), chèn hình ảnh <img> (thuộc tính src, alt, title), tạo bảng dữ liệu <table> (<tr>, <th>, <td>, <caption>, <col>, <thead>, <tfoot>, <tbody>). Xây dựng biểu mẫu tương tác <form> (thuộc tính action, method GET/POST, target, enctype định dạng application/x-www-form-urlencoded hoặc multipart/form-data) với các phần tử điều khiển: Text Input đơn dòng, Password Input, Textarea đa dòng, Checkbox, Radio Button, Select Box danh sách thả xuống, File Upload Box, Button (submit, reset, button, image), Hidden Form truyền tham số ẩn và thẻ chèn video đa phương tiện <video> của chuẩn HTML5.
    • Ngôn ngữ CSS: Định nghĩa cú pháp chuẩn Selector { property: value; }, ký pháp chú thích /* ... */, 3 phương thức nhúng CSS (Inline style trong thuộc tính thẻ, Internal style trong khối <style> tại phần <head>, External style liên kết tệp .css rời qua thẻ <link>). Phân loại đơn vị đo chiều dài (%, in, cm, mm, em, ex, pt, pc, px) và đơn vị màu sắc (Color-name, RGB, Hexadecimal #HEX). Quản trị thuộc tính nền background (color, image url(), repeat repeat-x, repeat-y, repeat, no-repeat, attachment scroll, fixed, position tọa độ, cú pháp rút gọn). Quản trị thuộc tính chữ font (font-family generic/family-names, font-style italic, oblique, font-variant small-caps, font-weight normal, bold, 100-900, font-size, font rút gọn). Định dạng văn bản text (color, text-indent thụt lề, text-align canh lề, letter-spacing giãn ký tự, text-decoration underline, overline, line-through, blink, text-transform uppercase, lowercase, capitalize, none). Điều khiển trạng thái liên kết qua pseudo-classes (a:link, a:hover, a:visited, a:active), phân cấp định danh qua class (dùng cho nhóm phần tử) và id (định danh duy nhất), cùng việc phân chia khối bằng thẻ <div> và thành phần nội dòng <span>.

  • Bài 4: Mã nguồn mở (24 giờ: 8h Lý thuyết, 15h Thực hành, 1h Kiểm tra): Giới thiệu khái niệm phần mềm mã nguồn mở; chức năng và phương pháp cài đặt môi trường máy chủ cục bộ (Web Server); quy trình triển khai hệ quản trị nội dung WordPress: thiết lập cơ sở dữ liệu, quản trị giao diện điều khiển AdminCP, cấu trúc mã nguồn, cài đặt và tùy chỉnh Giao diện (Theme/CSS), tích hợp Tiện ích mở rộng (Plugin), phân quyền người dùng, quản lý bài viết, chuyên mục, trang tĩnh (Pages), menu điều hướng, widget và tối ưu hóa công cụ tìm kiếm (SEO).

  • Bài 5: Xuất bản và duy trì Website (6 giờ: 3h Lý thuyết, 3h Thực hành): Quy trình đăng ký tên miền (Domain Name) và không gian lưu trữ (Hosting); cấu hình thông số kết nối máy chủ; sử dụng phần mềm truyền tệp tin qua giao thức FTP để đưa mã nguồn lên máy chủ; quy trình kiểm thử chức năng, phát triển nội dung sau triển khai; phân tích các hiểm họa an ninh mạng và giải pháp thiết lập an toàn cho website.

+-------------------------------------------------------------------------------+
|                       PHÂN BỔ THỜI LƯỢNG MÔ ĐUN (90 GIỜ)                      |
+------------------------------------+-----------+-----------+----------+-------+
| Tên bài học                        | Tổng số   | Lý thuyết | T.Hành   | K.Tra |
+------------------------------------+-----------+-----------+----------+-------+
| Bài 1: Các định nghĩa và thuật ngữ | 04 giờ    | 04 giờ    | 00 giờ   | 0 giờ |
| Bài 2: Giao diện Web               | 16 giờ    | 04 giờ    | 12 giờ   | 0 giờ |
| Bài 3: Ngôn ngữ HTML - CSS         | 40 giờ    | 10 giờ    | 28 giờ   | 2 giờ |
| Bài 4: Mã nguồn mở (WordPress)     | 24 giờ    | 08 giờ    | 15 giờ   | 1 giờ |
| Bài 5: Xuất bản & duy trì Website  | 06 giờ    | 03 giờ    | 03 giờ   | 0 giờ |
+------------------------------------+-----------+-----------+----------+-------+
| TỔNG CỘNG                          | 90 GIỜ    | 29 GIỜ    | 58 GIỜ   | 3 GIỜ |
+------------------------------------+-----------+-----------+----------+-------+

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

Giáo trình củng cố ba khối kiến thức kỹ thuật:

  1. Lý thuyết mạng và truyền thông dữ liệu: Nguyên lý hoạt động của mô hình máy chủ - máy khách (Client-Server), hệ thống phân giải tên miền (DNS), giao thức truyền tải siêu văn bản HTTP, truyền tệp FTP và hạ tầng truyền gói IP.
  2. Nguyên lý tiêu chuẩn hóa giao diện: Các chuẩn công nghệ do W3C quy định đối với tài liệu HTML và bảng định kiểu CSS; cơ chế phân tầng độ ưu tiên của bộ chọn (Selectors) và tính kế thừa thuộc tính trong mô hình hộp (Box Model).
  3. Kiến trúc hệ quản trị nội dung: Cấu trúc website động chạy trên máy chủ (Server-side CMS), kết nối giữa tầng hiển thị giao diện, mã nguồn PHP và cơ sở dữ liệu nền tảng.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật: Viết mã HTML/CSS đúng chuẩn ngữ pháp; thiết kế wireframe và mockup giao diện trên phần mềm Photoshop; cấu hình máy chủ cục bộ (Local Web Server); cài đặt, chỉnh sửa theme bằng CSS và mở rộng tính năng WordPress qua plugins.
  • Kỹ năng phân tích: Phân tích bố cục giao diện trang web thành các khối logic; đánh giá khả năng hiển thị tương thích giữa các trình duyệt web khác nhau; lựa chọn cấu trúc thẻ tiêu đề tối ưu cho chỉ mục của máy tìm kiếm.
  • Năng lực thực hành nghề nghiệp: Khởi tạo tài khoản hosting, kết nối FTP để xuất bản mã nguồn lên Internet; kiểm thử và sửa lỗi giao diện; lập kế hoạch sao lưu, cập nhật và duy trì an toàn hệ thống.

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 tích hợp (Integrated Teaching), trong đó mỗi nội dung lý thuyết đều được ánh xạ trực tiếp sang các bài tập thực hành tương ứng. Cơ cấu chương trình thể hiện rõ định hướng nghề nghiệp khi dành 58 giờ thực hành trên tổng số 90 giờ (chiếm 64,4% thời lượng toàn khóa).

TỶ LỆ PHÂN PHỔI THỜI LƯỢNG MÔ ĐUN:
[█████████████████████████████████████████████             ] 
  Lý thuyết: 32.2% (29h)   Thực hành: 64.4% (58h)   Kiểm tra: 3.4% (3h)
  • Hệ thống bài tập và thực hành kỹ thuật:
    • Người học được hướng dẫn viết mã nguồn HTML/CSS trực tiếp trên các trình biên tập mã, quan sát kết quả hiển thị trên các trình duyệt thực tế.
    • Thực hành từng bước các tình huống kỹ thuật cụ thể: tạo bảng dữ liệu phân cấp, thiết lập form thu thập thông tin người dùng với đầy đủ các kiểu input, cấu hình pseudo-classes để tạo hiệu ứng hover/active cho thanh điều hướng.
    • Chuyển đổi bản vẽ giao diện đồ họa từ tệp Photoshop sang mã nguồn HTML5/CSS hoàn chỉnh.
    • Cài đặt hệ thống WordPress hoàn chỉnh trên máy chủ thử nghiệm, thực hiện thao tác đổi giao diện, tùy chỉnh background, cài đặt plugin và xuất bản bài viết chuẩn SEO.
  • Phương pháp kiểm tra đánh giá: Chương trình bố trí 3 giờ kiểm tra chính thức tại hai mốc quan trọng:
    • Kiểm tra lần 1 (2 giờ tại Bài 3): Đánh giá kỹ năng viết mã HTML, xây dựng bảng, biểu mẫu và liên kết tệp định kiểu CSS cho giao diện tĩnh.
    • Kiểm tra lần 2 (1 giờ tại Bài 4): Đánh giá năng lực thiết lập, tùy biến và quản trị hệ thống mã nguồn mở WordPress.
    • Tiêu chí đánh giá tập trung vào tính chính xác của cú pháp mã nguồn, mức độ hoàn thiện của giao diện so với yêu cầu, và khả năng vận hành ổn định trên máy chủ.
  • Định hướng tự học: Tài liệu cung cấp các đoạn mã nguồn mẫu rõ ràng cho từng thuộc tính để người học tự kiểm tra; hướng dẫn khai thác 21 địa chỉ trang web tìm kiếm giao diện miễn phí để nâng cao kỹ năng thực hành ngoài giờ lên lớp.

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

Nội dung giáo trình phản ánh các bước chuyển đổi công nghệ trong thiết kế web giai đoạn chuyển tiếp:

  1. Tích hợp các tiêu chuẩn HTML5: Giáo trình đưa vào giảng dạy hệ thống thẻ ngữ nghĩa mới (<header>, <nav>, <section>, <article>, <aside>, <footer>) thay thế cho phương pháp phân chia khối generic bằng thẻ <div> truyền thống, hỗ trợ các thuật toán của máy tìm kiếm thu thập dữ liệu cấu trúc website.
  2. Cập nhật chuẩn xử lý đa phương tiện: Thay thế công nghệ Adobe Flash cũ bằng thẻ chuẩn <video> của HTML5, giảm tải yêu cầu cài đặt tiện ích bổ sung (plug-in) của trình duyệt và tương thích tốt hơn với thiết bị di động.
  3. Chuẩn hóa cú pháp CSS rút gọn (Shorthand Properties): Hệ thống hóa các cú pháp rút gọn cho nhóm thuộc tính background và font, giúp giảm dung lượng tệp tin mã nguồn và tăng tốc độ tải trang.
  4. Tích hợp yêu cầu tối ưu hóa công cụ tìm kiếm (SEO On-page): Lồng ghép kỹ thuật cấu trúc dữ liệu thẻ tiêu đề (<h1> - <h6>), thuộc tính văn bản thay thế alt của thẻ <img>, thẻ <title> và cấu hình SEO trong WordPress vào ngay nội dung giảng dạy kỹ thuật lập trình.
  5. Gắn kết thực tế sản xuất và vận hành: Quy trình đào tạo không dừng lại ở việc lập trình trên máy tính cá nhân mà bao quát toàn bộ chu trình đưa website vào sử dụng: từ đăng ký tên miền, thuê hosting, truyền mã nguồn qua FTP, đến đánh giá nguy cơ an ninh thông tin.

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

  • Học sinh, sinh viên: Tài liệu được thiết kế chuyên biệt cho sinh viên trình độ Trung cấp và Cao đẳng thuộc các ngành Tin học văn phòng, Quản trị mạng máy tính, Công nghệ thông tin có nhu cầu hoàn thành mô đun Thiết kế Web.
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành khối kiến thức tin học đại cương, các môn học cơ sở chuyên ngành, có kỹ năng thao tác cơ bản trên hệ điều hành, làm việc với tệp tin và sử dụng thành thạo trình duyệt web.
  • Giảng viên chuyên ngành: Giáo trình đóng vai trò là khung chương trình chuẩn về phân bổ thời gian giảng dạy (tổng số 90 giờ), cung cấp hệ thống định nghĩa, cú pháp mã nguồn mẫu và cơ sở dữ liệu bài tập thực hành phục vụ công tác soạn bài giảng và ra đề kiểm tra.
  • Người tự học và nghiên cứu độc lập: Tài liệu là nguồn tham khảo kỹ thuật cơ bản cho những cá nhân bắt đầu tìm hiểu quy trình xây dựng website từ nền tảng mã nguồn tĩnh (HTML/CSS) đến các nền tảng quản trị nội dung mã nguồn mở (WordPress).

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

1. Giáo trình này phù hợp với trình độ đào tạo nào?
Tài liệu được biên soạn chính thức cho trình độ Trung cấp chuyên nghiệp nghề Tin học văn phòng và Quản trị mạng máy tính, đồng thời có thể sử dụng làm tài liệu tham khảo cho sinh viên hệ Cao đẳng kỹ thuật.

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

3. Giáo trình này có điểm gì khác biệt so với các tài liệu lập trình web chuyên sâu?
Giáo trình tập trung vào tính chất tích hợp thực hành nghề nghiệp (chiếm 64,4% thời lượng), không đi sâu vào các ngôn ngữ lập trình thuật toán phức tạp mà trang bị năng lực hiện thực hóa giao diện bằng HTML/CSS và quản trị website nhanh thông qua CMS mã nguồn mở WordPress.

4. Làm thế nào để tự học và thực hành hiệu quả theo giáo trình?
Người học cần trực tiếp nhập các đoạn mã ví dụ trong sách vào trình soạn thảo mã nguồn, kiểm tra hiển thị trên trình duyệt Chrome, sử dụng phím Ctrl + Shift + N để kiểm tra trang ở chế độ ẩn danh không lưu cache, và cài đặt môi trường máy chủ ảo trên máy tính cá nhân để thực hành quản trị WordPress.

5. Giáo trình có cung cấp các tài nguyên phụ trợ nào kèm theo không?
Tài liệu cung cấp danh mục bảng mã màu Hexadecimal, bảng đơn vị đo CSS, hướng dẫn sử dụng phím tắt trên Google Chrome, và bảng tổng hợp 21 website cung cấp giao diện (Themes) miễn phí cho WordPress.

Kết luận

Giáo trình mô đun Thiết kế Web (MĐ 23) cung cấp hệ thống kiến thức nền tảng và quy trình kỹ thuật hoàn chỉnh để xây dựng, xuất bản một website.

Lộ trình học tập được định hình qua 5 giai đoạn:

  1. Nắm bắt hạ tầng Internet, dịch vụ WWW và thao tác trình duyệt.
  2. Thiết kế bố cục giao diện web bằng Photoshop và các thẻ ngữ nghĩa HTML5.
  3. Làm chủ kỹ thuật viết mã HTML và bảng định kiểu CSS chuẩn W3C.
  4. Triển khai, quản trị website động trên nền tảng mã nguồn mở WordPress.
  5. Cấu hình tên miền, hosting, tải mã nguồn qua FTP và quản trị an toàn website.

Để hoàn thiện kỹ năng, người học có thể tham khảo thêm các tài liệu kỹ thuật chuyên sâu về tiêu chuẩn W3C, tài liệu hướng dẫn phát triển của WordPress, cùng các công cụ quản trị máy chủ web trong môi trường mạng thực tế.