How To Create an HTML File

Now that we have kicked off the HTML tutorial for beginners, and have the basics under our belt, it’s time to create an HTML file. Although we’ve already seen a complete HTML page in the introduction, you haven’t created one yourself yet. In this article, you’ll create an HTML file on your own computer and open it with a web browser. This will be your first, homemade web page. Let’s start!

Software to create an HTML file

The first step is to create a file on your computer with the .html extension. It’s important to use the right tool for this job. You can’t use a word processor, like OpenOffice or Microsoft Word to create HTML files. Such programs have their own markup language that is added to the document.

What you need instead, is something that can edit plain text files. Preferably, you use something specifically tailored to writing HTML. Specific HTML editors help you in a number of ways:

• They offer auto-indenting, making your document much more readable.
• With auto-completion, you have to type less. HTML editors will often add the closing tag automatically, for example.

Visual Studio Code

There are several options to choose from, and it mostly is a matter of taste or personal preference. Since I can’t cover all of them, and we have to start with something, I’ll go with what I think is best for most, and that is an application called VSCode. I would like you to start with VSCode for a number of reasons:

• It is free to download, and based on open-source code.
• It works on the big platforms: Windows, MacOS, and Linux (there’s even a limited browser based version).
• It’s fairly light weight, while still offering tons of features.
• There are countless plugins available that help you develop websites quicker.
• It also support CSS and JavaScript, which you’ll learn after learning HTML. In fact, it supports pretty much all the programming languages out there through plugins.
• It’s created and backed by Microsoft, so it’s unlikely that the software gets abandoned anytime soon.

For a detailed tour of VSCode, it’s best to take a little detour to my sister website, Python Land, where I already covered this tool extensively. I encourage you to read the following articles over there:

• Detailed instructions on how to install VSCode
• A tour of the VSCode interface
• What are VSCode extensions and how to install them

Obviously, you may skip the Python-specific stuff, but most of it is general information that also applies to you. Once you have VSCode installed and running, we can continue.

Please note that, although there are many HTML extensions for VSCode, we don’t need those for now. VSCode in itself is more than enough, and it helps to keep the interface clean and basic while you have so much to learn already.

Create an HTML file in VSCode

A VSCode window always shows one workspace. A workspace can, in turn, show multiple folders (or: projects) if you want it to. In turn, you can have multiple workspaces open, each in its own window. However, we’ll work on one project at a time. When doing so, one window with one workspace is enough.

Create a project

Creating a project is simple; it’s a directory that you open with VSCode. If you are on a terminal, and it doesn’t matter if this is on Linux, MacOS, or Windows, you can create a new project and open it with VSCode as follows:

$ mkdir wd_land_html_tutorial
$ cd wd_land_html_tutorial
$ code .

The code command is a handy shortcut to open a VSCode window. If you prefer, you can also open (and create) the folder from the menu: File -> Open Folder.

Once the project is opened, create a new file with new file button. It may be hidden, but it will appear once you hover your mouse over the project name in the explorer window:

Name the file my-first-page.html, or something else if you like. Just make sure to add the .HTML extension, so VSCode directly knows that this is an HTML file.

It’s good to know that you’ve done a lot of plumbing by now. It always takes a while to get set up properly, but once done and out of the way, you’ll be much more productive. And trust me that, with VSCode, you have a great tool at your disposal. It’s used to create much of the software, apps, and websites that you know and love.

Typing the HTML

Finally, we can start typing the actual HTML page. I’ll list what you have to type in below, but it’s important to enter the actual tags yourself. You’ll get a feel for how the editor works and helps you while doing so. And, more importantly, you’ll get more acquainted with the HTML language and its tags.

Here’s your first webpage, and feel free to modify it to your liking:

<!DOCTYPE html>
<html>
  <head>
    <title>My first webpage</title>
  </head>

  <body>
    <h1>Hello world</h1>
    <p>This is my first webpage. How are you doing?</p>
    <h2>This is a sub-header</h2>
    <p>And here's some more text.</p>
  </body>
</html>

If you followed my advice, you must have noticed how VSCode helped you by inserting closing tags automatically and indenting your code automatically.

One hint I want to share with you right away is how to format your HTML document manually. Try removing some of the indentations inside your file, and then press shift+alt+F. Did you notice that VSCode fixed the formatting?

Finally, save the file. You can do so using the file menu, or by pressing control+F (cmd+F on MacOS).

Opening a HTML file in a browser

It’s now time to open the file in your browser and see the result of all this labor! There are two ways to go about this.

1. You can go to the project’s folder, and double click the my-first-page.html file.
2. Press control+O (Windows, Linux) or cmd+O (MacOS) to open a file and browse to the my-first-page.html file. I tested this shortcut in Firefox, Edge, and Chrome.

The end result should look like this:

As you can see, the title (between title tags) gets shown as the title of the browser tab. The browser also uses it when someone bookmarks your page.

Congratulations on this achievement! It was a bit of work, but it’s always hard to get started with something new. You paved the way to learn more HTML tags and to start experimenting on your own. So let’s continue with the next article, where you’ll learn some of the most important tags.