In: Computer Science
Assume that there is an image “fewa.jpg” in the root of the HTML folder. Write HTML code to insert that image with appropriate alternative text. Also, apply an appropriate title to the image.?
Let's Assume a directory Structure,
Now Let's See How we used the same Image "Fewa.jpg" in all the three HTML Files- ABC.html, XYZ.html, LMN.html placed at different locations.
XYZ.html- In this Since XYZ.html and The Image are in same folder hence we didn't do anything special simply use <img src="Fewa.jpg", It works fine
<html>
<body>
<center><h1> Inserting Image </h1>
<img title="Your Title" src="Fewa.jpg"></center>
</body>
</html>
ABC.html- In this case we are in HTML folder and image is in Images folder so we have to first go in that foler by images and then take the image, images/Fewa.jpg
<html>
<body>
<center><h1> Inserting Image </h1>
<img title="Your Title"
src="images/Fewa.jpg"></center>
</body>
</html>
LMN.html- In this Case we are in Sub Folder and now we have to move one folder above back that's why we used "../" It will help us to get back to HTML folder, Then we can Go to images folder and then access the image.
<html>
<body>
<center><h1> Inserting Image </h1>
<img title="Your Title"
src="../images/Fewa.jpg"></center>
</body>
</html>
All the three codes are running fine doing the same work just showing the image on the web page as you can see in output below:
This title thing just shows the text you have written in title field when someone hovers over the image.
OUTPUT:
Now Whatever things we used in above code like in LMN.html we used "../" to get into one above folder, If we did not use this like:
LMN.html
<html>
<body>
<center><h1> Inserting Image </h1>
<img title="Your Title" src="Fewa.jpg"
></center>
</body>
</html>
OUTPUT
Since we have directly used the image but the image is not in the same folder as of LMN.html hence it is unable to show the image.
It shows the text which we we placed in alt, It is only used for this purpose only that if image is unable to be loaded you can display the alternaive text regarding tat image.