Chapter 0: How Tentier IDE & Workspace Works — HTML5 Fundamentals

📘 Conceptual Theory: How Modern Web IDEs & HTML Work

#### 1. Core Concept & Purpose

HTML (HyperText Markup Language) is the universal foundation of the World Wide Web. Every web page you visit—from news portals to decentralized crypto platforms—is structured using HTML.

In this interactive IDE, you have a 3-panel architecture:

1.Interactive Theory & Mission: Guides you through core concepts with realistic coding scenarios.
2.Real-Time Code Editor: Where you write production HTML, CSS, and JavaScript.
3.Live Sandbox Preview: A sandboxed browser engine that parses and renders your markup instantly.

Your work in this course is cumulative: the real webpage you start building here in Chapter 0 carries forward into each subsequent chapter as you grow it into a full decentralized portal!

#### 2. HTML Syntax & Anatomy

html

<!-- Standard HTML5 Document Boilerplate -->
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content lives inside body -->
    <h1>Main Title</h1>
    <p>Introductory paragraph.</p>
  </body>
</html>

#### 3. Real-World Practical Example

html

<!-- Header landmark with title and interactive button -->
<header>
  <h1>CyberNexus Portal</h1>
  <p id="intro">Interactive Tour Completed</p>
  <button id="test-btn">Click Me</button>
</header>

#### 4. Best Practices & Pro-Tips

•Always balance every opening tag with its corresponding closing tag (e.g., <p> paired with </p>).
•The <head> section stores metadata, while the <body> contains everything users see.
•Unique id attributes (like id="intro") can only be assigned to a single element per page.