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

Giáo trình HTML và Thiết kế Web (Mã số môn học: 3CI3) là tài liệu học tập chính quy do Bộ môn Các hệ thống thông tin, Khoa Công nghệ thông tin, Trường Đại học Công nghệ – Đại học Quốc gia Hà Nội biên soạn. Môn học giữ vị trí nền tảng trong khối kiến thức công nghệ thông tin cơ sở, với thời lượng quy định là 45 tiết phân bổ cho cả lý thuyết và thực hành.

Mục tiêu học tập trọng tâm của giáo trình là trang bị cho người học hệ thống kiến thức cơ bản về ngôn ngữ đánh dấu siêu văn bản HTML (HyperText Markup Language) và các nguyên lý xây dựng website tĩnh. Sau khi hoàn thành học phần, người học có khả năng hiểu rõ cơ chế vận hành của mạng toàn cục World Wide Web (WWW), nắm vững cú pháp các thẻ lệnh (tags), tổ chức cấu trúc tài liệu siêu văn bản, làm chủ các kỹ thuật trình bày trang, định dạng văn bản, xử lý danh sách, xây dựng bảng biểu dữ liệu, nhúng tệp truyền thông đa phương tiện (hình ảnh, âm thanh, video), thiết lập liên kết nội bộ/liên kết ngoài, tạo biểu mẫu (form), phân chia khung (frameset/iframe), tiếp cận bảng kiểu dáng phân cấp (CSS) và thao tác trên công cụ soạn thảo trực quan Microsoft FrontPage 2003.

Cấu trúc giáo trình gồm 8 chương được bố cục chặt chẽ theo tiến trình từ nguyên lý lý thuyết, cú pháp mã nguồn đến ứng dụng phần mềm trực quan. Cách tiếp cận của tài liệu tập trung phân tích sâu ngữ nghĩa và chức năng kỹ thuật của từng phần tử HTML, phân định rõ giữa nội dung văn bản và cách thức hiển thị thông qua trình duyệt web.

