How to Make an HTML File

BormJozy August 21, 2024 6:20 am 4

We now know what HTML looks like. So, how do we put it into action? As I said, a web page is just an HTML file that is read by a browser. So, let’s make an HTML file.

To create an HTML file, you’ll need a text editor. A text editor is a software program for writing code. Since an HTML file is in standard text format, any basic text editor will work for this tutorial.

Your first step will be to download a free text editor. I recommend a text editor with syntax highlighting, which displays the code in different colors making it easier to read. Notepad++ is a good free text editor for Windows, but the best i will recommend for window is Visual Studio Code Editor and Sublime Text is a popular option for Mac (and my personal preferred text editor).

Install the text editor, then open it. When you open the text editor, you’ll likely see an editor window that looks something like this.

With this editor window open, copy the HTML template below and paste it into the text editor window.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>My HTML Page</title>
   </head>
   <body>
      <h1>My First Heading</h1>
      <p>My first paragraph.</p>
   </body>
</html>

Let’s break down what each section of

this code means:

We start with the doctype declaration. This is a special tag that tells the browser that the file is an HTML file. To start, we’ll need to declare the type of document as HTML. The <!DOCTYPE html> tag is placed on the very first line of any HTML file.
The <html> element follows the doctype declaration. This is also called the “root” element of the document because it contains all other elements — </html> is the final closing tag of the document. Within the opening tag also has a lang (language) attribute, which tells screen readers what language the document is in, making the page more accessible.
Inside <html>, there are two main parts of the document: the head section and the body section. <head> contains meta-information about the page — the browser does not display this information to users. <body> contains all page content that users can see, like text and images.

You’ll also notice that the <head> and <body> tags are indented here. This visually indicates to us that these tags are placed inside, or “nested” in, the <html> tags. While indenting isn’t necessary and makes no difference in how the browser renders the document, it’s still common practice to indent your HTML for better readability.

Anyways, continuing on:

In the head section, we’ve named our page with the <title> element. The title appears, among other places, in the browser tab and in search engine results.
In the body section, we have two elements: a paragraph element and an H1 (heading 1) element. H1s are used as the primary heading of the page, usually to mark the main title of the page.

With this HTML code pasted into the window, save the file as “index.html” on your desktop. “index.html” is the conventional file name for a website’s homepage HTML file.

After saving the file, you’ll be able to open it in your web browser. You can double-click the file, right-click and choose Open, or drag and drop the file icon into an open browser window. It will look something like this in your browser:

And there it is, your first HTML page! Yes, it’s pretty basic looking, but that’s intentional. HTML is purely for the content of a page. It creates a simple base upon which you can add styling with another language called CSS. With CSS, you can customize your styling and layouts, changing the color, font, and alignment of elements.

Once you’re comfortable with basic HTML, check out our full CSS tutorial to learn how to make your page come to life.

CATEGORIES HTML