Hướng Dẫn Thiết Kế Website Đơn Giản và Hiệu Quả

Thiết kế web là nền tảng cốt lõi trong kỷ nguyên số hóa hiện đại. 132 trang · Trường Đại Học Công Nghệ Thông Tin · 2025.

• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Thiết Kế Website
• Đề tài: Hướng Dẫn Thiết Kế Website Đơn Giản và Hiệu Quả
• Loại tài liệu: Hướng Dẫn
• Năm xuất bản: 2025
• Địa điểm: Thành Phố Hồ Chí Minh

Mục lục chi tiết

• HƯỚNG DẪN MÔ TẢ MÔN HỌC
• 1. BÀI 1: CÁC KHÁI NIỆM CƠ BẢN
• 1.1. MỘT SỐ KHÁI NIỆM
• 1.2. PHÂN LOẠI TRANG WEB
• 1.3. MỘT SỐ BƯỚC CHÍNH TRONG PHÁT TRIỂN WEBSITE
• 1.4. CÔNG BỐ WEBSITE TRÊN INTERNET
• 1.5. TÓM TẮT
• 1.6. CÂU HỎI ÔN TẬP
• 2. BÀI 2: NGÔN NGỮ HTML
• 2.1. GIỚI THIỆU
• 2.2. CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU
• 2.3. CÁC THẺ ĐỊNH DẠNG KHỐI
• 2.4. CÁC THẺ ĐỊNH DẠNG DANH SÁCH
• 2.5. CÁC THẺ ĐỊNH DẠNG KÝ TỰ
• 2.6. CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH
• 2.7. CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU
• 2.8. TÓM TẮT
• 2.9. CÂU HỎI ÔN TẬP
• 3. BÀI 3: FORM TRÊN TRANG WEB
• 3.1. CÁC ĐỐI TƯỢNG NHẬP DỮ LIỆU
• 4. BÀI 4: ĐỊNH DẠNG BẰNG CSS
• 4.1. KHÁI NIỆM CSS - CÁC LOẠI KIỂU
• 4.2. CÁCH CHÈN CSS
• 4.3. KHAI BÁO VÀ SỬ DỤNG STYLE
• 4.4. TẠO LỚP VÀ SỬ DỤNG LỚP
• 4.5. TẠO ĐỊNH DANH VÀ SỬ DỤNG ĐỊNH DANH
• 4.6. MỘT SỐ TRƯỜNG HỢP CỤ THỂ
• 4.7. CÂU HỎI ÔN TẬP
• 5. BÀI 5: NGÔN NGỮ JAVASCRIPT
• 5.1. KHÁI NIỆM VỀ JAVASCRIPT
• 5.2. CHÈN JAVASCRIPT VÀO HTML
• 5.3. CÁC THÀNH PHẦN CƠ BẢN
• 5.4. MẢNG
• 5.5. LỆNH CÓ CẤU TRÚC
• 5.6. HÀM
• 5.7. CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT
• 5.8. XỬ LÝ SỰ KIỆN
• 5.9. CÁC ĐỐI TƯỢNG CỦA TRÌNH DUYỆT
• 5.10. MỘT VÀI ỨNG DỤNG
• 5.11. TÓM TẮT
• 5.12. CÂU HỎI ÔN TẬP
• 6. BÀI 6: THIẾT KẾ WEB BẰNG DREAMWEAVER CS5
• 6.1. GIỚI THIỆU
• 6.2. TẠO MỘT TRANG WEB
• 6.3. TẠO BẢNG TRONG TRANG WEB
• 6.4. CHÈN HÌNH VÀO TRANG WEB
• 6.5. TẠO MENU CHO TRANG WEB
• 7. BÀI 7: THIẾT KẾ BIỂU TƯỢNG (LOGO)
• 7.1. GIỚI THIỆU PHẦN MỀM SOTHINK LOGO MAKER
• 7.2. CHỌN MẪU LOGO THEO THỂ LOẠI
• 7.3. THAY THẾ HÌNH ẢNH TRÊN LOGO
• 7.4. HIỆU CHỈNH TEXT TRÊN LOGO
• 7.5. THÊM ĐƯỜNG VIỀN VĂN BẢN
• 7.6. CÁC CHỨC NĂNG KHÁC
• 7.7. CÂU HỎI ÔN TẬP
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan về thiết kế website đơn giản và hiệu quả

Thiết kế web là nền tảng cốt lõi trong kỷ nguyên số hóa hiện đại. Một trang mạng trực tuyến đóng vai trò đại diện thông tin cho tổ chức hoặc cá nhân. Mục tiêu tối thượng của quá trình phát triển web là truyền tải nội dung chính xác. Thiết kế đơn giản loại bỏ triệt để các chi tiết rườm rà không cần thiết. Người truy cập luôn ưu tiên trải nghiệm nhanh gọn, trực quan và dễ tiếp cận.

