Websites and Web Pages - Studies Blueprint

We use websites and web pages every day for:

Studying
Reading news
Watching videos
Shopping
Sending emails
Using social media
Online banking
Searching for information

The terms website and web page are closely connected, but they do not mean the same thing.

What Is a Website?

A website is a collection of connected web pages and resources that normally share one domain name.

A website may contain:

Homepage
About page
Contact page
Articles
Images
Videos
Forms
Login pages
Downloadable files
Product pages

According to MDN Web Docs, a website is a collection of linked web pages and associated resources that share a unique domain name.

Simple Definition

A website is a collection of related web pages available under one domain name.

Examples of Websites

Website	Main Purpose
Google	Searching for information
Wikipedia	Reading informational articles
YouTube	Watching and sharing videos
Amazon	Buying and selling products
BBC	Reading news
Studies Blueprint	Learning computer and technology topics

Real-Life Example of a Website

Think of a school.

The complete school contains:

Classrooms
Library
Office
Computer laboratory
Science laboratory
Playground

The complete school is like a website, while each room is like a separate web page.

School = Website
Classroom = Web page
Room number = URL
School address = Domain name

What Is a Web Page?

A web page is a single document or screen available on the World Wide Web.

It is normally opened through a web browser and has its own URL.

A web page may contain:

Text
Headings
Images
Links
Tables
Videos
Audio
Forms
Buttons
Advertisements
Interactive elements

Simple Definition

A web page is one individual page of a website.

Examples of Web Pages

A website may contain the following pages:

Homepage
About Us
Contact Us
What Is a Computer?
Types of Computer Memory
LAN and WAN
Privacy Policy

Each one is a separate web page.

Website and Web Page Hierarchy

flowchart TD
    A["Internet"] --> B["World Wide Web"]
    B --> C["Website"]
    C --> D["Web page"]
    D --> E["Text, images, links and videos"]

The internet provides the network infrastructure. The Web contains websites, and websites contain web pages and other resources.

Website vs Web Page

Website	Web Page
A collection of connected web pages	One individual document or screen
Usually uses one main domain	Usually has its own URL
May contain hundreds or millions of pages	Contains information about a particular topic or purpose
Example: `example.com`	Example: `example.com/about`
Like a complete book	Like one page or chapter of the book
Can contain navigation, databases and services	Displays a particular piece of content

Easy Example

Consider:

https://example.com

This represents the main website.

Now consider:

https://example.com/computer-basics/what-is-ram

This URL represents one particular web page inside that website.

Website Structure Example

A website normally contains several connected sections.

flowchart TD
    A["Homepage"]
    A --> B["About page"]
    A --> C["Courses section"]
    A --> D["Blog section"]
    A --> E["Contact page"]
    C --> F["Computer course"]
    D --> G["Computer articles"]

Links and navigation menus allow users to move from one page to another.

What Is a Homepage?

A homepage is the main or starting page of a website.

It normally opens when a user enters the website’s main domain name.

For example:

https://example.com

A homepage may contain:

Website introduction
Main navigation menu
Featured content
Latest articles
Important services
Search box
Login or registration button
Contact information
Footer links

Real-Life Example

A homepage is like the reception area of a building.

From the reception, visitors can get directions to:

Office
Classroom
Library
Meeting room

Similarly, a homepage helps visitors find different sections of a website.

Homepage vs Web Page

Every homepage is a web page, but every web page is not a homepage.

For example:

https://example.com

This may be the homepage.

https://example.com/about

This is an internal web page.

https://example.com/contact

This is another internal web page.

Homepage vs Landing Page

A homepage and landing page are also different.

Homepage	Landing Page
Main starting page of the website	Created for one specific campaign or purpose
Contains links to many sections	Usually focuses on one action
Serves different types of visitors	Targets a particular audience
May show articles, products and company details	May ask users to register, buy or download
Uses the main domain address	Often uses a special campaign URL

Landing Page Example

A business runs an advertisement for a free computer course.

The advertisement opens:

https://example.com/free-computer-course

This page may contain:

Course information
Benefits
Registration form
“Start Learning” button

This is a landing page because it focuses on one action.

Important Parts of a Website

A complete website needs several components.

