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

Giáo trình Thiết kế Web cơ bản (Mã môn học: MH 22) là tài liệu học tập thuộc khối kiến thức cơ sở ngành và bổ sung chuyên ngành trong chương trình đào tạo trình độ Trung cấp ngành Công nghệ Thông tin (Ứng dụng phần mềm). Tài liệu được biên soạn bởi Bộ môn Tin cơ sở thuộc Trường Cao đẳng Xây dựng số 1 (Bộ Xây dựng), do ThS. Đỗ Thị Xuân Thắm làm chủ biên, và được ban hành chính thức theo Quyết định số 368ĐT/QĐ-CĐXD1 ngày 10 tháng 08 năm 2021 của Hiệu trưởng nhà trường. Về mặt vị trí trong chương trình đào tạo, môn học được bố trí giảng dạy sau khi người học đã hoàn thành học phần Lập trình căn bản, đóng vai trò làm cầu nối chuyển tiếp từ tư duy lập trình thuần túy sang kỹ năng xây dựng giao diện ứng dụng web.

Về thời lượng đào tạo, học phần có tổng quỹ thời gian là 30 giờ, trong đó bao gồm 28 giờ lý thuyết và 2 giờ kiểm tra đánh giá. Mục tiêu học tập (learning outcomes) của giáo trình hướng tới việc trang bị cho người học ba nhóm năng lực chính:

  • Về kiến thức: Nắm bắt kiến trúc và dịch vụ trên Internet; hiểu rõ công dụng và cú pháp của các thẻ HTML; nắm vững quy trình các bước xây dựng website và phương thức phân phối website lên môi trường mạng thông qua đăng ký tên miền (domain) và máy chủ lưu trữ (web hosting).
  • Về kỹ năng: Có khả năng tổ chức xây dựng một ứng dụng web; sử dụng thành thạo ngôn ngữ HTML để thiết kế các trang web tĩnh; có năng lực phân tích, đánh giá để lựa chọn nhà cung cấp tên miền và hosting phù hợp.
  • Về năng lực tự chủ và trách nhiệm: Hình thành tư duy phân tích hệ thống và tác phong làm việc khoa học trong quy trình triển khai phần mềm.

Cấu trúc giáo trình gồm 3 chương logic: Chương 1 cung cấp các khái niệm cơ bản về Internet, chiến lược thiết kế giao diện và kiến trúc thông tin; Chương 2 tập trung vào cú pháp và việc ứng dụng ngôn ngữ HTML; Chương 3 khái quát quy trình xây dựng và vận hành website. Điểm đặc thù của giáo trình là sự kết hợp giữa lý thuyết tâm lý học nhận thức trong phân cấp dữ liệu với các hướng dẫn kỹ thuật viết mã cụ thể trên môi trường phần mềm soạn thảo hiện đại.

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

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

