(3 - user rating)

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
 

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">

HTML for Beginners: Images (Part 6)

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:

  1. 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.
  2. 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

Comments   

0 #186 aazPhype 2019-01-21 17:15
buy cialis online canadian pharmacy cialis pills buy cialis online usa
Quote | Report to administrator
0 #185 bdbNeunc 2019-01-20 14:38
cialis online pharmacy cialis without a prescription cialis for sale online
Quote | Report to administrator
0 #184 kkostosy 2019-01-19 23:59
canadian generic viagra viagra without a prescription buy generic viagra online
Quote | Report to administrator
0 #183 nnqAnema 2019-01-19 22:48
buy viagra online cheapest viagra brand name can you buy real viagra online
Quote | Report to administrator
0 #182 bbtgoara 2019-01-19 05:53
is there a generic viagra pill online generic viagra marley drug generic viagra
Quote | Report to administrator
0 #181 ntgHeexy 2019-01-18 16:37
when will generic viagra be available in the us generic viagra india when is generic viagra available
Quote | Report to administrator
0 #180 nrhkeync 2019-01-18 11:35
best place to buy cialis online forum generic tadalafil best online pharmacy for cialis
Quote | Report to administrator
0 #179 nnqBoymn 2019-01-18 10:57
generic viagra canada viagra brand online generic viagra
Quote | Report to administrator
0 #178 hhuNeunc 2019-01-17 04:46
generic viagra reviews free viagra sample viagra online prescription free
Quote | Report to administrator
0 #177 befAnema 2019-01-16 19:19
cialis generic online india purchase viagra generic cialis uk online
Quote | Report to administrator
0 #176 bbrloche 2019-01-16 07:51
buy cheap viagra viagra for men where to buy viagra over the counter
Quote | Report to administrator
0 #175 nnfgoara 2019-01-16 03:11
buy viagra in canada new viagra best place to buy viagra online
Quote | Report to administrator
0 #174 ddbFoesk 2019-01-15 12:12
viagra cialis generic viagra use viagra generic canada
Quote | Report to administrator

Add comment


YOUR SUCCESS IS OUR SUCCESS

 

 

OUR BUSINESS MANAGEMENT

Maecenas et faucibus arcu. Quisque congue diam ac vulputate finibus. Fusce sed neque dictum, porta sapien quis, vehicula orci.

management1 f9b07

CHAIRMAN

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management2 b741d

DIRECTOR

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management3 b694d

PRESIDENT

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management4 b4f56

MANAGER

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management5 daffa

SUPERVISOR

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management6 00f9d

ACCOUNTANT

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management7 5e1be

LAWYER

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

management8 2fab9

TEAM LEADER

 

Lorem ipsum dolor sit amet cursus consectetur adipiscing elit curabitur maximus augue consectetur.

$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore
$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore
$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore
$489.00 each Cyford PBX Phone System
5 5 1 Product
Item not sold anymore