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

Giáo trình HTML và Thiết kế Website (Mã số: 3CI3) là tài liệu học tập chính thức 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, phối hợp cùng Sở Bưu chính Viễn thông Hà Nội xuất bản năm 2005. Trong chương trình đào tạo chuyên ngành Công nghệ thông tin và truyền thông, học phần này giữ vị trí môn cơ sở nhập môn về công nghệ Web, được thiết kế với thời lượng 45 tiết phân bổ cho cả lý thuyết và thực hành trên máy tính.

Mục tiêu đào tạo cốt lõi của giáo trình là trang bị cho người học hệ thống kiến thức nền tảng về ngôn ngữ đánh dấu siêu văn bản HTML (HyperText Markup Language), các nguyên lý hoạt động của hệ thống World Wide Web (WWW), và phương pháp xây dựng hoàn chỉnh một website tĩnh. Kết thúc học phần, học viên có khả năng đọc hiểu, viết mã nguồn HTML thủ công đúng chuẩn cú pháp và sử dụng thành thạo phần mềm hỗ trợ thiết kế trực quan.

Về cấu trúc và cách tiếp cận, giáo trình được tổ chức thành 8 chương theo trình tự từ khái niệm trừu tượng đến thao tác kỹ thuật cụ thể. Cách tiếp cận của tài liệu đi từ bản chất của siêu văn bản, cú pháp thẻ đánh dấu, định dạng các thành phần văn bản, bảng biểu, liên kết, đa phương tiện, khung hiển thị, đến biểu mẫu và kỹ thuật định kiểu Cascading Style Sheets (CSS).

Điểm đặc sắc của giáo trình thể hiện ở việc phân định rạch ròi giữa tệp mã nguồn (.htm/.html) và giao diện hiển thị trên trình duyệt. Tài liệu nhấn mạnh triết lý cốt lõi của HTML là ngôn ngữ định hướng nội dung và độc lập với phần cứng/phần mềm, giúp người học nắm vững bản chất kiến trúc web thay vì chỉ học các thao tác thiết kế bề mặt.

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

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

Giáo trình phân bố nội dung qua 8 chương chuyên đề với tính liên kết logic chặt chẽ:

  • Chương I: Những khái niệm cơ sở: Giới thiệu tổng quan về World Wide Web dựa trên 3 cơ chế trụ cột: URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) và HTML. Phân tích lịch sử phát triển của siêu văn bản từ ý tưởng của Ted Nelson (1965) đến dự án của Tim Berners-Lee (1989) tại CERN. Trình bày cấu trúc khung của một tài liệu chuẩn (<HTML>, <HEAD>, <TITLE>, <BODY>), các phần tử rỗng, quy tắc viết ký tự đặc biệt (&lt;, &gt;, &quot;, &nbsp;, &amp;) và cú pháp dòng chú thích (<!-- -->).
  • Chương II: Trình bày trang: Hướng dẫn các thẻ định dạng khối văn bản và tiêu đề. Chi tiết 6 cấp độ tiêu đề từ <H1> đến <H6>, thẻ đoạn văn <P> kèm thuộc tính căn lề ALIGN (LEFT, CENTER, RIGHT), thẻ ngắt dòng
    với thuộc tính CLEAR (ALL, LEFT, RIGHT), thẻ phân cách đường kẻ ngang <HR> kèm các thuộc tính WIDTH, SIZE, NOSHADE. Giới thiệu các khối định dạng đặc biệt như địa chỉ <ADDRESS>, căn giữa <CENTER>, văn bản định dạng sẵn <PRE> và khối trích dẫn <BLOCKQUOTE>.
  • Chương III: Danh sách và Bảng trong HTML: Phân loại và cú pháp các dạng danh sách: không đánh số (<UL> với TYPE=DISC|CIRCLE|SQUARE), có đánh số (<OL> với TYPE=A|a|I|i|1), danh sách định nghĩa (<DL>, <DT>, <DD>) và danh sách lồng nhau. Cấu trúc xây dựng bảng dữ liệu (<TABLE>, <TR>, <TH>, <TD>, <CAPTION>) cùng hệ thống thuộc tính kiểm soát: BORDER, CELLSPACING, CELLPADDING, BGCOLOR, WIDTH, gộp ô theo hàng/cột (ROWSPAN, COLSPAN), căn chỉnh (ALIGN, VALIGN) và thuộc tính chống ngắt dòng NOWRAP.
  • Chương IV: Đưa hình ảnh vào tài liệu HTML: Kỹ thuật chèn tệp ảnh định dạng GIF và JPEG thông qua thẻ <IMG>. Cấu hình các thuộc tính bắt buộc và tùy chọn: SRC, văn bản thay thế ALT, kích thước WIDTH và HEIGHT, căn lề ALIGN (TOP, MIDDLE, BOTTOM, LEFT, RIGHT), và tạo khoảng đệm bao quanh bằng VSPACE, HSPACE.
  • Chương V: Các mối liên kết siêu văn bản: Cấu trúc thẻ neo <A> và thuộc tính HREF. Phân biệt cơ chế liên kết ngoài (External Links) dùng URL tuyệt đối, liên kết nội bộ (Internal Links) dùng bookmark với thuộc tính NAME và dấu #, cùng kỹ thuật sử dụng hình ảnh làm mối liên kết. Xây dựng bản đồ hình ảnh (Image Map) bằng cặp thẻ <MAP> và <AREA> xác định vùng tương tác qua SHAPE (rect, circle, polygon) và COORDS. Tích hợp đa phương tiện qua liên kết trực tiếp hoặc nhúng âm thanh/video bằng thẻ <EMBED> kèm các tham số AUTOSTART, AUTOPLAY, LOOP, CONTROLLER.
  • Chương VI: Bày trí nền và khung: Thiết lập thuộc tính thân trang trong thẻ <BODY>: màu nền BGCOLOR, hình nền BACKGROUND, màu sắc trạng thái liên kết (LINK, VLINK, ALINK). Kỹ thuật phân chia màn hình hiển thị bằng khung (<FRAMESET>, <FRAME>), xử lý trình duyệt không hỗ trợ bằng <NOFRAME>, nhúng khung nội tuyến <IFRAME> và điều hướng hiển thị với thuộc tính TARGET.
  • Chương VII: Biểu mẫu Style và Cascading Style Sheet: Xây dựng biểu mẫu tương tác với thẻ <FORM> và các phần tử nhập liệu. Giới thiệu khái niệm Cascading Style Sheets (CSS), Javascript Style Sheet, thuật ngữ, cú pháp chú thích, lợi ích phân tách định dạng khỏi cấu trúc HTML và quy tắc thứ tự ưu tiên (cascading order).
  • Chương VIII: Công cụ soạn thảo trực quan Web (Microsoft FrontPage 2003): Ứng dụng mô hình soạn thảo WYSIWYG. Hướng dẫn tạo trang và website từ mẫu (template/wizard), quản lý siêu liên kết, bảng biểu, import cấu trúc trang có sẵn và cấu hình form thu thập phản hồi lưu vào tệp hoặc gửi qua email.