Cấu trúc web cơ bản bao gồm ba thành phần công nghệ nền tảng. HTML chịu trách nhiệm định hình khung xương tài liệu và sắp xếp thứ bậc văn bản. CSS xử lý toàn bộ phong cách thẩm mỹ, màu sắc, bố cục hiển thị. JavaScript cung cấp năng lực phản hồi và điều khiển tương tác người dùng. Sự phối hợp chặt chẽ giữa ba yếu tố quyết định trực tiếp đến tính ổn định của hệ thống.

Mô hình thiết kế hiện đại đòi hỏi sự cân bằng tuyệt đối giữa thẩm mỹ và công năng. Các trang web phức tạp thường tiêu tốn tài nguyên máy chủ và làm chậm thời gian phản hồi. Ngược lại, phương thức tiếp cận tinh gọn giúp dữ liệu tải nhanh hơn. Công cụ tìm kiếm đánh giá rất cao những trang web có cấu trúc rõ ràng. Do đó, việc xây dựng một trang web đơn giản mang lại lợi thế cạnh tranh dài hạn.

1.1. Khái niệm nền tảng trong phát triển trang web

Trang web là tập hợp các tệp siêu văn bản liên kết với nhau qua không gian mạng toàn cầu. Mỗi tài liệu web chứa thông tin định dạng dưới dạng văn bản, hình ảnh hoặc âm thanh. Giao thức HTTP hoặc HTTPS đóng vai trò cầu nối chuyển tải dữ liệu giữa máy chủ và trình duyệt. Máy chủ lưu trữ toàn bộ mã nguồn cùng tệp dữ liệu tĩnh của hệ thống. Trình duyệt nhận gói tin và biên dịch mã lệnh thành giao diện hiển thị đồ họa hoàn chỉnh. Quá trình giao tiếp này diễn ra liên tục theo mô hình yêu cầu và phản hồi tiêu chuẩn. Hiểu rõ cơ chế vận hành này là bước đi tiên quyết giúp kỹ sư kiểm soát chất lượng website toàn diện.

1.2. Vai trò cấu trúc tài liệu HTML và định dạng CSS

Ngôn ngữ đánh dấu siêu văn bản HTML thiết lập bộ khung phân cấp thông tin cho toàn bộ website. Các thẻ định dạng như tiêu đề, đoạn văn và danh sách tổ chức luồng đọc tự nhiên cho người dùng. Thẻ liên kết siêu văn bản bảo đảm khả năng điều hướng liền mạch giữa các trang nội dung. Đồng thời, bảng mã định kiểu CSS kiểm soát hoàn toàn diện mạo trình bày của tài liệu. Việc tách rời cấu trúc nội dung HTML khỏi lớp định dạng giao diện CSS tạo nên chuẩn mực lập trình hiện đại. Phương thức này giúp mã nguồn trở nên gọn gàng, giảm thiểu độ trễ tải trang và tiết kiệm băng thông lưu trữ máy chủ.

II. Phân tích thách thức khi thiết kế website đơn giản

Tạo dựng giao diện tối giản thường đối mặt nhiều rào cản kỹ thuật phức tạp hơn nhận định thông thường. Ranh giới giữa sự đơn giản tinh tế và sự nghèo nàn chức năng rất mong manh. Nhiều trang web hiện nay mắc sai lầm nghiêm trọng trong việc lạm dụng quá nhiều hiệu ứng đồ họa. Việc tích hợp bừa bãi các thư viện script bên ngoài dẫn đến xung đột hệ thống. Dung lượng tệp tin phình to kéo tụt chỉ số tải trang xuống mức báo động.

Vấn đề phổ biến thứ hai bắt nguồn từ cấu trúc mã HTML lộn xộn và thiếu chuẩn hóa ngữ nghĩa. Việc sử dụng các thẻ khối vô tội vạ cản trở khả năng phân tích dữ liệu của bọ tìm kiếm. Trình duyệt cũng tốn nhiều chu kỳ xử lý để hiển thị hoàn tất cây DOM phức tạp. Sai sót trong khai báo thẻ meta khiến hệ thống mất phương hướng định vị danh mục thông tin.

Ngoài ra, việc duy trì tính tương thích đa nền tảng đặt ra áp lực lớn cho nhà phát triển. Kích thước màn hình thiết bị di động rất đa dạng về độ phân giải hiển thị. Trang web không có phương án dàn trang linh hoạt sẽ vỡ cấu trúc lập tức. Trải nghiệm người dùng giảm sút kéo theo tỷ lệ thoát trang tăng vọt.

