Web development layers Revision Notes

The content layer is the foundation of any web page. It involves entering and organising the actual information that users will see and interact with. This includes text, images, videos, and other media elements. The content is typically written in HTML (HyperText Markup Language), which uses tags to define the structure and meaning of the content.

For example, a heading is marked with <h1> tags, paragraphs with <p>, and images with <img>. This semantic structure helps browsers and assistive technologies understand the page's content.

A simple example: <p>Welcome to our website!</p> adds a paragraph of text to the page. The content layer focuses solely on what information is presented, not how it looks or behaves.

• Uses HTML to input and organise text, images, and media.
• Defines the structure and meaning of content with tags.
• Forms the basis for the other layers to style and add interactivity.

The presentation layer controls how the content appears on the screen. It determines colours, fonts, spacing, layout, and other visual aspects that make the page attractive and readable. This layer is usually implemented using CSS (Cascading Style Sheets).

CSS rules target HTML elements and apply styles. For example, to make all paragraphs blue and centred, the CSS might be: p { colour: blue; text-align: centre; }

Separating presentation from content allows developers to change the look of a website without altering the underlying information. This improves maintainability and consistency across pages.

• Uses CSS to style HTML elements visually.
• Controls layout, colours, fonts, and spacing.
• Enables consistent design and easier updates without changing content.

The behaviour layer manages how the web page responds to user actions and events. It uses scripting languages, most commonly JavaScript, to create dynamic and interactive features.

Examples include validating form inputs before submission, showing or hiding elements when buttons are clicked, or updating content without reloading the page.

For instance, a script might check if a user has entered a valid email address and display an error message if not. This layer enhances user experience by making pages responsive and interactive.

• Uses JavaScript or similar scripting languages.
• Adds interactivity and dynamic content changes.
• Handles user events like clicks, input, and navigation.

Separating content, presentation, and behaviour improves web development in several ways:

**Maintainability:** Changes to one layer (e.g., updating styles) do not require rewriting content or scripts.

**Reusability:** The same content can be presented differently for various devices or themes by changing CSS alone, without touching HTML or scripts.

• Improves organisation and clarity of code.
• Facilitates teamwork by allowing specialists to focus on one layer.
• Enhances accessibility by keeping content semantic and separate from styling and scripts.

Consider a web page with a heading, a paragraph, and a button that changes the paragraph text when clicked.

**Content layer:** HTML defines the heading (<h1>), paragraph (<p>), and button (<button>).

**Presentation layer:** CSS styles the heading colour and centres the text, and styles the button appearance (background colour, font). Example: h1 { colour: green; text-align: centre; } button { background-colour: lightgrey; }  - **Behaviour layer:** JavaScript adds an event listener to the button that changes the paragraph text when clicked. Example: document.querySelector('button').addEventListener('click', function() { document.querySelector('p').textContent = 'Text changed!'; });

• Shows clear division of roles among layers.
• Demonstrates how layers combine to create a functional page.