Progression logic của giáo trình tuân theo tiến trình sư phạm tự nhiên: từ hiểu rõ cơ chế mạng -> nắm bắt cú pháp đánh dấu cơ bản -> cấu trúc hóa nội dung phức tạp -> xử lý bố cục và đa phương tiện -> nâng cấp thẩm mỹ bằng CSS -> tối ưu hóa hiệu suất xây dựng trang web bằng phần mềm trực quan.

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

Giáo trình xây dựng ba khối kiến thức lý thuyết cơ sở:

  1. Mô hình kiến trúc tài nguyên thông tin WWW: Dựa trên cơ chế định danh URL, giao thức truyền tải HTTP và ngôn ngữ biểu diễn HTML. Tài liệu làm rõ cách giải quyết đường dẫn tương đối, đường dẫn tuyệt đối và định danh đoạn (fragment identifier).
  2. Nguyên lý hiển thị phía máy khách (Client-side Rendering): Bản chất của mã nguồn HTML là văn bản thuần ASCII, việc hiển thị phụ thuộc hoàn toàn vào cơ chế phân tích cú pháp của từng trình duyệt (như Netscape, Lynx trên UNIX hay Internet Explorer trên Windows).
  3. Mô hình cây phân cấp của phần tử HTML: Mọi tài liệu là tập hợp có cấu trúc của các phần tử đóng/mở hoặc phần tử rỗng, lồng ghép theo thứ tự nghiêm ngặt giữa phần tiêu đề (<HEAD>) và phần thân (<BODY>).

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Soạn thảo thủ công mã nguồn HTML chuẩn bằng các công cụ văn bản thuần túy (Notepad, WordPad, Borland IDE); nhúng chính xác các tệp âm thanh, video, hình ảnh và phân đoạn tọa độ cho Image Map.
  • Kỹ năng phân tích (Analytical skills): Phân tích cấu trúc trang web, tính toán chia tách bố cục lưới thông qua hệ thống bảng lồng nhau, khung frame và xác định thứ tự ưu tiên của các lớp style sheet.
  • Kỹ năng thực hành nghề nghiệp (Practical competencies): Xây dựng website tĩnh hoàn chỉnh, xuất bản trang web từ template, quản trị dự án web cục bộ và thiết lập biểu mẫu tiếp nhận dữ liệu phản hồi từ người dùng.

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

