SƠ LƯỢC NỘI DUNG
Thẻ HTML img được sử dụng để hiển thị hình ảnh trên trang web. Thẻ HTML img là thẻ trống chỉ chứa các thuộc tính, thẻ đóng không được sử dụng trong phần tử ảnh HTML.
Ví dụ về hình ảnh HTML.
<h2> Ví dụ về hình ảnh HTML </h2 > <img src = “good_morning.jpg” alt = “Chào buổi sáng các bạn” />
Các thuộc tính của thẻ HTML img
Src và alt là các thuộc tính quan trọng của thẻ HTML img. Tất cả các thuộc tính của thẻ hình ảnh HTML được đưa ra dưới đây.
1) src
Nó là một thuộc tính cần thiết mô tả nguồn hoặc đường dẫn của hình ảnh. Nó hướng dẫn trình duyệt tìm kiếm hình ảnh trên máy chủ ở đâu.
Vị trí của hình ảnh có thể nằm trên cùng một thư mục hoặc một máy chủ khác.
2) alt
Thuộc tính alt xác định văn bản thay thế cho hình ảnh, nếu nó không thể được hiển thị. Giá trị của thuộc tính alt mô tả hình ảnh bằng từ ngữ. Thuộc tính alt rất hữu ích cho việc SEO website
3) Width
Nó là một thuộc tính tùy chọn được sử dụng để chỉ định chiều rộng để hiển thị hình ảnh. Nó không được khuyến khích bây giờ. Bạn nên áp dụng CSS thay cho thuộc tính width.
4) Height
Nó nâng chiều cao của hình ảnh. Thuộc tính chiều cao HTML cũng hỗ trợ các phần tử iframe, hình ảnh và đối tượng. Nó không được khuyến khích bây giờ. Bạn nên áp dụng CSS thay cho thuộc tính height.
Sử dụng thuộc tính chiều cao và chiều rộng với thẻ img
Bạn đã tìm hiểu về cách chèn hình ảnh vào trang web của mình. Bây giờ nếu chúng ta muốn điều ch ỉnh chiều cao và chiều rộng để hiển thị hình ảnh, thì chúng ta có thể đặt nó với thuộc tính chiều cao và chiều rộng của hình ảnh.
<img src = "animal.jpg" height = "180" width = "300" alt = "ảnh động vật"> Sử dụng thuộc tính alt
Chúng ta có thể sử dụng thuộc tính alt với thẻ. Nó sẽ hiển thị một văn bản thay thế trong trường hợp không thể hiển thị hình ảnh trên trình duyệt. Sau đây là ví dụ cho thuộc tính alt:
- < img src = “animal.png” height = “180” width = “300” alt = “ảnh động vật” >
Làm cách nào để lấy hình ảnh từ thư mục khác?
Để chèn hình ảnh vào web của bạn, hình ảnh đó phải có trong cùng thư mục nơi bạn đã đặt tệp HTML. Nhưng nếu trong một số trường hợp, hình ảnh có sẵn trong một số thư mục khác thì bạn có thể truy cập hình ảnh như sau:
- < img src = “E: /images/animal.png” height = “180” width = “300” alt = “ảnh động vật” >
Trong câu lệnh trên, chúng ta đã đặt image trong đĩa cục bộ E ——> thư mục images ——> animal.png.
Lưu ý: Nếu URL src không chính xác hoặc sai chính tả thì nó sẽ không hiển thị hình ảnh của bạn trên trang web, vì vậy hãy cố gắng đặt đúng URL.
Sử dụng thẻ <img> làm liên kết
Chúng tôi cũng có thể liên kết một hình ảnh với trang khác hoặc chúng tôi có thể sử dụng một hình ảnh làm liên kết. Để thực hiện việc này, hãy đặt thẻ <img> bên trong thẻ <a>
.<a href = "https://trogiupnhanh.com" ><img src = "robot.jpg" height = "100" width = "100"> </ một > Trên đây là một số ví dụ về sử dụng thẻ hình ảnh để trang trí trong HTML. Bạn có thể căn chỉnh kích thước của hình ảnh sao cho phù hợp với thiết kế khung của Website.