Now that we’ve covered what HTML is, what it stands for and its basic elements or tags, it’s time to create your first HTML page!
Before creating your first HTML page, ensure you have visited the following posts:
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.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width”>
<title>A simple HTML document</title>
</head>
<body>
<h1>Hello World!<h1>
<p>This is my first HTML page.</p>
</body>
</html>
Note
<!DOCTYPE html>
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.
<body>
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.
Example
“myfirsthtmlpage.html”
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.
Other HTML Editors
If you’re not keen on using your computer’s default text editor or Notepad++, according to Template Toaster, here are the Best Free HTML Editors in 2020:
- Notepad++ (Windows only)
- Adobe Dreamweaver CC
- CoffeeCup
- Aptana Studio 3
- NetBeans
- Bluefish
- Sublime Text
- Phase 5 HTML editor (Windows only)
- NoteTab (Windows + Linux)
- Atom
- BareBonesEdit (Mac only)
- CotEditor (Mac only)
- Brackets
- Komodo Edit
- TextMate (Mac only)
- UltraEdit
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.