Giáo trình HTML cơ bản (Nhat Duy Nguyen): Hướng dẫn tự học lập trình Web

Khám phá giáo trình HTML toàn diện, từ cơ bản đến nâng cao. Học cách xây dựng cấu trúc web, định dạng nội dung và tạo trang web chuyên nghiệp.

• Tác giả: Nhat Duy Nguyen
• Chuyên ngành: Lập trình Web
• Đề tài: Giáo trình HTML cơ bản: Hướng dẫn tự học lập trình Web
• Loại tài liệu: Giáo trình
• Năm xuất bản: 2004
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Tổng quan HTML cơ bản Nền tảng lập trình Web cho người mới bắt đầu

Trong kỷ nguyên số, lập trình Web trở thành một kỹ năng thiết yếu. Để bắt đầu hành trình này, việc nắm vững HTML cơ bản là không thể thiếu. Giáo trình HTML cơ bản này sẽ cung cấp một hướng dẫn tự học lập trình Web toàn diện, giúp người đọc xây dựng những viên gạch đầu tiên cho các trang web động. Hiểu rõ HTML là gì và cách nó định hình cấu trúc HTML sẽ mở ra cánh cửa đến thế giới phát triển web, từ những trang tĩnh đơn giản đến các ứng dụng phức tạp. Việc học HTML không chỉ là nắm vững cú pháp mà còn là hiểu được nguyên lý hoạt động của Web, được quy định bởi các tiêu chuẩn chung từ W3C.

1.1. HTML là gì Hiểu rõ ngôn ngữ đánh dấu siêu văn bản

HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu tiêu chuẩn dùng để tạo ra các trang web. Tài liệu chuyên ngành từ 123doc.org định nghĩa HTML là một tệp văn bản chứa các thẻ đánh dấu nhỏ. Các thẻ này chỉ dẫn trình duyệt web cách hiển thị nội dung trên trang. Mỗi tệp HTML phải có phần mở rộng là .htm hoặc .html. Việc này giúp hệ thống nhận diện và xử lý tệp đúng cách. Để viết HTML cơ bản, người học chỉ cần một trình soạn thảo văn bản đơn giản như Notepad trên Windows, SimpleText trên Mac hoặc TextEdit trên OSX (với thiết lập văn bản thuần túy). Hiểu rõ khái niệm này là bước đầu tiên quan trọng trong giáo trình HTML cho mọi người mới bắt đầu lập trình web.

1.2. Cấu trúc tệp HTML Từ file .htm đến trang web hoàn chỉnh

Một tệp HTML không chỉ là tập hợp các thẻ, mà còn tuân thủ một cấu trúc HTML nhất định. Cấu trúc cơ bản bao gồm thẻ <html> là phần tử gốc, chứa <body> và <head>. Phần <head> chứa các thông tin meta của trang như tiêu đề (thẻ <title>), các liên kết đến tệp CSS hay JavaScript, nhưng không hiển thị trực tiếp trên trình duyệt. Ngược lại, tất cả nội dung trực quan của trang web (văn bản, hình ảnh, liên kết, bảng biểu) đều nằm trong thẻ <body>. Tài liệu nhấn mạnh rằng một tệp HTML là một tệp văn bản đơn thuần, nhưng nhờ các thẻ đánh dấu, nó có khả năng biến thành một trang web phong phú. Việc nắm vững cấu trúc HTML này là nền tảng để tổ chức nội dung một cách logic và dễ quản lý khi học lập trình web cơ bản.

1.3. Lịch sử và tiêu chuẩn HTML Vai trò của W3C trong phát triển Web

Tiêu chuẩn HTML không phải do các công ty như Netscape hay Microsoft tự đặt ra. Cơ quan chịu trách nhiệm tạo ra các quy tắc và tiêu chuẩn cho Web là W3C (World Wide Web Consortium). W3C tập hợp các thông số kỹ thuật cho các tiêu chuẩn Web, trong đó HTML, CSS và XML là những tiêu chuẩn thiết yếu nhất. Phiên bản HTML mới nhất mà tài liệu gốc đề cập là XHTML 1.0. Vai trò của W3C đảm bảo tính nhất quán và khả năng tương thích giữa các trình duyệt và thiết bị, thúc đẩy sự phát triển bền vững của World Wide Web. Việc tuân thủ các tiêu chuẩn W3C là rất quan trọng để xây dựng các trang web hiệu quả, dễ tiếp cận và tương lai.

II. Hướng dẫn thiết lập môi trường và tạo trang Web đầu tiên với HTML

Để bắt đầu hành trình tự học lập trình Web với HTML cơ bản, việc chuẩn bị một môi trường làm việc phù hợp là bước quan trọng đầu tiên. Phần này của giáo trình HTML sẽ hướng dẫn chi tiết cách thiết lập các công cụ cần thiết và từng bước tạo trang web đầu tiên của riêng bạn. Quá trình này không chỉ giúp làm quen với cú pháp HTML mà còn cung cấp kinh nghiệm thực tế về cách trình duyệt diễn giải và hiển thị mã. Việc thực hành ngay lập tức sẽ củng cố kiến thức và xây dựng sự tự tin cho người học, từ đó dễ dàng tiếp tục khám phá các phần nâng cao của HTML và phát triển Web.

2.1. Các công cụ cần thiết để tự học lập trình Web HTML

Để tự học lập trình Web HTML, các công cụ cần thiết vô cùng đơn giản. Người học chỉ cần một trình soạn thảo văn bản và một trình duyệt web. Đối với người dùng Windows, Notepad là lựa chọn cơ bản. Người dùng Mac có thể sử dụng SimpleText hoặc TextEdit. Đặc biệt, khi dùng TextEdit trên OSX, cần thay đổi cài đặt ưu tiên sang "Plain text" thay vì "Rich text" và chọn "Ignore rich text commands in HTML files". Điều này quan trọng vì nếu không, mã HTML có thể không hoạt động đúng cách. Ngoài ra, một trình duyệt web như Internet Explorer (trong tài liệu gốc), Chrome, Firefox hay Edge là bắt buộc để xem kết quả của tệp HTML đã tạo. Sự đơn giản trong công cụ là một lợi thế lớn cho người mới bắt đầu học HTML.

