Web technologies

(a) Client side vs server side [4 marks]

Task	Correctanswer
Loading the website HTML code	Client side
Applying CSS styles to a website	Client side
Running JavaScript to check the customer's surname on the orderform	Client side
Running database queries to check if an item is available in stock	Server side

Memory trick: “Display and Check = Client; Database = Server.”

• Client side: displays the webpage and performs tasks in the user'sbrowser.

• Server side: processes requests and accesses server databases.

(b) Search engine indexing and PageRank [12 marks]

Writing

Search engine indexing is the process where a search engine uses web crawlers to discover and visit web pages, following hyperlinks to find other pages. The crawlers collect information such as keywords, page titles, headings, the content of the page and links. This information is stored in a search engine index, which is a database of web pages. When a customer searches for a product, the search engine uses this index to find relevant pages. If the company's website is indexed correctly, its products are more likely to appear in search results, allowing more customers to find the website.

PageRank is an algorithm that helps rank web pages according to the links pointing to them. A page can receive a higher PageRank if many other websites link to it, especially if those websites have a high PageRank themselves. Links from reputable and relevant websites can therefore improve the company's ranking in search results. A higher ranking can make the website more visible and attract more potential customers. However, PageRank is only one factor used by search engines to rank websites.

The company could improve its PageRank by encouraging reputable websites to link to its pages. For example, it could work with established businesses or ask relevant websites to recommend its products. It should also create useful, relevant and high-quality content that other websites will want to link to. The company should use relevant keywords in its page titles, headings and content so search engines can understand what each page is about. It should ensure that important pages can be found by crawlers through working internal hyperlinks and that the website is secure and free from malware.

Overall, correct indexing helps search engines find and understand the company's pages, while a higher PageRank can help those pages rank more prominently. By combining effective indexing with high-quality content and links from reputable websites, the company can improve its online visibility and increase the number of potential customers who visit its website.

How to memorise the 12-mark answer

Remember these three keywords:

1. INDEX — Find and store

Crawlers visit pages → collect keywords, titles, headings, contentand links → store information in asearchable database.

2. RANK — Count and value links

PageRank considers incoming links and the importance of thelinking pages. More valuable links canimprove a page's ranking.

3. IMPROVE — Content and connections

Use relevant keywords, quality content, working internal links andlinks from reputable externalwebsites.

Memorise this exact JavaScript code. It covers all the points on the markscheme.

javascript

function errorCheck() {
    var pass = document.getElementById("Password").value;

    if (pass.length < 8 || pass.length > 12) {
        document.getElementById("errorText").innerHTML = "Password Length Error";
    }
}

Howtorememberit:F–G–L–I

• F — Function: function errorCheck()

• G — Get: document.getElementById("Password").value

• L — Length: if (pass.length < 8 || pass.length > 12)

• I — Insert: document.getElementById("errorText").innerHTML = "Password Length Error";

3(a)(i) HTML code [5 marks]

<ul>
    <li>Serve the company trust</li>
    <li>Protect data</li>
    <li>Uphold standards</li>
</ul>

<a href="updates.html">Updates</a>

<p>Login</p>

<form action="dologin.php">
    Password
    <input type="text" name="pw">
    <input type="submit">
</form>

3(a)(ii) CSS code [3 marks]

h1 {
    color: white;
    background-color: red;
}

3(b)(i) Legislation [3 marks]

Legislation: Copyright, Designs and Patents Act.

Description: Any two of the following:

• Copyright automatically gives the photographer ownership of their photographs.

• Other people cannot use or distribute the photographs without permission.

• People who use or distribute the photographs without permission canbe prosecuted or fined.

• The photographer can grant or sell permission to use the photographs through a licence.

  
  

3(b)(ii) Legal use of images [2 marks]

Give two ways:

1. Ask the author, photographer or owner for permission to use the image.

2. Use copyright-free images, such as those available under a Creative Commons licence, or purchase alicence to use the image.

4(a) HTML hyperlink using an image [3 marks]

<a href="booking.htm"><img src="ticket.png"></a>

Memory trick: A-H-I-S-C

• A = <a> opens the hyperlink.

• H = href="booking.htm" gives the destination.

• I = <img> displays the image.

• S = src="ticket.png" specifies the image file.

• C = </a> closes the hyperlink.

For full marks, make sure the image is inside the opening and closing <a>tags.

4(b) JavaScript booking fee function [4 marks]

Completed code:

function bookingfee(numtickets, country) {
    var nonUKprice = 4.99;
    var perTicketPrice = 2.99;
    var total = 0;

    if (country != "UK") {
        total = total + nonUKprice;
    }

    total = total + (numtickets * perTicketPrice);
    return total;
}

The four missing answers, in order

1. 2.99

2. nonUKprice

3. numtickets

4. return

Memory trick: 2.99 → Extra fee → Number of tickets → Return.

• Each ticket costs £2.99.

• If the customer is outside the UK, add £4.99 once.

• Multiply the number of tickets by the price per ticket.

• Return the calculated total.

Remember: the £4.99 international fee is added once, not once perticket.

4(c)(i) Why recalculate the bookingfee on the server? [3 marks]

1. Security: Client-side code can be altered by the user, so server-side processing prevents users from easily manipulating the booking fee.

