Cambridge IGCSE0417

Web development layers

Information Communication Technology 0417 Chapter Notes

What this chapter covers

Web development layersCreate a web pageUse stylesheets
ShareWhatsAppPost
Web development layers notes

Unable to load PDF

The notes viewer could not load. Please refresh the page.

Read online free. Download a watermarked copy with a free account.

Read the notes

The full Web development layers notes as text: skim, search, and jump between subtopics.

~8 min read

In this chapter

  1. 1The Three Web Development Layers
  2. 2The Content Layer: Structuring with HTML
  3. 3The Presentation Layer: Styling with CSS
  4. 4The Behaviour Layer: Adding Interactivity

1. The Three Web Development Layers

Modern websites are built using a three-layer model to separate different aspects of development. Think of it like building a house: the Content layer is the structure (walls, rooms), the Presentation layer is the decoration (paint colour, furniture style), and the Behaviour layer is the functionality (lights switching on, water running). This separation makes websites easier to create, update, and manage, as you can change one layer without having to rebuild the others.

Key term

Layer: A distinct area of website design, such as content, presentation, or behaviour, that is developed separately but works together to create a final web page.

Examiner insight

Examiners reward answers that clearly explain the benefit of separating layers, such as improved maintainability, reusability of code, and collaboration between developers.

Fun fact

This 'separation of concerns' is a fundamental principle in almost all modern software engineering, from mobile apps to large corporate systems, not just websites.

Worked example 13 marks

A web design team consists of three specialists: Anna writes the text and adds images, Ben designs the colour scheme and fonts, and Chloe programs a pop-up alert for a contact form. Match each person to the web development layer they are working on.

  1. 1

    Step 1: Identify Anna's task. Anna is adding text and images, which is the core content of the page. This corresponds to the Content Layer.

  2. 2

    Step 2: Identify Ben's task. Ben is designing the visual appearance (colours, fonts). This corresponds to the Presentation Layer.

  3. 3

    Step 3: Identify Chloe's task. Chloe is programming an interactive element (a pop-up alert). This corresponds to the Behaviour Layer.

  4. 4

    Final Answer: Anna - Content Layer; Ben - Presentation Layer; Chloe - Behaviour Layer.

Recap

  • Web development is separated into three layers: Content, Presentation, and Behaviour.
  • The Content layer provides the structure and information on the page.
  • The Presentation layer controls the visual styling and layout.
  • The Behaviour layer manages interactivity and how the page responds to users.
  • Separating layers makes website maintenance more efficient and scalable.

Quick check

  1. Name the three layers of web development.3 marks

2. The Content Layer: Structuring with HTML

The Content Layer is the foundation of a web page. It contains all the information you want to display: text, images, videos, tables, and links. This layer's job is to give the content structure and meaning. We use HyperText Markup Language (HTML) to do this. HTML uses 'tags' enclosed in angle brackets, like `<h1>` for a main heading or `<p>` for a paragraph, to define what each piece of content is. The browser then reads this HTML to understand how to structure the page, but not how to style it.

Key term

HTML (HyperText Markup Language): The standard markup language used to create the structure and add the content to web pages.

Common pitfall

A common mistake is to think that HTML is for making text look a certain way (e.g., bold or big). While some tags have a default appearance, HTML's primary role is semantic structure—defining a piece of text as a 'heading' or 'list item', not just making it 'big'.

Worked example 12 marks

Write the HTML code to create a web page structure with a main heading 'Our Solar System' and a paragraph below it that says 'Our solar system has eight planets.'

  1. 1

    Step 1: Identify the main heading. The text 'Our Solar System' should be enclosed in `<h1>` (Heading 1) tags.

  2. 2

    Step 2: Write the HTML for the heading: `<h1>Our Solar System</h1>`.

  3. 3

    Step 3: Identify the paragraph. The text 'Our solar system has eight planets.' should be enclosed in `<p>` (paragraph) tags.

  4. 4

    Step 4: Write the HTML for the paragraph: `<p>Our solar system has eight planets.</p>`.

  5. 5

    Step 5: Combine the elements in the correct order: `<h1>Our Solar System</h1><p>Our solar system has eight planets.</p>`

Recap

  • The Content Layer defines the structure and meaning of web page content.
  • HTML (HyperText Markup Language) is the code used for the Content Layer.
  • HTML uses tags like `<h1>`, `<p>`, and `<img>` to structure content.
  • The purpose of HTML is to describe the content, not to style it.
  • All web pages are fundamentally built upon an HTML document.

Quick check

  1. What does the HTML tag `<p>` represent?1 mark
  2. Which layer is responsible for adding images and text to a webpage?1 mark

3. The Presentation Layer: Styling with CSS

The Presentation Layer is responsible for the entire visual appearance of a web page. It takes the structured content from the HTML and makes it look good. This includes setting colours, fonts, spacing, borders, and the overall layout of elements. The language used for this layer is CSS (Cascading Style Sheets). By keeping the styles in a separate CSS file, you can change the look of an entire website by editing just that one file, rather than changing every single page. This is incredibly efficient.

Key term

CSS (Cascading Style Sheets): A stylesheet language used to describe the presentation, such as the layout, colours, and fonts, of a document written in HTML.

Examiner insight

Candidates who explain the 'cascading' nature of CSS—how styles can be inherited and overridden—demonstrate a deeper understanding and often score higher marks.

