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>
Điều chỉnh cỡ ảnh hiện thị bạn có thể chỉ ra chiều rộng và chiều cao của ảnh thông qua thuộc tính
width và height.
Đơn vị sử dụng là pixel px hoặc phần trăm %
<html>
<head>
<title>Thẻ IMG</title>
</head>
<body>
<img src="flower.jpg" height="150px" width="150px" alt="" />
<!-- hoặc -->
<img src="flower.jpg" height="50%" width="50%" alt="" />
</body>
</html>
Khi sử dụng ảnh trong trang web, sẽ mất thời gian để tải ảnh về và hiện thị, nên bạn cần lưu ý chọn cỡ ảnh gốc sao cho phù hợp với yêu cầu hiện thị của trang
Đường viền khung ảnh - border
Mặc định, anh không có đường viền bao quanh. Để tạo đường viền bao quanh ảnh sử dụng thuộc tính
border và chỉ ra kích cỡ của đường viền theo đơn vị px
Viết code HTML, có một số URL ảnh sau:
- https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-004.png
- https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-005.png
- https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-006.png
Hãy viết code hiện thị ảnh và xem kết quả ra sao ở hộp sau:
