Photos Tutorial 1

W H E R E
are my photos???

A Tutorial For Getting Graphics Onto Your Web Pages
by R. Blissmer

LESSON 1

This site will NOT teach you HTML, or graphics. You should already have the ability to write simple HTML, and have methods to get graphic images or photos into your computer, to copy and move files on your computer, and, to upload to a web site.

The intention here is to try to help explain
a common problem as web pages are created .....
"WHERE ARE MY PHOTOS"?

It is a frequent question, and you can almost feel someone pulling out their hair in desperation. A painful result which usually has a simple solution by understanding where your files are, and using HTML to get them "out of storage" and onto a web page.

Using only 4 "files", this simple presentation may help you better understand the system of:
1) Creating Folders.
2) Saving Files.
3) Knowing where the file is located.
4) Using HTML to "find" the location of the file.
5) Telling, via HTML, exactly which item in the file you want to display.

While the examples here are very basic, you will be learning the concept of what is going on, achieving the same result from two different methods of saving the files on your computer. With our 2 examples, you will create 2 separate "web sites" on your computer, using the same 4 files, but see how to set up each of them differently. The results will be displayed via the web browser on your computer. Remember, we are not actually uploading any files.
If you know where you put it, the HTML code will be the instruction, or "path", to this location, and identify exactly which item in the file you want.

CREATING YOUR FIRST SAMPLE.

Use your "My Documents" folder for these examples. It is easy to access, and you can delete everything later. Or, keep these examples active for further experimentation.

Let's build a small 2 page web site to introduce your family. Keep it simple.

(To build your files, you can always mininize this window,
work in "My Documents", and come back to continue reading.)

In "My Documents", create a new folder, and name it Genealogy1.
Got a photo of your family? Name it Family.jpg and put it into this folder.
Got a picture of Dad? Name it MyDad.jpg and put it into this folder.
Now, YOU must write 2 simple HTML documents.
(Read on, because you can cheat a little bit further down).

When complete, name your first document as My_Home.html, and save it in the Genealogy1 folder. Make your html for this home page only say hello, with a picture of your family, "Family.jpg". But, also make a link to "MyDad.html", the next page of your web site. Put the "My_Home.html" document into the Genealogy1 folder.

For your 2nd HTML document, give it the name MyDad.html. On this page you also want to explain who it is, and show a photo called "MyDad.jpg". Put the "MyDad.html" document into the Genealogy1 folder.
For the sample to work correctly, all your files names must be what we called them here, because those are the names we used in the HTML code....remember, be exact.

If you're really lazy today, you can copy the simple code below for the 2 documents we need, paste them into Notepad, then save them, with the file names mentioned above, into your Genealogy1 folder. I do not use any HTML editor software. It was just as easy to learn HTML, and write the simple code using Notepad. And much easier to find and repair any "bugs" that appear. (But if you are comfortable using an editor, continue to do so. As long as you understand what your editor is producing for code, and how to find those "quirks".) Writing html with Notepad is just a nice method to create some simple (or quite beautiful) web pages. I hope you try it.


<html>
<head>
<title>My Home Test
</title>
<meta name="description"value="">
<meta name="keywords"value="">
</head>
<body>
WELCOME 
from the Smith Family 
Tall Palms Coast, Bright Sun Beach, USA <hr width=400>
Here's Our Family.......> 
<img src="Family.jpg"> 
Want to meet Dad? 
<a href="MyDad.html"> DAD PAGE</a> 
</body>
</html>


<html>
<head>
<title>My Dad Page Test
</title>
<meta name="description"value="">
<meta name="keywords"value="">
</head>
<body>
HOWDY 
I'm "Dad Smith" 
The Big Cheese of this Happy Clan <hr width=400>
Here's a big smile...... 
<img src="MyDad.jpg"> 
Want to see Mom? 
(Link to MOM PAGE would go here.)
 
</body> </html>

On your computer, in "My Documents", you now have a folder, named Genealogy1, and inside this one folder you have placed 4 documents (files). Your test site is complete, and will function with your browser. The diagram shows how you have created the Genealogy1 folder in "My Documents", and then put your 4 files inside this folder.

