Creating and Opening Your First HTML File

Two programs are enough to build a web page: a text editor, where you write the HTML, and a web browser, where you see the result. You already have a browser, and every computer comes with a simple text editor. Nothing has to be bought or installed, and you do not need an internet connection to see your page. The bakery page from the previous lesson will be your first file, and by the end of the lesson it will open in your browser.

Choosing a Text Editor

An HTML file must contain only the characters you type, with nothing hidden between them. A program that saves exactly that is a plain-text editor. Notepad on Windows is one, and so is TextEdit on a Mac after you choose Format, then Make Plain Text. TextEdit also shows a saved HTML file as a formatted page when you open it again, unless you turn on "Display HTML files as HTML code instead of formatted text" under Open and Save in its settings.

A word processor such as Microsoft Word or Google Docs does not work. It saves fonts, margins and other formatting information along with your text, so the file is no longer plain text. It also changes straight quotes into curly ones as you type. HTML accepts only straight quotes around a value, so if the quotes in <html lang="en"> turn curly, the browser treats them as part of the value, and the language of the page is no longer en.

Most people who write HTML use a code editor: a plain-text editor with extra help for programmers, such as colors that separate tags from text. Visual Studio Code, from Microsoft, is one free example that runs on Windows, macOS and Linux. Any plain-text editor works for this course, however, so use whichever one you have.

Making a Folder for the Site

A website is a set of files: pages, images and, later, other files that the pages use. Keep them together in one folder from the start, because the links and images in later chapters find each other by their places in that folder.

Create a folder named bakery-site, for example inside your Documents folder. Write the names of folders and files in lowercase letters, with hyphens instead of spaces. Many web servers treat Index.html and index.html as two different files, and a space in a file name becomes %20 in a web address, so this habit prevents problems when the site goes online.

Saving index.html

Open your editor, create a new file, and type the bakery page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya's Bakery</title>
  </head>
  <body>
    <h1>Maya's Bakery</h1>
    <p>Fresh bread every morning, from 7 a.m.</p>
  </body>
</html>

Most of these lines are new. The next lesson explains each of them, so for now copy them exactly as they are.

Choose Save, open the bakery-site folder, and name the file index.html. If TextEdit asks which extension to use, choose "Use .html". The part after the last dot, .html, is the file extension. It tells the computer that the file holds HTML, so the computer opens it in a browser when you double-click it. The name index has a meaning too: when an address names only a folder, most web servers send the file called index.html from that folder. For this reason the home page of a site is usually index.html.

Save the file as UTF-8, a way of storing text that can hold the letters of every language. Visual Studio Code and current versions of Notepad use UTF-8 by default. If your editor offers an Encoding choice in the Save dialog, choose UTF-8.

The Hidden .txt Trap on Windows

Windows hides the extension of many file types by default. So a file that is really called index.html.txt appears in File Explorer as index.html, and you cannot tell the difference. This happens when you create the file with New, then Text Document, and rename it, or when the editor's "Save as type" box is set to text documents and the editor adds .txt itself.

The sign of the trap is that a double-click opens the file in Notepad instead of a browser. To see the real name, open File Explorer and choose View, then Show, then File name extensions. If the name ends in .txt, rename the file to index.html, and in future choose "All files" as the type when you save.

Opening the File in a Browser

Double-click index.html in the folder. Your default browser opens it and shows the page. You can also drag the file from the folder onto an open browser window. Either way, the browser shows this:

Browser tab:   Maya's Bakery

Maya's Bakery                              (large, bold heading)
Fresh bread every morning, from 7 a.m.

Look at the address bar. Instead of an address that starts with https://, it shows one that starts with file:///, followed by the place of the file on your computer. On Windows, for a user named student, the address is file:///C:/Users/student/Documents/bakery-site/index.html. On a Mac it is file:///Users/student/Documents/bakery-site/index.html. Some browsers hide the file:/// part until you click the address bar.