D276 Chapter 1 Notes – Introduction to Web Programming

Source: Built from the zyBooks WGUD276v3 Chapter 1 print (sections 1.1–1.7). Not covered: animations (final frame and captions only), code editors clipped in the print (the 1.7 button, rating, and clock scripts; the rest of the 1.5–1.6 practice files), collapsed "View solution" panels, interactive tools (color picker, drag-and-drop), later challenge levels, and external links. Chart values are approximate. Chapter 1 has no LAB sections. Citations like (1.3) are zyBooks sections. These notes are not official WGU material.

Big idea: The web is one use of the internet. IP addresses locate computers, DNS turns domain names into IP addresses, and a URL names one web resource. Browsers and servers exchange HTTP requests and responses, where methods, status codes, caching headers, and HTTPS shape each exchange. Pages are built from three separated layers: HTML (structure), CSS (presentation), and JavaScript (behavior). That separation grew out of the browser wars and standardization, and it helps pages work on mobile devices, for accessibility, in IoT dashboards, and for intelligent systems (1.1–1.7).

Course competency (quoted from the public WGU D276 program guide; the print states no objectives): C1 — "The learner creates the structure of basic web documents using HTML." C2 — "The learner implements web page formatting and interface aesthetics using CSS." Chapter 1 introduces both: HTML elements and links (1.5) and CSS rules and colors (1.6), on top of URL, HTTP, and standards background (1.1–1.4).

1. Web history (1.1)

Internet and web

  • Internet = began as four networked computers in 1969; now the largest, most popular computer network, spanning the globe ("the interconnection of computers communicating using a set of rules") (1.1).

  • FTP (File Transfer Protocol) = an early way to transfer files over the internet: log in to a server, list documents, and download them by typing commands. Early documents were plain text only (1.1).

  • World Wide Web / web = Tim Berners-Lee's more convenient way for computers to communicate over the internet (CERN, early 1990s). The name comes from globally distributed pages linking to each other like a spider's web (1.1).

The web's three ingredients (1.1):

HTML files -> text files with LINKS to other files
Browser    -> program for viewing HTML files
HTTP       -> rules (protocol) for transferring HTML files among computers

  • Webpage / web page = a document viewed in a web browser. Website = a collection of related webpages. Web server = a program that serves webpages to web browsers (1.1).

  • HyperText markup language (HTML) = the standard markup language for web documents (1.1).

  • Hypertext = text with links to other text (and today to images, video, and more). Markup = special markings in a document that add information about links, formatting, and images. HTML can also add metadata such as keywords, author, and language (1.1).

  • Internet vs web: the web is just one use of the internet, which also carries email, music, and video (1.1).

Browsers and standards

  • Web browser = downloads an HTML document from a web server, displays it with formatting, and lets the user interact with it (click hyperlinks). It uses HTML to understand the document's structure and semantics (meaning) (1.1).

Browser wars from Figure 1.1.5 (1.1):

1st war 1995-2002: market share, constant new features, incompatibilities -> IE wins
2nd war 2004-2013: performance + standards compliance > features      -> Chrome wins
1994 W3C created ... 2014 W3C publishes HTML5 ... 2019 HTML moves to WHATWG

  • World Wide Web Consortium (W3C) = the international standards organization that traditionally controlled web standards, including HTML. HTML5 was its final HTML standard (1.1).

  • Web Hypertext Application Technology Working Group (WHATWG) = an organization that develops web standards; its members include the major browser vendors. The W3C relinquished HTML publishing to it in 2019 (1.1).

  • HTML Living Standard = WHATWG's continually evolving HTML standard, with no version numbers, that replaces HTML5. Conforming pages look and act the same in most modern browsers (1.1).

  • Separation of duties: markup once mixed structure with looks (<b> was appearance-only). Today HTML = structure and content, CSS = layout and appearance, JavaScript = dynamic behavior (1.1).

2. IP addresses, domain names, and URLs (1.2)

IP addresses

  • Packet = holds To and From IP addresses, the information to communicate, and configuration info (1.2).

  • IP address (Internet Protocol address) = a computer's unique internet address (like a house address), such as 198.51.100.7 (1.2).

  • IPv4 = the original Internet Protocol, with 32-bit addresses (2^32, about 4 billion, no longer enough). IPv6 = 128-bit addresses (2^128, about 3.4 × 10^38). Both co-exist (1.2).

198 . 51 . 100 . 7   -> four 8-bit numbers = 32 bits; each ranges 0-255

