Primer lesson: ngôn ngữ đánh dấu siêu văn bản

Ngôn ngữ đánh dấu siêu văn bản (HTML)

HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản. Đây là ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu được thiết kế để hiển thị trong trình duyệt web. HTML có thể được hỗ trợ bởi các công nghệ như Cascading Style Sheets (CSS) và các ngôn ngữ kịch bản như JavaScript.

Nền tảng của Web

Về cốt lõi, internet là một mạng lưới máy tính rộng lớn được kết nối trên toàn cầu. Cách chính mà chúng ta tương tác với mạng này là thông qua World Wide Web (WWW), một hệ thống các tài liệu siêu văn bản được liên kết với nhau được truy cập qua internet. Trung tâm của WWW là các trang web, là các tài liệu được viết bằng HTML. HTML cung cấp cấu trúc cơ bản của trang web, sau đó được cải tiến và sửa đổi bằng các công nghệ khác như CSS và JavaScript.

Cấu trúc tài liệu HTML

Một tài liệu HTML được cấu trúc theo một tập hợp các thẻ lồng nhau, là các phần tử được đặt trong dấu ngoặc nhọn. Các thẻ này cho trình duyệt web biết cách hiển thị nội dung. Một ví dụ về cấu trúc tài liệu HTML đơn giản là:

 <!DOCTYPE html>
<html>
    <đầu>
        <title>Tiêu đề trang</title>
    </head>
    <cơ thể>
        <h1>Đây là Tiêu đề</h1>
        <p>Đây là một đoạn văn.</p>
    </body>
</html>

Mã này xác định một trang web cơ bản có tiêu đề, tiêu đề và một đoạn văn bản.

Các phần tử và thẻ HTML

Tài liệu HTML được tạo thành từ các phần tử HTML. Mỗi phần tử được thể hiện bằng thẻ bắt đầu, một số nội dung và thẻ kết thúc. Thẻ bắt đầu và kết thúc của một phần tử giống hệt nhau, ngoại trừ thẻ kết thúc có dấu gạch chéo lên trước tên phần tử.

Ví dụ: thẻ <code><p></code> bao quanh một đoạn văn bản và nó có cấu trúc như sau:

 <p>Đây là một đoạn ví dụ.</p>

Các yếu tố khác nhau phục vụ các mục đích khác nhau. Ví dụ:

Các thẻ <code><h1>...</h1></code> đến <code><h6>...</h6></code> được sử dụng cho các tiêu đề.
Thẻ <code><a></code> xác định một siêu liên kết.
Thẻ <code><img></code> nhúng hình ảnh vào tài liệu.

Thuộc tính

Các phần tử HTML có thể có các thuộc tính cung cấp thông tin bổ sung về các phần tử đó. Các thuộc tính được đặt trong thẻ bắt đầu của một phần tử và thường được đặt theo cặp tên/giá trị như <code>name="value"</code>.

Ví dụ, để nhúng một hình ảnh, chúng ta sử dụng thẻ <code><img></code> với thuộc tính <code>src</code> (source) để chỉ định URL của hình ảnh:

 <img src="url tới image.jpg" alt="Mô tả hình ảnh">

Thuộc tính <code>alt</code> cung cấp văn bản thay thế cho hình ảnh nếu nó không thể hiển thị được.

Liên kết và Điều hướng

Việc sử dụng thẻ <code><a></code> sẽ tạo ra các siêu liên kết, là nền tảng cho tính liên kết của Web. Siêu liên kết có thể liên kết đến một trang web khác, một phần khác trên cùng một trang hoặc thậm chí là một tệp có thể tải xuống. Ví dụ:

 <a href="https://example.com">Truy cập vào example.com</a>

Thao tác này sẽ tạo liên kết tới <code>https://example.com</code>.

Danh sách

HTML cung cấp các phần tử để tạo danh sách. Có hai loại danh sách chính:

Danh sách không có thứ tự (<code><ul></code>), trong đó thứ tự của các mục không đáng kể. Các mục trong danh sách không có thứ tự được đánh dấu bằng dấu đầu dòng.
Danh sách được sắp xếp (<code><ol></code>), trong đó thứ tự của các mục đóng vai trò quan trọng. Các mục trong danh sách có thứ tự được đánh số.

Mỗi mục trong danh sách được đặt trong thẻ <code><li></code> (mục danh sách).

HTML5

HTML5 là sự phát triển mới nhất của tiêu chuẩn, giới thiệu nhiều tính năng mới phản ánh nhu cầu hiện đại về các tài liệu tương tác và đa phương tiện. Chúng bao gồm các phần tử cấu trúc mới (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>) , các phần tử đồ họa (<code><canvas></code> để vẽ, <code><svg></code> dành cho đồ họa vector có thể mở rộng) và các phần tử đa phương tiện (<code><audio></code> và <code ><video></code>).

HTML ngữ nghĩa

HTML ngữ nghĩa đề cập đến việc sử dụng đánh dấu HTML để củng cố ngữ nghĩa hoặc ý nghĩa của thông tin trong các trang web. Thay vì chỉ xác định cách các phần tử trông hoặc hoạt động (đó là công việc của CSS và JavaScript), HTML ngữ nghĩa mô tả chính xác cấu trúc và loại nội dung. Ví dụ: thẻ <code><article></code> cho biết nội dung bên trong là một bài viết, trong khi thẻ <code><nav></code> biểu thị một menu điều hướng.

Việc sử dụng HTML ngữ nghĩa sẽ cải thiện khả năng truy cập và khả năng tìm kiếm của nội dung web, làm cho nội dung đó dễ sử dụng và dễ khám phá hơn.

Phần kết luận

HTML là công nghệ nền tảng của World Wide Web, cung cấp cấu trúc cơ bản cho các trang web. Thông qua việc sử dụng các thẻ, thuộc tính và thành phần, HTML cho phép tạo ra các tài liệu có cấu trúc. Bằng cách hiểu và sử dụng HTML, người ta có thể tạo ra nhiều loại nội dung có thể truy cập được trên web, từ các tài liệu văn bản đơn giản đến những trải nghiệm đa phương tiện tương tác phức tạp. Là nền tảng để phát triển web, việc thành thạo HTML là điều cần thiết cho bất kỳ ai muốn thiết kế hoặc phát triển web.

ngôn ngữ đánh dấu siêu văn bản