Images
Images
In HTML, images can be added to a web page using the <img> tag. The <img> tag is a self-closing tag, which means it does not require a closing tag.
The <img> tag has several attributes that can be used to specify the source, size, and other properties of the image. Here are some of the most commonly used attributes:
- src: This attribute specifies the URL of the image file.
- alt: This attribute specifies alternative text for the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.
- width: This attribute specifies the width of the image in pixels or as a percentage of the width of the containing element.
- height: This attribute specifies the height of the image in pixels or as a percentage of the height of the containing element.
- title: This attribute specifies a tooltip text that is displayed when the user hovers over the image.
Here’s an example of how to add an image to an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>Welcome to my HTML page</h1>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20300'%3E%3C/svg%3E" alt="A beautiful image" width="500" height="300" data-lazy-src="myimage.jpg"><noscript><img decoding="async" src="myimage.jpg" alt="A beautiful image" width="500" height="300"></noscript>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
In this example, the <img> tag is used to add an image to the web page. The src attribute specifies the URL of the image file, while the alt attribute specifies alternative text for the image. The width and height attributes specify the dimensions of the image, while the title attribute specifies a tooltip text that is displayed when the user hovers over the image.
Note that the src attribute is required for the <img> tag, as it specifies the URL of the image file. If the URL is invalid or the file cannot be found, the image will not be displayed on the web page.