Domain names and DNS

  • Domain name = a name for an IP address (wikipedia.org = 198.35.26.96): easier to remember, survives IP changes, and is case-insensitive (1.2).

  • DNS = Domain Name System. DNS server = converts a domain name to an IP address; contacting one is the first step (1.2).

  • Root servers = the 13 main DNS servers; the OS or ISP keeps their IP addresses (1.2).

  • Domain name registrar = where anyone registers an unused domain name (yearly fee; public via ICANN's Whois). A hosting company points the domain at the site's IP (1.2).

computer --"IP for cnn.com?"--> DNS server --157.166.226.25--> computer --packet--> CNN

Domain levels (read right to left)

  • Top-level domain (TLD) = .com (commercial, ~77%), .net (network), .org (traditionally non-profits), .edu (colleges), .gov (U.S. governments); IANA allows custom TLDs like .pizza (1.2).

  • Country code top-level domain (ccTLD) = a two-letter TLD per country: .uk, .ru, .de (1.2).

  • Second-level domain = comes right after the TLD (wikipedia in wikipedia.org), usually an organization's name or a site's purpose. Third-level and deeper = local sub-systems (cs in cs.stanford.edu). www is common and often optional (1.2).

cs . stanford . edu          bankofamerica.xxyz.com
3rd    2nd      TLD          -> real 2nd-level domain is xxyz (scam trick)

URLs

  • URL (Uniform Resource Locator) = the location of a web resource on the web. Web resource = any retrievable item (HTML file, image, video, CSS stylesheet) (1.2).

https :// www.youtube.com /watch ?v=uu7XCEMdSHg      .../wiki/URL#History
scheme    hostname        path   query string                  fragment

  • Scheme = characters at the start followed by ":" or "://" (http, https, mailto, file) (1.2).

  • Hostname = the complete domain name after the scheme. Path = characters to the right of the hostname, which can name folders and a file (/alcohol/faqs.htm) (1.2).

  • Query string = optional characters after ? that provide data for the web server. Fragment = optional characters at the end, starting with #, that refer to a location within the page (1.2).

Webpage errors

  • DNS can't find the domain (usually unregistered) → "cannot be found." Domain found but the server doesn't respond (turned off, maintenance, router failure) → "not responding" (1.2).

  • 404 = the server was reached but the page wasn't found. Linkrot = a once-valid link that now returns 404; the Internet Archive's Wayback Machine archives pages to fight it (1.2).

3. HTTP (1.3)

Requests and responses

  • HyperText Transfer Protocol (HTTP) = a networking protocol that runs over TCP/IP and governs communication between browsers and web servers (1.3).

  • Transmission Control Protocol/Internet Protocol (TCP/IP) = a protocol suite governing how packets move between machines; developers rarely need its details (1.3).

  • HTTP/1.1 = the standard for most of the web's lifetime. HTTP/2 = speeds up transfer. HTTP/3 = faster still, using UDP instead of TCP (1.3).

  • DNS lookup = the browser extracts the domain from the URL and gets the server's IP address, then opens a TCP connection (1.3).

  • HTTP request = browser → server, often asking for a resource. HTTP response = server → browser, often containing it (1.3).

DNS lookup -> TCP open -> GET test.html -> 200 + HTML -> (parse) -> GET field.jpg -> 200 + image -> TCP closed

One request and one response per resource (1.3).

Message parts and headers

  • Four parts: start line (HTTP version, plus the request type and path in a request or the status code and phrase in a response), zero or more header fields (keyword: value), a blank line, and an optional message body (form data in a request; the resource in a response) (1.3).

GET /wiki/World_Wide_Web HTTP/1.1
Host: en.wikipedia.org
User-Agent: Mozilla/5.0 Chrome/48.0.2564

HTTP/1.1 200 OK
Content-Length: 56579
Content-Type: text/html
Last-Modified: Thu, 11 Feb 2016 18:49:40 GMT
Server: nginx/1.9.4

<!DOCTYPE html>

  • Host = hostname; User-Agent = browser ID; Content-Length = body bytes; Content-Type = media type; Date / Last-Modified = response time / resource change time; Server = server software (1.3).

  • Internet Assigned Numbers Authority (IANA) = manages internet numbers and symbols (IP allocation, DNS root zone, media types) and lists HTTP headers (1.3).

  • Chrome DevTools = view HTTP traffic (Network tab) with Ctrl+Shift+I or Command-Option-I (1.3).

Methods and status codes

  • Request method = the desired action on a resource. GET = request a resource; HEAD = like GET but with no body; POST = create (web forms); PATCH = modify; PUT = replace; DELETE = delete (1.3).

  • Status code = a three-digit number for the status of the requested resource: 200 OK, 301 Moved Permanently, 302 Found (temporary), 304 Not Modified, 403 Forbidden (no permission), 404 Not Found, 500 Internal Server Error (1.3).

  • Browser redirect = a 301 or 302 with a Location header naming the next URL. URL shortening = short URLs (bit.ly, tinyurl.com) that redirect with 301 + Location (1.3).

Caching

  • Browser cache = an area on the computer's file system where the browser stores web content for quick retrieval, reducing network traffic (1.3).

  • Entity tag (ETag) = an identifier for a specific version of a resource; it changes when the resource changes (1.3).

1st:        GET test.html                        -> 200 OK, ETag 123abc + HTML (cached)
unchanged:  GET + If-None-Match: 123abc          -> 304 Not Modified, no body
changed:    GET + If-None-Match: 123abc          -> 200 OK, ETag 678efg + new HTML

  • If-Modified-Since = with Last-Modified, send the resource only if changed since that time. Expires = when the cached resource turns "stale." Cache-Control = directives (no-store, max-age=180) (1.3).

HTTPS

  • Network sniffer = software that monitors traffic and inspects HTTP messages. HTTPS = encrypts HTTP so a sniffer can't read passwords or card numbers (1.3).

  • Transport Layer Security (TLS) = the HTTPS protocol; it encrypts with asymmetric public keys. Digital certificate = holds the public key TLS uses, issued by a trusted certificate authority (1.3).

4. Web trends (1.4)

  • Browser market: fairly static now (Chrome ~65%, Safari second). Good practice: follow current standards and work on all established browsers (1.4).

  • Mobile device = a handheld computer (smartphone, tablet). Mobile passed desktop around 2016–2017. Consider screen size, load speed, device speed, data cost, battery life, and touch interface (1.4).

  • Internet of Things (IoT) = the global collection of communicating devices that sense and control technology on behalf of humans. IoT devices sense the world, share data with control systems, and run their commands. People use apps or webpages that developers build, not the devices directly (1.4).

  • Web accessibility = the ability of users with disabilities to access and use a webpage with reasonable effort. Design for vision, hand control, seizure, and cognitive issues. Laws and standards: Rehab Act 1973, ADA 1990, Section 508 1998, W3C's WCAG 1.0/2.0/2.1 (1999/2008/2018), DOJ ADA guidance 2022 (1.4).

  • Cognitive computing = AI plus vast data to simulate human problem solving amid ambiguity, changing data, and conflicting information (IBM Watson). Good HTML structure, like data in a titled table, helps such systems (1.4).

  • Separation of concerns = splitting web content into distinct languages and documents that overlap as little as possible (HTML content, CSS layout, JavaScript interactivity). Payoffs: more browsers, better mobile, easier IoT, better accessibility, and more meaning for intelligent systems (1.4).

5. Introduction to HTML (1.5)

  • HTML = a textual language for creating webpages, saved as .html/.htm. A file has the document type, then the head (title, page info), then the body (content) (1.5).

  • Element = a single HTML structure, represented with tags. Tag = a descriptive name in < > that the browser uses to display content. Most elements have opening and closing tags (<strong>always</strong>); <img> needs no closing tag (1.5).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>For sale: 2012 Ducati Streetfighter</title>
  </head>
  <body>
    <h1>2012 Ducati Streetfighter 848 - $9000</h1>
    <p>year: <strong>2012</strong></p>
  </body>
</html>

  • Common elements: h1–h3 headings (h1 largest), p paragraph, em emphasis (italic), strong strong emphasis (bold), img image (src = URL, alt = description), a link (1.5).

  • Link = a clickable item that usually opens another webpage; a button or image can be one (1.5).

  • Anchor element / href attribute = a link is made with an anchor element: <a>'s href attribute gives the URL target, followed by the link text and </a> (1.5).

<a href="https://www.wikipedia.org/">Click Here</a>

6. Introduction to CSS (1.6)

  • Cascading Style Sheets (CSS) = a textual language for describing how a webpage is styled for visual presentation. Unstyled pages get browser defaults (white background, black text) (1.6).

  • CSS rule = specifies styling properties for specific HTML elements. Rules go in a <style> element in the head: the element name, then { property:value items } (1.6).

h1 {
  
  background-color: lightgray;
}
strong {
  padding: 5px;
}

  • Properties: background-color, color (font color), font-family, font-size, padding (content to border), margin (outside the border; margin-left etc. set one side) (1.6).

  • CSS color = a predefined name (blue) or an rgb value like rgb(50, 100, 255). rgb = red, green, blue, each 0 (none) to 255 (bright): rgb(255, 255, 255) = white, rgb(0, 0, 0) = black, equal values = gray (1.6).

7. Introduction to JavaScript (1.7)

  • JavaScript = a programming language that runs in the browser (for example, responding to a button click). It goes in a <script> element in the head or body, or in a separate .js file linked from the head (1.7).

  • id attribute = identifies an element so JavaScript can manipulate it. document.getElementById("idName") returns the element with that id (1.7).

  • Variable = stores a value or a reference to a page element. Function = a named group of statements run by its name (1.7).

  • addEventListener("click", function) runs code on click. Setting heading.style.color changes the h1's CSS font color. An if-else in updateRating() colors rating stars (1.7).

  • Span element = an inline container used to manage HTML content (each rating star is a span with its own id) (1.7).

heading = document.getElementById("bike-heading")
changeTextColor("white")

How the pieces connect

URL -> DNS lookup -> IP -> TCP (+TLS for https) -> HTTP GET -> response (200/301/304/404)
    -> browser parses HTML -> requests CSS/images/JS -> renders HTML + CSS + JS

  • Addresses: IP addresses locate machines, domain names name them, and URLs pick out one resource (1.2).

  • Transport: HTTP carries the exchange, and status codes, ETags, and HTTPS handle redirects, caching, and encryption (1.3).

  • Content: separate HTML, CSS, and JavaScript let one page serve browsers, phones, assistive tech, IoT, and intelligent systems; standards like the HTML Living Standard and WCAG keep it consistent (1.1, 1.4).

Commonly confused

  • Internet vs web: internet = the global computer network (email, video, and more). Web = one use of it: linked pages over HTTP (1.1).

  • W3C vs WHATWG: W3C released HTML5, the last versioned standard. WHATWG (browser vendors) has published the HTML Living Standard since 2019 (1.1).

  • IPv4 vs IPv6: 32-bit (~4 billion addresses) vs 128-bit (2^128). Both are in use (1.2).

  • Domain name vs URL: a domain name stands for an IP address. A URL = scheme + hostname + path (+ query, fragment) for one resource (1.2).

  • Query string vs fragment: ? = data for the server. # = a spot within the page (1.2).

  • "Cannot be found" vs 404: DNS failure (no server reached) vs a server reached but the page is missing (1.2).

  • 301 vs 302: permanent vs temporary redirect; both use Location (1.3).

  • 200 vs 304: resource sent in the body vs the cached copy is still good, so no body (1.3).

  • POST vs PUT vs PATCH: create vs replace vs modify (1.3).

  • Element vs tag: an element is the whole structure; tags are its <p>/</p> markers (1.5).

  • Padding vs margin: inside the border vs outside the border (1.6).

Worked example

Problem: Trace https://portfolio.example.edu/projects/index.html?view=grid#web-dev, a page whose HTML references site.css and team.jpg (1.2, 1.3).

  1. Dissect: scheme https; hostname portfolio.example.edu (.edu TLD, example second-level, portfolio third-level); path /projects/index.html; query string view=grid; fragment #web-dev (1.2).

  2. DNS lookup gives the IP address. A TCP connection opens, and TLS encrypts it using the site's certificate from a certificate authority (1.3).

  3. Request 1 asks for the HTML. The #web-dev fragment isn't sent (general background, not from the chapter). Illustration (1.3):

GET /projects/index.html?view=grid HTTP/1.1
Host: portfolio.example.edu

  1. Response HTTP/1.1 200 OK, Content-Type: text/html, an ETag, a blank line, then the HTML body (1.3).

  2. The browser parses the HTML and requests site.css and team.jpg. That's 3 requests and 3 responses in total, then the TCP connection closes (1.3).

  3. An hour later, nothing has changed: the browser sends If-None-Match with the cached ETag and gets 304 Not Modified with no body, so it shows the cached copy (1.3).

  4. Typos: a wrong path → 404 from the server. An unregistered hostname → DNS fails with "cannot be found," and no HTTP request is ever sent (1.2, 1.3).