Nội dung học thuật của giáo trình được triển khai tuần tự qua 3 chương chuyên đề:

  1. Chương 1: Những khái niệm cơ bản
    Chương này cung cấp hệ thống lý thuyết về mạng Internet, World Wide Web (WWW) và các nguyên tắc thiết lập một website. Nội dung chia nhỏ thành các bước xác định mục tiêu và phân loại đối tượng truy cập (nhóm duyệt ngẫu nhiên - browsing, nhóm đào tạo/giáo dục - education/training, nhóm tra cứu/tham khảo - reference). Giáo trình trình bày các nguyên tắc thiết kế giao diện đồ họa người dùng (GUI), bao gồm thanh điều hướng (navigation bar), tính truy cập trực tiếp, tốc độ tải trang và tính nhất quán của biểu tượng. Tiếp đó, chương này phân tích 5 mô hình cấu trúc hệ thống website: cấu trúc nối tiếp (sequential), cấu trúc ô lưới (grid), cấu trúc phân cấp (hierarchical), cấu trúc mạng nhện (web-like) và cấu trúc kết hợp. Cuối chương là tiêu chí phân biệt giữa website tĩnh (nội dung cố định, chi phí thấp) và website động (xử lý phản hồi dữ liệu người dùng qua máy chủ).

  2. Chương 2: Ngôn ngữ HTML
    Đây là chương trọng tâm về kỹ thuật, định nghĩa HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng các thẻ (tags) để cấu trúc nội dung cho trình duyệt biên dịch. Giáo trình hướng dẫn môi trường làm việc trên Visual Studio Code (bên cạnh Notepad++ và Sublime Text). Cấu trúc một tài liệu HTML chuẩn được phân tách thành 3 phần: thẻ bao ngoài <html>, phần tiêu đề <head> (chứa <title>, liên kết CSS, thẻ <meta>) và phần thân <body> (chứa nội dung hiển thị, script). Cấu trúc giao diện trang chuẩn gồm: Header, Global navigation, Page body (chia thành Content và Sidebar), và Footer. Chương này phân loại chi tiết 3 nhóm thẻ: thẻ khối (Block), thẻ nội dòng (Inline) và thẻ không hiển thị (None). Hệ thống thẻ định dạng văn bản được giới thiệu đầy đủ (<h1>-<h6>, <p>,
    , <pre>, <strong>, <b>, <i>, <u>, <del>, <font>, <sup>, <sub>), cùng thẻ liên kết <a> (với các thuộc tính href, title, target="_blank"), thẻ hình ảnh <img> (thuộc tính src, alt, width, height), danh sách có thứ tự <ol> và không thứ tự <ul>, bảng <table> (các thẻ <tr>, <td>, <th>, thuộc tính border, cellpadding, cellspacing, colspan, rowspan), và biểu mẫu <form> (phương thức GET/POST, các loại <input>, <label>, <select>, <textarea>). Cuối chương là bảng tổng hợp các thẻ ngữ nghĩa trong HTML5 như <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <audio>, <canvas>, <figure>.

  3. Chương 3: Quy trình xây dựng website
    Chương 3 chuẩn hóa quy trình triển khai một dự án web thực tế qua 5 giai đoạn: (1) Tiếp nhận yêu cầu thiết kế; (2) Xác định phong cách giao diện, màu sắc chủ đạo và chức năng; (3) Lựa chọn và đăng ký tên miền, dịch vụ hosting; (4) Tiến hành thiết kế và lập trình (ước lượng chu kỳ từ 20 đến 25 ngày làm việc); (5) Chạy thử trên máy chủ (server), sửa lỗi (fix bug), nghiệm thu và lập kế hoạch quản trị, vận hành dài hạn.

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

  • Lý thuyết tâm lý học nhận thức trong kiến trúc thông tin: Giáo trình dựa trên cơ sở giới hạn lưu trữ của trí nhớ ngắn hạn ở con người (từ 4 đến 7 mẩu thông tin rời rạc) để thiết lập nguyên lý chia nhỏ khối dữ liệu (chunking), tổ chức menu không quá sâu và xây dựng hệ thống phân cấp logic.
  • Mô hình phân tầng tài liệu web: Xác lập cấu trúc phân tách rõ ràng giữa phần đầu trang (Header), thanh điều hướng toàn cục (Global navigation), thân trang (Page body với Content và Sidebar) và chân trang (Footer).
  • Nguyên lý giao tiếp Client - Server qua biểu mẫu: Giải thích cơ chế thu thập dữ liệu người dùng qua thẻ <form>, đóng gói dữ liệu và truyền tải tới ứng dụng xử lý phía máy chủ (Back-end như CGI, ASP/PHP script) thông qua hai phương thức truyền tải tiêu chuẩn GET và POST.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Cài đặt và cấu hình phần mềm Visual Studio Code; soạn thảo mã nguồn HTML đúng cú pháp chuẩn; quản lý cấu trúc cây thư mục file; nhúng các thành phần đa phương tiện và siêu liên kết tương đối/tuyệt đối.
  • Kỹ năng phân tích (Analytical skills): Phân tích nhóm người dùng mục tiêu để lựa chọn mô hình sơ đồ trang phù hợp (nối tiếp, phân cấp, ô lưới, mạng nhện); đánh giá sự cân bằng giữa dung lượng đồ họa và tốc độ tải trang.
  • Năng lực thực hành chuyên môn (Practical competencies): Xây dựng các biểu mẫu thu thập thông tin người dùng (đăng nhập, góp ý, khảo sát); tích hợp bảng biểu <table> để dàn trang dữ liệu; thiết lập cấu trúc mã nguồn tối ưu cho công cụ tìm kiếm (SEO) bằng cách khai báo thẻ meta, cấu trúc thẻ tiêu đề chuẩn và thuộc tính mô tả ảnh alt.

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

Giáo trình Thiết kế Web cơ bản áp dụng phương pháp sư phạm kết hợp giữa diễn giải lý thuyết cấu trúc và hướng dẫn thực hành viết mã nguồn trực tiếp (hands-on coding). Tiến trình tiếp cận kiến thức đi từ nguyên lý tổng quan về mạng Internet, chuyển sang quy tắc cú pháp của từng nhóm thẻ đánh dấu, và kết thúc bằng việc giải quyết các bài toán thiết kế giao diện thực tế.

