Giới thiệu cơ bản về HTML - Từ cơ bản đến thành thạo

1. Tổng quan về HTML

1.1 Website là gì?

Website là tập hợp các trang web (web page) được liên kết với nhau và có thể truy cập thông qua Internet bằng trình duyệt web. Mỗi trang web thường bao gồm văn bản, hình ảnh, video, và các yếu tố tương tác khác.

1.2 Các loại website

Website có thể được phân loại theo nhiều tiêu chí khác nhau:

Website tĩnh: Chỉ hiển thị nội dung cố định, không thay đổi theo người dùng.
Website động: Nội dung thay đổi dựa trên cơ sở dữ liệu và tương tác của người dùng.
Website thương mại điện tử: Chuyên về mua bán sản phẩm/dịch vụ trực tuyến.
Website tin tức/blog: Chuyên cung cấp thông tin, tin tức hoặc bài viết cá nhân.

1.3 Hypertext là gì?

Hypertext (siêu văn bản) là dạng văn bản có thể chứa liên kết (hyperlink) dẫn đến các tài liệu khác hoặc nội dung khác trên cùng một trang web.

1.4 HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu được sử dụng để tạo và cấu trúc nội dung của một trang web. HTML sử dụng các thẻ (tags) để xác định các phần tử trên trang.

1.5 Cấu trúc trang HTML

Một trang HTML cơ bản bao gồm:

<!DOCTYPE html>
<html>
<head>
    <title>Tiêu đề trang</title>
</head>
<body>
    <h1>Chào mừng đến với HTML</h1>
    <p>Đây là một đoạn văn bản.</p>
</body>
</html>

2. Ví dụ về HTML

2.1 Thẻ HTML

Thẻ HTML là các phần tử được đặt trong dấu < > để định dạng nội dung trang web. Ví dụ:

<h1> đến <h6>: Tiêu đề
<p>: Đoạn văn
<a>: Liên kết
<img>: Hình ảnh
<ul>, <ol>, <li>: Danh sách

2.2 Một số thẻ HTML cơ bản

<h1>Tiêu đề lớn</h1>
<p>Đây là một đoạn văn bản.</p>
<a href="https://example.com">Liên kết</a>

2.3 HTML Styles

CSS có thể được sử dụng để tạo kiểu cho HTML:

<p style="color:blue; font-size:20px;">Đoạn văn bản màu xanh.</p>

2.4 Thẻ hiển thị hình ảnh, liên kết

<img src="image.jpg" alt="Mô tả hình ảnh">
<a href="https://example.com">Nhấp vào đây</a>

2.5 Sử dụng các thẻ tạo danh sách

<ul>
    <li>Mục 1</li>
    <li>Mục 2</li>
</ul>
<ol>
    <li>Bước 1</li>
    <li>Bước 2</li>
</ol>

2.6 HTML Media

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>

2.7 Thêm video vào trang web

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>

2.8 HTML form và Table

2.8.1 Tạo biểu mẫu cho trang web

<form action="submit_form.php" method="post">
    <label for="name">Tên:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Gửi">
</form>

2.8.2 Sử dụng select, option

<select>
    <option value="1">Lựa chọn 1</option>
    <option value="2">Lựa chọn 2</option>
</select>

3. Bài tập minh họa

3.1 Tạo form cơ bản

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="Gửi">
</form>

3.2 Tạo một form tìm kiếm Google

<form action="https://www.google.com/search" method="get">
    <input type="text" name="q">
    <input type="submit" value="Tìm kiếm Google">
</form>

3.3 Tạo bảng cơ bản

<table border="1">
    <tr>
        <th>Họ tên</th>
        <th>Tuổi</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>25</td>
    </tr>
</table>

3.4 Tạo bảng nâng cao

<table border="1">
    <tr>
        <th rowspan="2">Họ tên</th>
        <th colspan="2">Thông tin</th>
    </tr>
    <tr>
        <th>Tuổi</th>
        <th>Địa chỉ</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>25</td>
        <td>Hà Nội</td>
    </tr>
</table>

3.5 Tạo form đơn giản

<form>
    <label for="username">Tên đăng nhập:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="Đăng nhập">
</form>

4. Kết luận

HTML là ngôn ngữ cơ bản giúp tạo ra các trang web. Việc hiểu và sử dụng HTML đúng cách sẽ giúp bạn xây dựng được những trang web đẹp và hiệu quả.