Ngôn ngữ đánh dấu siêu văn bản (tiếng Anh HyperText Markup Language, viết tắt HTML) là một ngôn ngữ tiêu chuẩn để soạn thảo các siêu văn bản. Ngôn ngữ này dùng các thẻ dạng xâu ký tự để đánh dấu các phần trong văn bản sẽ được trình diễn như thế nào.
Một tài liệu HTML ở dạng bản gốc là văn bản thuần text, nghĩa là chỉ gồm các ký tự hiển thị được. Tuy nhiên khi tài liệu này được đọc lên bởi một phần mềm đọc và trình diễn siêu văn bản (thường được gọi đơn giản là phần mềm duyệt web hay trình duyệt web) các thẻ HTML được ẩn đi còn các phần tài liệu thì được hiển thị sinh động theo các chỉ định của các thẻ HTML.
Các thẻ HTML có định dạng gồm 2 phần: thẻ mở <tên_thẻ các_thuộc_tính> và thẻ đóng </tên_thẻ>, chúng đóng gói một phần nội dung, còn gọi là một đối tượng. Những thuộc tính cơ bản nhất của các thẻ là id – mã định danh duy nhất, class – định danh lớp, style - những đặc điểm trình diễn cho đối tượng được đóng gói. Cũng có những thẻ không có thẻ đóng, gọi là thẻ đơn, trực tiếp chỉ định một đối tượng với nội dung và thuộc tính khai báo ngay trong thẻ.
Các loại thẻ[sửa]
Theo những tài liệu chính thức, HTML có khoảng 120 thẻ, được tập hợp trong 12 phân loại. Tuy nhiên cũng có thể tập hợp chúng trong 6 nhóm là nhóm các thẻ cơ bản giúp tạo nên cấu trúc chính của siêu văn bản, nhóm các thẻ mô tả chung, nhóm các thẻ định dạng văn bản, nhóm các thẻ trình bày, nhóm các thẻ liên kết - nhúng, nhóm các thẻ tạo mẫu (form) giao tiếp người máy.
- Nhóm thẻ cấu trúc gồm các thẻ xác lập cấu trúc cơ bản của một tài liệu siêu văn bản.
- Cặp
<html>,</html>đánh dấu văn bản được soạn thảo theo HTML. Tất các các thẻ và các phần còn lại của văn bản phải nằm trong cặp thẻ này. - Cặp
<head>,</head>đánh dấu phần đầu đề của một tài liệu, thường chứa những chỉ thị chung cho toàn văn bản. - Cặp thẻ
<body>,</body>đánh dấu phần chứa toàn bộ nội dung tài liệu HTML.
- Cặp
- Nhóm các thẻ mô tả chung thường được đặt trong phần đầu đề của tài liệu (trong cặp thẻ
<head>,</head>)- Cặp
<title>,</title>đánh dấu đoạn văn bản là tiêu đề của tài liệu. Tiêu đề này sẽ được hiển thị trên thanh tiêu đề của phần mềm duyệt web. - Thẻ
<meta>là các thẻ đơn dùng khai báo những chỉ thị chung, ví dụ:<meta charset='UTF-8'>khai báo rằng văn bản này dùng ký tự unicode theo chuẩn utf-8,<meta name='Keywords' content='từ khóa 1, từ khóa 2'>thì lại khai báo các từ khóa của tài liệu, các từ khóa này giúp máy tìm kiếm trên Internet dễ dàng tìm được tài liệu, chúng có thể được viết thành dãy ngăn cách nhau bởi dấu phẩy (,) đặt trong cặp dấu ' '.
- Cặp
- Nhóm các thẻ định dạng văn bản chỉ định hình thức hiển thị các phần văn bản như font chữ, kiểu chữ (đậm, nghiêng, …), cỡ chữ, chỉ số trên, dưới, …
- Cặp thẻ
<pre>,</pre>đánh dấu phần văn bản được định dạng trước như nó được đánh máy vào văn bản bao gồm cả các ký tự trống và xuống dòng sẽ được hiển thị với font courier new. - Cặp thẻ
<mark>,</mark>đánh dấu phần văn bản được làm nổi bật với nền màu khác. - Cặp thẻ
<sup>,</sup>đánh dấu chỉ định phần văn bản hiển thị lên vị trí trên cao của dòng, như số mũ lũy thừa hay chỉ số trên. Ví dụ:x<sup>2</sup>sẽ được hiển thị qua trình duyệt web thành x2. - Cặp thẻ
<sub>,</sub>đánh dấu chỉ định phần văn bản hiển thị xuống vị trí thấp của dòng, như chỉ số dưới. Ví dụ:x<sub>1</sub>sẽ được hiển thị qua trình duyệt web thành x1. - Các cặp thẻ
<b>,</b>(hay<strong>,</strong>);<i>,</i>(hay<em>,</em>);<u>,</u>đánh dấu phần văn bản được chỉ định hiển thị đậm, nghiêng và gạch chân. - Cặp thẻ
<font>,</font>có thể được dùng để chỉ định font, cỡ và màu sắc qua các thuộc tính của thẻ này.
- Cặp thẻ
- Nhóm các thẻ trình bày chỉ định cách thức trình bày phần nội dung được đánh dấu.
- Các cặp thẻ
<hn>,</hn>với n = 1, 2, …, 6 đánh dấu các đầu mục của văn bản và chỉ định hiển thị kiểu đầu mục. Có 6 mức đầu mục, mức cao nhất ứng với n=1, mức thấp nhất ứng với n=6. Tùy theo giá trị của n mà đầu mục sẽ được hiển thị đậm hay không, cỡ chữ lớn hay nhỏ khác nhau. - Thẻ
<br>chỉ định xuống dòng. - Cặp thẻ
<p>,</p>đánh dấu một đoạn văn bản. Các đoạn văn bản được chỉ định hiển thị thành từng khối với dãn cách giữa các khối lớn hơn dãn cách giữa các dòng một chút để dễ phân biệt, nhận biết. - Cặp thẻ
<ol>,</ol>chỉ định hiển thị danh sách các dòng với số thứ tự. Nội dung mỗi dòng sẽ được đặt lần lượt trong cặp thẻ này và được bao bởi cặp<li>,</li>. - Cặp thẻ
<ul>,</ul>đánh dấu hiển thị các dòng với dấu ‘gạch’ đầu dòng, thường gọi là danh sách gạch đầu dòng. Nội dung mỗi dòng sẽ được đặt lần lượt trong cặp thẻ này và được bao bởi cặp<li>,</li>. - Cặp thẻ
<div>,</div>đánh dấu và chỉ định hiển thị phần văn bản trong một khối hình chữ nhật, với những thuộc tính xác định (nếu có khai báo) như chiều rộng (width), chiều cao (height), vị trí (position) và style bao gồm đường viền, màu nền, màu chữ, font chữ, cỡ chữ, căn lề,... Thẻ div rất hữu dụng khi muốn chia trang hiển thị thành các vùng hình chữ nhật và chỉ định trình bày các nội dung khác nhau trong các vùng này. - Cặp thẻ
<span>,</span>đánh dấu và chỉ định hiển thị nối tiếp phần văn bản dạng chuỗi theo style bao gồm đường viền, màu nền, màu chữ, font chữ, cỡ chữ, … nhưng không có căn lề. Phần văn bản đóng gói bởi span có thể nằm trong khối đóng gói bởi p hay div, nhưng điều ngược lại là không thể: phần văn bản đóng gói bởi p, div không thể nằm trong đóng gói của span. Thẻ span rất hữu dụng khi muốn chỉ định thay đổi các thuộc tính của xâu ký tự bất kỳ trong văn bản. - Tập thẻ chỉ định trình bày văn bản ở dạng bảng. Bắt đầu từ việc khai báo một bảng, khai báo từng dòng và khai báo từng ô trong mỗi dòng. Mỗi bảng có thể có các thuộc tính:
- width – chỉ định kích thước bề ngang của bảng,
- border – chỉ định đường viền của bảng và các ô trong bảng,
- cellspacing – chỉ định khoảng cách giữa các ô và với đường viền của bảng,
- cellpadding - chỉ định khoảng trống từ đường viền của mỗi ô với nội dung hiển thị bên trong.
- Các cặp thẻ
- Với mỗi dòng, mỗi ô có thể chỉ định căn lề nội dung phía trái hay phải hay chính giữa theo chiều ngang và trên, dưới, chính giữa theo chiều đứng. Với mỗi ô có thể chỉ định nối liền với các ô bên phải hay nối liền với các ô ở dòng dưới. Ngoài ra cũng có thể chỉ định thuộc tính style cho cả bảng hay từng ô.
- Cặp thẻ khai báo bảng có dạng:
<table width = 'w' border = 'b' cellspacing ='cs' cellpading = 'cp' style = '…'>, </table>; trong đó: w có thể được tính theo điểm (màn hình hay máy in) hoặc tính theo % kích thước chiều ngang của cửa sổ trình duyệt. Còn b, cs, cp được tính theo điểm. - Cặp thẻ khai báo dòng có dạng:
<tr align = 'a' valign = 'v' style = '…'>, </tr>; trong đó a có thể nhận các giá trị là left, right hay center, nếu không khai báo giá trị mặc định được lấy là left; còn v có thể nhận các giá trị top, bottom hay center, nếu không khai báo giá trị mặc định được lấy là center. - Cặp thẻ khai báo một ô trong một dòng có dạng
<td width = 'w' align = 'a' valign = 'v' colspan = 'm' rowspan = 'n' style = '…'>, </td>; trong đó m, n là số nguyên dương, m chỉ số ô được nối thông sang phía phải, n chỉ số ô được nối thông xuống các dòng phía dưới.
- Nhóm các thẻ liên kết – nhúng chỉ định các liên kết với các tài nguyên bên ngoài, hay là nhúng các tài nguyên bên ngoài vào tài liệu siêu văn bản.
- Thẻ siêu liên kết
<a href = 'đường dẫn đến một tài liệu'>xâu ký tự</a>chỉ định trình diễn dữ liệu tương tác, cụ thể là chỉ định hiển thị một xâu ký tự mà khi người đọc bấm con trỏ chuột vào xâu ký tự này thì trình duyệt web sẽ trình diễn một tài liệu khác được liên kết qua đường dẫn chỉ định. - Thẻ
<link>chỉ định quan hệ liên kết với các tài nguyên bên ngoài. Ví dụ:<link rel="stylesheet" href="/sdef/styles.css">chỉ định dùng tệp kiểu stylesheet bên ngoài là styles.css trong thư mục con là sdef trong thư mục gốc của dịch vụ web. Thẻ này thường đặt trong phần đầu đề. - Cặp thẻ
<style>,</style>đánh dấu phần chứa các chỉ định chung về định dạng hiển thị cho các thành phần nội dung. Cặp thẻ này thường đặt trong phần đầu đề. - Các cặp thẻ
<script>,</script>đánh dấu phần chứa các kịch bản có thể được thực hiện trên nền trình duyệt web hoặc chỉ định nhúng một tệp kịch bản từ một kho chứa kịch bản với đường dẫn xác định. Ví dụ:<script async type="text/javascript" src="//myapp.org/pub/myscript.js"> </script>hay<script src="//myapp.org/pub/ myscript.js"></script>. Cặp thẻ này cũng thường được đặt trong phần đầu đề. - Thẻ ảnh chỉ định hiển thị ảnh từ một địa chỉ xác định. Ảnh phải có định dạng là ảnh jpeg, png, gif hay bmp. Thẻ này có dạng:
<img src= 'đường dẫn đến một tệp dữ liệu ảnh' width = 'x' height = 'y'>; trong đó x, y phải là các số nguyên dương chỉ định kích thước hiển thị theo điểm ảnh, x là số điểm ảnh theo chiều ngang, y là số điểm ảnh theo chiều dọc. Tất nhiên tỷ lệ x:y cần phải đúng với tỷ lệ thực của bức ảnh, nếu không ảnh sẽ bị hiển thị méo mó: thấp đi hoặc cao lên. Thông thường người ta chỉ chỉ định x còn để trình duyệt tự tính ra y và hiển thị ảnh đúng tỷ lệ thực của ảnh. - Từ phiên bản 5, HTML đã hỗ trợ trực tiếp thẻ audio và video là các thẻ chỉ định trình diễn âm thanh và video.
- Thẻ audio có dạng:
<audio controls> <source src= 'đường dẫn đến tệp dữ liệu âm thanh' type='audio/kiểu'> Thông báo lỗi. </audio>; trong đó kiểu là định dạng tệp âm thanh, có thể là mp3, ogg, wav, … tùy thuộc vào hỗ trợ của trình duyệt web. Người soạn thảo có thể đưa vào nhiều dòng chỉ định đường dẫn đến các tệp âm thanh định dạng khác nhau và trình duyệt sẽ trình diễn theo dòng đầu tiên có định dạng phù hợp. Trường hợp không có dòng nào phù hợp nó sẽ hiển thị Thông báo lỗi, thường là: Trình duyệt web của bạn không hỗ trợ HTML5! - Thẻ video có dạng tương tự, chỉ khác là có thêm chỉ định kích thước hiển thị:
<video width='x' height='y' controls> <source src='đường dẫn đến tệp dữ liệu' type='video/kiểu'> Thông báo lỗi. </video>; trong đó kiểu là định dạng tệp video, có thể là mp4, ogg, webm, … tùy thuộc vào hỗ trợ của trình duyệt web.
- Thẻ audio có dạng:
- Thẻ siêu liên kết
- Các thẻ tạo form giao tiếp, về cơ bản có hình thức như sau:
- Tất cả các yếu tố tương tác của giao diện phải được đặt trong cặp thẻ form:
<form name=‘fname’ method=‘m’ action=‘đường_dẫn_đến_ứng_dụng_web’>, </form>; trong đó fname là tên của form gồm các ký tự latinh, m có thể là GET hoặc POST. <input type=‘text’ name=‘tname’ value=‘giá trị’ size=‘n’>tạo dựng yếu tố nhập liệu dạng ô trên 1 dòng để nhập văn bản. Giá trị gán cho value là giá trị mặc định. Khi ô văn bản được nhập dữ liệu, dữ liệu này sẽ được gán cho biến tname.<textarea name=‘taname’>giá trị mặc định</textarea>tạo dựng vùng nhập liệu dạng văn bản.<input type=‘checkbox’ name=‘cname’ value=‘giá trị’ >tạo dựng yếu tố nhập liệu dạng hộp đánh dấu.<input type=‘radio’ name=‘rname’ value=‘giá trị’ >tạo dựng yếu tố nhập liệu dạng nút radio.<select name=‘sname’ [multiple]> <option value= ‘giá trị’>Nội dung hiển thị</option> … <option value= ‘giá trị’>Nội dung hiển thị</option> </select>tạo dựng các hộp danh sách lựa chọn.<input type=‘submit’ name=‘cdname’ value=‘giá trị’ >tạo dựng phím lệnh như Ok, Nhập, Xóa,...<input type=‘button’ name=‘bname’ value=‘giá trị’ onClick=‘script_name’>tạo dựng các nút bấm sự kiện,...<input type=‘hidden’ name=‘hname’ value=‘giá trị’>để lưu dữ liệu ẩn.<input type=‘password’ name=‘pname’ value=‘giá trị’>tạo dựng ô nhập mật khẩu.
- Tất cả các yếu tố tương tác của giao diện phải được đặt trong cặp thẻ form:
Mô hình cấu trúc[sửa]
Từ thiết kế của HTML, các tài liệu được soạn thảo bởi HTML luôn có cấu trúc mô hình gọi là DOM - một mô hình dạng cây đối tượng. Đối tượng gốc là đối tượng html, được xác định bởi cặp thẻ <html>, </html>. Các đối tượng con của gốc là đối tượng head và body. Đối tượng head có các đối tượng con là title, meta,... Đối tượng body cũng lại có các đối tượng con của nó, mỗi đối tượng con của body lại có thể là cha của các đối tượng con khác… Mỗi đối tượng có thể được chỉ định một mã đối tượng duy nhất qua thuộc tính id, một tên gọi duy nhất qua thuộc tính name, đồng thời có thể chỉ định nó thuộc về một hay nhiều lớp đối tượng nào đó qua thuộc tính class. Các đối tượng con cũng kế thừa các thuộc tính của đối tượng cha qua quan hệ cha con. Người ta cũng phân loại các đối tượng của tài liệu HTML thành hai loại là đối tượng khối và đối tượng trong dòng để từ đó phân biệt được các thuộc tính riêng cho từng loại đối tượng này. Các đối tượng khối là các đối tượng được đánh dấu bởi p, ul, li, table, div, … chúng không thể cùng hiển thị với các đối tượng khác trên cùng một dòng. Các đối tượng trong dòng là các đối tượng có thể hiển thị trên cùng một dòng với các đối tượng trong dòng khác như những đối tượng được đánh dấu bởi a, span hay b, i, u,...
Nhờ mô hình đối tượng này mà có thể khai báo để thao tác tài liệu theo nhiều cách khác nhau: chỉ định các giá trị thuộc tính chung cho mỗi lớp đối tượng hay cho từng đối tượng theo mã đối tượng hay theo lớp. Thậm chí gán lại giá trị (nội dung) của đối tượng qua thông tin về mã đối tượng hay tên đối tượng.
Việc mô tả các thuộc tính của các lớp đối tượng hay từng đối tượng được thực hiện qua một kỹ thuật gọi là mô tả định kiểu theo tầng CSS (Cascading Style Sheets) (xt. Mô tả định kiểu theo tầng). Việc gán lại giá trị (nội dung) của đối tượng qua thông tin về mã đối tượng hay tên đối tượng có thể được cài đặt với những mô đun kịch bản được trình duyệt web hỗ trợ thực hiện. Ngôn ngữ kịch bản được dùng phổ biến, được coi là mặc định là JavaScript.
Lịch sử[sửa]
Vào những năm 60 của thế kỷ 20, IBM đã phát triển một ngôn ngữ gọi là Ngôn ngữ đánh dấu tổng quát (GML - Generalized Markup Language). Charles Goldfarb, Edward Mosher và Raymond Lorie là những tác giả trực tiếp của ngôn ngữ này. Năm 1986, trên cơ sở phát triển từ GML, Tổ chức Tiêu chuẩn quốc tế (ISO) ban hành Chuẩn ngôn ngữ đánh dấu tổng quát (SGML - Standard Generalized Markup Language).
Tháng 3/1989, Tim Berners-Lee đã đề xuất khái niệm siêu văn bản, giao thức truyền thông siêu văn bản (HTTP), triển khai thành công một ứng dụng quản lý thông tin trên Internet và trở thành cha đẻ của dịch vụ WWW. Sau đó ông trở thành giám đốc của World Wide Web Consortium (W3C). Từ đầu những năm 1990, chính W3C và Web Hypertext Application Technology Working Group (WHATWG) đã cùng nhau xây dựng HTML theo chuẩn SGML. Tuy nhiên, tận năm 1997, phiên bản chính thức đầu tiên mới được phát hành, với số hiệu 4.0. Phiên bản 5.0 được phát triển từ HTML4 với những bổ sung về mô hình DOM, những ưu điểm từ Ngôn ngữ đánh dấu siêu văn bản mở rộng (XHTML - một mở rộng của HTML với cú pháp chặt chẽ hơn) và được phát hành năm 2012.
Là tiêu chuẩn xây dựng các siêu văn bản nên HTML được dùng phổ biến, hàng ngày trên Internet trong dịch vụ WWW – bộ mặt của Internet ngày nay.
Ví dụ[sửa]
Cấu trúc trình diễn của một trang siêu văn bản thường có dạng sau:
| Phần đầu | ||
| Phần trái | Phần chính | Phần phải |
| Phần chân | ||
Dưới đây là ví dụ về mã HTML thực hiện cấu trúc trình diễn nói trên:
<html lang='vi'>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name='Keywords' content='từ khóa 1, từ khóa 2'>
<style>
body {
font-family: Verdana;
font-size: 11pt;
color: black;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!-- Nội dung của phần đầu đề đặt trong cặp thẻ div này -->
<div id='header' style='width: 100%; background: #e0f0f0;'>
<p>Phần đầu đề</p>
</div>
<!-- Ba phần thân của trang đặt trong cặp thẻ này -->
<div id='container' style='overflow: auto'>
<!-- Nội dung của “phần trái” đặt trong cặp thẻ này -->
<div id='leftsidebar' style='float: left; width: 20%'>
<p>Phần trái</p>
</div>
<!-- Nội dung của “phần chính” đặt trong cặp thẻ này -->
<div id='content' style='float: left; width: 60%; background: #e0e0e0'>
<p>Phần chính</p>
</div>
<!-- Nội dung của “phần phải” đặt trong cặp thẻ này -->
<div id='rightsidebar' style='float: right; width: 20%'>
<p>Phần phải</p>
</div>
</div>
<!-- Nội dung của phần chân đặt trong cặp thẻ div này -->
<div id="footer" style='width: 100%; background: #f0f0e0;'>
<p>Phần chân</p>
</div>
</body>
</html>Tài liệu tham khảo[sửa]
- Laura Lemay’s, Teach yourself web publising with HTML4, Professional Reference edition, Samsnet, Secon edition, 1997.
- Scott Isaacs, Inside Dynamic HTML, Microsoft Press, 1997.
- David Gulbransen, Kenrich Rawlings, Using Dynamic HTML, QUE, Special Edition,1997.
- Steve Suehring, Janet Valade, PHP, MySQL®, JavaScript® & HTML5 All-in-One, John Wiley & Sons, Inc., 2013.
