1.2 Thực hành: Dựng khung trang CV

30 phút đọc

Đề bài

Tạo file index.html cho trang CV cá nhân, chỉ dùng HTML (chưa cần CSS), gồm:

- header: họ tên (h1), vị trí mong muốn, thanh nav liên kết tới các phần trong trang. - main gồm các section: Giới thiệu, Kỹ năng, Học vấn, Dự án. - footer: email và năm.

Dùng đúng thẻ ngữ nghĩa và kiểm tra trang hợp lệ tại validator.w3.org.

Lời giải tham khảo

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CV - Nguyễn Văn An</title>
</head>
<body>
  <header>
    <h1>Nguyễn Văn An</h1>
    <p>Lập trình viên Frontend</p>
    <nav>
      <a href="#gioi-thieu">Giới thiệu</a>
      <a href="#ky-nang">Kỹ năng</a>
      <a href="#hoc-van">Học vấn</a>
      <a href="#du-an">Dự án</a>
    </nav>
  </header>

  <main>
    <section id="gioi-thieu">
      <h2>Giới thiệu</h2>
      <p>Mình yêu thích xây dựng giao diện web đẹp và dễ dùng.</p>
    </section>

    <section id="ky-nang">
      <h2>Kỹ năng</h2>
      <p>HTML, CSS, Python</p>
    </section>

    <section id="hoc-van">
      <h2>Học vấn</h2>
      <article>
        <h3>Kavoria Academy</h3>
        <p>2025 - 2026</p>
      </article>
    </section>

    <section id="du-an">
      <h2>Dự án</h2>
      <article>
        <h3>Quản lý thư viện</h3>
        <p>Ứng dụng Python OOP quản lý mượn trả sách.</p>
      </article>
    </section>
  </main>

  <footer>
    <p>Email: [email protected] - 2026</p>
  </footer>
</body>
</html>

Liên kết href="#ky-nang" sẽ cuộn tới phần tử có id="ky-nang" trong cùng trang.

Đọc xong rồi? Đánh dấu để lưu tiến độ nhé.