HTML

Tự tạo trang giới thiệu bản thân bằng HTML đơn giản và đẹp mắt

Đã đăng trên 24 Tháng 6, 2025 bởi le nhut

24
Th6

Tạo một trang giới thiệu bản thân (còn gọi là personal profile page) là bài tập thực tế đầu tiên dành cho người học HTML. Bài viết này sẽ hướng dẫn bạn từng bước tạo ra một trang đơn giản, đẹp mắt, chỉ bằng HTML.

1. Cấu trúc nội dung trang

Bạn nên chia nội dung thành các phần sau:

Tiêu đề trang
Ảnh đại diện (avatar)
Thông tin cá nhân: họ tên, nghề nghiệp, email
Giới thiệu ngắn gọn
Danh sách kỹ năng hoặc sở thích

2. Mẫu code trang giới thiệu cá nhân

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Giới thiệu bản thân</title>
</head>
<body>
  <h1>Nguyễn Văn A</h1>
  <img src="avatar.jpg" alt="Ảnh đại diện" width="150">
  <p><strong>Ngành:</strong> Lập trình web</p>
  <p><strong>Email:</strong> nguyenvana@example.com</p>

  <h2>Giới thiệu</h2>
  <p>Tôi là một người yêu thích công nghệ, đam mê lập trình và sáng tạo giao diện web đẹp mắt.</p>

  <h2>Kỹ năng</h2>
  <ul>
    <li>HTML, CSS, JavaScript</li>
    <li>Thiết kế responsive</li>
    <li>Làm việc nhóm, kỹ năng giao tiếp</li>
  </ul>
</body>
</html>

3. Lời khuyên khi tạo trang giới thiệu

Chọn ảnh đại diện rõ nét, thân thiện.
Nội dung ngắn gọn, dễ đọc.
Có thể thêm nút “Tải CV” hoặc liên kết đến mạng xã hội.

Bài tiếp theo: Sự khác nhau giữa các thẻ div, span, section, article trong HTML – dùng sao cho đúng và chuẩn SEO

le nhut

Để lại một bình luận Hủy