There are so many tags in HTML
you can use while creating web pages. And one of the most used tag is “Img
” which is used to add images into web pages. This tag is a single tag which doesn’t need to be closed. You can use it’s attributes as well. The syntax of img tag is as following:
<img src=”image.jpg” />
The above one is the simplest example of img tag which adds an image and image’s name is “image” and the extension of the image is jpg, also the SRC means the source where the image is located. so it needs to be added importantly. The above example will show the image as same as it is and without any changes i.e size, borders etc.
Now let me give you some more details about img tag, look at below example:
<img src=”image.png” width=”400″ height=”300″ border=”2″ alt=”Wali’s image” title=”My image” />
In above example, I’ve added all of the HTML attributes which can be used inside img tag. Following are the attributes with explanations:
- SRC: is used for giving the image source in the tag
- Extension: image extensions are important such as .jpg, .png and .gif; and always check first which kind of picture your adding to your tag and add its own extension i.e jpg, png or .gif.
- Width: sets the with of the image in pixels
- Height: sets the height of the image in pixels
- Border: adds a border in pixels
- Alt: is used for adding an alternative text to the image for search engines
- Title: is used for giving the image a title which will appear when someone hovers mouse the image
You can use many images you want inside your document. And thus, you’re ready to use images now. Also watch below video tutorial to learn the img tag more deeply.
Video Tutorial about adding images in HTML
You can style your images by using CSS, but in HTML you can only use the above allowed attributes for your images. However, for advance designing you can always use CSS which is the beauty of websites.
To be honest, I really like HTML5 which is the future of internet and websites. So keep in mind that I’m going to share video tutorials regarding HTML5 and CSS3, so make it sure you follow this blog…
Happy New Year 2013 to all in Advance!