Like HowStuffWorks on Facebook!

How Web Pages Work


Images

Once you start creating pages, one of the first things you will want to add is graphics. Humans are visual animals, and graphics can totally change the character of a page.

Once you start creating pages, one of the first things you will want to add is graphics. Humans are visual animals, and graphics can totally change the character of a page. You can use tiny graphics, long thin graphics, larger images or even animations.

Turn a graphic into a bullet by simply inserting the image tag where you want the bullet to display; you needn't use the <ul> tag.

Long, thin graphics can be used as separators. Larger graphics can be used for logos or illustrations -- pretty much anything you can think of.

There are two ways you can obtain graphical images: Either you can download them from various "free clip art" sites on the Web, or you can create them yourself. Some sites offering free graphics and animations include Page Works, A-1 All Free Clip Art, and The Free Graphics Store. You can also visit The Free Site, Web Places and Free Graphics for directories of free image sites.

Let's say you go to a free graphics site and you see an image you like. If you right-click on the image, a menu will pop up and one of the options will be "Save image as...." You should save the image in the directory that your Web page is in.

If you want to create your own images, you will need a program that can edit GIF and JPG files. One very popular image-editing program available on the Web is called Paint Shop Pro. You can obtain a copy by clicking here. With a little practice, and only minor artistic ability, you will soon be creating images like a pro!

As described in Basic HTML Formatting Tags, images are inserted into a Web page with the tag:

<img src="name of file">

You can also use an image as a link to another page or element. To do so, simply insert the "img src" tag after the anchor tag. Be sure to include "border=0" or else an ugly border will appear around your image.

Example: <a href="http://www.howstuffworks.com"><img src="hswlogo.jpg" border=0></a>

In this example, if users clicked on the image "hswlogo.jpg," they would be transported to the HowStuffWorks homepage at "http://www.howstuffworks.com."

Any digital image can also be used as a background for your page. To do so, add background="image file name" within the <body> tag.

Example: <body background="hsw-logo.jpg>

We'll find out how to label images in the next section.