Namecheap

Domain registration with free Whois privacy

Lesson 5: Graphics

Putting A Picture On The Web Page

The img tag puts a picture on a web page. It 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 which also includes the graphic's format extention (.jpg). 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:

<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">

Result:

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

The two most widely used image formats are either the gif or jpg format. The gif format is suitable 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.

Pictures used on websites need to be optimized so that they won't take too long to load. For more info see Optimizing Graphics. Next we're going to make links in lesson 6.

DID YOU KNOW...?
You can register a website address (called a domain in tech talk) even before you have a website. In fact the longer you wait the more difficult it will be to get one that isn't already taken. More Info

DID YOU KNOW...?
There is more to building a website than just making it. It also needs web hosting so that it can be seen on the internet. More Info

Easy Website Builder
Skip the tutorial and build your website or online store without learning any code Tell Me More
html tutorial
This tutorial is available in printable PDF format

Get Your Copy


Disclosure

This webpage contains affiliate links which earn this site a commission should a sale result from a link that has been clicked.