TÀI LIỆU MÔ TẢ HỌC THUẬT: GIÁO TRÌNH THIẾT KẾ WEB

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

  • Tên tài liệu: Giáo trình Thiết kế Web (Lưu hành nội bộ)
  • Chủ biên: Lê Hữu Toản
  • Cơ quan ban hành: Bộ Công Thương – Trường Cao đẳng Công nghiệp Nam Định
  • Đối tượng đào tạo: Hệ Trung cấp / Cao đẳng, Ngành/Chuyên ngành Tin học Văn phòng và Công nghệ thông tin

Giáo trình Thiết kế Web là học liệu cơ sở chuyên ngành trong chương trình đào tạo Tin học Văn phòng và Công nghệ thông tin tại Trường Cao đẳng Công nghiệp Nam Định. Môn học giữ vai trò trang bị khối kiến thức nền tảng về hạ tầng World Wide Web và kỹ năng xây dựng giao diện ứng dụng web tĩnh thông qua các công nghệ đánh dấu siêu văn bản.

Mục tiêu học tập (learning outcomes) của giáo trình xác định người học sau khi hoàn thành chương trình có khả năng:

  • Trình bày hệ thống các khái niệm cơ bản về môi trường mạng và web: World Wide Web (WWW), giao thức truyền tải siêu văn bản HTTP, cấu trúc địa chỉ định vị tài nguyên URL, địa chỉ IP (IPv4), hệ thống tên miền (DNS).
  • Phân tích và so sánh các đặc tính kỹ thuật, ưu điểm, nhược điểm giữa phương pháp phát triển web tĩnh và web động.
  • Nắm vững khái niệm, nguyên lý hoạt động của ngôn ngữ kịch bản (Scripting language) trên trình duyệt.
  • Sử dụng thành thạo ngôn ngữ HTML và các thuộc tính liên quan để định dạng văn bản, xử lý đa phương tiện, tạo bảng dữ liệu (<table>), phân chia khung (<frameset>, <iframe>), thiết kế biểu mẫu tương tác (<form>).
  • Ứng dụng phần mềm Microsoft FrontPage để hỗ trợ thiết kế trang web và viết các đoạn mã kịch bản cơ bản bằng JavaScript, VBScript nhằm xử lý sự kiện tương tác người dùng.

Cấu trúc giáo trình gồm 4 chương/bài học chính, được xây dựng theo mô hình kết hợp lý thuyết - câu hỏi ôn tập - bài thực hành cụ thể - hướng dẫn tự học và nội dung thảo luận chuyên đề. Điểm đặc thù của giáo trình là việc lượng hóa chi tiết các thông số kỹ thuật (mã màu Hexadecimal, kích thước pixel, thuộc tính thẻ) và cung cấp tài liệu hướng dẫn giải từng bước cho từng bài thực hành.

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

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

