Everything OCR A Level H446 topic 1.3.4 expects you to read and write: the structure of a page, how it is styled, how JavaScript changes it in the browser, and what runs on the client versus the server. Edit the code and the mini page on the right responds.
Tags mark up what each part of the page is: a heading, a paragraph, an image, a form. Attributes such as id and class label elements so CSS and JavaScript can find them.
Rules made of a selector and properties say how elements look: colour, size, font, borders. Kept in a <style> block or an external file linked with <link>.
Code that runs in the browser (client-side). It reads what the user typed, does a calculation and writes the result back into the page through the DOM: document.getElementById("id").
Click anything in the page to see the HTML that produced it, the CSS rules that style it, and how JavaScript would reach it.
<html> containing a <head> (information about the page: the <title>, links to CSS, scripts) and a <body> (everything that is displayed).<p>…</p>. <img>, <input> and <link> have no closing tag.name="value": <img src="logo.png" alt="Club logo">.id must be unique on the page and is how JavaScript finds an element. class can be shared by many elements and is mostly used by CSS.<li> only lives inside <ul> or <ol>.<img> an alt: it describes the image for screen readers and shows if the file is missing.Add rules one at a time. Each rule is a selector followed by property: value; pairs inside braces. Matching elements light up on the right.
<link rel="stylesheet" href="styles.css">. One file styles every page of the site, so a change is made once; the browser can cache it.<style> block in the head of one page. Good for a one-off page; the rules only apply there.style="…" attribute on a single tag. Quick, but mixes appearance into the HTML and cannot be reused.| Property | Example values |
|---|---|
color | red, #2459c4, rgb(0, 0, 255): the text colour |
background-color | yellow, #fff3c4 |
font-family | Arial, "Times New Roman", sans-serif |
font-size | 20px, 1.5em, larger |
border-width / border-style / border-color | 2px / solid, dashed, dotted / green |
width / height | 200px, 50% |
Hover a rule on the left to see which elements it matches.
Press Run to load your HTML.
var total = 0; declares a variable. (let is also accepted.)function calc() { … } defines a function. It runs only when something calls it.onclick="calc()" on a button calls the function when the button is clicked.document.getElementById("num").value reads what the user typed into an input (always a string).parseInt(text) or parseFloat(text) turns that string into a number. Without it, "12" + "3" is "123".document.getElementById("result").innerHTML = "…" writes into the page.alert("message") pops up a message box.if (x == "") { … } else { … } for a decision; == compares, = assigns.The classic question: two inputs, a button, show the sum. Step through what the browser does from loading the page to showing the answer.
Pick a task. The diagram shows which side does the work and what travels across the network.
Auto-marked. Type tags without the angle brackets, for example img.
getElementById("result") must be exactly the id in the HTML, including case. A mismatch returns null and the script stops with an error..value is text. Convert with parseInt() or parseFloat() before doing arithmetic, or "12" + "3" becomes "123".<script> and call it from onclick="name()" with the brackets.( needs a ), every { a }. Statements end with a semicolon. Markers forgive small slips but not a missing block.<p>, <h1>, <a>, <div>, <li>, <ul>, <form> all need closing. <img> and <input> do not..note), a hash for an id (#box), nothing for an element (p). Property and value are separated by a colon and end with a semicolon.