Code Tu Tam

Giới thiệu chung về HTML.

Nguyễn Quang Anh
Rate this post

Trong bài viết này, chúng ta đề cập đến các khái niệm cơ bản về HTML để giúp bạn bắt đầu. Chúng tôi xác định các elements (phần tử), attributes (thuộc tính) và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã biết tới và nơi chúng phù hợp với ngôn ngữ. Chúng tôi cũng cho bạn thấy cái cách của một phần tử HTML được cấu tạo, cách một trang HTML điển hình được cấu tạo và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ “chơi” với một số HTML để giúp hứng thú!

HTML là gì?

HTML (Ngôn Ngữ Đánh Dấu Siêu Văn Bản) không phải là ngôn ngữ lập trình; nó là một ngôn ngữ đánh dấu được sử dụng để cho trình duyệt của bạn biết cách cấu tạo các trang web bạn truy cập. Nó có thể phức tạp hoặc đơn giản như nhà phát triển web mong muốn. HTML bao gồm một loạt elements (phần tử) mà bạn sử dụng để đính kèm, bọc hoặc đánh dấu các phần khác nhau của nội dung để làm cho nó xuất hiện hoặc hành động theo một cách nhất định. Tag kèm theo có thể tạo một chút nội dung thành siêu liên kết để liên kết đến một trang khác trên web, in nghiêng từ, v.v. Ví dụ: lấy dòng nội dung sau:

Tôi là nguyễn quang anh.

nếu chúng ta muốn dòng chữ đấy hiển thị thì chúng ta có thể chỉ rõ rằng nó là một đoạn bằng cách đính kèm nó trong một phần tử “đoạn”.

<p>Tôi là nguyễn quang anh</p>

Cấu trúc cơ bản của một element.

Các phần chính của thẻ bao gồm:

  1. Thẻ mở: phần này bao gồm tên của phần tử (trong trường hợp này là p), được bao bọc trong các dấu ngoặc nhọn mở và đóng.
  2. Thẻ đóng: giống như thẻ mở nhưng nó có thêm dấu gạch chéo trước tên phần tử
  3. Nội dung: Phần này là nội dung của phần tử, trong trường hợp này là chỉ có văn bản.
  4. Các element: Thẻ Đóng + Thẻ Mở + Nội Dung = 1 Phần Tử

Code ví dụ:

<p>Code từ tâm</p>

<div>Code từ tâm đang vươn thành blog lập trình mới nhất hiện nay.</div>

Các phần tử lồng nhau:

Bạn cũng có thể để các elements trong các elements khác — và đó gọi là nesting. Nếu chúng ta muốn nói rằng con mèo của chúng ta rất cục cằn, chúng ta có thể gói từ “rất” trong <strong> element ( tức là phần tử html strong), có nghĩa là từ này được nhấn mạnh:

<p>Tôi rất là <strong>Vui vẻ</strong></p>

Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng đúng cách: trong ví dụ trên, chúng tôi đã mở phần tử p trước, sau đó là phần tử strong, do đó chúng tôi phải đóng phần tử strong trước, sau đó là phần p. Sau đây là không chính xác:

<p>Tôi rất là <strong>Vui vẻ</p></strong>.

Các elements phải mở và đóng một cách chính xác, vì vậy chúng cần phải rõ ràng là ở bên trong hay bên ngoài nhau. Nếu chúng trùng nhau như trên, thì trình duyệt web của bạn sẽ cố gắng đoán đúng nhất những gì bạn đang cố nói và bạn cũng có thể nhận được kết quả không như mong muốn. Vì vậy, đừng làm điều đó!

Các phần tử dạng khối và dạng online.

Có hai điều quan trọng của elements trong HTML mà bạn cần phải biết. Đó là block-level elements (phần tử cấp khối) và inline elements (nội phần tử).

 

Phần tử không chứa nội dung.

 Không phải mọi element đều tuân theo kiểu mẫu thẻ mở + nội dung + thẻ đóng. Một số element chỉ bao gồm một thẻ duy nhất, điều này thường được sử dụng để insert/embed một số thứ trong tập tin tại nơi mà nó được gắn vào. Ví dụ, <img> element sẽ embeds một file ảnh vào trang, tại vị trí mà thẻ này được gắn:

<img src=”logo-codetutam.png”>

Cấu trúc một tệp html.

Cấu trúc code:

<html lang="en">

<head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Document</title>

</head>

<body>

</body>

</html>

