TỔNG QUAN HỌC THUẬT VÀ MÔ TẢ NỘI DUNG GIÁO TRÌNH THIẾT KẾ WEB (MÃ TÀI LIỆU: THUD - MH22)

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

Giáo trình môn học Thiết kế Web (Mã tài liệu: THUD - MH22) là tài liệu đào tạo chính quy được ban hành theo Quyết định số 498/QĐ-CĐGTVTTƯI-ĐT ngày 25/03/2019 của Hiệu trưởng Trường Cao đẳng Giao thông Vận tải Trung ương 1. Giáo trình do Nhóm biên soạn của nhà trường chịu trách nhiệm nội dung, được thiết kế phục vụ công tác giảng dạy và học tập cho giảng viên cùng học sinh - sinh viên ngành Tin học ứng dụng trình độ Cao đẳng.

Trong chương trình đào tạo chuyên ngành Tin học ứng dụng, môn học Thiết kế Web giữ vai trò là học phần cơ sở chuyên ngành bắt buộc, cung cấp các khối kiến thức và kỹ năng nền tảng đầu tiên về công nghệ web tĩnh trước khi người học tiếp cận các học phần nâng cao về lập trình web động và hệ thống cơ sở dữ liệu.

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 hệ thống tri thức hoàn chỉnh về cấu tạo, nguyên lý tổ chức và phương pháp xây dựng một trang web đơn lẻ cũng như một bộ website hoàn chỉnh. Bên cạnh kỹ thuật lập trình giao diện, giáo trình định hướng cho người học các nguyên tắc bố cục trực quan để tạo ra các trang web phù hợp mục đích sử dụng, đồng thời giới thiệu bối cảnh ứng dụng web trong lĩnh vực Thương mại điện tử – một phương thức kinh doanh trọng yếu đại diện cho nền kinh tế tri thức.

Cấu trúc giáo trình được tiếp cận theo phương pháp tịnh tiến từ bản chất mã nguồn cốt lõi (viết mã thủ công) đến tự động hóa quy trình thiết kế thông qua các phần mềm biên tập trực quan. Điểm đặc sắc của giáo trình nằm ở việc chuẩn hóa cú pháp các thẻ lệnh, kết hợp hệ thống bảng tra cứu tham số chi tiết kèm theo các đoạn mã nguồn mẫu và hình ảnh minh họa kết quả hiển thị thực tế trên trình duyệt.

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

+-----------------------------------------------------------------------+
|              CẤU TRÚC PHÁT TRIỂN NỘI DUNG GIÁO TRÌNH                   |
+-----------------------------------------------------------------------+
|  CHƯƠNG I: NGÔN NGỮ HTML THUẦN (Hand-coding & Document Structure)     |
|  - Cấu trúc tài liệu: <html>, <head>, <title>, <body>                 |
|  - Định dạng khối & ký tự: <p>, <h1>-<h6>, 
, <pre>, <font>        |
|  - Cấu trúc danh sách: <ol>, <ul>, <li>                               |
|  - Siêu liên kết (Hyperlinks): Liên kết trong, liên kết ngoài, mailto |
|  - Đa phương tiện & Bảng biểu: <img>, <bgsound>, <embed>, <table>     |
|  - Biểu mẫu tương tác: <form>, <input>, <textarea>, <select>          |
+-----------------------------------------------------------------------+
+-----------------------------------------------------------------------+
|  CHƯƠNG II: THIẾT KẾ BẰNG MICROSOFT FRONTPAGE (WYSIWYG Level 1)       |
|  - Quản trị bộ Web (Web package), thanh công cụ & chế độ xem          |
|  - Định dạng cấu trúc trang: Header, Footer, Themes có sẵn            |
|  - Xây dựng Form tương tác & Xuất bản bộ Web (Publishing)              |
|  - Kỹ thuật chia khung giao diện: Frame Pages & Frameset              |
+-----------------------------------------------------------------------+
+-----------------------------------------------------------------------+
|  CHƯƠNG III: THIẾT KẾ BẰNG DREAMWEAVER (WYSIWYG & Project Management) |
|  - Lập kế hoạch dự án thiết kế giao diện Web                          |
|  - Quản lý và xử lý Assets, Tables, Frames chuyên nghiệp              |
+-----------------------------------------------------------------------+

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

