You can add your
photos or any graphics you have to your Web pages by using the <IMG> tag. We will
show you how to use HTML to add those graphical files or images to your Web pages by using
examples and explanations.
- A Web page can support the following graphical file format:
GIF, JPEG, and PNG.
- GIF format is suitable for drawing images, and JPEG is
suitable for photographs.
- Popular Image Editors: Adobe Photoshop, Paint Shop Pro,
Lview Pro, Microsoft Image Composer, GIF Construction Set.
Example1: Add image file to your Web page.
<IMG SRC = "picture.jpeg"
ALIGN= "top" ALT="My Graduation Picture">
Explanation1:Your image file is stored in the same directory or folder as the HTML
file is.
- The SRC attribute is used to specify the location or the
address of the image file, which is "picture.jpeg" on the server. Note
that the image file in this example is stored in the same directory as the HTML file.
- The ALIGN attribute is set to TOP to specify that the image
file is align to top positon of the Web page.
- The ALT attribute is used to display the alternative text
when the image is displayed on the Web page or when the visitors move their mouse over the
image, the alternative text will be displayed.
Example2: Add audio file to your Web page.
<IMG SRC = "/images/picture.jpeg"
ALIGN="TOP" ALIGN="My Graduation Picture">
Explanation2: Your image file is stored in another
subdirectory or folder.
- This example is almost the same as the first one, except
that the value of the SRC attribute is set to a different value. The value in the quote
specifies that the image file "picture.jpeg" is stored in the directory or
folder named "images". This directory is actually another subdirectory of
subfolder of the directory that stores the HTML file. This could be called
"relative" addressing.
- Creating subdirectories or folders is one of good ways to
organize your files and data on the server based on category. For example, under the main
directory, you can create a subdirectory named "images" to store all image files
used on your Web site. Or you can create another subdirectory named "Java" to
store all your Java applets and programs if you like to.
Example3: Add image file to your Web page by using
"absolute" addressing method.
<IMG SRC =
"http://www.yourserver.com/~yourname/images/picture.jpeg"
ALIGN="TOP" ALT="My Graduation Picture">
- SRC attribute specifies exactly where the image file
"picture.jpeg" is stored on the server. This is called "absolute"
addressing method. In this example, the image file named "picture.jpeg" is
stored in the directory or folder called "images" and this folder can be located
on the server: http://www.yourserver.com/~yourname
|