How are web pages built from HTML, CSS and JavaScript, and how do search engines rank them?
Web technologies: HTML for structure, CSS for presentation and JavaScript for client-side behaviour, the difference between client-side and server-side processing, and how search engines index and rank pages using web crawlers and the PageRank algorithm.
An OCR H446 answer on web technologies: HTML for structure, CSS for presentation and JavaScript for client-side behaviour, the difference between client-side and server-side processing, and how search engines use web crawlers and the PageRank algorithm to index and rank pages.
Reviewed by: AI editorial process; not yet individually human-reviewed
Have a quick question? Jump to the Q&A page
Jump to a section
What this dot point is asking
OCR wants the roles of HTML, CSS and JavaScript, the difference between client-side and server-side processing, and how search engines index and rank pages using web crawlers and PageRank. Expect a "roles of HTML, CSS and JavaScript" question and a "how does a search engine work" question.
The answer
HTML, CSS and JavaScript
<!-- HTML: structure and content -->
<form id="signup">
<input type="email" id="email" />
<button type="submit">Join</button>
</form>
Client-side versus server-side processing
Search engine indexing and PageRank
Examples in context
A shopping site uses HTML for the product layout, CSS for the brand styling, and JavaScript to update the basket without reloading; the checkout and stock checks run server-side for security. Search engine optimisation works partly because PageRank rewards links from reputable sites. Client-side validation gives instant "password too short" feedback, while the server re-checks everything before saving. OCR links this to the client-server model of the web, to databases (server-side data access) and to security (why client code cannot be trusted).
Try this
Q1. State what CSS is responsible for in a web page. [1 mark]
- Cue. Presentation and layout (colours, fonts, spacing, positioning), kept separate from the content.
Q2. Explain why a security check must be performed server-side rather than only client-side. [2 marks]
- Cue. The user can view and modify client-side code (or disable JavaScript), so a client-side check can be bypassed; server-side code is hidden and cannot be altered by the user.
Q3. State what a link from page A to page B represents in the PageRank algorithm. [1 mark]
- Cue. A vote for page B, contributing to its importance (weighted by how important page A itself is).
Exam-style practice questions
Practice questions written in the style of OCR exam questions on this dot point, with worked answer explainers. The year tag is the paper they imitate, not the source.
OCR 20206 marksExplain the roles of HTML, CSS and JavaScript in a web page, giving an example of what each is responsible for.Show worked answer →
Award two marks per technology for the role and an example.
HTML (HyperText Markup Language) defines the structure and content of the page using elements and tags, for example headings, paragraphs, links, images and forms; it says what the content is, not how it looks.
CSS (Cascading Style Sheets) controls presentation and layout, for example colours, fonts, spacing and positioning, keeping styling separate from content so one stylesheet can format many pages consistently.
JavaScript runs in the browser to add client-side behaviour and interactivity, for example validating a form before submission, showing or hiding content, or responding to clicks without reloading the page. Markers reward structure/content for HTML, presentation for CSS, and client-side behaviour for JavaScript.
OCR 20226 marksDescribe how a search engine uses web crawlers and the PageRank algorithm to return useful results, and state what PageRank uses to judge a page's importance.Show worked answer →
Crawlers and indexing (up to 3): a search engine uses web crawlers (spiders) that automatically follow hyperlinks from page to page, retrieving content and adding it to a searchable index that maps keywords to the pages containing them, so searches can be answered quickly from the index rather than the live web.
PageRank (up to 3): PageRank ranks pages by importance based on the links between them, treating a link from page A to page B as a vote for B; a page is more important if many pages link to it, and a link from an already-important page counts for more. The results are ordered by relevance to the query combined with this importance score. Markers reward crawling to build an index plus links-as-votes weighted by the linking page's own importance.
Related dot points
- Networks (LAN and WAN, network topologies, client-server and peer-to-peer), network hardware (NIC, switch, router, WAP), the need for protocols and protocol layering, the TCP/IP four-layer stack, and packet switching.
An OCR H446 answer on networks: LANs and WANs, topologies, client-server and peer-to-peer models, network hardware (NIC, switch, router, wireless access point), the need for protocols and layering, the TCP/IP four-layer stack, and packet switching.
- The structure of the internet, the Domain Name System (DNS), URLs and IP and MAC addressing, the difference between the internet and the world wide web, and the protocols HTTP, HTTPS, FTP and the client-server model of the web.
An OCR H446 answer on the structure of the internet: the Domain Name System, URLs, IP and MAC addressing, the distinction between the internet and the world wide web, and the protocols HTTP, HTTPS and FTP within the client-server model of the web.
- Network security: the threats from malware (viruses, worms, trojans), social engineering and network attacks, and the protective measures of firewalls, proxy servers, encryption and access control.
An OCR H446 answer on network security: the threats from malware (viruses, worms, trojans), social engineering such as phishing, and network attacks, together with the protective measures of firewalls, proxy servers, encryption and access control.
- Programming paradigms (procedural, low-level / assembly and object-oriented), the need for and characteristics of different levels of programming language, and the core principles of object-oriented programming: classes, objects, methods, attributes, encapsulation, inheritance and polymorphism.
An OCR H446 answer on programming paradigms and language levels: procedural, low-level and object-oriented programming, the characteristics of high-level versus low-level languages, and the OOP principles of classes, objects, methods, attributes, encapsulation, inheritance and polymorphism.
- Structured Query Language (SQL): defining tables, and using SELECT, FROM, WHERE, ORDER BY, INSERT INTO, UPDATE, DELETE and joining tables to query and maintain a relational database, with referential integrity.
An OCR H446 answer on Structured Query Language: defining tables and using SELECT, FROM, WHERE, ORDER BY, INSERT INTO, UPDATE and DELETE, joining tables across a relationship, and the role of referential integrity in a relational database.