2.1. Lỗi quá tải mã nguồn và giao diện người dùng

Hiện tượng phình to mã nguồn xảy ra khi lập trình viên lạm dụng các đoạn mã định kiểu nội dòng thừa thãi. Các tệp tin hình ảnh dung lượng lớn không qua nén nạp vào tài liệu làm tắc nghẽn đường truyền mạng. Giao diện nhồi nhét quá nhiều nút bấm, biểu mẫu và màu sắc gây rối loạn thị giác nghiêm trọng. Người truy cập gặp khó khăn khi tìm kiếm thông tin cốt lõi giữa ma trận đối tượng đồ họa. Tình trạng này làm giảm thời gian lưu trú trung bình trên website. Việc thiếu chiến lược phân bổ không gian trắng phá vỡ tính phân cấp trực quan của bố cục trang web.

2.2. Khó khăn tối ưu hóa hiển thị và chuẩn SEO kỹ thuật

Sự thiếu hụt kiến thức chuẩn SEO kỹ thuật tạo ra rào cản lớn cho việc xếp hạng trang web. Việc bỏ quên các thuộc tính quan trọng như văn bản thay thế cho hình ảnh làm giảm điểm chất lượng. Thẻ mô tả tiêu đề trang bị trùng lặp hoặc để trống khiến công cụ thu thập thông tin đánh giá thấp. Cấu trúc liên kết nội bộ thiếu logic dẫn đến hiện tượng trang mồ côi không nhận được giá trị luồng dẫn. Tốc độ hiển thị nội dung đầu tiên bị trì hoãn do tài nguyên chặn kết xuất. Nếu không giải quyết triệt để các lỗi kỹ thuật nền tảng này, website rất khó tiếp cận nhóm đối tượng tiềm năng.

III. Phương pháp thiết kế website đơn giản và hiệu quả

Quy trình phát triển một website tinh gọn bắt đầu từ bước lập kế hoạch cấu trúc nội dung khoa học. Toàn bộ thông tin cần sơ đồ hóa theo hệ thống phân nhánh rõ ràng trước khi viết mã lệnh. Ngôn ngữ HTML chuẩn được triển khai để định hình các phần tử cơ bản như tiêu đề, đoạn văn và bảng biểu. Thao tác viết mã cần tuân thủ nghiêm ngặt chuẩn W3C nhằm đảm bảo tính toàn vẹn dữ liệu.

Tiếp theo, việc ứng dụng bảng kiểu CSS bên ngoài giúp tập trung hóa việc quản lý giao diện. Thiết kế hệ thống lưới linh hoạt cho phép bố cục tự động điều chỉnh theo kích thước màn hình người dùng. Phông chữ hệ thống cùng bảng màu tối giản từ hai đến ba màu chủ đạo nâng cao tính nhận diện thương hiệu. Mọi tệp hình ảnh cần tối ưu hóa định dạng và kích thước trước khi nhúng vào trang web.

JavaScript chỉ nên được tích hợp có chọn lọc cho các chức năng kiểm tra hợp lệ dữ liệu biểu mẫu hoặc menu di động. Hạn chế tối đa các đoạn mã lệnh chạy ngầm gây tiêu tốn bộ nhớ trình duyệt. Việc tối ưu hóa mã nguồn theo triết lý này giúp gia tăng tốc độ hiển thị và nâng tầm trải nghiệm người dùng.

3.1. Xây dựng khung giao diện với HTML và CSS chuẩn hóa

Tổ chức tài liệu HTML bằng các khối logic tạo tiền đề vững chắc cho việc định hình trang web. Thẻ tiêu đề từ H1 đến H6 phải sắp xếp đúng quy luật phân cấp nội dung ngữ nghĩa. Các thành phần bảng biểu hoặc biểu mẫu nhập liệu cần cấu trúc tường minh và đầy đủ nhãn mô tả đối tượng. Bảng kiểu CSS thiết lập qua liên kết ngoài giúp trình duyệt lưu bản sao bộ nhớ đệm tối ưu. Kỹ thuật chia lớp định kiểu rõ ràng giảm thiểu sự trùng lặp quy tắc định dạng. Thiết kế responsive sử dụng truy vấn phương tiện bảo đảm website hiển thị chuẩn xác trên máy tính lẫn thiết bị cầm tay.

3.2. Tích hợp JavaScript tương tác và tối ưu thẻ Meta

Kịch bản JavaScript được đưa vào cuối tệp tài liệu để tránh làm nghẽn tiến trình dựng trang của trình duyệt. Cơ chế xử lý sự kiện tập trung hỗ trợ xác thực biểu mẫu nhanh chóng ngay phía giao diện máy khách. Giải pháp này tiết kiệm tối đa lượt gửi dữ liệu không hợp lệ về máy chủ lưu trữ. Đồng thời, cấu hình hệ thống thẻ meta trong phần đầu trang xác lập danh tính chuẩn cho trang web. Thẻ mô tả tóm tắt, từ khóa và bộ mã hóa ký tự UTF-8 cung cấp dữ liệu chính xác cho công cụ tìm kiếm. Sự kết hợp này mang lại hiệu suất phản hồi vượt trội và tính khả dụng tuyệt đối.

IV. Ứng dụng thực tiễn trong thiết kế website hiệu quả

Áp dụng quy chuẩn thiết kế đơn giản mang lại giá trị thực tiễn bền vững cho mọi dự án công nghệ. Doanh nghiệp và cá nhân sở hữu website gọn nhẹ luôn đạt tỷ lệ tiếp cận khách hàng cao hơn. Thời gian phản hồi trang dưới hai giây giúp duy trì hành vi khám phá thông tin của người dùng. Tỷ lệ tương tác gia tăng tạo bước đà chuyển đổi thành hành động mua hàng hoặc đăng ký dịch vụ.

Môi trường kỹ thuật số đòi hỏi khả năng cập nhật và bảo trì mã nguồn thường xuyên. Hệ thống tài liệu HTML và CSS tinh gọn giảm tải đáng kể chi phí bảo dưỡng hạ tầng kỹ thuật. Các công cụ thiết kế chuyên nghiệp như Dreamweaver hỗ trợ việc trực quan hóa quy trình xây dựng giao diện nhanh chóng. Lập trình viên dễ dàng mở rộng thêm phân hệ tính năng mới mà không sợ phá vỡ cấu trúc tổng thể ban đầu.

Tối ưu hóa công cụ tìm kiếm kỹ thuật số trở nên dễ dàng hơn khi cấu trúc trang chuẩn chỉ. Khả năng lập chỉ mục diễn ra nhanh chóng, nâng cao điểm chất lượng trên các bảng xếp hạng tìm kiếm. Thiết kế tối giản chính là chiếc chìa khóa khai mở thành công toàn diện cho mọi sản phẩm trực tuyến.

4.1. Quy trình kiểm thử và công bố website trên Internet

Giai đoạn hoàn thiện đòi hỏi việc kiểm thử nghiêm ngặt trên nhiều trình duyệt và độ phân giải màn hình khác nhau. Mọi liên kết siêu văn bản, biểu mẫu gửi dữ liệu và hình ảnh phải vận hành trơn tru không lỗi phát sinh. Tiếp theo, mã nguồn được đẩy lên máy chủ lưu trữ thông qua giao thức truyền tệp tin chuyên dụng. Tên miền trang web được trỏ chính xác về địa chỉ giao thức mạng của máy chủ lưu trữ. Quá trình kiểm tra sau khi công bố xác nhận tình trạng hoạt động thực tế trên không gian mạng. Quy trình bài bản này loại bỏ nguy cơ gián đoạn dịch vụ và bảo vệ uy tín thương hiệu.

4.2. Duy trì hiệu năng và mở rộng tính năng trang web

Vận hành website hiệu quả là một chu trình giám sát và tối ưu hóa liên tục theo thời gian thực. Báo cáo lưu lượng truy cập cung cấp dữ liệu định lượng về hành vi và sở thích của khách ghé thăm. Việc sao lưu định kỳ toàn bộ cơ sở dữ liệu và tệp mã nguồn bảo vệ hệ thống khỏi sự cố an ninh mạng. Khi cần tích hợp tính năng bổ sung, kiến trúc mô-đun hóa cho phép cập nhật nhanh gọn mà không ảnh hưởng luồng vận hành chính. Tối ưu hóa định kỳ giúp trang web luôn giữ vững tốc độ tải mượt mà cùng thứ hạng ổn định trên các công cụ tìm kiếm.

Nội dung chính

Giáo Trình Thiết Kế Website – ThS. Trương Thị Minh Châu (Đại Học Công Nghệ TP.HCM)

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

Giáo trình Thiết kế Website do ThS. Trương Thị Minh Châu biên soạn, được lưu hành nội bộ tại Trường Đại học Công nghệ TP.HCM (HUTECH) thuộc Bộ Giáo dục và Đào tạo (ấn bản năm 2013). Tài liệu được cấu trúc phục vụ cho học phần chuyên môn về phát triển giao diện web, đóng vai trò nền tảng trong chương trình đào tạo khối ngành Công nghệ thông tin và Hệ thống thông tin.