Hệ thống bài tập trong giáo trình được phân cấp rõ ràng kèm mã nguồn mẫu và hướng dẫn từng bước:

  • Nhóm bài tập định dạng văn bản cơ bản (Bài tập 01 - 05): Thực hành tạo trang chào mừng (Welcome.html), sử dụng các thẻ định dạng khối và nội dòng để trình bày các văn bản thơ (Cohaimo.html, bài thơ Chúc Xuân, Bài thơ số 5), ứng dụng thẻ <pre> giữ nguyên định dạng gõ thô, thiết lập chỉ số trên/dưới (<sup>, <sub>) trong file ChisoTrenduoi.htm, và xây dựng danh sách các khóa học bằng thẻ <ul>, <ol>.
  • Nhóm bài tập biểu mẫu và bảng (Bài tập Form 1 - 9): Thực hành tạo các phần tử nhập liệu từ cơ bản đến nâng cao; xây dựng danh sách chọn tỉnh thành (<select>), hộp kiểm sở thích (checkbox), nút chọn giới tính (radio button); kết hợp cấu trúc <table> nhiều dòng/cột để xây dựng Form đăng nhập hoàn chỉnh (Dangnhap.html), Form đóng góp ý kiến đa dòng (gopy.html), và Phiếu thăm dò ý kiến trực tuyến (Thamdoykien.html).

Phương pháp đánh giá học phần được thiết kế tương ứng với thời lượng 2 giờ kiểm tra trên tổng số 30 giờ đào tạo. Hình thức đánh giá tập trung vào khả năng viết mã trực tiếp, kiểm tra độ chính xác của cú pháp thẻ và mức độ đáp ứng các yêu cầu hiển thị giao diện trên trình duyệt.

Về phương pháp tự học, tài liệu cung cấp chỉ dẫn cụ thể cho sinh viên:

  • Thiết lập môi trường soạn thảo trên Visual Studio Code (chỉnh cỡ chữ 16, đổi giao diện màu nền Light theme).
  • Sử dụng các phím tắt soạn thảo nhanh (như tổ hợp Shift + 1 tạo khung mẫu HTML, Ctrl + / để tạo ghi chú mã nguồn).
  • Kiểm tra mã nguồn trực tiếp trên trình duyệt thông qua tổ hợp phím Ctrl + U hoặc tính năng kiểm tra nguồn trang (View Source) để tự rà soát và khắc phục lỗi hiển thị.

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

So với các tài liệu giảng dạy truyền thống về web tĩnh, giáo trình có một số nội dung cập nhật và liên kết thực tiễn:

  • Tích hợp tiêu chuẩn HTML5: Giáo trình dành riêng mục 2.8 để giới thiệu các thẻ ngữ nghĩa hiện đại thuộc chuẩn HTML5 bao gồm <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, cùng các thẻ nhúng đa phương tiện và đồ họa như <audio>, <canvas>, <figure>. Việc này giúp người học tiếp cận cách phân chia vùng tài liệu theo đúng tiêu chuẩn web đương đại thay vì chỉ sử dụng các thẻ khối không ngữ nghĩa.
  • Tích hợp các nguyên tắc tối ưu hóa công cụ tìm kiếm (SEO On-page): Tài liệu lồng ghép các chỉ dẫn kỹ thuật phục vụ SEO trực tiếp trong nội dung giảng dạy các thẻ HTML:
    • Khai báo thẻ <meta name="keyword"> và thiết lập bộ mã ký tự tiếng Việt <meta charset="utf-8">.
    • Quy tắc phân cấp thẻ tiêu đề: Mỗi trang chỉ nên có duy nhất một thẻ <h1> chứa từ khóa trọng tâm, các tiêu đề phụ sử dụng tuần tự từ <h2> đến <h6>.
    • Ưu tiên sử dụng thẻ <strong> thay vì thẻ <b> để gia tăng mức độ nhận diện từ khóa của bot tìm kiếm.
    • Bắt buộc khai báo thuộc tính alt trong thẻ <img> nhằm mô tả nội dung hình ảnh khi đường dẫn bị lỗi và hỗ trợ lập chỉ mục tìm kiếm.
  • Gắn kết quy trình sản xuất công nghiệp: Thay vì chỉ dừng lại ở phạm vi viết mã cục bộ trên máy tính cá nhân, Chương 3 mở rộng sang quy trình làm việc thực tế của các doanh nghiệp thiết kế web chuyên nghiệp, cung cấp kiến thức về thời gian dự án (20-25 ngày), cách chọn và đăng ký tên miền, thuê máy chủ hosting, cùng các bước kiểm thử và nghiệm thu sản phẩm.

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

