ViệtHTML (HyperText Markup Language) là ngôn ngữ cơ bản được sử dụng để tạo nên các trang web. Đây là ngôn ngữ đánh dấu, nghĩa là nó sử dụng các thẻ (tags) để cấu trúc nội dung và các thành phần trên trang web. Nếu bạn mới bắt đầu học về phát triển web, việc hiểu HTML là nền tảng quan trọng giúp bạn xây dựng những trang web đầu tiên.
Trong bài viết này, chúng ta sẽ cùng tìm hiểu ví dụ cơ bản về HTML và các thành phần quan trọng của nó.
1. Cấu trúc cơ bản của một trang HTML
Một tài liệu HTML có cấu trúc rất đơn giản. Nó thường bắt đầu bằng khai báo loại tài liệu (DOCTYPE), tiếp theo là các thẻ mở và đóng của tài liệu, phần tiêu đề (head), và phần nội dung chính (body). Dưới đây là ví dụ cơ bản:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang web đầu tiên của tôi - codetuthub.com</title>
</head>
<body>
<h1>Chào mừng bạn đến với trang web của tôi!</h1>
<p>Đây là đoạn văn đầu tiên của tôi trên trang web này.</p>
</body>
</html><!DOCTYPE html>: Khai báo loại tài liệu HTML5.<html lang="vi">: Thẻ bao quanh toàn bộ tài liệu HTML, với thuộc tínhlang="vi"để chỉ định ngôn ngữ tiếng Việt.<head>: Chứa các thông tin meta, tiêu đề trang web và các tài nguyên như CSS, font chữ.<body>: Chứa nội dung chính của trang, bao gồm văn bản, hình ảnh, và các yếu tố khác mà người dùng nhìn thấy.
2. Các thẻ HTML cơ bản
a. Thẻ tiêu đề (<h1> - <h6>)
HTML hỗ trợ các thẻ tiêu đề từ <h1> đến <h6>, trong đó <h1> là tiêu đề quan trọng nhất, thường dùng cho tiêu đề chính của trang, còn <h6> là tiêu đề ít quan trọng hơn.
Ví dụ:
<h1>Tiêu đề chính</h1>
<h2>Tiêu đề phụ</h2>
<h3>Tiêu đề cấp 3</h3>b. Thẻ đoạn văn (<p>)
Để tạo một đoạn văn bản, ta sử dụng thẻ <p>:
<p>Đây là một đoạn văn bản đơn giản trong HTML.</p>c. Thẻ đường dẫn - link (<a>)
Thẻ <a> được sử dụng để tạo các đường dẫn đến các trang web khác hoặc các tài liệu khác.
Ví dụ:
<a href="https://codetuthub.com">Truy cập CodeTutHub</a>- Thuộc tính
hrefchứa URL mà bạn muốn liên kết tới.
d. Thẻ hình ảnh (<img>)
Để chèn hình ảnh vào trang, ta sử dụng thẻ <img>. Thẻ này cần có thuộc tính src để chỉ nguồn của hình ảnh và thuộc tính alt để mô tả hình ảnh.
Ví dụ:
<img src="images/logo.png" alt="Logo của trang web">src: Đường dẫn đến hình ảnh.alt: Văn bản mô tả hình ảnh (dùng cho SEO và trường hợp ảnh không hiển thị).
e. Thẻ danh sách (<ul>, <ol>, <li>)
<ul>: Danh sách không có thứ tự.<ol>: Danh sách có thứ tự.<li>: Phần tử của danh sách.
Ví dụ:
<ul>
<li>Mục thứ nhất</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
</ul>Danh sách có thứ tự:
<ol>
<li>Bước 1</li>
<li>Bước 2</li>
<li>Bước 3</li>
</ol>3. Các thuộc tính của thẻ HTML
Mỗi thẻ HTML có thể có các thuộc tính đi kèm để cung cấp thêm thông tin. Các thuộc tính thường gặp:
class: Được sử dụng để phân loại nhiều phần tử cùng loại.id: Định danh duy nhất cho một phần tử trên trang.style: Thêm các thuộc tính CSS nội tuyến.
Ví dụ:
<p id="gioi-thieu" class="noi-dung">Đây là đoạn văn có thuộc tính class và id.</p>4. Ví dụ một trang HTML
Dưới đây là ví dụ đầy đủ về một trang HTML với các thành phần đã nêu:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ HTML cơ bản - codetuthub.com</title>
</head>
<body>
<h1>Chào mừng đến với CodeTutHub!</h1>
<p>CodeTutHub là nơi cung cấp các bài viết và hướng dẫn cho lập trình viên.</p>
<h2>Các chủ đề phổ biến</h2>
<ul>
<li>Hướng dẫn về HTML</li>
<li>Học CSS cơ bản</li>
<li>Javascript cho người mới bắt đầu</li>
</ul>
<h3>Liên hệ với chúng tôi</h3>
<p>Truy cập <a href="https://codetuthub.com">trang chủ CodeTutHub</a> để biết thêm chi tiết.</p>
<img src="https://codetuthub.com/logo.png" alt="Logo CodeTutHub">
</body>
</html>5. Kết luận
HTML là ngôn ngữ nền tảng quan trọng để phát triển web. Với việc nắm vững các thẻ HTML cơ bản và cấu trúc của một tài liệu HTML, bạn đã có thể bắt đầu tạo ra các trang web đơn giản. Hãy tiếp tục học và tìm hiểu về CSS và JavaScript để xây dựng những trang web phức tạp và đẹp mắt hơn.
Nếu bạn muốn học thêm về HTML và các công nghệ web khác, hãy truy cập CodeTutHub để đọc các bài viết và hướng dẫn chi tiết hơn nhé!
