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

Giáo trình Thiết kế Web (còn được định danh trong phần mở đầu là giáo trình Thiết kế và quản trị Website) là tài liệu học tập được biên soạn bởi nhóm tác giả: Trần Văn Tuấn (Chủ biên), Đào Ngọc Hải và Võ Thị Thu Trang, hoàn thành tại Trà Vinh vào năm 2019. Trong khung chương trình đào tạo chuyên ngành Công nghệ thông tin (CNTT), tài liệu giữ vai trò môn học cơ sở ngành và chuyên ngành ứng dụng, trực tiếp phục vụ cho việc nghiên cứu và học tập của sinh viên bậc cao đẳng CNTT.

Mục tiêu học tập của giáo trình được xác định cụ thể thông qua việc trang bị cho người học hệ thống kiến thức từ cơ bản đến nâng cao về công nghệ web. Sau khi hoàn thành chương trình học, người học có khả năng giải thích môi trường hoạt động, kiến trúc client – server và các nguyên lý của website; mô tả các mô hình dịch vụ mạng cơ bản (WWW, FTP, Email); nắm vững cú pháp và cấu trúc của ngôn ngữ đánh dấu siêu văn bản (HTML); vận hành thành thạo phần mềm thiết kế trực quan Macromedia Dreamweaver; cài đặt được môi trường máy chủ web cục bộ và lập trình được các ứng dụng web động xử lý dữ liệu với PHP và hệ quản trị cơ sở dữ liệu SQL.

Về cấu trúc, tài liệu được tổ chức thành 5 bài học logic: Bài 1 nghiên cứu tổng quan về dịch vụ mạng và World Wide Web; Bài 2 hướng dẫn tạo trang web bằng HTML; Bài 3 khai thác công cụ thiết kế Dreamweaver; Bài 4 giảng dạy lập trình web với ngôn ngữ PHP; Bài 5 trình bày quy trình xuất bản và quản trị website. Điểm đặc sắc của giáo trình thể hiện ở phương pháp tiếp cận thực hành kỹ thuật có hệ thống: mỗi chương đều kết hợp song song giữa lý thuyết nền tảng về giao thức, mã nguồn với các thao tác cài đặt, thiết lập thông số phần mềm chi tiết, đồng thời kết thúc bằng hệ thống mục tiêu chuẩn đầu ra và câu hỏi nghiên cứu cụ thể.


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

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

