Welcome to Website Authoring: The Three Web Development Layers!

Hello IGCSE students! Web authoring might sound complicated, but building a website is just like building anything else—you need a plan, structure, and decoration!
This chapter breaks down a website into three simple parts, or layers. Understanding these layers is key to understanding how modern, professional web pages are built and maintained.

Don't worry if this seems tricky at first; we will use a great analogy to make it super clear!

Understanding the Layers: The Cake Analogy

Imagine you are making a magnificent birthday cake. The three layers of web development work exactly like the three parts of your cake:

- Layer 1 (The Cake Itself): This is the fundamental sponge and fruit. It provides the structure. Without it, you have nothing.
- Layer 2 (The Icing and Decorations): This determines the appearance—the colour, the shape of the flowers, and the fancy script writing.
- Layer 3 (The Trick): Imagine it's a 'surprise' cake that plays music when you cut it. This is the interactivity, the *actions* the cake performs.

Websites are structured the same way: Content, Presentation, and Behaviour.

Layer 1: The Content Layer (Structure is Everything)

The Content Layer is the foundation of any web page. It is responsible for holding the raw information and defining the logical structure of that information.

Purpose and Function

The main jobs of the Content Layer are:
1. To enter the content (text, images, links) that the user will see.
2. To create the structure of the web page, telling the browser which parts are headings, which are paragraphs, and where tables or lists should go.

The primary language used for the Content Layer is HTML (HyperText Markup Language).

How HTML creates structure

HTML uses *tags* to mark up content, giving it meaning. Think of it like labelling boxes:
- *<h1>*: This label tells the browser, "This is the most important heading."
- *<p>*: This label says, "This is a standard paragraph of text."
- *<table>*: This label defines where structured data (rows and columns) will be placed.

Did you know? HTML by itself is very plain. If you view a webpage using only the Content Layer, it would just be black text on a white background, flowing straight down the screen!

Quick Review: Content Layer

- Key Role: Structure and raw data.
- Key Tool: HTML.
- Analogy: The ingredients and shape of the cake.

Layer 2: The Presentation Layer (Making it Look Good)

If the Content Layer provides the structure, the Presentation Layer provides the style. This layer handles everything related to how the content *looks* to the user.

Purpose and Function

The main jobs of the Presentation Layer are:
1. To display and format elements within the web page.
2. To control layout, colour, font, spacing, and positioning.

The primary language used for the Presentation Layer is CSS (Cascading Style Sheets).

Separation of Concerns

A key idea in modern web development is separating the content (HTML) from the presentation (CSS).
Why is this important?

- Consistency: You can use one CSS file to format *hundreds* of HTML pages, ensuring a consistent look (like a corporate house style) across an entire website.
- Easier Maintenance: If your boss decides the corporate colour should change from blue to green, you only have to edit *one* CSS file, instead of changing code on every single HTML page.
- Accessibility: It allows the content to be restructured or resized easily for different devices (like smartphones) without changing the core HTML structure.

Memory Aid: Think of C in CSS meaning Colour and Cool designs!

Quick Review: Presentation Layer

- Key Role: Formatting, look, and layout.
- Key Tool: CSS.
- Analogy: The icing, colours, and decorations on the cake.

Layer 3: The Behaviour Layer (Adding Action and Control)

The first two layers give you a structured, good-looking, static page. The Behaviour Layer brings the page to life by adding interactivity.

Purpose and Function

The main job of the Behaviour Layer is:
1. To use a scripting language to control elements within a web page.
2. To handle events and make the page dynamic (meaning it can change without reloading).

The most common language used for the Behaviour Layer is *JavaScript* (though the syllabus refers broadly to a "scripting language").

What does 'Controlling Elements' mean?

Controlling elements involves performing actions based on user input or time. Examples include:
- Checking if a user has filled out a form correctly before submitting it (form validation).
- Making an image change when you hover your mouse over it.
- Displaying a pop-up message or alert.
- Calculating prices in an online shopping basket dynamically as items are added.
- Displaying a rotating banner or slideshow.

If a website needs to *do* something—react, calculate, validate, or change content *after* it has loaded—that is the job of the Behaviour Layer.

Important Note for IGCSE: While we know JavaScript is the common scripting language, you only need to understand the *function* of the layer: it uses a scripting language to control elements and provide dynamic behaviour. You do not need to write complex scripts for this paper.

Quick Review: Behaviour Layer

- Key Role: Interactivity, dynamic content, and control.
- Key Tool: A scripting language (like JavaScript).
- Analogy: The mechanism that makes the cake play music or blow out the candles.

Summary: Putting the Layers Together

The three web development layers work together in harmony to create a complete website. They are entirely separate but completely dependent on each other.

Quick Check Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LAYER | PRIMARY ROLE | LANGUAGE USED
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Content | Structure and raw information | HTML
Presentation | Display, formatting, and style | CSS
Behaviour | Control and interactivity | Scripting Language (e.g., JavaScript)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

By separating these concerns, we ensure that websites are efficient, maintainable, and flexible across all the different devices people use today.
Great job! You now know the fundamental components that make up every website you visit.