Inserting Images

Images add visual interest to your pages. You have to have a digital image. Web browsers can read .jpg, .gif and .png files. You can use images from a digital camera, create your own images in a graphic design program, scan photos or images or use images from other Web sites (but not copyrighted images). Images can be still or animated. This site doesn't cover graphic software packages, but there are many good tutorials across the Web on using Photoshop and Illustrator.

Once you have an image that you want to insert, the tag is as follows:

This will insert an image into the file named “imagename.jpg” that exists in the same folder as the page you are working on. If the image is in or will be in a different folder than the page, the folder path will have to be included in the file reference.

Notice the use of the closing slash. The img element is another standalone element, because it does not wrap around content to mark it up. It is simply a reference to a file.

Attributes

HTML attributes provide additional information about HTML elements. The come inside the tag and give additional information about the html tag.

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

IMG attributes

src - file source of image
border= "n", where n is the size in pixels of desired border
alt="text", where text is alternative text that shows when image is not available or when someone is using a text reader (as in visually challenged); alt tags are very important for accessibility standards
width="x", height="y" – where x and y are specific dimensions of the file. Be careful with this. If you do not use the proper proportions, your image will be distorted on the Web.
align="left" or align="right" – used to wrap text around an image

Many of the attributes above will be replaced with CSS for further styling.

Using a Background Image

Use the background attribute of the body element to use a background image for an entire page. If it is located in a different directory, then the directory path must be specified.

Page updated

Report abuse