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 (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ác phần chính của thẻ bao gồm:
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>
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ó 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ử).
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 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:
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ó:
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ó.
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ả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ẻ.
Bình luận: