Làm quen với HTML

1. Các thuật ngữ

Html tag còn gọi là thẻ trong tài liệu HTML. Thẻ giúp định dạng cấu trúc tài liệu HTML

2. Cách khai báo một tài liệu HTML

Trước khi bắt đầu tìm hiểu về các thẻ trong HTML thì chúng ta cần tìm hiểu cách khai báo cho biết đây chính là tài liệu HTML để trình duyệt có thể nhận biết và hiển thị chính xác như ta muốn.

Đầu tiên khai báo doctype

Đây là cú pháp cho html5. Để khai báo một tài liệu là html thì ta sẽ sử dụng cú pháp gọi là doctype, và đây là đoạn mã khai báo:

<!doctype html>

Chúng ta sẽ khai báo doctype này ngay đầu trang tài liệu. Một điều lưu ý là cú pháp này không quan tâm chữ in hoa hay thường, chúng ta có thể có những dạng khai báo khác nhau như bên dưới nhưng vẫn cùng chung một ý nghĩa

<!DOCTYPE HTML>
<!doctype html>
<!DOCTYPE html>
<!doctype HTML>

Tuy nhiên, cú pháp viết thường ở đoạn mã đầu tiên là khuyến khích sử dụng. Và chúng ta cần phải biết rằng các cú pháp ở đây là của HTML5, hiện là phiên bản mới nhất của ngôn ngữ HTML.

Trên thực tế, chúng ta sẽ bắt gặp nhiều cú pháp khác cho việc khai báo doctype vì có nhiều version khác nhau. Ta cùng tìm hiểu thêm các cú pháp khai báo doctype cho version 4.01 và XHTML

Cú pháp cho HTML 4.01

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

Cú pháp cho XHTML

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

3. Các phiên bản HTML đã công bố

1991HTML
1995HTML 2.0
1997HTML 3.2
1999HTML 4.0.1
2000XHTML
2012HTML5

Vậy là chúng ta đã trải qua 6 version, và HTML 5 chấp nhận gần như là tất cả các thẻ và cú pháp của HTML 4. Nó chỉ thêm vào một số thẻ mới và có cú pháp ngắn gọn hơn.

4. Cú pháp của HTML Tag

Như vậy, bạn đã biết được cách khai báo 1 trang tài liệu thuộc loại HTML thông qua doctype. Vậy cú pháp tổng quát của một tag là như thế nào. Cú pháp của một HTML Tag là như thế này:

<tagname> Nội dung </tagname>
    |                   |
 thẻ mở             thẻ đóng

Một HTML Tag (thẻ) sẽ gồm tên thẻ và được bao quanh bởi dấu angle brackets (< và >), đây chính là cú pháp mà ta nhận ra ngay trong tài liệu html đó chính là 1 thẻ.

Đại đa số các thẻ trong html đều có thẻ mở (opening tag) và thẻ đóng (closing tag). Cú pháp thẻ mở và thẻ đóng chỉ khác một điểm duy nhất, thẻ đóng thì ta có thêm 1 ký tự /, tiếng anh gọi là slash trước tên thẻ.

Nằm ở giữa thẻ đóng và thẻ mở là Content (nội dung của thẻ)

Content là phần nội dung bên trong của thẻ, trong đó có thể là các thẻ khác hoặc chỉ là văn bản thông thường, gọi là inner text.

5. Cấu trúc một trang HTML

Chúng ta đã tìm hiểu cấu trúc của một thẻ. Dưới đây là cấu trúc của một trang tài liệu HTML:

<html>
<head>
<title> Xin chào các bạn </title>
</head>
<body>
Chào các bạn đã đến với Blog của mình - CuongLog.com
</body>
</html>

Ý nghĩa các thẻ như sau:

<html></html>: Thẻ bắt đầu 1 trang tài liệu html, là thẻ chứa tất cả các thẻ khác.

<head></head>: Là thẻ con trực tiếp đầu tiên của thẻ html

Nó được gọi là phần đầu của trang tài liệu (header of the document) bởi vì nội dung của nó sẽ không hiển thị ra ngoài trình duyệt mà nó lưu trữ các thông tin khác cho trang tài liệu như:

  • Các siêu liên kết
  • Font chữ sử dụng
  • Siêu thông tin ( còn gọi là meta information)

<title></title>: Thẻ này sẽ chứa thông tin về tiêu đề trang web của bạn.

<body></body>: Đây là thẻ con trực tiếp cuối cùng và rất quan trọng của thẻ html. Khác với thẻ head thì thẻ body sẽ hiển thị nội dung của nó ra ngoài trình duyệt (browser)

Điều này nghĩa là toàn bộ các nội dung ta muốn hiển thị cho user thấy sẽ được đặt bên trong thẻ body này.

Bài tiếp theo (Tìm hiểu về HTML Element và Attribute)

Bài viết sau (Giới thiệu về HTML)

1
Để lại bình luận của bạn

avatar
newest oldest most voted
trackback

[…] Trên đây là những chia sẻ từ mình, khi mình mới bắt đầu tìm hiểu làm quen với HTML. Và bài viết tiếp theo Làm quen với HTML […]