My Home Page

Print this page now.  Put it aside.  Your task will be to reproduce it.  You can do it!

How does your computer know how Web pages should be displayed and how to show new Web pages  when you click on Web links?  Your browser (Internet Explorer, Netscape, Firefox, Mozilla, Safari, etc.) can do these things because of a computer language called HTML (Hypertext Markup Language). 

To make Web pages, you must either (1) learn and write HTML commands or (2) use software called "Web editors" that write the HTML commands automatically for you.  If you want to see what the HTML code looks like for this Web page, choose "Source" or "Page Source" from your browser's "View" menu now. What do you think? Do you want to learn how to do all that coding? If not, continue on and you'll learn to use a Web editor.

This activity will teach you how to make a simple Web page using the Mozilla Composer Web editor.  As a matter of fact, you will reproduce *this* Web page, ("My Home Page") its appearance and functionality.  You will do this by editing a document called "Not Quite My Home Page".  Click here to see "Not Quite My Home Page."  The text of the two pages is exactly alike, but there is no formatting, images or links on "Not Quite My Home Page." You'll add those features.  But let's not get ahead of ourselves.

Steps to follow:

1. Download the free Mozilla browser to your computer. You'll be using Mozilla's Composer component (it's a Web editor) to build your Web page. When you're done, continue.

2. While you are on the "My Home Page" Web page, you'll want to download the image of the laptop for later use.  a) Right click (click and hold your mouse button down if you have a single button mouse) on the laptop image.  b) Select "Save image as. . . " or "Download image"  (NOT copy image)  c) Select a location on your computer to save the image  and click "Save."  The laptop file (lptp4.gif) will download to your computer.  You'll use it later!

3. Print out this page (you may have already done that), and keep it next to you as you work. It contains all the instructions you will need.

4. Navigate to "Not Quite My Home Page." You will need to download it to your computer. You will then open it in the Mozilla Composer Web editor (which you downloaded in Step 1).  You'll modify it so it looks and acts like "My Home Page," which you are now viewing.

5. To download "Not Quite My Home Page":

a) Be sure you are at Not Quite My Home Page.
b) Choose "Save as. . ." (or it may say "Save page as. . .") from the "File" menu in your browser.
c) You will see a dialogue box. Near the bottom, you'll see "Format." Choose ".html" or "html source" from the format menu. Save the file to your disk.

6. Now, if you are not already using the Mozilla browser, launch it now. Choose "Composer" from the "Window" menu. (Or you can click on the Pen/Paper icon at the bottom of the Mozilla window). This will open the Composer feature (your free, friendly Web editor so you *won't* need to learn all the HTML code!).

7. From the Composer "File" menu, choose "Open File." Locate the file "Not Quite My Home Page" that you downloaded to your computer and open it. Using Mozilla Composer (the Web editor), you can now change this file to be just like your handout, "My Home Page."  From the "File" menu, choose "Save as. . ."  Title your document "myhome.html" and save it to your computer.  Pay attention where you save it so you can locate it later.   From now on, you'll be working from the printed copy of "My Home Page."  Just follow the instructions from the handout.

Here are six important things to learn when working with a Web editor:

1) Entering and editing text.
2) Making Tables
3) Making links to other Web sites
4) Making links to locations within a Web page  (Anchors)
5) Inserting Images
6) Uploading pages to a server.

As with a word processor, you can always spell check your document.  Look under "Edit" menu, "Check Spelling."  Go ahead and correct any spelling errors you find.

Be sure to try some lists.  You'll find icons for these in the toolbar.  Or you can choose "List" from the "Format" menu. Try bullets and numbers.  Which do you like best?  See if you can create the lists below.  When you want to go back to "normal" type, just choose "Normal" from the pull-down menu at the left of the toolbar.  Lists are very useful because:

1. They help the reader follow your points.
2. They help the writer stay organized.
3. They make your page look good!

• They help the reader follow your points.
• They help the writer stay organized.
• They make your page look good!

When you want to see what your page will look like when posted to the Internet, including checking the functionality of any links you create, click on the "Browse" icon in the toolbar at the top of the page. (Save when prompted to do so).   When you want to return to Composer to continue editing your page, select "Composer" from the "Window" menu.

