Internet and Web Technologies

Week of 2026-09-22 · Download .docx

Objectives

Trace an HTTP/HTTPS request from DNS lookup through TLS handshake to response, and explain what each step accomplishes.
Explain how browsers render web pages using cookies, cache, and developer tools; identify what HTTPS does and does not guarantee.
Identify the roles of HTML, CSS, and JavaScript in building web pages and apply the CSS box model.
Describe how search engines crawl and index content and explain SEO, Boolean search operators, and web safety practices.

Key terms

HTTP: HyperText Transfer Protocol — the stateless application-layer protocol (port 80) for transferring web documents between browser and server.
HTTPS: HTTP over TLS — encrypts HTTP traffic using TLS on port 443, providing confidentiality, integrity, and server authentication.
DNS A Record: DNS record type mapping a domain name directly to an IPv4 address (example.com → 93.184.216.34).
CDN: Content Delivery Network — geographically distributed edge servers that cache static content close to users, reducing latency.
TLS: Transport Layer Security — cryptographic protocol providing encryption, integrity, and server authentication for HTTPS connections.
Cookie: Small key-value text file stored by the browser and sent with every request to the same domain; enables sessions, preferences, and tracking.
Browser Cache: Local storage of recently downloaded web assets (HTML, CSS, images, scripts) to avoid re-downloading on subsequent visits.
HTML: HyperText Markup Language — defines the structure and semantic content of web pages using tags (<h1>, <p>, <a>, <img>).
CSS: Cascading Style Sheets — controls the visual presentation of HTML elements: colors, fonts, spacing, layout, and responsive breakpoints.
JavaScript: The client-side scripting language that adds interactivity to web pages — event handling, DOM manipulation, and API requests.
CSS Box Model: The layered structure of every HTML element from inside out: content → padding → border → margin.
SEO: Search Engine Optimization — techniques to improve a website's ranking in organic (unpaid) search results through content relevance, technical optimization, and backlinks.
Web Crawler: Automated program (Googlebot, Bingbot) that follows hyperlinks across the web, downloading and indexing page content for search engines.
HTTP/2: Version 2 of HTTP introducing multiplexing — multiple requests over a single TCP connection without head-of-line blocking.

The concept

The web is the most visible layer of the internet. Understanding how web technologies work together enables IT professionals to build, maintain, and troubleshoot the systems billions of people use daily.

**How a Web Request Works**

When you type 'https://pgcc.edu' and press Enter, a multi-step sequence unfolds: (1) DNS lookup — your browser queries DNS to resolve 'pgcc.edu' to an IP address using UDP port 53. (2) TCP connection — a three-way handshake establishes a TCP connection to port 443 on that IP. (3) TLS handshake — browser and server exchange certificates and negotiate encryption keys. (4) HTTP GET request — the browser sends an encrypted HTTP request for the page. (5) Response — the server sends back HTML. (6) Rendering — the browser parses HTML, fetches linked CSS and JavaScript, and builds the DOM.

HTTP is stateless — each request/response is independent. The server remembers nothing about previous requests. Cookies bridge this gap by storing session tokens that the browser sends with every subsequent request, allowing the server to recognize a logged-in user.

**HTTPS and Security**

HTTPS (HTTP over TLS) encrypts all data between browser and server using TLS (Transport Layer Security). This means: (a) confidentiality — eavesdroppers cannot read the content; (b) integrity — content cannot be modified in transit undetected; (c) authentication — the TLS certificate verifies the server's identity. However, HTTPS does NOT guarantee the website is trustworthy or legitimate — phishing sites commonly have valid TLS certificates and show the padlock icon.

**HTML, CSS, and JavaScript**

Every web page is built from three technologies working together. HTML defines structure — what elements exist and what they mean. CSS defines appearance — how elements look. JavaScript defines behavior — how elements respond to user interaction.

The CSS Box Model describes how every element occupies space: content (the text/image) is wrapped by padding (space inside the border), border (the visible edge), and margin (space outside the border separating it from adjacent elements). Misunderstanding this model is the source of most CSS layout bugs.

