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
. 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
, 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
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)
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.
<IMG SRC="images/stocking2.gif" ALT="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
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...
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:
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">
This 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 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.)
: 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".
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
<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.
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.