REMINDER: For our training samples, we will not actually upload the files. Your "web site" will display just fine, right on your computer with your browser. If it works here, it should work when published to the web .... if you have uploaded all files into the correct folders. The variety of methods to upload your files to a web site varies considerably, and make it impossible to discuss "uploading" here. Whatever you use, a basic principle to remember, is to create the "file system" at your site to match what you have made on your own computer. Having no control over how each individual performs these functions, I cannot "guarantee" the results of your efforts.

TEST WHAT YOU HAVE MADE
Open your Genealogy1 folder, and you should see the 4 items.
With the Genealogy1 folder open, Double-Click the icon for "My_Home.html". In my case, this will open my browser, Internet Explorer, and display the web page, with your hello, and a family photo. (That is, if all your html is correct to this point). You should be able to click the link to open page 2, or "MyDad.html", and see his photo.

OK, no fair if we didn't put a sample here to display our 2 page web site. Click HERE and the sample will open in a separate window. I hope the photos are OK. But don't just look at this and stop. Part of learning is for you to actually make and put the examples on your computer. It is only 4 files to work with. When your samples are set up, they should open and display like this one.

Great, you have made a sample "web site", that has 2 web pages, with photos. And, it works.

REMINDER: You are not "on the web" yet. You are viewing what you put on YOUR computer. Eventually, you must upload the files to Freepages. (Uploading is NOT discussed here). Freepages gives you basic "directories" (or, folders), one being Genealogy. You want to upload your 4 files into the Freepages Genealogy directory. (Accessing Freepages is done via the user-name, and password, you were given) If you have uploaded your 4 files into the Freepages Genealogy Directory, everything on Freepages will be EXACTLY the same as you have on YOUR computer. You would now be "on the internet", and the web site can be accessed via your URL. (URL's, user-names, passwords, or uploading are not a topic here.)

RECAP:
If you want a picture on the page, your html code must tell the computer exactly WHERE this picture (or graphic) is located, and give the EXACT name of the file you want. It cannot put something onto your web page, if it cannot find it.
If a graphic is in the same folder, you only need to state the name of the graphic file.
ie: <img src="Family.jpg">. Technically speaking, you are describing the "Relative Path" to the file.

HUMAN MISTAKES
If something is "not there" on your page (either on your computer, or the web),
things to check for include:
1) Make sure your code is telling it the proper place to look.
Also make sure the file names match, including case-sensitive spelling, file extensions, etc.
If the photo file name is "Dad.jpg", don't ask it to look for "DAD.jpg".
2) Make sure you have no "illegal characters" or blank spaces in the file name(s).
3) Make sure the file is actually in the place you are telling it to look.
It won't find Photo1 in folder A, if you put it in folder B.

• Did you ever ask your kids , "Please get my keys on the kitchen table". A simple instruction to a specific location. But after 20 minutes of "where are my keys", you remember that you left them in the bedroom. Find keys, but the wrong location. Opps.

SOUNDS QUITE LOGICAL, AND SIMPLE.
In this first example, everything was "stored" in the same directory (folder), so items were easy to "find" by merely identifying the name of the file we wanted. In other words, your "My_Home" file wanted a picture, and this picture was in the same folder. Your link to the file "MyDad.html" was also in the same folder. The instructions were easy, and the computer did not have to go far to find what it was looking for.

This is perfectly acceptable, and not a problem. Even if your web "site" has 300 HTML pages, and 500 photos. You are "storing" (or uploading) everything into one single folder (in this case, the genealogy directory). But it will become one extremely LONG list of file names. If you feel comfortable being able to find all your files in this long list, then leave it alone. If you are happy this far, you can even stop now, because you are probably getting graphics to appear on your pages without a problem. Keep up the good work on your web site.

But for those who want to structure their files and become more organized, yet be aware of how to avoid photo problems (only you can remember where you put things), please continue on to LESSON 2, because there are some new tricks involved. You'll see what happens when we set up a new web site storage system on our computer, using the same 4 files.
(NOTE: LESSON 2 has the most graphic displays to load, 4 diagrams at about 240KB total.)

|TUTORIAL HOME| |LESSON 1| |LESSON 2| |SUMMARY|