Your first web page

What a web page really is

Open any website and press Ctrl+U (on a Mac, Cmd+Option+U). A wall of text appears. That text *is* the page. The browser read it and drew the page you saw.

The text is called HTML. It is ordinary words with tags around them. A tag is a word inside angle brackets, like <h1>. Tags tell the browser what each bit of text is: a heading, a paragraph, a list, a link.

You do not need special software to write HTML. You need a text editor and a browser, and your computer already has both.

Set up your folder

1. On the Desktop, make a new folder called mysite. Everything you build in this course lives here.
2. Open a plain-text editor. On Windows, Notepad. On a Mac, TextEdit — but first open its menu Format → Make Plain Text, or it will secretly save formatting and your page will not work. (If someone has installed Visual Studio Code on the computer, that is even better, and it is free.)
3. Type the page below, exactly as written, and save it inside mysite as index.html. The .html ending matters: if the editor tries to add .txt, choose "All files" and type the name with quotes: "index.html".

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, world</h1>
  <p>This is my first web page. I made it myself.</p>
</body>
</html>

Now open the mysite folder and double-click index.html. It opens in your browser. You should see a big heading and a sentence.

You just made a website. It lives on your computer only — nobody else can see it — and that is exactly right for now.

What each line does

• <!DOCTYPE html> tells the browser "this is modern HTML". It goes first, always.
• <html> … </html> wraps the whole page.
• <head> … </head> holds things *about* the page, like its title. Nothing in the head is drawn on the page.
• The two <meta> lines are settings. charset="utf-8" lets you type any character (₹, é, emoji) without it turning into gibberish. The viewport one makes the page fit a phone screen instead of shrinking a desktop page down. Copy both into every page you make.
• <title> is what the browser tab shows. Look at your tab now.
• <body> … </body> holds everything you can see.
• <h1> is the biggest heading. <p> is a paragraph.

Notice that nearly every tag comes in a pair: an opening tag <p> and a closing tag </p> with a slash. The pair wraps the text it describes. Forgetting the slash is the number one beginner mistake, and the browser will not warn you — it just draws something odd.

The habit: change, save, reload

This is the most important thing in the whole course:

1. Change something in the editor.
2. Save (Ctrl+S, or Cmd+S on a Mac).
3. Go to the browser and reload (F5, or Cmd+R on a Mac).

Do it now. Change "Hello, world" to your first name. Save. Reload. Then add a second <p> with a sentence about something you like. Save. Reload.

Every lesson from here on expects you to do this many times. Reading about HTML teaches you a little. Typing it and seeing what happens teaches you everything else.

Try it

• Change the <title> and watch the browser tab change.
• Remove the </h1> closing tag on purpose. Save, reload, and see what the browser does with the rest of the page. Put it back.
• Type a whole paragraph on one line, then the same paragraph split across five lines in the editor. Reload: the browser shows them the same way. Line breaks in your file do not make line breaks on the page. (Lesson 2 shows how to make a real line break.)