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

Giáo trình Hướng Dẫn Thiết Kế Web Cơ Bản Với HTML là tài liệu học tập thuộc khối kiến thức cơ sở ngành trong chương trình đào tạo Công nghệ Thông tin, Kỹ thuật Phần mềm và Khoa học Máy tính ở bậc đại học. Tài liệu giữ vai trò học phần mở đầu cho toàn bộ hướng chuyên ngành Phát triển Web và Ứng dụng Internet, cung cấp nền tảng lý thuyết mạng cùng kỹ thuật định dạng văn bản phục vụ việc xây dựng giao diện web.

Mục tiêu học tập của giáo trình được xác định rõ ràng qua bốn chuẩn đầu ra chính:

  1. Trang bị hệ thống kiến thức nền tảng về môi trường web, các giao thức mạng và mô hình kiến trúc ứng dụng web.
  2. Nhận diện và phân tích các thành phần cấu tạo cơ bản của một trang web (web page) và hệ thống website.
  3. Nắm vững quy trình các bước xây dựng trang web tĩnh từ khâu tổ chức mã nguồn, định dạng nội dung đến quản lý tài nguyên.
  4. Xây dựng và triển khai hoàn chỉnh một trang web tĩnh trên nền tảng ngôn ngữ HTML.

Giáo trình tiếp cận kiến thức theo phương pháp sư phạm cấu trúc tầng (bottom-up): bắt đầu từ tầng hạ tầng mạng và môi trường phân phối web, chuyển tiếp sang nguyên lý hoạt động của mô hình Client/Server, sau đó đi sâu vào cú pháp chi tiết của ngôn ngữ đánh dấu siêu văn bản HTML. Điểm đặc thù của tài liệu là sự chuẩn hóa các khái niệm kỹ thuật cốt lõi (từ giao thức, cổng mạng, phân giải tên miền đến cơ chế bóc tách địa chỉ URL) và gắn liền lý thuyết cú pháp với các ví dụ mã nguồn cụ thể, giúp người học hình thành tư duy phát triển phần mềm dựa trên chuẩn kỹ thuật của Tim Berners-Lee.

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

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