Giáo trình được bố cục thành 3 chương chuyên đề lớn với tiến trình sư phạm rõ ràng:

Chương I: Giới thiệu ngôn ngữ HTML

Chương này đi sâu vào ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language), định nghĩa HTML như một ứng dụng của SGML do tổ chức World Wide Web Consortium (W3C) duy trì, từ chuẩn HTML 4 đến định hướng mở rộng HTML5, Dynamic HTML (DHTML) và Ajax. Các nội dung trọng tâm bao gồm:

  • Cấu trúc tài liệu chuẩn: Cặp thẻ gốc <html>...</html>, phần đầu trang <head> chứa tiêu đề trang <title>, phần thân trang <body> với hệ thống thuộc tính kiểm soát màu sắc (bgcolor, text, link, alink, vlink), ảnh nền (background) và căn lề trang (topmargin, leftmargin, rightmargin).
  • Định dạng văn bản và khối: Sử dụng thẻ đoạn văn <p> (thuộc tính align nhận các giá trị left, right, center, justify), sáu cấp độ đề mục <h1> đến <h6>, thẻ ngắt dòng
    , khối văn bản giữ nguyên định dạng <pre>.
  • Định dạng danh sách: Danh sách có thứ tự <ol> và danh sách không có thứ tự <ul> kết hợp thẻ phần tử mục <li>. Đi kèm là các thuộc tính tùy biến kiểu đánh số (chữ hoa type="A", chữ thường type="a", số La Mã) và điểm bắt đầu (start=n), cùng các nguyên tắc nghiêm ngặt về việc lồng ghép thẻ (thẻ <li> không được chứa trực tiếp <html>, <body>, <title>, <style>, <script>).
  • Định dạng ký tự và mã màu: Các thẻ định kiểu hiển thị <b> (đậm), <i> (nghiêng), <u> (gạch chân), <strike> (gạch ngang), thẻ chọn phông chữ <font face="..." color="..." size="...">. Bảng mã ký tự đặc biệt (&nbsp;, &lt;, &gt;, &copy;, &reg;, &amp;, &quot;, &euro;, &sum;, &frac;). Hệ màu Hexadecimal #RRGGBB dựa trên 3 thành phần Đỏ (Red), Xanh lá (Green), Xanh biển (Blue).
  • Hệ thống siêu liên kết (Hyperlinks): Phân loại 3 hình thức liên kết: Liên kết trong (Internal link - dùng <a name="..."> đánh dấu đích và <a href="#..."> để gọi), Liên kết ngoài (External link - dùng <a href="URL" target="..."> với các giá trị _self, _parent hoặc tên khung), Liên kết thực thi (Executable link gọi chương trình/cơ sở dữ liệu). Quy tắc xử lý địa chỉ URL tương đối/tuyệt đối với ký tự ngăn cách /, . (thư mục hiện tại), .. (thư mục cha) và thẻ <base>. Cú pháp kết nối thư điện tử href="mailto:address@domain". Thẻ phân cách đường thẳng ngang <hr> (align, color, noshade, size, width).
  • Chèn đối tượng đa phương tiện và hình ảnh: Phân biệt âm thanh nền chạy ngầm <bgsound src="..." loop="..."> và trình phát nhạc hiển thị <embed src="..." autostart="..." loop="..." hidden="..." width="..." height="...">, thẻ nhúng nâng cao <object>. Thẻ chèn ảnh <img> với các tham số căn chỉnh văn bản xung quanh (align="absbottom|absmiddle|texttop"), kích thước (width, height), viền (border), chú thích khi rê chuột (title) và văn bản thay thế khi lỗi hiển thị (alt).
  • Định dạng bảng biểu (<table>): Cấu trúc dòng <tr>, ô dữ liệu <td>, ô tiêu đề <th> cùng các thuộc tính kiểm soát khoảng cách đệm cellpadding, khoảng cách ô cellspacing, viền border, màu nền/ảnh nền, canh lề dọc valign, hợp nhất cột colspan và hợp nhất dòng rowspan. Kỹ thuật lồng ghép nhiều bảng để phân chia bố cục giao diện trang web.
  • Biểu mẫu tương tác (<form>): Nguyên lý trao đổi dữ liệu máy khách - máy chủ (Client - Web Server), phân biệt mức độ bảo mật giữa phương thức truyền dữ liệu ngầm POST và phương thức hiển thị tham số trên thanh địa chỉ GET. Các phần tử điều khiển nhập liệu: <input> các kiểu text, password, radio (chọn 1 trong nhóm), checkbox (chọn nhiều), hidden (truyền tham số ẩn), file (tải tệp lên máy chủ với mã hóa enctype="multipart/form-data"), các nút điều khiển submit, reset, button (kết nối sự kiện JavaScript onClick, onChange). Thẻ nhập liệu nhiều dòng <textarea>, thẻ danh sách chọn <select> kết hợp <option> (tạo Combobox hoặc Listbox qua thuộc tính multiple), thẻ gom nhóm thành phần <fieldset> kèm tiêu đề nhóm <legend>.

