My First Web Page

Here are step-by-step instructions for creating a web page using FrontPage Express application.

• We begin with the basics necessary to create a page with text and a few simple features such as:
  • page title,
  • background and text colors,
  • text formatting.

Once you are comfortable with the basic idea of creating web pages, we will learn additional features - then, you can revise your page and add additional features. One of the great things about the Web is that you can continually go back and revise and update your page as often or as little as you want.

Open the FrontPage Express application
Simply locate the FrontPage Express icon on your desktop, and double click on it.You are now in a screen that is very similar to word-processing programs like Microsoft Word, with pull-down menus and button bars across the top. Think of this application as a word-processing program with extra commands that you use to put in the features of a Web page.

Give your page a title
Give your page certain identifying characteristics.

• Go the "File" pull-down menu and choose "Page Properties..."

• Title: In the space called "Title," you will give a short name to your page. This is what people will see across the very top of the Web browser when they look at your page, so you should keep it short and simple. The title for this page is: "My First Web Page -  your name" -- it's what you see at the top of your screen or the top of your print-out of this site. (It is not the filename you'll use later to save your page.)      

Choose colors for the background and text
Choose a basic set of colors for background and text. You can go back and change these later if you change your mind.

• Go the "File" pull-down menu and choose "Page Properties..." and then click on 'Background' tab
• If you do nothing, your page will be set with "default" colors you see on the right: probably a gray or white background, with black lettering, blue active links, and red visited links.
• To change any of the colors, change "Background" and "Text" color. You will get a color palette. Click on the color you want. You will then see it displayed on the right.
• When you are happy with your color scheme, click "OK" and the dialogue box will close.
  

CAUTION: Many Web pages are unreadable because the text colors don't show well against the background. Choose colors that will be very clear and reader-friendly, even on small monitors and laptops that people looking at your page might be using. You won't be able to control the precise computer the world uses to look at your page, so err on the side of clarity. White is becoming the background of choice for its readability.

CAUTION: Another color problem is using white type on a dark background. It looks great on the screen. But if somebody wants to print out your page for reference, it won't print. Why? Because backgrounds don't print out and all that's left is white type -- which won't show when printed.

CAUTION: If you believe the news reports, at least a trillion new people start using the Web every six minutes. It is safe to say, though, that many people looking at your page will be novices. It is recommended that you stick with familiar color schemes, especially blue for active links and red for visited links, which have become standard, to make your page user-friendly.

Enter and format text
You are now ready to enter text, just as you would on a word-processing document. Type two 5-sentences paragraphs. Describe one of your short-term goals in the first paragraph. In the second paragraph briefly dscribe one of your long-term goals.  Also, above each paragraph, you should have a title: "My Short Term Goal" and "My Long Term Goal".

Use your mouse to highlight text you want to format. Then:

• Text size: To change the size of the highlighted text, click on A buttons on the tool bar to increase or decrease the size of the text.
• Bold type: To put the highlighted text in bold, click the bold B on the lower row of the button bar.
• Italics: To put the highlighted text in italics, click the italicized I on the lower row of the button bar.
• Underlining: To underline the highlighted text, click the U on the lower row of the button bar.
• Alignment: To align text to the left or centered, go to the 3 buttons on the far right of the upper row of the button tool bar, where you can select the alignment (left, center, right). If you do nothing, left alignment is the default alignment. (Make sure the titles of your paragraphs are alligned in the center)
• Fonts: If you go to the "Format" drop-down menu and click "Font", you will see a list of fonts available. You can choose any of the fonts there to change your font style. 

CAUTION: The person looking at your page on the Internet will be able to see those fonts ONLY if they are loaded onto that person's own computer. As Macs and PCs often give different names to their fonts, the odds are that other people won't see your page in the fonts you choose. You're always safe if you just stay with the default font ("Times Roman"). If you design clever visual effects that depend on an unusual font, they might come out rather strangely on somebody else's screen. Composer conveniently will set both Arial and Helvetica (names on PCs and Macs for the same font) for you.

NOTE: As an alternative to the button bars, you can also use the "Format" pull-down menu which lists all of the choices above for formatting.

Save your page
As you have now entered quite a bit of text and formatting, it would be a good idea to save your page. You are saving a file, just as you would save a word-processing file.

• Click the "Save" button on the button bar OR use the "File" pull-down menu and click "Save."
• Click "As File" button.
• Note that the name of the file is displayed for you and is similar to the title of this page. Replace that name with only your name if you are saving it on the computerws. In computer, save it to: My Documents/Babich
• Your filename should be in all lower-case, with no spaces and no punctuation. Why? By staying with lower-case right from the beginning, you'll avoid problems down the road in inconsistent file names on the server and in your HTML-coding.

Previewing your page
Open Internet Explorer. Click on "File" and then "Open...". Click on "Browse" and then navigate to your freshly cretaed page. Click OK. Your page will be displayed within IExplorer.

After you have finished with this part, I must see your work before you proceed adding additional features to your Web page. Once I grade your work that you have done so far, you will proceed by clicking here.