Activity: Web Foundations & CMS

Understanding how the World Wide Web works and is managed

Grade XI • Computer Science ⏱️ ~40 min

Brief Intro — Web Foundations & CMS

Every day you open a browser and type an address like school.edu.np. Behind that simple act lies an entire chain: domain names that are easy to remember, protocols that carry data, servers that store files, and search engines that help you find pages. This activity pulls that chain apart and explains each piece.

You will explore the difference between the front-end and back-end of a website, what a URL is made of, and how a Content Management System (CMS) lets anyone publish on the web without writing code.

Prerequisites

Basic understanding of how to use a web browser (Chrome, Firefox, etc.).
Familiarity with the concept of websites and URLs.
Basic computer literacy and file management skills.

Objectives Learning Goals & Outcomes

By the end of this activity, you will be able to:

Distinguish between front-end and back-end web development.
Understand how web browsers and search engines work.
Differentiate between the Internet and the World Wide Web.
Deconstruct URLs and understand URI vs URL concepts.
Explain the components of Content Management Systems (CMS).
Understand the relationship between domain names and web hosting.

Part 1 Front-End vs. Back-End Development

When you open a website, the split in who does the work is invisible: the front-end is everything the browser runs on your device, while the back-end is the code running on the server that prepares the data before it ever reaches you. Knowing which language belongs to which side is the first skill of any web developer.

Concept: Client-Side vs. Server-Side

Web development is divided into two broad areas: **Front-end** (Client-side) and **Back-end** (Server-side).

Exercise: Group the following technologies correctly:

HTML, PHP, CSS, Ruby on Rails, JavaScript, Python, Node.js

Reveal Grouping

Front-End (Client-Side): HTML, CSS, JavaScript (The trinity of web content, design, and interactivity).
Back-End (Server-Side): PHP, Python, Ruby on Rails, Node.js (Handles logic, database communication, and dynamic content generation).

Part 2 Browsers & Search Engines

A browser is how you view the web, and a search engine is how you discover it — but a search engine is not the same thing as a browser. Every search begins long before you press Enter: automated crawlers continuously read pages and store what they find in a huge index, which an algorithm then matches against your query.

The Search Engine Mechanism

A search engine uses three core components to provide you with relevant results.

Crawler (Bot)
Scans the web automatically for new URLs, keywords, and updates.

Index
A massive database where discovered links and data are stored for retrieval.

Search Algorithm
The mechanism that matches keywords to the index to find the most suitable pages.

History Check: Who invented the first web browser in 1990?

Reveal Inventor

Correct Answer: Sir Tim Berners-Lee. (The first graphical browser, *Mosaic*, followed in 1993).

Part 3 Protocols, URLs, and URIs

Every link you click is a URL — a precise string that tells the browser the protocol, the domain, and the path — and every URL is one kind of a broader idea called a URI.

Interactive Simulator: URL Deconstructor

Paste a URL to see its components parsed in real-time.

Deconstructing the URL

A URL (Uniform Resource Locator) is a specific type of URI (Uniform Resource Identifier). All URLs are URIs.

https://www.google.com/search

Protocol: https (How data is transferred).
Domain Name: www.google.com (The human-readable address).
Path: /search (The specific location on the server).

URI vs URL

Aspect	URI (Uniform Resource Identifier)	URL (Uniform Resource Locator)
Definition	Can be a name, locator, or both for an online resource	Specific type of URI that provides the location of a resource
Relationship	Broader category - URLs are a subset of URIs	Subset of URIs - all URLs are URIs
Purpose	Identifies a resource uniquely	Provides both identification and location
Example	urn:isbn:0451450523 (ISBN identifier)	https://www.example.com/page

Internet vs World Wide Web

Aspect	Internet	World Wide Web (Web)
Definition	Global network of interconnected computers using standardized protocols	System of interlinked documents accessed via the Internet
Scope	Infrastructure - hardware, cables, protocols	Service - content, information, applications
Relationship	The Web runs on top of the Internet	The Web is one of many services on the Internet
Other Services	Email, FTP, VoIP, etc.	Web pages, websites, web applications
Access	Direct network connections	Through web browsers using HTTP/HTTPS

Internet Protocol Layers

The Internet uses a layered protocol architecture:

Application Layer: Concerned with data (URL, type, etc.) - HTTP, HTTPS operate here
Transport Layer: Responsible for end-to-end communication over a network - TCP/UDP
Network Layer: Provides data routing - IP operates here

Part 4 Content Management Systems (CMS)

Not every website has to be hand-coded. A Content Management System (CMS) such as WordPress, Joomla, or Drupal lets you create, edit, and publish content through an on-screen editor — the CMA — while the CDA quietly stores and serves it. This part explains both halves, and then puts you to work building an actual blog post in WordPress.

CMA vs. CDA

A CMS (like WordPress, Joomla, or Drupal) is built from two major internal components.

CMA
Content Management Application: The GUI that allows you to create/modify content without coding.

CDA
Content Delivery Application: The back-end service that manages and delivers content after it's framed in the CMA.

Critical Thinking: What is a common disadvantage of using a CMS?

Show Disadvantages

Requires regular software/plugin updates.
Plugins can make the site heavy and slow.
Hosting is often more expensive than static sites.

Hands-On Task: Create Your Own WordPress Blog Post

This is where the theory becomes real. Working in a hands-on session on the free hosted WordPress (WordPress.com), you create your own account, then use the CMA (the on-screen editor) to publish a blog post the way an editor would — no HTML required and no self-hosted server needed. Follow these brief steps:

Create your account: Open wordpress.com in your browser and click Start your website. Follow the prompts to create a free account using your own email address and a password of your choice. Confirm your email, enter your details, and you are signed in — your free hosted site is given an address like yourusername.wordpress.com.
Start a new post: On the left menu, go to Posts > Add New to open the editor.
Give it a title: Type a clear, engaging title, for example "My First Blog Post on the Web".
Add a body paragraph: In the content area, write 3–4 sentences describing one thing you learned today about how the web works. Use the toolbar to make one word bold and one word italic — see the WYSIWYG editor in action.
Add a heading: Insert a second block and set it as a Heading (e.g. "What I Learned"), then add a short paragraph under it.
Insert a media item: Click Add Media or the image block and upload a small picture (or use the sample image) to see media management.
Preview it: Click Preview to see exactly how your post will look to visitors before publishing.
Publish: Click Publish, then confirm. Your post is now live on the site's front-end through the CDA.

Check Your Understanding: After publishing, answer briefly in your notebook — which steps used the CMA, and which step handed your finished post to the CDA for delivery to visitors?

Part 5 Web Hosting & Domain Names

Publishing anything on the web needs a place for the files to live and an address people can type to reach them. A domain name is the easy-to-remember address; web hosting is the server space that actually holds your site. This part separates the two and explains how they are linked through DNS.

Domain Name vs Web Hosting

Think of building a website like building a house:

Domain Name: The **Address** of the house (e.g., *einsteinacademy.edu.np*).
Web Hosting: The **Actual House** where all your files live.

Note: You need both to make a site accessible. You can buy them together or separately (by pointing DNS settings).

Aspect	Domain Name	Web Hosting
What is it?	The human-readable address of your website	The server space where your website files are stored
Purpose	Allows users to find your website easily	Stores and serves your website's files to visitors
Example	google.com, facebook.com	Server space, database services, file storage
Cost	Annual fee (usually $10-50/year)	Monthly fee (usually $5-50/month)
Purchase	From domain registrars (GoDaddy, Namecheap)	From hosting companies (Bluehost, HostGator)
Relation	Points to hosting via DNS settings	Provides the server that the domain points to

Buying Together vs Separately

Buying Together: Convenient, often discounted, easy setup for beginners
Buying Separately: More control, potentially better pricing, requires DNS configuration
DNS Pointing: When bought separately, you must configure domain's DNS to point to hosting server

Note — the first step of every load: typing a domain name (like google.com) triggers a DNS lookup. DNS (Domain Name System) translates the human-readable domain name into the hosting server's numeric IP address before the browser can request any content.

Mastery Checklist:

I can distinguish between Front-end (CSS/JS) and Back-end (PHP/Python).
I know that a Crawler builds the search engine index.
I can identify the Protocol, Domain, and Path in a URL.
I understand that CMA is the editor interface in a CMS.
I can publish a blog post in WordPress using the CMS editor.
I can explain the difference between a Domain and Hosting.

Ready to test your knowledge?

Take the Assessment →