Follow our step-by-step guide below to build your first page.
Step 1: Install or Open an HTML Editor
In this step, you can make use of two options:
- Plain Text Editor: You can make use of your computer’s plain text editor which should be installed already.
- Install Notepad++: You can also install Notepad++, a free text and source code editor available to users with Microsoft Windows. This free software editor is great as it allows you to have multiple tabs open to work in whereas the computer’s plain text editor/notepad only allows you to have one window open.
Click here to download the software.
Step 2: Add the Basic HTML Code
Type in the code below. Ensure you place each item on a separate line, like the layout below.
<meta name=”viewport” content=”width=device-width”>
<title>A simple HTML document</title>
<p>This is my first HTML page.</p>
Although <!DOCTYPE html> is included with the rest of the HTML elements, it’s not actually HTML code but the document type declaration. It tells the web browser that the document loaded is an HTML5 document.
Ensure you type it as DOCTYPE and not doctype as it is case-sensitive.
<head> + <title>
If you read our previous articles at the top, you know by now that the head element allows you to store information about the document, like the title of the document, etc.
The body element contains the actual content like paragraphs, images, etc.
Step 3: Save the File
When saving your file, you must ensure you add “.html” at the end.
Without “.html”, your document will be saved as a normal text or “.txt” file.
In Notepad++, you have the option to make the file an HTML file. Simply navigate to “Language” in the menu, go down to “H”, then select “HTML”. See below.
Step 4: Open the File
Once you have saved the file, navigate to where it’s stored on your computer and double click on it. It will be opened in your default web browser.
In Notepad++, simply navigate to “View” in the menu, “View Current File In”, and choose your web browser.
By now you’ve learned what HTML is, what elements or tags are, attributes, etc. and how to create your first HTML page.
Bookmark our blog page to stay up to date with our HTML series to ensure you continue learning about the wonderful language.