HTML Graphics - TriCker'S HoUse

Lesson 5: Graphics

HTML Graphics

Putting A Picture On The Web Page

Making a website is not complete if you are not adding any graphics to make it look nice and pretty. Placing a picture on a web page is done with the img tag(Image tag). The img tag is a single tag so does not require any closing tag:

<img src="filename.jpg">

The img stands for "image", src(source) 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 where your is and be sure it’s between the quotes.

Note:
The file name of the picture must should have its 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 folder 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:

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 is used for 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.

HTML Adding an image tutorial video:

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, or when an image requires a transparent background. The jpg format is suitable for pictures with subtle color changes such as photos.

For more info: w3schools