Web technologies, search indexing and PageRank

Read the appendix's HTML vocabulary

The html element contains the document; head holds metadata such as title and a link to CSS; body holds visible content. h1/h2/h3 form a heading hierarchy; p holds a paragraph; div groups content. An a element uses href for a destination.

An img uses src plus alt text and can state height/width. ol/ul contain li items for ordered/unordered lists. form groups controls; input type=text with a name supplies a text value, while type=submit submits it. script includes JavaScript.

The runnable example also introduces doctype, lang, charset and label for a valid accessible document; these additions are explained rather than silently treated as extra memorisation requirements. Label's for attribute matches an input id.

Meaningful alternative text provides the image's information when it is unavailable or cannot be seen. The embedded SVG is an original tiny diagram carried inside its image URL, so no separate picture download is needed.

Select and style elements

An element selector such as h1 matches headings of that type; .info matches elements with class=info; #result matches id=result. A class can be reused, whereas an id should identify one document element.

Inline style places declarations on one element; an external stylesheet keeps reusable rules in a linked file. Under ordinary author styles of the same importance/layer, an id selector has greater specificity than a class selector, which exceeds an element selector.

OCR names background-color, border-color, border-style, border-width, color, font-family, font-size, height and width, with named and hexadecimal colours. A visible border needs a style, not merely a width or colour. Our three files demonstrate these properties/selectors.

JavaScript's event listener, preventDefault, Number, Number.isInteger, trim, toFixed and textContent are explained conveniences; exact form-input API memorisation is not required by the appendix.

Save as index.html

Save all three files in the same folder, then open index.html in a browser. The form sends no real order and has no server: the listener prevents submission and computes a demonstration cost locally.

The unit cost is £3; quantity must be a whole number from 0 to 1000000 so multiplication stays within this bounded demonstration.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cost practice</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Cost calculator</h1>
  <div class="info">
    <h2>Method</h2>
    <p>Each item costs £3.</p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30'%3E%3Ctext x='4' y='21'%3EMultiply%3C/text%3E%3C/svg%3E" alt="Multiply quantity by unit cost" width="120" height="30">
    <ol><li>Enter quantity.</li><li>Calculate cost.</li></ol>
  </div>
  <h3>Try a boundary</h3>
  <ul><li>Zero is allowed.</li><li>Negative values are rejected.</li></ul>
  <form id="cost-form">
    <p><label for="quantity">Quantity</label></p>
    <input id="quantity" name="quantity" type="text">
    <input type="submit" value="Calculate">
  </form>
  <p id="result" role="status">Enter a quantity.</p>
  <p><a href="#result">Find the result</a></p>
  <script src="calculator.js"></script>
</body>
</html>

Save as styles.css

The body element rule chooses a font and colour. The class rule styles the reusable information region; the id rule styles the result. Named colours and hex colours are both shown. The image dimensions are attributes; CSS could instead control appropriate sizes.

body { font-family: Arial, sans-serif; color: #172554; }
h1 { color: navy; font-size: 28px; }
.info {
  background-color: #eef7ff;
  border-color: navy;
  border-style: solid;
  border-width: 1px;
}
#result { background-color: #fff4cc; }
img { width: 120px; height: 30px; }

Save as calculator.js

The submit listener receives an event; preventDefault stops navigation/submission. trim removes surrounding whitespace; Number converts the supplied text.

Reject blank, non-integer, negative and over-limit input before calculation. textContent places text into an element without interpreting it as HTML. toFixed(2) formats this demonstration's result with two decimal places; real financial systems need an appropriate bounded amount representation.

const form = document.getElementById("cost-form");
const result = document.getElementById("result");
form.addEventListener("submit", function (event) {
  event.preventDefault();
  const raw = document.getElementById("quantity").value.trim();
  const quantity = Number(raw);
  if (raw === "" || !Number.isInteger(quantity) || quantity < 0 || quantity > 1000000) {
    result.textContent = "Enter a whole quantity from 0 to 1000000.";
    return;
  }
  result.textContent = "Total: £" + (quantity * 3).toFixed(2);
});

JavaScript control structures and output

JavaScript uses assignment and expressions, if/else selection, for/while iteration, arrays with zero-based indexes and function calls/returns. In a for loop, initialise the index once, test before each pass and update after the body.

A while loop also tests before executing, so it may run zero times. Keep the progress condition explicit.

OCR appendix output alternatives include alert(message), which requests a modal browser message, and document.write(text), which writes into the document stream. document.write can replace a loaded document and interprets markup, so this calculator uses textContent for text in an existing element.

Recognise the appendix forms while choosing output appropriate to the task. The pure example below uses console.log for a reproducible trace.

Client and server processing

Client-side validation gives quick feedback and reduces unnecessary requests; client-side rendering/calculation uses the user's device and can work locally. Users can change or bypass browser code, so a server must recheck any data on which a trusted decision depends.

In a real order, the server obtains its own price, validates quantity, checks authorisation and calculates the stored total.

Server-side processing can use protected credentials/databases and central rules, but needs connectivity and server capacity; responses may incur network delay. Choose both roles deliberately. Putting a secret into downloaded JavaScript does not keep it secret, and a disabled button is not an access-control boundary.

Crawling and indexing: make pages searchable

Stale content, inaccessible pages and crawling restrictions can limit the index. Index membership and query ranking are different tasks.

PageRank: share contributions through links

In a simple normalised PageRank model, PR(v) = (1−d)/N + d × sum(PR(u)/L(u)) over pages u linking to v. N is page count, d a damping factor and L(u) u's outgoing-link count. Each update uses all values from the preceding iteration.

Rank from a strongly ranked page matters, and its contribution is divided among its outlinks. Dangling pages require a rule to redistribute their rank; our example has none. Links do not establish truth, and current search systems use many signals beyond this historical model.

Original A-Level practice

7 original questions total 27 marks. Attempt each before opening the independently written indicative marking guidance.