1. Opening a Browser

   Netscape and Internet Explorer are examples of browsers. You are using a browser to view this page. You can have multiple web pages open at once. On the menu at the top left, try "File/New/Window."

2. View/Source.

   Your browser has a tool bar, with drop-down menus called "File," "Edit," and so forth. One option that you have is to click "View" and then choose "Source." What this allows you to do is view the HTML code on a web page. Try clicking on "view/source" while reading this page. Can you find this paragraph in the source?

3. Changing Browser Options.

   Sometimes, you want to change browser options. For example, when we get into JavaScript, we will want to be able to debug programs. In Internet Explorer, debugging usually is turned off. To turn it on, go to "Tools/Internet Options" then click on the tab that says "Advanced" and then uncheck the box that says "Disable javaScript debugging"

4. Opening up Notepad

   Notepad is a very basic text editor. You can open it up by clicking "Start/Programs/Accessories/Notepad." If you click on "view/source" in Internet Explorer, you automatically open a copy of Notepad. With Netscape, however, "view/source" does not pull up a text editor.

5. Toggling

   Often, we will have more than one notepad session going. So open up a second copy of Notepad. Type "hello, world" into one copy of notepad.

   Now, go to the other copy of notepad. Type "how are you?" into the second copy of notepad. Now, see if you can switch back and forth between the page that says "hello, world" and the page that says "how are you?" The easiest way to switch is to click into the task bar at the bottom of your screen. This is called "toggling." When you are coding for this class, you will be toggling between your browser and multiple instances of Notepad.

   You also can practice toggling by opening up multiple windows of your browser and going to different pages on them. Try going to www.yahoo.com in one window. Then toggle between that window and the window with this page.

6. Copying and Pasting

   From the menu at the top of an application, you can use "Edit/Copy" and "Edit/Paste." However, we use these so much that it is a good idea to remember the keyboard shortcuts, which are Ctrl-c and Ctrl-v.

   Capture this paragraph with your mouse. Then type Ctrl-c to copy it. Next, go to your "hello, world" notepad window and type Ctrl-v to paste it.

7. Side by Side Windows

   Another trick is to work with two Notepad windows side by side. This will be particularly useful with Cascading Style Sheets.

   Open up another instance of Notepad. Now, we are going to get rid of all of the windows on your screen, so write down these instructions before you lose sight of them:

   1. Use the mouse to position your cursor in the blank grey area of the task bar at the bottom of your screen.
   2. Click the right mouse button, and a menu will pop up. Choose "Minimize all windows."
   3. At this point, all of your applications should be minimized. They are still available on the task bar. Click on the two instances of notepad, so that both of them move back onto the screen.
   4. Now, again position your cursor in the grey part of the task bar, and right click. This time, select "tile windows vertically."
   5. The result should be that your two instances of notepad will be side by side. You can then bring back this web page by toggling. Now, if you toggle to the two instances of notepad, they will continue to be side by side. Be sure to come back to this web page when you are finished!

We will use three file directories. Each file directory may contain several folders.

1. Local Directory

   The local directory is where we store files as we create them and make changes.

2. Test Directory

   The test directory is a directory on the web server where we put files to make sure that they work properly on the server.

3. Production Directory

   This is the directory on the web server where we put files that are ready to be shown in public.

In each directory, we will create an identical structure of folders or sub-directories:

• htdocs

  This stands for "hypertext documents." It is where we will put most of our web pages.

  • Under htdocs, create a sub-directory called styles for our style sheets.

• images

  This is where we will put our graphics files.