Giáo trình được biên soạn phục vụ các nhóm đối tượng và mục đích cụ thể:

  • Sinh viên chuyên ngành: Tài liệu học tập chính thức cho sinh viên trình độ Trung cấp thuộc ngành Công nghệ Thông tin (Ứng dụng phần mềm) tại Trường Cao đẳng Xây dựng số 1 và các cơ sở giáo dục nghề nghiệp có chương trình đào tạo tương đương.
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành môn học Lập trình căn bản, có kỹ năng thao tác cơ bản với hệ điều hành máy tính, quản lý tệp tin và thư mục, cũng như hiểu biết nền tảng về nguyên lý hoạt động của các phần mềm ứng dụng.
  • Giảng viên chuyên nghiệp: Sử dụng làm căn cứ học thuật để thiết lập đề cương chi tiết, bài giảng lý thuyết 28 giờ, ngân hàng bài tập thực hành trên lớp và xây dựng đề kiểm tra kết thúc học phần cho môn học MH 22.
  • Người tự học và kỹ thuật viên: Dành cho những người mới bắt đầu tiếp cận lĩnh vực thiết kế website, lập trình viên chuyển ngành hoặc kỹ thuật viên tin học cần một tài liệu tra cứu ngắn gọn, hệ thống hóa về các thẻ HTML cơ bản và các mẫu thiết kế biểu mẫu chuẩn.

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

1. Giáo trình này được biên soạn cho cấp độ đào tạo nào?
Giáo trình được thiết kế chuyên biệt cho trình độ Trung cấp ngành Công nghệ Thông tin (Ứng dụng phần mềm), phù hợp cho học phần nền tảng đầu tiên về giao diện web.

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ôn học?
Sinh viên cần hoàn thành học phần Lập trình căn bản và có kỹ năng sử dụng máy tính cơ bản để cài đặt, vận hành các công cụ soạn thảo mã nguồn như Visual Studio Code.

3. Điểm khác biệt giữa giáo trình này với các tài liệu HTML thông thường là gì?
Giáo trình không chỉ liệt kê cú pháp thẻ mà còn xây dựng cơ sở lý thuyết tổ chức thông tin dựa trên tâm lý học nhận thức, phân tích các mô hình cấu trúc trang (ô lưới, phân cấp, mạng nhện), đồng thời hướng dẫn tích hợp các quy tắc chuẩn SEO On-page và quy trình xuất bản website lên hosting thực tế.

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 nên cài đặt Visual Studio Code, thực hiện tuần tự 5 bài tập định dạng văn bản và 9 bài tập xây dựng Form mẫu trong giáo trình, sau đó sử dụng trình duyệt web kết hợp tính năng View Source (Ctrl + U) để kiểm tra, đối chiếu kết quả hiển thị.

5. Giáo trình có đề cập đến phần mở rộng nào ngoài ngôn ngữ HTML cơ bản không?
Giáo trình có mở rộng giới thiệu hệ thống các thẻ ngữ nghĩa của chuẩn HTML5, định hướng liên kết mã nguồn HTML với các tệp định kiểu CSS và tệp kịch bản JavaScript thông qua các thẻ liên kết chuyên dụng trong phần <head> và <body>.

Kết luận

Giáo trình Thiết kế Web cơ bản của Bộ môn Tin cơ sở - Trường Cao đẳng Xây dựng số 1 là tài liệu học thuật hoàn chỉnh về mặt cấu trúc, đáp ứng đúng khung chương trình đào tạo 30 giờ của môn học MH 22. Giá trị cốt lõi của tài liệu nằm ở tính hệ thống hóa: từ các khái niệm kiến trúc mạng Internet, nguyên lý tâm lý học trong tổ chức thông tin, đến hệ thống cú pháp thẻ HTML và quy trình triển khai website thực tế.

Lộ trình học tập được định hình khoa học: tiếp cận tư duy giao diện ở Chương 1, thực hành viết mã và tạo biểu mẫu ở Chương 2, và hoàn thiện kỹ năng xuất bản trang web ở Chương 3. Đây là nền tảng kỹ thuật phục vụ trực tiếp cho các học phần lập trình web chuyên sâu tiếp theo trong chương trình đào tạo Công nghệ Thông tin.