2.2. Bí quyết viết mã HTML cơ bản Thực hành tạo file MyPage.htm

Sau khi thiết lập công cụ, bước tiếp theo trong giáo trình HTML là viết mã HTML cơ bản để tạo trang web đầu tiên. Tài liệu hướng dẫn bắt đầu bằng cách gõ đoạn mã sau vào trình soạn thảo: <html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>. Đoạn mã này giới thiệu các thẻ cơ bản như <html>, <head>, <title>, <body> và <b>. Sau đó, lưu tệp với tên mypage.htm (hoặc mypage.html). Quan trọng là đảm bảo tệp được lưu dưới định dạng văn bản thuần túy. Việc thực hành này giúp người học làm quen với cú pháp HTML, cách các thẻ lồng vào nhau và tác động của chúng đến nội dung hiển thị. Đây là nền tảng vững chắc cho bất kỳ ai muốn học lập trình web cơ bản.

2.3. Cách hiển thị trang HTML trên trình duyệt và kiểm tra kết quả

Để xem kết quả của tệp HTML vừa tạo, người học cần mở tệp đó bằng một trình duyệt web. Tài liệu hướng dẫn các bước chi tiết: khởi động trình duyệt, chọn "Open" (hoặc "Open Page") từ menu File, duyệt đến tệp mypage.htm đã lưu, chọn nó và nhấp "Open". Sau đó, địa chỉ tệp sẽ xuất hiện trong hộp thoại, ví dụ C:\MyDocuments\mypage.htm. Nhấp OK, và trình duyệt sẽ hiển thị trang web. Quá trình này cho phép người học trực tiếp thấy được tác động của mã HTML mình đã viết, từ tiêu đề trang đến nội dung văn bản được in đậm. Việc kiểm tra và điều chỉnh liên tục giữa việc viết mã và xem kết quả là một phần quan trọng của hướng dẫn tự học lập trình web.

III. Các thẻ HTML cơ bản Khám phá cấu trúc và nội dung trang Web

Để xây dựng một trang web có ý nghĩa, việc nắm vững các thẻ HTML cơ bản là điều kiện tiên quyết. Phần này của giáo trình HTML cơ bản sẽ đi sâu vào các thẻ quan trọng nhất, giúp bạn định hình nội dung và cấu trúc HTML một cách hiệu quả. Từ việc tạo tiêu đề, đoạn văn đến việc nhúng hình ảnh, liên kết và xây dựng các bảng dữ liệu, mỗi thẻ đều có một vai trò riêng biệt trong việc hiển thị thông tin. Hiểu rõ chức năng của từng thẻ là chìa khóa để lập trình Web thành công, biến những ý tưởng thành hiện thực trên trình duyệt. Việc áp dụng linh hoạt các thẻ HTML này là nền tảng cho việc phát triển Web chuyên nghiệp.

3.1. Thẻ tiêu đề đoạn văn và định dạng văn bản trong HTML

Trong HTML cơ bản, việc định dạng văn bản là rất quan trọng để trình bày thông tin rõ ràng. Các thẻ tiêu đề từ <h1> đến <h6> được sử dụng để xác định các cấp độ tiêu đề khác nhau, với <h1> là tiêu đề quan trọng nhất. Thẻ <p> dùng để tạo các đoạn văn bản. Để định dạng văn bản, tài liệu gốc đề cập đến các thẻ như <b> (in đậm) và <i> (in nghiêng). Ngoài ra, còn có các thẻ như
để xuống dòng mà không tạo đoạn văn mới, và <hr> để tạo đường kẻ ngang phân tách nội dung. Việc sử dụng chính xác các thẻ HTML cơ bản này giúp cải thiện khả năng đọc và cấu trúc ngữ nghĩa của trang, là một phần không thể thiếu trong giáo trình HTML cho lập trình Web.

3.2. Chèn hình ảnh và tạo liên kết Hypertext hiệu quả

Hình ảnh và liên kết là hai yếu tố làm cho Web trở nên sống động và có tính tương tác. Để chèn hình ảnh vào HTML, sử dụng thẻ <img> với thuộc tính src (chỉ định đường dẫn hình ảnh) và alt (văn bản thay thế). Ví dụ: <img src="URL" alt="Alternate Text">. Đối với liên kết, thẻ <a> (anchor) là trung tâm. Thuộc tính href của thẻ <a> xác định đích đến của liên kết, có thể là một URL khác (<a href="http://www.w3schools.com">This is a link</a>), một địa chỉ email (<a href="mailto:[e-mail]">Send e-mail</a>), hoặc một vị trí cụ thể trong cùng trang (<a href="#tips">Jump to the Useful Tips Section</a>). Việc thành thạo cách sử dụng các thẻ HTML này là thiết yếu để tạo ra trang web hấp dẫn và điều hướng dễ dàng.

3.3. Xây dựng danh sách List và bảng Table dữ liệu trong HTML

HTML cơ bản cung cấp các thẻ để tổ chức thông tin dưới dạng danh sách và bảng, giúp nội dung dễ hiểu hơn. Danh sách có ba loại chính: danh sách không có thứ tự (<ul> với các mục <li>), danh sách có thứ tự (<ol> với các mục <li>), và danh sách định nghĩa (<dl> với thuật ngữ <dt> và định nghĩa <dd>). Ví dụ: <ul><li>First item</li></ul>. Để tạo bảng, sử dụng thẻ <table>. Các hàng được định nghĩa bằng <tr>, các tiêu đề cột bằng <th>, và các ô dữ liệu bằng <td>. Thuộc tính border="1" được thêm vào thẻ <table> để hiển thị đường viền. Việc sử dụng hiệu quả các thẻ HTML cho danh sách và bảng giúp trình bày dữ liệu phức tạp một cách có cấu trúc, nâng cao chất lượng của giáo trình HTML và lập trình Web.

