HTML Basics:
Icon: FrontPage Edit

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

The WSYIWYG interface of FrontPage makes it much easier to make changes. You can see what you are doing as you do it!


Button: Style - with list of styles showingThe default Style box on the Formatting Bar lets you apply an HTML block element tag to your text. A block element is one that creates a new paragraph.

Unlike with Word, you cannot use this box to create your own styles directly. You must use Cascading Stylesheets (not covered in HTML Basics). If you open a page that has a CSS stylesheet (like the pages of this site), the styles in the stylesheet will be shown in the Style list.

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:Edit in FrontPage

 Icon Step-by-Step

What you will learn: to apply a style
to add text
to save as a file on a disk
to use Page Setup to configure for print
to use Print Preview
to print from FrontPage

 Start with:  Class disk, hector4.htm

Apply a Style

  1. Change the sentence  Here are my hobbies.  to simply  My Hobbies  

    Don't forget to remove the period of the end of the sentence.

  2. Put the cursor in the line  My Hobbies .
  3. From the Style drop-down list select the style Heading 3. The formatting of the whole line changes.

Add Text

  1. Add a blank line above   My Hobbies .
    [With the cursor at the start of the line, press the ENTER key.]
  2. Apply the style Normal to the blank line.
    [With the cursor in the blank line, choose Normal from the Style drop-down list.]

    This changes the height of the blank line slightly.

  3. Starting on the blank line you just added, type:
    My Job

    I am a travel agent for World Travel in Buenos Aires, Argentina. I spend my work day talking to people about where they want to go and trying to get them the best prices on their tickets and hotel rooms.

    I also write and edit our email newsletter Here and There, which keeps our customers informed about special deals and news in the travel industry.

    My Education

    I grew up in Buenos Aires and went to public school. I studied business at the Universidad de Buenos Aires and graduated in 1985. In my job as a travel agent I have really needed the history and geography that I learned (or should have learned) in school - even though I was not interested at the time!

    My Family

    I married my beautiful Carla in 1986. We have two children - Ricardo who is 10 years old (our soccer star!) and Rosa who is 7 years old (our ballerina).


  4. Apply the style Heading 3 to the lines  My Work ,  My Education , and  My Family .

Save As

You can save an HTML file with a different name or to a different location on either a web server or a local drive by using the command  File  |  Save as... .

  1. Dialog: Save AsFrom the menu select  File  |  Save as... .

    Tip In the line Page Title you should see  Home of Hector Chavez - your name  but, of course, you should see your actual name instead of "your name". You can make changes by clicking the Change title... button.

  2.  Class disk Type the path  a:\my docs\web\hector5.htm  in the textbox File name or and click the Save button to save to your web folder.

    Notice that only files with the extension htm or html are showing because of the choice in the textbox Save as type .

    TipSuppose you wanted to save directly to a web site. (This is not usually a good idea!) You can type the full URL in the File name textbox. You will get a login dialog box where you will have to fill in the username and password.

    Message: Connecting to Web serverDialog: Login

    Usually you will want to save to your local copy of the web and let FrontPage publish the changes. This lets FrontPage do its tracking magic.


  1. Switch to HTML view using the button at the bottom of the document. You can see your new text with the helpful colors and spacing.

     HTML view of hector5.htm

  2. Scroll this window to see how the whole page of code looks.

    Dialog: Page Options | Color codingTipChange colors: You can change the color coding. From the menu, choose  Tools  |  Page Options  |  Color coding  tab.


  3. From the menu select  File  |  Print Preview .

    Print Preview

  4. Print Print the HTML source code by clicking the Print... button on the toolbar.
    TipA comment will print when you print the HTML source from FrontPage. It won't show or print from Normal view or from a browser.
  5. Switch back to the Normal view window.

Preview in Browser

Always check your page in the browser before you decide that you are finished. Even the Preview view in FrontPage does not always look quite the same as the page looks in Internet Explorer. Try different window sizes check how your text wraps. (This is very important if the page includes images!)

  1. From the menu select  File | Preview in Browser...
    The Preview in Browser dialog appears. You will see choices for each of the browsers you have installed and for several window sizes.
    TipYou can only have one version of Internet Explorer installed at a time.

  2. Select your browser and window size and click on the Preview button.

    TipThe page must be saved before you can preview the page. If the box for Automatically save page is not checked, you will see a message box asking if you want to save. If you choose No, you won't get a preview.

    hector4.htm in FPXThe page displays with the white background because of the choices you made in Web Project 1: Browser Basics ( View  |  Internet Options... |  Colors  |  Use Windows Colors ). Some browsers use gray as the default background.

  3. Scroll to see how the whole page looks.
  4. Resize the window to see how the text wraps at different window sizes.
    (With the window NOT at maximum size, drag a corner or a side of the window.)
  5. Switch back to FrontPage.

Page Setup

  1. Dialog: Page SetupFrom the FrontPage menu select  File  |  Page Setup  The Page Setup dialog opens. The illustration shows the default settings.

    Tip The &T inserts the <title> text. &P inserts the page number of the printed page. Other codes that work in Notepad's Page Setup don't work here.  Go figure!

    Tip The settings in this dialog apply to all pages printed from FrontPage. Remember to check the settings before printing.

  2. Dialog: Print Page Setup - header and footer for hector4In the Header textbox, type after &T the name of the file:  hector5
  3. In the Footer textbox, type after the &P the current date. Unfortunately FrontPage won't do the date automatically for you.
  4. Click on OK to close the dialog.

Print Preview & Print

  1. Click the button Button: Print Preview Print Preview to see how this page will print.

    Preview: hector5.htm

  2. Move the mouse pointer over the page. It changes to the shape Pointer: Zoom.
  3. Click on the page to enlarge the view.
  4. Check that:
    • the header is going to print correctly with the Title and filename.
    • the footer has the page number and the current date.

    TipThe top and bottom margins must be tall enough to hold your text. If not, your letters may be cut off or not show at all.

    Tip If you have a few lines on a second page, you may be able to get it all on one page by changing the left and right margins in Page Setup to a lower number.

  5. Print Click on the Print  button to print the document hector5.htm.

WarningThe changes you made to Page Setup will apply the next time you print a page! Don't forget to change the file name and date!