Three languages, and why they are separate
A web page is built from three technologies, and each does exactly one thing. Keeping them separate is not a style preference — it is what lets one stylesheet restyle a thousand pages, and what lets a page still be readable when scripting is switched off.
| Language | Job | Analogy |
|---|---|---|
| HTML | structure and content | the skeleton |
| CSS | presentation — colour, layout, spacing | the clothes |
| JavaScript | behaviour — what happens when the user acts | the muscles |
Switch to CSS and then JavaScript. CSS styles whole groups of nodes at once; JavaScript changes them after the page has loaded. Only JavaScript can respond to a click.
HTML: elements, tags and nesting
An HTML element is written with an opening tag, some content, and a closing tag: <p>Hello</p>. A few elements have no content and so no closing tag, such as <br> and <img>.
Elements sit inside other elements, forming a tree. The nesting must not cross over: <b><i>text</b></i> is wrong, because the <i> opened last and must therefore close first.
Attributes go inside the opening tag and give extra information — <img src="cat.jpg" alt="a cat">. The alt attribute is required on images: it is what a screen reader announces to a blind user and what appears if the image fails to load.
| Tag | Purpose |
|---|---|
| <h1> … <h6> | headings, h1 most important |
| <p> | a paragraph |
| <a href="…"> | a hyperlink |
| <img src="…" alt="…"> | an image, with text for when it cannot be seen |
| <ul> <ol> <li> | unordered list, ordered list, list item |
| <table> <tr> <td> | table, row, cell |
| <div> <span> | generic containers, block and inline |
CSS: selecting and styling
A CSS rule has a selector saying which elements it applies to, and a block of declarations, each a property and a value. Styling can be written inline in an element, inside a <style> block in the head, or — best — in a separate .css file linked from every page.
The external file is the one the paper wants you to recommend. Change one line in it and every page on the site updates, the file is cached by the browser so it downloads once, and the HTML stays readable.
Class or id?
A class may be applied to any number of elements — .warning on every alert box. An id must identify exactly one element on the page, such as #main-navigation. Using an id for something that appears twice is invalid, and exam questions test the distinction directly.
JavaScript: making the page respond
HTML and CSS produce a page that looks right but does nothing. JavaScript runs in the browser, after the page has loaded, and can change any part of the tree in response to what the user does.
The pattern is nearly always the same: find an element, attach a function to an event, and change something when that event fires.
A page has <button id="go">Click me</button> and <p id="out"></p>. Write JavaScript that puts "Hello" into the paragraph when the button is clicked.
- Find the button:
const btn = document.getElementById("go");The id is how JavaScript locates one specific element in the tree. - Attach a handler:
btn.addEventListener("click", function () { … });The function is stored, not run — it waits until a click actually happens. - Inside it, change the paragraph:
document.getElementById("out").textContent = "Hello";Setting textContent replaces what the element displays. - Place the script at the end of the body, or use
defer.A script that runs before the elements exist finds nothing — this is the single most common cause of "it does not work".
Locate the element by id, add a click listener, and set textContent inside the handler.
Client-side and server-side
JavaScript in a page runs on the client — the visitor's own browser — so it is fast and needs no round trip, but the user can read and alter it. Anything that must be trusted, such as checking a password or a price, has to be done on the server. Client-side validation is for the user's convenience; it is never security.
Making a page usable by everyone
Two ideas from the syllabus decide whether a page works for real visitors.
Accessibility means the page can be used by people with impairments: alt text on every image, sufficient colour contrast, headings used in order rather than chosen for their size, and every function reachable from the keyboard.
Responsive design means the page adapts to the screen it is on. Most web traffic in Pakistan is from phones, so a layout that only works at desktop width fails most of its audience. Relative units, flexible layouts and media queries are how it is done.
Before you leave this chapter
- HTML = structure, CSS = presentation, JavaScript = behaviour.
- Tags must nest without crossing; the last opened is the first closed.
- An external stylesheet styles a whole site from one file and is cached once.
- A class can repeat; an id must be unique on the page.
- Client-side validation helps the user; only server-side checking is secure.
Getting a page from a server to a browser
Typing an address does more than most students realise, and the sequence is examinable. The browser looks up the domain name through DNS to find the server's IP address, opens a connection, and sends an HTTP request. The server replies with an HTTP response containing the HTML, and the browser then requests each stylesheet, image and script the page refers to.
The browser parses the HTML into the tree, applies the CSS, and runs the JavaScript. Only then does anything appear — which is why a page with twenty large images feels slow even on a fast connection: each one is a separate request.
- HTTP is the protocol carrying requests and responses. HTTPS is the same thing encrypted, so nobody between you and the server can read or alter it.
- DNS translates a human-readable name into the numeric address the network actually routes to.
- Status codes report the outcome: 200 means success, 404 means the page does not exist, 500 means the server itself failed.
- Caching stores files locally so a returning visitor downloads them once rather than every time.
Why HTTPS matters on every page, not just login pages
Without encryption, anyone on the same Wi-Fi can read the traffic and — worse — modify it in transit, injecting content into a page the visitor trusts. That is why browsers now mark plain HTTP sites as "not secure" regardless of whether they ask for a password. Any site handling user input at all should use HTTPS.