IV. Nâng cao kỹ năng với HTML Form Thu thập dữ liệu người dùng dễ dàng

Trong quá trình phát triển Web, việc tương tác với người dùng thông qua các biểu mẫu (Form) là một yếu tố then chốt. Phần này của giáo trình HTML cơ bản sẽ hướng dẫn cách xây dựng và sử dụng HTML Form để thu thập dữ liệu người dùng một cách hiệu quả. Từ việc tạo các trường nhập liệu đơn giản đến các nút chọn phức tạp, Form là cầu nối giữa trang web và người dùng, cho phép họ gửi thông tin, phản hồi và yêu cầu. Hiểu rõ cách thức hoạt động của các yếu tố Form sẽ nâng cao khả năng lập trình Web của bạn, giúp xây dựng các ứng dụng web động và có tính tương tác cao hơn. Đây là một kỹ năng quan trọng trong tự học lập trình web.

4.1. Giới thiệu về thẻ form và các yếu tố đầu vào quan trọng

Thẻ <form> định nghĩa một khu vực trên trang web có thể chứa các yếu tố biểu mẫu (form elements), cho phép người dùng nhập thông tin. Các yếu tố này bao gồm trường văn bản, vùng văn bản, menu thả xuống, nút radio, hộp kiểm, v.v. Thẻ <input> là thẻ được sử dụng phổ biến nhất trong form, với loại đầu vào được chỉ định bằng thuộc tính type. Các loại input phổ biến nhất sẽ được giải thích sau. Một form được định nghĩa bằng thẻ <form> và tất cả các yếu tố đầu vào đều nằm trong nó. Việc hiểu rõ vai trò của thẻ <form> là bước đầu tiên để tạo form trong HTML và thu thập dữ liệu người dùng hiệu quả.

4.2. Thiết kế trường văn bản nút radio và hộp kiểm trong HTML Form

Các yếu tố đầu vào phổ biến trong HTML Form bao gồm trường văn bản, nút radio và hộp kiểm. Trường văn bản được sử dụng khi người dùng cần nhập chữ, số. Ví dụ: <input type="text" name="firstname">. Mặc định, chiều rộng của trường văn bản là 20 ký tự. Nút radio được dùng khi người dùng chỉ được chọn một trong một số lựa chọn giới hạn, ví dụ: <input type="radio" name="sex" value="male"> Male. Hộp kiểm (checkbox) được dùng khi người dùng có thể chọn một hoặc nhiều tùy chọn từ danh sách, ví dụ: <input type="checkbox" name="bike"> I have a bike. Các ví dụ này giúp người học hình dung rõ ràng cách tạo form trong HTML và các tương tác cơ bản với người dùng trong giáo trình HTML cơ bản.

4.3. Cách sử dụng thuộc tính action và nút gửi submit của Form

Khi người dùng hoàn tất việc điền thông tin vào form, họ cần có cách để gửi dữ liệu đó đến máy chủ. Nút gửi (submit button) thực hiện chức năng này. Nút submit được tạo bằng <input type="submit">. Quan trọng hơn, thuộc tính action của thẻ <form> quy định địa chỉ URL mà dữ liệu form sẽ được gửi đến khi người dùng nhấp nút gửi. Ví dụ: <form action="/submit_form.asp" method="post">. Thuộc tính method chỉ định phương thức HTTP để gửi dữ liệu (thường là post hoặc get). Việc hiểu và sử dụng đúng thuộc tính action và nút submit là rất quan trọng để hoàn thành chức năng của một HTML Form, cho phép thu thập dữ liệu người dùng và xử lý chúng trên máy chủ, một phần không thể thiếu trong lập trình Web thực tế.

V. Hiểu về HTML Frames và các thực thể đặc biệt Entities trong Web

Bên cạnh các yếu tố cấu trúc và tương tác cơ bản, giáo trình HTML cơ bản còn giới thiệu các khái niệm nâng cao hơn như HTML Frames và thực thể HTML đặc biệt. HTML Frames cho phép chia cửa sổ trình duyệt thành nhiều khung độc lập, mỗi khung hiển thị một trang web riêng. Trong khi đó, các thực thể đặc biệt giải quyết vấn đề hiển thị các ký tự dành riêng trong HTML hoặc các ký tự không có trên bàn phím. Việc nắm vững những khái niệm này mở rộng khả năng phát triển Web, giúp tạo ra các bố cục phức tạp và đảm bảo hiển thị nội dung chính xác, là bước tiến quan trọng trong hành trình tự học lập trình Web.

5.1. Sử dụng Frame để chia nhỏ cửa sổ trình duyệt tiện lợi

HTML Frames cho phép tác giả chia cửa sổ trình duyệt thành nhiều khung, mỗi khung có thể hiển thị một tài liệu HTML riêng biệt. Điều này rất tiện lợi cho các trang web muốn hiển thị nhiều nội dung cùng lúc mà không cần tải lại toàn bộ trang. Thẻ <frameset> được sử dụng để định nghĩa cách chia cửa sổ, ví dụ: <frameset cols="25%,75%">. Thẻ <frame> sau đó chỉ định tệp HTML sẽ được hiển thị trong mỗi khung, ví dụ: <frame src="page1.htm">. Mặc dù Frames đã từng phổ biến, ngày nay chúng ít được sử dụng hơn do các vấn đề về SEO, khả năng tương thích di động và sự ra đời của CSS Grid/Flexbox. Tuy nhiên, việc hiểu về HTML Frames vẫn là một phần của giáo trình HTML tổng thể.

5.2. Khái niệm và ứng dụng của các thực thể HTML đặc biệt

