Web Technologies and Standards

Welcome, students 👋 In this lesson, you will explore how websites and web apps work behind the scenes, why standards matter, and how computers, browsers, and servers cooperate to deliver content across the internet. By the end, you should be able to explain key web technologies, describe the role of standards in making the web compatible and accessible, and apply IB Computer Science HL reasoning to real-world web systems. You will also see how this topic fits into the broader Option Topic Bank because it connects computing theory with practical design decisions, interoperability, and user experience.

What the Web Is and Why Standards Matter

The World Wide Web is a system for accessing and sharing information using browsers and web servers 🌐. It is not the same as the internet itself. The internet is the global network of connected computers, while the web is one service that runs on top of that network. When you open a page in a browser, the browser sends a request to a server, and the server sends back data such as HTML, CSS, JavaScript, images, and videos.

Standards are the agreed rules that let different systems work together. Without standards, one browser might display a page completely differently from another browser, and web pages could break depending on the device or operating system. Standards make the web more interoperable, meaning that different technologies can communicate successfully.

A key idea in web technologies is separation of concerns. This means that content, presentation, and behavior are often kept in different layers. HTML provides structure, CSS controls appearance, and JavaScript provides interactive behavior. This separation makes code easier to manage, test, and update. For example, a school website may use HTML for headings and paragraphs, CSS for colors and layout, and JavaScript for a menu that opens when a student taps it on a phone 📱.

Core Web Technologies: HTML, CSS, and JavaScript

HTML stands for HyperText Markup Language. It is the main language for structuring web pages. HTML uses elements such as $<h1>$, $<p>$, $<a>$, and $<img>$ to represent headings, paragraphs, links, and images. The browser reads the HTML and builds a document object model, or DOM, which is a tree-like structure that represents the page. The DOM is important because JavaScript can use it to read or change page content dynamically.

CSS stands for Cascading Style Sheets. It controls how HTML elements look. CSS can set font size, color, margins, spacing, and layout. The word “cascading” means that styles are applied according to rules of priority. For example, if a page style says all paragraphs are blue but a specific paragraph is also given a class that makes it red, the more specific rule may win. This helps developers customize parts of a page without rewriting everything.

JavaScript is a programming language used to create interactive web features. It can respond to clicks, check form data, update the DOM, and make network requests without reloading the entire page. For example, an online quiz can use JavaScript to check an answer instantly and display feedback such as “Correct” or “Try again” ✅. This improves user experience because the page can react quickly.

A real-world example is an online shopping site. HTML creates the product titles and prices, CSS makes the layout attractive and responsive, and JavaScript updates the cart total when a customer adds an item. These three technologies work together to build modern web experiences.

How Browsers Communicate with Servers

When students enters a web address, the browser uses the domain name system, or DNS, to find the correct server. DNS translates a human-readable domain name into an IP address. After that, the browser sends an HTTP or HTTPS request. HTTP stands for HyperText Transfer Protocol, and HTTPS is the secure version that uses encryption to protect data while it travels across the network.

A request contains information such as the type of action needed. A common example is a $GET$ request, which asks for data from the server. A form submission might use a $POST$ request, which sends data to the server, such as login details or survey answers. The server processes the request and sends back a response, often with a status code. A status code of $200$ means success, while $404$ means the page was not found.

This request-response model is central to web technologies. It helps explain why a page may load slowly, fail to open, or redirect to another page. If the server is busy, the network is congested, or the URL is incorrect, the browser may not receive the expected response. In IB Computer Science HL, you should be able to explain these outcomes clearly and connect them to the underlying communication process.

Standards, Accessibility, and Cross-Platform Design

Web standards are technical specifications that define how web technologies should behave. Important organizations include the World Wide Web Consortium, or W3C, and the WHATWG, which helps maintain the HTML Living Standard. Standards are important because they reduce incompatibility. If all browsers follow the same rules closely, a site is more likely to work on different devices and browsers.