2. Compatibility: The user's browser may not support JavaScript, or JavaScript may be disabled.

3. Accuracy: The server ensures the booking fee is calculated correctlyfor customers in all locations,including the additional fee for customers outside the UK.

Memory trick: S-C-A = Security, Compatibility, Accuracy.

4(c)(ii) One advantage of client-side processing [2 marks].

Option 1 — Customer (easy to remember):

Client-side processing gives a faster response because the calculation is performed in the user's browser,so the user does not need to submit a request to the server and wait for a response.

Option 2 — Company:

Client-side processing reduces the load on the server because fewer calculations need to be performed by the server, reducing the processing power and bandwidth required.

(d)(i) Describe how a website isindexed by a search engine. [4 marks]

1. A web crawler (spider) visits a website, either by selecting it from an existing list or by following a link.

2. It records information about the webpage, such as its text and metadata, and records the position ofeach word.

3. The information is stored in an index.

4. The crawler follows links to discover other websites. A robots.txtfile can be used to instruct webcrawlers.

🧠 Memory trick: V – R – P – S – L – R

• V = Visit the website.

• R = Record text and metadata.

• P = Position of each word.

• S = Store information in an index.

• L = Links to other websites are followed.

• R = robots.txt gives instructions to crawlers.

(d)(ii) What is meant by a damping factor? [1 mark]

The damping factor is a value between 0 and 1 representing the probability that a user will not follow a link.

(d)(iii) Give two other factors that affect a website’s PageRank value. [2 marks]

The number of links pointing to the website.

The PageRank scores of the websites linking to it.

HTML – Content and Structure

• HTML defines the structure and content of the web page.

• It uses tags enclosed in angle brackets (< >) to define elements,such as headings, text and ticket details.

CSS – Style and Appearance

• CSS defines the style and appearance of the web page, such as colours, fonts and sizes.

• It uses selectors, such as classes and IDs, to target elements and apply styles. CSS can be written inside the HTML file or in an external file, and multiple CSS rules can be combined, with more local rules overriding others.

🧠Easy way to remember

• HTML = What is on the page and its structure.

• CSS = How the page looks.

li.model {
    color: red;
    font-family: arial;
}

#Beeb {
    color: green;
    font-family: times;
}

🧠Memory trick to remember all 6 marks

• . means class → .model

• # means ID → #Beeb

• Colour first, font-family second → color, then font-family

• Every rule needs { } → opening and closing curly brackets

(a) CSS code — 3 marks

#warning {
    color: red;
    font-family: monospace;
}

Memorise: ID → Colour → Font

• #warning — selects the HTML element with id="warning". (1mark)

• color: red; — makes the message red. (1 mark)

• "" style="box-sizing: border-box; scrollbar-width: none;">monospace; — makes the message use a monospacefont. (1 mark)

  
  

(b) Meaning of the HTML line — 2 marks

<input type="text" name="username">

Full-mark answer:

1. Creates a text box for the user to enter text.

2. The text box is named username, so the entered value can beidentified as the username.

Model answer (9 marks)

Client-side processing takes place in the user's web browser, whereas server-side processing takes place on the web server. For example, JavaScript is commonly used for client-side processing, while PHP is commonly used for server-side processing.

Client-side processing is generally faster for tasks requiring an immediate response because the code runs directly in the browser without sending data to the server and waiting for a response. For example, JavaScript can validate a form and display an error message immediately if a user enters an invalid email address. It is also useful for interactive applications such asgames. However, client-side processing depends on the user's browser supporting JavaScript, and the user may disable it. Furthermore, the code is downloaded to the browser and can be viewed or copied, so it should not beused to protect confidential information or perform security-critical operations.

In contrast, server-side processing takes place on the web server. Data issent from the browser to theserver, processed there, and the result is returned to the browser. For example, PHP can check a username and password against information stored in a database when a user logs in. Anadvantage is that the code and database can remain hidden from the user, helping to protect sensitive information and prevent users from directly modifying the processing code. Server-side processing is therefore best for authentication, accessing databases and processing payments. However, it may be slower because data must travel between the browser and server, and processing requests places an additional workload on the server. it also requires a server connection.

Some tasks benefit from using both approaches. For example, a website can use JavaScript to check that a password field is not empty and immediately display an error message, then use PHP on the server to verify the password against a securely stored password hash. The server must repeat the necessary validation because a user could bypass or disable the client-sidechecks. This improves responsiveness without relying on the browser for security.

Overall, client-side processing is best for quick responses and interactive features, while server-side processing is best for security-critical tasks,confidential data and database access. Using both together often provides the best balance of speed, security and reliability.

How to remember it in the exam

Remember F.A.S.T. versus S.A.F.E.

F

Client-side = FAST

• F — Fast response; no round trip to the server for each action.

• A — Accessible code; users can view or copy it.

• S — Suited to interactive features, games and instant form validation.

• T — Trouble if JavaScript is disabled or unsupported.

S

Server-side = SAFE

• S — Sensitive code and data can be kept on the server.

• A — Accesses databases and authenticates users.

• F — Fetches and returns results over the network, which can cause delays.

• E — Extra workload and hosting costs for the server

Full-mark answer (2/2):

• The site will rank higher if more websites link to it, especially websites with a high PageRank.

• The site will rank higher if the linking websites have fewer outward links.