Hii guys!! Welcome to flower brackets blog. In this post we going to learn how to embed links under images in html.
Here we are going to continue our discussion on links and check out how we can embed links behind images in our web pages.
Example : learn how to embed links under images in html
I have a document here,
<!DOCTYPE html> <html> <head> <title>Learn How To Embed Links Under Images In Html</title></head> <body> <center><h2>Ford Mustang Car</h2></center> <a href = "https://www.india.ford.com/cars/mustang/"> <img src = "Black Ford Mustang Wallpaper.jpg" height = "80%" width = "80%" /> </a> </body> </html>
In the body section I have the center tag and the <h2> heading tag and the heading of the page is “Ford Mustang Car”.
I have closed the heading tag and the center tag in the sequence.
Then I also have the <img> tag. I have included the image “Black Ford Mustang Wallpaper.jpg”.
Also Read – Learn Inserting Images In Html
That’s the name of the file and I have set the height of the image to eighty percent of the original height and the width to eighty percent of the original height.
I have closed the image tag and you know I have also wrapped anchor tag around image tag.
And the value that I have associated with the “href” attribute is the url “https://www.india.ford.com/cars/mustang/”.
Now let me show you guys this file in google chrome,
This is how it looks and you know this must be familiar because my previous post that we had on images.
In that we made you know the similar webpage. I guess it was exactly the same in fact we know we had the same heading, same font styles, same font size.
Everything was the same and except the image was different.
Right, and the only difference between that file in this is that in this file if I would click on any space on the image i would be taken to “https://www.india.ford.com/cars/mustang/” like this,
Here it is you know I have been taken to a Ford India website.
So this is how you embed links over images in html. And it is actually pretty simple and it is again you know something that’s widely used.
You have your ads and so many other things on websites when you click on those images you are taken to the websites of the vendors.
That’s it for now. I hope you understood the concept of embedding images in html.