Worked example 13 marks

An HTML page has several paragraphs marked with `<p>` tags. Write a single CSS rule that will make all paragraphs have blue text and a font size of 16 pixels.

  1. 1

    Step 1: Identify the HTML element to target. We need to style all `<p>` elements, so the CSS selector is `p`.

  2. 2

    Step 2: Identify the required styles. The text colour needs to be blue, which is the `color` property. The font size needs to be 16 pixels, which is the `font-size` property.

  3. 3

    Step 3: Write the CSS rule. The selector is followed by curly braces `{}` containing the property-value pairs.

  4. 4

    Step 4: Combine into the final rule: `p { color: blue; font-size: 16px; }`

Recap

  • The Presentation Layer controls the visual styling of the web page.
  • CSS (Cascading Style Sheets) is the language used for the Presentation Layer.
  • CSS controls properties like colour, font, layout, and spacing.
  • Using an external CSS file allows you to style multiple pages consistently and efficiently.
  • CSS separates the 'look' of a page from its HTML structure.

Quick check

  1. What does the acronym CSS stand for?1 mark
  2. If you wanted to change the background colour of a webpage, which layer would you be working with?1 mark

4. The Behaviour Layer: Adding Interactivity

The Behaviour Layer brings a website to life by making it interactive. While HTML provides the structure and CSS provides the style, the Behaviour Layer dictates how the page reacts to user actions. This includes things like validating a form before it's submitted, creating pop-up messages, showing or hiding elements when a button is clicked, or loading new content without reloading the entire page. This is achieved using a scripting language, most commonly JavaScript. A script is a set of instructions that the browser executes to make the page dynamic and responsive.

Key term

JavaScript: The primary scripting language for the web, used to create dynamic and interactive content in the Behaviour Layer.

Common pitfall

Students sometimes confuse a simple hyperlink (an `<a>` tag) with behaviour. A standard link, which just takes you to another page, is a structural element of the Content Layer. The Behaviour Layer is involved when an action causes a dynamic change on the *current* page.

Worked example 13 marks

A user is on an e-commerce website. They click a button labelled 'Add to Cart'. The item is added to their shopping cart icon at the top of the page, and the number on the icon increases by one, all without the page reloading. Which web development layer is responsible for this functionality, and why?

  1. 1

    Step 1: Identify the action. A user clicks a button, and the page updates dynamically without a full reload.

  2. 2

    Step 2: Determine which layer handles such actions. Static content is HTML, styling is CSS. Interactive, dynamic responses to user input are handled by the Behaviour Layer.

  3. 3

    Step 3: Justify the choice. The functionality described (updating part of a page in response to a click) requires a script to listen for the click event and then manipulate the page's content. This is the core purpose of the Behaviour Layer and languages like JavaScript.

  4. 4

    Final Answer: The Behaviour Layer is responsible, because it uses a scripting language to handle user interaction and modify the page's content dynamically after it has loaded.

Recap

  • The Behaviour Layer makes web pages interactive and dynamic.
  • It controls how a page responds to user actions like clicks and keyboard input.
  • JavaScript is the most common scripting language used for the Behaviour Layer.
  • Examples of behaviour include form validation, animations, and interactive maps.
  • This layer allows for changes to be made to the page without needing to reload it completely.

Quick check

  1. Give one example of a feature controlled by the Behaviour Layer.1 mark
  2. What is the main programming language used to create the Behaviour Layer?1 mark

End-of-chapter exercise

Test yourself on the whole chapter. Work through these before moving on.

  1. For each of the three web development layers, name the layer, state its primary purpose, and name the main technology or language used to create it.6 marks
  2. Explain two major advantages of using an external Cascading Style Sheet (CSS) to style a website instead of putting style information directly into the HTML files.4 marks
  3. A website has a photo gallery. When a user clicks on a small thumbnail image, a larger version of that image appears in a pop-up window or overlay without the page reloading. Identify and explain the roles of all three web development layers in making this feature work.6 marks
  4. What is the difference between a structural tag in HTML, like `<h1>`, and a style rule in CSS, like `color: red;`?2 marks
  5. A developer wants to ensure that users enter a valid email address format (e.g., 'name@example.com') in a registration form before it can be submitted. Which web development layer is responsible for this check? Justify your answer.3 marks
  6. Describe what is meant by 'separation of concerns' in the context of web development layers.2 marks
  7. A client has asked for their company logo, which appears on every page of their 50-page website, to be made 10% smaller. Explain the most efficient way to do this using the three-layer model.4 marks
  8. Look at the following code snippet: `<p style='color: blue;'>This is a paragraph.</p>`. This is an example of an 'inline style'. Explain why using an external stylesheet is generally considered a better practice than using many inline styles.3 marks
  9. Name two types of content that belong in the Content Layer, besides text.2 marks
  10. Why is the Behaviour Layer sometimes called the 'scripting layer'?2 marks

Go deeper

Practise and revise with member-only material for this chapter.

Workbook

Exam-style practice questions with full worked solutions.

Unlock with a plan

Chapter at a Glance

A single-page summary of every key idea for fast revision.

Unlock with a plan

Free notes are just the start.

Unlock every Workbook and Chapter at a Glance, and generate your own worksheets and predicted papers.

Explore plans

Related chapters

Hardware and softwareInput devices and their usesStorage devices and mediaNetworksMicroprocessor-controlled devicesCommunication