HTML Basics:
Icon: FrontPage Express Using FPX

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 Start Menu icon: FrontPage Express to FrontPage Express is tucked away in the Programs section of your Start menu. It's in different locations depending on what version of Internet Explorer you are running.

Once you get past the problem of getting FPX started,  you will take a look at the changes that FPX 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.

WarningThe Open dialog lists file types that FPX can not actually open. The dialog looks at what filters you have installed but does not check to see if FPX understands those filters! Stick to  files with extension .txt, .htm, or .html. If you try to open an Excel spreadsheet, for example, you will get a mess of unhelpful characters. A Word document may hang the whole program. 


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 HandTo subtopics
    WYSIWYG
    FrontPage/ FPX Arrow - Subtopic open
      FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
                   Interface
                   Formatting Bar
                   Standard Bar
                   Forms Bar
                   icon-footprintUsing FPX
                   icon-footprintEdit
                   icon-footprintText links
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Search 
Glossary  
Appendix
Icon Step-by-Step

Step-by-Step: Using FPX

  Icon Step-by-Step
What you will learn: to open FPX
to open an existing document in FPX
to view the HTML source code in FPX
what changes FPX makes to the source code

 Start with:  Desktop   Class disk

Open a document

  1. FPX with blank documentOpen FrontPage Express.

    Method 1 -Shortcut on Start menu Menu: icon for FrontPage Express (depends on your version of Internet Explorer:
     Start      |  Programs  |  Internet Explorer  |  FrontPage Express 

    or  Start  |  Programs  | Accessories  |  Internet Tools  |  FrontPage Express

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

      Start  |  Run  | type  fpxpress.exe  and press ENTER.

    Method 3 - Create a shortcut
    (If you had to install FPX yourself, there is no shortcut yet) Open a My Computer or Explorer window and navigate to the folder where you installed FPX. Find the file fpxpress.exe. Right drag this file to your Start menu and hover over Programs until the list of shortcuts opens. Drop in a convenient place on the menu. A new shortcut to FPX appears. Start FPX by clicking the shortcut you just created.

    To rename the shortcut, right click on it and choose Rename from the menu. You can drag the shortcut to a folder in the Start Menu, if you wish.
     

  2. Dialog: Open File - hector3.htmFrom the menu select  File  |  Open . A dialog opens which is different from the standard Windows Open dialog.
     
  3. Click on the radio button From file, if necessary.
     
  4. Type into the text box the path to the last version you created of Hector's web page:
     a:\my docs\web\hector4.htm 

    hector3.htm displayed in FPX windowFrontPage Express displays the page with a gray background, which is the default background color for FrontPage Express.
     

View HTML in FrontPage Express

Except for the background color, this page looks just like what you saw with IE. But FrontPage Express has made some changes that you cannot see here! To see the changes, you must look at the HTML code that FrontPage Express is using.

  1. From the menu select  View  |  HTML . A new window appears that shows the HTML code that defines the page.

    There are three kinds of changes.

    hector3.htm in HTML view

    • 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 you do not see colored text, check the box Show color coding at the bottom of the dialog.

    Tip If you were to save this page with FrontPage Express (not yet!), the spacing and indention changes you see are also saved. The color coding is not saved in the document.
     

  2. Do not save this file yet. Leave this dialog open!!

View HTML in Notepad

You will compare the original code that you typed in Notepad to what FrontPage Express 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  hector4.htm  and click the Open button. The code appears in Notepad.

    Since you did not save the page with FrontPage Express, the code looks just the way you typed it before. You may have typed it with different spacing than what is in the illustration.

    Notepad showing hector3.htm

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

    Which is easier to read and work with?

    Of course, when you typed the text, you could have included blank lines and indents to help make it look more like what FrontPage Express did automatically.

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

    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. Close the HTML window in FPX.