Websites, Webpages, Web Applications, and Static versus Dynamic Content

1. Start with four precise terms

Webpage

A webpage is one document or page made available through the Web. It commonly has its own address, called a URL. A webpage may contain text, images, forms, video, links, and other content.

Examples include:

• one news article;
• one product page;
• a contact page;
• the account-settings screen of an online service.

A webpage is not defined by how long it is. One short contact page and one very long report can both be webpages.

Website

A website is a related collection of webpages and other resources presented under a shared identity. These resources commonly use the same domain and navigation, although real systems can distribute resources across subdomains or content-delivery services.

For example, a bakery website might contain:

• a homepage;
• a menu page;
• an about page;
• a contact page;
• image files and stylesheets used by those pages.

The relationship is simple:

• webpage: one page;
• website: the wider collection to which pages and resources belong.

A website can technically consist of only one webpage. Therefore, “website” does not always mean “many pages.”

Web application

A web application is software used through web technologies, normally through a browser, to help a user perform tasks or manage changing information.

Examples include:

• webmail;
• an online document editor;
• internet banking;
• a project-management system;
• an online shop with a basket, account, inventory, and checkout process.

Web applications often have features such as authentication, saved user data, calculations, searching, filtering, or collaboration. However, there is no single visual test that cleanly separates every “website” from every “web application.” The terms overlap.

An online newspaper can be called a website while also containing application-like features such as accounts, saved articles, search, and subscription management. Do not force a false either/or classification when a system has both publishing and application functions.

Web resource

A resource is a broader technical term for something identified on the Web. A webpage can be a resource, but so can an image, stylesheet, downloadable PDF, data response, or video.

This matters because a browser usually needs several resources to display one webpage. The HTML document may refer to CSS, images, fonts, and other files.

2. Static and dynamic do not mean “boring” and “interactive”

Static content

Static content is delivered from stored files without being newly assembled for each request by application logic.

In a simple static site:

1. an author saves index.html;
2. a server stores that file;
3. a visitor requests it;
4. the server returns the stored file;
5. the browser interprets and displays it.

If the author wants to change the written opening hours, the stored content must be updated and published again.

Static does not mean that the page must look plain. A static page can have sophisticated layouts, responsive design, video, CSS animation, links, forms that submit elsewhere, and limited native HTML interaction. The word describes how its content is supplied, not its visual quality.

Dynamic content

Dynamic content is generated, selected, or changed by a program according to data, a request, a user, time, permissions, or another condition.

For example, when a signed-in customer opens an order-history page, a system might:

1. identify the customer;
2. request that customer’s orders from a database;
3. generate a response containing the matching records;
4. send the result to the browser;
5. display the current information.

The browser still receives data and renders a page or interface. “Dynamic” describes how some of the result was produced or updated.

Dynamic behaviour can occur in different places:

• on the server: a program generates a response before it is sent;
• in the browser: client-side code changes the current page or requests more data;
• in both places: most large web applications combine server and browser work.

You will learn the parts of this system in Lesson 1.2. This course does not require JavaScript for its core HTML/CSS exercises.

3. A website can mix both approaches

Real projects are often hybrid systems rather than perfectly static or perfectly dynamic.

Consider a restaurant website:

Part	Possible delivery	Reason
About page	Static	The content changes infrequently.
Brand stylesheet	Static file	The same presentation rules can be reused.
Today’s available tables	Dynamic	Availability changes and must use current data.
Customer account	Dynamic	The result depends on the signed-in user.
Logo image	Static file	It can be stored and returned as created.

The correct classification applies to a specific page, response, or feature—not automatically to the entire organisation.

4. HTML and CSS in this lesson’s boundary

HTML is the Web’s core markup language for describing documents and applications. CSS describes the presentation of structured documents. Together, they can define and present the bakery page in this lesson.

HTML and CSS alone do not:

• store customer accounts in a database;
• securely process a payment;
• keep a shared live inventory;
• authenticate users;
• protect a private order history;
• calculate a different server response for each customer.

Those tasks require systems outside the page’s HTML and CSS. Later lessons will repeatedly identify this boundary instead of implying that visual code provides secure processing.

5. Realistic classification examples

Example A -A designer’s portfolio

The project pages are stored as HTML files and redeployed when the designer adds work.

Classification: a website using static content delivery.

The page can still be responsive and visually rich. Its appearance does not make the delivery dynamic.

Example B -A weather page

The page requests current measurements and shows results for the selected city.

Classification: a website with dynamic application behaviour.