Standards also support accessibility. Accessibility means designing web content so that people with different abilities can use it. Examples include using semantic HTML, providing alternative text for images with $alt$ attributes, ensuring enough color contrast, and allowing keyboard navigation. A student who cannot use a mouse should still be able to move through a site with the keyboard. A screen reader should be able to interpret page structure if headings and labels are written properly.

Responsive design is another important idea. A responsive website adapts to different screen sizes using flexible layouts, relative units, and media queries. For example, a class page might display three columns on a desktop but stack into one column on a phone. This matters because people use many devices to access the web, and standards help ensure that a page remains usable across them.

In an IB exam question, you may be asked to evaluate whether a website follows good standards. A strong answer could mention semantic structure, accessibility features, browser compatibility, and clear separation of content and style. These are not just design preferences; they improve usability, maintainability, and inclusion.

Common Web Technologies in Practice

Besides the core front-end technologies, many web systems use other tools and standards. Cookies are small pieces of data stored by the browser and used to remember information such as login sessions or preferences. A session allows a website to recognize a user across multiple requests without requiring repeated login on every page.

APIs are also common in modern web development. An API, or application programming interface, allows one program to request data or services from another. A weather website may use an API to fetch the current temperature from a remote server. This often involves sending and receiving data in formats such as JSON, which is lightweight and easy for programs to parse.

Client-side and server-side processing are also important. Client-side code runs in the browser, while server-side code runs on the server. A form that highlights invalid email input immediately is using client-side validation. A website that checks whether a password is correct after submission is using server-side processing. Good systems often use both. Client-side checks can improve speed and feedback, while server-side checks help enforce security and data integrity.

For example, when students signs into a school portal, the browser may send a $POST$ request with credentials over HTTPS. The server verifies the details, creates a session, and sends back a page with personalized information. This combines communication, security, and state management.

Applying IB Computer Science HL Reasoning

IB Computer Science HL often expects you to explain not just what a technology does, but why it is useful and what trade-offs it creates. For web technologies, a common reasoning pattern is to compare alternatives.

For instance, client-side validation is fast because it happens before data is sent to the server, but it should not be trusted alone because users can disable scripts or alter requests. Server-side validation is more secure because it can reject invalid or malicious input, but it may be slower because data must travel to the server first. A complete system usually combines both.

Another reasoning example involves standards and compatibility. A site that uses only standard HTML and CSS is more likely to work in many browsers. However, a developer may still need to test specific browser behavior because implementations can differ slightly. This is why web development often includes testing on multiple devices and browsers.

A useful exam-style example is the following: a school wants an online homework portal that works for students using laptops, tablets, and phones. The best solution should use responsive design, semantic HTML, accessible forms, HTTPS for security, and server-side validation for submissions. This shows how web technologies are selected to meet real requirements.

Conclusion

Web technologies and standards are essential because they make the web usable, compatible, secure, and accessible. HTML structures content, CSS shapes presentation, and JavaScript adds interactivity. Browsers and servers communicate using requests and responses over protocols such as HTTP and HTTPS. Standards from organizations such as W3C and WHATWG help web pages work across platforms and devices. In the broader Option Topic Bank, this topic shows how computing systems rely on shared rules and design choices to serve real users in the real world. If you can explain these ideas clearly and use examples, students, you are thinking like an IB Computer Science HL student 🧠

Study Notes

The web is a service on the internet, not the same thing as the internet.
HTML provides structure, CSS provides presentation, and JavaScript provides behavior.
The browser builds the DOM from HTML, which JavaScript can modify.
DNS converts domain names into IP addresses.
HTTP and HTTPS are used for browser-server communication; HTTPS includes encryption.
A $GET$ request asks for data, while a $POST$ request sends data to the server.
Common status codes include $200$ for success and $404$ for not found.
Web standards improve interoperability, maintainability, and cross-browser compatibility.
Accessibility features include semantic HTML, $alt$ text, keyboard navigation, and good color contrast.
Responsive design helps pages adapt to different screen sizes.
Cookies and sessions help websites remember users and maintain logins.
APIs let web systems exchange data with other services, often using JSON.
Client-side validation is fast, but server-side validation is necessary for security.
IB questions often ask you to explain benefits, limitations, and trade-offs using real examples.