📘 Full HTML Tutorial

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It structures content using elements like headings, paragraphs, images, and links.

How to Write, Save, and Run HTML

  1. Open a text editor (e.g., Notepad or VS Code).
  2. Write your HTML code.
  3. Save it with a .html extension (e.g., index.html).
  4. Double-click the file to open it in your browser.
Example HTML File:
<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

1. Headings

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>

2. Paragraphs

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

3. Line Breaks and Horizontal Lines

<p>Line one.<br>Line two.</p>
<hr>
<p>After horizontal line.</p>

4. Links

<a href="https://www.google.com">Go to Google</a>

5. Images

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

6. Lists

Ordered List:

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Unordered List:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

7. Tables

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

8. Forms

<form>
  Name: <input type="text"><br><br>
  Email: <input type="email"><br><br>
  <input type="submit">
</form>

9. Buttons

<button>Click Me!</button>

10. Div and Span

<div style="color: red;">This is a div</div>
<span style="color: blue;">This is a span</span>

🧪 Full Example Page

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is a paragraph on my web page.</p>

    <h2>Links</h2>
    <a href="https://www.google.com">Visit Google</a>

    <h2>Image</h2>
    <img src="https://via.placeholder.com/150" alt="Example image">

    <h2>List</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>