5 Website Development Tips To Boost Your Business Growth Exponentially
Images are a big part of any Web page. It helps to drive your point across and helps to get your site visitor’s attention.
How do you insert images into your page?
You must use this code:
<img src=”imagefile.jpg” alt=”image on your site” width=”100″ height=”100″>
The <img> tag introduces an image, the attribute src or source allows you to point to your image file. The alt attribute stands for alternative text. This is what shows up when the image cannot be shown for some reason (slow Internet connection or server is not responding). The width and height attributes determine the dimensions of the image.
Take a note that you should use the full URL of the image if it is not hosted on the same directory as your HTML document. For example:
<img src=”http://www.whereisyourimage.net/imagefile.jpg” alt=”image on another site” width=”100″ height=”100″>
The alt attribute
It is very important that you should fill in the alt attribute. At the very least, it would give people an idea what the image is all about, even if they are not able to see it.
However, the alt attribute, which is most often mistakenly called the alt tag, also serves other purposes.
For example:
- A blind person accessing your Web site via a screen reader will hear the alt attribute, allowing him or her to “see” the image you have included in your page.
- Text-based browsers and search engine spiders will be able to read the alt attribute.
Speaking of search engines, the alt attribute can also help to make your page or at least your image rank higher in search engine results pages. There is even speculation among SEO professionals that putting your keywords in the alt text actually has more weight than putting your keywords in the title or header tags. Also, image search services, such as Google Images, Yahoo Image Search and Bing Images, use the alt attribute.
The width and height attributes
When inserting an image, it would be a good practice to specify the width and height of the image. This way, the browser will know just how much space to leave for your image. This means that even though your image does not load right away, the page will still be properly laid out as if the image has already completely loaded.
It is also important to use the right proportions so that your image does not look distorted. For example, if you have an image that is 200 pixels wide and 200 pixels high, specifying a width and height of 200 pixels and 100 pixels respectively will result in the page showing a deformed image.
Align your images
It is also important to align your images. For example, you can have an image displayed at the center of the paragraph, or you could have it flushed to the right.
You could do this using the align attribute.
- To align your images to the left, use <img align=”left”>
- To align your images to the right, use <img align=”right”>
- To align your images to the middle, use <img align=”middle”>
- To align your images to the top, use <img align=”top”>
- To align your images to the bottom, use <img align=”bottom”>
The align attribute for the <img> tag, however, has already been deprecated in HTML 4.01, and if you are using HTML 5, it is not supported anymore.
You could still, however, use CSS to align your images by using the following syntax:
<img style=”float:right”>
in order to align your image to the right.
Adding links to your images
Sometimes, you will want to use an image to link to another content. It could be another page or perhaps you would want to give people a larger view of the image you have used for your page.
You can add a link to your image by using this syntax:
<a href=”page.html”><img src=”image.jpg” alt=”image with link” width=”100″ height=”100″></a>
That sounds simple enough. But what if you need to add two or more links to a single image? How do you do that?
Though it’s a bit outdated, you want to at least know about how you can create such things. An image map is what you would call a single image that has many hyperlinked areas. For example, if you have an image of a face and you would want to link the eyes to a page you call eye.html and the lips to lip.html, you would need to create an image map.
To create an image map, you would need to get the coordinates of your hot spots. Hot spots are those areas that are clickable within your image. To get the coordinates, you can use an image processing software or an online tool such as the Poor Person’s Image Mapper.
Once you know the coordinates, you can now insert an image map into your page. You can use the following syntax:
<img src=”face.jpg” usemap = #face>
<map name=face>
<area shape=rect coords=0,0,129,129 href=”eye.html”>
<area shape=rect coords=130,130,159,159 href=”lip.html”>
</map>
In this image map, the rectangular area within the coordinates (0, 0) and (129, 129) is clickable and linked to the eye.html page.
Similarly, the rectangular area within the coordinates (130, 130) and (159, 159) is also clickable, but this time it is linked to the lip.html page.
There are other shapes that you could use:
<area shape=circle coords=0,0,129,129 href=”url”>
and
<area shape=polygon coords= 0,0,129,129 .., xn,yn Href=”url”>
So that’s how you add images to your site.
Read more http://www.webdesign.org/html-for-beginners-images-part-6.22322.html
Published on: Mar 03, 2021
No Comments yet! Be the first one to write.