Dự án: Hồ Sơ Cá Nhân

Luyện tập thẻ hình ảnh và căn giữa nội dung

Dự án tạo trang web "Hồ sơ cá nhân" (Profile Card) giúp các em luyện tập cách kết hợp hình ảnh, các thẻ định danh (ID, Class) và kỹ thuật căn giữa nội dung để tạo ra một bản giới thiệu bản thân thật ấn tượng.

Kiến thức trọng tâm

HTML: img, h2, p HTML: b, i, span CSS: border-radius: 50% CSS: text-align: center CSS: width, height, border CSS: background-color, color

Các bước thực hiện chi tiết

Bước 1: Khởi tạo dự án với Sublime Text
- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai10-3.
- Trong thư mục này, tạo 2 file: index.html và style.css.
- Mẹo gõ nhanh:
  + Trong file index.html, gõ "<htm" rồi nhấn Enter hoặc Tab để hiện khung HTML.
  + Để nối CSS, gõ "<lin" rồi nhấn Enter hoặc Tab, tại mục href nhập ./style.css.

Bước 2: Tạo khung cho Hồ sơ
- Sử dụng thẻ div với một id duy nhất để tạo ra tấm thẻ hồ sơ của riêng em.
- Đảm bảo thẻ này có width phù hợp để hiển thị đẹp trên màn hình.

Bước 3: Thêm thông tin cá nhân
- Sử dụng thẻ img để chèn ảnh đại diện. Đừng quên dùng border-radius: 50% trong CSS để biến ảnh thành hình tròn nhé!
- Dùng thẻ h2 cho họ tên và p cho nghề nghiệp hoặc sở thích cá nhân.

Bước 4: Định dạng và Căn giữa
- Sử dụng text-align: center cho toàn bộ khung thẻ để mọi nội dung nằm ở chính giữa.
- Trang trí bằng border rực rỡ để làm nổi bật tấm thẻ hồ sơ của em.

Bước 5: Sáng tạo và Hoàn thiện
- Thách thức: Hãy tạo thêm nội dung để hoàn thiện tổng cộng 3 thẻ Hồ sơ cá nhân (Ví dụ: Hồ sơ của em và 2 người bạn thân).
- Thay đổi màu chữ (color) và màu nền (background-color) để mỗi hồ sơ mang một phong cách riêng biệt.
- Có thể sử dụng thẻ i để viết những câu châm ngôn thú vị cho từng người.

Gợi ý Code mẫu

HTML (index.html)

<div class="profile-card" id="my-profile">
    <img src="avatar.jpg" alt="Ảnh của em" class="avatar">
    <h2>Nguyễn Văn Thành</h2>
    <p><b>Sở thích:</b> Lập trình, Đá bóng</p>
    <p>Chào mừng bạn đến với hồ sơ của mình!</p>
</div>

CSS (style.css)

body {
  background-color: #e9ecef;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: white;
  width: 320px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* Tạo hình tròn */
  border: 4px solid #007bff;
  margin-bottom: 15px;
}

.job-title {
  color: #6c757d;
  font-weight: bold;
  text-transform: uppercase;
}

.btn {
  display: inline-block;
  margin: 10px 5px;
  padding: 8px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #0056b3;
}
💡 Mẹo nhỏ: Em có thể dùng thuộc tính text-decoration: underline để gạch chân cho tên của mình thêm nổi bật nhé!