Chương II: Thiết kế web bằng chương trình Microsoft FrontPage

Chương 2 chuyển đổi phương thức từ viết mã tay sang môi trường soạn thảo trực quan WYSIWYG:

  • Giới thiệu giao diện, hệ thống thanh công cụ và các chế độ xem trang (Page Views).
  • Quy trình khởi tạo bộ web đơn giản (Web Package), tạo trang mới, thiết lập liên kết nội bộ và quy trình xuất bản bộ web (Publish Web).
  • Các thao tác quản trị trên bộ web: Định dạng phần đầu (Header), phần chân trang (Footer), kiểm tra hiển thị qua trình duyệt và đồng bộ hóa tệp tin.
  • Ứng dụng mẫu thiết kế có sẵn (Themes/Templates) để xây dựng nhanh trang web cá nhân.
  • Tạo biểu mẫu nhập liệu và tổ chức giao diện nhiều phân vùng bằng kỹ thuật chia khung (Frameset / Frame Pages).

Chương III: Thiết kế web bằng Dreamweaver

Chương 3 giới thiệu phần mềm biên tập web nâng cao:

  • Quy trình lập kế hoạch và thiết kế tổng thể website.
  • Kỹ thuật nhập văn bản, định dạng nội dung và xử lý đồ họa trên giao diện trực quan.
  • Xây dựng bố cục trang bằng bảng (Table) và phân chia khung nhìn bằng Frames.
  • Quản trị và tái sử dụng tài nguyên dự án thông qua bảng điều khiển Assets.

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

Giáo trình củng cố các nền tảng lý thuyết và nguyên tắc kỹ thuật chuẩn hóa:

  • Nguyên lý cấu trúc siêu văn bản: Bản chất của HTML là ngôn ngữ trình bày phi lập trình, tổ chức theo cặp thẻ đóng/mở chuẩn tắc.
  • Mô hình định vị và liên kết: Nguyên tắc phân giải đường dẫn tài nguyên (tuyệt đối so với tương đối), cấu trúc URL cơ sở, cơ chế truyền tham số HTTP giữa máy trạm và máy chủ web.
  • Hệ thống hiển thị trực quan: Lý thuyết phối màu theo mô hình quang phổ RGB hệ cơ số 16 (Hexadecimal), nguyên lý bố cục khung nhìn dựa trên cấu trúc lưới của bảng (<table>) và khung hiển thị độc lập (<frameset>).

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã nguồn HTML tĩnh đúng chuẩn cú pháp W3C; lồng ghép cấu trúc thẻ chính xác; tích hợp thành thạo các tệp tin đa phương tiện (.gif, .jpg, .mp3) và xử lý lỗi hiển thị hình ảnh thông qua thuộc tính thay thế alt.
  • Kỹ năng phân tích (Analytical skills): Khả năng phân tích một bản phác thảo giao diện để bóc tách thành cấu trúc cây thư mục, hệ thống bảng lồng nhau hoặc cấu trúc khung; phân tích sự tương thích của các thẻ định dạng trên các trình duyệt khác nhau (như Internet Explorer và Mozilla Firefox).
  • Năng lực thực hành nghề nghiệp (Practical competencies): Vận hành thành thạo các phần mềm biên tập trực quan Microsoft FrontPage và Dreamweaver để tạo lập, quản lý tài nguyên (Assets), cấu hình biểu mẫu thu thập dữ liệu và xuất bản website hoàn chỉnh.

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