Nội dung của giáo trình được tổ chức thành các khối chủ đề theo tiến trình logic chặt chẽ:

  1. Khái niệm và thuật ngữ cơ bản về mạng và môi trường Web: Chủ đề này làm rõ định nghĩa World Wide Web (WWW) - mạng toàn cầu các máy tính sử dụng Internet để trao đổi tài liệu web; khái niệm Giao thức (Protocol) như tập quy tắc thống nhất giữa hai máy tính nhằm trao đổi dữ liệu chính xác; danh mục các giao thức thông dụng gồm TCP, HTTP, FTP, SMTP. Phần này cũng phân biệt giữa Web page (tài liệu HTML) và Website (tập hợp các web page liên quan), cùng khái niệm Home page (trang chủ có cấp độ cao nhất). Ngoài ra, hệ thống địa chỉ mạng được phân rã chi tiết: địa chỉ IP (con số xác định duy nhất, ví dụ 192.1...), Tên miền (Domain name, ví dụ www.vn), dịch vụ DNS (Domain Name Service) chuyển đổi tên miền sang IP và ngược lại; vai trò của ISP (nhà cung cấp dịch vụ Internet) và Web host (máy chủ lưu trữ website).

  2. Cơ chế truyền thông và Mô hình Client/Server: Tài liệu phân tích cấu trúc của Cổng mạng (Port) như con số xác định kênh nhập/xuất được ứng dụng Internet sử dụng để phân biệt các dịch vụ trên cùng một máy chủ (Port 80 cho Web Server, Port 21 cho FTP Server, Port 25 cho SMTP Server). Khối nội dung này định nghĩa phần mềm Web Client/Trình duyệt (IE, Firefox, Opera, Safari, Chrome) và Web Server (IIS, Apache, Tomcat). Đồng thời, tài liệu phân định rõ hai mô hình xử lý:

    • Web tĩnh: Chứa nội dung cố định viết bằng HTML, cập nhật trực tiếp trên tệp nguồn, không hỗ trợ tương tác cơ sở dữ liệu (lưu ý: trang web tĩnh vẫn có thể chứa hình ảnh chuyển động).
    • Web động: Kết hợp HTML và mã lệnh thực thi trực tiếp trên server, trả kết quả HTML về client và có khả năng tương tác với người dùng.

  3. Cấu trúc URL và Phân rã địa chỉ mạng: URL (Uniform Resource Locator) được chuẩn hóa qua ví dụ cấu trúc: http://vn:8080/khoacntt/news.php?id=216&p=1#Phan1 Bao gồm: Giao thức (http), Tên miền (vn), Cổng (8080), Thư mục (khoacntt), Tệp tin (news.php), Tham số truy vấn (?id=216&p=1) và Tên vị trí bookmark trong trang (#Phan1).

  4. Tổng quan về Ngôn ngữ HTML và Cú pháp thẻ: Giới thiệu HTML (HyperText Markup Language) do Tim Berners-Lee phát minh. Phân loại cấu trúc cú pháp:

    • Thẻ (Tag): Bắt đầu bằng < và kết thúc bằng >, gồm thẻ mở <tên thẻ> và thẻ đóng </tên thẻ>.
    • Phần tử (Element): Gồm phần tử chứa nội dung (có thẻ mở và thẻ đóng, ví dụ <p>Nội dung</p>) và phần tử rỗng (chỉ gồm một thẻ đơn, ví dụ
      , </br> hoặc
      ).
    • Thuộc tính (Attribute/Property): Khai báo trong thẻ mở, phân cách nhau bằng khoảng trắng, giá trị đặt trong dấu ngoặc kép hoặc ngoặc đơn (bắt buộc khi giá trị có khoảng trắng, ví dụ <table border="1" cellpadding="5">).

  5. Các nhóm thẻ HTML chức năng:

    • Thẻ định dạng trang và văn bản: <body>, <font>, <p>, <b>, <i>, <u>.
    • Thẻ tạo siêu liên kết (<a>): Cú pháp <a href="URL">Nhãn</a>. Phân loại thành liên kết nội bộ (Internal hyperlink dùng URL tương đối) và liên kết ngoại vi (External hyperlink dùng URL tuyệt đối). Kỹ thuật tạo Bookmark nội bộ gồm 2 bước: tạo điểm neo <a name="tên Bookmark">Tiêu đề</a> và tạo liên kết trỏ tới bookmark <a href="#tên Bookmark">Nhãn</a> hoặc liên kết bookmark liên trang <a href="URL#tên Bookmark">.
    • Thẻ danh sách: Danh sách không thứ tự <ul> với thuộc tính type nhận các giá trị disc (tròn đặc), circle (tròn rỗng), square (vuông); danh sách có thứ tự <ol> với thuộc tính type (A, a, I, i, 1), start (giá trị bắt đầu) và thẻ con <li> mang thuộc tính value; danh sách định nghĩa <dl> chứa thuật ngữ <dt> và diễn giải <dd> (minh họa qua các thuật ngữ Pixel, Resolution, Scanner).
    • Xử lý đồ họa đa phương tiện (<img>): Phân loại định dạng tệp ảnh (GIF hỗ trợ 256 màu và trong suốt; JPEG hỗ trợ hơn 16 triệu màu theo thuật toán nén mất dữ liệu; PNG nén không mất dữ liệu). Cú pháp <img src="URL">, kiểm soát hiển thị bằng thuộc tính width, height (giúp tăng tốc độ tải trang và tự động co giãn tỷ lệ khi chỉ khai báo một chiều), căn chỉnh vị trí bằng align (top, middle, bottom) hoặc kết hợp thẻ <p align="left|center|right">.
    • Cấu trúc mở rộng: Thiết kế bảng (<table>), chia khung (Frameset/Frame), tạo biểu mẫu (Form) và xử lý ký tự đặc biệt.

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

