Các ví dụ cơ bản về HTML

Trong bài này, chúng ta sẽ tìm hiểu các thẻ HTML cơ bản, đừng lo lắng nếu các bạn chưa biết về nó nhé

Tài liệu HTML

Tất cả các tài liệu HTML phải bắt đầu bằng một khai báo loại tài liệu: <!DOCTYPE html>.

Sau đó, bản thân tài liệu HTML bắt đầu bằng thẻ <html> và kết thúc bằng thẻ </html>.

Phần hiển thị nội dung của tài liệu HTML nằm giữa cặp thẻ <body> và </body>.

Ví dụ

<h1>My First Heading</h1>
<p>My first paragraph.</p>

Xem kết quả

Khai báo <!DOCTYPE>

Khai báo <!DOCTYPE> là khai báo đại diện cho các loại tài liệu, nó giúp cho các trình duyệt web đọc và hiển thị trang web một cách chính xác.

Chúng ta chỉ khai báo một lần ở đầu trang và trước bất kỳ thẻ HTML nào.

Khai báo <!DOCTYPE> cho HTML 5 là.

<!DOCTYPE html>

Các thẻ tiêu đề HTML (heading)

Các thẻ tiêu đề HTML thường được xác định bằng các thẻ <h1> đến <h6>. Các tiêu đề quan trọng nhất thì sử dụng thẻ <h1>, các tiêu đề ít quan trọng nhất thì sử dụng thẻ <h6>

Ví dụ

<!DOCTYPE html>
<html>
<body>

<h1>Đây là Heading 1</h1>
<h2>Đây là Heading 2</h2>
<h3>Đây là Heading 3</h3>
<h4>Đây là Heading 4</h4>
<h5>Đây là Heading 5</h5>
<h6>Đây là Heading 6</h6>

</body>
</html>

Xem kết quả

Thẻ đoạn văn bản HTML

Các đoạn văn bản HTML được sử dụng bằng thẻ <p>

Ví dụ

<p>Đây là một đoạn văn bản</p>
<p>Đây là một đoạn văn bản khác</p>

Xem kết quả

Thẻ liên kết HTML

Thẻ <a> được sử dụng để tạo các liên kết HTML

Ví dụ

<a href="https://book-code.com.vn/">Đây là link liên kết</a>

Kết quả

Đây là link liên kết

Đích đến của các liên kết được chỉ định trong thuộc tính href.

Các thuộc tính được sử dụng để cung cấp thông tin bổ sung về các phần tử HTML.

Chúng ta sẽ tìm hiểu thêm về các thuộc tính của thẻ HTM trong các bài sau.

Thẻ hình ảnh HTML

Hình ảnh trong HTML được xác định bằng thẻ <img>.

Chúng ta sử dụng thuộc tính src để xác định đường dẫn file nguồn của hình ảnh, ngoài ra thuộc tính height, width để định dạng kích thước hiển thị cho hình ảnh

Ví dụ

<img src="book-code.png" height="50px" width="50px" alt="book-code.com.vn">

Kết quả

Xem mã nguồn HTML trang web

Bạn đã bao giờ xem một trang Web và tự hỏi "Làm thế nào họ làm được điều đó?"

Để xem mã nguồn của một trang web, bạn nhấp chuột phải vào trang HTML và chọn "View page sourse" (trong Chrome) hoặc "View sourse" (trong Edge) hoặc tương tự trong các trình duyệt khác. Thao tác này sẽ mở ra một cửa sổ chứa mã nguồn HTML của trang web đó.