How the Web Works and Your First HTML Page

From address to page, step by step

The internet is the global network of connected computers. The World Wide Web is one thing that runs on it: a huge set of linked pages. Email and online games use the internet too, but they aren't the web.

Tim Berners-Lee proposed the web in March 1989 while working at CERN, a physics lab in Switzerland. His ideas of addresses, links and a simple page language are still how it works today.

1. You enter a URL. A URL (Uniform Resource Locator) is a page's full address, like https://jugami.com/school/. It names the protocol (https), the domain (jugami.com) and the path (/school/).
2. DNS finds the server. Computers find each other by number, called an IP address. The Domain Name System (DNS) works like a phone book: it turns the name jugami.com into that number.
3. The browser sends a request. Your browser is the client. It sends an HTTP request (HyperText Transfer Protocol) to the server, a computer whose job is to hand out files. The "s" in HTTPS means the conversation is encrypted.
4. The server responds. It sends back a status code, such as 200 OK (here you go) or 404 Not Found (no such file), plus the file itself. The data travels in small chunks called packets that get reassembled on your end.
5. The browser renders the page. It reads the HTML, then requests any extra files the HTML points to, like CSS, images and JavaScript, and paints the result on screen.

What HTML actually is

HTML (HyperText Markup Language) is not a programming language. It's a markup language: it labels the parts of a document so the browser knows what each part is.

You label things with tags in angle brackets. Most come in pairs: an opening tag and a closing tag with a slash. Together with the content between them, they make an element.

<h1>My Favorite Band</h1>
<p>They play <strong>loud</strong> music.</p>

<!DOCTYPE html>

The first line. Tells the browser to use modern HTML rules.

<html>

Wraps the whole page.

<head>

Information about the page, like its <title> (the text on the browser tab). Not shown in the page body.

<body>

Everything visitors see.

<h1> to <h6>

Headings, from most to least important. Use one <h1> per page.

<p>, <ul>, <li>

Paragraph, bulleted list, list item.

<a href="...">

A link. The href is an attribute: extra information inside the opening tag.

<img src="..." alt="...">

An image. It has no closing tag. The alt text describes the image for people using screen readers.

Notice the design idea: HTML says what something is (a heading, a list). How it looks is the job of CSS, which comes in a later unit.

Hands-on: build your first page

You only need a plain text editor (Notepad on Windows, TextEdit on Mac set to "plain text", or any code editor) and a browser. About 20 minutes.

1. Make a new folder called my-site. Inside it, create a file named index.html.
2. Type this starter code (typing it beats pasting; you'll learn the shapes):

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>About Me</title>
   </head>
   <body>
     <h1>Hi, I'm Sam</h1>
     <p>I like drawing and soccer.</p>
     <h2>Three things I'm into</h2>
     <ul>
       <li>Comics</li>
       <li>Cooking</li>
       <li>Music</li>
     </ul>
     <p>Learn more on <a href="https://developer.mozilla.org/">MDN Web Docs</a>.</p>
   </body>
   </html>

3. Save, then open index.html in your browser (double-click it, or drag it onto a browser window).
4. Make it yours: change the name, the paragraph and the list. Save and reload to see each change.
5. Challenge: add a second <h2> section, and break one closing tag on purpose. What does the browser do? Then fix it.

Your page loaded from a file, not a server, so steps 2 to 4 of the lesson were skipped. Publishing it on a server is a later unit.

Try the interactive editor at jugami.com/web-design/how-the-web-works/

Self-guided quiz

Five questions. Pick an answer for each, then check your score. Nothing is recorded.

Talk about it

• On 30 April 1993, CERN put the web software in the public domain so anyone could use it for free. How might the web be different today if every website owner had to pay a license fee?
• HTML separates what content is from how it looks. Why might that help someone using a screen reader?
• Think of a site you use every day. What happens, step by step, when it fails to load?

Sources

• CERN, "The birth of the Web" (proposal in March 1989; CERN put the web software in the public domain in April 1993).
• Tim Berners-Lee, "Information Management: A Proposal" (CERN, March 1989; W3C archive copy).
• MDN Web Docs, "How the web works".
• MDN Web Docs, "HTTP response status codes".
• WHATWG, "HTML Living Standard".

Credits: diagram and share image are original Jugami artwork.