This is a printer friendly version of Simple Image HTML Tags.

Simple Image HTML Tags

This article shows some simple image HTML tags which will enable you to add images to your web pages. Image hyperlinks are not covered on this page.

HTML Image Code
HTML Size Of Image
HTML Image Mouseover Tag
Image Border HTML Code
HTML Image Code Generator

If you use a WYSIWYG web site design software, or a general HTML editor, you will notice that in most cases, those applications have an automatic HTML image code generator built in.

However, as far as web design goes, it is always handy to know the HTML image code because sometimes it it just a lot easier to quickly add it in by hand.

HTML Image Code

The following HTML code will display an image into a web page. The path to the image in this example is an absolute (full URL) path defined by the src attribute.

This is one of the most simple image HTML tags available because it has no other attributes other than the src attribute. When using this Tag, as-is, it is important to remember the actual size of the image will display on the page.

HTML Code For Adding A Image

Output

If you right mouse click on the above image and select "properties" from the menu, you will notice that the "Address" URL is the same as the value of the src attribute.

HTML Size Of Image

In order to display a size other than the actual size of the image, it is necessary to add width and height attributes to the image tag.

The code below will reduce the display size of the above image by 20%. I have used a calculator to subtract 20% from the original size of image which is 360 x 240.

HTML Image Size Code

Output

Tip: It is not a good idea to resize an image to a greater dimension of the original size because it will not display properly. This method seems to work best when reducing the size of image.

HTML Image Mouseover Tag

Adding the alt attribute to the inline image Tag will enable you to add a description to the image. The description will be displayed when the mouse pointer hovers over the image.

Mouseover Code

Output

Sample Image

Hover your mouse over the above image to display mouseover text. The alt attribute value in the above image is "Sample Image". Insert any value which makes sense to your web site visitors.

Warning!

Do not spam the alt attribute by stuffing keywords in it!

This is an old idea among underground Web Design resources and SEO professionals which increases keyword density to a web page and is "supposed" to increase search engine rankings.

This old idea is still being circulated as a so called top ranking web site design secret by those who are not up to date with what is going on.

Fact: Top search engine ranking web site design is not dependent upon keyword stuffed alt text.
Fact: It can actually cause more harm than good.

Not only that, when you hover over an image and reveal a hundred keyword phrases stuffed into it which make no sense, it looks pretty stupid and unprofessional.

Image Border HTML Code

In order to add a border to the image, we will need to add the border attribute to the Inline Image Tag.

Image Border Code

Output

Sample Image

The above image border size is "1" defined by the border attribute. Increase the size as desired by your web design eye.

HTML Image Code Generator

1stPage 2000 Screen Shot

If you use 1st Page 2000 Free HTML Editor, you can use the "Insert Image Quickly" button to auto generate the image code.

This button is located on the Standard Palette in Expert Mode. Selecting this button will enable you to browse your hard drive to select an image.

The software will insert the image into your web page with all the above attributes included within the Tag.

The default border value is "0" and the default alt value is "". Insert your own values into these as required.