HTML là viết tắt của Hyper Text Markup Language, một trong những ngôn ngữ cần thiết để xây dựng trang web. HTML chủ yếu sử dụng khái niệm thẻ để tạo tài liệu web. Trong tài liệu này, chúng tôi sẽ tập hợp và hệ thống hóa các thẻ cần thiết để xây dựng trang web.
Do có nhiều loại thẻ nên khó đi sâu vào từng loại một. Vì vậy, qua tài liệu này, bạn nên nắm được khái quát HTML có những thẻ nào và cấu trúc của chúng ra sao.
Khái niệm HTML
Cấu trúc của HTML
Một điểm cần biết khi sử dụng thẻ HTML là trong khi các ngôn ngữ lập trình thông thường phân biệt chữ hoa và chữ thường, các thẻ lại không phân biệt nên tương đối dễ sử dụng.
Ngoài ra, ngay cả khi mắc lỗi cũng không phát sinh lỗi nghiêm trọng, nên có thể xem đây là một ngôn ngữ có độ khó khá thấp.
Mọi thẻ đều bắt đầu bằng ký hiệu < và kết thúc bằng ký hiệu >. Dù nhập nhiều dấu cách liên tiếp thì cũng chỉ một dấu cách được áp dụng. Khuôn mẫu cơ bản của thẻ là <tên thẻ thuộc_tính="giá trị thuộc tính"> ~ </tên_thẻ>.
Trong tài liệu này, phần giải thích từng thẻ sẽ được viết bên trong khuôn dạng thẻ html theo cách trình bày này.
Các thẻ liên quan đến tài liệu
Các thẻ liên quan đến tài liệu
▣ Thiết lập lề tài liệu (topmargin, leftmargin) - <body topmargin="0" leftmargin="0"> Tạo trang không có lề</body>
▣ Thiết lập màu nền (bgcolor) - <body bgcolor="màu sắc"> Đặt màu nền thành màu được chỉ định. </body>
▣ Thiết lập ảnh nền (background) - <body background="tên_tệp.jpg"> Tệp hình ảnh và tài liệu web phải nằm trong cùng một đường dẫn. Nếu không, cần chỉ định cả đường dẫn. </body>
▣ Xuống dòng (br, p) -
<body>
Thông thường, trong tài liệu Word, <br>
nhấn phím Enter sẽ chuyển sang dòng tiếp theo, nhưng<br>
trong tài liệu HTML, bạn có thể dùng thẻ br để<br>
xuống dòng. Trong khi đó, thẻ p <p>
cho phép xuống dòng và chừa thêm một dòng trống so với xuống dòng thông thường.
</body>
Các thẻ liên quan đến văn bản
Các thẻ liên quan đến văn bản
▣ Hiển thị chữ đậm (b) - <b> Chèn thẻ b trước văn bản để hiển thị chữ đậm. </b>
▣ Điều chỉnh cỡ chữ (font size) - <font size="1~7"> Bạn có thể điều chỉnh cỡ chữ bằng cách chỉ định giá trị từ 1 đến 7. </font>
<font size="12pt"> Bạn cũng có thể chỉ định cỡ chữ theo đơn vị point. Đơn vị point cho phép thiết lập trong phạm vi rộng hơn và chi tiết hơn></font>
▣ Thay đổi phông chữ (font - face) - <font size="2" face="Gulim"> Trong phần phông chữ, bạn có thể chỉ định nhiều phông khác nhau như Gungsuh, Batang, Gulim, Dotum.</font>
▣ Thay đổi màu chữ (color) - <font size="3" color="blue"> Bạn có thể thêm thuộc tính color vào thẻ font để đổi sang màu mong muốn. Tuy nhiên, tên màu phải được nhập bằng tiếng Anh. </font>
▣ Thêm khoảng trắng (  ; ) - Khi muốn thêm khoảng trắng giữa các ký tự,   ; hãy chèn chuỗi này để thêm khoảng trắng như khi nhập dấu cách. Trong khi đó, trong html, việc nhấn phím cách chỉ được áp dụng 1 lần. (Lưu ý rằng p và ; phải được viết liền nhau. Trong tài liệu này, nếu nhập nguyên dạng thẻ thì nó sẽ không hiển thị, nên chúng tôi cố ý viết cách ra.)
Các thẻ liên quan đến hình ảnh
Các thẻ liên quan đến hình ảnh
▣ Chèn hình ảnh (src) - <img src="tên_tệp_hình_ảnh.jpg"> Nếu tài liệu web và hình ảnh nằm trong cùng một đường dẫn thì chỉ cần nhập tên tệp; nếu đường dẫn khác nhau thì phải nhập thêm cả đường dẫn.
▣ Hiển thị đường viền hình ảnh (border) - <img src="tên_tệp_hình_ảnh.jpg" border="5"> Bạn có thể chỉ định độ dày đường viền hình ảnh bằng border ở phía sau thẻ chèn hình ảnh.
▣ Căn chỉnh hình ảnh (align) - <img src="tên_tệp_hình_ảnh.jpg" align="left"> Bạn có thể căn chỉnh vị trí hình ảnh bằng cách nhập vào thuộc tính Align các giá trị left (trái), right (phải), middle (giữa), baseline (đường cơ sở), top (trên cùng), bottom (dưới cùng), texttop (đỉnh chữ), absmiddle (giữa chữ), absbottom (đáy chữ).
▣ Điều chỉnh khoảng trống quanh hình ảnh (hspace, vspace) - <img src="tên_tệp_hình_ảnh.jpg" hspace="10" vspace="10"> Bạn có thể điều chỉnh khoảng trống bằng các giá trị hspace (ngang), vpace (dọc) nhập sau tên tệp hình ảnh.
▣ Hiển thị văn bản khi di chuột lên hình ảnh (alt) - <img src="tên_tệp_hình_ảnh.jpg" alt="văn bản"> Nếu muốn hiển thị văn bản khi đưa chuột lên hình ảnh, hãy nhập văn bản mong muốn vào thuộc tính alt.
Các thẻ liên quan đến siêu liên kết
Các thẻ liên quan đến siêu liên kết
▣ Thêm siêu liên kết (a href) - <a href="địa_chỉ_liên_kết"> Nhập địa chỉ liên kết mong muốn vào thuộc tính a href như thế này để tạo siêu liên kết chuyển đến địa chỉ tương ứng khi nhấp chuột.</a>
▣ Thêm siêu liên kết vào hình ảnh - <a href="địa_chỉ_liên_kết"><img src="GK_Library.jpg"> Chèn thẻ hình ảnh sau thẻ siêu liên kết để tạo nút chuyển đến địa chỉ tương ứng khi nhấp vào hình ảnh.</a>
▣ Văn bản mô tả khi di chuột lên hình ảnh (title) - <a href="địa_chỉ_liên_kết" title="văn bản mô tả"><img src="GK_Library.jpg"> Bạn có thể thêm mô tả cho nút bằng thuộc tính title trong phần thuộc tính của thẻ siêu liên kết.</a>
▣ Mở trong cửa sổ mới (target-_blank) - <a href="địa_chỉ_liên_kết" target="_blank"><img src="GK_Library.jpg"> Nhập _blank vào thuộc tính target để tạo nút mở trang trong cửa sổ mới</a>
▣ Thiết lập màu siêu liên kết (link, vlink, alink) - <body link="blue" vlink="red" alink="green"> Bạn có thể chỉ định màu liên kết bằng cách thêm link (màu siêu liên kết), vlink (màu liên kết đã mở), alink (màu liên kết đang mở) vào thẻ body.</body>
▣ Di chuyển đến một vị trí cụ thể trong trang hiện tại (#, name) - Thẻ này hữu ích khi xây dựng trang web dạng cuộn trên một trang duy nhất.
<a href="#a"> Di chuyển đến vị trí A</a>
<a name="a"> A </a>
Các thẻ liên quan đến bảng
Ví dụ về thẻ bảng HTML
▣ <table> - Thẻ cơ bản để bắt đầu một bảng.
▣ <thead> - Thẻ nhóm phần đầu của bảng, được sử dụng tùy chọn.
▣ <tbody> - Thẻ nhóm phần nội dung của bảng, thường được dùng cùng với <thead> hoặc <tfoot>.
▣ <tfoot> - Thẻ nhóm phần chân của bảng, được sử dụng tùy chọn.
▣ <tr> - Thẻ định nghĩa hàng trong bảng.
▣ <th> - Thẻ định nghĩa ô tiêu đề trong bảng; nội dung của ô này mặc định được hiển thị bằng chữ đậm.
▣ <td> - Thẻ định nghĩa ô dữ liệu trong bảng.
▣ <caption> - Thẻ cung cấp tiêu đề hoặc mô tả cho bảng, phải nằm ngay sau thẻ <table>.
Khi áp dụng đoạn mã ví dụ, một bảng có dạng gần như dưới đây sẽ xuất hiện.
Bảng ví dụ của GK Library
| Tên | Tuổi |
| Tào Tháo | 66 |
| Lưu Bị | 63 |
Trên đây là phần tổng hợp các thẻ HTML dùng để xây dựng trang web. Chỉ cần nắm vững các thẻ liên quan đến tài liệu, văn bản, hình ảnh, siêu liên kết và bảng, bạn sẽ không gặp nhiều khó khăn khi trình bày một trang web cơ bản.
Tất nhiên, trong lĩnh vực IT, HTML là kiến thức nền tảng nhất, nhưng với người mới bắt đầu lập trình hoặc làm công việc liên quan đến web, học HTML trước sẽ giúp xây dựng nền tảng vững chắc.
