HTML Basics

Lesson 3: Adding Images

Putting images onto your Web page using html code, converting images to gif or jpeg, defining image sizes, "alt" tags, wrapping text and adding space around images, horizontal rules, and more are discussed in this lesson.

Basics

Introduction

What would a Web page (or site) be without pictures and images? You know the answer to that, so let's begin by specifying how to code an image.

The html code tag for images and pictures looks like this (suppose the image file is called "imagename" for the purposes of these lessons):

<img src="imagename.gif"> for .gif images, and <img src="imagename.jpg"> for jpeg images (if using a PC use .jpg, and if using a Mac use .jpeg).

If your image has text that reads "My web page image" the image will look like this (remember, this image is only a sample created for this lesson):

Don't forget to leave a space between the "img" and "src".

The "Alt" tag

However, some browsers don't "see" images, and to save download times, some users "turn off" image displays. In this case, it is wise to use the "ALT" tag, which is text that tells what the image is, and which goes inside the image tag:

<img src="imagename.gif" alt="my web page image">

It looks like this (for the purposes of this illustration you will not see the image; you will see what it will look like if your browser can't see images):

Fit your image into a defined space

Suppose you want the image to fit into a specific space, which will help in the setup of the Web page when one views it in a browser (or suppose you have to fit it into a defined space) because the image loads faster when the broswer knows how big the image is, and means the page visitor can read text while the image loads (this is VERY important if the image comes before the text!). Suppose the "imagename.gif" is the above image ("my web page image") and is 90 pixels wide and 100 pixels high (what exactly is a "pixel"? it relates to image size, but compared to an inch, I have no idea what the proportion is, so don't ask.). This is how you would code the image:

<img src="imagename.gif" alt="my web page image" width="90" height="100">

The image will look like this:

Suppose you want a border around it, and suppose the border is 3 pixels thick; also suppose you want to center the image. The code would be:

<center><img src="imagename.gif" alt="my web page image" width="90" height="100" border="3"></center>

The image will look like this:

As the text states you can use the border="0" attribute if you don't want a "link" border around the image which is actually a link (because browsers automatically put a border around images when they are links).

A really neat trick is changing the size of the image as it will appear in the browser to something larger or smaller than the actual image size. This is very important if you don't have software like Adobe Photoshop or Jasc Paint Shop Pro to crop or enlarge images (which are expensive, but that's the beauty of html--you really don't need all those extras!). The trick of it is to make the image enlarging change proportional. For instance, if the original image is 50 x 100 and you want to enlarge it, you'd make it 100 x 200. Use the same image tag as used above, only change the width= and height= to something larger proportionally. The text also tells you that it's better to use an image editing program to reduce or enlarge (but like I said, not everyone has the money to lay out on either of the programs I mentioned above).

1  2  3  4