Ngày 4/365: Chèn Hình Ảnh Trong HTML Để Tăng Tính Tương Tác

Xin chào và chào mừng bạn đến với Ngày 4! Mình là Dhanian, và mình rất vui khi thấy bạn tiếp tục hành trình này. Cho đến bây giờ, các trang web của bạn đã có thông tin và cấu trúc tốt, nhưng chúng thiếu một thành phần quan trọng để tạo nên web hiện đại: nội dung hình ảnh.

Hôm nay, chúng ta sẽ thay đổi điều đó. Chúng ta sẽ học cách chèn hình ảnh, làm cho các trang của bạn trở nên hấp dẫn, minh họa và chuyên nghiệp hơn. Chúng ta cũng sẽ đề cập đến một trong những thực hành quan trọng nhất trong phát triển web: thiết lập thuộc tính alt cho khả năng truy cập.

Hãy biến lời nói của chúng ta thành một câu chuyện trực quan.

Thẻ <img>: Yếu Tố Hình Ảnh

Thẻ <img> là gì?

Thẻ <img> được sử dụng để chèn một hình ảnh vào tài liệu HTML. Đây là một thẻ tự đóng, có nghĩa là nó không có thẻ đóng riêng biệt như </img>. Bạn có thể viết nó là <img> hoặc, thường hơn, là <img />.

Cách hoạt động

Khác với các phần tử mà chúng ta đã sử dụng trước đây, thẻ <img> không bao bọc nội dung. Thay vào đó, nó sử dụng các thuộc tính để chỉ định hình ảnh nào sẽ được hiển thị và cách mô tả nó. Hai thuộc tính quan trọng nhất là src và alt.

1. Thuộc tính src (Nguồn)

Thuộc tính src là gì?

Thuộc tính src là bắt buộc. Nó cho trình duyệt biết đường dẫn đến tệp hình ảnh mà bạn muốn hiển thị.

Cách sử dụng thuộc tính src

Đường dẫn có thể là:

• URL tương đối: Đường dẫn đến tệp hình ảnh nằm trên chính trang web của bạn, tương đối với tệp HTML hiện tại. Đây là phương pháp phổ biến nhất khi xây dựng trang của bạn.
• URL tuyệt đối: Địa chỉ web đầy đủ (URL) của một hình ảnh được lưu trữ trên một trang web khác.

Lưu ý quan trọng về URL tuyệt đối

Mặc dù có thể liên kết đến hình ảnh trên các trang khác (gọi là "hotlinking"), nhưng điều này thường được coi là thực hành không tốt. Nó lấy cắp băng thông từ trang khác, bạn không có quyền kiểm soát nếu hình ảnh bị di chuyển hoặc xóa, và nó có thể gây ra các vấn đề pháp lý và SEO. Bạn nên hầu như luôn sử dụng hình ảnh của riêng mình.

Ví dụ mã:

<!-- Sử dụng URL tương đối (hình ảnh nằm trong cùng thư mục với tệp HTML) -->
<img src="my-cat.jpg" />

<!-- Sử dụng URL tương đối (hình ảnh nằm trong thư mục con 'images') -->
<img src="images/website-logo.png" />

<!-- Sử dụng URL tuyệt đối (thường không được khuyến nghị) -->
<img src="https://example.com/path/to/image.jpg" />

2. Thuộc tính alt (Văn bản thay thế)

Thuộc tính alt là gì?

Thuộc tính alt cung cấp một văn bản thay thế cho hình ảnh. Đây là bắt buộc cho khả năng truy cập và các thực hành tốt nhất.

Tại sao thuộc tính alt là không thể thương lượng?

1. Đọc màn hình: Nó được đọc cho người dùng khiếm thị, cho phép họ hiểu nội dung và mục đích của hình ảnh.
2. Hình ảnh hỏng: Nếu hình ảnh không tải được (do liên kết bị hỏng, kết nối chậm, hoặc lỗi chính tả trong src), văn bản alt sẽ được hiển thị thay thế.
3. SEO (Tối ưu hóa công cụ tìm kiếm): Các công cụ tìm kiếm sử dụng văn bản alt để hiểu hình ảnh là gì, điều này có thể giúp trang của bạn xếp hạng trong tìm kiếm hình ảnh.

Cách viết văn bản alt tốt:

• Chính xác và ngắn gọn.
• Mô tả nội dung của hình ảnh và chức năng của nó nếu đó là một liên kết hoặc nút.
• Đối với hình ảnh chỉ mang tính chất trang trí mà không có giá trị thông tin, bạn có thể sử dụng thuộc tính alt rỗng (alt=""), điều này cho các trình đọc màn hình biết bỏ qua chúng.

Ví dụ mã:

<!-- Văn bản alt mô tả cho hình ảnh có ý nghĩa -->
<img src="chart-quarterly-sales.png" alt="Biểu đồ cột cho thấy tăng trưởng doanh thu 15% trong Q3 2023." />

<!-- Văn bản alt cho hình ảnh chức năng (logo liên kết về trang chủ) -->
<a href="index.html">
  <img src="logo.png" alt="Blog của Dhanian - Trở về trang chủ" />
</a>

<!-- Thuộc tính alt rỗng cho hình ảnh trang trí -->
<img src="divider-flourish.png" alt="" />

