TutorialGraph
Graphics for beginners

I have written this because I see a lot of people having trouble getting graphics to work on their web site. I do not do html, but I can still give some of the basic requirements for graphics. I have also included a tutorial on using Netscape Composer to build a page with graphics. Hope this helps.

Basic Rules:

All graphic files must be uploaded to the RootsWeb server along with the html page. The background on this page is a graphic and was uploaded along with the html page. The html code does not contain a graphic. It only points to it.

Filenames can't contain special characters such as #, &, @, etc. Use only letters and numbers with no spaces and keep them simple as possible. I use Pic1, Pic2, etc. Short names are easier to link to.

All graphic files must reside in the same directory on the RootsWeb server as the html page.  If you use sub directories, keep the html page and graphic together in the sub directory. I do believe you can hand code a page to point to another location, but I'm keeping it simple here.

Use jpg or gif for your graphic file extensions. These are the most common graphic file types and are both supported by RootsWeb.

Follow these rules and you should be adding graphics with no problems. Now for a tutorial using Netscape Composer.

I use Composer for my web site. It is free and works quite well for me. It has some limitations but I have not found that to be a problem. It will upload your files and keep them together, and that is a plus for a beginner. Now we'll build a page.
 
 


Building a page with Netscape Composer

1) Open Composer

2) Type any text you may want. The size, color, justification, etc. can all be changed with the         menu icons. All of the above was done in this manner.

3) Add a graphic. Choose the image icon on the menu bar, or choose insert, then image in the drop down box. You should now have this box on your screen.

4) Click the box that says Choose File. You should now have a box that shows something similar to what is below. Move through your hard drive and pick a picture to add. I choose the graphic you see below by clicking on Less2.jpg and choosing open.

5) Your screen should now look similar to what is below. The filename in the image box will be different than mine. It will show the graphic you chose.

6) Choose apply to apply your image to the page. Choose close from the next box that appears. I won't show that one. It is pretty self explanatory. Now you have an image on your page just like the ones you have been viewing.

7) Choose the save icon to save your file. You may have noticed I didn't choose any other options in the above screens. You can play with these later. Use the defaults for now. Let's get it online now for the world to see.

8) Choose the publish icon and you should get a box that looks like this.

9) Choose a title for your page in the page title box. Try to use a name that has something to do with the content of the page. As you can see this is called TutorialGraph because it is a tutorial on graphics. If this is your opening (index, covered below) page choose carefully. It is what search engines will find and list in the future.

10) The next box is for HTML filename. If this is your first page on RootsWeb you must name it: "index.html" because every site has to have one. That is how RootsWeb and any other site host identifies your opening page. The page title box we did in step nine identifies your site to the rest of the world. Don't call it index. Please.

11) Now we're ready to upload and get your page up for the world. Copy the text in the above example exactly for the HTTP or FTP location to publish to box. This is how you upload to RootsWeb using Composer.

12) Enter your user name in the User name box. This was provided to you by RootsWeb.

13) Enter your password in the password box. You can also choose save password if you like. I won't get into the pro's and con's of that. If you don't choose save, you may be asked for it when you get online to upload. Minor inconvenience though. Never give your password out to any one and don't put it online. You will notice is doesn't even show when you enter it.

14) Notice the Files associated with this page box is checked. Leave it alone. Netscape will upload all files needed to make the page work, including the graphics, and that is what this is all about.

15) Choose Ok. Netscape should put you online and upload the files. You may get warning messages about security. Don't worry about it. Every time you upload this can happen. We are not using a secure connection in our uploads, and we don't need to. Note: If you don't connect automatically, you may have to do so manually. I have never had to.

16) You should see a screen showing files being uploaded, and confirmation when it is done. You are now part of the World Wide Web. This page was built and put on the web using the above instructions. If you are seeing it, it worked, and it did. I did have to upload again to include these final words and the notice below.

Created by Jeffrey G. Allen
This page may be copied and distributed for any non profit uses.

Jeff

Back to Home Page