We’ve covered the following HTML & CSS topics,
Today, we’ll cover the most important HTML tag i.e; Image tag. Image tag is defined as <img> in HTML.
It is a famous saying that a picture says thousand words. Same goes for the websites. Website can be differentiate by the quality of images it is using. Attractive images make an average-looking site engaging one. One must think of image as the reflection of thousand words described in a single piece of artifact. Most of the time, Web Developers use images to define things clearly with using less effort in writing long paragraph. Images work well in such kind of situations as they describe great many things in an easy way.
Now, we all know the importance of using images, same way we understood why images help Web Developers in creating their sites. Let’s now move to the actual usage of images in HTML by writing few code snippets.
SYNTAX FOR IMAGE TAG:
<img src="imagepath" alt="image alter text" title="any kind of title for image" height="image height in numbers" width="image width in numbers" />
ABOUT IMAGE TAG:
<img> tag adds image to your web page and it is called the standalone-tag as it ends without any ending tag. Sometimes it is also called Empty Tag which also means that there is no closing tag. Image tag has many attributes but the following are the most common ones.
<img src="Website-Designing-OnlineITGeek-8.png" alt="Website Desiging OnlineITGeek" title="Using Images In HTML - Website Designing OnlineITGeek" height="250" width="500" />
This attribute contains the value of the image path where the image is being stored. It can be a relative URL of image on your own site or absolute URL pointing some external URL on server other than ours.
This attribute defines the text for image that is relevant to image and helps when the image is not properly loading or loaded.
This attribute displays the additional image of the image when mouse is hovered over it. Mostly when you hover the mouse over the image, it will show a small tooltip containing detail of image.
This attribute defines the height of the image in pixels
This attribute defines the width of the image in pixels
Note: Height and Width attributes are now being used very less and instead Web Developers are giving height and width to images in CSS.
EXTRA IMPORTANT NOTES:
- If you are developing website from scratch, it is recommended that you always put images in a separate folder. Folder names could be “img”, “images”, “image” or so on.
- In case of extremely big website project you are dealing, you should make subfolders inside images folder to separate logos, sliders, icons and general images etc.
- Images should be very fit to the color theme you are using on your website.
- Images should deliver or shows the relevant information.
- Images should be clear and easily understandable. Blur and low quality images always lead to the bad user-experience.
- Remember three rules for images before using on your website,
- The format of images should be right one
- The size of images should be according to the section of website where you want to put image
- Last but not the least, resolution of image should be defined carefully.
Images play a very vital role in website designing. It helps web designers to explain things in an efficient way. It is recommended that you try all the techniques described in this tutorial and ask any query related to web development and web designing.