Nâng cao kiến thức HTML

Mục tiêu:

Hiểu các tính năng mới của HTML5 và cách áp dụng.

Sử dụng semantic HTML để tạo cấu trúc web rõ ràng, thân thiện với SEO.

Tạo form tương tác, bảng phức tạp và nhúng nội dung từ trang khác.

Làm quen với framework HTML để xây dựng giao diện nhanh chóng.

1. HTML5 – Các tính năng mới

HTML5 giới thiệu nhiều thẻ và API giúp web tương tác hơn và dễ dàng hiển thị đa phương tiện.

1.1 Video & Audio

• <video>: nhúng video
• <audio>: nhúng âm thanh

Ví dụ:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ video.
</video>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ audio.
</audio>

1.2 Canvas: dùng để vẽ hình trực tiếp bằng JavaScript.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 150, 50);
</script>

2. Semantic HTML – Thẻ có ý nghĩa

Semantic HTML giúp trình duyệt, SEO và người dùng hiểu cấu trúc trang.

Ví dụ:

<header>
  <h1>Website của tôi</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<section>
  <article>
    <h2>Bài viết 1</h2>
    <p>Nội dung bài viết...</p>
  </article>
  <aside>
    <h3>Sidebar</h3>
    <p>Nội dung phụ...</p>
  </aside>
</section>

<footer>
  <p>Bản quyền © 2025</p>
</footer>

3. Form nâng cao – Tương tác với người dùng

HTML5 bổ sung nhiều loại input giúp form trực quan hơn:

<form action="/submit">
  <label>Email:</label>
  <input type="email" name="email" required><br><br>

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

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

  <label>Chọn màu yêu thích:</label>
  <input type="color" name="favcolor"><br><br>

  <button type="submit">Gửi</button>
</form>

4. Bảng phức tạp

HTML5 hỗ trợ tạo bảng với colspan và rowspan

<table border="1">
  <tr>
    <th rowspan="2">Tên</th>
    <th colspan="2">Điểm</th>
  </tr>
  <tr>
    <th>Toán</th>
    <th>Lý</th>
  </tr>
  <tr>
    <td>Hero</td>
    <td>9</td>
    <td>8</td>
  </tr>
</table>

5. Iframe – Nhúng nội dung từ trang khác

<iframe src="https://example.com" width="600" height="400" title="Example"></iframe>

Có thể nhúng google map, youtube video,…

6. Framework HTML – Làm quen với Bootstrap

Bootstrap giúp xây dựng giao diện nhanh và responsive.

Sử dụng class có sẵn thay vì viết CSS từ đầu.

https://getbootstrap.com/docs/5.3/getting-started/introduction/

7. Thực hành

Bài tập 1: Tạo landing page nhỏ:

Header + Navbar

2 section: Giới thiệu + Bài viết

Sidebar với thông tin phụ

Footer

Nhúng video và audio

Tạo form đăng ký nhận tin

Bài tập 2: Tạo bảng học sinh với nhiều cột và rowspan/colspan.

Bài tập 3: Tạo iframe nhúng trang web khác (ví dụ Google Maps).