HTML Editors and Basic Webpage Creation

After learning the introduction to HTML, the next important step is understanding how to write and run HTML code using editors and web browsers.

In this article, we will learn:

• What an HTML editor is

• Types of editors

• How to create and save HTML files

• How browsers execute HTML

• Step-by-step webpage creation

• First practical HTML programs

---

What is an HTML Editor?

An HTML editor is software used to write and edit HTML code.

It helps developers:

• Create webpages

• Edit code

• Save HTML files

• Test webpages in browsers

HTML code can even be written in a simple text editor.

---

Types of HTML Editors

HTML editors are mainly divided into two categories.

Type	Description
Text Editors	Write code manually
WYSIWYG Editors	Design webpages visually

---

1. Text Editors

Text editors are used to write HTML code manually.

Examples:

• Notepad

• Notepad++

• Visual Studio Code

• Sublime Text

Popular editors include Visual Studio Code and Notepad++.

---

Advantages of Text Editors

• Lightweight

• Fast

• Better control over code

• Easy debugging

• Preferred by professional developers

---

2. WYSIWYG Editors

WYSIWYG means:

What You See Is What You Get

These editors allow visual webpage designing without writing much code.

Examples:

• Adobe Dreamweaver

• Webflow

---

Advantages of WYSIWYG Editors

• Beginner friendly

• Faster visual design

• Drag-and-drop support

---

Best HTML Editor for Beginners

For beginners, the most recommended editor is:

Visual Studio Code

Why?

• Free

• Fast

• Extensions support

• Auto-completion

• Error highlighting

Official website:

Visual Studio Code

---

What is a Web Browser?

A web browser is software used to display webpages.

Examples:

• Google Chrome

• Mozilla Firefox

• Microsoft Edge

The browser reads HTML code and converts it into a visible webpage.

---

How HTML Works

Step-by-Step Process

Step 1: Write HTML Code

You create HTML code in an editor.

Step 2: Save File

Save the file with .html extension.

Example:

index.html

Step 3: Open in Browser

Double-click the file.

Step 4: Browser Renders the Page

The browser interprets HTML tags and displays the webpage.

---

Creating Your First HTML Page

Step 1: Open Notepad

Open:

• Notepad

• VS Code

• Any text editor

---

Step 2: Write HTML Code

<!DOCTYPE html>
<html>

<head>
    <title>My First Webpage</title>
</head>

<body>

    <h1>Hello World</h1>

    <p>Welcome to HTML programming.</p>

</body>

</html>

---

Step 3: Save the File

Click:

• File → Save As

Save as:

index.html

Important:

• Use .html extension

• Select "All Files" if using Notepad

---

Step 4: Run the File

Double-click the file.

The browser will open the webpage.

---

Output

Hello World

Welcome to HTML programming.

---

Understanding the Program

<!DOCTYPE html>

Defines HTML5 document.

<html>

Root element of webpage.

<head>

Contains webpage information.

<title>

Browser tab title.

<body>

Visible webpage content.

<h1>

Main heading.

<p>

Paragraph.

---

HTML File Extensions

Extension	Purpose
.html	HTML webpage
.htm	Older HTML extension

Both work similarly.

---

HTML Document Structure Visualization

HTML Document
│
├── Head Section
│     ├── Title
│     └── Metadata
│
└── Body Section
      ├── Heading
      ├── Paragraph
      ├── Image
      └── Links

---

Common Mistakes Beginners Make

1. Forgetting Closing Tags

Wrong:

<p>Hello

Correct:

<p>Hello</p>

---

2. Wrong File Extension

Wrong:

index.txt

Correct:

index.html

---

3. Saving in Rich Text Format

Always save as:

• Plain text

• All files type

---

4. Typing Errors in Tags

Wrong:

<h1>Hello</h2>

Correct:

<h1>Hello</h1>

---

HTML Comments

Comments are notes ignored by browsers.

Syntax:

<!-- This is a comment -->

Example:

<!-- Main heading -->
<h1>Welcome</h1>

---

Why Comments are Useful

• Explain code

• Improve readability

• Help debugging

• Organize large webpages

---

Basic HTML Page with Comments

<!DOCTYPE html>
<html>

<head>

    <!-- Webpage title -->
    <title>Student Website</title>

</head>

<body>

    <!-- Main heading -->
    <h1>Welcome Students</h1>

    <!-- Paragraph -->
    <p>This webpage is created using HTML.</p>

</body>

</html>

---

HTML Case Sensitivity

HTML tags are not case-sensitive.

Both work:

<H1>Hello</H1>

<h1>Hello</h1>

But lowercase tags are recommended.

---

HTML Best Practices

1. Use Proper Indentation

Good formatting improves readability.

Example:

<body>
    <h1>Hello</h1>
</body>

---

2. Use Meaningful Titles

Good:

<title>Online Book Store</title>

Bad:

<title>Page1</title>

---

3. Keep Code Organized

• Use comments

• Maintain spacing

• Use proper nesting

---

Simple Student Information Webpage

<!DOCTYPE html>
<html>

<head>
    <title>Student Profile</title>
</head>

<body>

    <h1>Student Information</h1>

    <p>Name: Rahul Sharma</p>

    <p>Course: BCA</p>

    <p>College: ABC College</p>

</body>

</html>

---

Output Explanation

The browser displays:

• Main heading

• Student details

• Structured content

This is the foundation of webpage creation.

---

Advantages of Learning HTML Practically

• Better understanding

• Improves coding speed

• Helps in web development

• Makes debugging easier

---

Real-World Use of HTML Editors

Web developers use editors daily for:

• Website development

• Blogging

• Portfolio creation

• Web applications

• Landing pages

Companies like Microsoft and Google use advanced development environments for web projects.

---

Conclusion

HTML editors and browsers are essential tools for web development. Learning how to create, save, and run HTML files is the first practical step toward becoming a web developer.