By the way, horizontal lines are great for dividing your page into sections.  Just choose "Horizontal line" from the "Insert" menu.

Tables are very useful for presenting information.  They are also useful for formatting a Web page.  Make a simple table.  Click the "Table" icon in the toolbar or use "Insert" and "Table" from the menu.  Enter "3" rows and "2" columns.  And here is your table.  Enter the data.  Use the "Tab" key to move between the table cells.
 

Week 1	Begin during class on Friday, 6/29 and complete by 7/6
Week 2	Begin during class on Friday, 7/6 and complete by 7/13
Week 3	Begin during class on Friday, 7/13 and complete by 7/20

When making Web pages, there is no "tab" key to format text.  We often use "invisible" tables to help format pages.  Create a new blank table like the one above.  In the "Border " box, replace the "1" with a "0" This makes the  table invisible and works to space the words on the page.  You can make other formatting changes in your table by using the "Table" menu and "Table Properties."
 

Week 1	Begin during class on Friday, 6/29 and complete by 7/6
Week 2	Begin during class on Friday, 7/6 and complete by 7/13
Week 3	Begin during class on Friday, 7/13 and complete by 7/20

When you want to see what your page will look like when posted to the Internet, including checking the functionality of any links you create, click on the "Browse" icon in the toolbar at the top of the page.  When you want to return to Composer to continue editing your page, select "Composer" from the "Window" menu.

Let's say you want to make a link to the popular search engine Google.  Follow these steps.
1. With your mouse, highlight the word you want to be a link (in this case, "Google").
2. Click the "link" button in the toolbar at the top of the window.  (Or choose "Link" from the "Insert" menu.
3. Type "http://www.google.com" in the "Link location" box.  Click "OK."  The link is created.  

When you want to see what your page will look like when posted to the Internet, including checking the functionality of any links you create, click on the "Browse" icon in the toolbar at the top of the page.  When you want to return to Composer to continue editing your page, select "Composer" from the "Window" menu.

To help users navigate within a Web page, you can make links to move from one part of the page to another.  For example, we can make links from the list of six important things to learn at the beginning of this handout to each of the related headings in the page.  Follow these steps:

1.  First, you need to place "anchors" next to each heading in the page.
2.  Highlight the heading.  Choose "Named anchor" from the "Insert" menu. An icon will appear in front  of the heading.  Create an anchor for each heading.

After you have created your anchors, you want to make links from the headings to the matching anchors. 

1. With your mouse, highlight  "1) Entering and editing text." 
2. Click on the "link" icon in the toolbar at the top of the window.  You will see a box "Enter a Web page location, a local file, or select a Named Anchor or heading from the pop up list."
3. Clicking on the small downward arrow will show a pop up list of all the anchors you have created.  Click on the anchor you want and it will pop into the box.  Click "OK."
4. Repeat these steps for each of the six important things to learn at the top of this handout.
5. Now click on the "Browse" icon from the toolbar at the top of the window.  Click on the links you created.  Do they all work?!
6. When you want to return to Composer to continue editing your page, select "Composer" from the "Window" menu.

Earlier in this session, you saved the image file(lptp4.gif) to your computer.  Now, click your mouse under the title of the web page you are creating.  Click the "Image" icon in the toolbar at the top of the window. Type "laptop" in the "Alternate text" box.  Click the "Choose file" button.  Locate the file "lptp4.gif".  Select it and click "Open."  Click "OK."  The laptop image will appear.

When you want to see what your page will look like when posted to the Internet, including checking the functionality of any links you create, click on the "Browse" icon in the toolbar at the top of the page.  When you want to return to Composer to continue editing your page, select "Composer" from the "Window" menu.

Your Web page is now complete.  You have viewed it with Mozilla Navigator, but it is not on the Internet.  It is on your computer disk or hard drive.  In order to put your Web page on the Internet, you'll need to upload it to a server.  We won't do this now because many of you don't have server space.  However, when you want to post this page to the Internet, you click the "Publish" button on the toolbar.  You'll fill in the server address, your login and password.