How the web works

Every time you type a website’s address into a browser, three things work together: your browser, a server somewhere in the world, and the languages the page is written in. This lesson walks that path step by step; everything you learn later sits on this picture.

From address to page

1. You type an address, such as https://mashaalstudio.com. This address is called a URL.
2. The browser asks the Domain Name System (DNS) which server that name lives on — like finding a phone number from a name.
3. The browser asks that server for the page using HTTP (the s in https means the conversation is encrypted).
4. The server answers: first the HTML document, then the files that document names — CSS, images, JavaScript.
5. The browser reads the HTML, builds the page’s structure, applies the CSS and runs the JavaScript. Now you see the page.

The three languages of a page

• HTML is structure and content: what is on the page — headings, paragraphs, links, images, forms.
• CSS is appearance: colour, type, spacing and layout — the same content with different CSS looks like a different site.
• JavaScript is behaviour: what happens when you click, type or scroll.

See it for yourself

Press Ctrl+U on any page now (Cmd+Option+U on a Mac): you see that page’s HTML. F12 opens the browser’s developer tools; in the Elements tab you see the page’s structure live, and hovering a line lights up that part of the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A page</title>
  </head>
  <body>
    <p>Hello!</p>
  </body>
</html>