+-------------------------------------------------------------------------+
|                  MÔ HÌNH TIẾP CẬN SƯ PHẠM 3 BƯỚC                        |
+-------------------------------------------------------------------------+
| [Bước 1: Lý thuyết & Cú pháp]  -->  Giải thích cơ chế thẻ, bảng thuộc   |
|                                     tính, tham số, giá trị mặc định.    |
| [Bước 2: Đoạn mã minh họa]     -->  Cung cấp Code Snippet cụ thể với dữ |
|                                     liệu giả lập sát thực tế.           |
| [Bước 3: Mô phỏng trình duyệt] -->  Hiển thị trực quan giao diện đầu ra |
|                                     (Browser Output) để đối chiếu.      |
+-------------------------------------------------------------------------+

Phương pháp sư phạm của giáo trình được xây dựng theo mô hình tam giác thực nghiệm: Lý thuyết cú pháp -> Mã nguồn mẫu (Code snippet) -> Kết quả hiển thị trên trình duyệt (Browser output). Với mỗi phần tử HTML, tài liệu không chỉ liệt kê ý nghĩa mà còn cung cấp bảng thông số kỹ thuật chi tiết cùng các trường hợp xử lý ngoại lệ.

Bài tập và ví dụ thực hành điển hình trong giáo trình

