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.