Friday, 6 Mar 2026

HTML Basics: Creating Your First Web Page with Notepad

Understanding HTML Fundamentals

HTML stands for HyperText Markup Language - it's the foundational building block of the web. Unlike word processors, HTML files contain only plain text with special tags that tell web browsers how to display content. When you create an HTML file in Notepad, you're working directly with these raw instructions, which provides unparalleled clarity about how web pages actually function behind the scenes.

The video demonstrates how every HTML element requires opening and closing tags to define its structure. For example, <p> marks the start of a paragraph while </p> signals its end. This fundamental principle applies to all HTML elements, forming the basis of web page construction.

Why Notepad Is Ideal for Beginners

While advanced code editors exist, Notepad offers unique learning advantages:

  1. Removes dependency on auto-complete features that hide core concepts
  2. Forces manual tag entry for better retention
  3. Eliminates distractions from complex interface elements
  4. Reveals exactly how browsers interpret raw HTML syntax

Creating Your First HTML Page: Step-by-Step

Setting Up Your Workspace

Before coding, create a dedicated project folder through Windows File Explorer:

  1. Right-click in your Documents library > Select "New" > "Folder"
  2. Name it descriptively (e.g., "my-first-website")
  3. Crucially enable file extensions: In File Explorer's View tab, check "File name extensions"

Coding and Saving Your HTML File

  1. Open Notepad and type your content (e.g., a nursery rhyme)
  2. Add paragraph tags around each line: <p>Your text here</p>
  3. Save the file with critical precision:
    • File > Save As > Select location as your created folder
    • Change "Save as type" to "All files (.)"
    • Name your file "filename.html" (the .html extension is mandatory)
    • Click Save

Viewing Your Web Page

  1. Navigate to your saved .html file in File Explorer
  2. Double-click to open in your default browser
  3. Use the browser's refresh button (circular arrow) after making changes

Formatting reality check: Line breaks in Notepad don't translate to web display. Only HTML tags like <p> and <h1> create visual structure in browsers. This separation between code and presentation is fundamental to understanding web development.

Essential HTML Tags for Beginners

Heading Tags

Headings create hierarchical structure. Always pair opening and closing tags:

<h1>Main Title</h1> <!-- Largest heading -->
<h2>Subheading</h2>
<h3>Section Heading</h3>

Experiment with heading levels to understand their visual hierarchy. H1 typically serves as the primary page title, while H2-H6 denote subsections.

Paragraph Tags

The <p> tag is your content workhorse:

<p>This is a paragraph. All text content should be wrapped in paragraph tags for proper spacing and readability.</p>

Whitespace Insight

Browsers collapse multiple spaces or line breaks into single spaces. HTML tags exclusively control layout:

<!-- This messy formatting -->
<p>Hello             World</p>

<!-- Displays identically to -->
<p>Hello World</p>

Troubleshooting Common Beginner Issues

Problem: File opens in Notepad instead of browser
Solution: Verify the .html extension and that "All files" was selected during saving

Problem: Changes don't appear after refreshing
Solution: Ensure you saved the Notepad file before refreshing browser

Problem: Text appears as one block
Solution: Confirm every paragraph has both opening <p> and closing </p> tags

Next Steps in Your HTML Journey

After mastering basic text formatting:

  1. Add images with <img src="file.jpg" alt="description">
  2. Create links using <a href="page.html">Click Me</a>
  3. Build lists:
    <ul>
  <li>Unordered item</li>
</ul>
<ol>
  <li>Ordered item</li>
</ol>

Beginner Practice Checklist

  1. Create a folder named "html-practice"
  2. Make a file called "poem.html" with heading and paragraph tags
  3. Experiment with all heading levels (h1-h6)
  4. Intentionally "break" your page by omitting closing tags
  5. Fix the errors and observe how browsers handle mistakes

Recommended resources:

  • Mozilla Developer Network (MDN) HTML Basics: Authoritative reference with interactive examples
  • W3Schools HTML Tutorial: Beginner-friendly exercises with "Try It Yourself" editor
  • freeCodeCamp HTML Curriculum: Structured learning path with projects

Building a Strong Foundation

Starting with Notepad teaches you that HTML is fundamentally text interpretation. Web browsers read your plain text files and render them according to HTML standards. This knowledge creates a solid foundation for understanding more complex web technologies like CSS and JavaScript later.

What aspect of HTML structure are you most curious to explore next? Share your next learning goal in the comments!

Youtube
Blog→