Áp dụng kiến thức vào bài tập thực hành nâng cao

Sau khi đã học tất cả các kiến thức cơ bản về HTML, bây giờ là lúc bạn ứng dụng chúng vào thực tế. Trong bài học này, bạn sẽ thực hành tạo một trang web hoàn chỉnh với biểu mẫu đăng ký, bảng dữ liệu, nội dung đa phương tiện, và các kỹ thuật tối ưu SEO cơ bản.

1. Áp dụng kiến thức vào bài tập

1.1. Tạo biểu mẫu đăng ký tài khoản hoàn chỉnh

Bạn sẽ tạo một biểu mẫu đăng ký với các loại input nâng cao, bao gồm:

• Text (Họ tên, tài khoản).
• Password (Mật khẩu, xác nhận mật khẩu).
• Email (Email cá nhân).
• Date (Ngày sinh).
• Radio button (Giới tính).
• Checkbox (Chấp nhận điều khoản).
• File upload (Ảnh đại diện).

Mã HTML cho biểu mẫu đăng ký

<form action="#" method="post">
    <label for="fullname">Họ và tên:</label>
    <input type="text" id="fullname" name="fullname" required><br><br>

    <label for="username">Tài khoản:</label>
    <input type="text" id="username" name="username" required><br><br>

    <label for="password">Mật khẩu:</label>
    <input type="password" id="password" name="password" required><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="dob">Ngày sinh:</label>
    <input type="date" id="dob" name="dob"><br><br>

    <label>Giới tính:</label>
    <input type="radio" name="gender" value="Nam"> Nam
    <input type="radio" name="gender" value="Nữ"> Nữ
    <input type="radio" name="gender" value="Khác"> Khác<br><br>

    <label for="avatar">Ảnh đại diện:</label>
    <input type="file" id="avatar" name="avatar"><br><br>

    <input type="checkbox" id="agree" name="agree" required>
    <label for="agree">Tôi đồng ý với điều khoản sử dụng.</label><br><br>

    <button type="submit">Đăng ký</button>
</form>

1.2. Xây dựng bảng dữ liệu có định dạng rõ ràng

Bảng dữ liệu giúp hiển thị thông tin dưới dạng hàng cột. Trong ví dụ này, bạn sẽ tạo bảng danh sách người dùng, hiển thị tên, email, ngày sinh, giới tính.

Mã HTML cho bảng dữ liệu

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <th>Họ và Tên</th>
        <th>Email</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>nguyenvana@email.com</td>
        <td>1995-06-15</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Trần Thị B</td>
        <td>tranthib@email.com</td>
        <td>1998-03-22</td>
        <td>Nữ</td>
    </tr>
</table>

1.3. Nhúng nội dung đa phương tiện (Audio, Video, Hình ảnh)

Bạn sẽ sử dụng thẻ <audio> và <video> để nhúng nhạc nền hoặc video giới thiệu vào trang web.

Mã HTML để nhúng nội dung đa phương tiện

<h3>Nghe nhạc thư giãn</h3>
<audio controls>
    <source src="audio/song.mp3" type="audio/mp3">
    Trình duyệt của bạn không hỗ trợ phát nhạc.
</audio>

<h3>Xem video giới thiệu</h3>
<video width="400" controls>
    <source src="video/intro.mp4" type="video/mp4">
    Trình duyệt của bạn không hỗ trợ phát video.
</video>

1.4. Tối ưu SEO với Semantic HTML, thẻ alt và title

Để cải thiện SEO, bạn cần:

1. Sử dụng Semantic HTML để giúp Google hiểu rõ nội dung trang web.
2. Thêm thuộc tính alt cho hình ảnh để giúp công cụ tìm kiếm nhận diện nội dung.
3. Thêm thuộc tính title để mô tả chi tiết hơn.

Ví dụ tối ưu SEO với hình ảnh

<img src="images/profile.jpg" alt="Ảnh đại diện của Nguyễn Văn A" title="Nguyễn Văn A - Web Developer">

2. Kết luận

Tóm tắt những gì bạn đã làm:

1. Tạo biểu mẫu đăng ký tài khoản đầy đủ với nhiều loại input nâng cao.
2. Xây dựng bảng dữ liệu có định dạng rõ ràng.
3. Nhúng nội dung đa phương tiện (âm thanh, video, hình ảnh) vào trang web.
4. Tối ưu SEO cơ bản bằng cách sử dụng Semantic HTML, thẻ alt và title.

Hướng phát triển tiếp theo:

1. Thêm CSS để làm giao diện đẹp hơn.
2. Học JavaScript để xử lý form và tạo hiệu ứng động.
3. Triển khai trang web lên Internet bằng GitHub Pages hoặc Netlify.