The changing data and user selection are stronger evidence than the visual layout.

Example C -A product catalogue built overnight

A publishing tool reads product data once, generates HTML files, and deploys them. Visitors later receive those stored files.

Classification: dynamically generated during the build process, but statically delivered to visitors.

This example shows why “static versus dynamic” must include the stage being discussed.

Example D -An online document editor

Users sign in, edit documents, and see saved changes.

Classification: a web application. It almost certainly combines a browser interface, server processing, and stored data.

6. Guided observation: a static bakery page

Folder structure

lesson-1-1-bakery/
├── index.html
└── styles.css

Starting files

The starting version contains the complete page. At this stage, your task is to observe the connection between the two files.

What the files do

• index.html contains the page’s content and document structure.
• styles.css contains presentation rules such as colours, spacing, width, and typography.
• The HTML file refers to the stylesheet, so the browser can apply its rules.
• The visible opening hours are literal text in index.html. They are not calculated.

The individual HTML elements and CSS rules are not required knowledge yet. HTML syntax begins in Module 2, and CSS begins in Module 7.

Optional change

If you already know how to save text files:

1. put both files in the same folder;
2. open index.html in a browser;
3. replace Friday: 07:00–16:00 with Friday: 07:00–18:00;
4. save the file;
5. refresh the browser.

Complete solution

Only this line changes:

<p>Friday: 07:00–18:00</p>

The displayed page changes after refresh because the browser reads the updated file. The page has not become dynamic: a person still changed stored content manually.

7. Browser support and fallback information

The demonstration uses fundamental HTML and CSS. It does not depend on an experimental feature for its content or function.

The margin-block CSS property is not necessary to understand this lesson. If it were unsupported, the sections would lose some vertical spacing, but all information would remain available. Course 1 will teach how support and fallbacks are evaluated when features become relevant.

8. Accessibility and responsive-design requirements

Even this early preview follows rules that will be explained later:

• content remains in a logical reading order;
• headings identify the page and its sections;
• information is not communicated by colour alone;
• text can wrap instead of being forced into fixed-height boxes;
• the content width is limited on large screens but can shrink on narrow screens;
• no functionality depends on hovering with a mouse.

This lesson does not claim that one example proves complete accessibility. Accessibility requires deliberate design and testing throughout a project.

9. Common mistakes and debugging process

Mistake 1 -Calling every URL a website

A URL may identify one webpage, image, file, or another resource. Use “webpage” for one page and “website” for the related collection when that distinction matters.

Mistake 2 -Treating animation as proof of dynamic content

A static page can contain CSS animation. Determine how content is supplied or generated rather than judging movement.

Mistake 3 -Treating every website as either static or dynamic

Inspect individual parts. A static marketing page and a dynamic account area can belong to the same website.

Mistake 4 -Claiming HTML/CSS performs secure processing

HTML and CSS can present an interface. They do not create a secure payment system or database.

If the demonstration does not display correctly

1. Confirm that the file is named index.html, not index.html.txt.
2. Confirm that index.html and styles.css are in the same folder.
3. Confirm that the stylesheet filename is exactly styles.css.
4. Save both files.
5. Refresh the browser.
6. If the content appears but the design does not, the HTML file is probably not locating the stylesheet.
7. If nothing opens, return to the supplied files and wait for the full workspace process in Lessons 1.5–1.6.

10. Independent exercise

Classify each case. Some answers need more than one label.

1. One HTML file contains a conference schedule. An organiser edits and uploads the file every month.
2. A shop page displays stock taken from a database whenever a visitor opens the product.
3. A company has a homepage, services page, contact page, logo, and stylesheet.
4. A browser-based spreadsheet lets users edit cells and save their work.
5. A tool creates 500 HTML article files once during deployment. Visitors receive those stored files.
6. A page contains a CSS animation but all of its written content is stored in the HTML file.

For every answer, name the evidence. Do not classify from appearance alone.

11. Tested solution to the exercise

1. Static webpage: the organiser manually updates a stored HTML file; it is not generated separately for each visitor.
2. Dynamic webpage or website feature: the displayed stock depends on current database data at request time.
3. Website: it is a related collection of webpages and supporting resources. The description does not provide enough evidence to decide whether every part is statically or dynamically delivered.
4. Web application: users perform tasks and save changing data through a browser interface.
5. Build-time generation followed by static delivery: software creates the files, but visitors later receive stored output.
6. Static content with animation: movement created by presentation rules is not proof of dynamic content generation.

The solution was checked against the definitions and distinctions used in this lesson. It does not require browser execution.