- Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

Lesson 5: Graphics

Putting A Picture On The Web Page

Making a website is not complete without adding graphics to make it look nice and pretty. Putting a picture on a web page is done with the img tag.

The img tag is a single tag so does not require a closing tag:

<img src="filename.jpg">

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.

You must also include the picture's format, e.g. jpg as in the above example. More on image format later in this lesson.

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:

<img src="button.gif">
<img src="button2.gif">

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

light blue button

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

<p><img src="button.gif"></p>
<img src="button2.gif">


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

<img src="button2.gif" alt="light blue button">

The alt attribute will make the description appear if a browser does not display images. In some browsers the description will also pop up when a mouse pointer is moved over the picture.

Image Format

Pictures on the web are usually either in 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, that is, the picture's file size needs to be lowered so that it won't take too long to load. For more info see Optimizing Graphics.

Next we're going to make links in lesson 6.

Earn Money With Your Website!
Looking for a way to make money from your website? Do what thousands of sites are doing and join an affiliate program. It's free so you have nothing to lose. Click for more info.

Easy Websites For Free
Want to make a website the fast and easy way without learning any code? If you answered yes this Weebly is for you!