Điểm đặc thù của giáo trình là cách tiếp cận bản chất: xem HTML là ngôn ngữ định hướng nội dung ("trong tài liệu có gì" quan trọng hơn "tài liệu có đẹp không"), độc lập với phần cứng máy tính và hỗ trợ hiển thị trên nhiều môi trường trình duyệt khác nhau từ giao diện đồ họa đến trình duyệt văn bản thuần túy.

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

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

  • Chương I: Những khái niệm cơ sở: Giới thiệu mạng World Wide Web dựa trên 3 cơ chế: cơ chế định danh tài nguyên (URL), giao thức truyền tải (HTTP) và ngôn ngữ siêu văn bản (HTML). Phân tích nguồn gốc siêu văn bản từ ý tưởng của Ted Nelson (1965) đến đề án thực thi của Tim Berners-Lee tại CERN (1989). Trình bày bản chất 4 thành phần: Đánh dấu (Markup), Ngôn ngữ (Language), Văn bản (Text), Siêu văn bản (Hyper); các quy tắc phân biệt thẻ rỗng và cặp thẻ đóng/mở (<KEYWORD>...</KEYWORD>), bảng ký tự đặc biệt (&lt;, &gt;, &quot;, &nbsp;, &amp;), dòng chú thích (<!-- ... -->) và khung cấu trúc tổng thể của tài liệu (<HTML>, <HEAD>, <TITLE>, <BODY>).
  • Chương II: Trình bày trang: Cung cấp cú pháp 6 mức tiêu đề (<H1> đến <H6>), định dạng địa chỉ tác giả (<ADDRESS>), phân đoạn văn bản (<P> kèm thuộc tính căn lề ALIGN=LEFT|CENTER|RIGHT), ngắt dòng bắt buộc (
     và thuộc tính CLEAR=ALL|LEFT|RIGHT), đường kẻ ngang (<HR> với các tham số WIDTH, SIZE, ALIGN, NOSHADE), căn giữa (<CENTER>), văn bản định dạng sẵn với phông chữ cố định (<PRE> chuẩn 40, 80, 132 ký tự/dòng), và khối trích dẫn thụt lề (<BLOCKQUOTE>).
  • Chương III: Danh sách và bảng trong HTML: Trình bày danh sách không đánh số (<UL> với TYPE=DISC|CIRCLE|SQUARE), danh sách đánh số (<OL> với TYPE=A|a|I|i|1), danh sách định nghĩa (<DL>, <DT>, <DD>) và mô hình danh sách lồng ghép đa cấp. Phần bảng biểu chi tiết hóa cấu trúc <TABLE>, <TR>, <TH>, <TD>, <CAPTION> cùng hệ thống thuộc tính: BORDER, CELLSPACING, CELLPADDING, BGCOLOR, WIDTH, ROWSPAN, COLSPAN, ALIGN, VALIGN, và NOWRAP.
  • Chương IV: Đưa hình ảnh vào tài liệu HTML: Cơ chế nhúng ảnh tĩnh chuẩn GIF, JPEG qua thẻ đơn <IMG> với thuộc tính bắt buộc SRC và các thuộc tính hỗ trợ: văn bản thay thế ALT, kích thước hiển thị WIDTH, HEIGHT, căn chỉnh vị trí ALIGN (Top, Middle, Bottom, Left, Right), khoảng cách đệm VSPACE, HSPACE.
  • Chương V: Các mối liên kết siêu văn bản: Thiết lập thẻ neo <A> qua thuộc tính HREF. Phân loại liên kết ngoài (địa chỉ URL tuyệt đối và tương đối), liên kết nội bộ qua dấu mốc định danh (<A NAME="ten_dich"> và <A HREF="#ten_dich">), sử dụng hình ảnh làm đầu mối liên kết, xây dựng bản đồ ảnh phân vùng tọa độ (<MAP>, <AREA> với SHAPE=rect|circle|polygon và tham số coords). Đồng thời, chương này hướng dẫn chèn liên kết và nhúng trực tiếp âm thanh, video qua thẻ <EMBED> với các thuộc tính AUTOSTART, AUTOPLAY, LOOP, CONTROLLER.
  • Chương VI, VII và VIII: Khảo sát bố cục nền (BACKGROUND), thiết lập màu sắc văn bản và trạng thái liên kết (LINK, VLINK, ALINK); kỹ thuật chia khung màn hình (FRAMESET, FRAME, NOFRAME, IFRAME); xây dựng thành phần thu thập dữ liệu người dùng (FORM); nguyên lý tầng kiểu dáng CSS, độ ưu tiên Cascading; và quy trình thiết kế site hoàn chỉnh bằng công cụ Microsoft FrontPage 2003.

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

  • Lý thuyết mạng và tài nguyên thông tin: Cơ chế định danh URL (tuyệt đối, tương đối, fragment identifiers #), cấu trúc giao thức HTTP và phương thức định vị dữ liệu phân tán trên mạng Internet.
  • Nguyên lý ngôn ngữ đánh dấu: Bản chất của tệp mã nguồn HTML là văn bản thuần ASCII, độc lập hệ điều hành, vận hành theo mô hình cấu trúc cây phân cấp phần tử (HTML elements) với các quy tắc đóng/mở thẻ và bao bọc khối dữ liệu.
  • Quy chuẩn hiển thị: Nguyên lý độc lập với phần cứng và phần mềm; sự phân tách giữa luồng văn bản vật lý và khả năng diễn dịch đồ họa của các bộ duyệt web (Netscape, Lynx, Internet Explorer).

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã nguồn HTML thủ công đúng chuẩn cú pháp; lồng ghép chính xác các thẻ danh sách, bảng biểu đa dòng đa cột; cấu hình đường dẫn tương đối/tuyệt đối; nhúng tệp đa phương tiện đúng tham số; sử dụng phần mềm WYSIWYG FrontPage 2003.
  • Kỹ năng phân tích (Analytical skills): Phân tích bố cục một tài liệu mẫu để chuyển đổi thành cấu trúc thẻ HTML logic; xác định mối quan hệ phân cấp giữa các tiêu đề và khối dữ liệu bảng (ROWSPAN, COLSPAN).
  • Kỹ năng thực hành ứng dụng (Practical competencies): Xây dựng hoàn chỉnh website tĩnh nhiều trang liên kết, trang chủ giới thiệu cá nhân, bảng biểu thống kê dữ liệu học tập, form ghi nhận phản hồi và bản đồ ảnh điều hướng.

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

Giáo trình áp dụng phương pháp sư phạm tiếp cận trực quan và đối chiếu thực nghiệm. Mỗi khái niệm lý thuyết đều đi kèm cấu trúc cú pháp tổng quát, giải thích ý nghĩa tham số, đoạn mã nguồn ví dụ minh họa và kết quả hiển thị tương ứng trên màn hình trình duyệt. Cách trình bày này giúp người học so sánh trực tiếp giữa đoạn mã viết ra và sản phẩm hiển thị cuối cùng.

+-------------------------------------------------------------------+
| TIẾN TRÌNH SƯ PHẠM ĐƯỢC THIẾT KẾ TRONG MỖI CHỦ ĐỀ                 |
|                                                                   |
| [Cú pháp lý thuyết]  ->  [Mã nguồn mẫu]  ->  [Minh họa hiển thị]  |
|         |                                           |             |
|         +------------> [Bài tập thực hành] <--------+             |
+-------------------------------------------------------------------+

Hệ thống bài tập thực hành được bố trí cuối mỗi chương với mức độ phức tạp tăng dần:

  • Bài tập Chương II yêu cầu xây dựng trang web cá nhân đơn giản sử dụng tiêu đề mức 2 (<H2>), phân đoạn <P> và định dạng căn lề.
  • Bài tập Chương III yêu cầu chuyển đổi văn bản cá nhân sang danh sách số thứ tự, thiết kế danh sách lồng ghép đa cấp (Top level, Second level, Fact) và lập bảng dữ liệu tổng kết năm học có cấu trúc tiêu đề phức tạp (ví dụ: Bảng thống kê học sinh Giỏi, Khá, Trung bình của các lớp 1A, 1B, 1C).
  • Bài tập Chương IV và V yêu cầu nhúng ảnh căn chỉnh văn bản, tạo liên kết hình ảnh kết hợp đường dẫn tuyệt đối và tương đối, nhúng đoạn phim video clip vào chính giữa trang web.

Phương pháp đánh giá học phần được xác định dựa trên thời lượng 45 tiết (kết hợp lý thuyết và thực hành tại phòng máy tính), kiểm tra mức độ nắm vững cú pháp thẻ lệnh, tính hợp lệ của mã nguồn và sản phẩm website tĩnh hoàn chỉnh. Về phương diện tự học, giáo trình định hướng người học có thể bắt đầu từ các trình soạn thảo thô sơ có sẵn như Notepad, DOS Edit, WordPad hay TextPad để hiểu cặn kẽ bản chất mã nguồn trước khi chuyển sang các công cụ thiết kế tự động sinh mã.

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

Giáo trình phản ánh giai đoạn chuyển biến quan trọng của công nghệ web từ mã nguồn thuần túy sang môi trường thiết kế trực quan WYSIWYG ("What You See Is What You Get"):

Khía cạnh Nội dung ghi nhận trong giáo trình
Giai đoạn chuẩn hóa Ghi nhận tiến trình phát triển của các thế hệ chuẩn HTML (HTML 2, HTML 2+, HTML 3,...) nhằm đáp ứng nhu cầu tích hợp đa phương tiện.
Công cụ hỗ trợ Giới thiệu công cụ trực quan Microsoft FrontPage 2003 (tạo site bằng Wizard, Template cá nhân, xử lý nhận thông tin phản hồi qua email/file text).
Tính tương thích hệ thống Phân tích khả năng tương thích của tài liệu HTML trên nhiều nền tảng: Netscape trên Windows, Lynx trên nền UNIX, và phần mềm chuyên dụng cho người khiếm thị.
Ứng dụng thực tế Hướng dẫn kỹ thuật tạo bản đồ tương tác Image Map (<MAP>, <AREA>), nhúng tệp âm thanh nền (.rmi), video (.mov, .mpg), và liên kết thư điện tử (mailto:).

Tài liệu thể hiện rõ góc nhìn công nghệ: mã nguồn HTML chuẩn hóa che giấu sự phức tạp của hạ tầng Internet, cho phép phân phối tài nguyên thông tin đồng nhất trên phạm vi toàn cầu.

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

Giáo trình được thiết kế phục vụ các nhóm đối tượng cụ thể trong môi trường đào tạo đại học và cao đẳng:

  • Sinh viên chuyên ngành: Sinh viên năm thứ nhất hoặc năm thứ hai thuộc ngành Công nghệ thông tin, Hệ thống thông tin, Mạng máy tính và các ngành kỹ thuật liên quan theo học học phần HTML và Thiết kế Web (Mã số: 3CI3).
  • Yêu cầu điều kiện tiên quyết (Prerequisites): Người học chỉ cần có kiến thức cơ bản về thao tác sử dụng máy tính, quản lý tệp tin và kỹ năng soạn thảo văn bản thông thường; không bắt buộc phải có kiến thức lập trình phức tạp trước khi học.
  • Giảng viên: Sử dụng tài liệu làm khung đề cương bài giảng chuẩn cho học phần 45 tiết, khai thác hệ thống ví dụ mẫu và đề mục bài tập thực hành trên lớp và phòng máy.
  • Người tự học và tham khảo: Phù hợp cho lập trình viên mới bắt đầu, kỹ thuật viên quản trị nội dung hoặc người có nhu cầu tìm hiểu cấu trúc web tĩnh để tự xây dựng website cá nhân trước khi tiếp cận các công nghệ web động nâng cao.

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

+--------------------------------------------------------------------------+
| 1. Giáo trình này phù hợp với đối tượng nào?                             |
| -> Sinh viên ngành CNTT và người học có nhu cầu nắm vững kiến thức nền   |
|    tảng về HTML và thiết kế website tĩnh.                                |
|                                                                          |
| 2. Cần chuẩn bị kiến thức nền tảng gì trước khi bắt đầu?                 |
| -> Chỉ cần kiến thức sử dụng máy tính cơ bản, quản lý tệp và soạn thảo.  |
|                                                                          |
| 3. Điểm khác biệt của giáo trình so với các tài liệu thuần lập trình?   |
| -> Tập trung sâu vào bản chất ngôn ngữ đánh dấu, cơ chế URL/HTTP của WWW,|
|    kết hợp viết mã nguồn thủ công và công cụ trực quan FrontPage 2003.   |
|                                                                          |
| 4. Làm thế nào để tự học giáo trình đạt hiệu quả tốt nhất?              |
| -> Viết mã trực tiếp trên trình soạn thảo text thô (Notepad, TextPad),  |
|    kiểm tra trên trình duyệt và hoàn thành toàn bộ bài tập cuối chương.  |
|                                                                          |
| 5. Tài liệu có cung cấp các phần bổ trợ nào không?                       |
| -> Có bảng đối chiếu ký tự đặc biệt, bảng từ viết tắt và danh mục tài   |
|    liệu tham khảo chuyên ngành.                                          |
+--------------------------------------------------------------------------+

1. Giáo trình này phù hợp với ai?

Giáo trình được biên soạn chuyên biệt cho học viên, sinh viên các khối ngành Công nghệ thông tin và những người cần trang bị kiến thức cơ bản về ngôn ngữ HTML để thiết kế các trang web tĩnh chuẩn mực.

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

Người học không đòi hỏi phải có nền tảng về thuật toán hay ngôn ngữ lập trình trước đó. Yêu cầu tiên quyết duy nhất được nêu rõ trong đề cương môn học là có kỹ năng sử dụng máy tính cơ bản.

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 cung cấp nền tảng lý thuyết chuẩn xác về lịch sử phát triển và 3 cơ chế vận hành của World Wide Web, đi sâu vào ngữ nghĩa của từng thẻ và thuộc tính cụ thể (từ bảng biểu, bản đồ ảnh đến nhúng đa phương tiện), đồng thời tích hợp hướng dẫn thực hành công cụ trực quan FrontPage 2003.

4. Làm sao để tự học hiệu quả với giáo trình?

Người học nên kết hợp đọc kỹ cú pháp thẻ, tự gõ mã nguồn mẫu vào các phần mềm soạn thảo văn bản thuần (Notepad, TextPad) rồi lưu dưới định dạng .htm hoặc .html, mở xem trên các trình duyệt web để quan sát sự khác biệt hiển thị, sau đó thực hiện đầy đủ các bài tập thực hành tổng hợp cuối mỗi chương.

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

Giáo trình tích hợp sẵn phần tóm tắt cú pháp thuộc tính ở từng chương, hệ thống bảng tra cứu ký tự đặc biệt trong HTML, Bảng các từ viết tắt chuyên ngành và Danh mục tài liệu tham khảo để người học tra cứu mở rộng.

Kết luận

Giáo trình HTML và Thiết kế Web của Bộ môn Các hệ thống thông tin – Trường Đại học Công nghệ, ĐHQGHN mang lại giá trị học thuật cốt lõi trong việc hệ thống hóa toàn diện các nguyên lý của ngôn ngữ HTML và thiết kế website tĩnh. Lộ trình học tập đề xuất bao gồm:

[Nắm vững cấu trúc WWW & Cú pháp thẻ cơ sở]
[Trình bày văn bản, Xử lý Bảng biểu & Danh sách]
[Nhúng Đa phương tiện & Thiết lập Liên kết siêu văn bản]
[Tổ chức Khung, Biểu mẫu Form & Ứng dụng FrontPage 2003]

Người học có thể khai thác tối đa nội dung giáo trình thông qua hệ thống bài tập thực hành có sẵn, bảng danh mục thuật ngữ viết tắt và các tài liệu tham khảo được đính kèm ở phần cuối văn bản.