HTML Editors

All you need to learn HTML is a basic text editor.

Use Notepad or TextEdit to learn HTML

Using specialized HTML editors, web pages can be created and modified. But for learning HTML, we advise using a straightforward text editor like Notepad (PC) or TextEdit (Mac). We think that a good way to learn HTML is to use a straightforward text editor. Simply follow the instructions below to construct your first website using Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 and up:

Activate the Start Menu (the window symbol at the bottom left on your screen). using Notepad.

Windows 7 and older:

Navigate to Start > Programs > Accessories to launch Notepad.

Step 1: Open TextEdit (Mac)

Open TextEdit in Finder > Applications.

To ensure that the application saves files appropriately, modify other options as well. “Plain Text” is the format option under Preferences.

Under “Open and Save,” select “Display HTML files as HTML code rather than formatted text.”

Open a new document and paste the code there.

Step 2: Write Some HTML Code

The following HTML code should be typed or copied into Notepad:

<!DOCTYPE html>
<html>
<body>

<!-- It will show the h1 tag and GeektoCode.com -->
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page

The document to your computer. In Notepad, choose File > Save as from the menu.

Set the encoding to UTF-8 and give the file the name “index.html” (which is the preferred encoding for HTML files).

NOTE- Both .htm and .html are acceptable file extensions. There is no distinction; the choice is yours.

Step 4: Check Out the HTML Page in Your Browser

Open the HTML file you saved in your preferred browser (double click on the file, or right-click – and choose “Open with”).

The outcome will represent this:

HTML-Editor-Output
Output

How to run HTML in Visual Studio Code

As a coding editor, you might use Visual Studio Code (VSC). Have you had trouble using VSC to review HTML files in real time?

To download goto: https://code.visualstudio.com/download

Live server extensions are something I’ve tried, and I’d like to talk about them.

HTML-Editor

A development local server with a live reload feature for static and dynamic pages can be launched by the live server.

The “Go Live” icon appears at the bottom once the extension has been installed, as shown in pic below:

HTML-Editor

Selecting the HTML file and clicking “Go Live” causes a local development server at 127.0.0.1:5500 to open it as shown below.

The windows can be set up as shown below, which will allow me to check the outcome in real-time.

Leave a Reply

Your email address will not be published. Required fields are marked *