How To Put Graphics on Webpages

Lesson 5: Graphics

Puttong A Picture On The Web Page

Placing a picture on a web page is done with the img tag. The img tag does not require a closing tag so it has a / at the end, note there is a space between the slash and the second quotation mark:

The img stands for "image", src is an attribute, it tells the browser where to find the picture. The stuff in the quotation marks is the file name of the graphic, replace filename.jpg with the file name of your picture and be sure it’s between the quotes.

To keep things simple, for now store your pictures in the same place as your web pages, for example if you keep your HTML files in a folder called "my pages", put your pictures there too.

Every picture on a web page has its very own img tag:

That will put two pictures side by side on the page:

If an img tag is enclosed between the opening and closing p tags, the other image will start on a new line:

Result:

Give your pictures a description by adding an alt to the img tag like so:

The alt attribute will make the description appear when a mouse pointer is moved over the picture.

Image Format

Images used on websites need to be in the proper format which is either the gif or jpg format. The gif format is mostly used for pictures with solid blocks of color such as charts, or when an image requires a transparent background. The jpg format is suitable for pictures with subtle color changes such as photos.

In addition to the proper format, images on websites also need to be optimized, what that means is the picture's file size needs to be lowered so that it won't take too long to load. This is done in a graphics program, or you can check out this online graphics optimizer. Next we're going to make links in lesson 6.

CSS tutorial | Website Templates | Resources | Freeware | Contact

HTML MADE EASY Web Design for Beginners

Lesson 5: Graphics