Các thực thể HTML đặc biệt (HTML Entities) là cách để hiển thị các ký tự mà không thể gõ trực tiếp từ bàn phím hoặc các ký tự có ý nghĩa đặc biệt trong HTML (như < hoặc >). Ví dụ, để hiển thị ký tự < mà không bị hiểu là mở thẻ, người ta sử dụng <. Tương tự, > cho > và © cho ký hiệu bản quyền ©. Các thực thể này giúp đảm bảo tính toàn vẹn của mã HTML và hiển thị đúng các ký tự đặc biệt, tránh xung đột với cú pháp của ngôn ngữ. Việc nắm vững cách sử dụng thực thể HTML là một phần nhỏ nhưng quan trọng trong HTML cơ bản, giúp người lập trình Web xử lý mọi loại nội dung.

5.3. Tối ưu hóa khả năng tương thích trình duyệt cho code HTML

Đảm bảo rằng code HTML hoạt động nhất quán trên các trình duyệt khác nhau là một thách thức đối với lập trình Web. Tài liệu gốc đề cập đến các tiêu chuẩn của W3C là yếu tố quan trọng để đạt được khả năng tương thích. Việc tuân thủ các thông số kỹ thuật do W3C đặt ra cho HTML, CSS và XML giúp các trình duyệt diễn giải mã một cách đồng nhất. Ví dụ, XHTML 1.0 được nhắc đến là một tiêu chuẩn mới nhất vào thời điểm đó. Ngoài ra, việc sử dụng các thẻ và thuộc tính đã được chuẩn hóa, tránh các thẻ độc quyền của một trình duyệt cụ thể, và kiểm tra trang web trên nhiều trình duyệt phổ biến là các biện pháp quan trọng để tối ưu hóa khả năng tương thích, đảm bảo trải nghiệm người dùng tốt nhất khi tự học lập trình Web.

VI. Tương lai của lập trình Web Từ HTML đến CSS JavaScript và hơn thế

Hành trình tự học lập trình Web với HTML cơ bản không dừng lại ở việc tạo ra các trang tĩnh. Để thực sự làm chủ phát triển Web, người học cần hiểu cách HTML kết hợp với các công nghệ khác như CSS và JavaScript, và nắm bắt các tiêu chuẩn Web mới nhất. Phần cuối của giáo trình HTML này sẽ mở ra cái nhìn về bức tranh toàn cảnh của hệ sinh thái web hiện đại, nhấn mạnh vai trò không thể thay thế của HTML làm nền tảng, đồng thời khuyến khích việc tiếp tục học hỏi các công nghệ bổ sung. Việc hiểu được sự tương tác này là chìa khóa để xây dựng các trang web không chỉ đẹp mắt mà còn mạnh mẽ và tương tác.

6.1. Kết nối HTML với CSS để tạo giao diện đẹp mắt và linh hoạt

HTML cung cấp cấu trúc cho nội dung web, nhưng CSS (Cascading Style Sheets) là ngôn ngữ chịu trách nhiệm về giao diện và phong cách. Bằng cách kết nối HTML với CSS, người lập trình Web có thể kiểm soát màu sắc, phông chữ, bố cục và hiệu ứng hình ảnh, biến một trang HTML cơ bản thành một trải nghiệm thị giác hấp dẫn. Tài liệu gốc đã đề cập đến CSS như một trong những tiêu chuẩn Web thiết yếu của W3C. Việc tách biệt cấu trúc (HTML) và kiểu dáng (CSS) không chỉ giúp code gọn gàng, dễ bảo trì mà còn cho phép linh hoạt trong việc thay đổi thiết kế mà không cần chỉnh sửa cấu trúc nội dung. Đây là bước tiến quan trọng sau khi nắm vững giáo trình HTML cơ bản.

6.2. Vai trò của HTML trong hệ sinh thái phát triển Web hiện đại

Trong hệ sinh thái phát triển Web hiện đại, HTML vẫn giữ vai trò là xương sống không thể thay thế. Mọi trang web, từ đơn giản đến phức tạp, đều bắt đầu bằng HTML để định nghĩa cấu trúc nội dung. Dù có sự xuất hiện của các framework và thư viện JavaScript phức tạp, chúng đều hoạt động trên nền t tảng HTML sẵn có hoặc tạo ra HTML động. HTML cơ bản là nền tảng cho SEO (Search Engine Optimization), khả năng tiếp cận (accessibility) và hiệu suất trang web. Nó cung cấp ngữ nghĩa cho các công cụ tìm kiếm và trình đọc màn hình. Vì vậy, việc học và hiểu sâu về HTML không chỉ là bước khởi đầu mà còn là kỹ năng cốt lõi cho bất kỳ ai muốn theo đuổi lập trình Web chuyên nghiệp.

6.3. Những tiêu chuẩn Web mới nhất và xu hướng học lập trình Web

World Wide Web không ngừng phát triển, và với nó là các tiêu chuẩn Web mới nhất. Ngoài HTML và CSS, JavaScript là một công nghệ quan trọng khác để thêm tính tương tác. Các tiêu chuẩn như HTML5, CSS3 và ECMAScript (phiên bản JavaScript) liên tục được cập nhật bởi W3C và các tổ chức khác để đáp ứng nhu cầu của các ứng dụng web hiện đại. Xu hướng học lập trình Web ngày nay bao gồm việc nắm vững bộ ba HTML, CSS, JavaScript, đồng thời khám phá các framework và thư viện phổ biến (React, Vue, Angular). Việc liên tục cập nhật kiến thức về các tiêu chuẩn Web và công nghệ mới là yếu tố then chốt để duy trì năng lực và đổi mới trong lĩnh vực phát triển Web.

Nội dung chính

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