Giáo trình tích hợp các ví dụ mẫu cụ thể gắn liền với ngữ cảnh thực hành:

  • Ví dụ tạo danh sách thực đơn: Sử dụng dữ liệu thực đơn ẩm thực ("1. Cá lóc kho tiêu, 2. Cá rô kho tộ, 3. Cá thu chiên xoài bằm, 4. Cá điêu hồng nấu ngót") để minh họa danh sách có thứ tự <ol>, và danh sách các mục điều hướng ("Trang chủ, Giới thiệu, Sản phẩm, Dịch vụ, Liên hệ") để minh họa danh sách không thứ tự <ul>.
  • Ví dụ định dạng căn lề và thơ ca: Sử dụng đoạn thơ trong bài "Mong ước kỷ niệm xưa" đặt trong thẻ <center> kết hợp thẻ ngắt dòng
    và đề mục <H2> để hướng dẫn thao tác trình bày văn bản nghệ thuật.
  • Ví dụ tài liệu lịch sử công nghệ: Đoạn văn "Java và World Wide Web" được sử dụng để minh họa việc thiết lập hình nền background="bground1.gif", điều chỉnh khoảng cách lề LEFTMARGIN=50, RIGHTMARGIN=50 và phân cấp kích thước phông chữ <font face="Times New Roman" size="6">.
  • Ví dụ xây dựng form tương tác và layout: Hướng dẫn tạo lập form phản hồi ý kiến, form đăng nhập bảo mật với trường Password, chọn danh sách món ăn/địa danh qua Combobox/Listbox, và thiết lập bảng lồng nhau để phân chia cột nội dung trang web.

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

  • Phương pháp đánh giá: Đánh giá định kỳ dựa trên độ chuẩn xác của cú pháp mã nguồn HTML; khả năng hiển thị đồng nhất của giao diện trên các trình duyệt; kỹ năng cấu hình các thành phần form; kỹ năng đóng gói và quản lý dự án trên Microsoft FrontPage và Dreamweaver.
  • Hướng dẫn tự học: Người học được khuyến nghị thực hành viết mã nguồn từ các trình soạn thảo thô (Text Editor) đơn giản trước khi chuyển sang công cụ WYSIWYG; chủ động kiểm tra các thuộc tính biên lề, màu sắc hexa, kiểm tra tính toàn vẹn của đường dẫn tương đối khi liên kết giữa các trang web.

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

  • Ghi nhận tiến trình chuyển dịch chuẩn công nghệ: Giáo trình hệ thống hóa các quy chuẩn từ HTML 4 chính thức, đồng thời cập nhật bối cảnh phát triển của chuẩn HTML5, công nghệ Dynamic HTML và Ajax trong việc tối ưu hóa giao diện web.
  • Phân tích chi tiết độ tương thích trình duyệt: Tài liệu chỉ rõ sự khác biệt trong việc hỗ trợ các thẻ đa phương tiện giữa các nền tảng duyệt web phổ biến thời điểm biên soạn, cụ thể: thẻ âm thanh nền <bgsound> được hỗ trợ trên Internet Explorer nhưng không được hỗ trợ bởi Mozilla Firefox (Firefox chỉ hỗ trợ thẻ <embed>).
  • Gắn kết với bức tranh Thương mại điện tử: Đặt kỹ năng thiết kế web trong bối cảnh phát triển của nền kinh tế tri thức, làm rõ vai trò của giao diện web như một cổng thông tin quảng bá, giao dịch và tương tác trực tiếp với người dùng.
  • Tập trung vào tính toàn vẹn dữ liệu và bảo mật biểu mẫu: Giáo trình phân tích tường tận sự khác biệt giữa phương thức GET và POST, nhấn mạnh yêu cầu bảo mật thông tin cá nhân (mật khẩu, mã PIN) thông qua phương thức POST và cơ chế đóng gói dữ liệu tải tệp qua thuộc tính enctype="multipart/form-data".

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

+-------------------------------------------------------------------------+
|                  ĐỐI TƯỢNG SỬ DỤNG VÀ YÊU CẦU TIÊN QUYẾT                |
+-------------------------------------------------------------------------+
|  1. HỌC SINH - SINH VIÊN:                                               |
|     - Ngành: Tin học ứng dụng (Trình độ Cao đẳng).                      |
|     - Học phần: Thiết kế Web (Mã MH22).                                 |
|                                                                         |
|  2. GIẢNG VIÊN CHUYÊN NGÀNH:                                            |
|     - Sử dụng làm giáo trình giảng dạy chính khóa.                      |
|     - Căn cứ xây dựng đề cương bài giảng và bài tập thực hành phòng máy.|
|                                                                         |
|  3. NGƯỜI TỰ HỌC & NGHIÊN CỨU:                                          |
|     - Người mới tiếp cận công nghệ web tĩnh.                            |
|     - Yêu cầu kiến thức tiên quyết: Tin học văn phòng cơ bản, kỹ năng   |
|       quản lý hệ thống tệp tin/thư mục và thao tác trình duyệt web.     |
+-------------------------------------------------------------------------+
  • Sinh viên chính quy: Học sinh, sinh viên ngành Tin học ứng dụng trình độ Cao đẳng tại Trường Cao đẳng Giao thông Vận tải Trung ương 1 và các cơ sở giáo dục nghề nghiệp có chương trình tương đương.
  • Yêu cầu tiên quyết (Prerequisites): Người học cần có kỹ năng tin học đại cương cơ bản, thành thạo thao tác quản lý tệp tin và thư mục (tạo, đổi tên, đường dẫn thư mục cha/con), hiểu biết căn bản về duyệt web và soạn thảo văn bản.
  • Giảng viên chuyên ngành: Sử dụng làm tài liệu giảng dạy chuẩn hóa theo khung chương trình đào tạo của nhà trường; làm căn cứ xây dựng giáo án lý thuyết, bài tập thực hành tại phòng máy tính và ngân hàng đề thi đánh giá năng lực.
  • Độc giả tự học và tham khảo: Phù hợp cho kỹ thuật viên, người học bắt đầu từ số không muốn nắm vững nguyên lý cấu tạo trang web tĩnh thông qua các bảng tổng hợp mã lệnh có cấu trúc rõ ràng.

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

