×

Notice

SMTP Error! Could not authenticate.
(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 #334 longUrl 2019-05-22 20:46
I've been exploring for a little for any high quality articles or weblog posts in this sort of house .
Exploring in Yahoo I finally stumbled upon this web site. Reading this info So i am satisfied to exhibit that I've an incredibly excellent uncanny feeling I
came upon exactly what I needed. I such a lot without a doubt will make sure to don?t fail
to remember this website and give it a glance regularly.
Quote | Report to administrator
0 #333 longUrl 2019-05-22 20:43
I've been exploring for a little for any high quality articles or weblog posts in this sort of house .
Exploring in Yahoo I finally stumbled upon this web site. Reading this info So i am satisfied to exhibit that I've an incredibly excellent uncanny feeling I
came upon exactly what I needed. I such a lot without a doubt will make sure to don?t fail
to remember this website and give it a glance regularly.
Quote | Report to administrator
0 #332 longUrl 2019-05-22 20:40
I've been exploring for a little for any high quality articles or weblog posts in this sort of house .
Exploring in Yahoo I finally stumbled upon this web site. Reading this info So i am satisfied to exhibit that I've an incredibly excellent uncanny feeling I
came upon exactly what I needed. I such a lot without a doubt will make sure to don?t fail
to remember this website and give it a glance regularly.
Quote | Report to administrator
0 #331 close 2019-05-22 19:14
Thank you so much regarding giving me personally an update on this issue
on your blog. Please be aware that if a brand-new post becomes available or in the event that any variations occur
on the current posting, I would consider reading a lot more and learning how to make good
utilization of those approaches you discuss. Thanks for your efforts and consideration of other individuals by making this blog available.
Quote | Report to administrator
0 #330 close 2019-05-22 19:11
Thank you so much regarding giving me personally an update on this issue
on your blog. Please be aware that if a brand-new post becomes available or in the event that any variations occur
on the current posting, I would consider reading a lot more and learning how to make good
utilization of those approaches you discuss. Thanks for your efforts and consideration of other individuals by making this blog available.
Quote | Report to administrator
0 #329 close 2019-05-22 19:09
Thank you so much regarding giving me personally an update on this issue
on your blog. Please be aware that if a brand-new post becomes available or in the event that any variations occur
on the current posting, I would consider reading a lot more and learning how to make good
utilization of those approaches you discuss. Thanks for your efforts and consideration of other individuals by making this blog available.
Quote | Report to administrator
0 #328 close 2019-05-22 19:05
Thank you so much regarding giving me personally an update on this issue
on your blog. Please be aware that if a brand-new post becomes available or in the event that any variations occur
on the current posting, I would consider reading a lot more and learning how to make good
utilization of those approaches you discuss. Thanks for your efforts and consideration of other individuals by making this blog available.
Quote | Report to administrator
0 #327 Alessa Serum Review 2019-05-20 17:27
Hello I am so glad I found your weblog, I really found you by mistake,
while I was browsing on Digg for something else, Regardless I am here now and would just like to say kudos for a
remarkable post and a all round entertaining blog (I also love the theme/design), I don?t have time
to read it all at the minute but I have bookmarked it and also added in your RSS feeds,
so when I have time I will be back to read a lot more, Please do keep
up the superb jo.
Quote | Report to administrator
0 #326 Alessa Serum Review 2019-05-20 17:24
Hello I am so glad I found your weblog, I really found you by mistake,
while I was browsing on Digg for something else, Regardless I am here now and would just like to say kudos for a
remarkable post and a all round entertaining blog (I also love the theme/design), I don?t have time
to read it all at the minute but I have bookmarked it and also added in your RSS feeds,
so when I have time I will be back to read a lot more, Please do keep
up the superb jo.
Quote | Report to administrator
0 #325 Alessa Serum Review 2019-05-20 17:21
Hello I am so glad I found your weblog, I really found you by mistake,
while I was browsing on Digg for something else, Regardless I am here now and would just like to say kudos for a
remarkable post and a all round entertaining blog (I also love the theme/design), I don?t have time
to read it all at the minute but I have bookmarked it and also added in your RSS feeds,
so when I have time I will be back to read a lot more, Please do keep
up the superb jo.
Quote | Report to administrator
0 #324 Alessa Serum Review 2019-05-20 17:18
Hello I am so glad I found your weblog, I really found you by mistake,
while I was browsing on Digg for something else, Regardless I am here now and would just like to say kudos for a
remarkable post and a all round entertaining blog (I also love the theme/design), I don?t have time
to read it all at the minute but I have bookmarked it and also added in your RSS feeds,
so when I have time I will be back to read a lot more, Please do keep
up the superb jo.
Quote | Report to administrator
0 #323 KetoGenesys Review 2019-05-20 16:00
We stumbled over here from a different web page and thought I
should check things out. I like what I see so i
am just following you. Look forward to checking out your web page for a second time.
Quote | Report to administrator
0 #322 KetoGenesys Review 2019-05-20 15:56
We stumbled over here from a different web page and thought I
should check things out. I like what I see so i
am just following you. Look forward to checking out your web page for a second time.
Quote | Report to administrator
0 #321 KetoGenesys Review 2019-05-20 15:53
We stumbled over here from a different web page and thought I
should check things out. I like what I see so i
am just following you. Look forward to checking out your web page for a second time.
Quote | Report to administrator
0 #320 KetoGenesys Review 2019-05-20 15:50
We stumbled over here from a different web page and thought I
should check things out. I like what I see so i
am just following you. Look forward to checking out your web page for a second time.
Quote | Report to administrator
0 #319 Amayze Life Keto 2019-05-20 15:24
Hello! I've been reading your web site for a while now and finally got the bravery to go ahead and give you a shout out from
Austin Tx! Just wanted to mention keep up the fantastic job!
Quote | Report to administrator
0 #318 hwrstosy 2019-03-30 01:07
http://cialisckajrhd.com - canada pharmacy online viagra professional canada drugs laws
Quote | Report to administrator
0 #317 wgloche 2019-03-30 00:58
http://genericcilaken.com/ - buy cialis online over the counter viagra canada drugs online
Quote | Report to administrator
0 #316 grsgoara 2019-03-29 15:21
http://buyjeacialonline.com/ - online canadian pharmacy buy viagra online prescription drugs online
Quote | Report to administrator
0 #315 hfgFoesk 2019-03-27 12:51
http://viagenericahecv.com - online pharmacy canada buy cheap viagra buy cialis online safely
Quote | Report to administrator
0 #314 bbtPhype 2019-03-27 10:54
http://viagraocns.com/# - canada online pharmacy cheapest viagra prices best place to buy cialis online forum
Quote | Report to administrator
0 #313 ggeBoymn 2019-03-27 05:46
http://menedkkr.com/# - where to buy cialis over the counter viagra brand best canadian pharmacy
Quote | Report to administrator
0 #312 gsfNeunc 2019-03-26 18:03
http://viagraveikd.com/# - online pharmacy reviews viagra reviews canadian online pharmacy
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