Mục tiêu học tập của giáo trình nhằm cung cấp cho sinh viên hệ thống kiến thức toàn diện từ cấp độ căn bản đến nâng cao về cấu trúc trang web, bao gồm ba công nghệ lõi: ngôn ngữ đánh dấu siêu văn bản (HTML), bảng kiểu dáng theo tầng (CSS) và ngôn ngữ kịch bản phía máy khách (JavaScript). Đồng thời, môn học trang bị kỹ năng vận hành các phần mềm đồ họa và hỗ trợ soạn thảo trực quan như Adobe Dreamweaver CS5 và Sothink Logo Maker để hoàn thiện sản phẩm website đồng bộ.

Về cách tiếp cận, giáo trình đi theo lộ trình sư phạm từ bản chất kỹ thuật đến ứng dụng thực tiễn. Sinh viên bắt đầu từ việc hiểu rõ môi trường vận hành mạng, giao thức truyền thông, sau đó trực tiếp viết mã nguồn thuần (hard-coding) để hiểu cấu trúc thẻ và cú pháp lệnh, trước khi chuyển sang khai thác các công cụ tự động hóa và xử lý mỹ thuật giao diện. Điểm đặc thù của tập bài giảng này là sự kết hợp chặt chẽ giữa cú pháp lập trình tiêu chuẩn W3C với quy trình triển khai website thực tế tại thị trường Việt Nam thời điểm xuất bản.

---

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 triển khai qua 7 bài học có tính kế thừa và phát triển logic:

• Bài 1: Các khái niệm cơ bản: Trình bày môi trường hoạt động của website, các khái niệm hạ tầng mạng (Computer Network, giao thức TCP/IP, HTTP, FTP), hệ thống phân giải tên miền (DNS), cấu trúc địa chỉ URL, phân biệt máy chủ (Server) và máy khách (Client). Phân loại trang web thành web tĩnh, web động và portal. Quy trình 5 bước phát triển website (Đặc tả, Phân tích, Thiết kế, Xây dựng, Kiểm thử) và các điều kiện công bố một website lên Internet.
• Bài 2: Ngôn ngữ HTML: Giới thiệu lịch sử ra đời của HTML do Tim Berners-Lee phát minh và chuẩn hóa bởi W3C năm 1994. Phân tích cú pháp thẻ mở, thẻ đóng và các thuộc tính. Hệ thống các nhóm thẻ cơ bản: thẻ cấu trúc tài liệu (<html>, <head>, <title>, <body>), thẻ định dạng khối (<p>, <h1>-<h6>,
, <pre>), thẻ danh sách (<ul>, <ol>, <li>, <menu>, <dir>), thẻ định dạng ký tự (<b>, <strong>, <i>, <u>, <font>, <sup>, <sub>), liên kết siêu văn bản (<a>), thẻ chèn đa phương tiện (<img>, <bgsound>) và các thẻ tạo bảng biểu (<table>, <tr>, <td>, <th>, <caption>).
• Bài 3: Form trên trang web và Khung (Frame): Phân tích cơ chế thu thập dữ liệu người dùng qua đối tượng form (<form>) với các phương thức truyền dữ liệu GET và POST. Hướng dẫn chi tiết các phần tử điều khiển (controls): hộp nhập văn bản một dòng (type="text"), mật khẩu (type="password"), ô đánh dấu (type="checkbox"), nút chọn một (type="radio"), các loại nút bấm (submit, reset, button), danh sách lựa chọn (<select>, <option>) và vùng nhập văn bản nhiều dòng (<textarea>). Bài học cũng trình bày kỹ thuật phân chia khung nhìn bằng thẻ <frameset>, <frame>, <noframes> và cấu hình các thẻ <meta> phục vụ tối ưu hóa tìm kiếm.
• Bài 4: Định dạng bằng CSS: Cung cấp định nghĩa về Cascading Style Sheets, các cơ chế nhúng CSS vào tài liệu HTML (inline, internal, external). Cách khai báo cú pháp style, áp dụng bộ chọn theo lớp (Class Selector) và theo định danh (ID Selector), kèm theo các trường hợp định dạng giao diện cụ thể.
• Bài 5: Ngôn ngữ JavaScript: Khái niệm ngôn ngữ kịch bản client-side, cách chèn mã JavaScript vào HTML. Các thành phần cú pháp cơ bản: biến, kiểu dữ liệu nguyên thủy, toán tử, mảng dữ liệu, cấu trúc điều khiển rẽ nhánh và lặp. Cung cấp kiến thức về các đối tượng cơ bản, mô hình xử lý sự kiện (Event Handling) và các đối tượng trình duyệt (Browser Object Model).
• Bài 6: Thiết kế web bằng Adobe Dreamweaver CS5: Hướng dẫn sử dụng phần mềm hỗ trợ thiết kế trực quan WYSIWYG. Kỹ thuật tạo trang, bố cục layout, chèn bảng biểu, chèn hình ảnh, tạo hệ thống thanh điều hướng (menu), thiết lập siêu liên kết và kết hợp CSS tạo hiệu ứng hiển thị.
• Bài 7: Thiết kế biểu tượng (Logo): Khai thác phần mềm chuyên dụng Sothink Logo Maker để tạo lập bộ nhận diện cho website. Quy trình lựa chọn mẫu logo theo danh mục, thay thế và căn chỉnh hình ảnh, hiệu chỉnh văn bản, bổ sung đường viền (outline) và xuất tệp tin sang các định dạng đồ họa phù hợp.

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

