Bài 10: Thẻ <img> chèn ảnh vảo HTML

Ngày đăng: 1/5/2023 10:45:38 AM

Thẻ <img> chèn hình ảnh vào HTML

Thẻ <img> được dùng để nhúng một hình ảnh vào trang HTML. Thẻ này có vài thuộc tính và nó không có phần đóng thẻ. Địa chỉ URL dẫn đến vị trí của ảnh được xác định thông qua thuộc tính src. Cú pháp chèn ảnh có dạng:

 <img src="image.jpg" />

Vị trí URL ảnh phải nằm giữa dấu nháy kép "...", ví dụ bạn có một ảnh có tên "flower.jpg" lưu trữ cùng thư mục với file HTML, thì hiện thị ảnh có thể có dạng:

 <img src="flower.jpg" alt="" />

Trong trường hợp ảnh không hiện thị được (ví dụ ảnh bị xóa ...) thì thuộc tính alt là một văn bản thay thế sẽ hiện thị thay cho ảnh. Nói chung bất kỳ ảnh nào trong HTML thì thuộc tính alt yêu cầu nên có.

Thuộc tính src thiết lập địa chỉ ảnh, bạn có thể nhập địa chỉ ảnh đến một URL tuyệt đối, ví dụ địa chỉ https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png

 <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png" />

Thuộc tính src thiết lập địa chỉ URL của ảnh, nó có thể là địa chỉ tương đối, tuyệt đối, hay đến file ảnh cục bộ trên máy tính, hãy xem Địa chỉ URL để hiểu về cấu trúc đường dẫn này.

Thuộc tính width và height - điều chỉnh cỡ ảnh <img>

<html>
   <head>
      <title>Ví dụ về ảnh</title>
   </head>
   <body> 
      <img 
            border="4px"
            width="700px"
            src="https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-004.png" 
            alt="vi du" />
   </body>
</html>

vi du

Nguồn tin: Xuanthulab