CSS controls the presentation and layout of HTML elements. Applied using:
Inline: style attribute on the element — highest priority
Internal: <style> block in the <head>
External: separate .css file — best for maintainability
Selectors: element (p), class (.menu), ID (#logo), pseudo-class (a:hover). Cascade: more specific rules override general ones. Box model: content → padding → border → margin.
JavaScript
JavaScript adds interactivity and behaviour to web pages. It runs client-side in the browser.
Manipulates the DOM (Document Object Model) — changes HTML/CSS dynamically
Handles user events: clicks, form submissions, keypresses
Makes AJAX (Asynchronous JavaScript) requests — loads data without refreshing the page
User types URL → browser resolves domain via DNS → gets IP address
Browser sends HTTP/HTTPS request to web server
Web server (Apache, Nginx) processes request → returns HTML/CSS/JS files
Browser renders the page by parsing HTML, applying CSS, executing JS
Static vs Dynamic Web Pages
Feature
Static
Dynamic
Content
Fixed HTML files on the server
Generated on-the-fly by server-side code (PHP, Python, Node.js)
Database?
No
Yes — content pulled from database
Personalisation
Same for all users
Tailored to each user (e.g. login, shopping cart)
Examples
Simple brochure sites
E-commerce, social media, news sites
Exam tip: AQA 7517 may ask you to identify the role of HTML, CSS, and JavaScript in a web page, or to explain what a web server does. Key distinction: HTML = structure, CSS = style, JavaScript = behaviour/interactivity. Static pages = fixed HTML files; dynamic = generated per-request using server-side scripting. The DOM allows JavaScript to change page content without reloading.
▶
Click through the slides at your own pace. Use arrow keys or click to advance.
Click slide or press arrow keys to navigate
Worksheet — 4.9.4a Web Technologies
8 questions · instantly marked · AQA 7517 standard
Q1Explain the different roles of HTML, CSS, and JavaScript in a web page.[4]
✅ Mark scheme
Mark scheme
HTML (HyperText Markup Language): defines the structure and content of the page using tags [1]; e.g. headings, paragraphs, links, images [1]. CSS (Cascading Style Sheets): controls presentation/styling [1]; colours, fonts, layout, positioning [1]. JavaScript: adds interactivity and dynamic behaviour [1]; manipulates the DOM, handles events (clicks), makes asynchronous requests [1].
Q2Explain the difference between a static and a dynamic web page. Give an example of each.[2]
✅ Mark scheme
Mark scheme
Static: HTML files stored on server — same content served to all users [1]; example: a simple company information page [1]. Dynamic: page generated on-the-fly by server-side code [1]; content pulled from a database, personalised per user [1]; example: Amazon product page, social media feed [1].
Q3Describe what the DOM (Document Object Model) is and explain how JavaScript can use it.[2]
✅ Mark scheme
Mark scheme
DOM: a tree representation of the HTML page structure [1]; each element is a node in the tree [1]; JavaScript can access DOM nodes using methods like getElementById() [1]; and modify content, styling, or structure dynamically without a page refresh [1].
Q4Explain the three ways CSS can be applied to HTML. Which is considered best practice for larger sites?[2]
✅ Mark scheme
Mark scheme
Inline: style attribute on individual element — highest specificity but not reusable [1]; Internal: <style> block in <head> — applies to that page only [1]; External: separate .css file linked via <link> — applies to all pages that link it, easiest to maintain [1]. Best practice: external stylesheet — one change updates all pages [1].
Q5Describe the sequence of events when a user types a URL into a browser and the page loads.[2]
✅ Mark scheme
Mark scheme
1) Browser resolves domain name to IP via DNS [1]; 2) Browser sends HTTP/HTTPS request to web server [1]; 3) Web server processes request and returns HTML/CSS/JS files [1]; 4) Browser renders the page by parsing HTML, applying CSS, executing JavaScript [1].
Q6Explain what AJAX is and state one benefit of using it in a web page.[2]
✅ Mark scheme
Mark scheme
AJAX (Asynchronous JavaScript And XML): allows a web page to send/receive data from a server in the background [1]; without reloading the whole page [1]; benefit: faster user experience — only parts of the page are updated (e.g. search suggestions appearing as you type) [1].
Q7Explain what a web server does when it receives an HTTP request for a dynamic web page.[2]
✅ Mark scheme
Mark scheme
Web server receives HTTP request with URL and parameters [1]; executes server-side script (PHP, Python, Node.js) [1]; script queries the database to retrieve relevant data [1]; HTML page is generated from the data and returned to the browser [1].
Q8Describe the CSS Box Model. Identify each component.[4]
✅ Mark scheme
Mark scheme
CSS Box Model: each element is a rectangular box with four areas from inner to outer [1]: Content — the actual text/image [1]; Padding — transparent space between content and border [1]; Border — visible border around padding [1]; Margin — transparent space outside the border, separating elements from each other [1].
Topic Quiz
Question 1 of 15
You scored
out of 15
Card 1 of 8
Click to reveal definition
🎉
All cards reviewed!
Term
Definition
🎯
Mini Test — Web Technologies
10 questions · 10 minutes
⏱ 10:00
Section A — Multiple Choice [5 marks]
Q1CSS is responsible for:
Q2A dynamic web page differs from a static web page because:
Q3The DOM (Document Object Model) is:
Q4The best practice for applying CSS to a large website is:
Q5AJAX allows a web page to:
Section B — Short Answer [5 marks]
Q6What does HTML stand for and what is its purpose?
Mark schemeHyperText Markup Language [1]; defines the structure and content of web pages using tags [1].
Q7What is JavaScript used for in web development?
Mark schemeAdds interactivity and dynamic behaviour [1]; manipulates the DOM, handles user events, makes asynchronous requests to servers [1].
Q8Name the four layers of the CSS Box Model from innermost to outermost.
Mark schemeContent, Padding, Border, Margin [1 per correct pair in order, up to 2 marks].
Q9State the role of a web server when processing an HTTP request.
Mark schemeReceives and processes the HTTP request (may run server-side code and query a database for dynamic pages) [1]; returns the requested HTML/CSS/JS files to the browser [1].
Q10What is the difference between a class selector and an ID selector in CSS?
Mark schemeClass (.name): can be applied to multiple elements on the same page [1]; ID (#name): must be unique — only one element per page should have that ID [1].