HTML Seekhna Aasan Hai: Basics Explained Ekdum Detail Mein - Part 1
Table of Contents
Ek din aap khud ki website bana rahe ho, aur agle din log bol rahe hain ‘Wah bhai, kya creativity hai!’ Par ye creativity aati kahan se hai? Web development ki duniya ka pehla step hai HTML. Agar aap ekdum naye ho aur soch rahe ho ki shuru kaise karein, toh chill maro! Main yeh blog ekdum basic aur easy language mein likh raha hoon, examples ke saath, jo ek beginner ke liye perfect hai.
HTML: Sab Kuch Ki Shuruaat
Sabse pehle samajhte hain ki HTML hai kya.
HTML ka full form hai HyperText Markup Language.
Achha yeh samajho, agar website ek building hai, toh HTML uska foundation hai. Jaise ek ghar ki buniyad ke bina ghar khada nahi ho sakta, waise hi HTML ke bina ek webpage ka koi existence nahi hai. Yeh ek markup language hai jo website ke content ko structure deti hai.
Baat Karein HyperText Ki?
HyperText ka matlab hai “text jo linked ho.”
- Matlab, jab aap kisi link pe click karte ho aur woh aapko kisi doosri page pe le jata hai, wahi HyperText hai.
- Example: Socho aapne kisi shopping website ka product link khola aur woh product page par le gaya. Yeh HyperText ka kamaal hai!
Markup Language Ka Matlab?
Markup language ka matlab hai ki ek aise tags ka use jo content ko readable aur structured banate hain.
- For example:
<h1>tag headings banata hai.<p>tag paragraphs banata hai.
Samajh aaye? Nahin? Chill! Aagey aur clear hoga.
HTML Ka Kaam Kaise Hota Hai?
Chalo ek simple sa scenario lete hain:
- Aap HTML code ko ek file mein likhte ho aur usse
.htmlextension ke saath save karte ho. - Phir aap us file ko kisi browser mein open karte ho (Google Chrome, Firefox, etc.).
- Browser us HTML code ko samajhta hai aur ek acchi si webpage bana ke aapke saamne present karta hai.
Aapka kaam bas code likhna hai, baaki browser ka kaam hai magic dikhana!
HTML Ka Basic Structure
Soch rahe ho ki HTML code shuru kaise karein? Ekdum base structure se start karte hain:
<!DOCTYPE html>
<html>
<head>
<title>Meri Pehli Website</title>
</head>
<body>
<h1>Swagat Hai Aapka!</h1>
<p>Yeh meri pehli website hai jo main HTML use karke banayi hai.</p>
</body>
</html>
Is Code Ko Breakdown Karte Hain:
-
<!DOCTYPE html>- Yeh batata hai ki aapka document HTML5 version ka hai.
- Socho yeh browser ke liye ek signal hai ki bhai, yeh latest version ka HTML hai.
-
<html>- Yeh tag ek container ki tarah hai jo batata hai ki yeh HTML ka content hai.
- Har HTML code isi ke andar likha jaata hai.
-
<head>- Head ek aise jagah hai jisme website ke bare mein information hoti hai. Jaise:
- Title (browser tab mein jo naam dikhai deta hai).
- Meta tags (SEO ke liye zaroori).
- Head ek aise jagah hai jisme website ke bare mein information hoti hai. Jaise:
-
<body>- Body wo part hai jo browser par dikhai deta hai. Jo bhi user screen par dekhta hai, woh
<body>ke andar hota hai.
- Body wo part hai jo browser par dikhai deta hai. Jo bhi user screen par dekhta hai, woh
-
<h1>- Yeh sabse badi heading banata hai.
- Example: “Swagat Hai Aapka!”
-
<p>- Yeh tag paragraph banata hai.
- Example: “Yeh meri pehli website hai jo main HTML use karke banayi hai.”
Practical Example: Apna Pehla Web Page
Ab aap soch rahe ho ki yeh coding kaise karni hai? Toh chalo ek practice karte hain.
Code Likho:
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>Hi! Mera Naam Priyanshu Hai</h1>
<p>Main web development seekh raha hoon.</p>
<p>Yeh ek practice page hai jo maine HTML ke basic tags use karke banaya hai.</p>
</body>
</html>
Iska Output Browser Mein:
Hi! Mera Naam Priyanshu Hai
Main web development seekh raha hoon.
Yeh ek practice page hai jo maine HTML ke basic tags use karke banaya hai.
Basic Tags Ka Deep Dive
Yeh raha ek table jo common HTML tags aur unke kaam ko simplify karta hai:
| Tag | Kaam | Example |
|---|---|---|
<h1> |
Sabse badi heading ke liye | <h1>Heading</h1> |
<h2> |
Dusri badi heading | <h2>Subheading</h2> |
<p> |
Paragraph likhne ke liye | <p>Paragraph content.</p> |
<a> |
Hyperlink create karne ke liye | <a href="https://google.com">Google</a> |
<img> |
Image dikhane ke liye | <img src="path.jpg" alt="Text"> |
<ul> |
Unordered list banane ke liye | <ul><li>Item 1</li></ul> |
Common Errors jo Beginners Karte Hain
-
Tags Close Na Karna:
- Galat:
<p>Yeh ek paragraph hai. - Sahi:
<p>Yeh ek paragraph hai.</p>
- Galat:
-
File Save Karna Bhool Jana:
- Code likhne ke baad hamesha
.htmlextension ke saath save karein.
- Code likhne ke baad hamesha
-
Browser Refresh Na Karna:
- Changes dikhane ke liye page refresh karna zaroori hai.
Exercise for You
Aap apne computer par ek naye webpage ka code likho jo aapke baare mein ho.
- File ka naam rakhein:
myprofile.html. - Head section mein apna naam title mein likhein.
- Body mein ek heading aur do paragraphs likhein jo aapke hobbies ke baare mein ho.
Conclusion: Pehla Kadam Sabse Zaroori Hai
Ab aap HTML ka basic samajh chuke ho. Yeh pehla step hai web development seekhne ke safar ka. Agle part mein hum sikhenge kaise HTML lists aur images ka use karte hain. Bas yeh yaad rakho, shuru slow hoga, par ek din aapki website duniya dekhegi!
SEO Tags for Blog
- Learn HTML Basics
- HTML for Beginners in Hindi
- Web Development Kaise Shuru Karein
- Coding Step by Step Guide
- Create Your First Website