Giáo trình HTML và Thiết kế Website áp dụng phương pháp tiếp cận thực hành kết hợp phân tích cú pháp chuẩn tắc. Quy trình sư phạm được thiết kế nhằm giúp học viên không chỉ biết cách tạo ra một trang web hiển thị được, mà còn hiểu tường tận cách thức trình duyệt thông dịch từng dòng mã lệnh.

Mỗi chương đều bắt đầu bằng việc giải thích ý nghĩa ngữ nghĩa của thẻ (ví dụ: <B> là bold, <UL> là unordered list, <P> là paragraph), sau đó cung cấp cú pháp mẫu, bảng liệt kê các thuộc tính đi kèm với giá trị tùy chọn hoặc bắt buộc. Tiếp theo là các đoạn mã nguồn ví dụ hoàn chỉnh và hình ảnh minh họa kết quả kết xuất thực tế trên màn hình trình duyệt.

Hệ thống bài tập cuối mỗi chương được thiết kế đa dạng nhằm củng cố kiến thức:

  • Bài tập lý thuyết: Trả lời các câu hỏi về số lượng cấp tiêu đề, phân biệt các thuộc tính căn lề, giải thích cơ chế giải quyết URL tương đối và tuyệt đối.
  • Bài tập tình huống và thực hành mã nguồn: Yêu cầu học viên tạo trang thông tin cá nhân; cấu trúc lại dữ liệu giới thiệu thành danh sách lồng nhau nhiều cấp; xây dựng bảng tổng kết năm học phức tạp có sử dụng tiêu đề cột, gộp dòng (ROWSPAN), gộp cột (COLSPAN); chèn hình ảnh kết hợp căn lề và xử lý dòng văn bản bao quanh bằng thuộc tính CLEAR.

Giáo trình cũng đưa ra các hướng dẫn tự học cụ thể: khuyến khích người học bắt đầu bằng việc gõ trực tiếp mã nguồn trong các trình soạn thảo đơn giản để hiểu rõ cú pháp và phát hiện lỗi, trước khi chuyển sang sử dụng các công cụ sinh mã tự động như Microsoft FrontPage 2003. Việc kiểm tra, đánh giá học viên được thực hiện kết hợp giữa việc kiểm tra độ chính xác của mã nguồn HTML và tính hoàn chỉnh của sản phẩm website sau cùng.

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

