HomeOther Tutorials 〉 Microsoft Text Editor (Notepad) Tutorial | How to Write and Run HTML Code Easily

Microsoft Text Editor (Notepad) Tutorial | How to Write and Run HTML Code Easily !

Microsoft Text Editor (Notepad) Tutorial | How to Write and Run HTML Code Easily !

Summary

Looking for a simple way to start writing HTML code on your computer?

Microsoft Text Editor (Notepad) is a built-in tool in Windows that lets you write, save, and run HTML code easily. This blog post explains its importance, advantages, and limitations, and walks you through a step-by-step tutorial—from writing your first HTML page to running it in a browser. We also cover helpful keyboard shortcuts and related tools. If you're starting your web development journey, this is the perfect place to begin. The detailed blog post on the same is as follows.

Introduction

Are you new to coding and looking for a simple way to write and test your HTML code? Microsoft Text Editor, commonly known as Notepad, is a lightweight, built-in tool in Windows that can help you get started without installing any extra software. It’s perfect for beginners who want to understand how coding works from the ground up.

Importance of Microsoft Text Editor

The Microsoft Text Editor is crucial because it provides a clean, distraction-free environment where users can write code or text. It is available by default on all Windows systems, making it a reliable tool for quick edits and learning HTML basics.

Advantages of Using Microsoft Text Editor

  • Free and pre-installed in Windows
  • Simple interface ideal for beginners
  • Lightweight and doesn’t consume system resources
  • Best for learning the structure of code manually

Disadvantages of Using Microsoft Text Editor

  • No syntax highlighting for easier reading
  • Lacks advanced features like auto-completion
  • Not ideal for large projects

Step-by-Step Guide: Writing and Running HTML Code in Notepad

Step 1: Open Microsoft Notepad

Click on the Windows start menu, type Notepad, and hit Enter.

Step 2: Write HTML Code

Copy the below sample code and paste it into Notepad.

Example 📄

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph created using Notepad.</p>
</body>
</html>

Step 3: Save the File with .html Extension

  1. Click File > Save As
  2. In the Save as type dropdown, choose All Files
  3. Give your file a name like myfile.html
  4. Save it with encoding as UTF-8 (optional but recommended)

Step 4: Run the HTML File

Go to the folder where you saved the file, double-click on it, and it will open in your default browser. That’s it! You’ve just written and run HTML using Microsoft Text Editor.

Common Keyboard Shortcuts in Notepad

  • Ctrl + N: New document
  • Ctrl + O: Open file
  • Ctrl + S: Save file
  • Ctrl + A: Select all text
  • Ctrl + C / Ctrl + V: Copy / Paste
  • Ctrl + Z: Undo
  • F5: Insert date/time

Other Related Tips and Tools

  • Use Notepad (Wikipedia) for basic HTML, CSS, or JavaScript learning
  • Upgrade to Notepad++ for better features once you're comfortable
  • Use online HTML validators to check your code

Conclusion

Microsoft Text Editor (Notepad) may seem basic, but it’s a powerful learning tool for beginners in web development. It allows users to grasp the fundamentals of HTML without any distractions. Once you’ve mastered the basics, you can move on to advanced code editors for more complex projects.

Frequently Asked Questions (FAQs)

Can I use Notepad for writing other code like CSS or JavaScript?

Yes, you can. Just save the files with the correct extensions like .css for CSS and .js for JavaScript.

Is Notepad good for professional coding?

Notepad is best suited for learning and small projects. For professional work, consider tools like VS Code, Sublime Text, or Notepad++.

Can I use Notepad on Mac or Linux?

Notepad is a Windows-only tool. For Mac or Linux, alternatives like TextEdit or Gedit are available.

Why does my HTML file open as text instead of in the browser?

Make sure your file is saved with the .html extension and that All Files is selected in the Save As dialog.