LESSON 2

CREATING YOUR SECOND SAMPLE

In our first example, we started out with 4 files ..... 2 HTML, and 2 graphic. We still have these same 4 files, and have not changed a thing in them.

Let's go back to "My Computer" (On Your Computer) and create a new, organized system which will allow us to put specific files into specific folders. It will be a small idea that may help us remember where we put our files. Creating this 2nd web site will also help you see and compare what is going on with our 2 "web sites" examples.

In My Computer, create another new folder, and give this one the name Genealogy2. How clever. Now, you want to open this folder (which is still empty), and create 2 more folders, which are INSIDE of Genealogy2. Still with us? Give one folder the name "HTML_FILES", and name the other folder "ALL_MY_PHOTOS".

Guess what? We now have a folder named HTML_FILES, and inside this folder we can store (save) our "html" documents (files). We also have a folder where we can store (save) all of our photos/graphics/image files. A simple attempt to be "organized", and we know where to look to find our data files.

Let's put something into our new system. We want our 4 original files. "Copy", and then "Paste" each one from your Genealogy1 folder into your new Genealogy2 folder.
1) Paste the "My_Home.html" file into the Genealogy2 folder. You're probably confused already ..... why isn't this one going into the new "HTML_FILES" folder? This file is what will eventually "open" your web site via the URL, and it cannot be "hidden" inside another folder.
2) Paste the "MyDad.html" file, INTO the "HTML_FILES" folder. Happy now?
3) Paste both your graphic files (Family.jpg and MyDad.jpg) into the ALL_MY_PHOTOS folder.
The diagram may help you see how this new system would look.

We have successfully created some new folders, and moved our files into these folders. They now reside on our computer, as shown in the previous diagram. Remember, it is best to create and test your work, in your own browser, before uploading. This will ensure that the page looks the way you want, the graphics do load, and the links are working. Start simple ........first learn how to get things where you want them. You can always go back and be creative as you learn new techniques.

PREVIEW TIME
Now, for the test. In creating our new system, some people may already have strange thoughts as to what is going to happen here. Did you guess right, or wrong?

Open your new "Genealogy2" folder. Double-Click on your "My_Home.html" icon to open the page in your browser. (I hope you have created our example on your computer.)

Quit nagging ...... I know you want to see another sample of what we have just done. Click HERE to open our "new" web page in a separate window. (Shoot, showing you the example will also give away the surprise, had you opened this own your own computer first).

"xxxxx xxxxx xxxxx" !! you say??
It doesn't work !! I quit !!
The welcome page opens, there is no graphic,
and the link doesn't work !! GRRRRRRRRRRRRRRRRRRRR.

WHAT HAPPENED??
It worked the first time. But remember we have moved things into new locations. Unfortunately, the HTML code (or instructions) were not changed ...... the html is still telling the computer to go look for data in the "old location", and it is not there anymore. Luckily, you are in control here.

"Remember where you put things,
remember to tell the computer where they are,
and which file you want."

Our first site was simple, because everything was in the same "Genealogy1" directory (folder). We wanted a family photo, and simply told it the name of the file we wanted (Family.jpg).
In our new system we have created a main folder called Genealogy2, and have moved all the photos into a sub-directory (folder) called "ALL_MY_PHOTOS, so in order for the computer to find it, you have to tell it where to go. Simply change the HTML code on your "My_Home.html" page to read: <img src="ALL_MY_PHOTOS/Family.jpg"> Bingo, there is your photo, right on your "Home" page.
The "My_Home" code is in the Genealogy2 folder, and the code is also asking that a photo appear on this page. Our html tells the computer we would like a picture here (img src), so it must now go to the folder called ALL_MY_PHOTOS, and bring back the picture with the name "Family.jpg".
Here's a graphic diagram of the process.

Light bulbs and bells? Congratulations.

BUT BUT BUT......
But wait a minute ........ the link to "Dad's Page" doesn't work. By now, you're ahead of me on this one. Where is the page (or file, MyDad.html) located, and where are you telling it to look? Your HTML code for the link should read <a href="HTML_FILES/MyDad.html">DAD PAGE</a>.
It's a dumb computer, and needs help. Whether simple or complex, this is the overall concept.....
"Tell it the exact location of the file (the path to get there), and the exact name of the file you want."
If you're counting, that statement has appeared 4 times now. Remember it.
Here's a graphic diagram helping to show the link concept.

NOW FOR THE TRICK.....
Our new system again needs help when you open Dad's Page, because the photo is "lost". To find the image, change the source code here to read <img src="../ALL_MY_PHOTOS/Dad.jpg">

SLOW DOWN. Did you see something different here?
Now you look and find that there are 2 "characters" involved when you write your instruction, that you must use in your HTML code, which help describe the path to the folder you want.
One is the single forward slash, or /
The other is typed with 2 periods in front of the slash, or ../
Accck, not again ..... where is the folder, and how do you get to it!

Our organization of files has created something new. How do you get the photo "MyDad.jpg" to appear on the webpage called "MyDad.html", when they are in different folders?

The placement of ../ is merely a "command" telling the computer to "back up", because the photo is in a different folder. Trying to state the HTML into English, is like trying to say "Hey, I want a photo on this page, but it is not in this folder. Get out of the "HTML_FILES" folder, (back up), and go look down in the ALL_MY_PHOTOS folder, and get the photo file named "MyDad.jpg". Sometimes it helps for your brain to "speak English", then convert what you are trying to do into HTML code. It is a "new language" for you.

Try to remember that (forward /) "FolderName/Picture.jpg" indicates "look forward".
If you need to go "backwards" to a folder, use the dot-dot-slash, or " ../FolderName/Picture.jpg" in front of the folder name. (Sometimes those "dots" are hard to see here.)

These two little command characters are required to help you describe the path to the folder. Incorrectly written, especially when you develop a multitude of sub-folders, will bring more frustrating screeches of "WHERE ARE MY PHOTOS?".

Here is the graphic that may help follow the code <img src="../ALL_MY_PHOTOS/Dad.jpg">

FIX YOUR FILES....
If you have not done so yet, use your editor (or Notepad), and make the 3 changes to the HTML code as shown above. Be sure to re-save the document after making a change. Now, re-open your home page (My_Home.html). It should display with the family photo, the link will take you to Dad's page, and that page will have the photo also. Your sample web site 2 is now working.
Sorry, my turn to be lazy. I have not provided a sample link to show the results. Part of your learning will be to go and make the corrections to YOUR files, and make the new "web site" work.

Both of these "sites" will display exactly the same on your monitor. The only difference is how our files were set up and organized. The short examples may have helped you understand why some items seem to get lost. If you've gotten this far, you should be able to handle a nice but simple system of organizing files. Congratulations.

ONE MORE PAGE
A summary, a few quick ideas, and, an expanded idea of our filing system, for those who would like one more challenging example. Be careful, it can get complex!     NEXT

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