**Search Engines and SEO**

Search engines deploy web crawlers that automatically follow links across the internet, indexing page content. SEO (Search Engine Optimization) improves organic search ranking through keyword relevance, site structure, page speed, semantic HTML, and backlinks. Boolean operators (AND, OR, NOT) refine search results by requiring or excluding terms.

Worked examples

Example 1: Inspecting a web page with Developer Tools: Open Chrome DevTools with F12. On the Network tab, reload the page and observe: (1) The first request is the HTML document — check its status code (200=OK, 404=Not Found, 301=Redirect). (2) Subsequent requests fetch CSS, JavaScript, images, and fonts. (3) Check the Response Headers tab for 'content-type', 'cache-control', and 'x-frame-options'. (4) On the Console tab, JavaScript errors appear in red. If a page element looks wrong, the Elements tab shows the live DOM and the Styles panel shows which CSS rules are applied and which are overridden.

Example 2: Debugging a layout issue using the box model: A button appears too close to adjacent text. In DevTools, select the button in the Elements panel. The Styles panel shows the box model diagram — the button has margin:0 and padding:4px. Adding margin:8px 16px (vertical, horizontal) creates spacing outside the border. If adding padding, the button grows larger. If adding margin, only the surrounding space increases. This distinction is the most tested box model concept: padding adds space inside the border; margin adds space outside.

Common mistakes

Assuming a padlock icon means a website is safe. HTTPS encrypts the connection, not the intent of the website. A phishing site with a valid certificate shows a padlock. Always verify the domain name carefully, not just the padlock.
Confusing cookies with cache. Cookies store user-specific data (session IDs, preferences) sent back to the server with each request. Cache stores copies of web assets locally to speed up page loading. Clearing cookies logs you out; clearing cache forces a fresh download of page resources.
Using HTML for styling. HTML defines structure — <h1> means 'most important heading,' not 'large bold text.' CSS controls visual appearance. Mixing the two (using <b> for emphasis when <strong> is semantic, or using inline styles instead of CSS classes) makes maintenance harder.
Forgetting that HTTP is stateless. If a student asks 'how does the server remember who I am between pages?' — the answer is cookies, session tokens, or URL parameters. The HTTP protocol itself has no memory of prior requests.
Thinking incognito mode makes you anonymous online. Incognito prevents local browsing history storage and clears cookies at session end. Your IP address is still visible to websites and your ISP. Incognito provides local device privacy, not online anonymity.

Self-check

Try each question before reading the answer. Answers at the bottom of this page.

1. What does HTTPS guarantee that HTTP does not?

The website is legitimate
Traffic is encrypted in transit
The server has no viruses
Pages load faster

2. In the CSS box model, which layer is immediately outside the content?

Margin
Border
Padding
Outline

3. Which DNS record type maps a domain name to an IPv4 address?

MX
CNAME
A
TXT

4. What is the primary purpose of a CDN?

Encrypt web traffic
Block DDoS attacks
Serve cached content from edge servers near users
Manage DNS records

5. HTTP/2 improved on HTTP/1.1 primarily by introducing:

TLS encryption
Multiplexing — multiple requests over one TCP connection
Cookies and session management
HTML5 support

Self-check answers

1. B — HTTPS uses TLS to encrypt traffic. It does NOT certify that the website owner is legitimate — phishing sites can and do use TLS.
2. C — The order from inside out is: content → padding → border → margin.
3. C — A (Address) record: domain name → IPv4 address. MX is for mail, CNAME is an alias, TXT stores verification data.
4. C — A CDN caches static content at geographically distributed edge servers, reducing the round-trip distance and latency for users.
5. B — HTTP/2 multiplexing allows multiple simultaneous requests over a single TCP connection without head-of-line blocking.

Canvas is the official record. This companion enhances the PGCC curriculum; it does not replace it. Last name and class year only. Students with a 504 plan or IEP: your accommodations apply.

↑ Back to top