Giáo trình xác lập hệ thống tri thức nền tảng dựa trên các nguyên lý kỹ thuật:

• Nguyên lý mạng máy tính và định vị tài nguyên: Hiểu rõ cơ chế ánh xạ giữa tên miền văn bản nhiều cấp (ví dụ: cntt.dhsphn.edu.vn) với địa chỉ số IP thông qua máy chủ DNS; phân tích vai trò của cổng logic (Web port 80, FTP port 21) và quy chuẩn URL tuyệt đối, URL tương đối (/, #, ..).
• Tiêu chuẩn tài liệu siêu văn bản: Cấu trúc DOM dạng cây cơ bản của HTML, quy ước phân tách phần thông tin điều khiển trong <head> và phần nội dung hiển thị trong <body>. Cơ chế tổng hợp màu sắc trên màn hình thông qua hệ màu RGB hệ thập lục phân (#RRGGBB).
• Mô hình tương tác Client-Server: Cơ chế gửi yêu cầu từ trình duyệt đến máy chủ web (như Apache hoặc IIS) và nhận dữ liệu phản hồi dạng HTML; luồng dữ liệu từ các form nhập liệu về phía máy chủ để xử lý thông tin.

Kỹ năng phát triển

Qua toàn bộ nội dung tài liệu, người học được rèn luyện các năng lực kỹ thuật:

• Năng lực lập trình mã nguồn giao diện: Viết mã HTML hợp chuẩn bằng các trình biên tập văn bản thuần (Notepad, EditPlus); tổ chức cấu trúc bảng biểu phức tạp sử dụng các thuộc tính gộp ô (colspan, rowspan); xây dựng hệ thống form tiếp nhận dữ liệu hoàn chỉnh.
• Năng lực định kiểu và tương tác: Ứng dụng CSS để kiểm soát bố cục văn bản, màu nền, đường viền; viết mã JavaScript cơ bản để kiểm tra dữ liệu và phản hồi các sự kiện người dùng trên trình duyệt.
• Năng lực khai thác phần mềm chuyên nghiệp: Thao tác thành thạo môi trường làm việc của Adobe Dreamweaver CS5 để tăng tốc độ dàn trang; sử dụng Sothink Logo Maker để biên tập đồ họa vector và hình ảnh phục vụ trang web.

---

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 thực hành trực quan kết hợp lý thuyết quy chuẩn. Cấu trúc mỗi bài học được thiết kế chặt chẽ theo bốn bước:

1. Xác định mục tiêu học tập: Đầu mỗi bài đều liệt kê các chỉ số đầu ra cụ thể về kiến thức và kỹ năng (ví dụ: hiểu cú pháp, sử dụng thành thạo các thẻ, thiết kế được giao diện mẫu).
2. Trình bày lý thuyết và mã nguồn mẫu: Mỗi khái niệm đều đi kèm cú pháp chuẩn, bảng giải thích chi tiết từng tham số/thuộc tính và đoạn mã ví dụ cụ thể (ví dụ: đoạn mã mẫu tạo bảng thời tiết, bảng danh mục dinh dưỡng calo).
3. Hình ảnh minh chứng thực nghiệm: Toàn bộ các ví dụ mã lệnh đều có hình ảnh chụp màn hình hiển thị tương ứng trên trình duyệt Internet Explorer, giúp người học đối chiếu trực quan kết quả biên dịch.
4. Hệ thống tóm tắt và câu hỏi ôn tập: Cuối bài học tổng hợp lại các trọng tâm kiến thức và cung cấp hệ thống câu hỏi lý thuyết kèm bài tập tạo dựng giao diện thực tế.

Về phương pháp đánh giá môn học, tài liệu công bố rõ cơ chế phân bổ điểm số:

• Điểm quá trình (chiếm 30% tổng điểm môn học): Thực hiện thông qua hình thức thi thực hành trên máy hoặc chấm điểm trực tiếp trên Bài tập lớn. Nội dung bài tập lớn yêu cầu thiết kế một website hoàn chỉnh theo đề tài do giảng viên phân công hoặc sinh viên tự đề xuất.
• Quy định học tập: Người học bắt buộc phải tham gia đầy đủ các buổi lên lớp, hoàn thành toàn bộ bài tập về nhà và các bài thực hành trong phòng máy.

Hướng dẫn tự học khuyến nghị người học chuẩn bị bài theo quy trình: đọc trước phần mục tiêu và tóm tắt bài học; nghiên cứu nội dung chi tiết; tự tay gõ lại mã nguồn ví dụ trên trình soạn thảo đơn giản để hiểu quy tắc báo lỗi cú pháp; trả lời câu hỏi ôn tập và hoàn thành các bài thực hành giao diện trước khi chuyển sang bài mới.

---

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

Giáo trình phản ánh chuẩn xác các đặc điểm công nghệ và thực tiễn phát triển web tại Việt Nam ở mốc thời gian ấn hành (tháng 12 năm 2013):

• Dữ liệu thực tế về hạ tầng và kinh tế số năm 2013: Tài liệu cung cấp các số liệu thực tế về chi phí và thủ tục công bố web tại thời điểm biên soạn, cụ thể: chi phí duy trì tên miền .vn (khoảng 350.000 đồng/năm), tên miền quốc tế (8 - 12 USD/năm); mặt bằng giá xây dựng website tĩnh (70.000 - 350.000 đồng/trang) và website động (phổ biến từ 10 - 30 triệu đồng tùy theo quy mô cơ sở dữ liệu và phân quyền chức năng quản trị).
• Tổng kết hệ sinh thái công nghệ đa dạng: Tài liệu tổng hợp các định dạng truyền thông web trước thời kỳ HTML5 phát triển mạnh, bao gồm các định dạng ảnh GIF89, JPEG, TIFF; định dạng tài liệu PostScript, PDF; video AVI, MOV, MPEG; âm thanh streaming RealAudio (.ram), MIDI; và công nghệ mô phỏng không gian ba chiều VRML (.vrml).
• Tích hợp công cụ tìm kiếm và xếp hạng web thời kỳ 2013: Giới thiệu cả hệ thống công cụ tìm kiếm nội địa Việt Nam lúc bấy giờ (Panvietnam, Vinaseek) bên cạnh các công cụ quốc tế (Google, AltaVista, HotBot), đồng thời đề cập đến hai thước đo đánh giá độ phổ biến của website giai đoạn này là Google PageRank (thang điểm 1-10) và Alexa Traffic Rank.

---

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

Giáo trình được thiết kế chuẩn hóa cho các nhóm đối tượng cụ thể:

• Sinh viên đại học và cao đẳng: Dành cho sinh viên năm thứ nhất hoặc năm thứ hai chuyên ngành Công nghệ thông tin, Hệ thống thông tin, Kỹ thuật phần mềm đang theo học học phần Thiết kế Website hoặc Lập trình Web căn bản.
• Điều kiện tiên quyết (Prerequisites): Người học cần trang bị kiến thức nền tảng về lập trình cơ bản (tư duy biến, hàm, điều kiện rẽ nhánh) và kỹ năng thao tác hệ điều hành, quản lý tập tin thư mục cơ bản.
• Giảng viên giảng dạy: Dùng làm đề cương chi tiết và tài liệu hướng dẫn giảng dạy trên lớp, chuẩn hóa hệ thống bài tập thực hành trên phòng máy và làm căn cứ xây dựng đề thi thực hành, tiêu chí chấm bài tập lớn.
• Người tự học: Cung cấp tài liệu tham khảo từng bước (step-by-step) cho những cá nhân muốn nắm vững cấu trúc gốc của trang web trước khi tiếp cận các framework hoặc hệ quản trị nội dung phức tạp.

---

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 phù hợp nhất với sinh viên các ngành kỹ thuật, công nghệ thông tin bắt đầu tiếp cận lĩnh vực phát triển web, hoặc những người cần học hiểu bản chất cấu trúc mã nguồn web từ tầng cơ bản nhất.

2. Cần kiến thức nền nào để học?

Theo yêu cầu tiên quyết được nêu trong tài liệu, người học cần có kiến thức về kỹ thuật lập trình cơ bản để dễ dàng tiếp thu các khái niệm về cú pháp JavaScript, biến, mảng và các cấu trúc điều khiển.

3. Điểm khác biệt với giáo trình khác?

Tài liệu liên kết trực tiếp giữa việc viết mã nguồn thủ công (HTML/CSS/JS) với việc vận hành phần mềm công nghiệp Adobe Dreamweaver CS5 và Sothink Logo Maker, đồng thời cung cấp các hướng dẫn cụ thể về chi phí, thủ tục đăng ký tên miền và lưu trữ hosting tại Việt Nam.

4. Làm sao để tự học hiệu quả?

Người học nên tuân thủ chỉ dẫn của giáo trình: sử dụng các trình soạn thảo văn bản thuần như Notepad để tự gõ từng dòng lệnh, mở kiểm tra trên trình duyệt, quan sát kết quả hiển thị và giải quyết toàn bộ các bài tập thực hành ở cuối mỗi bài học.

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

Giáo trình có hệ thống bài tập thực hành mẫu (như thiết kế bảng dữ liệu thời tiết, tạo biểu mẫu đăng nhập, cấu hình layout khung nhìn) và danh mục tài liệu tham khảo ở trang 124 của tài liệu để người học tra cứu mở rộng.

---

Kết luận

Giáo trình Thiết kế Website của ThS. Trương Thị Minh Châu là tài liệu học thuật mang tính cấu trúc và thực tiễn cao, hệ thống hóa đầy đủ kiến thức về giao diện web từ nền tảng hạ tầng, cú pháp thẻ mã nguồn đến công cụ thiết kế trực quan.

Lộ trình học tập khuyến nghị là hoàn thành tuần tự từ Bài 1 đến Bài 5 nhằm làm chủ các chuẩn mã nguồn gốc, tiếp tục thực hành Bài 6 và Bài 7 để hoàn thiện kỹ năng trên các phần mềm ứng dụng, và kết thúc bằng việc tích hợp toàn bộ kiến thức vào đồ án bài tập lớn xây dựng website hoàn chỉnh.

Trích đoạn nội dung tài liệu

phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi gidi han bdi cap thé <HEAD>. Cu phap: <TTTLE>Tiêu đề của tài liệu</TTTLE> 2.4 Body Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để dat anh nén cho tai liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu. Những thông tin này được đặt ở phần tham số của thả.

NGÔN NGỮ HTML ma <BODY>. phần nội dung của tài liệu được đặt ở đây </BODY> Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính: BACKGROUND=_ | Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh.

Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh. BGCOLOR= Đặt mầu nền cho trang khi hiển thi. Néu tham s6 BACKGROUND va BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên. TEXT= Xác định màu chữ của văn bản, kể cả các đề mục.

ALTNK=, Xác định màu sắc cho các siêu liên kết trong văn bản. Tương ứng, VLINK=, alink (active link) la lién két đang được kích hoạt - tức là khi đã được LINK= kích chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt; Như vậy một tài liệu HTML cơ bản có cấu trúc như sau: <HTML> <HEAD> <TTTLE>Tiêu đề của tài liệu< /TTTLE> </HEAD> <BODY Các tham số nếu có>. Nội dung của tài liệu </BODY> </HTML> 2.3 CAC THE DINH DANG KHOI 2.1 Thẻ P Thẻ <P> được sử dụng để định dạng một đoạn văn bản. Cú pháp: <P>Nội dung đoạn văn bản</P> mm BÀI 2.

NGÔN NGỮ HTML Ví dụ: <p> Đây là đoạn 1.</p> <p> Đây là đoạn 2.2 Các thẻ định dạng đê mục (heading) H1/H2/H3/H4/H5/H6 HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đấn cấp 6.

Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường. Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: <H1>. /H1> Định dạng đề mục cấp 1 <H2>. /H2> Định dạng đề mục cấp 2 <H3>.

/H3> Định dạng đề mục cấp 3 <H4>. /H4> Định dạng đề mục cấp 4 <H5>. /H5> Định dạng đề mục cấp 5 <H6>. /H6> Định dạng đề mục cấp 6 Ví dụ: <h1> Đây là heading h1</h1> <h2> Đây là heading h2</h2> <h3> Đây là heading h3</h3> <h4> Đây là heading h4</h4> <h5> Day la heading h5</h5> <h6> Day la heading h6</h6> 2.3 Thẻ xuống dòng B ÊÊ ví dụ heading - Windows Internet Explorer Je E:\MinhChaulbai giang\thiet ke web\bai giang thiet ke weblvidu_html\heading.,htm File Edit View Favorites Tools Help Favorites 8 vidy heading | | Day la heading h1 Day 1a heading h2 Day la heading h3 Day là heading h4 Diy la heading hS Đây là heading h6 Hình 2.2 Vi du vé cac thé heading R Thẻ này không có thẻ kết thúc tương ứng (</BR>), nó có tác dụng chuyển sang dòng mới.

Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể BÀI 2.