flowchart TD
    A["Website"]
    A --> B["Domain name"]
    A --> C["Web hosting"]
    A --> D["Web pages"]
    A --> E["Website resources"]
    E --> F["Images, CSS, JavaScript and files"]

1. Domain Name

A domain name is the readable address of a website.

Example:

example.com

It helps users find the website without remembering its IP address.

2. Web Hosting

Web hosting provides space on a server where website files and data are stored.

The server can store:

HTML files
Images
CSS files
JavaScript files
Videos
Documents
Databases

When a visitor requests a page, the server sends the required information to the visitor’s browser.

3. Web Pages

Web pages present the website’s information and features.

Examples include:

Homepage
Article page
Product page
Login page
Contact page

4. Navigation

Navigation helps visitors move between different pages.

Common navigation elements include:

Header menu
Category menu
Search box
Internal links
Breadcrumbs
Sidebar
Footer menu

5. Website Content

Website content includes everything provided to visitors, such as:

Written articles
Images
Videos
Audio
Courses
Product information
Downloads
Interactive tools

6. Database

A database stores organized information used by a website.

It may store:

User accounts
Password hashes
Blog posts
Comments
Product details
Orders
Course progress
Website settings

Not every small website requires a database, but most dynamic websites use one.

7. Content Management System

A Content Management System, or CMS, allows users to create and manage websites without writing all the code manually.

Examples include:

WordPress
Drupal
Joomla

A CMS can help website owners:

Create pages
Publish articles
Upload images
Manage users
Add menus
Install themes
Install plugins
Organize categories

Common Pages Found on a Website

Homepage

The main entry page of the website.

About Page

Explains the website, organization or person.

Contact Page

Provides contact information or a contact form.

Blog or Article Page

Contains educational, informational or news content.

Product or Service Page

Explains a product or service.

Category Page

Groups related articles, products or resources.

Login Page

Allows registered users to enter their accounts.

Registration Page

Allows new users to create an account.

Search Results Page

Displays content matching the user’s search query.

Privacy Policy Page

Explains how the website collects and uses personal information.

Terms and Conditions Page

Explains the rules for using the website.

Frequently Asked Questions Page

Provides answers to common questions.

404 Error Page

A 404 page appears when the requested resource cannot be found.

For example, a user may enter:

https://example.com/missing-page

If that page does not exist, the server may return a 404 Not Found response.

A useful 404 page should provide:

A clear error message
Link to the homepage
Search box
Links to important content
Simple navigation

How Does a Website Work?

When a user enters a website address, several processes happen in a short time.

flowchart TD
    A["User enters a URL"]
    A --> B["DNS finds the server address"]
    B --> C["Browser sends an HTTP request"]
    C --> D["Server returns page files or data"]
    D --> E["Browser renders the web page"]

Step 1: The User Enters a URL

The user enters an address such as:

https://example.com/computer-basics

The user may also open the URL by clicking a link.

Step 2: DNS Finds the Server

DNS translates the domain name into an IP address.

example.com → IP address

Step 3: The Browser Connects to the Server

The browser sends an HTTP or HTTPS request to the web server.

The request basically means:

“Please send me this web page.”

Step 4: The Server Processes the Request

The server finds the requested resource.

For a dynamic website, it may also:

Run server-side code
Check a database
Verify the user
Collect requested information
Create the page response

Step 5: The Server Sends a Response

The server may send:

HTML
CSS
JavaScript
Images
Fonts
Videos
Data

Step 6: The Browser Displays the Page

The browser processes the received files and displays the final web page.

This process is called rendering. MDN explains that browsers combine files received through HTTP responses to create the page that users can view and interact with. (MDN Web Docs)

Client and Server

Website communication commonly uses a client-server model.

Client

The client is the device or application requesting information.

Examples:

Chrome browser
Firefox browser
Mobile browser
Website application

Server

The server stores or generates website content and responds to requests.

Client-Server Process

sequenceDiagram
    participant U as User
    participant B as Browser
    participant S as Web server
    U->>B: Opens a web page
    B->>S: Sends HTTP request
    S-->>B: Returns files and data
    B-->>U: Displays the page

MDN describes servers as computers that store websites and explains that browsers download page code from a server and render it for the user. (MDN Web Docs)

