Học HTML, Tất Cả Bài Viết, Tự Học Online

HTML Là Gì? Giới thiệu về HTML – Học HTML Online


HTML là gì? Vì sao HTML lại quan trọng với webmaster? Lập trình website bằng HTML như thế nào? Đây cũng là bài mở đầu để bạn biết rõ HTML là gì, hiểu được vì sao nó lại quan trọng dù bạn là người làm website chuyên nghiệp hay nghiệp dư đều phải biết qua nó. Thậm chí khi bạn sử dụng một ngôn ngữ cao cấp hơn như PHP vẫn phải dùng đến HTML. Hãy cùng nhau tìm hiểu về HTML nhé ^^.

HTML là gì ?

Chúng ta đã nghe nói nhiều về lập trình web với HTML. Vậy, HTML là gì ? HTML là ngôn ngữ đánh dấu cho việc mô tả các tài liệu web (trang web).

  • HTML là viết tắt của Hyper Text Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản)
  • Ngôn ngữ đánh dấu là một tập hợp các thẻ đánh dấu
  • Các tài liệu HTML được mô tả bằng các thẻ HTML
  • Mỗi thẻ HTML mô tả những nội dung khác nhau

Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng.

Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in đậm</strong>). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).

Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html hoặc .htm

Nếu bạn thấy hơi khó hiểu, đừng lo lắng. Bạn sẽ rõ ràng hơn khi xem ví dụ về HTML dưới đây.

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang - HoanTN.Com</title>
</head>
 
<body>
<h1>Đây là đề mục lớn</h1>
<p>Đây là một đoạn văn bản.</p>
<img src="https://hoantn.com/icon.png">
</body>
 
</html>

Giải thích về ví dụ

  • Khai báo DOCTYPE để định nghĩa kiểu tài liệu HTML
  • Nội dung giữa thẻ <html> và </html> để miêu tả về trang HTML
  • Nội dung giữa thẻ <head> và </head> là tập hợp thông tin chung về trang web
  • Nội dung giữa thẻ <title> và </title> là tiêu đề của trang web
  • Nội dung giữa thẻ <body> và </body> là phần sẽ được hiển thị trên trang web
  • Nội dung giữa thẻ <h1> và </h1> là đề mục lớn của trang
  • Nội dung giữa thẻ <p> và </p> là một đoạn văn bản trong trang
  • Nội dung thẻ <img> để hiển thị một hình ảnh theo URL.

Khi chạy ví dụ này, bạn sẽ thấy trình duyệt hiển thị đề mục lớn và đoạn văn bản trong trang web.

HTML là một tập tin siêu văn bản nên bạn có thể dùng các chương trình soạn thảo văn bản không có chức năng định dạng văn bản để tạo ra một tập tin HTML. Trong Windows, bạn có thể dùng Notepad để tạo ra một tập tin HTML, còn trên Mac thì có thể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn phải lưu tập tin thành đuôi .html và sử dụng trình duyệt website để đọc nó.

Thẻ trong HTML

Như mình đã nói ở trên, HTML sẽ được khai báo bằng các phần tử bởi các từ khóa. Nội dung nằm bên trong cặp từ khóa sẽ là nội dung bạn cần định dạng với HTML. Ví dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản.

Thẻ HTML là các từ khóa (tên thẻ) được bao quanh bởi dấu ngoặc nhọn:

<b>nội dung</b>

  • Thẻ HTML thông thường đi theo cặp, ví dụ như <p> và </p>
  • Thẻ đầu tiên trong cặp thẻ gọi là thẻ mở, thẻ thứ hai gọi là thẻ đóng
  • Thẻ đóng được viết như thẻ mở nhưng thêm dấu gạch chéo ở trước tên thẻ

Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính-

01<form action="https://hoantn.com"> </form>

Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé.

Trình duyệt Web

Mục đích của một trình duyệt web (như Chrome, IE, Firefox, Safari, Cốc Cốc) là đọc tài liệu HTML và hiển thị chúng.

Trình duyệt không hiển thị các thẻ HTML nhưng sử dụng chúng để xác định cách hiển thị nội dung ( bạn có thể vào một trang web bất kỳ nhấp chuột phải chọn Xem Nguồn Trang để biết rõ hơn):

Cấu trúc của trang HTML

Bạn có thể hình dung cấu trúc của một trang HTML như minh họa dưới đây:

Chỉ nội dung trong thẻ <body></body> (màu trắng) được hiển thị trên trình duyệt.

Khai báo <!DOCTYPE>

Khai báo <!DOCTYPE> giúp trình duyệt hiển thị đúng nội dung của trang web.

Có nhiều kiểu tài liệu khác nhau trên web.

Để hiển thị tài liệu một cách chính xác, trình duyệt cần phải biết cả kiểu và phiên bản của tài liệu.

Khai báo doctype không phân biệt chữ hoa chữ thường. Tất cả những kiểu khai bao dưới đây đề được chấp nhận:

<!DOCTYPE html>
 
<!DOCTYPE HTML>
 
<!doctype html>
 
<!Doctype Html>

Những kiểu khai báo phổ biến

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”>

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Các phiên bản HTML

Theo thời gian, HTML có rất nhiều phiên bản khác nhau:

Phiên bảnNăm
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52012

HTML đóng vai trò gì trong website?

Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.

Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Ví dụ một website như HoanTN.Com sẽ được hình thành bởi:

  • HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.
  • CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….
  • Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).
  • PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).
  • MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).

Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy.

Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.

Nhân tiện đây mình cũng nói luôn, website có hai loại chính:

  • Website tĩnh (static web) – Là một website không giao tiếp với máy chủ web để gửi nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt đọc.
  • Website động (dynamic web) – Là một website sẽ giao tiếp với một máy chủ để gửi nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và trình duyệt sẽ hiển thị nó. Để một website có thể giao tiếp với máy chủ web thì sẽ dùng một số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để thực hiện. Ví dụ như một website làm bằng WordPress là website động.

Lời kết

Ở trên mình đã giải thích khá chi tiết và cặn kẽ về HTML và vai trò của nó trên website là như thế nào. Thoạt nhìn có thể bạn sẽ tưởng các thông tin này chỉ mang tính tham khảo nhưng đó lại là các thông tin cực kỳ quan trọng, vì bạn đã làm web thì phải hiểu rõ về nó.

Nếu có bất kỳ thắc mắc nào hoặc góp ý về bài viết này hãy để lại bình luận cho tôi phía dưới nhé.Chúc các bạn thành công với HTML ^^.

Tagged ,

About HoanTN

Cố gắng hơn nữa ....
View all posts by HoanTN →

Leave a Reply

Your email address will not be published. Required fields are marked *