You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
This lesson covers the key technologies that power the World Wide Web: HTML, CSS, JavaScript, server-side scripting, APIs, REST, and HTTP/HTTPS methods. These are part of the OCR H446 specification.
The World Wide Web (WWW) is a service that runs on the Internet, using HTTP/HTTPS to deliver web pages stored on web servers to clients (browsers).
| Component | Purpose |
|---|---|
| Web server | Stores and serves web pages |
| Web browser | Requests and displays web pages (client) |
| HTTP/HTTPS | Protocol for requesting and delivering web resources |
| URL | Uniform Resource Locator — the address of a web resource |
| HTML | Defines the structure and content of a web page |
| CSS | Defines the visual presentation (styling) |
| JavaScript | Adds interactivity and dynamic behaviour |
HTML is the standard markup language for creating web pages. It defines the structure and content of a page using tags.
| Feature | Detail |
|---|---|
| Tags | Instructions enclosed in angle brackets (e.g., <p>, <h1>, <img>) |
| Elements | An opening tag, content, and closing tag (e.g., <p>Text</p>) |
| Attributes | Additional information within tags (e.g., <a href="url">) |
| Nesting | Tags can be nested inside each other |
| Semantic | Modern HTML uses semantic tags (<header>, <nav>, <article>, <footer>) |
| Tag | Purpose |
|---|---|
<html> | Root element of the page |
<head> | Metadata, title, CSS links |
<body> | Visible content |
<h1> to <h6> | Headings (h1 = largest) |
<p> | Paragraph |
<a> | Hyperlink |
<img> | Image |
<div> | Generic container |
<table> | Table |
<form> | User input form |
CSS controls the visual presentation of HTML elements — colours, fonts, layout, spacing, and responsive design.
| Concept | Description |
|---|---|
| Selector | Targets which HTML elements to style (e.g., p, .classname, #id) |
| Property | The aspect to change (e.g., color, font-size, margin) |
| Value | The setting for the property (e.g., red, 16px, 10px) |
| Cascading | Multiple styles can apply to an element; specificity and order determine which wins |
| External stylesheet | CSS in a separate .css file, linked from HTML |
| Inline | CSS within the style attribute of an HTML tag |
| Internal | CSS within <style> tags in the HTML <head> |
| Benefit | Explanation |
|---|---|
| Separation of concerns | Structure (HTML) and presentation (CSS) are maintained independently |
| Reusability | One CSS file can style multiple HTML pages |
| Maintainability | Changing the look of a site requires editing only the CSS, not every HTML page |
| Faster loading | Browsers cache CSS files, reducing load times |
JavaScript is a programming language that runs in the browser (client-side) to add interactivity and dynamic behaviour to web pages.
| Use | Example |
|---|---|
| Form validation | Checking that an email field contains "@" before submission |
| Dynamic content | Updating parts of a page without reloading (AJAX) |
| Animation | Slideshow effects, hover animations |
| Event handling | Responding to clicks, key presses, mouse movements |
| DOM manipulation | Adding, removing, or modifying HTML elements dynamically |
| Feature | Client-Side (JavaScript) | Server-Side |
|---|---|---|
| Runs on | User's browser | Web server |
| Speed | Fast (no round-trip to server) | Slower (requires network request) |
| Access | Cannot access databases or server files | Full access to server resources |
| Security | Code is visible to the user | Code is hidden from the user |
| Examples | Form validation, animations | Database queries, authentication |
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.