Make your own free website on

[an error occurred while processing this directive]

Site Menu

Learn all about HTML, how to format text, add images, create tables, meta taga, and more!
Get the low down on JavaScript. See how to create popular JavaScript applications like drop down menus, clocks, dynamic messages, popup boxes, and more.
Concise, easy to follow introdction to CGI and how to install CGI scripts.
Web Design
A miscellanous section that includes various web design tutorials


123 Web Design!

Inserting images

Enough with boring text, lets move on to something more colorful- images!

Adding images to your web page can't be simpler (creating them is another story). Images are inserted into a document by using the <img> tag. The below inserts an image called "paperboy.gif":

<img src="paperboy.gif">
PE03257A.gif (4096 bytes)

Two things to notice here. First, all <img> tags have a src attribute, which is required to specify the file path of the image you're inserting (in this case, its paperboy.gif). Second, <img> tags no not have closing tags (ie </img). It's one of those rare cases where a closing tag is not required.

-The width and height attribute of <img>

There's a secret to making your images load faster in a document- use the width and height attribute of the <img> tag. These attributes allows us to explicitly specify the dimensions of the image, thus saving the browser the boring job of having to determine this info itself (thus increasing download time). The above paper boy is 98*100 in dimensions. Lets tell our browser that when defining it, shall we?

<img src="paperboy.gif" width="98" height="100">

The width/height attribute can actually do more than just speed up an image's download. We can use it to also alter the dimensions of the image. Lets blow up the paperboy by giving it a large width and height:

<img src="paperboy.gif" width="200" height="208">
PE03257A.gif (4096 bytes)

Ugly paper boy, from this viewpoint!