Lĩnh vực kiến thức Nguyên lý cốt lõi được xây dựng Cơ sở kỹ thuật trích xuất từ tài liệu
Kiến trúc mạng Web Chuẩn hóa giao thức truyền thông và định vị tài nguyên Mô hình Client/Server; phân định cổng (Port 80, 21, 25); phân giải tên miền qua DNS; bóc tách 7 thành phần của URL.
Mô hình xử lý ứng dụng Phân tách cơ chế xử lý tĩnh và xử lý động Quy trình Request/Response; Web tĩnh kết xuất tài nguyên cố định; Web động xử lý mã nguồn tại Web Server trước khi trả HTML về Browser.
Cú pháp siêu văn bản Cấu trúc dữ liệu dạng cây dựa trên đánh dấu thẻ Chuẩn cú pháp W3C; phân định Tag - Element - Attribute; cơ chế lồng ghép thẻ văn bản, siêu liên kết và danh sách.
Tối ưu hóa đồ họa Phân loại kỹ thuật nén và hiển thị tệp ảnh Đặc tính kỹ thuật của GIF (256 màu), JPEG (nén lossy), PNG (lossless); kiểm soát kích thước bằng pixel để tối ưu tốc độ kết xuất của trình duyệt.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills):

    • Viết mã HTML chuẩn cú pháp, tổ chức cấu trúc tài liệu hoàn chỉnh gồm các khối thẻ <html>, <head>, <title>, <body>.
    • Thiết lập liên kết linh hoạt giữa các tài liệu bằng cả hai phương pháp: đường dẫn tương đối (relative path) và đường dẫn tuyệt đối (absolute path).
    • Khởi tạo hệ thống điều hướng nội bộ trong các văn bản dài thông qua cơ chế Bookmark (<a name="..."> và <a href="#...">).
    • Tối ưu hóa việc hiển thị hình ảnh trên trang web bằng cách chỉ định đúng kích thước width, height và phân định cấu trúc thư mục lưu trữ (Image/).

  • Kỹ năng phân tích (Analytical skills):

    • Bóc tách và phân tích các thành phần cấu thành một địa chỉ mạng URL phức tạp (nhận diện chính xác giao thức, tên miền, cổng dịch vụ, đường dẫn tệp và chuỗi truy vấn tham số).
    • Đánh giá và lựa chọn định dạng đồ họa phù hợp cho từng loại đối tượng hiển thị (sử dụng GIF/PNG cho hình ảnh đồ họa ít màu hoặc cần nền trong suốt; sử dụng JPEG cho hình ảnh đa sắc thực tế).
    • Phân biệt bản chất vận hành giữa trang web tĩnh và trang web động để thiết kế giải pháp phân phối nội dung phù hợp.

  • Năng lực thực hành (Practical competencies):

    • Độc lập xây dựng một website tĩnh hoàn chỉnh bao gồm văn bản định dạng, danh sách nhiều cấp độ (<ul>, <ol>, <dl>), liên kết siêu văn bản và hình ảnh minh họa.
    • Quản lý cấu trúc tệp tin và thư mục dự án web theo đúng chuẩn kỹ thuật để đảm bảo tính toàn vẹn của liên kết khi triển khai lên máy chủ lưu trữ (Web host).

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

Giáo trình được thiết kế phục vụ phương pháp giảng dạy kết hợp giữa thuyết giảng lý thuyết kiến trúc và thực hành viết mã trực tiếp (Hands-on Coding).

Phương pháp sư phạm

Tài liệu áp dụng quy trình diễn dịch có kiểm chứng: giảng viên giới thiệu khái niệm mạng trừu tượng (như Port, DNS, Client/Server), sau đó minh họa trực quan bằng các tương tác thực tế giữa Web Browser và Web Server. Khi giảng dạy cú pháp HTML, quy trình tiếp cận đi từ định nghĩa thẻ tổng quát, phân tích các thuộc tính đi kèm, đến việc cung cấp đoạn mã mẫu (code snippet) và đối chiếu kết quả hiển thị trên các trình duyệt tiêu chuẩn (Chrome, Firefox, Safari, Opera, IE).

Bài tập và Thực hành

