HTML Full Course — Complete Notebook Notes 2026 | Beginners ke liye

EasyPro Pak March 07, 2026 0 Comments -- min read

HTML Full Course — Notebook Style

COMPLETE BEGINNER GUIDE

HTML Full Course
Notebook

Handwritten Notes Style — Bilkul Notes Ki Tarah Seekho!

Basics to Advanced Easy Urdu Explanations Code Examples Visual Diagrams 2026 Updated

15+Chapters

100+Code Examples

FREEComplete Course

Chapter 1: What is HTML?

The language of every webpage on the internet!

HTML kya hai? HTML ka full form hai HyperText Markup Language. Yeh ek language hai jisse webpages banaye jaate hain. Browser (Chrome, Firefox) HTML ko read karke aapko webpage dikhata hai. HTML code likhna programming nahi — ye markup hai!

HyperText

—>

Links jo ek page se doosre page par le jaate hain (click karo aur jump ho jao!)

Markup

—>

Tags use karke content ko structure dena — heading, paragraph, image, etc.

Language

—>

Browser ko samajh aata hai — browser is language ko read karke webpage render karta hai.

Key Points:

HTML programming language nahi hai — ye ek markup language hai.

Har webpage HTML se bana hota hai — Google, YouTube, Facebook sab!

HTML files ka extension .html hota hai — jaise: index.html

Browser HTML ko automatically render karta hai — code nahi dikhta.

HTML seekhna web development ka pehla step hai — baad mein CSS aur JS seekhte hain.

Page 1

Chapter 2: Basic Structure of HTML

The skeletal framework of every webpage!

<!DOCTYPE html>
 —>
Document Type Declaration (HTML5). Browser ko batata hai kaunsa version expect karo.
<html>
 —>
Root Element. ALL HTML content ka container hai.
<head>
 —>
Head Section. Metadata, title, CSS/JS links. Page par visible nahi hota!
<title> Page Title </title>
 —>
Browser tab mein dikhne wala naam.
</head>
<body>
 —>
Body Section. Sab visible content yahaan aata hai — text, images, buttons!

          <h1> Main Heading </h1>

          <p> A paragraph of text. </p>
        
</body>
</html>

Key Points:

Tags pairs mein aate hain: opening <tag> & closing </tag>.

Kuch tags self-closing hote hain: e.g., <img />, <br />.

Structure hierarchical (nested like boxes) hoti hai — andar aur andar!

<html>, <head>, aur <body> ESSENTIAL hain — hamesha likhein!

Page 2

Headings — H1 se H6 tak

Chapter 3: HTML Headings

Headings se content ko organize karo!

    <h1> Sabse Bada Heading — Main Title </h1>

    <h2> Doosra Level — Section Title </h2>

    <h3> Teesra Level — Sub-section </h3>

    <h4> Chautha Level </h4>

    <h5> Paanchwa Level </h5>

    <h6> Chhota — Sabse Chhota Heading </h6>

Output (Browser Mein Dikhega):

Sabse Bada Heading — Main Title

Doosra Level — Section Title

Teesra Level — Sub-section

Chautha Level

Paanchwa Level

Chhota — Sabse Chhota Heading

Yaad Rakhein! Ek page par sirf ek H1 use karo — ye main title hota hai. H2 se H6 multiple times use ho sakte hain! SEO ke liye bhi H1 bahut important hota hai — Google is par dhyan deta hai.

Key Points:

H1 sabse important hai — page ka main topic batata hai Google ko bhi!

Headings automatically bold aur bade hote hain — CSS se change kar sakte ho.

Har heading naye line par shuru hoti hai (block element hai).

Page 3

Text Elements

Chapter 4: Paragraphs aur Text Tags

    <p> Yeh ek paragraph hai. Jitna bhi text likhو, ek block mein rahega. </p>

    <p> Yeh <b>bold text</b> hai. </p>

    <p> Yeh <i>italic text</i> hai. </p>

    <p> Yeh <u>underline text</u> hai. </p>

    <p> Yeh <mark>highlighted text</mark> hai. </p>

    <p> Yeh <strong>important text</strong> hai. </p>

    <p> Yeh <em>emphasized text</em> hai. </p>

    <br>  —> Line break (naya line, naya paragraph nahi)

    <hr>  —> Horizontal rule (line baan jaata hai)

Browser Output:

Yeh ek paragraph hai.
Yeh bold text hai. | Yeh italic text hai.
Yeh underline hai. | Yeh highlighted hai.
Yeh important hai. | Yeh emphasized hai.

Upar line <hr> se bani hai!

Key Points:

<b> vs <strong>: Dono bold dikhate hain — <strong> SEO ke liye important hai.

<i> vs <em>: Dono italic — <em> screen readers ke liye better hai.

<br> self-closing hai — closing tag zaroor nahi.

Page 4

Links / Anchor Tags

Chapter 5: HTML Links — <a> Tag

Ek page se doosre page par jaane ka tarika!

<a href="URL"> Link Text </a>
Examples:
<ahref="https://google.com">Google par jao</a>

<ahref="https://google.com"target="_blank">New tab mein khulega</a>

<ahref="about.html">Apna About Page</a>

<ahref="#section1">Same page ke section par jao</a>

<ahref="mailto:abc@gmail.com">Email karo</a>

Attribute	Kya Karta Hai	Example
href	Link ka URL ya path	href="page.html"
target="_blank"	Naye tab mein kholna	target="_blank"
title	Hover par tooltip	title="Click here"
download	File download karna	download="file.pdf"

Key Points:

href attribute zaroori hai — bina is ke link kaam nahi karta!

# se shuru hone wala href same page ke andar kisi element par le jaata hai.

Link default blue color mein dikhta hai — CSS se change hota hai.

Page 5

Images

Chapter 6: HTML Images — <img> Tag

Webpage par images lagane ka tarika!

<img src="image.jpg" alt="description">
Examples:
<imgsrc="photo.jpg"alt="Meri photo">

<imgsrc="logo.png"alt="Company Logo"width="200"height="100">

<imgsrc="https://site.com/img.jpg"alt="Online Image">

src

—>

Image ki location — local folder ya online URL dono kaam karte hain

alt

—>

Image load na ho to yeh text dikhai deta hai — screen readers bhi use karte hain

width/height

—>

Image ka size pixels mein — CSS se bhi control ho sakta hai

Yaad Rakhein — alt attribute ZAROORI hai! Alt attribute SEO ke liye bahut important hai — Google images ko "read" nahi kar sakta, alt text se samjhata hai. Hamesha meaningful alt text likhein!

Key Points:

<img> self-closing tag hai — closing </img> likhne ki zaroorat nahi!

Image formats: JPG (photos), PNG (transparent bg), SVG (icons), WebP (fast load).

Size CSS mein width: 100% likhne se responsive ho jaata hai.

Page 6

Lists

Chapter 7: HTML Lists

Ordered aur Unordered dono!

Unordered List (ul)

        <ul>

          <li>HTML</li>

          <li>CSS</li>

          <li>JavaScript</li>

        </ul>

Output:

HTML
CSS
JavaScript

Ordered List (ol)

        <ol>

          <li>Pehla Step</li>

          <li>Doosra Step</li>

          <li>Teesra Step</li>

        </ol>

Output:

Pehla Step
Doosra Step
Teesra Step

Nested List (list ke andar list):
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>

Key Points:

<ul> = bullets (unordered). <ol> = numbers (ordered). <li> = list item (dono mein).

Har <li> closing tag zaroori hai — </li> mat bhoolo!

Nested lists se tree structure banayi ja sakti hai — menu bars bhi isi se bante hain!

Page 7

Tables

Chapter 8: HTML Tables

Data ko rows aur columns mein organize karo!

<table> — Poori table ka container

<thead> — Table header section

<tr> — Table Row (ek line)

<th> Heading Cell </th> — Bold header cell

<tbody> — Table body section

<tr> — Table Row

<td> Data Cell </td> — Normal cell

</table>

    <table border="1">

      <tr>

        <th>Naam</th> <th>Age</th> <th>City</th>

      </tr>

      <tr>

        <td>Ali</td> <td>22</td> <td>Lahore</td>

      </tr>

    </table>

Browser Output:

Naam	Age	City
Ali	22	Lahore

Key Points:

<th> = header cell (bold + centered). <td> = data cell (normal).

colspan attribute se cells ko horizontally merge karo.

rowspan attribute se cells ko vertically merge karo.

Tables ab layout ke liye use nahi hoti — sirf actual tabular data ke liye!

Page 8

Forms

Chapter 9: HTML Forms

User se input lene ka tarika — login, signup, contact!

    <form action="submit.php" method="POST">

      <label for="name">Aapka Naam:</label>

      <input type="text" id="name" placeholder="Ali Khan">

      <label>Email:</label>

      <input type="email" placeholder="ali@gmail.com">

      <label>Password:</label>

      <input type="password">

      <label>Message:</label>

      <textarea rows="4"></textarea>

      <button type="submit">Submit</button>

    </form>

Input Type	Kya Hai
text	Normal text input
email	Email validation auto hoti hai
password	Text hide ho jaata hai (dots)
number	Sirf numbers allow
checkbox	Tick box — multiple select
radio	Circle — ek mein se ek select
file	File upload button
date	Date picker

Key Points:

action = data kahan jaye (server ka URL). method = GET ya POST.

required attribute lagao — field khali chhodne se form submit nahi hoga!

<label> for attribute <input> ke id se match karna chahiye — accessibility ke liye!

Page 9

div & span

Chapter 10: div aur span Tags

Layout aur styling ke liye sabse important tags!

<div> — Block Element Ek container jo poori width leta hai. Naya line shuru hota hai. Layout banane ke liye use hota hai.

        <div class="header">

          <h1>Title</h1>

        </div>

        <div class="content">

          <p>Text...</p>

        </div>

<span> — Inline Element Line ke andar rehta hai — sirf content jitna wide. Text ke kisi hisse ko style karne ke liye.

        <p>

         Mera naam <span style="color:red">Ali</span> hai.

        </p>

Feature	<div>	<span>
Type	Block element	Inline element
Width	Poori line leta hai	Content jitna
Use	Layout containers	Text styling
Naya line	Haan — aage naya line	Nahi — same line mein

Key Points:

<div> aur <span> ka khud koi visual meaning nahi — CSS ya JS ke sath use hote hain.

class attribute se CSS apply hoti hai. id attribute unique identifier hai.

Modern HTML mein layout ke liye semantic tags prefer karo — header, main, footer, section.

Page 10

Semantic HTML5

Chapter 11: Semantic HTML Tags

Meaningful structure — SEO aur accessibility ke liye!

Semantic kya hota hai? Semantic tags woh hain jo apna meaning khud batate hain — sirf <div> likhne se nahi pata yeh kya hai, lekin <header> se seedha samajh aata hai yeh page ka header hai!

<header> — Page ya section ka top part (logo, nav)

<nav> — Navigation links (menu)

<main> — Page ka main content (ek page mein ek)

<section> — Ek thematic group of content

<article> — Independent content (blog post, news)

<aside> — Side content (sidebar, ads)

<footer> — Page ka bottom part (copyright, links)

<figure> + <figcaption> — Image + caption

    <body>

      <header> <nav>...</nav> </header>

      <main>

        <section>...</section>

        <article>...</article>

      </main>

      <footer>...</footer>

    </body>

Key Points:

Semantic tags Google aur screen readers dono ke liye bahut important hain!

<div> aur <span> non-semantic hain — jahan semantic tag ho wahan semantic hi use karo.

HTML5 ne yeh tags introduce kiye — isse pehle sab kuch sirf divs se banta tha.

Page 11

Attributes

Chapter 12: HTML Attributes

Tags ko extra information dene ka tarika!

Attribute kya hota hai? Attribute tag ke andar extra information deta hai. Hamesha opening tag mein likha jata hai. Format: attribute-name="value"

Common Attributes:
id="myId"
 —>
Unique identifier — ek page mein ek hi element ka yeh ID ho sakta hai
class="myClass"
 —>
CSS class apply karne ke liye — multiple elements same class share kar sakte hain
style="color:red"
 —>
Inline CSS directly — sirf is element par apply hoga
href="url"
 —>
Link URL — sirf <a> tag mein use hota hai
src="path"
 —>
Source path — <img>, <script>, <iframe> mein use hota hai
disabled
 —>
Boolean attribute — value nahi chahiye, sirf likhne se kaam hota hai

id vs class — Farq kya hai? id = unique — ek page mein ek baar! class = reusable — multiple elements par use karo! JavaScript mein getElementById() id use karta hai — hamesha unique rakho!

Key Points:

Attributes hamesha opening tag mein likhe jaate hain — closing tag mein nahi!

Values double quotes mein likhein — yeh best practice hai.

Kuch attributes sabhi tags par kaam karte hain (global) — id, class, style, title.

Page 12

Meta Tags & SEO

Chapter 13: Meta Tags aur SEO

Google ko apna page samjhao!

    <head>

      <meta charset="UTF-8">
     <!-- Character encoding -->

      <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Mobile responsive -->

      <meta name="description" content="Mera pehla webpage">
     <!-- Google search snippet -->

      <meta name="keywords" content="HTML, CSS, web">
     <!-- Keywords -->

      <meta name="author" content="Ali Khan">

      <title>Mera Webpage — EasyproPak</title>

    </head>

Meta Tag	Kaam	Important?
charset	Urdu/Arabic text sahi dikhane ke liye	ZAROORI
viewport	Mobile par page fit karna	ZAROORI
description	Google search mein snippet	SEO ke liye
robots	Google ko index karne dena ya nahi	Advanced
og:image	Social media share thumbnail	Important

Key Points:

Meta tags <head> ke andar hote hain — page par dikhte nahi magar Google dekhta hai!

viewport meta tag bina mobile par page zoom out dikhega — hamesha lagao!

Description 150-160 characters mein likho — Google search snippet mein yahi dikhega!

Page 13

CSS Connection

Chapter 14: HTML mein CSS Kaise Lagayein?

Teen tarike hain — bahar se, andar se, aur directly!

1. External CSS (BEST PRACTICE)
<head>
<linkrel="stylesheet"href="style.css">
</head>

2. Internal CSS (Sirf is page ke liye)
<head>
<style>

        body { background: lightblue; }

        h1 { color: red; }
</style>
</head>

3. Inline CSS (Quick test ke liye)
<h1style="color: red; font-size: 30px;">Heading</h1>

Method	Kahan Likha Jata Hai	Best For
External	Alag .css file mein	Professional projects
Internal	<head> mein <style> tag	Single page sites
Inline	Directly tag mein	Quick testing only

Key Points:

External CSS hamesha prefer karo — ek file se poori website ka style change hota hai!

JavaScript bhi <script src="file.js"></script> se link hoti hai — same concept!

CSS ki priority: Inline > Internal > External — jo zyada specific ho woh win karta hai.

Page 14

FINAL PROJECT

Chapter 15: Complete HTML Page — Sab Kuch Mila Kar!

    <!DOCTYPE html>

    <html lang="ur">

    <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width">

      <title>Meri Website</title>

      <link rel="stylesheet" href="style.css">

    </head>

    <body>

      <header>

        <h1>Ali Khan ki Website</h1>

        <nav>

          <a href="#about">About</a> |

          <a href="#contact">Contact</a>

        </nav>

      </header>

      <main>

        <section id="about">

          <h2>Mere Baare Mein</h2>

          <p>Main ek web developer hun.</p>

          <img src="photo.jpg" alt="Meri Photo">

        </section>

      </main>

      <footer id="contact">

        <p>Copyright 2026 — EasyproPak</p>

      </footer>

    </body>

    </html>

Mubarak Ho! Aapne HTML Course Complete Kar Liya! Agle step: CSS seekho — HTML ko beautiful banao! Phir JavaScript — webpage ko interactive banao! HTML + CSS + JS = Complete Frontend Developer!

Page 15 — THE END

Comments

HTML Full Course — Complete Notebook Notes 2026 | Beginners ke liye

HTML Full CourseNotebook

Comments

Post a Comment

HTML Full Course
Notebook