Purpose and Overview

Learning Objectives

1. 1Distinguish between the internet and the World Wide Web and give examples of services that use the internet but are not the web.
2. 2Explain the client-server model as it applies to web browsers and web servers.
3. 3Identify and describe each component of a URL: scheme, host, path, query string, and fragment.
4. 4Describe what an HTTP request and HTTP response contain, and interpret common HTTP status codes.
5. 5Explain how HTTPS uses TLS to encrypt communication and authenticate servers.
6. 6Describe the sequence of steps a browser performs from URL entry to page display.
7. 7Explain the role of HTML as structure, CSS as presentation, and JavaScript as behavior in a web page.
8. 8Read simple HTML elements and attributes and explain what they communicate.
9. 9Read a basic CSS rule and identify its selector, properties, and values.
10. 10Describe how JavaScript interacts with the DOM and responds to user events.
11. 11Explain what a web application is and how it differs from a website.
12. 12Describe web accessibility principles and explain why they matter.

Sections at a Glance

• 20.1The Internet and the Web Are Not the SameInternet as infrastructure; the web as one service; Tim Berners-Lee and the three founding ideas; other services that use the internet
• 20.2Clients and ServersClient-server model; browsers as clients; web servers; one server to many clients; servers in data centers
• 20.3URLsUniform Resource Locator; scheme, host, path, query string, fragment; URL design; connection to file paths
• 20.4HTTP and HTTPSHTTP requests and methods; response status codes; headers and body; HTTPS and TLS; certificates; when HTTPS matters
• 20.5BrowsersWhat a browser does; rendering sequence; the browser as interpreter; common browsers; security and privacy roles
• 20.6HTML as StructureTags, elements, attributes; common HTML elements; a complete HTML document; semantic HTML
• 20.7CSS as PresentationCSS rules, selectors, declarations; common properties; the cascade; responsive design and media queries
• 20.8JavaScript as BehaviorJavaScript in the browser; DOM manipulation; events; fetch and AJAX; JavaScript beyond the browser; three languages together
• 20.9Web AppsWebsites vs. web apps; single-page applications; frameworks; APIs; front-end and back-end development
• 20.10Search Engines, Accessibility, and HostingCrawlers and indexing; SEO; web accessibility; WCAG and POUR; screen readers; hosting types; CDNs; domain registration

The Internet and the Web Are Not the Same

1. In your own words, explain the difference between the internet and the World Wide Web.
2. Name three services that use the internet but are not the World Wide Web. For each, briefly explain why it is not part of the web.
3. Tim Berners-Lee proposed three founding ideas for the web. Name each one and describe what problem it solved.

Clients and Servers

Client (browser)                    Server (web server)
      |                                      |
      |  ---- sends a request ------------>  |
      |                                      |
      |  <--- sends a response -----------   |
      |                                      |
      |  (browser displays the response)     |

1. Define the terms client and server as they are used in the web context.
2. When you load a web page that includes three images from a CDN, a stylesheet from a hosting provider, and HTML from the main server, how many separate client-server exchanges occur at minimum?
3. Explain why the client-server model also describes email and online gaming, even though those services are not the web.

URLs

https://www.example.edu/courses/intro-cs/chapter20.html?section=3#exercises
|                |                 |                     |          |
scheme           host (domain)     path                  query      fragment

URL Design

// Readable — communicates meaning
https://example.edu/courses/intro-cs/chapter20

// Opaque — reveals nothing to a reader
https://example.edu/page?id=84729&ref=3&v=2

Read this URL carefully and answer each question.

https://library.mgu.edu/search?query=algorithms&type=book&page=2#results

1. Identify the scheme in this URL.
2. Identify the host (domain name).
3. Identify the path.
4. List each query string parameter and its value.
5. Identify the fragment identifier. What does the browser do with this value?
6. Does the server receive the fragment identifier as part of the request? Explain why or why not.

HTTP and HTTPS

HTTP Requests

HTTP Status Codes

HTTPS: Encrypted HTTP

1. What is the difference between the HTTP GET and POST methods? Give a real-world example of when each would be used.
2. A server returns status code 301 with a header Location: https://example.edu/new-page. What should the browser do next?
3. You visit a website that asks for your password. The address bar shows http:// without a padlock. Explain why this is a serious security concern.
4. Name two things HTTPS provides beyond what plain HTTP provides. For each, explain why it matters to a user submitting personal information.

Browsers

