Hey guys!! Welcome to flower brackets blog. Today we are going to learn inserting images in html.
In this post we will be seeing how we can insert images in our web pages.
Example: Learn Inserting Images In Html
Now to insert an image in a web page you have to use the “img” tag in html.
So, before i show you guys the output of html document that i have below in my text editor,
<!DOCTYPE html> <html> <head> <title>Learn Inserting Images In Html</title> </head> <body> <center><font size = "5"><p>Lamborghini Gallardo Spyder</p></font></center> <img src = "Lamborghini Gallardo Spyder HD Wallpaper.jpg" height = "50%" width = "80%"> </body> </html>
And before i explain the text in it, i’m going to show you the image that i will be inserting in the web page.
This is the image lamborghini gallardo spyder car.
Let’s say we are making a car website and we want to text “Lamborghini Gallardo Spyder” to be at the center of the website with a font size of 5.
You have that font size. We have to use the font tag and we have checked out the font tag in the previous post.
Since we want “Lamborghini Gallardo Spyder” at the center of the page we are also using the center tag.
Ok here the sequence of tags is like this; i have the center tag first and then i have the font tag set to size 5.
Then i finally have the paragraph tag to have the text. So i will be closing the tags in the reverse order.
I will first close the paragraph tag and then i will be closing the font tag and then finally close the center tag.
Right and then i have the “img” tag. Between the lesser than symbol and the greater than symbol i have the text “img” which is the short form for image.
And then you have to give value to the source attribute or the “src” attribute of the image tag.
You type in “src” which is the name of the attribute and then you put in the equal to symbol and then within double quotes you type in the name of the file.
If the file is in the same directory as the html document as in the case shown above; i have the image “Lamborghini Gallardo Spyder.jpg” the one that just showed you in the same folder as i have in this document.
Also Read – Hover HTML Example
In this case you do not have to mention the entire path of the file. But let’s say i had this in the documents folder or the images folder of my system.
In that case i would have to type in the entire path of image file. I have also set a value for the height attribute of this image file.
I have set the height to 50% of the original height and i have also set the width of the image to 80% of the original width.
These two attributes are actually not required. They are not necessary. You do not have to give them values.
Like if i will not include the height attribute here then by default 100% of height would be included in the web page.
Since i want 50% of it to be included i would have to keep it here.
Then to close it you do not have to close it in the traditional way of slash (/img) image.
You could just type in a slash at the end and then just have in the closing angular bracket.
I will save the above file and open it in my web browser. So this is how it looks,
We have the text “Lamborghini Gallardo Spyder” at the center as we expected and then we have this image.
So this is how easy it is to insert images in web pages in html. You just have to use the “img” tag. That’s it for this post.
I hope you have understood the image tag. If you like this post share it across or subscribe to flower brackets.