Skip to content

Browser Window Tour

Run the Browser Window Tour MicroSim Fullscreen

You can include this MicroSim on your website using the following iframe:

1
<iframe src="https://dmccreary.github.io/digital-citizenship/sims/browser-window-tour/main.html" height="502px" width="100%" scrolling="no"></iframe>

Description

This MicroSim shows a pretend web browser window. Students click on four parts of the window to learn what each part is called:

  • Address bar — the strip at the top of a web browser where the URL lives
  • URL — the address of a website
  • Search box — where you type a few words when you don't know the URL
  • Page area — where the website appears

Each explanation uses the same sentence as Chapter 1, so the MicroSim reinforces the chapter's definitions instead of introducing new ones. The page area is a pretend web page. It is not a copy of any real website.

How to use it:

  • Move the mouse over the browser. A light blue outline shows which part you are pointing at.
  • Click a part to keep it highlighted and read its name and what it does.
  • Watch the Found 1 of 4 counter and try to find all four parts.
  • Use the Website dropdown to change the URL in the address bar. Notice that the page area changes too.
  • Click Reset to clear the highlight and start again.

Learning Objective

Given a stylized web browser window, students will be able to identify and name the address bar, the URL, the search box, and the page area, and recall what each one does in their own words.

  • Bloom Level: Remember (L1) and Understand (L2)
  • Bloom Verb: Identify
  • Library: p5.js

Lesson Plan

Time: 10 minutes

Before the MicroSim (2 minutes)

Ask the class: "When you open a web browser, how does it know which website you want to visit?" Take two or three answers. Introduce the idea that every website has an address.

During the MicroSim (5 minutes)

Have students work in pairs or individually:

  1. Find and click all four parts of the browser until the counter reads Found 4 of 4.
  2. Change the website with the dropdown. Which parts of the browser changed? Which parts stayed the same?
  3. Cover the explanation box with a hand. Point to a part and say what it is called before clicking to check.

After the MicroSim (3 minutes)

Ask: "What is the difference between the address bar and the URL?" Guide students to the idea that the address bar is the place and the URL is the address written in that place. Connect this to the chapter's safety tip: before clicking a link, look at the address bar to see where you are going.

Assessment

Show students a screenshot or drawing of a browser window with the four parts numbered. Students write the name of each part and one sentence about what it does.

References

  1. ISTE. ISTE Standards: For Students. International Society for Technology in Education.
  2. Common Sense Education. Digital Citizenship Curriculum.

Page Feedback — Leave a comment or reaction below. Requires a GitHub account.