Website Bananay ka Pehla Step: HTML Kya Hai? (What is HTML?
Dekho, Ek website banana bilkul waisa hi hai jaisay ek Ghar (House) 🏡
banana.
HTML (HyperText Markup Language) us Ghar ka Dhancha (Blueprint
or Frame) hota hai.
HTML batata hai ki ghar mein kamre kahan honge, darwaza
kahan lagega ,aur chaat kahan hogi.
Agar HTML nahi hoga, toh computer ko pata hi nahi chalega ki text
ko heading bana kar dikhana hai, ya paragraph bana kar .
🧱 Tags: HTML ke Eentein (Bricks)
HTML mein hum har cheez ko Tags ke andar bandh karte hain. Tags < >
inn do nishanon (signs) ke beech mein likhe jaate hain.
Har Tag ka ek Shuru aur ek Khatam (Start and End) hota hai:
Shuru Tag (Opening Tag): <tagname>
Khatam Tag (Closing Tag): </tagname> (Dekho, isme / lagta
hai!)
Jaise:
HTML Tag
Cheez Matlab
Example
Pura Document
<html> ... Yeh batata hai ki sab kuch iske andar hai.
(The Whole
</html> Yeh Pura Ghar hai.
Thing)
Yeh woh hissa hai jo dikhai nahi deta, lekin
<head> ...
Head (Sar) computer ke liye zaroori information
</head>
rakhta hai (Jaisay Ghar ke papers).
<title> ... Yeh woh naam hai jo Browser Tab par
Title (Naam)
</title> dikhta hai (Jaisay Ghar ke bahar ki Plate).
Iske andar woh sab kuch hota hai jo
<body> ...
Body (Jism) website par dikhta hai! Yeh Ghar ke
</body>
kamre hain.
Export to Sheets
📝 Sabse Zaroori Tags (Most Important Tags)
Jab tum apna pehla webpage banaoge, toh yeh tags tumhari Body
<body> mein istemaal honge:
1. Headings:
o Kaam: Kisi bhi cheez ka Title ya Bada Naam dene ke liye.
o Tag: <h1> se lekar <h6> tak. <h1> sabse Bada hota hai,
aur <h6> sabse Chota.
o Example: <h1>Mera Pehla Webpage!</h1>
2. Paragraph:
o Kaam: Lambi-lambi baatein ya kahaniyan likhne ke liye.
o Tag: <p>
o Example: <p>Yeh meri website ka pehla paragraph hai.</p>
3. Image:
o Kaam: Website par Tasveer (Picture) lagane ke liye.
o Tag: <img src="tasveer_ka_naam.jpg">
o Khas Baat: Iska koi Closing Tag </img> nahi hota!
Pehli Website Ka Structure
Har HTML file hamesha aise shuru hoti hai:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mera Naam</title>
</head>
<body>
<h1>Mera Title</h1>
<p>Meri Website ka Content.</p>
</body>
</html>
Links aur Lists: Website ke Raaste aur Sawariyan (Roads and
Vehicles of the Website)
Yeh do tags websites ke liye bohat zaroori hain, jinko hum aam zabaan
mein istemaal karte hain.
1. 🌐 Link Tag (Anchor Tag - <a>):
Jaise Google Maps mein ek jagah se doosri jagah jaane ka raasta hota
hai, waise hi yeh tag aapki website ko doosri websites ya apni hi
website ke doosre pages se jorta hai. Isse users click karke aage jaate
hain.
Tag: <a href="link_ka_address">Link ka Naam</a>
Zaroori Cheez: Is tag mein ek extra cheez lagti hai jise Attribute
kehte hain. Yahan hum href attribute istemaal karte hain.
o href ka matlab hai "Hypertext Reference." Ismein hum woh
address (URL) likhte hain jahan humein jaana hai.
Example: Agar aap chahte hain ki log Google par ja sakein, toh
aap likhenge:
HTML
<a href="[Link] Par Jao</a>
2. 📋 List Tags: Cheezon ko Tartib se Rakhna
Agar aapko cheezon ki list banani hai, jaise grocery ki list ya apni pasand
ki cheezon ki list, toh hum List Tags istemaal karte hain. Yeh do (2) tarah
ki hoti hain:
A. Unordered List (<ul>): Dot waali List
Kaam: Jab tartib (order) zaroori na ho. Har line ke shuru mein sirf
ek chota sa dot ⚫ ya bullet ata hai.
Tags:
o Puri List: <ul> ... </ul> (Unordered List)
o List Item: Har cheez ke liye <l i> ... </li> (List Item)
Example:
HTML
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
B. Ordered List (<ol>): Number waali List
Kaam: Jab tartib (order) zaroori ho, jaise pehla step, doosra
step, ya 1, 2, 3 ki counting.
Tags:
o Puri List: <ol> ... </ol> (Ordered List)
o List Item: Har cheez ke liye <l i> ... </li> (List Item)
Example:
HTML
<ol>
<li>Subah utho</li>
<li>Brush karo</li>
<li>Khana khao</li>
</ol>
📊 Table Tag: Data ko table main dikhana
Jaise school mein timetable ya results ek grid (columns aur rows)
mein likhe hote hain, waise hi table tag data ko sath-sath aur organized
tareeqay se dikhane ke liye istemaal hota hai.
Table banane ke liye hamein 4 tags ki zaroorat hoti hai:
Tag Naam Matlab (Meaning)
<table Yeh puri table ko shuru aur band karta hai
Table
> (Pura dabba).
<tr> Table Row Yeh ek puri line (row) banata hai.
Table Yeh column ka naam ya title hota hai (Bold
<th>
Heading hota hai).
<td> Table Data Yeh har dabba (cell) hota hai jismein data
Tag Naam Matlab (Meaning)
likhte hain.
Table Ka Structure Dekho:
HTML
<table>
<tr>
<th>phalon Ka Naam</th> <th>Rang (Color)</th> </tr>
<tr>
<td>Apple</td> <td>Laal (Red)</td> </tr>
<tr>
<td>Kela (Banana)</td>
<td>Peela (Yellow)</td>
</tr>
</table>
Yeh tags humari website ko aur zyada behtar aur kaam ka bana denge
Form Tag (<form>): Maaloomat Lene Ka Daba
Form Tag ek bada dabba hai jiske andar hum input fields (jahan log
apna data likhte hain) rakhte hain. Jaise school mein dakhla form
(admission form) hota hai.
Pura Form: <form> ... </form>
o Action: Form ka data kahan bhejoge? Yeh batata hai
action="" attribute.
Input Field (<input>): Yeh woh chote dabba hain jahan user
likhta hai ya select karta hai. Iska koi closing tag nahi hota.
o Zaroori Attribute: type="" batata hai ki yeh field kis tarah ki
hai:
type
Kaam Example
Value
text text likhne ke liye (Naam, shehar, etc.) <input
type
Kaam Example
Value
type="text">
Jab aap kuch likhein toh woh gol-gol dots <input
password
ban jayein (koi dekh na sake). type="password">
Ek Button jo form ka data bhejne (send) <input
submit
ke kaam ata hai. type="submit">
Form Ka Structure Dekho:
HTML
<form>
<label>Aapka Naam:</label> <input type="text">
<br> <label>Aapka Password:</label>
<input type="password">
<br>
<input type="submit" value="Mujhe Bhejo"> </form>
Yaad Rakho: Form tag se sirf design banta hai. Data ko bhejne
(process) ke liye hamein thodi doosri programming (server-side) bhi
seekhni padti [Link] ki baat ho rahi
💬 Comment Tag : Apne Liye Note (A Note for Yourself)
Yeh aapke HTML code mein woh cheezein likhne ke liye hote hain jo aap
sirf khud ya doosre programmer ke liye likhna chahte hain. Yeh
website par dikhai nahi deta.
Example: Agar aapne ek complex table banaya hai aur aap yaad
rakhna chahte hain ki iska maksad kya hai.
Comment Ka Structure:
HTML
<!-- comment -->
Faida: Jab aap 6 mahine baad apna code dekhenge, toh yeh comments
aapko jaldi se samajhne mein madad karenge ki aapne kya kiya tha. Yeh
code ko saaf aur easy to read rakhta hai.
Inline Styling: HTML Tag Ke Andar Sajawat
Jab aap sirf ek khaas tag (jaise sirf ek paragraph) ka rang ya size
badalna chahte hain, toh hum us tag ke opening tag ke andar ek khaas
Attribute istemaal karte hain jise style kehte hain.
Format Dekho:
HTML
<tagname style="property: value; property: value;">Content</tagname>
Yahan, style attribute ke andar hum wohi CSS properties likhte hain.
1. 🌈 Background Color
Agar aap poore page ya kisi khaas dabbe (tag) ka peeche ka rang
(background color) badalna chahte hain:
Property: background-color
Value: Rang ka naam (jaise blue, red, yellow) ya uska code.
Example: Poore Page ka Background
Aap poore page ka background color badalne ke liye <body> tag ke
andar style lagayenge:
HTML
<body style="background-color: lightblue;">
<h1>Mera Page Halka Neela Hai!</h1>
</body>
Example: Sirf Heading ka Background
Aap sirf ek Heading ke peeche rang lagana chahte hain:
HTML
<h2 style="background-color: yellow;">Yeh Heading Sirf Peeli Hai</h2>
<p>Lekin is paragraph ka background nahi badla.</p>
2. Text Color (Likhai Ka Rang)
Agar aap kisi tag mein maujood text ka rang badalna chahte hain:
Property: color
Value: Rang ka naam.
Example: Paragraph ka Text Color
HTML
<p style="color: green;">Yeh likhai hari (green) rang ki hai.</p>
3. 📏 Font Size (Likhai Ka Size)
Agar aap text ko chota ya bada karna chahte hain:
Property: font-size
Value: Size numbers mein (jaise 20px, 100%, ya 2em). px ka
matlab pixels hota hai.
Example: Bada Text
HTML
<p style="font-size: 30px; color: purple;">Main thora bada dikhta
hoon.</p>
4. 📝 Text Alignment
Agar aap text ko center mein, left mein, ya right mein rakhna chahte
hain:
Property: text-align
Value: center, left, ya right.
Example: Heading ko Center Mein Lana
HTML
<h1 style="text-align: center; color: red;">Yeh Heading Beech Mein Hai!
</h1>
Important Note (Zaroori Baat)
Inline Styling aapko jaldi se kaam karne deta hai, lekin jab aapki website
badi ho jaati hai, toh har tag mein jaa kar style badalna mushkil ho jaata
hai. Isi liye CSS files (External CSS) istemaal karna sabse accha tareeqa
hai.
Div (<div>): Bada Dabba (The Big Container)
<div> ka matlab hai Division (Hissa ya Tukda). Yeh sabse zyada istemaal
hone waala HTML tag hai!
Kaam:
1. Grouping (Jama Karna): Yeh ek bada dabba bana deta hai, jiske
andar aap kai saare doosre tags (jaise headings, paragraphs, aur
images) ko ikhatta rakh sakte hain.
2. Layout Banana: Jab aapko apni website ko sections (jaise
Header, Sidebar, Main Content) mein baantna ho, toh aap <div>
use karte hain.
3. Styling Target: Aap <div> ko ek naam dete hain (using id or
class) aur phir CSS se sirf uss poore dabbe ko style karte hain.
<div> Ki Khaas Baat: Block-Level Element
<div> ek Block-Level Element hai. Iska matlab hai ki:
Yeh poori line (100% width) le leta hai, chahe iske andar content
kitna hi chota kyun na ho.
Jab bhi naya <div> shuru hota hai, woh hamesha nayee line se
shuru hota hai.
<div> Ka Example:
HTML
<div style="background-color: lightgray; padding: 20px;">
<h1>Meri Website Ka Naam</h1>
<p>Welcome!</p>
</div>
<div style="border: 2px solid blue;">
<h2>Aaj Ki Khabrein</h2>
<p>HTML seekhna bahut mazedaar hai.</p>
</div>
✍️Span (<span>): Chota Nishan (The Small Marker)
<span> tag bhi <div> jaisa hi hai, lekin yeh bohat choti cheezon ko
group karne ke liye istemaal hota hai.
Kaam:
1. Text Ke Tukde: Jab aapko ek paragraph ke andar sirf ek lafz ya
ek jhumle (phrase) ka rang ya style badalna ho.
2. Inline Styling: Yeh sirf utni jagah leta hai jitna iska content hai.
<span> Ki Khaas Baat: Inline Element
<span> ek Inline Element hai. Iska matlab hai ki:
Yeh utni hi width leta hai jitna iska content hai.
Yeh doosre text ya tags ke saath (same line mein) rehta hai aur
nayee line se shuru nahi hota.
<span> Ka Example:
HTML
<p>
Main ek simple line hoon, lekin mera yeh
<span style="color: red; font-weight: bold;">laal aur mota lafz</span>
bahut zaroori hai.
</p>
Matlab: Poora paragraph normal rahega, lekin sirf "laal aur mota lafz"
wala hissa red aur bold ho jayega.
Do Aur Zaroori Features: ID aur Class
Jab aap <div> ya doosre tags ko CSS se style karna chahte hain, toh aap
unhein pehchaan (identity) dete hain.
1. ID Attribute (id="")
Kaam: Yeh tag ko ek khaas, unique naam deta hai. Jaise school
mein har bacche ka ek Roll Number hota hai, jo sirf ussi ka hota
hai.
Istemaal: Aik page par yeh id sirf ek tag ko mil sakta hai.
Example: <div id="header-bar">...</div>
2. Class Attribute (class="")
Kaam: Yeh tag ko ek group naam deta hai. Jaise school mein class
1, class 2 hoti hai. Bahut saare bacche ek hi class mein ho sakte
hain.
Istemaal: Aik page par yeh class kai saare tags ko mil sakta hai.
Example: <p class="important-text">...</p> aur <h2
class="important-text">...</h2> - dono ko ek hi style mil jayega.