Hình ảnh trong HTML là các phần tử nội tuyến có thể được đặt trong một đoạn văn. Để thêm hình ảnh, hãy sử dụng thẻ cùng với thuộc tính để chỉ định vị trí của hình ảnh.<img>src
<img src="copavn.com/public/home/img_demo/hinh1.jpg"> <img src="../public/home/img_demo/hinh1.jpg">
Bạn có thể sử dụng JavaScript để kích hoạt sự kiện khi hình ảnh tải xong.
<img src="/static/img/code.jpg" onload="alert('image loaded')">
Thay đổi kích thước hình ảnh có thể được thực hiện bằng cách sử dụng các thuộc tính chiều rộng và chiều cao của một hình ảnh, hoặc cách khác bằng cách sử dụng CSS:
<img src="/static/img/code.jpg" width="100"> <img src="/static/img/code.jpg" style="width: 100px">
Việc đặt thuộc tính “alt” cho hình ảnh hữu ích khi hình ảnh không thể tải hoặc khi bạn muốn thêm mô tả chú giải công cụ sẽ được hiển thị khi di chuột lên đầu hình ảnh.
<img src="/static/img/code.jpg" style="width: 100px" alt="A picture of some code">
Loại hình ảnh
Có ba loại định dạng hình ảnh chính mà bạn nên sử dụng.
- Định dạng lossless – hữu ích khi bạn cần đồ họa pixel hoàn hảo, ví dụ như cho biểu trưng. Định dạng phổ biến nhất là PNG. PNG cũng hỗ trợ tính trong suốt của alpha, nghĩa là bạn có thể sử dụng bất kỳ nền nào bạn muốn và phủ lên hình ảnh trên nền đó.
- Định dạng mất dữ liệu – hữu ích để hiển thị hình ảnh phong phú. Sử dụng định dạng lossless như PNG sẽ có thứ tự độ lớn lớn hơn nếu được sử dụng trong các hình ảnh đó. Định dạng phổ biến nhất được sử dụng trong danh mục này là JPG.
- Định dạng động – hữu ích khi hiển thị hình ảnh động ngắn. Định dạng phổ biến nhất là GIF, mặc dù nó là một định dạng rất cũ nhưng được hỗ trợ rộng rãi, với nhiều nhược điểm cố hữu, chẳng hạn như giới hạn 256 màu trên mỗi khung và nén kém.
Sử dụng thuộc tính float CSS với hình ảnh
Hình ảnh có thể được thiết lập để nổi văn bản gần đó để họ sẽ pha trộn với văn bản tốt hơn. Lưu ý việc sử dụng clearthuộc tính CSS – chỉ thị trình duyệt phá vỡ hiệu ứng nổi sau đoạn đầu tiên.
<img src="/static/img/lab.png" style="float: left;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="clear: both">Second paragraph</p>
Một con người xứ Quảng Ngãi. Hiện tại đang sinh sống và làm việc tại Buôn Ma Thuột , Đắk Lắk. Là Co-founder của CoPaVn, website chuyên chia sẽ kiến thức về marketing online, thiết kế website , Google ads, Facebook ads, Zalo ads, SEO website.