HTML Text Editor | HTML In Notepad
An HTML document is nothing but a text file, so we can use any text editor to create an HTML page.
An HTML text editor is a software application that allows us to create, edit, and save the HTML code. However, it is also possible to write HTML code using a simple text editor like Notepad or Notepad++.
If you are a beginner in leaning HTML, the basic text editor for you is Notepad (for Windows) or TextEdit (MacOS). So, let’s write the HTML code in Notepad++ to create a web page.
Writing First HTML Code with Notepad++
Notepad++ is a simple and easy-to-use text editor especially suitable for beginners who want to learn HTML. It is a free, open-source, general-purpose editor that supports highlights the syntax of HTML code.
It is developed for text editing, especially for programming language and is available in all versions of Windows on your computer system. Notepad++ text editor provides a lot of interesting features that are as follows:
- Syntax highlighting
- Multiple files editing with tabs
- Multi-language supports
- Macros
- Page preview
- Forces word wrap
- Line numbering
- Undo/redo
- Spell checker
- Full drag and drop support
- Templates and many more.
In addition to Notepad, we need a web browser such as Internet Explorer, Google Chrome, Mozilla Firefox, Opera, etc. to see the working of HTML code.
We recommend that you should upgrade your web browser to the latest, current stable version. If Notepad++ is not installed on your computer machine, then first download and install it from the below link provided.
Download Notepad++ software: Notepad++
Hope that you have downloaded Notepad on your computer system. Now we will learn how to write your first HTML code with the help of Notepad. In other words, we will learn how to create a basic webpage with HTML in Notepad.
Following are the steps to create a webpage with HTML using Notepad. They are as follows:
Step 1: On your computer system, just click on the Start button to open Notepad++ and then click on Notepad if the shortcut icon for Notepad++ is not on the desktop. You can do this by typing “Notepad” in the Windows search bar.
Now write the following code snippet in your document.
<DOCTYPE html>
<html>
<head>
<title>My first HTML webpage</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first HTML web page.</p>
</body>
</html>
Step 2: After writing the above HTML code, you need to save it with a .html extension. To save file, navigate File menu -> Save. A Save As dialog box will open on your computer system.
Step 3: Enter a name for your file name “myFirstHTMLPage” and Save as type: select extension “*.html; *.htm;” option and then click on the save button as shown in the below screenshot. Save your HTML file to a location on your computer where you can easily find it.
Note that when you will save the file for the first time, by default, Notepad adds a .txt extension to the document name.
Step 4: To view the output of the above code snippet, go to the location where you saved the HTML file. I have saved “myFirstHTMLPage” html file on the desktop.
Now click on the created HTML file icon to open the file in your web browser. Your default browser will open the web page, where you will get the output of the HTML code.
Congratulations! You’ve just built your first HTML webpage using Notepad.
What is an HTML Text Editor?
In the above section, we have written HTML code using a simple text editor like Notepad and displayed the output on the default browser. Now we will move on the HTML text editor.
An HTML text editor is a software application that provides many features like edit, save, syntax highlighting, code autocompletion, error checking, etc. It makes our code high quality, and more efficient.
Syntax highlighting makes HTML code easier to read and understand because it highlights different parts of the code with different colors, making it simpler to see what is happening in the code.
An HTML text editor save developers time, and also helps to avoid common mistakes. Error checking feature helps us to identify errors in our code before we save it. This saves our time and reduce the risk of mistakes.
Code auto-completion feature suggests code completions as we type. It helps us to save time and reduce the risk of common errors. Hence, an HTML text editor provides many benefits for us and is also important for web development.
Types of HTML Text Editors
There are many types of HTML text editors available in the online market. They as:
- Integrated Development Environments (IDEs) like Visual Studio Code, Sublime Text, and Atom.
- Online HTML text editors like CodePen and JSFiddle.
WYSIWYG editors like Dreamweaver.
Each HTML text editor contains its own strengths and weaknesses. Some are more powerful and feature-rich, while others are simple and easier to use.
You should choose an HTML text editor that meets your of necessity and matches your skill level. We will choose Sublime Text editor to write HTML code.
Writing HTML code with Sublime Text Editor
To work with Sublime Text editors, first you need to download and install from the internet on your computer. To download Sublime Text editor for Windows 10, go to the link: Download Sublime Text Editor
Once your download is finished, you need to install it on your computer system. After the complete installation of Sublime text editor, you need to follow the simple steps to use it. The steps are as:
Step 1: To open Sublime Text editor, navigate to Start screen ⤏ type Sublime Text⤏ Open it. To open a new page, press CTRL+N.
Step 2: To save your page in Sublime Text editor, press Ctrl+S or go to File option ⤏ save. Use .html or .htm extension to save your file. We recommend saving the file first, then write the code because sublime editor will give you suggestions to write code after saving the page.
Step 3: Write the following code in Sublime Text editor.
Step 4: To execute written HTML code or see the output this code, just right click by mouse on sublime text page and click on “Open in Browser” open. The output of the HTML code will appear in the default web browser.
Note that you can execute your HTML document or file in any browser, but there are some tags which some web browsers do not support.
In this tutorial, you have learned about how to create your first webpage in HTML text editors, like Notepad and Sublime Text. You have known why an HTML Text Editor is crucial for web development and how to choose the best one for your needs. I hope that you will have understood all the basic points of creating your first webpage and writing HTML code.
Thanks for reading!!!
