Web trên thế giới được code bằng nhiều ngôn ngữ khác nhau. Tuy nhiên, có một ngôn ngữ có thể được tìm thấy trên tất cả các trang web đó là HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản), thường được gọi là HTML. Như tên của nó, HTML không phải là một chương trình, mà là một ngôn ngữ đánh dấu. Các dấu hiệu được thông dịch bởi các trình duyệt để hình dung nội dung trên các trang web. Trong dạng đơn giản nhất, HTML được sử dụng để định dạng văn bản, nhúng tệp đa phương tiện và tổ chức nội dung trên trang web. Nói cách khác, HTML mô tả các trang web và dựa trên mô tả này, trình duyệt tạo ra một 'image'.
Nhờ các nhà xây dựng trang web miễn phí không còn ai thực sự gặp rắc rối với code HTML nữa. Tuy nhiên, hiểu biết về các thẻ HTML có thể rất hữu ích, ví dụ để thực hiện thay đổi nhanh chóng cho trang web, thêm siêu văn bản trong nhận xét hoặc định dạng văn bản cho bài đăng trên diễn đàn. Bài này sẽ giới thiệu 10 thẻ HTML đơn giản nhưng chắc chắn hữu ích cho việc sử dụng hàng ngày.
Trước khi bắt đầu, bạn cần nắm vững một số quy tắc cơ bản để có thể hiểu các thẻ HTML hơn:
- HTML sử dụng các thẻ đánh dấu có trong các dấu ngoặc nhọn như sau: <html>
- Các thẻ trông giống như trong ví dụ trên được gọi là các thẻ mở (start tag). Mỗi thẻ mở phải được theo sau bởi thẻ đóng (end tag), chẳng hạn như: </html>
- Một số thẻ không mô tả nội dung. Tuy nhiên, để phù hợp với các tiêu chuẩn hiện tại, chúng vẫn phải có thẻ đóng. Do đó, chúng kết hợp thẻ mở và thẻ đóng, như sau: <br />
1. Định dạng văn bản
Các thẻ HTML thường đơn giản được sử dụng để làm in đậm, in nghiêng hoặc gạch chân văn bản.
Đầu vào: <b>bold</b>
Đầu ra: bold
Đầu vào: <i>italic</i>
Đầu ra: italic
Đầu vào: <u>underlined</u>
Đầu ra: underlined
Đầu vào: <s>strike through text</s>
Đầu ra: strike through text
2. Tạo siêu văn bản
Các URL đơn giản trông có vẻ khá xấu. Thêm liên kết vào văn bản, tức là tạo ra một siêu văn bản, phong cách hơn nhiều và tiết kiệm không gian, đặc biệt nếu liên kết rất dài.
Đầu vào: <a href=”//www.quantrimang.com” title=”Quantrimang”>Quantrimang</a>
Đầu ra: Quantrimang
Có thể bạn thấy thẻ HTML này phức tạp hơn một chút, vậy nên hãy xem xét chi tiết cấu trúc của nó. Thẻ thực tế là <a> và các phần tử bổ sung là các thuộc tính xác định các đặc tính khác. Thuộc tính href= xác định liên kết và title= xác định chú giải công cụ. Hãy chắc chắn sử dụng dấu ngoặc kép để đính kèm liên kết và tiêu đề, nếu không liên kết sẽ bị hỏng.
3. Nhúng hình ảnh
Một bức tranh có thể biểu đạt ý nghĩa hơn một nghìn từ. Chúng ta nên sử dụng chúng thường xuyên hơn. Và đây là cách bạn có thể tự chèn một ảnh bằng cách sử dụng HTML:
Đầu vào: <img src=”http://www.yourlinkhere.com/Smiley.png” alt=”smiley” />
Hãy cùng phân tích thẻ này. Thẻ thực tế là <img> và các thuộc tính được yêu cầu là src= và alt=. Các điểm trước đó đến vị trí của hình ảnh, tức là URL của nó và sau đó cung cấp một văn bản thay thế, được hiển thị trong trường hợp hình ảnh bị chặn hoặc liên kết bị hỏng. Lưu ý, sử dụng dấu ngoặc kép để tránh các liên kết hỏng.
Thẻ <img> cũng là một ví dụ về một thẻ không cần phải "đóng" và do đó đóng lại với dấu gạch ngang phía trước trong thẻ ban đầu, tức là <img /> chứ không phải là <img>.
4. Ngắt đoạn và đoạn văn
Để tạo ra một văn bản có cấu trúc, bạn cần sử dụng các ngắt dòng và đoạn văn. Và đây là những thẻ cần biết:
Đầu vào: <br />
Đầu ra: Thẻ này tạo ra một ngắt dòng. Lưu ý rằng đây là một thẻ khác kết hợp các thẻ mở và thẻ đóng trong cùng một thẻ.
Đầu ra: <p>Text inside your paragraph.</p>
Đầu ra: Không giống như thẻ trước, thẻ đoạn văn có thẻ mở và thẻ đóng tiêu chuẩn. Văn bản ở giữa hai thẻ chính là đoạn văn, có nghĩa là có một dòng trống trước và sau đoạn văn.
5. Tạo danh sách
Về cơ bản có hai loại danh sách: có thứ tự và không có thứ tự, thường được gọi là danh sách đánh số và danh sách gạch đầu dòng. Để tạo ra một trong hai loại danh sách này, bạn cần phải biết hai thẻ khác nhau. Hãy xem xét các ví dụ đầu tiên:
Đầu vào:
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
Đầu ra:
- Item One
- Item Two
Đầu vào:
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
Đầu ra:
Để tạo một danh sách có thứ tự, sử dụng thẻ <ol> và danh sách không có thứ tự, chèn thẻ <ul>. Trong cả hai trường hợp, thẻ <li> được sử dụng để xác định một mục trong danh sách.
Bây giờ, bạn đã cảm thấy tự tin hơn về việc sử dụng các thẻ HTML chưa?
Source: https://quantrimang.com/cong-nghe/top-10-the-html-ma-moi-nguoi-so-huu-blog-va-website-nen-biet-142288