How to create an HTML website in Notepad is one of the easiest ways to understand what a web page is made of and how code appears in a browser. You only need a text editor, a browser, and a few basic HTML tags to get started.
What you need for your first HTML page
What you need for your first HTML page is a plain text editor and a browser to check the result. On Windows, the built-in Notepad works well, and on other systems any editor without text formatting is enough.
- a text editor without automatic formatting;
- a browser for opening the file;
- a folder where you will save the site;
- a basic understanding of the html, head, and body tags.
If the editor adds extra formatting, the code may not work correctly, so plain text mode is the safer choice than a more complex tool.
Basic HTML code to start with
Basic HTML code for a site in Notepad should include the document structure, the page title, and the main content. This minimal setup tells the browser where the page begins and what it should display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page created in Notepad.</p>
</body>
</html>This code can already be saved as a complete web page, and the browser will display the heading and text without any extra settings.
How to save the file so it opens as a website
How to save the file so it opens as a website depends on the .html extension and the right encoding. If you save the document as a regular text file, the browser will not treat it as a web page.
- Open Notepad and paste in the HTML code.
- Click File → Save As.
- In the file name field, type something like index.html.
- In the file type field, choose All Files.
- If possible, select UTF-8 encoding.
After saving, check the result: the file should open in a browser with a double-click, not in Notepad. If you see text instead of a page, the problem is usually the file extension or the fact that it was saved as .txt.
How to add headings, text, and images
How to add headings, text, and images to an HTML page depends on the tags you use inside body. For a first site, a heading, a few paragraphs, and one image are usually enough.
Text blocks
Text blocks in HTML are created with the h1, h2, p, and ul tags. They help structure the page so it is easier to read.
Images
Images in HTML are added with the img tag and the path to the file. If the image is in the same folder as the site file, the path is simple, for example img src=”photo.jpg”.
After adding an image, refresh the page in the browser and check whether the file is really in the location you specified. If the image does not appear, first check the file name, extension, and letter case in the path.
Common beginner mistakes
Common beginner mistakes in HTML are usually not about the code itself but about small details when saving or writing tags. Those small details are often what stop a page from opening correctly.
- the file was saved as .txt instead of .html;
- errors in brackets or closing tags;
- wrong encoding, which breaks non-English characters;
- an incorrect image path;
- spaces and special characters in the file name that make it harder to open.
If the page does not work, open the file again in Notepad and compare the code line by line. The fastest check is to simplify the page to the minimum and see whether the basic template opens without errors.
What to do after your first working page
What to do after your first working page depends on whether you want to keep learning or build a simple site for yourself. The next step is to add styling with CSS, create a few pages, and learn how to link them together.
It helps to try three practical things right away: change the tab title, add a list with several items, and create a second page with a link back to the home page. If everything opens in the browser without errors, the basic site structure is working correctly.
For a first experience, that is enough: Notepad shows how HTML looks without extra tools, and the browser confirms the result immediately. That is the simplest way to understand the basics of web development.
