Graphics Tutorial
Horizontal Bar
Overview:
So, you've decided you want to put some graphics on your page...but how? Where can I get them? How do I put 'em on my web page? Cruise on down to find out not only where to get them and how to add them to your page, but a few other techniques you can do to your graphics! ...
Horizontal Bar
Where to Find Graphics ~~ Saving Graphics ~~ Adding Graphics to Sites
Changing Size of Graphics ~~ In Summary
Horizontal Bar
Where to Find Graphics:
In my past experiences, I've found graphics mainly by searching for them in search engines. I'd go to some place like www.excite.com or www.yahoo.com and type in "Web Site Graphics", or something of the sort. Then I'd roam through all the sites listed after I hit submit. I've actually found some pretty nice graphics for my sites by doing just that. This would be my first suggestion to get you started with getting graphics.
Now, instead of searching my head off trying to find the right ones for me, I simply make my own. This isn't for everyone though...it takes time and patience to make graphics. I made every graphic you see on this site except for the background, which I found on the net after searching through quite a few pages. It took me about 3 and a half hours to make them all. I guess it's a good thing that I enjoy doing this sort of thing, huh. :)
So, to answer the question "Where do I find graphics for my page?", your best bet would be to go to a search engine, and type in a search for graphics of some sort, unless you think you'd really just love to sit down for a couple of hours and try and paint pictures with a paint program like Paint Shop Pro, or some other program. When you do your search, you'll probably have to do a bit of looking, but you'll most likely find some nice graphics that you can use for your site.
Back to Top
Horizontal Bar
Saving Graphics:
You're now to the point to where you're at a web site, and you see this spectacular graphic that would be perfect for your page. How in the world do you save it to where you can put it on your site though?! In all reality, it's very simple. Follow the numbered steps below to save a graphic from *any* web site to your hard drive for placement on your web site...
  1. Right-click the graphic that you want to save.
  2. If you're using Internet Explorer, choose "Save Picture As..."; Netscape, choose "Save Image As...".
  3. Next, type in the name that you want the graphic to have. Before you press save, make sure you know where you're saving it. You may even want to move to a different directory in that window, so that you know exactly where you save it.
  4. Press Save, and you're all set!
Back to Top
Horizontal Bar
Adding Graphics to a Web Site:
After you save all your graphics, you'll of course, want to add them to your site. Here's where you'll actually type in the HTML commands to do this. I'll display the commands, give an example, and after all that, I'll explain what it all does so you'll understand what you're doing...
Horizontal Bar
The Commands:
<IMG SRC="nameofimage.gif">
The Results:
Back to Top
Horizontal Bar
The Above In Plain English
That wasn't so difficult, now was it? That code is a simple one-liner, so it's not hard to pick up. I'd still like to point out what all is going on in the HTML code though, so you can know what it's doing. Here it is in plain English...
  • IMG : This stands for Image. It starts off the HTML code for adding an image to your site.
  • SRC : Stands for Source. This part of the code tells the browser where to go to find the particular image file.
  • ="nameofimage.gif" : This part must come directly after the source, simply because this *is* the source. Instead of typing "nameofimage.gif", you'll type the actual name that you saved the graphic file as. You'll also want to use the correct file extension (i.e. ".gif", ".jpg", etc.). If it's a jpeg file, you've got to use *it* instead of gif. Be aware of that when you're putting graphics on your page.
Back to Top
Horizontal Bar
Changing Size of Graphics:
So, what if you want to change the size of your graphic that you just placed on your page...how do you go about doing that, you might ask. Well, it's actually very simple. This only requires you to add two things to your <IMG> code. View below to see what to do...
Horizontal Bar
The Commands:
Height & Width in Pixels:

<IMG HEIGHT="##" WIDTH="##" SRC="nameofimage.gif">
Horizontal Bar
The Above In Plain English:
There's really only one thing I need to explain about the above commands, since you've already seen most of it before. You'll notice that between the quotation marks, I've written "##". In place of those, you'll need to specify the height/width you'd like the image to be. More than likely, you'll want to play around with a few numbers to get an idea of what you actually want it to be. The placement of HEIGHT="##" WIDTH="##" make no difference. It can be placed anywhere in the image command.
Height & Width in Percent:

<IMG HEIGHT="##%" WIDTH="##%" SRC="nameofimage.gif">>
Back to Top
Horizontal Bar
The Above in Plain English:
In this set of commands, you're looking at something way different from changing height and width in pixels. Unlike the pixels technique, changing the size of graphics this way will make the graphic almost the same size on any computer system. This is because it's judging the size based on the screen resolution settings and the size of the page. Setting height and width in pixels will differ on certain computer systems due to the things mentioned earlier, and monitor sizes, etc. Changing height and width in percent will give you confidence that it will give the desired look on almost all computer systems; therefore, I would suggest changing height and width this way if you plan on doing so. Just remember to add the percent sign (%) after the numbers to give this effect.
Back to Top
Horizontal Bar
In Summary:
After reading all that stuff, you oughtta know more than you want to know about how to add graphics to your page. The image commands are some of the most important commands to memorize and learn, because they're something you'll use on just about every web site you make. Keep in mind that when you're using graphics to limit the number you put on your page. The more you have on there, the longer it takes to load, so remember that when you get "graphics happy". With that said, this pretty much sums up the Graphics Tutorial!
Back to Top
Horizontal Bar
Back to Home

1