Tài liệu cung cấp các đoạn mã thực hành mẫu có cấu trúc hoàn chỉnh để sinh viên rèn luyện:

  • Bài tập liên kết trang: Thực hành tạo tệp Main.htm chứa liên kết tương đối đến Page1.htm, liên kết tuyệt đối đến các cổng thông tin bên ngoài, và liên kết đến các bookmark chuyên biệt (Doc1.htm#Internet, Doc1.htm#HTML).
  • Bài tập danh sách định nghĩa: Dựng danh sách tra cứu thuật ngữ chuyên ngành công nghệ thông tin bằng khối thẻ <dl>, <dt>, <dd> với các mục mẫu:
    • Pixel: Phần tử hình ảnh và độ sâu màu (Pixel depth).
    • Resolution: Độ phân giải và chất lượng hiển thị màn hình.
    • Scanner: Thiết bị phần cứng quét tài liệu.
  • Bài tập bố cục hình ảnh: Thực hành chèn ảnh từ thư mục lưu trữ riêng biệt (Image/chu thap.jpg), kết hợp thuộc tính width, height, và kiểm tra các giá trị canh lề align="top", align="middle", align="bottom" so với dòng văn bản xung quanh.

Phương pháp đánh giá và Tự học

  • Đánh giá kết quả học tập:
    • Kiểm tra lý thuyết: Đánh giá mức độ hiểu biết về hạ tầng web, phân tích cấu trúc URL, mô hình Client/Server và bảng mã phân loại định dạng ảnh.
    • Đánh giá thực hành: Chấm điểm sản phẩm mã nguồn HTML dựa trên tính hợp lệ của cú pháp (đóng/mở thẻ đúng quy cách, khai báo thuộc tính chuẩn, tổ chức đường dẫn tệp chính xác).
  • Hướng dẫn tự học:
    • Sử dụng các trình soạn thảo văn bản thuần túy để tự tay viết mã thay vì sử dụng công cụ kéo thả, nhằm ghi nhớ chính xác tên thẻ và thuộc tính.
    • Tuân thủ quy tắc tổ chức tệp: luôn tạo thư mục con (ví dụ Image/) để chứa tài nguyên đồ họa và sử dụng URL tương đối để dễ dàng đóng gói, di chuyển dự án.

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

  1. Phân tích kỹ thuật sâu về định dạng đồ họa Web: Khác với các tài liệu chỉ hướng dẫn chèn ảnh đơn thuần, giáo trình phân tích bản chất kỹ thuật của ba định dạng ảnh phổ biến trên Internet:

    • GIF: Giới hạn 256 màu, hỗ trợ ảnh không phụ thuộc nền (trong suốt), tối ưu cho các đường truyền modem tốc độ thấp.
    • JPEG: Hỗ trợ hơn 16 triệu màu thực (true color), sử dụng thuật toán nén mất thông tin (lossy compression) giúp giảm dung lượng tệp nhưng vẫn duy trì độ rõ nét khi giải mã hiển thị.
    • PNG: Sử dụng thuật toán nén không mất dữ liệu (lossless compression), bảo toàn nguyên vẹn chất lượng gốc.

  2. Quy chuẩn hóa cấu trúc URL và Cổng giao thức: Tài liệu đưa ra mô hình bóc tách chi tiết địa chỉ URL đầy đủ 7 thành phần, đồng thời liên kết trực tiếp cấu trúc mạng với các cổng dịch vụ tiêu chuẩn:

    • Cổng 80: Dịch vụ máy chủ Web (HTTP).
    • Cổng 21: Dịch vụ truyền tệp (FTP).
    • Cổng 25: Dịch vụ thư điện tử (SMTP). Việc này giúp người học hiểu rõ cơ chế định tuyến dịch vụ trên cùng một địa chỉ IP vật lý của máy chủ.

  3. Nguyên tắc thiết kế và quản trị liên kết: Giáo trình đúc kết các quy chuẩn thực hành thiết kế liên kết web mang tính sư phạm cao:

    • Luôn tạo chú thích rõ ràng cho liên kết để định hướng người đọc.
    • Sử dụng màu sắc đồng nhất cho toàn bộ hệ thống siêu liên kết trên website.
    • Tạo biểu tượng chỉ dẫn khi liên kết trỏ tới các tệp định dạng phi HTML (như .doc, .pdf, .ppt).
    • Tuyệt đối không tạo liên kết trỏ đến các trang đang trong quá trình xây dựng (tránh liên kết gãy/dead link).

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

  • Sinh viên đại học và cao đẳng:

    • Sinh viên năm thứ nhất hoặc năm thứ hai chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm, Hệ thống Thông tin, Khoa học Máy tính học môn Thiết kế Web Cơ bản, Lập trình Web hoặc Nhập môn Công nghệ Web.
    • Sinh viên các ngành Kinh tế số, Thương mại Điện tử, Truyền thông Đa phương tiện cần nắm bắt cấu trúc kỹ thuật của trang web và ngôn ngữ HTML để quản trị hệ thống số.

  • Điều kiện tiên quyết (Prerequisites):

    • Kỹ năng tin học văn phòng căn bản, hiểu biết về hệ điều hành máy tính và cấu trúc cây thư mục (tệp tin, đường dẫn thư mục).
    • Sử dụng thành thạo các trình duyệt web phổ biến để duyệt tài nguyên Internet.
    • Không yêu cầu kiến thức lập trình chuyên sâu trước đó, vì giáo trình xây dựng lại từ đầu các khái niệm mạng và cú pháp mã hóa.

  • Giảng viên và Cán bộ đào tạo:

    • Dùng làm đề cương chi tiết để biên soạn bài giảng lý thuyết trình chiếu và hệ thống bài tập thực hành phòng máy.
    • Sử dụng các bảng phân loại thẻ, danh mục thuộc tính và ví dụ mẫu làm chuẩn đánh giá kỹ năng thực hành của sinh viên.

  • Người tự học và Nghiên cứu độc lập:

    • Tài liệu tra cứu cú pháp chuẩn cho các nhà phát triển phần mềm mới tiếp cận lĩnh vực web front-end cần hệ thống hóa kiến thức nền tảng một cách bài bản.

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

1. Giáo trình này phù hợp với đối tượng người học nào?

Giáo trình được biên soạn chuyên biệt cho sinh viên bậc đại học/cao đẳng ngành Công nghệ Thông tin bắt đầu học thiết kế web, cũng như những người tự học muốn nắm vững nền tảng bản chất của mạng Internet và cú pháp ngôn ngữ HTML thô.

2. Cần chuẩn bị kiến thức nền nào trước khi tiếp cận giáo trình?

Người học chỉ cần kỹ năng sử dụng máy tính cơ bản và hiểu biết về quản lý tệp tin/thư mục. Toàn bộ kiến thức liên quan đến giao thức mạng (TCP, HTTP), phân giải DNS, cổng dịch vụ (Port), cấu trúc URL và cú pháp HTML đều được giải thích tường minh từ mức cơ bản trong tài liệu.

3. Điểm khác biệt căn bản giữa trang web tĩnh và trang web động trong tài liệu là gì?

Tài liệu định nghĩa: Trang web tĩnh chứa nội dung HTML cố định, khi muốn cập nhật phải sửa trực tiếp tệp mã nguồn HTML và không có khả năng tương tác dữ liệu (dù vẫn có thể chứa ảnh động). Ngược lại, trang web động kết hợp giữa HTML và mã lệnh xử lý trực tiếp trên Web Server, gửi kết quả kết xuất về cho người dùng và có khả năng tương tác hai chiều.

4. Làm thế nào để tự học và thực hành hiệu quả các nội dung trong giáo trình?

Người học nên cài đặt một trình soạn thảo văn bản đơn giản, tự gõ lại từng khối mã mẫu (thẻ văn bản, danh sách <ul>/<ol>/<dl>, tạo liên kết <a>, chèn ảnh <img>), sau đó lưu tệp với phần mở rộng .htm hoặc .html và mở trực tiếp trên các trình duyệt khác nhau để quan sát sự khác biệt trong hiển thị và xử lý thuộc tính.

5. Cấu trúc địa chỉ URL và Cổng kết nối được quy định cụ thể ra sao trong tài liệu?

Địa chỉ URL được chuẩn hóa gồm 7 thành phần rõ rệt qua ví dụ http://vn:8080/khoacntt/news.php?id=216&p=1#Phan1 (Giao thức: http, Tên miền: vn, Cổng: 8080, Thư mục: khoacntt, Tệp: news.php, Tham số: id=216&p=1, Bookmark: #Phan1). Các cổng kết nối chuẩn đi kèm bao gồm cổng 80 (Web), cổng 21 (FTP) và cổng 25 (SMTP).

Kết luận

Giáo trình Hướng Dẫn Thiết Kế Web Cơ Bản Với HTML cung cấp hệ thống kiến thức nền tảng chuẩn xác về cấu trúc mạng Internet, mô hình Client/Server và kỹ thuật biên soạn mã nguồn HTML. Lộ trình học tập đề xuất cho người học là: hoàn thiện hiểu biết về các giao thức mạng và phân rã URL $\rightarrow$ nắm vững quy cách viết thẻ và thuộc tính HTML $\rightarrow$ làm chủ kỹ thuật định dạng văn bản, danh sách, siêu liên kết $\rightarrow$ tối ưu hóa đồ họa đa phương tiện $\rightarrow$ hoàn thiện cấu trúc trang web tĩnh với Bảng, Khung và Biểu mẫu. Đây là tài liệu học thuật cơ sở hỗ trợ đắc lực cho sinh viên trước khi tiến tới các chuyên đề nâng cao về CSS, JavaScript và phát triển ứng dụng web động.