Adding Graphics

Background Images

By default the browser will make the background of the web page a dull grey color. By using the right codes you can change this default grey to another color. Using Hex codes to change colors is beyond the scope of this document. This is were using a nice background image comes in.

When using an background image, be sure that the image will not over power the page. Some of the background images available are very busy, very dark or are just not suitable for use as a background image. Be sure to check your page with a browser to ensure the background does not prevent the user from reading the text on the page.

There are two type of graphics images that can be used. The GIF and JPG are the two types of images found on web pages.

The code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Dave Rigney">
<TITLE>This is my page </TITLE>
</HEAD>
<BODY BACKGROUND="IMAGE.GIF">


<!When you see a tag begining with <!, this is a remark. They can be used to put explanations into the document that will not be seen when the page is displayed by the browser>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Dave Rigney">
<TITLE>This is my page </TITLE>
</HEAD>
<BODY BACKGROUND="bluegran.gif">

<H1>This is a level 1 Header</H1>

<P>This is the text that I want to display. I am going to make sure that it is long enough to cause a word wrap on the screen from the browser. After this paragraph we will type some other stuff and then will look at it to see what we have on the screen.</P>

<H3>This is a level 3 Header</H3>

<P>This is the start of paragraph number two. Notice what happens when you display this on the screen in your browser.</P>

</BODY>
</HTML>


Click on the following images to see how the different types of backgrounds affect the visibility of the text. Be sure to use your browser's back button to get back to this page.

Wall_3.jpg
Bluegran.gif Flagston.jpg Stone.jpg Metal.gif Wall_3.jpg

Graphics in the Text

Now lets add some graphics to our web page. The tag used to add a graphic is:

<IMG SRC="line5.gif" HEIGHT="25" WIDTH="640">

The code "IMG SRC"= gives us the file name of the graphic to be used. In this case line5.gif. The height="25" tells us that the image is 25 pixels high. Width="640" tells us the width of the image in pixels. These two properties do not have to be used unless you want to resize the gif or jpg file to match your web page. There may be times you want to shrink or enlarge the graphics. Caution: if the graphic is resized, the resolution of the image can be affected. An image that looks great when small, can look grainy or even worse when made larger.


<!When you see a tag begining with <!, this is a remark. They can be used to put explanations into the document that will not be seen when the page is displayed by the browser>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Dave Rigney">
<TITLE>This is my page </TITLE>
</HEAD>
<BODY BACKGROUND="bluegran.gif">

<H1>This is a level 1 Header</H1>

<P>This is the text that I want to display. I am going to make sure that it is long enough to cause a word wrap on the screen from the browser. After this paragraph we will type some other stuff and then will look at it to see what we have on the screen.</P>

<H3>This is a level 3 Header</H3><BR><BR>

<IMG SRC="line5.gif" HEIGHT="25" WIDTH=""640">

<P>This is the start of paragraph number two. Notice what happens when you display this on the screen in your browser.</P>

</BODY>
</HTML>


Example - this example uses line5.gif

Aligning Graphics and text

After you have placed your graphic image into a document, you may find that the text has not displayed exactly where you wanted in relation to the graphic image. The follow attributes to the "IMG SRC=" tag can be used to align text and graphics on the page. Each tag will cause the text to start at the top, middle or bottom of the graphic used.

Left

<IMG SRC="graphic.gif" align="left">

After you have placed your graphic image into a document, you may find that the text has not displayed exactly where you wanted in relation to the graphic image. The follow attributes to the "IMG SRC=" tag can be used to align text and graphics on the page. Each tag will cause the text to start at the left, right, top, middle or bottom of the graphic used. Now lets put some text next to this graphic so that you can see what we are talking about here. Notice how the text has word wrapped down below the graphic image of a mailbox.

Right

<IMG SRC="graphic.gif" align="right>

After you have placed your graphic image into a document, you may find that the text has not displayed exactly where you wanted in relation to the graphic image. The follow attributes to the "IMG SRC=" tag can be used to align text and graphics on the page. Each tag will cause the text to start at the top, middle or bottom of the graphic used. Now lets put some text next to this graphic so that you can see what we are talking about here. Notice how the text has word wrapped down below the graphic image of a mailbox.

Center

<IMG SRC="graphic.gif" align="center">

Now lets put some text next to this graphic so that you can see what we are talking about here. Notice how the text has word wrapped down below the graphic image of a mailbox.

Bottom

<IMG SRC="graphic.gif" align="bottom">

Now lets put some text next to this graphic so that you can see what we are talking about here. Notice how the text has word wrapped down below the graphic image of a mailbox.

From the examples above, you can see that what you think you will get may or may not be what is displayed. Always check with different browsers.

Another option is to use tables to help align the text and graphics. This will allow you to control the flow of the text around the graphic a little better in some cases.

Home