chương 1, chúng ta đã được giới thiệu về lịch sử phát triển web, mô hình hoạt động máy khách – máy chủ, và cơ chế hoạt động của mô hình này. Qua chương 2, chúng ta sẽ tìm hiểu về ngôn ngữ HTML. Tài liệu HTML chính là nội dung được hồi đáp từ máy chủ đến trình duyệt, và trình duyệt dựa vào nội dung này để hiển thị trang web cho người dùng. Nội dung: Giới thiệu về ngôn ngữ HTML Cấu trúc ngôn ngữ HTML Cú pháp ngôn ngữ HTML Các loại thẻ văn bản và danh sách Các loại đường dẫn Các loại thẻ đối tượng Các loại thẻ siêu liên kết Các loại thẻ bảng Các loại thẻ biểu mẫu 2.1 Giới thiệu về ngôn ngữ HTML HTML (HyperText Markup Language) là ngôn ngữ gồm các đoạn mã chuẩn được quy ước để thiết kế web.
HTML được trình duyệt web hiển thị dưới dạng trang web mà chúng ta thường thấy. Một tài liệu HTML là một tài liệu thuần văn bản (plain text), và nhờ vào bộ quy tắc đánh dấu văn bản (markup) được quy định bởi ngôn ngữ HTML để chỉ thị cho trình duyệt thông dịch và hiển thị tài liệu này thành trang web cho người dùng xem .2 Các phiên bản của HTML Trình duyệt có chức năng thông dịch ngôn ngữ HTML để hiển thị thành trang web. Từ khi HTML ra đời đến nay, có khá nhiều trình duyệt được phát triển bởi các tổ chức khác nhau. Điều này gây ra nhiều vấn đề về sự nhất quán trong việc thông dịch, hiển thị trang web của trình duyệt.
Và W3C giúp giải quyết vần đề này. W3C là tổ chức chính thức có nhiệm vụ đưa ra các quy tắc chuẩn trong cú pháp của ngôn ngữ HTML, nhằm đảm bảo tất cả các trình duyệt, hay phần mềm có chức năng tương tự như trình duyệt, có cách xử lý nhất quán khi thông dịch ngôn ngữ này. Nhập môn thiết kế web T r a n g | 15 HTML được tổ chức W3C phát triển chính thức từ năm 1993 đến nay, có các phiên bản lớn và chính thức như sau: HTML 1.0 là phiên bản đầu tiên của HTML. Nó tập trung hỗ trợ các thành phần hiển thị văn bản và hình ảnh.
Phiên bản này còn rất hạn chế, có nhiều thành phần có đa dạng tính năng, như định dạng (styling); cấu trúc dữ liệu dạng bảng.0 Phiên bản HTML 2.0 được phát triển từ năm 1995, với mục đích nâng cấp phiên bản 1.0 để đảm bảo tính nhất quán khi các trình duyệt khác nhau thông dịch cùng một mã nguồn HTML.2 là phiên bản kế tiếp của HTML 2.0, được phát triển từ năm 1997. Với phiên bản này, các thẻ (tag) được phát triển mạnh mẽ và phong phú hơn phiên bản trước, đặc biệt là các thẻ dùng để hiển thị, xử lý các thành phần biểu mẫu (form). Quan trọng hơn hết, HTML 3.2 hỗ trợ mạnh mẽ ngôn ngữ CSS (ngôn ngữ định dạng, trang trí trang web). Đây chính là điểm đột phá tạo nên sự phát triển mạnh mẽ cho web 2.01 được phát triển từ năm 1999.
Và như trên đã nói, với phiên bản 3.2, HTML bắt đầu hỗ trợ ngôn ngữ CSS. Tuy nhiên, việc kết hợp CSS với mã nguồn HTML gây khó khăn rất lớn cho việc bảo trì trang web, và không thể tái sử dụng mã nguồn CSS cho những trang web khác.01 phát triển tối đa tính tái sử dụng, tính dễ bảo trì mã nguồn CSS, bằng cách cho phép các mã nguồn trang web tham chiếu tới các mã nguồn CSS thông qua kỹ thuật liên kết ngoài (external style sheet). HTML5 Cùng với sự phát triển mạnh mẽ của thế hệ web 2.0, các trang web hiện nay được yêu cầu ngày càng cao, đặc biệt là yêu cầu về tính ngữ nghĩa (semantic). Với một trang web có sự rõ ràng và mang tính ngữ nghĩa (trong các thành phần nó chứa), sẽ hỗ trợ mạnh mẽ cho các trình đọc web, hoặc công nghệ trí tuệ nhân tạo (AI) thu thập nội dung, thông tin một cách nhanh chóng, hiệu quả.
Chúng ta sẽ tìm hiểu chi tiết về tính ngữ nghĩa của HTML5 ở chương 4. Nhập môn thiết kế web T r a n g | 16 2.3 Cấu trúc ngôn ngữ HTML Một tài liệu được viết bằng ngôn ngữ HTML sẽ được gọi là tài liệu HTML. Từ cấu trúc tài liệu này, chúng ta cũng sẽ có cấu trúc trang web. Dưới đây là hình mô tả cấu trúc của một tài liệu HTML.
Hình 2-1 Cấu trúc tài liệu HTML Như vậy, với một tài liệu HTML, dù là một tài liệu thuần văn bản nhưng vẫn thể hiện rõ cấu trúc gồm 2 phần: Mô tả tài liệu (head): chứa các thông tin về tài liệu và trang web gồm: tiêu đề, các từ khoá, và các khai báo liên kết khác. Phần này được gọi là siêu dữ liệu (metadata). Phần thân (body): nơi chứa các nội dung mà trang web sẽ được trình duyệt hiển thị cho người dùng xem. Về bản chất, tài liệu HTML được tổ chức thành dạng cây như hình sau.
Nhập môn thiết kế web T r a n g | 17 Hình 2-2 Tài liệu HTML biểu diễn dạng cây Từ cấu trúc trên, trình duyệt sẽ hiển thị thành trang web như sau. Hình 2-3 Giao diện trang web khi trình duyệt hiển thị Vậy là chúng ta thấy rằng, khi hiển thị thành trang web, các thẻ đánh dấu văn bản và các phần siêu dữ liệu sẽ không được hiển thị trên nội dung trang.4 Cú pháp ngôn ngữ HTML Một bộ thẻ đánh dấu được gọi là phần tử HTML (HTML element). Cú pháp đầy đủ cho một bộ thẻ đánh dấu sẽ bắt đầu với một thẻ mở (opening tag), kết thúc là một thẻ đóng (closing tag), cùng với đối tượng bên trong nó, như sau: <TagName PropertiesList>Object</TagName> Trong đó: Nhập môn thiết kế web T r a n g | 18 2.1 TagName TagName là tên của thẻ đánh dấu. Một bộ thẻ sẽ gồm thẻ mở và thẻ đóng.
Dưới đây là một số thẻ đánh dấu thông dụng: <h1>…</h1>: quy định văn bản bên trong là đề mục lớn nhất <p>…</p>: quy định văn bản bên trong là một đoạn văn <ul>…</ul>: quy định một cấu trúc văn bản dạng danh sách không thứ tự <ol>…</ol>: quy định một cấu trúc văn bản dạng danh sách có thứ tự <table>…</table>: quy định một cấu trúc dữ liệu dạng bảng Đa số các thẻ đều có 2 phần mở và đóng độc lập. Tuy nhiên, có một số thẻ không chứa nội dung gì bên trong nó, được gọi là thẻ rỗng (empty tag). Thẻ rỗng có cú pháp như sau: <TagName/> Ví dụ: <br/>: quy định ngắt dòng <hr/>: tạo một đường ngang 2.2 PropertiesList PropertiesList là danh sách các thuộc tính của thẻ. Mỗi thuộc tính sẽ gồm có tên thuộc tính và giá trị của thuộc tính.
Vị trí của thuộc tính sẽ nằm ở phần thẻ mở. Mỗi thuộc tính sẽ mô tả chi tiết thêm cho thẻ. <TagName property1=“value1” property2=“value2” …> Ví dụ: Tạo một bảng dữ liệu có độ rộng là 200px và có viền xung quanh. <table width=“100px” border=“1”> 2.3 Object Object là những thẻ khác, hoặc là văn bản được chứa bên trong.
Với những thẻ đánh dấu văn bản thì object chính là văn bản. Ví dụ: <h1>Chào mừng đến với môn TKWeb</h1>. Ngoài ra, HTML còn có rất nhiều thẻ đóng vai trò là khung chứa những thẻ khác. Ví dụ: <div><h1>Chào mừng!</h1></div>, lúc này Object chính là cả bộ thẻ <h1> (là phần được in đậm).5 Các loại thẻ văn bản và danh sách Nhóm thẻ này quy định việc hiển thị văn bản tại trình duyệt.
HTML có những nhóm thẻ sau. Nhập môn thiết kế web T r a n g | 19 2.1 Thẻ tiêu đề (heading) Các thẻ này quy định cấp độ tiêu đề của văn bản. HTML cho ta 6 cấp độ tương ứng: h1, h2, h3, h4, h5, h6. Trong đó, h1 (là heading 1) là cấp độ lớn nhất, và h6 là nhỏ nhất.
Hai hình bên dưới minh họa cho các thẻ tiêu đề này. Hình 2-4 Ví dụ mã HTMLl cho các heading 1 đến heading 6 Hình 2-5 Kết quả trình duyệt hiển thị 2.2 Thẻ đoạn văn (paragraph) Để trình duyệt hiển thị một đoạn văn trên trang web thì chúng ta sử dụng thẻ <p> với cú pháp như sau: <p>nội dung đoạn văn</p>. Nguyên tắc quan trọng khi sử dụng thẻ đoạn văn là không được lồng một thẻ đoạn văn khác bên trong nó. Ví dụ trường hợp này là sai chuẩn của W3C (từ phiên bản HTML5 trở lên), vì có hiện tượng lồng đoạn văn vào nhau: Nhập môn thiết kế web T r a n g | 20 <p>Đoạn văn lớn <p>Đoạn văn nhỏ</p> </p> Trong nhóm này, HTML có một loại thẻ giúp ngắt dòng, đó là <br/>.
Thẻ <br/> là thẻ rỗng (empty tag). Ví dụ ta có đoạn mã HTML như sau: <p>Bài thơ: Bánh Trôi Nước - Tác giả: Hồ Xuân Hương<br/>Thân em vừa trắng lại vừa tròn,<br/>Bảy nổi ba chìm với nước non,<br/>Lớn nhỏ mặc dù tay kẻ nặn,<br/>Mà em vẫn giữ tấm lòng son.<br/></p> Hình 2-6 Kết quả hiển thị khi sử dụng thẻ <br/> 2.3 Thẻ danh sách (list) Thẻ danh sách được chia thành 2 loại: danh sách có thứ tự (ordered list), và danh sách không thứ tự.1 Danh sách có thứ tự Với danh sách có thứ tự, chúng ta sử dụng thẻ <ol> như sau: <ol> <li>Danh sách thứ 1</li> <li>Danh sách thứ 2</li> <li>Danh sách thứ 3</li> <li>…</li> </ol> Với đoạn mã HTML trên, ta sẽ có kết quả hiển thị tại trình duyệt như sau: Nhập môn thiết kế web T r a n g | 21 Hình 2-7 Kết quả trình duyệt hiển thị Danh sách thứ tự có thể dùng số thứ tự (1, 2, 3,…) hoặc dùng theo dạng chữ cái (A, B, C,. Để quy định hiển thị dạng số hay chữ, chúng ta sẽ sử dụng thuộc tính type với cú pháp type = “value”. Value sẽ gồm các giá trị và có ý nghĩa như sau: Bảng 2-1 Bảng liệt kê các giá trị của thuộc tính type trong danh sách có thứ tự Value Ý nghĩa 1 Hiển thị số đếm 1, 2, 3,… (mặc định được sử dụng nếu không khai báo thuộc tính type) A Hiển thị ký tự in hoa từ A.
Z a Hiển thị ký tự in thường từ a. z I Hiển thị số la mã in hoa I, II, III, IV,… i Hiển thị số la mã in thường i, ii, iii, iv,… Ví dụ chúng ta sẽ dùng thuộc tính type = “i” để hiển thị ký tự la mã thay cho số đếm như sau: <ol type = “i”> <li>Danh sách thứ 1</li> <li>Danh sách thứ 2</li> <li>Danh sách thứ 3</li> <li>…</li> </ol> Hình 2-8 Kết quả hiển thị danh sách với loại ký tự La Mã in thường Nhập môn thiết kế web T r a n g | 22 2.