What a Browser Does

 1  Parse the URL
    (scheme, host, path, query, fragment)
        |
 2  Resolve the domain via DNS
    (domain → IP address)
        |
 3  Establish HTTPS connection
    (TLS handshake with server)
        |
 4  Send HTTP GET request
        |
 5  Receive HTTP response
    (status code, headers, HTML body)
        |
 6  Parse the HTML → build the DOM
    (Document Object Model)
        |
 7  Fetch additional resources
    (stylesheets, scripts, images, fonts)
        |
 8  Apply CSS
    (compute how every element looks)
        |
 9  Execute JavaScript
    (modify DOM, respond to events, fetch data)
        |
10  Render the page on screen

1. After the browser receives the initial HTML response, it discovers references to three external images, one CSS file, and one JavaScript file. How many additional HTTP requests does it need to send?
2. At which step in the browser's rendering sequence does DNS play a role?
3. Explain what "fault tolerance" means in the context of HTML parsing. Why was this choice made when designing early browsers?

HTML as Structure

Tags, Elements, and Attributes

<!-- A paragraph element -->
<p>This is a paragraph.</p>

<!-- A hyperlink with href and target attributes -->
<a href="chapter21.html" target="_blank">Next Chapter</a>

<!-- An image with src and alt attributes -->
<img src="network-diagram.png" alt="A diagram showing client-server communication" width="600">

A Complete HTML Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 20: The World Wide Web</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Chapter 20: The World Wide Web</h1>
    </header>
    <main>
      <p>The web is a system of linked documents and applications.</p>
      <h2>20.1 The Internet and the Web Are Not the Same</h2>
      <p>Most people use these terms interchangeably...</p>
    </main>
    <footer>
      <p>MGU Computer Science Series</p>
    </footer>
  </body>
</html>

Read each HTML fragment and answer the questions without running code.

<nav>
  <a href="index.html">Home</a>
  <a href="chapter19.html">Chapter 19</a>
  <a href="chapter20.html">Chapter 20</a>
</nav>

1. What does the <nav> element communicate to a browser or screen reader?
2. What would the href attribute need to contain to link to an external website?
3. Rewrite the second link so that it opens in a new browser tab. What attribute value would you add?

<img src="network-diagram.png">

4. What is missing from this element? What problem does the absence cause, and for whom?
5. Rewrite this element with a complete and appropriate alt attribute.

CSS as Presentation

Rules, Selectors, and Declarations

/* Element selector — all h1 headings */
h1 {
  color: #2c4a6e;
  font-size: 2rem;
  font-family: Georgia, serif;
  margin-bottom: 1rem;
}

/* Class selector — elements with class="note" */
.note {
  background-color: #fffbe6;
  border-left: 4px solid #f0c040;
  padding: 1rem;
}

/* ID selector — the element with id="main-heading" */
#main-heading {
  text-align: center;
}

/* Descendant selector — links inside nav elements */
nav a {
  text-decoration: none;
  color: #2c4a6e;
}

The Cascade

Responsive Design

/* Default: three-column layout on large screens */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* On screens narrower than 600px: single column */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 1rem;
  font-weight: bold;
}

1. What kind of selector is .warning? What does the dot indicate?
2. How would you apply this style to a paragraph element in HTML?
3. Name two visual properties this rule sets. For each, describe what it controls.
4. A developer wants this same style to apply only to the element with id="alert-box". Rewrite the selector.

JavaScript as Behavior

JavaScript and the DOM

// Select an element and change its text
document.getElementById("status-message").textContent = "Loading complete.";

// Select all elements with a class and hide them
const notes = document.querySelectorAll(".note");
notes.forEach(function(note) {
  note.style.display = "none";
});

// Respond to a button click
document.getElementById("submit-button").addEventListener("click", function() {
  alert("Form submitted!");
});

Events

Communicating with Servers (Fetch)

// Request data from a server in the background
fetch("https://api.example.edu/courses")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
    // Update the page with the received data
  });

let count = 0;

document.getElementById("increment").addEventListener("click", function() {
  count = count + 1;
  document.getElementById("display").textContent = "Count: " + count;
});

1. What event does this code respond to?
2. What happens to the count variable each time the event occurs?
3. What element on the page gets its text updated?
4. If the button is clicked five times, what text will the #display element contain?
5. How is this event-driven program different from the sequential programs studied in Chapter 8?

Web Apps

Single-Page Applications

APIs and the Front-End / Back-End Division

1. What is the key distinction between a website and a web application? Give one specific example of each and explain what makes the web app more than a document.
2. A news aggregator shows articles from 15 different news sources, fetched live without storing them on the aggregator's own servers. Explain how web APIs make this architecture possible.
3. When you add an item to a shopping cart and the cart count updates without the page reloading, which web technology is responsible? Describe the general mechanism.

Search Engines, Accessibility, and Hosting

Search Engines

Web Accessibility

Web Hosting

1. Explain how a search engine crawler discovers new web pages. What prevents it from finding every page on the web?
2. A web page has the following heading structure: <h1>, then <h3>, then <h2>. What problem does this create, and for whom?
3. A small nonprofit expects fewer than 500 visitors per month and has a limited budget. Which hosting type would you recommend? Explain your reasoning.
4. What is a CDN and why would a website serving a global audience benefit from one?

Common Misconceptions

Chapter Summary

• Sec 20.1The internet is the global network infrastructure. The web is one service that uses it, invented by Tim Berners-Lee in 1989. Other services — email, gaming, file transfer — also use the internet but are not the web.
• Sec 20.2The web uses a client-server model. The browser is the client; the web server stores resources. One server can serve many clients; one client may request from many servers to assemble a single page.
• Sec 20.3Every web resource has a URL: scheme, host, path, optional query string, and optional fragment. The fragment is used by the browser locally and is never sent to the server.
• Sec 20.4HTTP defines how browsers request resources (using methods like GET and POST) and how servers respond (with status codes, headers, and a body). HTTPS encrypts communication using TLS and authenticates servers via certificates.
• Sec 20.5Browsers request resources, parse HTML to build the DOM, fetch additional resources, apply CSS, execute JavaScript, and render the page. They also enforce security rules and manage user permissions.
• Sec 20.6HTML is a markup language that describes the structure and content of web pages using elements, tags, and attributes. Semantic HTML uses elements that communicate meaning, improving accessibility and search engine understanding.
• Sec 20.7CSS describes appearance and layout using rules: selectors identify which elements a rule applies to; declarations specify property-value pairs. The cascade resolves conflicts by specificity. Media queries enable responsive design.
• Sec 20.8JavaScript is a full programming language that runs in the browser. It manipulates the DOM, responds to user events, and communicates with servers via fetch. Together, HTML, CSS, and JavaScript provide structure, appearance, and behavior.
• Sec 20.9Web applications go beyond documents to allow users to act and create. Single-page applications update without full reloads. Web apps use APIs to exchange data with servers. Front-end and back-end development cover different layers of the system.
• Sec 20.10Search engines crawl the web by following links and build indexes. Web accessibility follows the WCAG POUR principles. Hosting types range from shared to cloud; CDNs reduce latency for global audiences.

Key Terms

Diagram Review

 1  User types URL in browser
         |
 2  Browser parses URL
    (scheme: https | host: example.edu | path: /chapter20.html)
         |
 3  Browser contacts DNS resolver
    "What is the IP address of example.edu?"
         |
 4  DNS resolver returns IP address
    "example.edu → 203.0.113.47"
         |
 5  Browser establishes HTTPS connection to 203.0.113.47
    (TLS handshake: browser and server agree on encryption key)
         |
 6  Browser sends HTTP GET request
    GET /chapter20.html HTTP/1.1
    Host: example.edu
         |
 7  Server processes request, finds file
         |
 8  Server sends HTTP 200 OK response
    Content-Type: text/html
    [HTML document in body]
         |
 9  Browser parses HTML, discovers linked resources
    (CSS file, images, JavaScript)
         |
10  Browser sends additional requests for each resource
         |
11  Browser applies CSS, executes JavaScript
         |
12  Page is rendered and displayed to user

Questions: (1) At which step is DNS involved? (2) At which step does encryption begin? (3) Why does the browser send additional requests after step 8? (4) What status code would appear in step 8 if the file did not exist?

+-------------------------+---------------------------+---------------------------+
|         HTML            |           CSS             |        JavaScript         |
+-------------------------+---------------------------+---------------------------+
| Describes WHAT is here  | Describes HOW it looks    | Describes WHAT it does    |
| Structure and content   | Appearance and layout     | Behavior and interaction  |
|                         |                           |                           |
| Headings, paragraphs,   | Colors, fonts, spacing,   | Responds to clicks,       |
| links, images, forms,   | sizes, positions,         | validates forms,          |
| tables, lists           | animations, breakpoints   | fetches data from server  |
|                         |                           |                           |
| <h1>Chapter 20</h1>   | h1 { color: #2c4a6e; }   | btn.addEventListener(     |
| <p>The web is...</p>   | p { line-height: 1.6; }  |   "click", handleClick)   |
+-------------------------+---------------------------+---------------------------+
          |                          |                           |
          +-------------- Combined in a browser ---------------+
                                     |
                          Rendered web page on screen

Concept Check

1. What is the difference between the internet and the World Wide Web? Give one example of a service that uses the internet but is not the web.
2. In the client-server model, what role does a browser play? What role does a web server play?
3. What does an HTTP status code communicate? Give one example of a 2xx code and one 4xx code, and explain what each means.
4. Why is HTTPS important for pages that ask users to log in or enter payment information?
5. What is the purpose of the alt attribute on an <img> element? Who benefits from it being present and descriptive?
6. Explain the difference between HTML, CSS, and JavaScript in one sentence each.
7. What is the DOM, and why does JavaScript need it?
8. What is the difference between a website and a web application? Give one example of each.
9. What does a search engine crawler do? Why can search engines not index every page on the web?
10. What are the four POUR principles of web accessibility? Briefly describe each.

Practice Questions

For each URL, identify the scheme, host, path, query parameters (if any), and fragment (if any).

1. https://docs.mgu.edu/cs/chapter20
2. http://example.com/shop?item=book&qty=2
3. https://news.example.org/article/42#comments
4. ftp://files.example.net/report.pdf

Match each situation to the most appropriate HTTP status code.

1. A user requests a page that exists and the server successfully returns it.
2. A user tries to access a page that no longer exists on the server.
3. A page has moved to a new permanent URL.
4. A user tries to view a private document they are not allowed to access.
5. The server crashes while processing a request.

For each task, identify whether it belongs to HTML, CSS, or JavaScript.

1. Adding a heading to a page
2. Making text turn red on hover
3. Validating a form before submission
4. Defining a navigation bar's links
5. Changing the font size for mobile screens
6. Fetching data from an API and updating the page
7. Marking an image with alt text
8. Creating a three-column layout

1. You are building a web page for a school library. It should include: the library's name as a top-level heading, a short description paragraph, a list of three services, and a link to a contact page. Write the complete HTML structure using correct semantic elements. Do not worry about styling.
2. A company redesigns its website and moves pages to new URLs. The old URL http://example.com/about should now be at https://example.com/about-us. What HTTP status code should the old URL return? Why does this matter for users with bookmarks and for search engines?
3. A web page loads slowly for users in countries far from the server. What technology would you recommend? Explain how it works and why it helps.
4. A web app shows a list of books. When the user clicks on a title, a detail panel appears with information fetched from a server — without the page reloading. Describe what role HTML, CSS, and JavaScript each play in this feature.
5. List three specific accessibility improvements a developer should make to this HTML: a page with no headings, images without alt text, and links that all say "click here."

Debugging and Error Analysis

Each item contains a mistake or misconception. Identify it and explain the correct behavior.

Chapter 20 Checkpoint

Real-World Applications

1. E-commerce. When you add a product to a cart and the cart count updates without the page reloading, which web technology is responsible? Explain the general mechanism.
2. Accessibility audit. You visit a website and notice: no visible labels on form fields, images with no alt text, and headings jumping from <h1> directly to <h5>. List three types of users who would experience problems, and for each, explain which specific issue affects them.
3. Search and discovery. A new blogger publishes their first article. Explain why it may not appear in search engine results immediately. What factors might help search engines discover it faster?
4. Security at checkout. A friend says: "I don't need HTTPS on my recipe website — nothing sensitive happens there." Is this reasoning sound or flawed? Make a case for using HTTPS on every page of any website.
5. Responsive design failure. A student loads a school's website on a phone and finds the text is tiny, columns are too narrow to read, and buttons are hard to tap. What is the probable cause, and what CSS technique should the developer have used?
6. Global performance. A photo-sharing website serves users in Europe, Asia, and the Americas from a single server in New York. Users in Tokyo report slow image loading. What infrastructure solution would you recommend, and how does it work?

Mixed Review

These questions draw on Chapters 1–20.

1. (Chapter 4) A web page contains an image with a file size of 2.4 megabytes. How many bytes is that? How many bits?
2. (Chapter 13) A search engine builds a model of the web by crawling pages and recording which words appear on each page. In what sense is this model an abstraction? What real-world detail does it leave out?
3. (Chapter 14) A web server stores files in a directory structure: public/pages/chapter20.html. If the server's document root is public, what path would a URL need to contain to request this file?
4. (Chapter 19) A user's browser has the IP address of a web server but cannot connect. List three possible reasons at the network level why the connection might fail.
5. (Chapter 21 preview) A web page asks you to log in. What is the minimum information a well-designed login form should require? What additional security mechanism, beyond a password, would significantly reduce the risk of account compromise?