Giải thích:

  1. <!DOCTYPE html>: The doctype. Từ lâu lắm rồi, khi HTML mới được phát triển (khoảng tháng 2/1991), doctypes khi đó được dùng để thực thi như các liên kết đến một nhóm các nguyên tắc mà trang HTML cần phải tuần theo để được xem là một HTML tốt, điều này có nghĩa là việc kiểm tra lỗi tự động và nhiều thứ hữu ích khác. Tuy nhiên, ngày nay không ai quan tâm đến chúng, và chúng chỉ còn là di vật lịch sử mà cần được thêm vào để mọi thứ hoạt động đúng. <!DOCTYPE html>là chuỗi ký tự ngắn nhất để cho biết rằng đây là một doctype hợp lệ; đó là tất cả những gì bạn cần biết.
  2. <html></html>: The <html> element. Element này sẽ bao bọc mọi nội dung trên toàn bộ trang, và đôi khi được biết đến như là một root element.
  3. <head></head>: The <head> element. Element này sẽ được thực thi như là một vùng chứa mọi thứ mà bạn muốn bao gồm trong trang HTML ở nơi mà không phảilà nội dung bạn muốn hiện ra cho người xem trang. Nó bao gồm những thứ như các từ khóa và mô tả của trang mà bạn muốn xuất hiện trên kết quả tìm kiếm, CSS style, khai báo bộ mã ký tự (character set), và nhiều hơn nữa. Bạn sẽ học về điều này trong bài tiếp theo của chuỗi bài học.
  4. <meta charset=”utf-8″>: Element này sẽ thiết lập bảng mã kỹ tự (character set) mà tập tin của bạn nên sử dụng để UTF-8, bảng mã mà bao gồm số lượng lớn các ngôn ngữ viết của con người. Về cơ bản, nó hiện tại có thể xử lý mọi loại ngôn ngữ mà bạn đặt vào nó. Nên không có lý do gì để không thiết lập, và nó sẽ giúp bạn tránh rất nhiều vấn đề sau này.
  5. <title></title>: The <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.
  6. <body></body>: The <body> element.
    Thẻ này chứa tất cảnội dung mà bạn muốn hiện ra cho người dùng web khi họ xem trang của bạn, dù nó là chữ, hình, video, games, playable audio tracks, hoặc bất kì thứ gì.

 

Các thuộc tính

Các phần tử cũng có thể có attribute, nó trông như thế này:

<p class="codetutam">Tôi là nguyễn quang anh</p>

Các attribute chứa các thông tin thêm về element, những thông tin mà bạn không muốn nó xuất hiện trong nội dung thực sự. Trong trường hợp này, attribute class cho phép bạn gán cho element một định danh mà định danh này sau đó sẽ được sử dụng để xác định element với thông tin về style và các thông tin khác.

Một attribute nên có:

  1. Một khoảng trống giữa nó và tên của element (hoặc trước attribute khác, nếu element đã có sẵn một hoặc nhiều attribute.)
  2. Tên của attribute, theo sau là dấu “=”.
  3. Giá trị của của attribute, sẽ được bao bọc trong dấu nháy kép.

 

Khoảng trắng trong HTML.

Bất kể bạn sử dụng bao nhiêu khoảng trắng (có thể bao gồm các ký tự khoảng trắng, ngắt dòng), trình phân tích cú pháp HTML sẽ giảm từng khoảng trắng xuống còn một khoảng trắng duy nhất khi hiển thị mã. Vậy tại sao lại sử dụng nhiều khoảng trắng? Câu trả lời là tính dễ đọc – sẽ dễ dàng hơn rất nhiều để hiểu những gì đang xảy ra trong mã của bạn nếu bạn định dạng nó đẹp và không chỉ tập hợp lại với nhau thành một mớ hỗn độn. Trong HTML của chúng tôi, mỗi phần tử lồng nhau được thụt lề vào hai khoảng trắng hơn so với phần tử nằm bên trong. Bạn sử dụng kiểu định dạng nào là tùy thuộc vào bạn (ví dụ: bao nhiêu khoảng trắng cho mỗi mức thụt lề), nhưng bạn nên cân nhắc việc định dạng nó.

Html comment.

Trong HTML, như với hầu hết các ngôn ngữ lập trình, có sẵn một cơ chế để viết comment trong các đoạn mã – các đoạn comment sẽ bị trình duyệt bỏ qua và không nhìn thấy được đối với người dùng và mục đích của chúng là cho phép bạn đưa comment vào mã để nói cách bạn mã hoạt động, các phần khác nhau của mã làm gì, v.v. Điều này có thể rất hữu ích nếu bạn quay lại cơ sở mã mà bạn đã không làm việc trong sáu tháng và không thể nhớ bạn đã làm gì – hoặc nếu bạn làm mã của bạn cho người khác làm việc.

<!-- Đoạn code này của tôi có chức năng là  -->

Bài viết liên quan:

Các tag html cơ bản cần biết.

Tổng kết.

Cảm ơn bạn đã theo rõi tới cuối bài viết – chúng tôi hy vọng bạn thích bài viết này của tôi về những điều cơ bản của HTML! Tại thời điểm này, bạn sẽ hiểu ngôn ngữ trông như thế nào, cách nó hoạt động ở mức cơ bản và có thể viết một vài phần tử và thuộc tính.

Bạn hãy tiếp tục theo dõi chúng tôi để có thể cập nhật nhiều bài viết hơn nữa về lập trình. Chúc các bạn học tập vui vẻ.

Exit mobile version