Learn HTML with a Complete Example

Busy Order
Introduction to HTML - Complete Example

📘 Learn HTML with a Complete Example

In this post, we’ll cover the basics of HTML step by step, including text formatting, links, images, lists, tables, forms, semantic elements, multimedia, and finally a mini project (Portfolio Page). Below is a single HTML file that demonstrates all these concepts together.

💻 Full HTML Code Example


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Full Demo</title>
</head>
<body>

  <!-- 1. Introduction to HTML -->
  <h1>Welcome to HTML Basics</h1>
  <p>HTML is the standard language for creating webpages.</p>

  <!-- 2. Basic Structure -->
  <h2>Basic Structure</h2>
  <p>Every HTML page starts with <code>&lt;!DOCTYPE html&gt;</code> and the <code>&lt;html&gt;</code> tag.</p>

  <!-- 3. Text Formatting -->
  <h2>Text Formatting</h2>
  <p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <mark>Highlighted</mark></p>

  <!-- 4. Links -->
  <h2>Links</h2>
  <p>Visit <a href="https://www.busy-order.com" target="_blank">Busy Order</a></p>

  <!-- 5. Images -->
  <h2>Images</h2>
  <img src="https://via.placeholder.com/200" alt="Sample Image">

  <!-- 6. Lists -->
  <h2>Lists</h2>
  <h3>Ordered List</h3>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>

  <h3>Unordered List</h3>
  <ul>
    <li>Frontend</li>
    <li>Backend</li>
    <li>Database</li>
  </ul>

  <!-- 7. Tables -->
  <h2>Tables</h2>
  <table border="1" cellpadding="5">
    <tr><th>Name</th><th>Role</th></tr>
    <tr><td>Krithiga</td><td>Developer</td></tr>
    <tr><td>John</td><td>Designer</td></tr>
  </table>

  <!-- 8. Forms -->
  <h2>Forms</h2>
  <form>
    <label>Name: </label><input type="text" name="name"><br><br>
    <label>Email: </label><input type="email" name="email"><br><br>
    <input type="submit" value="Submit">
  </form>

  <!-- 9. Semantic Elements -->
  <h2>Semantic Elements</h2>
  <header>This is a header</header>
  <nav>Navigation Menu</nav>
  <main>Main Content Area</main>
  <footer>Footer Information</footer>

  <!-- 10. Audio & Video -->
  <h2>Audio and Video</h2>
  <audio controls>
    <source src="sample.mp3" type="audio/mpeg">
  </audio>

  <video width="320" height="240" controls>
    <source src="sample.mp4" type="video/mp4">
  </video>

  <!-- 11. Best Practices -->
  <h2>Best Practices</h2>
  <ul>
    <li>Always use semantic tags</li>
    <li>Add alt text for images</li>
    <li>Keep code clean and readable</li>
  </ul>

  <!-- 12. Mini Project (Portfolio) -->
  <h2>Mini Project: Portfolio Page</h2>
  <section>
    <h3>Krithiga - Web Developer</h3>
    <p>Passionate programmer skilled in custom designs, web and mobile development.</p>
    <h4>Projects</h4>
    <ul>
      <li>Bus Pass Management System</li>
      <li>Event Planner App</li>
      <li>E-commerce Website</li>
    </ul>
    <h4>Contact</h4>
    <p>Email: krithiga@example.com</p>
  </section>

</body>
</html>

✅ Copy this full code into your editor and open in the browser to see all features of HTML demonstrated in one page.

0 Comments