How the web works: client, server, URL and HTTP
The World Wide Web is a huge set of linked pages kept on computers called servers. Your browser is the client.
- URL: the address of a page, e.g.
https://example.org/news/index.html. It has a protocol (https), a domain name (example.org) and a path. - HTTP/HTTPS: the rules for asking and answering. The browser sends a request (GET). The server replies with a status code (200 = OK, 404 = not found) and the files.
- DNS turns a domain name into the server's IP address.
- A hyperlink joins one page to another. Many linked pages on one domain make a website.
Search engines visit pages, store their words and show you a list when you search. Use exact words, quotes for phrases, and check who wrote a page before you trust it.
HTML: the structure of a page
HTML (HyperText Markup Language) marks parts of the text with tags. Most tags come in pairs: <p>text</p>. A tag can have attributes, e.g. <a href="page2.html">.
Skeleton of every page
<!DOCTYPE html>, then <html> with a <head> (title, links to CSS) and a <body> (what you see).
Common tags
- Headings
h1–h6, paragraphp, line breakbr - Link
a href, imageimg src alt - Lists
ul,ol,li; tabletable,tr,th,td - Form
form,input,button,label - Layout (semantic) tags:
header,nav,main,aside,footer
CSS: style and layout
CSS (Cascading Style Sheets) says how HTML should look. A rule has a selector and declarations: h1 { color: navy; font-size: 32px; }.
- Selectors: tag (
p), class (.card), id (#top). - Box model: every element is a box with content, padding, border and margin.
- Layout:
display: flexorgridplaces boxes in rows and columns. - Put CSS in a separate file (
style.css) and link it, so many pages share one style.
Responsive design
A media query changes the style for small screens: @media (max-width: 600px) { .cols { flex-direction: column; } }. Add the viewport meta tag so phones do not zoom out.
JavaScript, publishing and good practice
JavaScript runs inside the browser. It can react to events (click, typing), change text and styles through the DOM (the page as a tree of objects) and check forms before sending.
btn.addEventListener("click", () => { n++; out.textContent = n; });
Front end and back end
HTML, CSS and JavaScript in the browser are the front end. Programs and databases on the server are the back end. To publish a site, you upload the files to a web host and connect a domain name.
Good habits
- Plan first: purpose, audience, a site map and a sketch (wireframe).
- Accessibility: alt text for images, good contrast, real headings.
- Speed: small images; test on a phone and a computer.
- Safety and law: use HTTPS, never trust form input, respect copyright of images and text.
Key formulas and definitions
- HTML = structure (tags and elements)
- CSS = style (selector { property: value; })
- JavaScript = behaviour (events, DOM)
- URL = protocol + domain + path
- Box model = content + padding + border + margin
- Status codes: 200 OK, 404 Not Found, 500 Server Error
Worked examples
1. Write HTML for a heading "My School" and a link to about.html with the text "About us".
<h1>My School</h1> then <a href="about.html">About us</a>. The href attribute holds the address; the text between the tags is what you click.
2. Write a CSS rule that makes every paragraph dark grey, 18 px, with 10 px space inside.
p { color: #333; font-size: 18px; padding: 10px; } Selector p chooses all paragraphs; each declaration is property: value;
3. A box has width 200 px, padding 10 px, border 2 px and margin 5 px on each side. How wide is it on screen, without the margin?
200 + 2×10 + 2×2 = 224 px. With margins it takes 224 + 2×5 = 234 px of space.
4. A page shows 3 columns on a computer but they are too thin on a phone. Fix it.
Wrap the columns in a flex container and add: @media (max-width: 600px) { .cols { flex-direction: column; } }. Below 600 px the columns stack. Also add <meta name="viewport" content="width=device-width, initial-scale=1">.
Common mistakes
- Forgetting the closing tag, e.g. writing <p> without </p>, so the layout breaks.
- Writing style inside HTML on every tag instead of one CSS file; changes then take hours.
- Leaving out the alt text on images; screen readers and search engines cannot understand them.
- Thinking JavaScript and Java are the same language. They are different.