HTML Simple Programs Tutorial Guide

1. Headings & Paragraphs

Program: Simple Web Page Title & Intro

Goal: Display a main heading with two short paragraphs.

<h1>Welcome to My Website</h1>
<p>This is my first HTML page.</p>
<p>I am learning how to structure content.</p>

2. Lists

Program: Favourite Fruits List

Goal: Show an unordered list of 3–4 items.

<h2>My Favourite Fruits</h2>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
    <li>Orange</li>
</ul>

Program: Steps to Make Tea

Goal: Use an ordered list to show steps.

<h2>How to Make Tea</h2>
<ol>
    <li>Boil water</li>
    <li>Add tea leaves</li>
    <li>Steep for a few minutes</li>
    <li>Pour into a cup and enjoy</li>
</ol>

3. Links & Images

Program: Clickable Image Link

Goal: Make an image clickable and open another page.

<a href="https://example.com" target="_blank">
    <img src="logo.png" alt="Example website logo" width="150">
</a>

4. Tables

Program: Simple Student Marks Table

Goal: Show a small table with name and marks.

<h2>Student Marks</h2>
<table border="1">
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Nikhil</td>
        <td>90</td>
    </tr>
    <tr>
        <td>Ravi</td>
        <td>85</td>
    </tr>
</table>

5. Forms

Program: Simple Login Form

Goal: Create a basic username/password form.

<h2>Login</h2>
<form>
    <label for="user">Username:</label>
    <input type="text" id="user" name="user"><br><br>

    <label for="pass">Password:</label>
    <input type="password" id="pass" name="pass"><br><br>

    <button type="submit">Login</button>
</form>

6. Small Semantic Layout

Program: Mini Blog Layout

Goal: Use <header>, <main>, <article> and <footer> together.

<header>
    <h1>My Blog</h1>
</header>

<main>
    <article>
        <h2>First Post</h2>
        <p>This is a short blog post.</p>
    </article>
</main>

<footer>
    <p>&copy; 2026 My Blog</p>
</footer>