Bài thực hành lập trình web HTML5: sử dụng thẻ ngữ nghĩa

Gửi tới bạn đọc bài thực hành lập trình web 2b: sử dụng các thẻ ngữ nghĩa trong HTML5 để trình bày trang web đơn giản.

Nội dung

1. Đề bài

Sử dụng các thẻ ngữ nghĩa (semantic elements) trong HTML5 gồm: section, article, aside, header, footer, nav, details, figure để trình bày trang web sau:

Live demo: https://ttnguyenblog.github.io/bai-thuc-hanh-2b/

Source: https://github.com/ttnguyenblog/bai-thuc-hanh-2b

2.Phân tích

Thẻ <header>

Trong HTML, thẻ <header> được sử dụng để định nghĩa phần đầu của một trang web. Thẻ <header> thường chứa thông tin định danh của trang web hoặc phần đó, bao gồm tiêu đề, logo, menu điều hướng, hoặc các thành phần khác liên quan đến phần đầu trang.

Ví dụ, bạn có thể sử dụng thẻ <header> để tạo một phần tiêu đề cho trang web như sau:

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <header>
         <h1>Tiêu đề trang web</h1>
         <nav>
            <ul>
               <li><a href="#">Trang chủ</a></li>
               <li><a href="#">Giới thiệu</a></li>
               <li><a href="#">Dịch vụ</a></li>
               <li><a href="#">Liên hệ</a></li>
            </ul>
         </nav>
      </header>
   </body>
</html>

Trong ví dụ trên, thẻ <header> được sử dụng để bao gồm tiêu đề của trang web (<h1>) và một menu điều hướng (<nav>) bên trong.

Lưu ý rằng thẻ <header> thường được đặt trong phần <body> của tài liệu HTML và được sử dụng một lần duy nhất trong mỗi trang hoặc phần của trang.

Thẻ <nav>

Trong HTML, thẻ `<nav>` được sử dụng để định nghĩa một phần hoặc khối chứa các liên kết điều hướng trên một trang web. Thẻ `<nav>` thường được đặt trong thẻ `<header>` hoặc `<footer>` để tạo ra các menu điều hướng chính hoặc menu điều hướng chân trang.

Trong ví dụ trên, thẻ `<nav>` bao gồm một danh sách không sắp xếp (`<ul>`) chứa các mục menu (`<li>`) và các liên kết (`<a>`) đến các trang tương ứng.

Lưu ý rằng thẻ `<nav>` chỉ định rằng các liên kết bên trong nó là các liên kết điều hướng và không phải là các liên kết khác. Sử dụng thẻ `<nav>` giúp trình duyệt và các công cụ hỗ trợ khác nhận biết và hiểu rõ về tính chất điều hướng của các liên kết trong menu.

Thẻ <figure>

Trong HTML, thẻ <figure> được sử dụng để nhóm các phần tử liên quan với một hình ảnh, biểu đồ, sơ đồ, hoặc các phương tiện trực quan khác. Thẻ <figure> thường được sử dụng kèm với thẻ <figcaption> để định nghĩa chú thích hoặc mô tả cho phần tử hình ảnh.

Dưới đây là một ví dụ về cách sử dụng thẻ <figure> và <figcaption>:

<figure>
  <img src="chia-khoa.png" alt="Chìa khoá thành công" width="300px">
  <figcaption>Hình 1. Chìa khoá thành công</figcaption>
</figure>

Trong ví dụ trên, thẻ <figure> bao gồm một hình ảnh (<img>) và một chú thích (<figcaption>). Thuộc tính src của thẻ <img> được sử dụng để chỉ định đường dẫn của hình ảnh. Thuộc tính alt định nghĩa văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiển thị. Thuộc tính width được sử dụng để định nghĩa chiều rộng của hình ảnh.

Phần chú thích hoặc mô tả của hình ảnh được đặt bên trong thẻ <figcaption>. Trong ví dụ trên, chúng ta có chú thích “Hình 1. Chìa khoá thành công”.

Thẻ <details>, <summary>

Trong HTML, thẻ <details> được sử dụng để tạo một phần tử có khả năng hiển thị hoặc ẩn nội dung chi tiết khi người dùng tương tác với nó. Thông thường, <details> được sử dụng kết hợp với thẻ <summary> để cung cấp một tiêu đề hoặc mô tả cho nội dung được ẩn.

Dưới đây là một ví dụ về cách sử dụng thẻ <details> và <summary>:

<details>
  <summary>Thông tin chi tiết</summary>
  <p>Đây là nội dung chi tiết mà bạn muốn hiển thị hoặc ẩn đi.</p>
</details>

Trong ví dụ trên, thẻ <details> bao gồm một tiêu đề (<summary>) và một phần tử nội dung (<p>). Khi trang web được tải, nội dung bên trong thẻ <details> mặc định sẽ được ẩn đi. Khi người dùng nhấp vào tiêu đề (<summary>), nội dung sẽ được hiển thị hoặc ẩn đi tuỳ thuộc vào trạng thái hiện tại của nó.

Trên đây là hướng dẫn làm bài thực hành số 2b lập trình web cơ bản. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.