Giáo trình ghi nhận và phản ánh các bước chuyển biến quan trọng của công nghệ Web tại thời điểm biên soạn năm 2005:

  • Phân tích các thế hệ HTML: Giáo trình làm rõ sự tiến hóa từ chuẩn HTML nguyên thủy định hướng lưu trữ và thể hiện thông tin sang các phiên bản HTML 2, HTML 2+, HTML 3 nhằm đáp ứng nhu cầu tích hợp đa phương tiện ngày càng phức tạp trên mạng toàn cầu.
  • Cập nhật công nghệ đa phương tiện và tương tác: Tài liệu đưa vào các kỹ thuật tiên tiến thời kỳ này như tạo bản đồ hình ảnh tương tác nhiều vùng (<MAP>, <AREA>), nhúng tệp âm thanh/video trực tiếp vào trang web qua thẻ <EMBED>, và kỹ thuật chia khung nhìn đa cửa sổ (<FRAMESET>, <IFRAME>).
  • Tích hợp chuẩn Cascading Style Sheet (CSS): Giáo trình cập nhật xu hướng chuyển dịch của thế giới web từ việc dùng các thẻ định dạng cứng sang việc sử dụng Style Sheet (bao gồm cả giới thiệu Javascript Style Sheet), giải thích cơ chế cascade và lợi ích của việc tách bạch nội dung khỏi giao diện trang.
  • Kết hợp công cụ trực quan hóa (WYSIWYG): Dành riêng một chương lớn hướng dẫn chi tiết phiên bản Microsoft FrontPage 2003, giúp người học tiếp cận phương pháp phát triển web nhanh dựa trên template, wizard và các công cụ quản trị site tự động.
  • Tính chuẩn hóa và kết nối ngành: Tài liệu tham chiếu trực tiếp các quy chuẩn kỹ thuật từ W3C Technical Reports (http://www.w3.org/TR), đảm bảo kiến thức giảng dạy tương thích với chuẩn công nghiệp toàn cầu và định hướng ứng dụng thực tế từ Sở Bưu chính Viễn thông Hà Nội.

Đố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ể trong hệ thống đào tạo và nghiên cứu:

  • Sinh viên đại học và cao đẳng: Tài liệu là giáo trình học tập trực tiếp 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, Mạng máy tính và Viễn thông trong học phần Thiết kế Web cơ bản.
  • Người học các khóa ngắn hạn: Phù hợp cho học viên các lớp đào tạo nghề, chứng chỉ tin học ứng dụng cần nắm bắt kiến thức nền tảng về HTML và phương pháp tạo lập website tĩnh cho cá nhân hoặc doanh nghiệp nhỏ.
  • Đ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ề sử dụng máy tính, thao tác quản lý tệp/thư mục và kỹ năng soạn thảo văn bản thông thường. Giáo trình không yêu cầu kiến thức lập trình nâng cao trước khi bắt đầu.
  • Giảng viên chuyên ngành: Tài liệu cung cấp đề cương giảng dạy chi tiết 45 tiết, cấu trúc bài giảng chuẩn hóa kèm hệ thống ví dụ mã nguồn và bài tập thực hành theo từng bài, thuận tiện cho việc xây dựng giáo án và đề thi đánh giá.
  • Tự học và tra cứu: Là tài liệu tham khảo cho các kỹ thuật viên, quản trị viên web muốn tra cứu nhanh bảng thuộc tính của các thẻ HTML cốt lõi, bảng mã ký tự đặc biệt hoặc cấu trúc bảng và khung hiển thị.

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 phù hợp với sinh viên ngành Công nghệ thông tin, học viên các trung tâm tin học, và bất kỳ cá nhân nào có nhu cầu học thiết kế web từ mức độ cơ bản để tự xây dựng các website tĩnh.

2. Cần chuẩn bị những kiến thức nền tảng nào trước khi học?
Người học chỉ cần kỹ năng sử dụng máy tính cơ bản (quản lý thư mục, thao tác chuột, bàn phím và sử dụng phần mềm soạn thảo văn bản). Không đòi hỏi kiến thức về các ngôn ngữ lập trình phức tạp như C++ hay Pascal.

3. Điểm khác biệt của giáo trình so với các tài liệu hướng dẫn thông thường là gì?
Giáo trình giải thích cặn kẽ bản chất cấu trúc mạng WWW và cơ chế xử lý của trình duyệt, trình bày đầy đủ bảng thuộc tính của từng thẻ theo chuẩn W3C, đồng thời kết hợp phương pháp viết mã thuần với việc sử dụng công cụ trực quan Microsoft FrontPage 2003.

4. Phương pháp tự học giáo trình này như thế nào để đạt hiệu quả cao?
Học viên nên thực hành viết trực tiếp từng đoạn mã ví dụ vào chương trình soạn thảo văn bản (Notepad), lưu tệp dưới định dạng .htm hoặc .html, mở kiểm tra trên trình duyệt để quan sát kết quả, sau đó hoàn thành toàn bộ bài tập cuối mỗi chương trước khi chuyển sang chương tiếp theo.

5. Giáo trình có đề cập đến các tài liệu và công cụ bổ trợ nào?
Giáo trình đề cập đến các tài liệu đặc tả kỹ thuật từ tổ chức W3C, hướng dẫn sử dụng các trình soạn thảo văn bản thuần (Notepad, WordPad) và công cụ thiết kế website trực quan Microsoft FrontPage 2003 cùng các bộ template, wizard tích hợp sẵn.

Kết luận

Giáo trình HTML và Thiết kế Website (Mã môn: 3CI3) của Trường Đại học Công nghệ – ĐHQGHN là tài liệu giảng dạy học thuật cung cấp toàn diện kiến thức nền tảng về ngôn ngữ đánh dấu siêu văn bản và phương pháp xây dựng giao diện web tĩnh. Giá trị cốt lõi của tài liệu nằm ở hệ thống phân loại thẻ chuẩn xác, sự cân bằng giữa lý thuyết cơ chế mạng WWW và kỹ năng thực hành xây dựng trang.

Lộ trình học tập đề xuất cho người học là tuần tự nghiên cứu 8 chương: làm chủ cú pháp thẻ cơ sở, định dạng trang, tổ chức bảng biểu, tích hợp liên kết và đa phương tiện, bố cục khung nhìn, làm quen với CSS và cuối cùng là khai thác phần mềm soạn thảo trực quan. Để mở rộng kiến thức, học viên có thể tiếp tục tham khảo các tài liệu kỹ thuật từ W3C và các tài liệu chuyên sâu về thiết kế web động.