Nội dung giáo trình được phân bổ qua 4 bài học chính với tiến trình phát triển từ lý thuyết mạng đến kỹ thuật lập trình mã nguồn và sử dụng công cụ thiết kế:

  • Bài 1: Tổng quan về WWW và ngôn ngữ HTML
    • Hạ tầng mạng và giao thức: Lịch sử mạng từ ARPANET (1969) đến WWW (Tim Berners-Lee, 1992); mô hình bộ giao thức TCP/IP; cơ chế phân chia địa chỉ IP 32-bit (vùng network và host qua subnet mask do ICANN quản lý); hệ thống phân giải tên miền (DNS Server, tên miền cấp 1, 2, 3); các phiên bản giao thức HTTP (HTTP 0.9, HTTP 1.0, HTTP 1.1, chuẩn bảo mật HTTPS).
    • Phân loại kiến trúc web: Phân định bản chất giữa Web tĩnh (tệp tin HTML/DHTML lưu trữ trực tiếp, không có cơ sở dữ liệu) và Web động (hệ thống client-server truy vấn cơ sở dữ liệu MySQL, MS SQL, Oracle, DB2 qua các ngôn ngữ xử lý phía máy chủ như PHP, ASP, ASP.NET, Java, CGI, Perl).
    • Cú pháp ngôn ngữ HTML: Cấu trúc tài liệu (<html>, <head>, <title>, <body>); các thẻ định dạng ký tự (<basefont>, <font>, <b>, <i>, <u>, <s>, <strong>, <em>, <strike>, <sub>, <sup>, <small>, <big>); mã ký tự đặc biệt (&lt;, &gt;, &amp;, &quot;, &nbsp;); thẻ định dạng đoạn (<p>, <div>, <blockquote>), danh sách (<ol>, <ul>), đường kẻ ngang (<hr>), chèn ảnh (<img>), siêu liên kết (<a> gồm liên kết tài liệu, liên kết web, liên kết mailto:), bảng biểu (<table>, <tr>, <td>, <th>, <caption>), khung hiển thị (<frameset>, <frame>, <iframe>) và biểu mẫu tương tác (<form>, <input>, <select>, <option>, <textarea>).
  • Bài 2: Thiết kế trang Web
    • Cấu trúc các trang chức năng chuẩn: Trang chủ, Trang liên hệ, Trang giới thiệu doanh nghiệp, Trang giới thiệu sản phẩm/dịch vụ, Trang hướng dẫn/chính sách.
    • Kỹ thuật tổ chức nội dung và thẻ chức năng: Hệ thống tiêu đề 6 cấp (<h1> đến <h6>); thẻ <meta> (khai báo bảng mã ký tự Unicode UTF-8, cấu hình tự động làm tươi trang refresh, khai báo từ khóa SEO keywords); thẻ căn giữa <center>.
    • Kỹ thuật bố cục trang: Sử dụng bảng (<table>) lồng nhau hoặc khối phân chia (<div>) kết hợp thuộc tính style để định hình bố cục đa cột (tiêu đề, menu trái, nội dung giữa, cột phải, chân trang).
    • Đa phương tiện (Multimedia): Định dạng âm thanh, video, chuẩn nén MP4 và khả năng tích hợp trên nền tảng web.
    • Các phần tử động (Web Component): Dòng chữ chạy (Marquee), nút hiệu ứng đưa chuột (Hover Button), băng tiêu đề quảng cáo (Banner Ad Manager), thanh liên kết (Link Bars) và biên dùng chung (Shared Border).
  • Bài 3: Microsoft FrontPage
    • Giới thiệu môi trường trực quan hỗ trợ thiết kế giao diện, quản trị liên kết và phát triển các thành phần web tĩnh.
  • Bài 4: Scripts trong trang web
    • Khái niệm ngôn ngữ kịch bản client-side; Cơ bản về JavaScript (đối tượng có sẵn, hàm xử lý sự kiện, thuộc tính innerText, sự kiện onClick); Cơ bản về VBScript (hàm, thủ tục, đối tượng xử lý).

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

  • Hạ tầng truyền thông mạng: Mô hình truyền thông Client - Server; quy trình đóng gói dữ liệu và định tuyến qua giao thức TCP/IP; cơ chế định danh thiết bị bằng địa chỉ IP 32-bit (chia 4 octet) và cơ chế tách vùng mạng/máy thông qua Subnet Mask; quy tắc phân cấp tên miền quốc tế và tên miền quốc gia Việt Nam (.vn).
  • Nguyên lý giao thức HTTP: Cơ chế hoạt động của mô hình yêu cầu/đáp ứng (Request/Response) tầng ứng dụng; cấu trúc thông điệp bao gồm phương thức truyền (GET, POST, HEAD), định dạng mở rộng đa phương tiện MIME, mã trạng thái phản hồi; các nguy cơ an ninh thông tin trên môi trường web (giả mạo DNS, tấn công tiêu đề, tấn công từ chối dịch vụ proxy) và giải pháp truyền thông mã hóa an toàn qua cổng bảo mật HTTPS.
  • Ngữ pháp tài liệu siêu văn bản: Cấu trúc phân cấp hình cây của tài liệu HTML; nguyên tắc lồng ghép các thẻ (Tag); hệ thống tham số thuộc tính (Attributes); quy tắc hiển thị của trình duyệt đối với các phần tử khối (Block-level) và phần tử nội dòng (Inline-level).

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết và biên dịch mã nguồn HTML chuẩn bằng các công cụ soạn thảo văn bản thuần (Notepad, Notepad++) hoặc phần mềm chuyên dụng (Microsoft FrontPage); sử dụng hệ màu Hexadecimal (ví dụ: #FF0000, #0000CC, #CCCCCC, #006600, #FF3399, #FECFFD, #FFFFCC, #FFA500, #FFD700); xử lý định dạng bảng nâng cao với các thuộc tính trộn ô colspan, rowspan, khoảng cách viền cellspacing, đệm ô cellpadding.
  • Kỹ năng phân tích (Analytical skills): Phân tích giao diện mẫu (Mockup/Wireframe) để bóc tách thành sơ đồ cấu trúc HTML; so sánh hiệu năng và mục đích sử dụng giữa phương pháp định dạng bố cục bằng bảng (<table>) và phương pháp phân khối hiện đại bằng thẻ định đoạn (<div>).
  • Kỹ năng thực hành chuyên môn (Practical competencies): Xây dựng hoàn chỉnh biểu mẫu tiếp nhận thông tin người dùng với đầy đủ các thành phần điều khiển (<input type="text">, password, radio, checkbox, file, button, submit, reset, hộp thả <select>, hộp văn bản lớn <textarea>); liên kết các trang tài liệu nội bộ và liên kết ngoại vi qua siêu liên kết Hyperlink.

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

Giáo trình áp dụng phương pháp tiếp cận sư phạm định hướng thực hành (Practice-oriented pedagogy). Mỗi bài học được cấu trúc tuần tự từ khái niệm lý thuyết cốt lõi, minh họa mã nguồn cụ thể, đến tóm tắt ghi nhớ và hệ thống bài tập ứng dụng.

Hệ thống bài tập và thực hành trong giáo trình gồm 10 bài tập chuẩn hóa, yêu cầu người học cài đặt chính xác các thông số giao diện:

  • Bài thực hành số 1: Thiết lập các thẻ cơ bản (<h1>, <h2>, <p>, <div>,
    ), sử dụng thuộc tính align và CSS nội dòng style="text-decoration: underline; font-weight: bold" để trình bày văn bản căn giữa, gạch chân.
  • Bài thực hành số 2: Thiết kế tài liệu chứa công thức hóa học ($H_2SO_4$) và phương trình bậc hai ($x^y$) bằng thẻ chỉ số <sub>, số mũ <sup>; trình bày khối mã nguồn vòng lặp for với thẻ tiền định dạng <pre>, phối hợp mã màu chữ và nền (#FF0000, #0000CC, #CCCCCC).
  • Bài thực hành số 3: Trình bày trang văn bản thơ "Mẹ!" với nền toàn trang #FFFFCC, tiêu đề in đậm nền #FECFFD chữ #FF3399, ba đoạn thơ in nghiêng phân tách bằng thẻ đường kẻ ngang <hr width="...">.
  • Bài thực hành số 4: Tích hợp ảnh minh họa (<img>), danh sách có thứ tự (<ol>), danh sách không thứ tự (<ul>), biểu tượng bản quyền &copy; và thiết lập liên kết ngoại vi tới website thương mại qua thẻ <a>.
  • Bài thực hành số 5: Xây dựng bảng biểu phức tạp 4 dòng 4 cột, áp dụng các thuộc tính trộn dòng rowspan, trộn cột colspan, căn lề valign, phối hợp dải màu nền đỏ đậm #FF0000, đỏ nhạt #FFBBBB và chữ trắng #FFFFFF.
  • Bài thực hành số 6: Thiết kế Form đăng ký thông tin tích hợp bảng căn chỉnh 9 dòng 2 cột, chứa đầy đủ các đối tượng text, radio, select/option (cho phép chọn nhiều mục multiple), nút lệnh button gắn sự kiện JavaScript onClick để xuất thông báo qua thuộc tính innerText của thẻ <div>.
  • Bài thực hành số 7 đến 10: Thiết kế liên kết nội bộ trong cùng trang (liên kết học phần I, II, III), tạo biểu mẫu thăm dò ý kiến và hoàn thiện giao diện trang chủ website.

Phương pháp đánh giá kết quả học tập được thực hiện thông qua:

  1. Đánh giá mức độ ghi nhớ lý thuyết qua hệ thống câu hỏi kiểm tra cuối bài (ví dụ: so sánh web tĩnh và web động, cơ chế phân giải DNS, danh mục các thẻ bảng và biểu mẫu).
  2. Đánh giá kỹ năng thực hành thông qua độ chính xác của giao diện kết quả hiển thị trên trình duyệt web (Google Chrome, Mozilla Firefox, Internet Explorer).
  3. Đánh giá năng lực tư duy qua các chủ đề thảo luận chuyên sâu (như phân tích hạn chế của việc lạm dụng thẻ <table> để dàn trang so với việc sử dụng thẻ <div>).

Hướng dẫn tự học định hướng sinh viên sử dụng tính năng View page source trên trình duyệt để kiểm tra cấu trúc mã nguồn thực tế của các website đang hoạt động (ví dụ: cổng thông tin cnd.edu.vn), từ đó liên hệ giữa lý thuyết trong giáo trình và thực tế triển khai.

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

  • Tính hệ thống về lịch sử và chuẩn hóa kỹ thuật: Giáo trình cung cấp tiến trình lịch sử phát triển của hạ tầng Internet từ mạng ARPANET năm 1969 đến sự ra đời của World Wide Web năm 1992 dưới sự phát triển của Tim Berners-Lee tại CERN. Tài liệu tổng hợp các mốc công bố chuẩn giao thức HTTP của tổ chức W3C và IETF (phiên bản 0.9 năm 1991, phiên bản 1.0 năm 1996 theo RFC, phiên bản 1.1 năm 1997/1999).
  • Phân loại thuộc tính và thông số trực quan: Mọi phần tử HTML đều được đính kèm bảng tra cứu thuộc tính rõ ràng. Ví dụ bảng thuộc tính thẻ <body> (gồm BACKGROUND, BGCOLOR, BGPROPERTIES=FIXED, LEFTMARGIN, TOPMARGIN, LINK, VLINK, TEXT), bảng ký tự đặc biệt, bảng kích thước phông chữ từ 1 đến 7 của <FONT SIZE=n>.
  • Chi tiết hóa yêu cầu mã màu và bố cục: Các bài tập thực hành không dừng lại ở mức mô tả chung mà đưa ra các hằng số màu sắc hệ Hex cụ thể và quy định rõ cách thức lồng ghép các thẻ (ví dụ hướng dẫn dùng thẻ <pre> kết hợp thuộc tính style để trình bày đoạn mã).
  • Tích hợp các thành phần ứng dụng của Microsoft FrontPage: Giới thiệu phương thức cấu hình các thành phần mở rộng như Marquee (với các thuộc tính direction, speed, behavior kiểu scroll/slide/alternate), Hover Button, Banner Ad Manager, cấu hình Shared Border cho toàn bộ website hoặc trang hiện hành.
  • Tiếp cận lập trình kịch bản xử lý tương tác: Mở rộng từ trang web tĩnh thuần túy sang việc nhúng mã kịch bản phía máy khách (Client-side script), giới thiệu cú pháp cơ bản của JavaScript và VBScript để tương tác với các đối tượng DOM và xử lý sự kiện người dùng trực tiếp trên trình duyệt.

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

  • Sinh viên chuyên ngành: Giáo trình được biên soạn chuyên biệt cho học sinh, sinh viên hệ đào tạo Trung cấp và Cao đẳng thuộc chuyên ngành Tin học Văn phòng và Công nghệ thông tin tại Trường Cao đẳng Công nghiệp Nam Định.
  • Yêu cầu kiến thức tiên quyết (Prerequisites):
    • Đã hoàn thành học phần Tin học đại cương / Tin học cơ sở.
    • Nắm vững các kỹ năng cơ bản về quản lý tệp tin và thư mục trên hệ điều hành Windows.
    • Sử dụng thành thạo các công cụ soạn thảo văn bản thô (Notepad, Notepad++).
    • Không đòi hỏi kiến thức chuyên sâu trước đó về cơ sở dữ liệu hay lập trình hướng đối tượng.
  • Giảng viên giảng dạy: Tài liệu cung cấp khung phân phối chương trình gồm 4 bài học, hệ thống câu hỏi lý thuyết, ngân hàng đề bài thực hành có sẵn đáp án/hướng dẫn cài đặt, làm căn cứ xây dựng giáo án lý thuyết và bài tập thực hành tại phòng máy.
  • Người học tự nghiên cứu: Giáo trình là tài liệu tham khảo cho các cá nhân mới tiếp cận lĩnh vực thiết kế web, cần một tài liệu tra cứu có hệ thống về các thẻ HTML cơ bản, cách tổ chức liên kết, xử lý bảng biểu và thiết kế biểu mẫu thu thập thông tin người dùng.

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 thiết kế cho học sinh, sinh viên hệ trung cấp và cao đẳng ngành Tin học Văn phòng, Công nghệ thông tin của Trường Cao đẳng Công nghiệp Nam Định, cũng như những người bắt đầu học kỹ thuật xây dựng giao diện web tĩnh.

2. Cần kiến thức nền nào để 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 tệp tin trên hệ điều hành và biết cách sử dụng các trình duyệt web. Không bắt buộc phải có kiến thức nền tảng về cơ sở dữ liệu hay lập trình bậc cao.

3. Điểm khác biệt của giáo trình này so với các tài liệu khác?

Giáo trình tập trung giải quyết trọn vẹn kỹ thuật xây dựng web tĩnh qua ngôn ngữ HTML và công cụ Microsoft FrontPage. Mỗi bài tập thực hành đều đi kèm bảng yêu cầu kỹ thuật chi tiết (thông số mã màu, kích thước pixel) và phần hướng dẫn cài đặt từng bước cụ thể.

4. Làm sao để tự học hiệu quả với tài liệu này?

Người học cần đọc kỹ phần lý thuyết về thẻ và thuộc tính, tự tay gõ mã nguồn (không sao chép) vào các trình soạn thảo văn bản thuần (Notepad, Notepad++), lưu tệp dưới định dạng .htm hoặc .html, kiểm tra hiển thị trên trình duyệt và thực hiện tuần tự 10 bài thực hành trong sách. Ngoài ra, cần kết hợp sử dụng chức năng View page source trên các trang web thực tế để khảo sát mã nguồn.

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

Giáo trình tích hợp sẵn danh mục bảng tra cứu thuộc tính thẻ, danh mục hình vẽ/bảng biểu minh họa, hệ thống 10 bài thực hành chuẩn hóa, các chủ đề định hướng thảo luận chuyên đề và danh mục tài liệu tham khảo chuyên ngành.

Kết luận

Giáo trình Thiết kế Web của Trường Cao đẳng Công nghiệp Nam Định cung cấp hệ thống kiến thức nền tảng, logic và tường minh về công nghệ web tĩnh. Nội dung tài liệu phản ánh đầy đủ cấu trúc hạ tầng mạng, giao thức truyền tải, chuẩn đánh dấu siêu văn bản HTML và các kỹ thuật định dạng giao diện cơ bản.

Lộ trình học tập đề xuất:

  1. Giai đoạn 1 (Bài 1): Nắm vững hạ tầng mạng, giao thức HTTP/TCP-IP và toàn bộ hệ thống thẻ định dạng ký tự, danh sách, liên kết, bảng biểu, biểu mẫu của HTML.
  2. Giai đoạn 2 (Bài 2 & Bài 3): Ứng dụng thẻ <div>, <table>, <meta> và công cụ Microsoft FrontPage để dàn trang, tích hợp đa phương tiện và các thành phần web động cơ bản.
  3. Giai đoạn 3 (Bài 4): Nhúng mã kịch bản JavaScript/VBScript để xử lý tương tác sự kiện trên biểu mẫu.

Các công cụ và môi trường học tập bổ trợ bao gồm: trình soạn thảo mã nguồn (Notepad, Notepad++), phần mềm Microsoft FrontPage, các trình duyệt web tiêu chuẩn (Google Chrome, Mozilla Firefox, Internet Explorer) và các cổng thông tin trực tuyến phục vụ phân tích mã nguồn thực tế.