link to hitmill.com home page

How to Code a Web Page Image

HTML Image Code Tutorial Using the Image Tag <IMG>

Code HTML images, Web page images, and how to code an image onto your Web page using the HTML image tag, <IMG>. GIFs, JPEGs, and Bitmaps. See also Introduction to Images, Introduction to Graphics Software, and Clipart Tutorial.
Free online HTML tutorial about how to code an image for your Web page with examples of image codes. The picture (image) codes are useful for gif images, jpg images, bitmap images and others.
[Web Images, Introduction to Images]  [Related Links and Image Maps]
Images are ignored by non-graphical browsers. An image "tag" is used in HTML to code an image or a photograph onto a Web page and the image will be displayed by graphical browsers recognizing that particular filename. If the browser does not recognize an image it may put up very empty squares onto the Web page instead of the image. To limit the size of the non-image squares you can code the HEIGHT="" and WIDTH="" attributes of your image inside the image tag, as discussed below. Images which are very large take a long time to download on the Web, even with DSL connections, and users trying to view your page will probably leave before your large images have completely downloaded. Keep your image files small (reduce file size in PhotoShop using File, Save for Web); use them only when they have a specific purpose and text will not suffice, and study Web graphics because there are techniques to get smaller image file sizes and to get the image to start loading onto the Web page sooner. Software programs useful in Web design include Paint Shop Pro and PhotoShop, or Adobe Illustrator, and others. See Introduction to Graphics Software. PhotoShop is especially useful in being able to slice an image into sections. Some Web sites have huge images in the banner section at the top of their page. Click on View, Source in Internet Explorer to view the code for such a page. Notice that several images make up the one larger image. This is done to facilitate faster loading of the Web page by the browser. Again, slowly loading Web pages lose Web visitors.
Cute little drawings and animations are .gif file images. Photographs are usually .jpg file images. Many logos are .jpg images. Only the .gif images can have a transparent background. An icon with a transparent background will not have a white, black, or colored block that appears on a textured web page behind the image. See the article Web Images, Introduction to Images which lists many types of image files. I have gotten .bmp images to appear on a web site but the two images most supported by the graphic browsers are the .gif and .jpg (JPEG) images.
Make a separate folder on your Web site to hold the images. If the folder is named images, you will need to reference the folder name when placing a link on a Web page.
For example:

<IMG SRC="images/stocking2.gif" ALT="stocking image"> stocking image

Let the Coding Begin

Do you know where to find online images? Do you know how to download online images which are in the public domain? Always obtain permission before using someone else's images from their own Web page unless they say that the images may be downloaded and used.
To begin coding an image you will start with the <IMG> "tag". There is no end tag for the image code. Inside the "tag" (the image element) you will want to code attributes of the IMG element and give the attributes the values of your own choice. To do this, first look at three simple examples, before I discuss the attributes of the IMG element.
You have to state the location of the image file in relation to your Web document file, using the SRC attribute <IMG SRC="[path][filename]">.
If you have an image called flower5.gif and it is in a folder called graphics, you would call the image by its folder name, a slash, and its file name: graphics/flower5.gif. If the web page and the image are in the SAME LOCATION, just call the image "flower5.gif". The SRC attribute of the image tag is set equal to the path of the image from the web page. Take a look at the following examples.
<IMG SRC="flower5.gif" BORDER="0" ALT="This is a rose">
This is for images in the same location as the Web document file. The BORDER attribute has been set to "0" (BORDER="0") because I did not want a border around the image. I used the ALT attribute so the user would get a message by holding the mouse pointer over the image, and also in case the image does not appear on the Web page (the message would still appear).
The Web page here, is in the same folder as the index.html (main web page), but a folder called graphics holds the file, "flower5.gif":
<IMG SRC="graphics/flower5.gif" BORDER="0" ALT="This is a rose.">
If the Web page is in a folder called html and the image is in a folder called graphics and both folders are in the main folder where the index.html (main page) resides:
Code as follows, <IMG SRC="../graphics/flower5.gif" BORDER="0" ALT="This is a rose.">
This is what "flower5.gif" looks like, from my own graphics file...
This is a rose.   Notice that the image in the paragraph automatically aligned to the left side.
Old way to center an image
If you want to center an image, using HTML 3.2, code all of the <IMG> information between <CENTER> and </CENTER>. This is what happens in the paragraph:

This is a rose.
No text appears on either side of an image centered using the <CENTER></CENTER> tags.
Trying a TABLE to center an image
When you learn to create tables using HTML you can make a table having 3 table cells across the page, put the image in the middle and have text on either side but positioning and centering of images is limited if just using coding tags and the older HTML 3.2.

Center Tag is Tossed Out
Note: The CENTER tag was deprecated (phased out) of HTML 4.0 and later on, browsers will stop supporting this CENTER tag.

New Way to Center Something
Use <DIV ALIGN="center"> to create a division of centered objects, then close it with </DIV>.

Using the ALT attribute of the <IMG> tag
Stop for a moment and hold your mouse pointer over one of the images above. See the pop-up message. What the message will say, is whatever you have coded into the ALT="" attribute as a value. This string message of the ALT attribute is displayed if the user has disabled images or if a browser is not able to display images.

Now I'd like to change to a different image and right align it in a paragraph. I have found an image named "xmastree3.gif" in my image file. <IMG SRC="../images/xmastree3.gif" ALIGN="right" ALT="A little Christmas tree .gif file" BORDER="0"> A little Christmas tree .gif fileThis works. The image is now right aligned in the paragraph and the text is flowing to the left of the image. The attributes of the image may be in any order inside the IMG "tag". The SRC attribute is required or the browser will not know where to find the image. There are attributes of the IMG element that can control white space above and below the image. In the next section you will learn more about the IMG attributes.

More About Image Attributes

This is a .jpg image This is a .jpg image file for which I specified a width of "70" (use quotations for values). I did not specify alignment such as ALIGN="right", so the default was to be left-aligned. I gave it a border width of "2" (BORDER="2"). A value of "3" is thicker and a value of "1" is a thinner border. If I had used BORDER="0" the image would still have the white background because that is the way this .jpg image was made. (Remember that only .gif images can have a transparent background like the image of the rose seen earlier.)
LOWSRC:  Besides the SRC attribute, Netscape provides for the LOWSRC attribute which can be a link to a much smaller image. When the browser sees the LOWSRC attribute it will load the smaller image, the rest of the Web page, then go back and load the larger SRC image, so the user gets to start reading the Web page while the other image is loading. Other browsers have not supported the LOWSRC attribute and ignore it, just loading the SRC image.
ALIGN:  The ALIGN attribute has been mentioned above. We know that we can specify ALIGN="left|center|right" and that there is not text to either side of the image with center alignment. Netscape, Microsoft Internet Explorer 4.x and 5.x and WebTV support the additional values of "absbottom|absmiddle|absbaseline|texttop" to align an image in respect to the text in a line of text.
BORDER:  Border width can be anything you specify but only some of the smaller values are resonable. Values of "5" or more begin to displace surrounding objects. The default is "1" so if you DO NOT WANT A BORDER, you must specify BORDER="0".
DYNSRC:  This is a special attribute not supported by all browsers but currently supported by Microsoft and WebTV to specify the location (URL) of a movie file. When DYNSRC is used, SRC is not used.
HEIGHT:  The height in pixels of the image.
WIDTH:  The width in pixels of the image.
HSPACE:  The horizontal space in pixels, above and below the image -- the space horizontally between the image and the surrounding text.
VSPACE:  The vertical space in pixels, on both sides of the image -- the space situated vertically between the image and the surrounding text.
ID:  An identifying reference string for the image, used for stylesheets (CSS1, CSS2) and absolute positioning. These are topics not in the realm of the new HTML student but part of the technologies of Dynamic HTML.


How to Use An Image As A Link

You may have already seen links to other pages using the <A HREF=""></A> link element. The only difference here in making an image link is that in the middle of the link element you will place your image element and attributes, just prior to the </A>. I will explain two examples, below.

Examples of Image Links

Navigating With a Button Image
In this first example I am going to use a navigation button (image) to navigate away this page to the page about "Introduction to Graphics Software". Use the Back button of the browser to return to this page. Note that button images may either be a .JPG file or a .GIF file.
The name of the image file is "bu_rainNext60.jpg". It has a width of 60 pixels. In the image tag I will use WIDTH="60". I want text to appear if someone mouses over the image and holds the cursor on the image. In the image tag I will use ALT="Next button navigates to another related page." I will have to next the image tag within the navigation set of <A HREF="[insert location and path of path of image]"> and </A>. See the button in the middle and try to navigate to another page, then use the back button of the browser to return to this page. Here, the image is located in another folder named images.
Click on the image button to navigate to a page about "Introduction to Graphics Software".
Next button navigates to another related page.
The code is as follows:
<A HREF="graphics.html"><IMG SRC="images/bu_rainNext60.jpg" WIDTH="60"
ALT="Next button navigates to another related page."></A>



Navigating With a Book Image, .JPG File
Dynamic HTML The Definitive Reference <A HREF="http://www.oreilly.com/catalog/dhtmlref2/">
<IMG SRC="../images/dhtmlref.gif" ALT="http://www.oreilly.com/catalog/dhtmlref2/; Dynamic HTML The Definitive Reference" BORDER="2" ALIGN="left" VALIGN="top" HSPACE="20"></A>
The <A HREF=""> part is where the image is linking to. It is the target of the hyperlink, or the location on the Web where you will go to if you click on the image link. The <IMG SRC=""> refers to the location where you keep that particular image file -- the path to the file from your document. Notice that in my example I had to begin with ../ because I was inside another folder which I had to exit in order to access the graphics folder. If you are inside a folder within a folder you will need to begin the path to the graphics file with "../../graphics/filename.extension". This type of reference to the location of the image file is called a relative reference. The other type which includes your full domain name and then the folder and file is called an absolute reference.
The ALT attribute was explained above. For images that are acting as hyperlinks the BORDER attribute is coded with a positive value of 1 or 2 depending upon your own choice and the color of the image border will be the same color as your other hyperlinks on the Web page. You cannot alter the border color of an image that is a link. You want the border width to show, so that users know that that particular image is a link. My blue border will become purple once the link has been visited by you, until the Browsing History in your browser is deleted, then the border will be blue again, as if you had not yet visited the link.
I coded ALIGN="left" to place the image to the left side of the page. I coded VALIGN="top" to that the text would begin at the top of the image and lastly the HSPACE was coded to allow for 20 pixels horizontally between the image and the text. If you want to widen space above or below the image you would code a value for the VSPACE attribute, for the vertical space separation.


Navigating With a Photograph, .JPG File
Even though the photograph has no border, it is possible to click on the picture to move to the home page of hitmill.com. Use the browser back button to return to this page. It would be clearer to the user had you set a BORDER value of 1 instead of zero inside the image tag when coding this link. Without a border it does not look like something to click on.
baby The ALIGN attribute of the image tag may have values of left, right, middle, which are the standard attributes as well as browser specific attributes such as absbottom, abstop, absmiddle, center. When you play with the non-standard values (browser-specific values)of the ALIGN attribute be sure to test your pages in 2 or 3 different browsers to get a feel of how your pages will look. You may wish to only use the standard values which have wider browser support.
The code for the above photograph (which will link to the domain's home page) is as follows:
<A HREF="../index.htm"><IMG SRC="../images/inpool.jpg" HEIGHT="180" ALIGN="left" ALT="baby" VSPACE="20" HSPACE="25" BORDER="0"></A>
Notice now that the value for HSPACE is not the same value of the VSPACE yet on the Web page, the horizontal and vertical free space around the image appears to be very similar. I think the reason is due to the shape of a pixel which is not square. Pixels are the default unit of measurement for HSPACE and VSPACE.
Now go have fun practicing. Make a small page using your text editor such as NotePad for Windows machines) and save each change that you code in your editor as well as remembering to "Refresh" or "Reload" your browser window after each "Save" in the text editor.




Related Links and Image Maps



Updated 09 February 2007
© hitmill.com
All Rights Reserved