Chapter 1: HTML Kya Bawal Hai? Ek Mazedar Shuruat!
Namaskar dosto! Swagat hai aapka is dhamakedar HTML5 tutorial series mein. Agar aap soch rahe hain ki coding bahut boring aur mushkil cheez hai, toh apne dimaag se is galatfaimi ko nikal fenkiye. Aaj se hum HTML ko itne funny aur aasan tarike se seekhenge ki aap sote hue bhi tags type karne lagenge! Ye series khaskar un doston ke liye banayi gayi hai jo asaan bhasha (Hinglish) mein basic se lekar advanced level tak ka master banna chahte hain.
Toh apni kursi ki peti baandh lijiye, kyunki hum HTML ki duniya mein udhaan bharne wale hain!
HTML Aakhir Hai Kya? (Website Ka Kankaal)
Maan lijiye aapko ek zabardast news website banani hai, jaise "CC NEWS". Isko banane ke liye teen pakke doston ki zarurat padti hai. Chaliye inhe ek funny example se samajhte hain:
- HTML (Skeleton ya Haddiyan): HTML ka full form hai HyperText Markup Language. Ye aapki website ka kankaal (skeleton) hai. Socho bina haddiyo ke insaan kaisa lagega? Bas ek jelly ki tarah zameen par fail jayega! Website bhi bina HTML ke waisi hi hai. HTML batata hai ki kahan heading aayegi, kahan paragraph aayega, aur kahan photo chipkani hai.
- CSS (Makeup aur Kapde): CSS ko hum aage aane wale chapters mein alag se detail mein padhenge, lekin abhi ke liye samajh lo ki ye website ka makeup aur fashionable kapde hain. Ye aapki news site ko sundar aur attractive banata hai.
- JavaScript (Dimaag aur Action): Ye website ka dimaag hai. Jab koi user kisi button par click kare toh kya hungama hona chahiye? Ye JS decide karta hai.
Kyunki ye HTML ka tutorial hai, toh humara pura focus sirf "Haddiyon" ka dacha taiyar karne par hoga. Makeup (CSS) baad mein karenge!
Hathiyar Taiyar Karo: Text Editor
Code likhne ke liye hume ek maidan chahiye jise 'Text Editor' kehte hain. Waise toh aap apne computer ke purane Notepad mein bhi code likh sakte hain, par wo purane zamane ke us Nokia phone jaisa hai jisme sirf saanp wala game chalta tha. Boring, right?
Hum use karenge aaj ke zamane ka smartphone, yani VS Code (Visual Studio Code). Ye ek jadu ki chhadi hai jo aadi coding khud hi complete kar deta hai aur aapki galtiyan bhi batata hai. Aap isey free mein download kar sakte hain.
HTML5 Ka Pehla Code: Duniya Walon Ko "Hello" Bolo
Chaliye bina deri kiye apna pehla code likhte hain. Niche diye gaye code ko dhyaan se dekhiye, ghabrana nahi hai, hum iska abhi post-mortem karenge!
<!DOCTYPE html>
<html>
<head>
<title>CC NEWS - Pehla Webpage</title>
</head>
<body>
<h1>Hello Padosiyo! CC NEWS mein aapka swagat hai.</h1>
<p>Aaj ki taza khabar: Maine aakhir kaar HTML seekhna shuru kar hi diya hai! Ab padosi bhi jalenge.</p>
</body>
</html>Code Ka Post-Mortem (Kaun sa Tag kya karta hai?)
HTML tags se milkar banta hai. Tags hamesha angular brackets < > ke andar likhe jate hain. Zyadatar tags jode (pairs) mein aate hain. Ek shuru karne ke liye (Opening Tag) aur ek khatam karne ke liye (Closing Tag jisme / laga hota hai). Chaliye upar wale code ka operation karte hain:
<!DOCTYPE html>: Ye tag browser ka bouncer hai. Ye browser ko chillake batata hai ki "Bhai darwaza khol, main HTML5 hoon, koi purane zamane ka version nahi hoon!" Ye tag page ke sabse upar aata hai.<html>: Ye aapka main plot hai. Is tag ke andar hi saari website banti hai. Jaise ghar ban banane ke liye zameen ki boundary hoti hai, waisa hi HTML file ki ye boundary hai.<head>: Ye website ka wo secret locker ya dimaag hai jo bahar public ko nahi dikhta. Yahan SEO tags, CSS links, aur page ka title rakha jata hai.<title>: Ye aapki dukaan ka board hai. Jo naam aap yahan likhenge, wo browser ke tab (sabse upar) par dikhega.<body>: Ye aapka main drawing room hai jahan saara function hoga! Jo kuch bhi aap user ko dikhana chahte hain (text, images, videos), wo sab is<body>tag ke andar hi likha jayega.
Heading Tags: Dada se Lekar Pote Tak Ka Safar (H1 to H6)
Jab aap koi news article likhte hain, toh usme headings ka hona bahut zaroori hai. HTML mein 6 alag-alag size ki headings hoti hain. Ise aap ek joint family ki tarah samajh sakte hain:
<h1>Main H1 hoon - Ghar ka Dada ji, Sabse bada aur sabki bolti band!</h1>
<h2>Main H2 hoon - Papa, Dada ji se thode chote.</h2>
<h3>Main H3 hoon - Bada Bhai.</h3>
<h4>Main H4 hoon - Chota Bhai.</h4>
<h5>Main H5 hoon - Ghar ka baccha.</h5>
<h6>Main H6 hoon - Padosi ka baccha, jisko koi bhaav nahi deta (Sabse chota).</h6>Ek Bahut Bada SEO Raaz (Blogger Bhaiyon Ke Liye): Google ko impress karna hai? Toh hamesha yaad rakhna ki ek page par sirf ek hi baar <h1> tag ka use karein (jo aapka main topic ya news headline hoga). Baaki sub-headings ke liye <h2> aur <h3> ka use karna chahiye. Ye best SEO practice hai!
Paragraph Tag: Lamba Bhashan Dene Ke Liye
Jab aapko lamba chouda bhashan dena ho, ya padosi ki lambi chugli karni ho (mera matlab hai detailed news likhni ho), toh hum <p> tag ka use karte hain. p matlab paragraph.
<p>Aaj ki breaking news! Desh Raj ne HTML seekh kar apni khud ki website bana li hai. Saare padosi hairan aur pareshan hain. Dekhte rahiye CC NEWS aisi hi mazedar khabron ke liye!</p>Text Formatting Tags: Apne Shabdon Ko Stylish Banayein
Bina CSS ke bhi hum HTML mein apne text ko thoda nakhrebaaz bana sakte hain. Chaliye dekhte hain kuch mazedar formatting tags:
- Bold (Gym Bros):
<b>aur<strong>. Ye dono tags text ko gym bhej kar mota (bold) kar dete hain. Par SEO ke hisaab se<strong>tag zyada powerful mana jata hai kyunki ye search engine ko batata hai ki "Ye word bahut important hai bhai!" - Italic (Tedhe Log):
<i>aur<em>. Ye text ko thoda tedha kar dete hain. Fashion ke liye! - Highlight (Exam Time Ki Yaad):
<mark>. Ye aapke text par peela (yellow) highlighter fer deta hai. - Discount Wala Tag:
<del>. Isko Delete tag kehte hain. Ye text ke beech mein ek line kheench deta hai. E-commerce sites bahut use karti hain, jaise:
Price:<del>1000 Rs</del> 500 Rs!
<p>Ye normal text hai, par <strong>ye bodybuilder text hai!</strong></p>
<p>Exam aane wale hain, isliye important baato ko <mark>highlight karna</mark> padega.</p>
<p>Kal ka offer: Apple phone sirf <del>1,50,000</del> 150 rupaye mein! (Joke hai bhai)</p>Tod-Phod Wale Tags: br aur hr (Empty Tags)
Abhi tak humne jitne bhi tags dekhe, wo sab jode (pairs) mein aate the (Opening aur Closing). Par HTML mein kuch Single munde bhi hote hain, jinhe close karne ki zarurat nahi padti. Inhe Empty Tags ya Self-closing Tags kehte hain.
- Breakup Tag
<br>: HTML bahut dheeth hota hai. Agar aap text editor me 10 bar "Enter" daba kar nayi line banayenge, tab bhi browser usko ek hi line me dikhayega. Line todne (break) ke liye<br>tag ka use hota hai. Ye jahan lagega, aage ka text agli line me chala jayega. - Padosi Ki Deewar
<hr>:hrka matlab hai Horizontal Rule. Agar aapko do paragraph ke beech mein ek lambi seedhi line kheench kar dono ko alag karna hai (jaise do bhaiyo ka batwara), toh is tag ka use karein.
<p>Pehli line.<br>Aur ye gayi dusri line neechay!</p>
<hr>
<p>Lambi line ke baad naya topic yahan se shuru.</p>HTML Comments: Secret Batein Jo Public Ko Nahi Dikhani
Kabhi kabhi code likhte waqt hum khud ke liye notes chhodna chahte hain. Jaise "Bhai yahan baad mein banner lagana yaad rakhna". Agar hum isey direct HTML me likh denge toh ye website par public ko dikh jayega, jo ki beizzati wali baat hai.
Iske liye hum Comments ka use karte hain. Comment ke andar likhi gayi koi bhi baat browser hide kar deta hai. Wo sirf aur sirf code open karne wale developer ko dikhti hai.
<!-- Bhai yahan par main CC NEWS ka bada sa logo lagane wala hoon kal subah uth ke -->
<p>Website jald hi aa rahi hai!</p>Aapka Aaj Ka Task (Homework!)
HTML padhna aasaan hai, par bina likhe aap iske master nahi ban sakte. Aapka aaj ka homework hai ki ek basic HTML page banaiye jisme aapka naam ek <h1> heading mein ho, uske neeche ek horizontal line <hr> ho, aur phir ek paragraph <p> ho jisme aap apne bare mein do line likhein jisme kuch words bold <strong> kiye gaye hon.
Ab Aage Kya? (Next Chapter Trailer)
Mubarak ho! Aapne safaltapurvak website ka basic kankaal banana seekh liya hai. Aap ek official HTML coder ban chuke hain! Lekin rukiye, picture abhi baaki hai mere dost.
Agle chapter mein kya hungama hoga?
Agle chapter mein hum dher saari "Lists" banayenge. Jaise market se sabji laane ki list, ya un padosiyo ki list jinko website banne ke baad jalana hai (Ordered aur Unordered lists!).
