HTML Cơ Bản

Trong bài học bạn sẽ được tìm hiểu về cấu trúc trang HTML và lướt qua một số thẻ phổ biến trong HTML. Đừng lo nếu như bạn chưa thể hiểu rõ về công dụng của các thẻ vì chúng ta sẽ tìm hiểu kỹ hơn ở các bài học tiếp theo.

HTML Document

Một HTML document hay trang HTML phải luôn bắt đầu bằng khai báo DOCTYPE. Nếu dùng HTML phiên bản 5 (là phiên bản mới nhất tính tại thời điểm bài viết này được công bố) thì khai báo này sẽ như sau:

<!DOCTYPE html>

Toàn bộ nội dung của một trang HTML sẽ được đặt trong cặp thẻ <html></html> và cặp thẻ này đi theo sau khai báo DOCTYPE:

<!DOCTYPE html>
<html>
...
</html>

Cặp thẻ <head></head> thường theo sau thẻ mở <html> và chứa các thông tin bổ sung (meta data) về trang HTML như tiêu đề trang bộ ký tự (liên quan tới ngôn ngữ) của trang, link tham chiếu các tập tin CSS và JavaScript sử dụng trên trang... Các thông tin meta data thường sẽ không xuất hiện ở phần nội dung trang khi hiển thị trên trình duyệt:

<!DOCTYPE html>
<html>
<head>
...
</head>
</html>

Phần nội dung được hiển thị trên trang sẽ nằm trong cặp thẻ <body></body>:

<!DOCTYPE html>
<html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
</html>

Một ví dụ đầy đủ về cấu trúc trong HTML như sau:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Trang HTML Đầu Tiên</title>
    </head>
<body>
<h1>Xin Chào Thế Giới!</h1>
</body>
</html>

Chạy Thử

HTML Meta Data

Thẻ meta dùng để thêm thông tin bổ sung (meta data) cho trang HTML. Ví dụ như để quy định bộ ký tự sử dụng là UTF-8:

<meta charset="utf-8">

Thẻ <meta> là thẻ tự đóng. Trình duyệt hoặc các bộ máy tính kiếm search engine như Google sẽ cần sử dụng thông tin này để có thể phân tích, hiển thị nội dung trên trang một cách hợp lý nhất.

HTML Tiêu Đề Trang

Thẻ tiêu đề được đặt trong cặp thẻ <head></head> và dùng để tạo tiêu đề cho trang.

<title>Trang HTML Đầu Tiên</title>

Tiêu đề trang không hiển thị ở phần nội dung trang mà được hiển thị ở thanh tab của trình duyệt.

HTML Đề Mục

Các thẻ đề mục dùng để tạo đề mục cho nội dung của trang. HTML có 6 loại thẻ đề mục khác nhau từ <h1>, <h2> cho tới <h6> với thứ tự quan trọng của đề mục giảm dần. Ví dụ thẻ <h1> dùng đánh dấu đề mục có mức độ quan trọng cao và <h6> với đề mục ít quan trọng hơn.

<h1>Thẻ đề mục 1</h1>
<h2>Thẻ đề mục 2</h2>
<h3>Thẻ đề mục 3</h3>

Chạy Thử

HTML Đoạn Văn

Đoạn văn bản trong HTML được đánh dấu bởi thẻ <p>:

<p>Đoạn văn đầu tiên...</p>
<p>Đoạn văn thứ hai...</p>

Chạy Thử

HTML Link Liên Kết

Thẻ <a> được dùng để tạo link liên kết trong HTML:

<a href="https://www.codehub.vn" title="CodeHub.vn">CodeHub.vn</a>

Chạy Thử

Địa chỉ của link liên kết được xác định bởi giá trị của thuộc tính href có trong thẻ mở <a>. Chúng ta sẽ tìm hiểu về thuộc tính ở các bài học tiếp theo.

HTML Ảnh

Thẻ <img> được dùng để đánh dấu hình ảnh trên trang:

<img src="https://www.codehub.vn/logo.jpg" alt="Logo CodeHub.vn" width="100" height="100">

Chạy Thử

Địa chỉ của ảnh được xác định bởi thuộc tính src. Các thuộc tính khác như alt (alternative text), widthheight cung cấp thêm các thông tin về ảnh. Đừng lo chúng ta sẽ tìm hiểu về các thuộc tính này ở các bài học tiếp theo.

HTML Nút Bấm

Thẻ <button> được dùng để tạo một nút bấm trên trang:

<button>Click vào đây</button>

Chạy Thử

HTML Danh Sách

Các thẻ <ul><ol> được dùng để tạo một danh sách:

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Nước ngọt</li>
  <li>Bia</li>
  <li>Rượu</li>
</ul>

Chạy Thử

Chúng ta sẽ tìm hiểu về các thẻ này ở các bài học tiếp theo!

5 Bình Luận

Huy Quang Huy Quang

x

Su Minn Su Minn
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Bắt Đầu Học HTML</h1>
<p>Ngôn ngữ HTML dùng để tạo cấu trúc cho một website</p>
</body>
</html>

<a href="https://www.codehub.vn/HTML-Co-Ban/Gioi-Thieu/challenges/Hello-World" class="btn btn-default" target="_blank"><span class="fa fa-refresh spin"></span> Chạy Thử</a>

MHao Gaming MHao Gaming

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Bắt Đầu Học HTML</h1>
<p>Ngôn ngữ HTML dùng để tạo cấu trúc cho một website</p>
</body>
</html>

38.Dương tiến 38.Dương tiến

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Bắt Đầu Học HTML</h1>
<p>Ngôn ngữ HTML dùng để tạo cấu trúc cho một website</p>
</body>
</html>

Khųong P'Gia Khųong P'Gia

<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
</head>
<body>
<h1>Bắt Đầu Học HTML</h1>
<p>Ngôn ngữ HTML dùng để tạo cấu trúc cho một website</p>
</body>
</html>

Content must not be empty

Related Tutorial