How to Create a Website Using HTML on Notepad (With Example)

This article serves as a complete guide on How to Create a Website Using HTML on Notepad. Whether you’re a beginner or brushing up on basics, you’ll find detailed instructions, expert tips, and valuable insights to support your web development journey.

Creating your very own website might sound like something only tech experts or coders do. But what if I told you that you—yes, even with zero experience—can build a basic website using just two things: HTML and Notepad?

In this guide, I’ll walk you through exactly how to create a website using HTML on Notepad, with crystal-clear instructions, code examples, screenshots (optional), and extra insights that beginners truly need. This is more than a tutorial—it’s your first step into the world of web development.

Let’s take the first step!

Table of Contents

What is HTML and Why Should You Learn It?

HTML, or HyperText Markup Language, is the standard language used to build the structure of web pages. It’s like the bones of a body. While CSS adds style (clothes), and JavaScript adds movement (actions), HTML is what gives shape to your site.

Every website you visit—whether it’s Google, Amazon, or your favorite blog—is built on HTML. And learning how to write it, even in the simplest way using Notepad, helps you understand how websites truly work behind the scenes.

Why Use Notepad Instead of Other Tools?

There are dozens of fancy code editors out there—VS Code, Sublime Text, Atom—but here’s why Notepad is the perfect tool for beginners:

Benefits of Using Notepad:

Pre-installed on all Windows computers
No internet or setup required
No distractions, just raw HTML coding
Helps you learn line-by-line what each tag does
Ideal for learning by doing

It’s like learning to write before you learn to type. It builds a strong foundation.

How to Create a Website Using HTML on Notepad?

Let’s now build your first website from scratch. Don’t worry—I’ll explain everything in plain English.

Step 1: Open Notepad

Here’s how to open Notepad on any Windows PC:

Press Windows + R, type notepad, and hit Enter
OR
Click the Start Menu, type Notepad, and click to open

You now have your blank canvas ready.

Step 2: Write the Basic HTML Code

Now, let’s write your first web page!

Paste (or manually type) the following code into Notepad:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML webpage created using Notepad.</p>
  </body>
</html>

What does this code mean?

<!DOCTYPE html>– Tells the browser this is an HTML5 document
<html> – Begin your HTML page
<head> – Contains metadata (title, links, etc.)
<title> – The text shown on the browser tab
<body> – The visible part of the page
<h1> – A big heading (largest text)
<p> – A paragraph of text

Step 3: Save the File with the .html Extension

This part is important!

Follow these steps:

Go to File > Save As
Set Save as type to: All Files
In the filename box, type: index.html
Click Save

Make sure it ends with .html, not .txt, or it won’t work in the browser!

Step 4: Open the HTML File in Your Browser

Navigate to where you saved the file. Double-click it.

It opens in your browser, and just like that, you’ve created your first website!

You should see a heading and a paragraph like:

Hello, world!
This is my first HTML webpage created using Notepad.

Step 5: Add an Image, Link & More Elements

Let’s add some fun content.

Replace your old code with this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Profile</title>
  </head>
  <body>
    <h1>Rahman’s Website</h1>
    <p>I’m learning how to code using Notepad!</p>

    <img src="myphoto.jpg" width="300" alt="Rahman's Photo">
    <p>Check out my blog: <a href="https://www.oflox.com">Visit Oflox</a></p>
  </body>
</html>

Notes:

Put a real image (e.g. myphoto.jpg) in the same folder as your HTML file
Change the link to your blog or portfolio

Step 6: Add Basic Styling with CSS

Time to add a little design with internal CSS!

Update you <head> like this:

<head>
  <title>My Styled Page</title>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
      color: #333;
      text-align: center;
      padding: 30px;
    }
    a {
      color: #007bff;
      text-decoration: none;
    }
    img {
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
  </style>
</head>

Now, just refresh your browser—you’ll now see a neat, styled website!

Additional Elements to Try

Here are some more tags you can explore:

Tag	What It Does
<ul> / <li>	Creates bullet lists
<table>	Adds a table
<br>	Line break
<hr>	Horizontal line
<strong>	Bold text
<em>	Italic text

Try adding them and see the results!

Common Mistakes to Avoid

Beginners often face small issues that break the page. Here’s what to look out for:

Not closing tags (<p>)
Saving as .txt instead of .html
Incorrect file paths for images
Quotation marks missing around attributes (width=”300″)

Dear coder, please always double-check before refreshing the browser.

What’s Next After Notepad?

Once you’re confident with HTML in Notepad:

Try using Visual Studio Code (more features & colors)
Learn CSS and JavaScript next
Host your website for free on GitHub Pages
Start a portfolio or personal blog

FAQs:)

Q: Can I make a complete website with just Notepad?

A: Yes! You can create multi-page static websites. But for larger projects, advanced editors are better.

Q: Can I create a form or contact page?

A: You can create the form with HTML, but for form submissions, you’ll need backend help or third-party services like Formspree.

Q: Is HTML hard to learn?

A: Not at all! It’s one of the easiest programming languages to start with.

Conclusion:)

Learning how to create a website using HTML on Notepad is like learning how to ride a bicycle—it may seem basic, but it lays the foundation for everything ahead.

You’ve not only created a web page, but you’ve also taken your first steps into a new digital world of creativity, coding, and opportunity.

Read also:)

We’d love to hear from you—have you tried building your own HTML website using Notepad? Share your experience, questions, or feedback in the comments below!