How web browsers request pages in Intro to Computing - Draw the Process

Draw This - beginner

Draw a flowchart that shows the steps a web browser takes to request and receive a web page from a server.

10 minutes

Hint 1

Hint 2

Hint 3

Hint 4

Grading Criteria

Start and End symbols present

Flowchart shows user action as start

Browser sending request step included

Server receiving and processing request shown

Server sending response step included

Browser receiving response step included

Browser displaying page step included

Arrows correctly show flow direction

Solution

  +-------------------+
  | Start: User action |
  +---------+---------+
            |
            v
  +-------------------+
  | Browser sends HTTP|
  | request to server |
  +---------+---------+
            |
            v
  +-------------------+
  | Server receives   |
  | request           |
  +---------+---------+
            |
            v
  +-------------------+
  | Server processes  |
  | request and sends |
  | HTTP response     |
  +---------+---------+
            |
            v
  +-------------------+
  | Browser receives  |
  | response          |
  +---------+---------+
            |
            v
  +-------------------+
  | Browser displays  |
  | the web page      |
  +---------+---------+
            |
            v
  +-------------------+
  | End               |
  +-------------------+

This flowchart shows the simple steps a web browser follows to get a web page:

1. User action: The user types a web address (URL) or clicks a link.
2. Browser sends request: The browser sends an HTTP request to the web server that hosts the page.
3. Server receives request: The server gets the request and understands what page is needed.
4. Server processes and responds: The server prepares the web page and sends it back as an HTTP response.
5. Browser receives response: The browser gets the page data from the server.
6. Browser displays page: The browser shows the web page to the user.

This process happens very fast, so the user sees the page almost immediately.

Variations - 2 Challenges

[intermediate] Draw a flowchart showing how a web browser requests a web page and handles a '404 Not Found' error from the server.

[advanced] Draw a detailed flowchart illustrating how a web browser requests a web page, including DNS lookup, establishing a connection, sending the request, receiving the response, and rendering the page.