Hannam University's Multimedia English

Graphics Tutorial

One important aspect of web design is the use of graphics. Graphics can inhance your web page -- or they can clutter your web page depending on how you use them. Remember, sometimes less is more.

Graphics include anything that is not text. Graphics come in several different formats, but the two that are used on web pages most of the time are in either GIF or JPG format. The difference between the two has to do with the number of colors used to create the image. We won't go into detail about that now. Just remember the two formats that are used for web desgin, GIF and JPG

Putting images on your web page is really pretty simple. Look at the following example.

< IMG SRC="name of file.gif" (or .jpg)>

In the code above IMG=IMAGE and SRC=SOURCE, simple right? Then we have the name of our file inside the quotation marks. Remember, you have to have the quotation marks or your image will not show up on your page. W also have to tell the computer how big we want the image to be. To do this we place "height," and "width" attributes within the IMAGE tag. Height and width attributes can be in either pixels or in percentage of the web page deminsions. Play with it and you will eventually get a feel for height and width attributes of various pixel sizes. To illustrate I will use the following codes for the ruler I created for this site.

<IMG SRC="rule.jpg" width=100% height=5 alt="ruler">
<IMG SRC="rule.jpg" width=250 height=5 alt="ruler">

Notice that the first one goes all the way across the page, but the second one is restricted by the number of pixels in the width designation. Okay, that's how to put graphics on your webpage. Now we will lok at the code for using graphics for your background.

You probably remember from the HTML tutorial that we used the following code to create a background color for our webpage.

<BODY bgcolor="#FFFFCC">

In order to use a graphic for our background all we have do do is make a few minor changes to the code. First, instead of using the code "bgcolor" we have to use "background" and instead of using a "color number" we have to use the name of our imgage file. Compare the code above to the one below.

<BODY background="gnwave.jpg">

In the first example we have the background set for a color and the in the second example we are using an image file. In fact, the image gnwave.jpg is the file used to make the background for this page and the code nuumber #FFFFCC is the color number code for the background in the examples.

Okay, you have just learned how to use graphics on your webpage. Now you have to find some niffty graphics that will make your page look really great. To make your job easier I have listed some links below that will take you to some free graphic sites. Once there you can browse through each site and download the graphics that you like.