1.1 Phần tử <img>
Multimedia trong HTML rất quan trọng trong việc cải thiện sự trải nghiệm hình ảnh của trang web. Chèn hình ảnh là một trong những khía cạnh chính của multimedia trong HTML. Thường thì để làm điều này, người ta sử dụng phần tử <img>. Xem chi tiết hơn nào:
Phần tử <img> được thiết kế để chèn hình ảnh vào trang web. Đây là phần tử trống: nó không có thẻ đóng và chỉ bao gồm các thuộc tính.
Cú pháp
<img src="URL_ảnh" alt="Mô tả" width="Chiều rộng" height="Chiều cao">
<img src="images/photo.jpg" alt="Mô tả ảnh" width="500" height="300">
Hãy cùng xem xét các thuộc tính của phần tử <img> chi tiết hơn một chút
1.2 Thuộc tính src
Tên đầy đủ của thuộc tính src là source (nguồn).
Thuộc tính src chỉ định đường dẫn tới tập tin ảnh, cái mà sẽ hiển thị trên trang. Nó có thể là đường dẫn tuyệt đối hoặc tương đối.
Ví dụ:
URL Tuyệt đối:
<img src="https://example.com/images/photo.jpg">
Đường dẫn Tương đối:
<img src="images/photo.jpg">
URL tuyệt đối bao gồm địa chỉ đầy đủ tới ảnh, bao gồm cả giao thức (http hoặc https), tên miền và đường dẫn. Đường dẫn tương đối chỉ vị trí của tập tin so với tài liệu hiện tại, điều này tiện lợi khi làm việc với các tập tin cục bộ.
1.3 Thuộc tính alt
Tên đầy đủ: alternative text (văn bản thay thế)
Thuộc tính alt cung cấp mô tả văn bản cho hình ảnh. Văn bản này sẽ xuất hiện nếu hình ảnh không thể tải được và được sử dụng để cải thiện khả năng truy cập, vì các chương trình đọc màn hình sử dụng nó để mô tả hình ảnh cho người dùng khiếm thị.
Ví dụ:
<img src="images/sunset.jpg" alt="Ảnh chụp hoàng hôn đẹp">
Văn bản thay thế tốt giúp người dùng hiểu được nội dung của ảnh, nếu nó không thể truy cập được, và thúc đẩy cải thiện SEO (tối ưu hóa công cụ tìm kiếm) của trang.
1.4. Thuộc tính width
Thuộc tính width đặt chiều rộng của hình ảnh tính bằng pixel. Nếu thuộc tính height không được chỉ định, hình ảnh giữ nguyên tỷ lệ của nó khi thay đổi chiều rộng.
Ví dụ:
<img src="images/photo.jpg" width="500">
Sử dụng chiều rộng cố định có thể hữu ích để kiểm soát kích thước của hình ảnh, nhưng cũng cần lưu ý về sự tương thích của thiết kế.
1.5 Thuộc tính height
Thuộc tính height đặt chiều cao của hình ảnh tính bằng pixel. Nếu thuộc tính width không được chỉ định, hình ảnh giữ nguyên tỷ lệ của nó khi thay đổi chiều cao.
Ví dụ:
<img src="images/photo.jpg" height="300">
Tương tự với thuộc tính width, việc sử dụng chiều cao cố định có thể hữu ích, nhưng cần chú ý đến sự tương thích.
Ví dụ về việc sử dụng các thuộc tính cùng nhau
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
<img src="images/sunset.jpg" alt="Ảnh chụp hoàng hôn đẹp" width="500" height="300">
Trong ví dụ này, hình ảnh sẽ được tải từ tập tin images/sunset.jpg, hiển thị với chiều rộng 500 pixel và cao 300 pixel, và nếu hình ảnh không tải được, văn bản "Ảnh chụp hoàng hôn đẹp" sẽ được hiển thị.
GO TO FULL VERSION