Browser Basics:

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

If a web site has a lot to say, it is hard to get it onto a short page. But long pages can take longer to load than the viewers want to wait. In large sites people can get lost while wandering from page to page.

One way of breaking the information into smaller pieces and of keeping navigation links always in view is to use frames. A master document divides the screen into rectangular areas. Each area is called a frame. Each frame displays a different document. Commonly a frame at the top or side contains links to navigate the site. A larger frame is used to show the information pages of the site.

Diagram of frames layout

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser Basics    ConnectingTo subtopics
    IE InterfaceTo subtopics
    Navigating Arrow - Subtopic open
    icon-footprintAddress Bar
    icon-footprintAddress Paths
    PrintingTo subtopics
    SavingTo subtopics
    SearchingTo subtopics
    ExercisesTo subtopics

Project 2: HTML BasicsTo subtopics


One problem with framed sites is that they can load pages from other sites inside their own frames. If that other site is also framed, you can run out of room to see anything but the frames!

If the frame borders are invisible and the page colors and backgrounds are carefully chosen, you may not realize right away that a site is framed.

Icon Step-by-Step 

Step-by-Step: Frames

 Icon Step-by-Step

What you will learn:

to use a navigation frame
to recognize invisible frames

Start with: IE open to Home page

Open framed site

You can't tell from the link whether the site it leads to is framed or not.
  1. My Home Page - link to World Travel Inc.On the page My Home Page, click the text link to World Travel Inc. The browser loads a set of 3 framed pages for a fictional travel agency.

  2. World Travel Inc. home pageResize the window shorter, if necessary, until vertical scrollbars appear in the the bottom two frames.
  3. Scroll down in both frames to see the parts that are off screen. It's not much fun to have to scroll to get to navigation links.

    The navigation frame on the left has links to other documents in World Travel's site. It also has links to other sites. (You must be online to see some of these pages.)

    WarningMany sites do not make it clear when a link is to a page that is not part of the site. You can find yourself unexpectedly far, far away.

Invisible frames

  1. In the Address Bar change  index.html  to  invisible.htm  and then press ENTER.

    World Travel with invisible frames

  2. Resize the window smaller and larger. A scrollbar never appears! What happened?

    In this version of the World Travel page, the borders between the frames and the scrollbars are turned off. This does look better. In a small window, however, as in the illustration, some of the links are out of view at the bottom of the left frame. A visitor won't know they are there! Whoops!

    Tip A suspicious visitor could use the TAB key to tab through the links to get to the offscreen ones.

  3. In the Address Bar change  invisible.htm  to  invisible2.htm  and press ENTER.

    World Travel - invisible frames and scrollbars

    This version of the World Travel page includes a scrollbar for the navigation frame when the window size is small. With a scrollbar, the invisible frames do not look as good. At least it is clear that part of the document is not in view.
  4. Use the Back button twice to return to the page with bordered frames.

Opens in another frame

  1. World Travel - Prices & PackagesIn the left frame click on the link Prices and Packages

    A new page appears in the frame on the right. The link changes color to show that is has been visited. The code for the link controls where the new page appears. It is not random!

Opens in the same frame

  1. World Travel - TahitiIn the frame on the right, click on the link Tahiti in the text at the top. (Do not click on the tickets at the bottom yet! That opens a different document.)

    A new page appears in the same frame. This is the default behavior for links. Special code must be used to get a link to open a page somewhere besides the current frame.

    There is also a link Tahiti in the left navigation frame to this page. This link will not change color, however, until that frame is refreshed.

  2. Click Button-Refresh  the Refresh button. The whole framed page is refreshed. All visited links turn purple.  The links in the Tahiti document will all turn purple at the same time even though you did not click any of them yet.  They are links to spots on their own page.

  3. Scroll down to the bottom of the Tahiti document in the right frame .
  4. Move from the top of the page to the bottom and back using the keyboard:
    Keyboard Top of Page: Use the key combo CTRL + HOME to go to the top of the page. (Hold the CTRL key down while pressing the HOME key.)

    Keyboard Bottom of Page: Use the key combo CTRL + END to go to the end of the document.

Spot on the same page

  1. World Travel - Map Click on the link Map at the top of the Tahiti page.

    It takes you to a different place within this same document. These kinds of links are very useful for long pages containing several topics.

  2. Practice going from the top of the page to the bottom, using links and key combos . [Up and down and up and down. Don't get too dizzy!