Hình ảnh · Lập trình với Martin

Thêm ảnh và hình vào website – và học cách sắp xếp gọn gàng trong thư mục.

Xem này: thẻ hình ảnh

Hình ảnh được thêm bằng thẻ <img>:

<img src="images/school.jpg" alt="Our school building">

Hai điều cần giải thích:

src (source) nói ảnh ở đâu. Ở đây: trong thư mục images, file school.jpg.
alt (alternative) là mô tả văn bản của ảnh. Nó hiện nếu ảnh không tải được, và được đọc to cho người khiếm thị. Luôn điền vào – vừa lịch sự vừa là chuẩn của chuyên nghiệp.

Chú ý thêm: <img> không có thẻ đóng. Nó không “bọc” gì, chỉ chèn vào – một số thẻ hoạt động như vậy.

💡

Lấy ảnh ở đâu? Ảnh của bạn (nhờ bố mẹ gửi vào máy tính), tranh vẽ scan hoặc chụp – hoặc ảnh miễn phí từ trang như pixabay.com. Đừng lấy ảnh từ Google – hầu hết thuộc về ai đó và không được dùng không phép.

Gọn gàng: thư mục cho ảnh

Trong VS Code, bên trong thư mục my-website, tạo thư mục mới và đặt tên images (biểu tượng thư mục có dấu cộng ở góc trên trái).
Sao chép 2–3 ảnh vào đó. Bạn thậm chí có thể kéo thả thẳng vào VS Code.
Đổi tên đơn giản: chữ thường, không dấu, không khoảng trắng. Kiểu như school.jpg, field.jpg, trip-mountains.jpg. Sẽ đỡ đau đầu nhiều.

Lượt của bạn 💪

Thêm ít nhất hai ảnh vào trang phù hợp nội dung (có thể một ngay dưới tiêu đề chính và một trong chương).

🏫 Website trường – giải pháp

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 Website cá nhân – giải pháp

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 Nhật ký du lịch – giải pháp

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ Website câu lạc bộ – giải pháp

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

Ảnh không hiện? Kiểm tra: 1) tên trong code khớp chính xác tên file (kể cả hoa thường!), 2) ảnh thật sự trong thư mục images, 3) bạn không quên lưu và làm mới trang. Tìm thêm trợ giúp ở chương Khi có gì đó không hoạt động.

✅

Tự kiểm tra: Bạn thấy ảnh trên trang. Có thể quá to hoặc bị méo – không sao, chúng ta sẽ sửa kích thước khi học CSS.

Điều cần nhớ từ bài này

Thẻ <img src="..." alt="..."> chèn ảnh – không có thẻ đóng.
alt mô tả ảnh bằng lời. Luôn điền vào.
Giữ ảnh trong thư mục images, đặt tên đơn giản: chữ thường, không khoảng trắng hay dấu.