When it comes to beauty and attractiveness of your webpage images are essential part for it. In this tutorial you will learn how you can make your webpage beautiful with the help of images.
To add images into your webpage you use <img> tag. Image tag has no closing tag it is an empty tag which only contains attributes.
Here is an simple example.
OUTPUT
As you can see in the output that our image is on the whole webpage, what you can do is set the width and height of the image to fix and you can also give title to your image by using title attribute and you can also add alt text. ALT is a text which is placed when image will be failed to load.
Here is an example.
Before output let’s talk about the code a bit.
1st: you can see that <img> tag is single tag.
2nd: We have SRC in which we we tell the browser that in which directory we have our image.
3rd: ALT attribute which as explained above will be shown in place of image when it will be unable
to load.
4th: We used style attribute to set the width and height of the image.
5th: Title attribute, when you hover your mouse over the image you will see that a text will appear
that’s what you type in your <title> tag.
Now let's see the output.
You can also use your image as a link. To do so you just have to insert image tag within <a> anchor tags. Like this
Let’s run the code.
In the output check the URL of the page it says image.html, and when we hover our mouse on the image it will show hand sign to click which will open the link hidden in image. Let’s click on the image and see what happens.
So when we click on the image it takes us to the URL table.html you can see in the output above.
About SRC attribute, you can use image from any other URL just copy and paste the URL in the SRC.
I hope now you have an idea on how to use images practice as much as you can in next tutorial we will create a simple webpage with the help of tags which we have learned. Just keep doing practice.