What Is a Web Page Made Of?

A modern web page commonly uses three main front-end technologies:

HTML
CSS
JavaScript

HTML

HTML stands for HyperText Markup Language.

It defines the content and structure of a web page.

HTML can create:

Headings
Paragraphs
Lists
Links
Images
Tables
Forms
Page sections

MDN describes HTML as the code used to structure a web page and its content. (MDN Web Docs)

Real-Life Example

HTML is like the structure of a house:

Walls
Rooms
Doors
Windows
Roof

CSS

CSS stands for Cascading Style Sheets.

It controls the visual appearance of a web page.

CSS can control:

Colours
Fonts
Spacing
Borders
Backgrounds
Page layout
Button design
Mobile responsiveness

Real-Life Example

CSS is like the paint, decoration and furniture of a house.

JavaScript

JavaScript adds behaviour and interactivity to a web page.

It can create:

Dropdown menus
Image sliders
Pop-up messages
Form validation
Interactive quizzes
Live search
Calculators
Dynamic page updates

Real-Life Example

JavaScript is like the electricity and working appliances inside a house.

HTML, CSS and JavaScript Example

flowchart LR
    A["HTML: Structure"] --> D["Complete web page"]
    B["CSS: Design"] --> D
    C["JavaScript: Behaviour"] --> D

The easiest way to remember them is:

HTML = Structure
CSS = Style
JavaScript = Behaviour

Front End and Back End

A website may have a front end and a back end.

Front End

The front end is the part users can see and interact with in their browsers.

It may include:

Layout
Text
Images
Menus
Buttons
Forms
Animations

Common front-end technologies include:

HTML
CSS
JavaScript

Back End

The back end works behind the website.

It may handle:

User login
Databases
Payments
Permissions
Data processing
Email delivery
File uploads
Course progress

Common back-end technologies include:

PHP
Python
Java
JavaScript with Node.js
C#
Databases such as MySQL and PostgreSQL

Easy Example

Think of a restaurant:

Front end = Dining area seen by customers
Back end = Kitchen where food is prepared
Database = Storage containing ingredients and order records
Server = Staff processing customer requests

Static Websites and Web Pages

A static website normally sends stored page files to visitors without generating different server-side content for each request.

The same page usually appears to every visitor.

Examples may include:

Simple portfolio
Basic information website
Small event website
Documentation website
One-page business site

Static Website Process

flowchart LR
    A["Browser request"] --> B["Server finds stored file"]
    B --> C["Same file is returned"]
    C --> D["Browser displays page"]

Advantages of Static Websites

Simple to build
Fast to load
Less server processing
Lower hosting requirements
Smaller security surface
Suitable for small websites

Limitations of Static Websites

Content updates may require editing files
Difficult to manage thousands of pages manually
Limited built-in personalization
User accounts and complex databases require additional services or code

A static page can still contain JavaScript and interactive features. “Static” mainly describes how the server supplies the page.

Dynamic Websites and Web Pages

A dynamic website can generate or change content according to:

User account
Database information
Search query
Location
Preferences
Time
Previous activity
Form input

Examples include:

Social media platforms
Online stores
Banking websites
Learning platforms
Email services
News websites
WordPress websites

MDN explains that a dynamic website can generate response content when needed, often by placing database information into templates. (MDN Web Docs)

Dynamic Website Process

flowchart TD
    A["Browser sends request"]
    A --> B["Server runs application code"]
    B --> C["Application reads the database"]
    C --> D["Page content is generated"]
    D --> E["Response is sent to browser"]

Real-Life Example

Suppose two students log in to an educational website.

Student A may see:

Completed lessons
Quiz score
Recommended beginner articles

Student B may see:

Different course progress
Different quiz score
Advanced recommendations

They are using the same website, but the content is generated according to their accounts.

Static vs Dynamic Website

Static Website	Dynamic Website
Often sends stored content as it is	Can generate content when requested
Same basic content for visitors	Content may differ between users
May not require a database	Commonly uses a database
Easier for small projects	Better for complex websites
Requires less server processing	Requires application processing
Example: simple portfolio	Example: online store

Many modern websites combine both approaches. Images and CSS may be static, while accounts, searches and article lists are generated dynamically.

