📌 Supplementary Content: The HTML, CSS, JavaScript, and search engine material in this lesson goes
beyond the Edexcel 4CP0 specification. It is included to provide broader context and is useful background knowledge — but questions on these specific topics are unlikely to appear in your 4CP0 exam. Core 4CP0 content for this topic is in
5.3a The Internet and WWW.
HTML — Structure
HTML (HyperText Markup Language) defines the structure and content of a web page. It uses tags (angle brackets) to mark up text and other elements.
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
<a href="page2.html">Click here</a>
</body>
</html>
Key HTML tags include: <h1>–<h6> (headings), <p> (paragraphs), <a> (hyperlinks), <img> (images), <ul>/<li> (lists), <table> (tables), <form> (input forms).
CSS — Style
CSS (Cascading Style Sheets) controls the appearance and layout of web pages — colours, fonts, spacing, and positioning. CSS is separate from HTML, which separates content from presentation.
h1 {
color: purple;
font-size: 24px;
}
p {
font-family: Arial;
line-height: 1.6;
}
CSS can be placed inline (within a tag), in a <style> block in the HTML head, or in a separate .css file (best practice).
JavaScript — Behaviour
JavaScript adds interactivity and dynamic behaviour to web pages. It runs in the browser (client-side) and can respond to user events, validate forms, update content without reloading, and more.
function greet() {
alert("Hello, World!");
}
document.getElementById("btn").onclick = greet;
The Three Layers of a Web Page
| Technology | Role | Analogy |
|---|
| HTML | Structure and content | The skeleton of a building |
| CSS | Appearance and styling | The paint, decor, and furnishings |
| JavaScript | Interactivity and behaviour | The electricity — makes things work |
Search Engines and Indexing
A search engine (e.g. Google, Bing) automatically crawls and indexes web pages using programs called web crawlers (spiders). When a user searches, the engine returns ranked results based on relevance algorithms. SEO (Search Engine Optimisation) refers to techniques used to improve a page's ranking in search results.
📝 Exam Tip: Know the three web technologies and their roles: HTML = structure, CSS = styling/appearance, JavaScript = interactivity/behaviour. A common exam question asks "what is the role of CSS?" — answer: to control the appearance and layout (colours, fonts, spacing) of a web page, separate from its content.
⚠️ Common Mistakes
- Saying HTML controls the appearance — HTML defines structure; CSS controls appearance
- Saying JavaScript is the same as Java — they are completely different languages; JavaScript runs in the browser
- Forgetting that CSS separates style from content — this is an advantage: you can change the look of a site without touching the HTML