Set up your tools and build your first page

By the end of this lesson you will have a real web page that you wrote by hand, saved on your computer and opened in a browser. Every later lesson in this course adds to the same project, so set up your tools carefully once.

Start with one idea

HTML stands for HyperText Markup Language. It labels the parts of a web page: “this is a heading,” “this is a paragraph,” and “this is a list.” A browser reads those labels and shows the page. You will write the labels in a plain-text file, then open that file in your browser.

Set up your tools

You need two free programs: a text editor and a web browser.

1. Editor. Install Visual Studio Code from code.visualstudio.com. It is free and runs on Windows, macOS and Linux. Any plain-text editor works too. On Windows, Notepad is fine. On a Mac, TextEdit works only after you choose Format, then Make Plain Text. Word processors such as Word or Google Docs do not work, because they add hidden formatting.
2. Browser. Use a current version of Chrome, Edge, Firefox or Safari.
3. Show file extensions. A file named index.html must really end in .html. On Windows, open File Explorer, choose View, then turn on File name extensions. On a Mac, open Finder, choose Settings, then Advanced, and tick Show all filename extensions.

Worked example: the club home page

Make a folder called community-club on your desktop or in your Documents folder. In VS Code choose File, then Open Folder, and pick that folder. Create a new file, paste the code below and save it as index.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Riverside Learning Club</title>
  </head>
  <body>
    <h1>Riverside Learning Club</h1>
    <p>Free evening workshops for adults who want to learn new skills.</p>
    <h2>What we offer</h2>
    <ul>
      <li>Beginner computer skills</li>
      <li>Writing clear emails</li>
      <li>Building a first website</li>
    </ul>
  </body>
</html>

To open it, double-click index.html in File Explorer or Finder. If it opens in an editor instead, right-click it and choose Open With, then your browser. You can also drag the file onto an open browser window. You should see a large heading, a sentence and a bulleted list of three items. The browser tab reads "Riverside Learning Club".

The club is invented. Use made-up names and details throughout this course, never a real person's information.

How the page works

HTML uses tags, labels written between < and >, to identify page parts. For example, <p>Free evening workshops...</p> is one paragraph element. Read it in three pieces: <p> starts the paragraph, the words are its content, and </p> ends it. The slash marks the closing tag.

• <!doctype html> tells the browser this is a modern HTML page.
• <html lang="en"> wraps everything. An attribute adds information to a tag. Here, lang="en" tells browsers and screen readers that the page uses English.
• <head> holds information about the page. charset lets the page show any character. The viewport line makes phones use their real screen width. <title> names the browser tab.
• <body> holds what the visitor sees. <h1> is the main heading, <h2> a section heading, <ul> an unordered list and <li> a list item.

Inspect the page with browser tools

Every browser has developer tools, panels that show the page’s HTML, styles, and errors. Press F12, or Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on a Mac. In Safari, first turn on Settings, then Advanced, then Show features for web developers. Open the Elements panel (called Inspector in Firefox) and click the h1 line. The heading lights up on the page. You will use these tools in every course from here on.

Your practice

1. Change the club name in both the <title> and the <h1>.
2. Replace the three list items with three workshops of your own.
3. Below the list, add an <h2> called "When we meet" and a paragraph with an invented day and time.
4. Save and refresh the browser (F5 or Cmd+R) after each change. Predict what will change before you refresh.

Expected result: the tab and the main heading show your new name, three of your workshops appear as bullets, and a "When we meet" section sits below them.

If something goes wrong

• The browser shows your code as plain text: the file was probably saved as index.html.txt. Turn on file extensions and rename it.
• Your change does not appear: check that you saved the file and that the browser is showing the same file you edited.

Check yourself

1. What is the difference between <title> and <h1>?
2. Where does a fourth workshop go?

Answers

1. <title> names the browser tab and the document. <h1> is the main heading visitors see on the page.
2. In a new <li> element inside the existing <ul>.

Next, you will add a second page and link the two together.