HTML Complete Tutorial – Learn HTML with Simple Explanations |Esikhcha

🌐 HTML Complete Tutorial

Big simple explanations · Clear syntax · Real code examples

📖 Basics & Elements 📝 Text & Formatting 🔗 Links & Images 📊 Tables & Lists 📝 Forms & Inputs 🎨 Canvas & SVG 🎥 Video & Audio

CHAPTER 1

HTML Introduction

🎯 Big Simple Explanation: HTML (HyperText Markup Language) is the standard language for creating web pages. It uses “tags” to structure content — like headings, paragraphs, images, and links.

Think of HTML as the skeleton of a website. Every website you visit uses HTML!

Simple HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

CHAPTER 2

HTML Editors

You can write HTML in any text editor! Popular options: VS Code (best), Sublime Text, Notepad++, or even simple Notepad. Save files with .html extension.

💡 VS Code with “Live Server” extension lets you see changes instantly!

CHAPTER 3

HTML Basic Structure

<!DOCTYPE html>     // Declares HTML5 document
<html>              // Root element
<head>              // Contains meta info
    <title>Page Title</title>
</head>
<body>              // Visible content
    <h1>Heading</h1>
    <p>Paragraph</p>
</body>
</html>

CHAPTER 4

HTML Elements

An HTML element is everything from the start tag to the end tag: <tagname>content</tagname>. Some elements are empty (no closing tag): <br>, <img>.

<h1>This is a heading element</h1>
<p>This is a paragraph element.</p>
<br>  <!-- line break (empty element) -->

CHAPTER 5

HTML Attributes

Attributes provide extra information about elements. They appear in the start tag: name="value".

<a href="https://example.com">Link</a>
<img src="image.jpg" alt="Description" width="300">
<p class="highlight" id="intro">Text</p>

CHAPTER 6

Headings (h1 to h6)

<h1>Main Title (most important)</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest heading</h6>

h1 → Largest, h6 → Smallest. Use only one h1 per page for SEO!

CHAPTER 7

Paragraphs & Line Breaks

<p>This is a paragraph. Browsers automatically add space before and after.</p>
<p>Another paragraph.</p>
<br>  <!-- line break -->
<hr>  <!-- horizontal rule (thematic break) -->

CHAPTER 8

HTML Styles (style attribute)

<p style="color: red;">Red text</p>
<h1 style="background-color: blue; color: white;">Styled heading</h1>
<div style="font-size: 20px; font-family: Arial;">Styled div</div>

CHAPTER 9

Text Formatting Tags

Tag	Description	Example
`<b>`	Bold text	Bold
`<strong>`	Important (bold + semantic)	Strong
`<i>`	Italic text	Italic
`<em>`	Emphasized (italic + semantic)	Emphasized
`<mark>`	Marked/highlighted	Marked
`<small>`	Smaller text	Small
`<del>`	Deleted text	~~Deleted~~
`<ins>`	Inserted text	Inserted
`<sub>`	Subscript	H₂O
`<sup>`	Superscript	X²

CHAPTER 10

Quotations

<blockquote>Blockquote for long quotes.</blockquote>
<q>Short inline quote.</q>
<abbr title="World Health Organization">WHO</abbr>
<address>123 Main St, City</address>
<cite>The Scream</cite> by Edvard Munch

CHAPTER 11

HTML Comments

<!-- This is a comment. Not visible on page -->
<h1>Visible heading</h1>
<!-- Comments help document your code -->

CHAPTER 12

HTML Colors

Colors can be specified by name, HEX, RGB, or HSL.

<p style="color: red;">Red text</p>
<p style="color: #FF5733;">Orange-red hex</p>
<p style="color: rgb(0, 100, 200);">Blue RGB</p>
<p style="background-color: hsl(200, 80%, 50%);">Background HSL</p>

CHAPTER 13

HTML with CSS

<style>
    body { font-family: Arial; background: #f0f0f0; }
    .box { border: 1px solid black; padding: 20px; margin: 10px; }
    #header { background: #333; color: white; }
</style>

CHAPTER 14

Hyperlinks (a tag)

<a href="https://google.com">Go to Google</a>
<a href="page2.html">Local page</a>
<a href="#section">Jump to section</a>
<a href="mailto:email@example.com">Send Email</a>
<a target="_blank" href="https://example.com">Opens new tab</a>

CHAPTER 15

Images (img tag)

<img src="photo.jpg" alt="Description" width="300" height="200">
<img src="https://placehold.co/400x200" alt="Placeholder">
<figure>
    <img src="image.jpg" alt="Caption">
    <figcaption>This is a caption</figcaption>
</figure>

CHAPTER 16

Favicon (Browser Tab Icon)

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

CHAPTER 17

Page Title

<title>My Awesome Website</title>

CHAPTER 18

HTML Tables

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

CHAPTER 19

Lists (UL, OL, DL)

<ul><li>Unordered item</li></ul>
<ol><li>Ordered item</li></ol>
<dl><dt>Term</dt><dd>Definition</dd></dl>

CHAPTER 20

Block vs Inline Elements

Block Elements	Inline Elements
`<div>, <p>, <h1>, <ul>, <table>`	`<span>, <a>, <img>, <strong>, <em>`
Starts on new line, takes full width	Stays in line, takes only needed width

CHAPTER 21

Div (Container)

<div class="container">
    <h2>Section Title</h2>
    <p>Content inside a div. Divs are block-level containers.</p>
</div>

CHAPTER 22

Classes & ID

<div class="box highlight">Multiple classes</div>
<div id="unique-element">Unique ID (only one per page)</div>
<style>.box { padding: 10px; } #unique-element { background: gold; }</style>

CHAPTER 23

Buttons

<button>Click Me</button>
<button type="submit">Submit Form</button>
<button onclick="alert('Hi!')">Alert</button>

CHAPTER 24

Iframes (Embed Content)

<iframe src="https://example.com" width="600" height="400" title="Example"></iframe>

CHAPTER 25

HTML Forms

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Send">
</form>

CHAPTER 26

Form Elements

<input type="text">   <input type="password">
<textarea rows="4" cols="50"></textarea>
<select><option>Option1</option></select>
<input type="checkbox"> <input type="radio" name="group">
<input type="file"> <input type="range">

CHAPTER 27

Input Types

Type	Description
`text`	Single line text
`email`	Email address
`password`	Hidden characters
`number`	Numeric input
`date`	Date picker
`color`	Color picker
`range`	Slider
`tel`	Telephone
`url`	Website URL

CHAPTER 28

Input Attributes

<input type="text" placeholder="Enter name" required>
<input type="number" min="1" max="100" value="50">
<input type="text" pattern="[A-Za-z]{3}">
<input type="text" readonly disabled>

CHAPTER 29

Canvas (Drawing)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid"></canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 50);
</script>

CHAPTER 30

SVG (Scalable Vector Graphics)

<svg width="200" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="3" fill="yellow" />
    <rect x="100" y="20" width="80" height="60" fill="blue" />
</svg>

CHAPTER 31

HTML Video

<video width="400" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support video.
</video>

CHAPTER 32

HTML Audio

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    Your browser does not support audio.
</audio>

CHAPTER 33

Embedding YouTube Videos

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    frameborder="0" allowfullscreen>
</iframe>

SUMMARY

🎯 You’ve completed HTML!

✅ Topics covered: Structure, Elements, Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, Comments, Colors, CSS, Links, Images, Tables, Lists, Block/Inline, Div, Classes, ID, Buttons, Iframes, Forms (all input types & attributes), Canvas, SVG, Video, Audio, YouTube.