Single-Page and Multi-Page Websites

Multi-Page Website

A multi-page website uses different URLs or documents for different pages.

Example:

example.com/
example.com/about
example.com/contact
example.com/blog

Educational websites, news websites and online stores commonly use multiple pages.

Single-Page Website

A simple single-page website presents its main content on one long page.

Sections may include:

Home
About
Services
Portfolio
Contact

Menu links may move the user to different sections of the same page.

Single-Page Application

A Single-Page Application, or SPA, may load one main HTML document and dynamically update the visible content using JavaScript.

The URL may still change, but the browser does not necessarily download a completely new HTML document for every view.

Examples can include:

Online email interfaces
Dashboards
Project-management applications
Interactive web tools

Types of Websites

Educational Website

Provides lessons, notes, courses and quizzes.

Example uses:

Computer fundamentals
School subjects
Exam preparation
Professional training

Blog

Publishes articles in chronological or categorized order.

A blog may cover:

Technology
Travel
Food
Education
Finance
Personal experiences

Business Website

Provides information about a company, its products and services.

E-Commerce Website

Allows users to browse and purchase products.

It may include:

Product pages
Shopping cart
Checkout
Payment system
Order tracking

News Website

Publishes news articles, reports, images and videos.

Portfolio Website

Shows a person’s work, education, skills and projects.

Social Networking Website

Allows users to create profiles, publish content and communicate.

Search Engine Website

Helps users find web pages and other information.

Government Website

Provides official information, public services and forms.

Entertainment Website

Provides videos, music, games or other entertainment.

Forum or Community Website

Allows users to ask questions and participate in discussions.

Web Application

Provides software-like features through a browser.

Examples include:

Email
Online document editors
Banking dashboards
Design tools
Project-management systems

Common Layout of a Web Page

A web page commonly contains several visible sections.

flowchart TD
    A["Header"]
    A --> B["Navigation menu"]
    B --> C["Main content"]
    C --> D["Optional sidebar"]
    D --> E["Footer"]

Header

The top area of the page may contain:

Logo
Website name
Search
Login button
Navigation menu

Main Content

Contains the page’s primary information.

Examples:

Article
Product
Video
Course
Form

Sidebar

An optional sidebar may contain:

Related articles
Categories
Advertisements
Search box
Recent posts

Footer

The bottom area may contain:

Copyright notice
Contact details
Privacy policy
Terms and conditions
Social links
Important navigation links

How Web Pages Are Connected

Web pages are connected using hyperlinks.

A hyperlink can connect:

One page to another page
One section to another section
One website to another website
Text to a downloadable file
An image to another resource

Example:

Homepage → Computer Networks → LAN and WAN

Links are important because they help:

Users navigate
Search engines discover pages
Website owners organize content
Readers find related information

Web Page vs Document

A web page is a document designed to be viewed in a browser.

However, not every online document is an ordinary web page.

Examples of online resources include:

HTML page
PDF document
Image
Video
Spreadsheet
Downloadable ZIP file

Each resource can have a URL, but browsers handle different file types differently.

Responsive Website

A responsive website adjusts its layout according to the visitor’s screen size.

It should work properly on:

Desktop computer
Laptop
Tablet
Mobile phone

A responsive page may:

Resize images
Stack columns
Change menu layout
Adjust text width
Enlarge touch controls

Responsive design is important because visitors use many different screen sizes.

Website Accessibility

An accessible website can be used by people with different abilities and devices.

Basic accessibility practices include:

Clear headings
Readable text
Sufficient colour contrast
Keyboard navigation
Descriptive link text
Alternative text for important images
Labels for form fields
Captions for important videos
Logical page structure

Accessibility makes a website easier to use for everyone.

Website Security

A website owner should protect visitors and website data.

Important security measures include:

HTTPS
Strong administrator passwords
Multi-factor authentication
Regular software updates
Secure backups
Limited user permissions
Spam protection
Malware scanning
Secure plugins and themes
Validating user input

Visitors should also:

Check the real domain
Avoid suspicious links
Do not reuse passwords
Be careful with downloads
Do not ignore browser warnings

SEO-Friendly Website and Web Pages

SEO stands for Search Engine Optimization.

Basic practices include:

One clear main topic per page
Descriptive page title
Correct heading structure
Helpful original content
Simple URLs
Internal links
Fast loading
Mobile-friendly design
Image alt text
HTTPS
Updated information
Clear navigation

A good website structure helps visitors and search engines understand how pages are connected.

Studies Blueprint Example

For an educational website such as Studies Blueprint, the structure could be:

flowchart TD
    A["Studies Blueprint website"]
    A --> B["Computer Fundamentals"]
    A --> C["Computer Networks"]
    A --> D["Cybersecurity Fundamentals"]
    B --> E["RAM and ROM web page"]
    C --> F["LAN and WAN web page"]
    D --> G["Phishing web page"]

In WordPress:

WordPress Item	Meaning
Site	The complete Studies Blueprint website
Homepage	Main starting page
Page	About, Contact or Privacy Policy
Post	An individual article or lesson
Category	A group of related posts
Menu	Links to important pages and categories
Media	Images, videos and documents
URL	Address of a page, post or file

Advantages of Websites

Websites allow people and organizations to:

Share information worldwide
Provide education
Sell products
Promote services
Communicate with users
Build a professional identity
Offer customer support
Publish news
Collect information through forms
Provide services at any time

Limitations of Websites

Websites may also face problems such as:

Hosting expenses
Security threats
Maintenance requirements
Outdated information
Slow loading
Accessibility problems
Browser compatibility issues
Privacy concerns
Server downtime
Misleading or false content

Common Misconceptions

Misconception 1: A Website and Web Page Are the Same

A website is a collection, while a web page is one individual part of that collection.

Misconception 2: A Domain Name Is the Complete Website

A domain name is the address. The website consists of pages, files, code and data.

Misconception 3: Every Website Needs Coding From Scratch

A website can be created using a CMS such as WordPress, although HTML, CSS and JavaScript still work behind it.

Misconception 4: Every Website Is Static or Dynamic Only

Many websites combine static resources with dynamically generated content.

Misconception 5: A Homepage and Landing Page Are the Same

A homepage introduces the complete website, while a landing page focuses on a particular campaign or action.

Misconception 6: A Browser Stores the Entire Website

The browser requests files and data from servers and may temporarily cache some of them.

Misconception 7: Every Web Page Is a Separate HTML File

Some pages are generated from templates and database content. Web applications can also update their interfaces without loading a completely new HTML document.

Frequently Asked Questions

What is a website in simple words?

A website is a collection of related web pages available under one domain name.

What is a web page?

A web page is one individual document or screen inside a website.

What is the main difference between a website and a web page?

A website is the complete collection, while a web page is one part of that collection.

Is Google a website?

Yes. Google provides a website and many web-based services.

Is a homepage a web page?

Yes. The homepage is the main web page of a website.

Can a website have only one page?

Yes. Some websites contain only one page.

Can a website contain millions of pages?

Yes. Search engines, online stores, social networks and large educational websites can contain millions of pages or dynamically generated URLs.

Does every web page have a URL?

A publicly addressable web page normally has a URL. In some web applications, several changing views may share one page or use dynamically updated URLs.

What is a static website?

A static website usually returns stored content without generating a different server-side page for each request.

What is a dynamic website?

A dynamic website can generate or change content using application code, databases, user input or account information.

Is WordPress static or dynamic?

A normal WordPress website is dynamic because WordPress uses PHP and a database to generate pages. It can also serve static resources such as images, CSS and JavaScript.

What happens when a web page does not exist?

The server commonly returns a 404 Not Found response.

What is the difference between a browser and a website?

A browser is an application used to open websites. A website is the collection of pages being opened.

What is the difference between a website and a web server?

A website is the content and services used by visitors. A web server is the computer and software that stores or delivers that content.

Conclusion

A website is a collection of related pages and resources available under a domain name. A web page is one individual document or view within that website.

The easiest way to remember the difference is:

Website = Complete book
Web page = One page or chapter of the book

When a user opens a web page, the browser sends a request to a server. The server returns the required files or generated content, and the browser combines those resources to display the final page.

The basic structure can be remembered as:

flowchart LR
    A["Domain name"] --> B["Website"]
    B --> C["Web pages"]
    C --> D["Content and features"]