HTML Basics:
Icon: FrontPage Using FrontPage

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

The first step in learning to use a program is to learn how to start it. The shortcut to FrontPage Start Menu: FrontPage is tucked away in the Programs section of your Start menu.

Once you get past the problem of getting FrontPage started,  you will take a look at the changes that FrontPage makes to the HTML document you created with Notepad. WYSIWYG editors generally do make changes or additions to the source code. These changes are often helpful, but sometimes they are annoying or even disastrous.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by hand To subtopics
    FrontPage/FPX Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
        Formatting Bar
        Standard Bar
        Views Bar
    icon-footprintUsing FrontPage
    icon-footprintText links
    icon-footprintCreate web
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Using FrontPage

 Icon Step-by-Step

What you will learn: to open FrontPage
to open an existing document in FrontPage
to view the HTML source code in FrontPage
what changes FrontPage makes to the source code

 Start with:  Desktop   Class disk

Open a document

  1. Open FrontPage.

    Method 1 -Shortcut on Start menu Menu: icon for FrontPage
    |  Programs  | FrontPage

    Method 2 -(If you cannot find the shortcut) From the Run box:

      Start  |  Run  | type  frontpg  and press ENTER.

    Opening FrontPage window with blank document and Task Pane

    Dialog: Options | General tab - Task Pane shown on StartupNote that the Task Pane at the right of FrontPage's window appears automatically by default. It contains links to frequent tasks and to the last several documents you worked on. You can turn off this behavior in the Options dialog on the Tools menu. Just uncheck the box by Startup Task Pane.
    Menu: View | Task Pane

    To get the Task Pane back later while you work, go to the View menu and select Task Pane.


  2. Button: Open | Open...From the menu select  File  |  Open  or on the Standard toolbar select the Open button's arrow and then Open...
  3. Type into the File Name text box the path to the version you created of Hector's web page before you added extra spacing:
     a:\my docs\web\hector3.htm 

    hector4.htm displayed in FrontPage

View HTML in FrontPage

FrontPage may have made some changes that you cannot see here! To see the changes, you must look at the HTML code.

  1. Buttons: Views - HTML selectedSelect the HTML button at the bottom of the document.

    There are several changes.

    hector3.htm in HTML view in FrontPage

    • New lines in the HEAD section.
    • Colors added to the tags and their attributes >> easier to find and read them.
    • Indents added for the definition list >> helps you see what is what in that section.

    TipIf your document did not have any changes, your FrontPage is probably set to leave the existing HTML code alone. You can reset this feature. From the menu choose  Tools  |  Page Options  |  HTML Source . Choose Reformat using the rules below and then click the Reset button. Switch to Normal view and then back to HTML view. You should now see the changes.

    Tip If you were to save this page with FrontPage (not yet!), the spacing and indention changes you see would also be saved. The color coding is not saved in the document itself. FrontPage has to figure that out each time.

  2. Do not save this file yet!!

View HTML in Notepad

You will compare the original code that you typed in Notepad to what FrontPage is showing.

  1. Open Notepad again.
  2. Dialog: Open with web folder shown and txt type selectedFrom the Notepad menu select  File  |  Open . The Open dialog opens.
  3. Use the Look in: tree drop list to select drive A: and open the folders down to  web .

    No documents are shown!  Your files are not missing. The Files of type: shows only Text documents (*.txt). None of the files in the folder have the extension txt, so they are hidden. You need to change the type.


  4. Dialog: Open with web folder showing and file type = All filesOpen the drop list for Files of type: and select  All Files (*.*) . Now you can see the files you saved earlier.
  5. Select the file  hector3.htm  and click the Open button. The code appears in Notepad.

    Since you did not save the page with FrontPage, the code looks just the way you typed it before. You may have typed it with different spacing than what is in the illustration. Remember, it is hector4.htm that has the spacing and indentions that you added yourself.

    Notepad showing hector3.htm

  6. Compare your original source code in Notepad to the way FrontPage displays it.

    Which is easier to read and work with?

    The longer and more complex the code, the more helpful the colors and white space are.

    The spacing you added in hector4.htm is very much like what FrontPage added. But FrontPage can show the tags in color. The more attributes your tags have, the more helpful this color-coding is.

    TipIf the lines of code run out of the window to the right, you do not have Word wrap selected in the Edit menu.

  7. Close Notepad.
  8. Switch back to Normal view and close hector3.htm.