Kết nối

[HTML/HTML5] Phần 1: Giới thiệu HTML

3.514 lượt xem 
 Cập nhật lần cuối: 07/06/2017 lúc 22:18:50
Thể loại: HTML/HTML5, Thiết kế Web 

HTML viết tắt từ cụm từ Hyper Text Markup Language (nghĩa là ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang Web. HTML mô tả cấu trúc trang Web sử dụng các thẻ đánh dấu. Các phần tử HTML (HTML elements) là các khối mã trong trang HTML, được thể hiện bằng các thẻ (tag). Một số mẫu nhãn thẻ nội dung HTML phổ biến như “heading”, “paragraph”, “table”, và nhiều nữa. Các trình duyệt không hiển thị các thẻ HTML, nhưng dùng chúng để biểu diễn nội dung trang.

Một ví dụ HTML đơn giản

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang --- dammio.com</title>
</head>
<body>

<h1>Đề mục số 1</h1>
<p>Đoạn văn bản đầu tiên</p>

</body>
</html>

Giải thích ví dụ:

  • Chỉ thị <!DOCTYPE html> định nghĩa dạng tài liệu là HTML5
  • Phần tử <html> là phần tử gốc trang HTML
  • Phần tử <head> chứa thông tin meta mô tả về thông tin cấu hình tài liệu
  • Phần tử <title> mô tả tiêu đề tài liệu
  • Phần tử <body> chứa nội dung hiển thị giao diện
  • Phần tử <h1> định nghĩa đoạn văn bản tiêu đề lớn, cùng nhóm với h2, h3, h4, h5, h6
  • Phần tử <p> định nghĩa 1 đoạn văn bản

Thẻ HTML
Thẻ HTML là các phần tử bao quanh cặp ngoặc nhọn:

<tagname>nội dung ở đây …</tagname>

Thẻ HTML thường đi theo từng cặp, ví dụ như <p> và </p>, thẻ đầu tiên gọi là thẻ mở, thẻ thứ hai gọi là thẻ đóng. Thẻ đóng tương tự thẻ mở nhưng có thêm dấu / trước tên thẻ.

Liên quan:  [Web Colors] Phần 1: Tổng quan về màu sắc trong thiết kế Web

Đôi khi cũng có những thẻ tự mở và đóng, ví dụ như <br/>.

Trình duyệt Web
Mục đích của 1 trình duyệt (Chrome, IE, Firefox, Safari, Cocco, Opera, …) là đọc các nội dung 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 dùng chúng để xác định cách hiển thị tài liệu.

Cấu trúc trang HTML
Dưới đây là hình ảnh trực quan của 1 cấu trúc trang HTML.

Lưu ý: Chỉ có nội dung bên trong phần (phần màu trắng trong hình) được hiển thị trên giao diện ở trình duyệt.

Chỉ thị <!DOCTYPE>
Chỉ thị này thể hiện dạng tài liệu, giúp trình duyệt hiển thị đúng nội dung trang web. Chỉ thị này chỉ xuất hiện 1 lần, và ở ví trị đầu tiên của trang (trước tất cả thẻ HTML).

Chỉ thị <!DOCTYPE> không phân biệt hoa thường, vì vậy bạn định nghĩa theo cách sau đều hợp lệ:

<!doctype html>
<!DOCTYPE html>
<!DOCTYPE HTML>
<!DoCtYpE hTmL>

Tuy nhiên, cách định nghĩa cho chỉ thị <!DOCTYPE> cho HTML theo cách chuẩn là

<!DOCTYPE html>

Các phiên bản HTML
Từ những ngày đầu xuất hiện Web, HTML đã trải qua nhiều phiên bản khác nhau:

Phiên bản Năm
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML6 Upcoming

Kết luận: Như vậy bạn biết 1 vài kiến thức cơ bản về HTML rồi nhé, mời bạn tiếp tục theo dõi các bài sau để hiểu rõ hơn về HTML.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [HTML/HTML5] Phần 1: Giới thiệu HTML. https://www.dammio.com/2017/06/03/htmlhtml5-phan-1-gioi-thieu-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 1: Giới thiệu HTML},
    year = {2017},
    url = {https://www.dammio.com/2017/06/03/htmlhtml5-phan-1-gioi-thieu-html},
    urldate = {2025-02-08}
    }
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x