HTML MADE EASY	Html Made Easy now a book. For more info Click here
Free Graphics \| Graphics Optimizer \| Resources \| Freeware
JPEGCruncher Desktop \| T-Shirts

HTML TUTORIAL

Introduction
Lesson1:Tags
Lesson2:Paragraphs
Lesson3:Attributes
Lesson4:Lines
Lesson5:Graphics
Lesson6:Alignment
Lesson7:Links
Lesson8: Tables
Lesson9: Frames

HTML EXTRAS

Uploading Webpages
Quick Reference
Color Chart
Free Web Graphics
Graphics Optimizer
Resources
Free Software

Html Tutorial Book

Html Made Easy is now a book! Don't spend money on books you won't understand, The Complete Html Made Easy takes you every step of the way in building a website, and it makes it fun and easy too!

More Info

Lesson 5: Graphics

Putting A Picture On The Web Page
The tag for putting a picture on your web page is:

<IMG SRC="graphicfilename.gif">
It is a single tag, requiring no end tag. The IMG means "image" and SRC means "source". SRC is an attribute of IMG, it tells the browser where to find the graphic.The stuff in the quotation marks is the file name of your graphic.

Don't Forget Format
The majority of graphic formats supported on the web are either in gif or jpg format. When putting your graphic name in the IMG SRC tag always include the format it is in and always enclose it in quotation marks. Example:"button.gif" Note the dot between the name and format and that there are no spaces.

Putting Your Files In The Same Place
Put your graphics in the same folder (directory) as the html file, for instance if you keep your html document in a folder called "my pages", keep your pictures in that folder too otherwise they won't show up on your web page because the browser will not be able to find them. The same thing goes with other web pages that are linked together, keep them in the same place.

Each Graphic Has Its Own IMG SRC
Each graphic you want to put on a page will have its own IMG SRC tag:

<IMG SRC="button.gif"> <IMG SRC="button2.gif">
Result:

To put the graphics further apart from each other add this:   between the two tags:

<IMG SRC="button.gif"> <IMG SRC="button2.gif">

Result:

See the little space between the buttons? This is what   does. It is a space equivalent to one character or letter. The more you use the wider the space will be. You can also use it to indent your sentences or for a larger space between words or letters.

To put a graphic on a new line use either the <BR> or <P> tags:

<IMG SRC="button.gif"> <P> <IMG SRC="button2.gif">

Result:

Remember the CENTER tags? Use them to center your graphics on the web page:

Result:

Notice how the first graphic is enclosed in the beginning and end CENTER tags. If you wanted to center the second graphic as well, the end CENTER tag (you know, the one with the / ) wouldn't come until after the second graphic. Remember that from the first lesson?

Background
To add a textured background on your web page you will need background wallpaper which is actually a graphic repeated over and over until the screen is filled. There are a lot of places on the web where you can get backgrounds for free, I even have a few of my own right here. Now that you have a background this is how to put it on your page:

<BODY BACKGROUND="graphicname.jpg">

BACKGROUND is an attribute which goes in the beginning <BODY> tag. Substitute "graphicname with the file name of the graphic, don't forget the format or to enclose it in quotes.

If all you want is to change the color of the web page use the BGCOLOR attribute in the BODY tag:

<BODY BGCOLOR="#00FFFF">

Don't forget to enclose the color code in quotation marks (in case you are wondering, 00FFFF is aqua). And that's it, now you are ready to learn how to align graphics with text in Lesson 6

Graphics | Graphics Optimizer | Resources | Freeware

HTML MADE EASY

Lesson 5: Graphics