In HTML, images are defines with the tag. The img tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, we need to use the src attribute. src stands for “source”. The value of the src attribute is the URL of the image we want to display on our page.
Syntax
<img> src = “url” />
<img> Tag Syntaxes
- <body background=”URL”> . . . . </body>
- Sets the background of the page to use the given image.
- <img src=”URL” | “name” height=”n” width=”n” [alt=”string’] [align=”top”|”center”|”bottom” ] [usemap=”URL”]>.
- Displays an inline image i.e., an image appears in the body of the text.
- <a href = “URL” >text message </a>
- Uses an ordinary hypertext link and URL should point the image file.
- <a href = “URL”><img src = “filename”></a>
- Uses an image for hyper link.
- <img src = “URL” usemap = “URL”>
- To display the source image and to map the second URL. Web Technologies.
- <area shape = “circle” | “rect” | “poly” | “default” href = “URL” cords= “string” alt= “string”>
- Creates a clickable area on an image map. The attribute “alt=”string” indicates for the reader of where the link goes.
Example
<html>
<body>
<h1>An image:<h1>
<p>
<img src="https://images.unsplash.com/photo-1529429617124-95b109e86bb8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9&s=4be6f29d095bc56cb800cc08ea6b3480" width="300"
height="300" />
</p>
</body>
</html>
- Each shape is defines by co-ordinates pairs of the integers which give location of the image in pixels.
- The default location does not require coordinates is used to indicate what happens if the user clicks outside of the mapped areas. Each image map can have only one default.
- A rectangle has four coordinates which are pair . The first pair defines the top left corner and second pair is the bottom right corner of the area.
- A circle is define by its center and its radius. The center is given by a pair of values , the radius by a single value. Therefore this requires just three values in the coordinate string.
- A polygon is made from a set of coordinates with the last pair list being join to the first to complete the shape.
Background Images
The following example demonstrates how to add a background image to an HTML page.
Example
<html>
<body background="https://www.technocrazed.com/wp-content/uploads/2015/12/HD-purple-wallpaper-image-to-use-as-background-121.jpg">
<font color=”black”>
<h1>A background image</h1>
</font>
</body>
</html>
Alt attribute
The alt attribute is use to define an alternate text for an image. The alt attribute tells the reader what he or she is missing on a page if the browser can’t load images. The browser will then display the alternate text instead of the image.
Example
<html>
<body>
<p>
<img src="https://assets.wallpapersin4k.org/uploads/2017/04/God-Ganesh-Wallpaper-Download-22.jpg" alt=”ganesha”>
</p>
</body>
</html>
<Video> tag
This tag is use to play video on webpage is knows as Video tag
Attribute:-
- Src.
- Height.
- Width.
- Controls.
- Muted.
- Autoplay.
- Loop
Example
<html>
<head>
<title>video player</title>
</head>
<body>
<center>
<video autoplay="true" controls="" autoplay="">
<source src="kota.mp4" tpye="video.mp4">
</video>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about HTML order list please check Wikipedia link click here.
Stay Connected Stay Safe. Thank you
0 Comments