Difficulty: Beginner | Prerequisites: Basic familiarity with using a web browser and a word processor.

Big Picture

This material covers two areas that seem unrelated but share a common thread: the difference between what you see on screen and what is stored underneath. On the web, a page that looks colourful and image-rich is built from plain-text HTML, CSS, and image references. In a word processor, a document that looks seamless on screen is managed in memory in ways that explain why some edits feel instant and others lag. Understanding both helps you reason about how software presents information versus how it stores and processes it.

TL;DR

HTML source code is plain text with tags; colours and styling come from CSS, and images are referenced (not embedded) as links. Viewing source code shows the markup, not the rendered page. In a large document, editing at the end is fast because new text is appended, but editing at the beginning can be slow because the application may need to reflow thousands of subsequent pages.

Key Terms

HTML (HyperText Markup Language)

The standard markup language for creating web pages. It defines the structure and content of a page using tags (e.g.,

,

, ). In simple terms, HTML is the skeleton of a web page: it says what content exists and in what order, but not how it looks.

CSS (Cascading Style Sheets)

A language used to describe the presentation of an HTML document: colours, fonts, spacing, layout, and other visual properties. Think of it as the paint and wallpaper for the HTML skeleton. Without CSS, everything would appear as plain, unstyled text.

Source code (of a web page)

The raw HTML (and associated CSS/JavaScript) that the browser receives from the server. This is plain text with tags and instructions, not the visual page the user sees. In simple terms, viewing source code is like looking at the recipe instead of the finished dish.

Rendering (browser rendering)

The process by which a web browser reads HTML, applies CSS styles, loads images and other resources, and produces the visual page the user interacts with. Think of it as the browser "cooking" the source code into the finished web page.

Image reference (in HTML)

An tag in HTML does not contain the image data itself. It contains a URL pointing to where the image file is stored. The browser fetches the image separately. In simple terms, the source code says "go get the picture from this address," so when you view the source, you see the address, not the picture.

Pagination / reflow

The process by which a word processor calculates where page breaks fall in a document. Inserting or editing text early in a long document triggers a reflow of all subsequent pages. Think of it as dominoes: change something on page 1, and the word processor has to re-check whether text on page 2 still fits, which cascades through all 10,000 pages.

Appending vs inserting (in memory)

Adding data to the end of a file or buffer (appending) is typically fast because nothing else needs to shift. Inserting data in the middle or at the beginning is slower because subsequent data may need to be moved or recalculated. In simple terms, adding a new page at the back of a binder is quick; inserting a page at the front means renumbering or shifting everything after it.

---

Core Content

HTML Source Code vs the Rendered Page

• What you see in a browser (colours, fonts, images, layout) is the result of the browser interpreting and rendering the HTML, CSS, and JavaScript it received.

• The source code itself is plain text. Tags like

  or

  define structure, not appearance.

• Colour and styling come from CSS, either inline (inside the HTML tag), in a