1. Giáo trình này được thiết kế dành riêng cho đối tượng nào?

Giáo trình được biên soạn phục vụ chính thức cho học sinh - sinh viên và giảng viên ngành Tin học ứng dụng trình độ Cao đẳng theo chương trình đào tạo của Trường Cao đẳng GTVT Trung ương 1, đồng thời có thể sử dụng làm tài liệu tham khảo cho người mới học thiết kế web tĩnh.

2. Người học cần chuẩn bị kiến thức nền tảng nào trước khi tiếp cận giáo trình?

Người học chỉ cần nắm vững kiến thức tin học cơ bản, kỹ năng quản lý tệp tin/thư mục trên hệ điều hành và thao tác sử dụng trình duyệt web. Không bắt buộc phải có kiến thức về ngôn ngữ lập trình nâng cao trước khi học.

3. Phương pháp tiếp cận của giáo trình có điểm gì đặc thù so với các tài liệu khác?

Giáo trình kết hợp chặt chẽ giữa việc hiểu sâu bản chất mã nguồn thông qua viết mã tay HTML ở Chương I với việc nâng cao năng suất thiết kế thông qua các phần mềm biên tập trực quan Microsoft FrontPage (Chương II) và Dreamweaver (Chương III). Mọi thẻ lệnh đều đi kèm bảng thuộc tính và ví dụ hiển thị đối chiếu.

4. Làm thế nào để tự học giáo trình này đạt hiệu quả cao nhất?

Người học nên tuân thủ lộ trình tuần tự: Tự tay nhập các đoạn mã HTML mẫu trên chương trình soạn thảo văn bản đơn giản, mở tệp bằng trình duyệt để quan sát kết quả; sau khi nắm vững ý nghĩa các thẻ mới chuyển sang thao tác kéo thả và quản lý giao diện trên FrontPage và Dreamweaver.

5. Tài liệu bổ trợ và công cụ thực hành kèm theo gồm những gì?

Người học cần trang bị môi trường phần mềm gồm: Trình soạn thảo văn bản đơn giản (Notepad/Text Editor), trình duyệt web (Internet Explorer, Mozilla Firefox), bộ công cụ Microsoft FrontPage, Macromedia/Adobe Dreamweaver và các tệp tài nguyên thực hành (hình ảnh .gif/.jpg, âm thanh .mp3) như mô tả trong bài học.

Kết luận

Giáo trình môn học Thiết kế Web (Mã tài liệu: THUD - MH22) cung cấp một hệ thống tri thức chuẩn mực, toàn diện và có cấu trúc chặt chẽ về xây dựng giao diện web tĩnh ở trình độ cao đẳng nghề. Giá trị cốt lõi của tài liệu thể hiện ở việc trang bị cho người học tư duy phân tích cấu trúc siêu văn bản W3C kết hợp kỹ năng vận hành các công cụ thiết kế chuyên dụng.

Lộ trình học tập đề xuất là hoàn thành tuần tự từ nền tảng mã nguồn HTML cơ bản, kỹ thuật xây dựng bảng biểu/biểu mẫu, đến quản trị bộ website trực quan trên FrontPage và Dreamweaver. Để mở rộng kiến thức, người học có thể tham khảo thêm các tài liệu đặc tả chuẩn HTML5 từ W3C, kỹ thuật lập trình kịch bản JavaScript tương tác và các công nghệ web động hiện đại.