Cấu trúc nội dung giáo trình được triển khai tuần tự qua 5 bài học chính:

  • Bài 1: Tổng quan về dịch vụ World Wide Web (WWW): Trình bày lịch sử hình thành mạng máy tính từ mạng thử nghiệm ARPAnet của Bộ Quốc phòng Mỹ đến mạng Internet toàn cầu; khảo sát bộ giao thức TCP/IP; phân tích chi tiết hai giao thức tầng giao vận là TCP (hướng kết nối, bảo đảm tính toàn vẹn) và UDP (phi kết nối, tốc độ cao); mô tả tầng mạng với giao thức IP (định tuyến, kiểm tra checksum tiêu đề); các giao thức hỗ trợ gồm ARP, DNS, SMTP/POP3, FTP và HTTP. Bài học phân loại địa chỉ IPv4 (32 bit, 4 octet) thành 5 lớp địa chỉ A, B, C, D, E dựa trên cấu trúc Class bit, Net ID và Host ID; chuẩn hóa cấu trúc địa chỉ URL và liên kết Hyperlink; đồng thời phân loại hệ thống Web Server thành 4 nhóm (truyền thông thông thường, thương mại, nhóm làm việc, mục đích đặc biệt) gắn với các tiêu chuẩn đánh giá về hiệu năng, bảo mật, tích hợp cơ sở dữ liệu và năng lực quản trị.
  • Bài 2: Tạo các trang HTML: Hướng dẫn khởi tạo và thực thi văn bản HTML thông qua các trình soạn thảo cơ bản như Microsoft Notepad, MS-DOS, SimpleText. Giới thiệu các cặp thẻ cốt lõi gồm <html>, <head>, <title>, <body>. Phân tích quy tắc phân định giữa đường dẫn URL tuyệt đối và URL tương đối (sử dụng dấu /, :, # và thẻ <base>). Cung cấp cú pháp tạo siêu liên kết với thẻ <a> cùng các thuộc tính HREF, NAME, TABINDEX, TITLE, TARGET (_blank, _self). Hướng dẫn định dạng văn bản; kỹ thuật nhúng âm thanh nền bằng thẻ <bgsound> (thuộc tính SRC, LOOP) và nhúng hình ảnh/video bằng thẻ <img> (thuộc tính ALIGN, ALT, BORDER, SRC, WIDTH, HEIGHT, HSPACE, VSPACE, TITLE, DYNSRC, START, LOOP). Cung cấp chi tiết cú pháp tạo bảng biểu qua các thẻ <table>, <tr>, <td>, <th>, <caption> đi kèm các tham số canh lề, viền, màu nền, khoảng cách ô (cellspacing, cellpadding), gộp ô (colspan, rowspan); và xây dựng biểu mẫu thu thập dữ liệu với thẻ <form> (thuộc tính ACTION, METHOD) kết hợp các phần tử điều khiển <input> (thuộc tính type mang giá trị text, password, checkbox, radio, button, submit, reset, file, image).
  • Bài 3: Thiết kế website với Dreamweaver: Giới thiệu phần mềm Macromedia Dreamweaver MX và phiên bản Dreamweaver 8 (có đối chiếu phiên bản CS3); phân tích công nghệ Roundtrip HTML cho phép nhập mã HTML viết tay mà không làm thay đổi định dạng gốc; hướng dẫn các bước cài đặt phần mềm chi tiết. Giới thiệu bảng điều khiển khởi động, thao tác quản lý site, tạo văn bản mới hoặc từ mẫu (samples). Khảo sát cấu trúc thanh INSERT gồm các ngăn nhóm: Common, Layout, Form, Text, HTML, Application, Flash Elements, Favorites; cùng thanh giám sát thuộc tính Property Inspector. Cung cấp quy trình định dạng bảng trong chế độ Layout view, thay đổi màu sắc bảng (mã màu Hexadecimal như #CC9933 hoặc tên màu chuẩn như goldenrod), sử dụng 3 chế độ làm việc (Code, Design, Split theo cơ chế WYSIWYG), và kỹ thuật tạo bảng co giãn linh hoạt bằng thuộc tính Autostretch kết hợp tệp ảnh đệm spacer.gif.
  • Bài 4: Lập trình web với ngôn ngữ PHP: Trình bày kiến trúc hệ thống website dựa trên mô hình mạng client – server; phân tích cơ chế xử lý khác biệt giữa trang web tĩnh (static web page) và trang web động (dynamic web page). Cung cấp giải pháp thiết lập môi trường phát triển cục bộ qua bộ phần mềm đóng gói XAMPP (bao gồm máy chủ Apache, hệ quản trị cơ sở dữ liệu MySQL và trình biên dịch PHP). Giới thiệu việc sử dụng môi trường phát triển tích hợp (IDE) NetBeans trong việc quản lý dự án (project), biên soạn mã và kiểm thử/dò lỗi (debug). Giới thiệu nền tảng cú pháp PHP, cách xử lý biến Form, làm việc với biến chuỗi, mảng và kết nối, truy vấn dữ liệu SQL.
  • Bài 5: Xuất bản và quản trị website: Khái quát quy trình đóng gói, xuất bản trang web lên môi trường máy chủ mạng và các nguyên tắc quản trị, bảo trì website.

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

Giáo trình xây dựng hệ thống kiến thức nền tảng chặt chẽ qua hai khối lý thuyết:

  • Lý thuyết mạng và giao thức truyền thông: Cung cấp bản chất của đường truyền vật lý (hữu tuyến gồm cáp đồng trục, cáp xoắn đôi, cáp quang; vô tuyến gồm vi ba, hồng ngoại); nguyên lý hoạt động của kiến trúc mạng TCP/IP; cơ chế định danh mạng qua cấu trúc phân lớp địa chỉ IPv4; nguyên lý phân giải địa chỉ vật lý ARP và phân giải tên miền DNS; cùng các giao thức lớp ứng dụng truyền tải tệp tin và dữ liệu (FTP, HTTP, SMTP/POP3).
  • Nguyên lý kiến trúc ứng dụng web: Làm rõ nguyên tắc phân tầng giữa giao diện người dùng phía máy khách (Client side) được hiển thị bởi trình duyệt qua mã HTML, và cơ chế xử lý logic phía máy chủ (Server side) thông qua kịch bản máy chủ PHP tiếp nhận yêu cầu, xử lý thuật toán, tương tác với cơ sở dữ liệu SQL và trả về kết quả định dạng văn bản cho máy khách.

Kỹ năng phát triển

Học phần rèn luyện cho người học ba nhóm kỹ năng cơ bản:

  • Kỹ năng kỹ thuật (Technical skills): Viết đúng cú pháp các thẻ HTML chuẩn; viết mã tạo biểu mẫu thu thập dữ liệu và bảng hiển thị thông tin phức tạp; cài đặt và cấu hình thành công các phần mềm chuyên ngành gồm Macromedia Dreamweaver, bộ công cụ XAMPP (Apache, MySQL) và phần mềm NetBeans IDE; viết mã kịch bản PHP để tiếp nhận biến từ form và thực thi các thao tác cơ sở dữ liệu SQL.
  • Kỹ năng phân tích (Analytical skills): Phân tích cấu trúc phân đoạn của luồng dữ liệu mạng; phân biệt sự khác nhau giữa truyền tải hướng kết nối (TCP) và phi kết nối (UDP); phân tích ưu và nhược điểm của việc định địa chỉ URL tương đối so với URL tuyệt đối; đánh giá các tiêu chuẩn phần cứng và phần mềm của một Web Server phục vụ vận hành thực tế.
  • Kỹ năng thực hành nghề nghiệp (Practical competencies): Quản lý cấu trúc thư mục của một dự án web (site root); dàn trang giao diện trang web bằng công cụ trực quan kết hợp mã nguồn; thao tác kiểm thử tính tương thích của trang web trên các trình duyệt khác nhau; quy trình cấu hình và quản trị một ứng dụng web hoàn chỉnh.

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 đi từ nguyên lý lý thuyết cơ bản đến hướng dẫn thực hành ứng dụng cụ thể. Nội dung từng bài học được bố cục nhất quán: đặt ra mục tiêu nhận thức và kỹ năng cần đạt ở phần đầu, tiếp nối bằng hệ thống lý thuyết giải thích chi tiết các thuật ngữ, cơ chế hoạt động, tiếp đến là các ví dụ minh họa trực quan và kết thúc bằng các yêu cầu thực hành.

Về hệ thống bài tập và nghiên cứu tình huống, tài liệu tích hợp trực tiếp các ví dụ mã lệnh cụ thể gắn với các ngữ cảnh ứng dụng thực tế. Người học được tiếp cận các đoạn mã nguồn mẫu từ mức đơn giản (viết tệp HTML đầu tiên trên Notepad với các khối head, title, body) đến các khối mã phức tạp hơn như tạo bảng dữ liệu có định dạng màu sắc (bgcolor), khoảng cách ô (cellspacing), và tạo biểu mẫu với đầy đủ các thành phần điều khiển nhập liệu (text, radio, checkbox, submit).

Các bài thực hành kỹ thuật trong giáo trình yêu cầu người học thao tác trực tiếp trên máy tính theo các bước chi tiết:

  • Quy trình cài đặt phần mềm Macromedia Dreamweaver 8 (từ chạy tệp Setup, chấp thuận điều khoản I Accept, tạo lối tắt màn hình Desktop, lựa chọn Select All đến khi hoàn tất Install).
  • Thao tác quản lý cấu trúc site, chuyển đổi qua lại giữa các chế độ xem Code, Design và Split.
  • Thiết lập bảng bố cục linh hoạt sử dụng tính năng Autostretch đi kèm thao tác lưu ảnh đệm spacer.gif vào thư mục gốc của site.
  • Cài đặt và vận hành bảng điều khiển của gói phần mềm XAMPP, khởi động dịch vụ máy chủ Apache và MySQL.
  • Khởi tạo dự án mới (New Project) trên môi trường NetBeans để tổ chức mã nguồn ứng dụng web PHP.

Về phương pháp đánh giá, giáo trình đưa ra các tiêu chí đánh giá năng lực dựa trên khả năng giải thích lý thuyết (mô hình mạng, giao thức, cấu trúc thẻ), khả năng viết mã nguồn chính xác theo chuẩn cú pháp, và mức độ hoàn thiện của sản phẩm thực hành (giao diện trang web hiển thị đúng định dạng trên trình duyệt, biểu mẫu gửi nhận được dữ liệu, dự án PHP kết nối thành công với cơ sở dữ liệu).

Đối với việc tự học, tác giả định hướng rõ ràng: người học cần bắt đầu bằng việc tự gõ từng dòng mã HTML trên các trình soạn thảo cơ bản (như Notepad) để hiểu sâu cơ chế của các cặp thẻ đóng/mở trước khi sử dụng các công cụ thiết kế trực quan; chủ động tự kiểm tra mã nguồn bằng cách chạy thử tệp trên trình duyệt web và giải quyết đầy đủ hệ thống câu hỏi nghiên cứu được bố trí ở từng bài học.


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

Giáo trình Thiết kế Web phản ánh quá trình tổng hợp và chuẩn hóa nội dung đào tạo thực hành cho hệ cao đẳng CNTT tại thời điểm năm 2019, kế thừa hệ thống lý thuyết chuẩn mực của công nghệ web:

  • Hệ thống hóa kiến thức công nghệ: Nội dung giáo trình bao quát quá trình phát triển của công nghệ web từ giai đoạn chuẩn HTML 3.2, chuẩn hóa cú pháp bảng biểu, biểu mẫu, siêu liên kết đến việc tích hợp các định dạng đa phương tiện (âm thanh nền qua thẻ <bgsound>, video nhúng qua các thuộc tính của thẻ <img>).
  • Tích hợp các công cụ chuyên dụng trong thiết kế trực quan: Giáo trình cập nhật và hướng dẫn chi tiết việc ứng dụng phần mềm Macromedia Dreamweaver MX và Dreamweaver 8, có đối chiếu với phiên bản Dreamweaver CS3. Tài liệu phân tích công nghệ Roundtrip HTML – cơ chế bảo toàn mã nguồn viết tay mà không tự ý định dạng lại mã của người lập trình, đồng thời giới thiệu khả năng tích hợp linh hoạt với các phần mềm đồ họa như Macromedia Fireworks và các thành phần Flash.
  • Tiếp cận mô hình phát triển web động: Tài liệu cập nhật mô hình phát triển web hiện đại thông qua việc chuyển dịch từ trang web tĩnh sang trang web động xử lý bằng ngôn ngữ kịch bản máy chủ PHP. Thay vì phải cài đặt riêng rẽ từng thành phần máy chủ, giáo trình hướng dẫn người học sử dụng gói tích hợp XAMPP (Apache, MySQL, PHP) và công cụ IDE NetBeans, phản ánh sát với quy trình triển khai dự án phần mềm trong thực tế.
  • Gắn kết giữa hạ tầng mạng và ứng dụng: Không chỉ dừng lại ở kỹ thuật hiển thị giao diện, tài liệu liên kết trực tiếp cấu trúc của một website với các yếu tố kỹ thuật hạ tầng như địa chỉ IPv4, cấu hình cổng dịch vụ (như cổng mặc định 8080 cho HTTP), định dạng URL chuẩn và các tiêu chuẩn bảo mật, hiệu năng quản trị máy chủ web từ xa.

Đố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 cụ thể:

  • Sinh viên chuyên ngành: Đối tượng chính của giáo trình là sinh viên đang theo học bậc cao đẳng ngành Công nghệ thông tin theo đúng công bố tại Lời nói đầu của tài liệu. Ngoài ra, giáo trình còn phù hợp cho sinh viên các khối ngành kỹ thuật phần mềm, hệ thống thông tin, tin học ứng dụng ở các bậc đào tạo cao đẳng và đại học cần học phần nhập môn thiết kế và phát triển ứng dụng web.
  • Yêu cầu kiến thức tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về tin học đại cương, khả năng thao tác với máy tính cá nhân (PC), kỹ năng làm việc với hệ điều hành (Windows, MS-DOS, UNIX), hiểu biết cơ bản về Internet và kỹ năng quản lý tệp tin, thư mục.
  • Giảng viên và cán bộ giảng dạy: Tài liệu là khung đề cương chi tiết phục vụ giảng viên xây dựng kế hoạch bài giảng lý thuyết và giáo án thực hành cho môn học Thiết kế Web hoặc Lập trình Web căn bản. Giảng viên có thể sử dụng trực tiếp các đề mục kỹ thuật và hệ thống câu hỏi nghiên cứu của 5 bài học để xây dựng ngân hàng đề thi và tiêu chí đánh giá kết quả thực hành của người học.
  • Người tự học và nghiên cứu kỹ thuật: Tài liệu đóng vai trò là tài liệu tham khảo kỹ thuật cho những cá nhân bắt đầu tìm hiểu quy trình xây dựng website từ đầu: từ việc hiểu rõ bản chất giao thức mạng, viết mã HTML thủ công, sử dụng công cụ thiết kế trực quan Dreamweaver đến việc làm quen với lập trình web động PHP và tương tác cơ sở dữ liệu trên máy chủ cục bộ.

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 nhóm tác giả biên soạn phục vụ trực tiếp cho sinh viên cao đẳng ngành Công nghệ thông tin theo học môn Thiết kế Web, đồng thời là tài liệu tham khảo cho người học muốn nắm bắt toàn diện kỹ thuật xây dựng ứng dụng web từ nền tảng giao thức mạng đến lập trình máy chủ.

2. Cần kiến thức nền nào để học giáo trình này?

Người học chỉ cần nắm vững kỹ năng sử dụng máy tính cá nhân cơ bản và thao tác quản lý tệp tin, thư mục trên hệ điều hành. Toàn bộ các kiến thức về kiến trúc mạng Internet, bộ giao thức TCP/IP, cú pháp mã nguồn HTML và ngôn ngữ PHP đều được trình bày tuần tự từ đầu trong nội dung các bài học.

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 là gì?

Tài liệu liên kết chặt chẽ giữa kiến thức hạ tầng mạng máy tính (giao thức TCP/IP, phân lớp địa chỉ IP, mô hình máy chủ - máy khách) với kỹ năng viết mã HTML thuần túy, kỹ năng sử dụng phần mềm đồ họa thiết kế trực quan (Dreamweaver) và lập trình kịch bản máy chủ PHP thông qua bộ công cụ tích hợp XAMPP và IDE NetBeans, tạo nên quy trình phát triển website khép kín.

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

Theo hướng dẫn của tài liệu, người học nên bắt đầu bằng việc tự gõ mã HTML trên các trình soạn thảo thô sơ như Microsoft Notepad để ghi nhớ các thẻ cấu trúc và quy tắc phân cấp trước khi sử dụng Dreamweaver. Đồng thời, cần cài đặt song song phần mềm XAMPP và NetBeans để thực hành chạy thử các tệp mã nguồn mẫu và hoàn thành các bài tập nghiên cứu ở cuối mỗi bài.

5. Có tài liệu và công cụ bổ trợ nào đi kèm giáo trình?

Giáo trình cung cấp hệ thống mã nguồn mẫu minh họa trực tiếp trong văn bản (ví dụ tạo bảng, form, thẻ liên kết), hướng dẫn các bước cài đặt từ đĩa chương trình Macromedia Dreamweaver 8, cùng các bảng tổng hợp tra cứu thuộc tính của thẻ HTML, các nhóm công cụ trên thanh Insert của Dreamweaver và giao diện điều khiển của môi trường XAMPP, NetBeans.


Kết luận

Giáo trình Thiết kế Web của nhóm tác giả Trần Văn Tuấn, Đào Ngọc Hải và Võ Thị Thu Trang là tài liệu học thuật có cấu trúc logic, phản ánh hệ thống kiến thức nền tảng trong lĩnh vực thiết kế và phát triển website. Giá trị cốt lõi của tài liệu nằm ở sự kết hợp cân bằng giữa lý thuyết mạng máy tính chuẩn xác và quy trình thực hành kỹ thuật rõ ràng, chi tiết.

Lộ trình học tập đề xuất từ giáo trình bao gồm 5 giai đoạn liên tục:

  1. Tiếp thu kiến thức hạ tầng mạng, các dịch vụ Internet và nguyên lý hoạt động của dịch vụ WWW (Bài 1).
  2. Xây dựng nền tảng viết mã trang web tĩnh chuẩn mực thông qua ngôn ngữ HTML (Bài 2).
  3. Tối ưu hóa kỹ năng dàn trang và thiết kế giao diện trực quan bằng phần mềm Dreamweaver (Bài 3).
  4. Mở rộng năng lực lập trình với ngôn ngữ máy chủ PHP, cấu hình môi trường phát triển XAMPP, NetBeans và tương tác cơ sở dữ liệu SQL (Bài 4).
  5. Hoàn thiện năng lực xuất bản và duy trì hoạt động của hệ thống website (Bài 5).

Để mở rộng kiến thức sau khi hoàn thành tài liệu, người học được khuyến nghị tiếp tục nghiên cứu các tài liệu chuyên sâu về chuẩn định kiểu Cascading Style Sheets (CSS), ngôn ngữ kịch bản phía máy khách JavaScript, các công nghệ máy chủ nâng cao (như ASP.NET, JSP) và kỹ thuật quản trị hệ quản trị cơ sở dữ liệu quan hệ.