Các thuộc tính tùy chọn nhưng hữu ích

Trong khi src và alt là thiết yếu, bạn sẽ thường sử dụng hai thuộc tính tùy chọn sau:

width và height:

• Các thuộc tính này thiết lập kích thước nội tại của hình ảnh tính bằng pixel.
• Đây là một thực hành tốt để thiết lập chúng, vì nó giúp trình duyệt dự trữ không gian chính xác cho hình ảnh trước khi nó tải, ngăn chặn nội dung trang nhảy xung quanh khi hình ảnh được tải.

<img src="photo.jpg" alt="Mô tả" width="800" height="600" />

Lưu ý: Chúng ta sẽ học cách sử dụng CSS cho kích thước hình ảnh đáp ứng sau, nhưng việc sử dụng thuộc tính HTML cho kích thước nội tại là một thực hành tốt về hiệu suất.

Kết hợp Tất cả: Một Ví dụ Hoàn Chỉnh

Hãy tạo một bài viết blog du lịch đơn giản mà sử dụng hình ảnh một cách hiệu quả.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ngày 4: Chuyến Đi Leo Núi Của Tôi</title>
</head>
<body>

    <h1>Leo Núi Đường Mòn Thái Bình Dương</h1>

    <p>Cuối tuần trước, tôi đã tham gia một chuyến đi leo núi ngoạn mục qua một đoạn của PCT. Dưới đây là một số điểm nổi bật từ hành trình.</p>

    <!-- Hình ảnh chính với văn bản alt mô tả -->
    <img src="images/hike-panorama.jpg" alt="Khung cảnh toàn cảnh của dãy núi từ Đường Mòn Thái Bình Dương vào một ngày nắng" width="1000" height="400" />

    <h2>Động Vật Hoang Dã</h2>
    <p>Một trong những phần tuyệt vời nhất của chuyến đi là động vật hoang dã mà chúng tôi gặp phải.</p>

    <!-- Hình ảnh minh họa một điểm cụ thể -->
    <img src="images/deer-on-trail.jpg" alt="Một con nai mule tò mò đứng trên đường mòn, nhìn về phía máy ảnh" width="800" height="600" />

    <p>Con nai thân thiện này đã quan sát chúng tôi đi qua trong vài phút!</p>

    <h2>Trang Bị Cần Thiết</h2>
    <p>Đây là những gì có trong ba lô của tôi:</p>
    <ul>
        <li>Giày leo núi chắc chắn</li>
        <li>Bình nước 3L</li>
        <li>Bản đồ địa hình và la bàn</li>
    </ul>

    <!-- Hình ảnh của trang bị, đặt sau danh sách để cung cấp ngữ cảnh -->
    <img src="images/hiking-gear-laid-out.jpg" alt="Trang bị leo núi được trải trên một cánh đồng cỏ, bao gồm giày, ba lô, bình nước và bản đồ" width="800" height="600" />

    <p>Nhớ <a href="https://lnt.org" target="_blank">Không Để Lại Dấu Vết</a> trong những cuộc phiêu lưu của bạn!</p>

</body>
</html>

Thách Thức Ngày 4 của Bạn:

1. Tạo một thư mục mới có tên images bên trong thư mục dự án của bạn.
2. Tìm 2-3 hình ảnh mà bạn có quyền sử dụng (ví dụ: hình ảnh của riêng bạn, hình ảnh miễn phí từ các trang như Unsplash hoặc Pexels). Lưu chúng vào thư mục images của bạn.
3. Tạo một tệp HTML mới có tên gallery.html.
4. Xây dựng một trang trưng bày những hình ảnh này. Trang của bạn nên:
   • Có tiêu đề và đoạn giới thiệu.
   • Sử dụng thẻ <img> để hiển thị mỗi hình ảnh.
   • Sử dụng đường dẫn tương đối cho thuộc tính src (ví dụ: src="images/your-image.jpg").
   • Bao gồm thuộc tính alt có ý nghĩa và mô tả cho từng hình ảnh.
   • Tùy chọn, thiết lập width và height cho hình ảnh của bạn.
   • Sử dụng tiêu đề và đoạn văn để cung cấp ngữ cảnh cho từng hình ảnh.
5. Mở trang của bạn trong trình duyệt. Kiểm tra nó! Hãy thử đổi tên một trong các tệp hình ảnh trong thư mục images để tạo ra một liên kết hỏng và xem văn bản alt của bạn xuất hiện như thế nào.

Bạn đã mở khóa khả năng tạo ra các trang web phong phú về hình ảnh, có khả năng truy cập và chuyên nghiệp. Đây là một bước tiến lớn.

Chúc mừng bạn đã hoàn thành tốt hôm nay. Hẹn gặp lại bạn vào Ngày 5.

Xây dựng một nền tảng vững chắc là chìa khóa để trở thành một nhà phát triển full-stack. Cuốn ebook của mình, "Cẩm Nang Nhà Phát Triển Full-Stack Hoàn Chỉnh," cung cấp kiến thức có cấu trúc và các dự án thực tiễn mà bạn cần để nắm vững những điều cơ bản này và mọi thứ tiếp theo.

https://codewithdhanian.gumroad.com/l/gzjvj

— Dhanian