Tài liệu học thuật Syllabus of HTML do tác giả Nhật Duy Nguyễn sưu tầm và biên soạn (dựa trên nguồn dữ liệu kỹ thuật từ W3Schools, ghi nhận lưu hành tại TP. Hồ Chí Minh ngày 27-08-2004) là giáo trình cơ sở thuộc khối kiến thức phát triển Web sơ cấp trong chương trình đào tạo ngành 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 và cao đẳng. Giáo trình đóng vai trò là học phần mở đầu bắt buộc, cung cấp các nguyên lý cơ bản về cấu trúc tài liệu số trên môi trường mạng Internet trước khi người học tiếp cận các môn học chuyên sâu về lập trình giao diện hoặc phát triển ứng dụng web máy chủ.

Mục tiêu đào tạo (Learning Outcomes) của tài liệu tập trung vào việc trang bị cho sinh viên sự hiểu biết về hạ tầng mạng World Wide Web (WWW), các tiêu chuẩn định dạng do Tổ chức World Wide Web Consortium (W3C) ban hành, và cú pháp chi tiết của ngôn ngữ HyperText Markup Language (HTML). Sau khi hoàn thành học phần, người học có khả năng tự xây dựng tài liệu siêu văn bản tĩnh hoàn chỉnh gồm cấu trúc văn bản, liên kết siêu văn bản, bảng biểu, khung điều hướng, biểu mẫu tương tác và tích hợp mã kịch bản phía máy khách.

Cấu trúc giáo trình được phân chia tuần tự từ lý thuyết mạng cơ bản, cú pháp thẻ đánh dấu đơn lẻ, đến các cấu trúc phức hợp và quy trình triển khai máy chủ. Cách tiếp cận của tài liệu bám sát mô hình thực hành đối chiếu mã nguồn trực tiếp (code-driven demonstration), kết hợp giữa định nghĩa cú pháp và hiển thị thực tế trên các trình duyệt phổ thông như Internet Explorer và Netscape Navigator.

Điểm đặc trưng của giáo trình là sự định hướng nghiêm ngặt theo các tiêu chuẩn kỹ thuật của W3C (HTML 4.01 và chuẩn bị chuyển tiếp sang XHTML 1.0). Tài liệu giải thích căn nguyên của việc tách biệt giữa cấu trúc dữ liệu và hình thức trình bày, đồng thời phân tích lý do kỹ thuật đằng sau việc loại bỏ các thẻ hiển thị trực tiếp để chuyển sang hệ thống định kiểu bằng CSS.

---

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

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

Căn cứ theo mục lục và nội dung thực văn bản, hệ thống kiến thức được phân bổ qua các nhóm chủ đề trọng tâm:

1. Tổng quan về Web và Cấu trúc cơ bản của HTML (HTML Introduce & Basic): Giới thiệu khái niệm World Wide Web, mô hình giao tiếp Web Client - Web Server thông qua giao thức HTTP (giao thức tiêu chuẩn chứa địa chỉ trang web dạng http://www.). Khái niệm tài liệu HTML là tệp văn bản thuần mang phần mở rộng .htm hoặc .html. Phân tích cấu trúc khung sườn chuẩn của tài liệu với các phần tử gốc <html>, phần đầu <head>, tiêu đề cửa sổ <title>, và phần thân hiển thị <body>. Hướng dẫn thiết lập môi trường soạn thảo phi định dạng trên Windows (Notepad) và Mac (SimpleText, TextEdit chế độ Plain Text).
2. Hệ thống thẻ cơ bản và định dạng văn bản (Basic Tags, Text Formatting, Entities): Khảo sát các thẻ khối gồm tiêu đề sáu cấp độ (<h1> đến <h6>), đoạn văn (<p>), ngắt dòng (
), đường phân cách ngang (<hr>), và thẻ chú thích nguồn (<!-- -->). Phân loại các thẻ định dạng văn bản logic (<em>, <strong>, <code>, <kbd>, <samp>, <tt>, <var>, <pre>) và thẻ vật lý (<b>, <i>, <small>, <big>, <sub>, <sup>, <ins>, <del>). Danh mục thực thể ký tự đặc biệt để tránh xung đột cú pháp (<, >, &, ",  , ©, ®).
3. Liên kết siêu văn bản và Cấu trúc URL (HTML Links & URLs): Cú pháp thẻ neo <a> với thuộc tính địa chỉ đích href, thuộc tính điều hướng hiển thị target="_blank", và cơ chế đánh dấu vị trí nội bộ bằng thuộc tính name (tạo liên kết neo #tips cho mục lục tài liệu). Phân tích cấu trúc cú pháp định vị tài nguyên URL chuẩn (scheme://host.domain:port/path/filename) và các lược đồ truy cập (http, ftp, file, mailto, news, telnet, gopher, wais).
4. Cấu trúc Khung nhìn và Bảng dữ liệu (HTML Frames & Tables): Kỹ thuật phân chia màn hình hiển thị thành nhiều tài liệu độc lập qua <frameset> (rows, cols), <frame>, <iframe>, cơ chế khóa kích thước khung noresize="noresize", và phần tử dự phòng <noframes>. Khảo sát cấu trúc bảng bằng <table>, dòng <tr>, ô dữ liệu <td>, ô tiêu đề <th>, cùng các thuộc tính border, cellpadding, cellspacing, align, và xử lý hiển thị đường viền ô trống bằng ký tự  .
5. Biểu mẫu thu thập dữ liệu (HTML Forms & Input): Cấu trúc phần tử <form> phục vụ truyền tải dữ liệu về máy chủ thông qua thuộc tính action (ví dụ: html_form_action.asp) và phương thức gửi method="get/post". Hệ thống các điều khiển nhập liệu thuộc thẻ <input> (kiểu text, password, radio, checkbox, submit, reset, hidden), vùng nhập văn bản nhiều dòng <textarea>, danh sách lựa chọn <select>, <optgroup>, <option>, và nhóm trường dữ liệu <fieldset>, <legend>.
6. Đa phương tiện, Nhúng Kịch bản và Phân loại Chuẩn tài liệu (Images, Scripts, Head, DTD): Thẻ hình ảnh <img> với thuộc tính định vị src, thuộc tính mô tả thay thế bắt buộc alt, và bản đồ ảnh nhấp chuột (<map>, <area>). Thẻ nhúng kịch bản Client-side <script type="text/javascript">, kỹ thuật ẩn mã kịch bản trong khối chú thích để bảo đảm tương thích với trình duyệt cũ, và thẻ nội dung dự phòng <noscript>. Khai báo siêu dữ liệu <meta name="description">, <meta name="keywords"> và ba định nghĩa kiểu tài liệu HTML 4.01 DTD (Strict, Transitional, Frameset).

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

• Lý thuyết cơ bản (Fundamental Theories): Mô hình mạng Client - Server trên nền WWW, nguyên lý phân giải địa chỉ tài nguyên thông qua định dạng URL chuẩn, và cơ chế diễn giải mã đánh dấu của trình duyệt web dựa trên các tệp văn bản tuần tự.
• Nguyên lý cốt lõi (Core Principles): Nguyên lý phân tách hoàn toàn giữa tầng cấu trúc nội dung (Structure) và tầng định dạng hiển thị (Presentation). Giáo trình chỉ rõ việc nhúng định dạng trực tiếp vào mã nguồn là nguyên nhân gây phức tạp cho quá trình bảo trì, từ đó xác lập nguyên tắc quản lý định dạng tập trung qua Cascading Style Sheets (CSS) với ba phương thức: Ngoại tuyến (<link>), Nội tuyến tài liệu (<style>), và Cục bộ phần tử (style="").
• Khung quy chuẩn (Essential Frameworks): Hệ thống phân loại Document Type Definition (DTD) theo tiêu chuẩn W3C HTML 4.01, gồm:
  • HTML 4.01 Strict DTD: Loại bỏ hoàn toàn các phần tử định dạng trực tiếp đã lỗi thời và không hỗ trợ cấu trúc frameset.
  • HTML 4.01 Transitional DTD: Cho phép sử dụng các phần tử định dạng cũ song song với các thẻ chuẩn mới.
  • HTML 4.01 Frameset DTD: Hỗ trợ đầy đủ các phần tử thuộc hệ thống phân chia khung nhìn màn hình.

Kỹ năng phát triển

• Kỹ năng kỹ thuật (Technical Skills): Viết mã HTML hợp chuẩn thủ công bằng trình soạn thảo văn bản thuần; thiết lập chính xác các lược đồ URL cho liên kết nội bộ, liên kết ngoại tuyến và liên kết neo; nhúng mã kịch bản JavaScript/VBScript kèm khối xử lý dự phòng <noscript>; thiết lập bảng dữ liệu đa tầng và các trường nhập liệu biểu mẫu.
• Kỹ năng phân tích (Analytical Skills): Phân tích mã nguồn tài liệu web thực tế thông qua công cụ View Source của trình duyệt; đánh giá tính hợp lệ của mã nguồn bằng công cụ kiểm định W3C Validator; xác định mức độ phù hợp giữa các kiểu DTD để lựa chọn cấu trúc tài liệu tối ưu.
• Năng lực thực hành (Practical Competencies): Khả năng xây dựng một website hoàn chỉnh liên kết nhiều trang; thiết lập cấu trúc bố cục nhiều cột; cấu hình triển khai và kiểm thử trang web trên môi trường máy chủ nội bộ thông qua Microsoft Personal Web Server (PWS) trên Windows 98 hoặc Internet Information Services (IIS) trên Windows 2000/NT.

---

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

Phương pháp tiếp cận sư phạm (Pedagogical Approach)

Giáo trình triển khai phương pháp giảng dạy dựa trên ví dụ trực quan từng bước (Step-by-step Example-driven Learning). Mỗi chủ đề ngữ pháp luôn đi kèm ba thành phần cố định:

1. Định nghĩa cú pháp chuẩn của thẻ và danh sách thuộc tính liên quan.
2. Khối mã nguồn mẫu hoàn chỉnh (Source Code Example).
3. Mô tả trực quan kết quả kết xuất giao diện tương ứng trên trình duyệt ("How it looks in a browser"), giúp người học nhanh chóng đối chiếu mối quan hệ giữa câu lệnh đánh dấu và kết quả hiển thị.

Bài tập và Tình huống thực hành (Practical Exercises & Case Studies)

Hệ thống bài tập trong tài liệu được thiết kế tập trung vào việc xử lý các tình huống kỹ thuật thực tế:

• Xử lý khoảng trắng và dòng văn bản: Bài tập Poem problems giúp phân tích cơ chế thu gọn khoảng trắng (whitespace truncation) của trình duyệt và giải pháp kết hợp thẻ <pre>,
hoặc thực thể  .
• Hệ thống điều hướng khung nhìn (Navigation Frames): Tình huống xây dựng tệp tryhtml_contents.htm chứa danh sách liên kết có chỉ định đích hiển thị target="showframe" sang tệp khung kế bên (tryhtml_frame_a.htm, tryhtml_frame_b.htm), kết hợp kỹ thuật nhảy tới thẻ neo cụ thể (link.htm#C10).
• Thiết kế biểu mẫu truyền nhận tham số: Bài tập xây dựng form nhập Username và mật khẩu gửi dữ liệu đến trang xử lý máy chủ html_form_action.asp bằng phương thức GET/POST.
• Định dạng bảng phức hợp: Kỹ thuật xử lý ô trống hiển thị mất viền, hợp nhất dòng/cột (rowspan, colspan), và lồng ghép bảng nhiều cấp phục vụ bố cục trang báo.

Phương pháp đánh giá (Assessment Methods)

Việc đánh giá kết quả học tập được xác định thông qua hai tiêu chí định lượng:

• Kiểm định tính hợp chuẩn: Tài liệu mã nguồn phải vượt qua trình kiểm tra cú pháp W3C Validator dựa trên khai báo <!DOCTYPE> tương ứng.
• Độ tương thích hiển thị: Kiểm tra khả năng kết xuất đồng nhất trên các môi trường trình duyệt web khác nhau (Internet Explorer, Netscape Navigator) và xử lý lỗi không vỡ khung khi người dùng thay đổi kích thước cửa sổ hiển thị.

Hướng dẫn tự học (Self-study Guidelines)

Giáo trình khuyến nghị người học tuân thủ nghiêm ngặt các nguyên tắc thực hành sau:

• Sử dụng trình soạn thảo văn bản thuần (Notepad, SimpleText, TextEdit ở định dạng Plain Text), không sử dụng các phần mềm soạn thảo đồ họa trực quan WYSIWYG (như FrontPage, Claris Home Page, hay Adobe PageMill) trong giai đoạn đầu nhằm ghi nhớ chính xác cấu trúc thẻ.
• Tập thói quen viết toàn bộ thẻ và thuộc tính bằng chữ thường (lowercase tags) để bảo đảm tính tương thích với chuẩn XHTML kế tiếp.
• Luôn đóng toàn bộ các thẻ phần tử (kể cả thẻ đoạn văn </p> hay danh sách </li>) và đặt tất cả giá trị thuộc tính trong dấu ngoặc kép (name="value").

---

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

Cập nhật so với các phiên bản trước

Tài liệu ghi nhận bước chuyển giao công nghệ quan trọng từ tiêu chuẩn HTML 3.2 sang chuẩn HTML 4.0/4.01:

• Phân tích sự bất cập trong giai đoạn HTML 3.2 khi đưa các thẻ định dạng bề mặt (như <font>, các thuộc tính màu sắc bgcolor, color) trực tiếp vào tài liệu, gây khó khăn cho việc quản trị các hệ thống web quy mô lớn.
• Liệt kê chi tiết danh mục các thẻ bị W3C khuyến cáo loại bỏ (Deprecated Tags) trong HTML 4.01 và hướng dẫn giải pháp thay thế bằng CSS:

Thẻ bị loại bỏ (Deprecated)	Ý nghĩa chức năng cũ	Giải pháp chuẩn thay thế
<font>, <basefont>	Định dạng phông chữ, cỡ chữ, màu sắc	Sử dụng thuộc tính CSS font-family, font-size, color
<center>	Canh giữa khối nội dung	Sử dụng thuộc tính CSS text-align: center hoặc margin
<s>, <strike>	Hiển thị chữ gạch ngang	Sử dụng thẻ ngữ nghĩa <del> hoặc CSS text-decoration
<u>	Hiển thị chữ gạch chân	Sử dụng bảng kiểu mẫu CSS
<dir>, <menu>	Danh sách thư mục / trình đơn	Sử dụng thẻ danh sách chuẩn <ul>
<isindex>	Tạo ô tìm kiếm đơn dòng	Sử dụng phần tử nhập liệu <input type="text">
<applet>	Nhúng ứng dụng Java Applet	Sử dụng phần tử nhúng đối tượng đa năng <object>
<listing>, <plaintext>, <xmp>	Khối mã nguồn tiền định dạng	Sử dụng phần tử <pre> kết hợp <code>

Tích hợp xu hướng công nghệ và Tiêu chuẩn hóa

Giáo trình chuẩn bị kiến thức nền tảng cho việc chuyển dịch sang XHTML 1.0 (Extensible HyperText Markup Language). Nội dung nhấn mạnh việc tuân thủ cấu trúc ngữ pháp hình thức nghiêm ngặt của XML: tính phân biệt chữ hoa/thường, tính đóng của tất cả các phần tử (kể cả phần tử rỗng), và yêu cầu bắt buộc phải có tài liệu định nghĩa loại tệp DTD hợp lệ ở dòng đầu tiên của tài liệu.

Ứng dụng thực tiễn và Kết nối hạ tầng công nghiệp

Tài liệu cung cấp hướng dẫn triển khai ứng dụng vào môi trường máy chủ thực tế:

• Quy trình cài đặt và cấu hình Microsoft Personal Web Server (PWS) trên nền tảng hệ điều hành Windows 98 để phục vụ kiểm thử ứng dụng web cá nhân.
• Hướng dẫn cấu hình Internet Information Services (IIS) trên Windows 2000/Windows NT để hỗ trợ thực thi công nghệ Active Server Pages (ASP) cho các ứng dụng web động.
• Hướng dẫn cách thức đưa dữ liệu lên các máy chủ công cộng thông qua hạ tầng của nhà cung cấp dịch vụ Internet (ISP).

---

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

Phân loại người học theo chương trình đào tạo

• Sinh viên đại học/cao đẳng chính quy: Sinh viên năm thứ nhất hoặc học kỳ đầu năm thứ hai thuộc các ngành Công nghệ Thông tin, Hệ thống Thông tin Quản lý, Mạng máy tính và Truyền thông dữ liệu, Kỹ thuật Phần mềm theo học các học phần Thiết kế Web, Nhập môn Lập trình Web, hoặc Công nghệ Web.
• Học viên các khóa đào tạo nghề và chứng chỉ tin học: Người học cần chuẩn hóa kiến thức nền tảng về mã nguồn trang web trước khi chuyển tiếp sang học các ngôn ngữ lập trình kịch bản phía máy chủ (PHP, ASP, JSP) hoặc lập trình cơ sở dữ liệu.

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

• Kỹ năng thao tác cơ bản với hệ điều hành máy tính (Windows hoặc Mac OS).
• Kỹ năng quản lý tệp tin và thư mục, phân biệt phần mở rộng tệp tin văn bản (.txt, .htm, .html).
• Không yêu cầu kiến thức lập trình trước đó.

Phạm vi ứng dụng cho Giảng viên và Tự học

• Đối với giảng viên: Sử dụng làm đề cương phân bổ số tiết học, cấu trúc bài giảng lý thuyết trên lớp và hệ thống bài tập thực hành mẫu trong các buổi học tại phòng máy vi tính.
• Đối với người tự học và nghiên cứu độc lập: Tài liệu đóng vai trò là sách hướng dẫn nhập môn tự thực hành từng bước, kết hợp sổ tay tra cứu nhanh danh mục thẻ (HTML Tag List) và các mã trạng thái phản hồi máy chủ (HTTP Status Messages).

---

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

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

Tài liệu được thiết kế cho người bắt đầu tiếp cận lĩnh vực phát triển web, sinh viên đại học khối ngành công nghệ thông tin trong giai đoạn cơ sở, và kỹ thuật viên cần nắm vững các chuẩn đánh dấu tài liệu web theo định dạng W3C.

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 tin học văn phòng cơ bản, kỹ năng sử dụng bàn phím, lưu tệp tin bằng trình soạn thảo Notepad hoặc SimpleText, và thao tác xem trang trên trình duyệt web; không đòi hỏi kiến thức toán học phức tạp hay kinh nghiệm viết code trước đó.

3. Điểm khác biệt cốt lõi giữa giáo trình này và các tài liệu HTML sơ cấp khác là gì?

Tài liệu không chỉ liệt kê các thẻ hiển thị đơn thuần mà phân tích bản chất cấu trúc mạng WWW (HTTP, Web Servers, Web Clients), phân định rạch ròi các tiêu chuẩn W3C DTD (Strict, Transitional, Frameset), và chỉ rõ các thẻ đã bị loại bỏ (deprecated) để hướng dẫn chuyển đổi trực tiếp sang chuẩn CSS và XHTML.

4. Phương pháp nào giúp tự học giáo trình này đạt hiệu quả cao nhất?

Người học cần tự gõ trực tiếp từng đoạn mã trong trình soạn thảo văn bản thuần (không sao chép/dán, không dùng công cụ WYSIWYG), lưu tệp đúng phần mở rộng .htm hoặc .html, tự kiểm tra kết quả trên trình duyệt và thường xuyên đối chiếu mã nguồn các trang web thực tế bằng chức năng View Source.

5. Giáo trình có cung cấp các tài liệu tra cứu kỹ thuật bổ trợ kèm theo không?

Tài liệu tích hợp phần phụ lục tra cứu hoàn chỉnh ở cuối nội dung gồm: Bảng tham chiếu nhanh tệp đơn (HTML 4.01 Quick List), Danh mục thẻ HTML sắp xếp theo thứ tự bảng chữ cái kèm ký hiệu phiên bản trình duyệt Netscape hỗ trợ (HTML Tag List), và Danh mục mã trạng thái phản hồi máy chủ (HTML HTTP Status Messages).

---

Kết luận

Giáo trình Syllabus of HTML thiết lập hệ thống tri thức cơ sở vững chắc về cấu trúc siêu văn bản, chuẩn hóa tư duy lập trình web theo các khuyến nghị kỹ thuật của W3C, và định hình nguyên tắc phát triển phần mềm hiện đại thông qua việc phân tách cấu trúc dữ liệu và định dạng thẩm mỹ.

Lộ trình học tập khuyến nghị:

1. Nắm vững cú pháp phần tử gốc, các thẻ định dạng khối và liên kết URL.
2. Xây dựng cấu trúc tài liệu tĩnh thông qua bảng (<table>), khung (<frameset>) và biểu mẫu (<form>).
3. Chuẩn hóa mã nguồn theo định nghĩa HTML 4.01 Strict DTD.
4. Mở rộng kiến thức sang các học phần chuyên sâu kế tiếp gồm bảng kiểu mẫu Cascading Style Sheets (CSS), ngôn ngữ kịch bản JavaScript, chuẩn tài liệu XHTML và phát triển ứng dụng động phía máy chủ với Active Server Pages (ASP).

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

SYLLABUS OF HTML Collected by Nhat Duy Nguyen [e-mail] Source : www.HCM, 27-08-2004 Table of Content HTML Basic.5 HTML Basic Tags.11 HTML Links12 HTML FramesHTML Tables.26 HTML Advanced HTML Layout.41 References HTML Quick List.43 HTML Tag List.49 HTML HTTP Status Messages.55 I- HTML Introduce : What is the World Wide Web?  The World Wide Web (WWW) is most often called the Web.  The Web is a network of computers all over the world.  All the computers in the Web can communicate with each other.  All the computers use a communication standard called HTTP.

How does the WWW work?  Web information is stored in documents called Web pages.  Web pages are files stored on computers called Web servers.  Computers reading the Web pages are called Web clients.  Web clients view the pages with a program called a Web browser.

 Popular browsers are Internet Explorer and Netscape Navigator. How does the browser fetch the pages?  A browser fetches a Web page from a server by a request.  A request is a standard HTTP request containing a page address.  A page address looks like this: http://www.

How does the browser display the pages?  All Web pages contain instructions for display  The browser displays the page by reading these instructions.  The most common display instructions are called HTML tags.  HTML tags look like this <p>This is a Paragraph</p>. Who is making the Web standards?  The Web standards are not made up by Netscape or Microsoft.

 The rule-making body of the Web is the W3C.  W3C stands for the World Wide Web Consortium.  W3C puts together specifications for Web standards.  The most essential Web standards are HTML, CSS and XML.

 The latest HTML standard is XHTML 1. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The markup tags tell the Web browser how to display the page  An HTML file must have an htm or html file extension  An HTML file can be created using a simple text editor Do You Want to Try It? If you are running Windows, start Notepad. If you are on a Mac start SimpleText. In OSX start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files".

This is very important because if you don¹t do this HTML codes probably won't work. Type in the following text: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Save the file as "mypage. Start your Internet browser.

Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C: \MyDocuments\mypage.

Click OK, and the browser will display the page. Example Explained The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>.

This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document.

The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font. HTM or HTML Extension? When you save an HTML file, you can use either the .htm or the.

We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions.