Chapter 2: Lists aur Tables - Padosiyon Ki Chugli aur Data Ka Raita!
Namaskar dosto! CC NEWS ke is super-hit HTML tutorial series ke Chapter 2 mein aapka swagat hai. Pichle chapter mein humne skeleton banana seekha aur kuch basic tags ke sath apni ungliyo ki exercise ki. Agar aapne pichla homework nahi kiya hai, toh chullu bhar pani lijiye aur usme apna purana keypad wala phone dubo dijiye!
Khair, aaj hum baat karenge HTML Lists aur Tables ki. Dekhiye, list banana hum Indians ka rashtriya khel hai. Chahe shadi mein kisne kitna lifafa diya uski list ho, ya grocery store se laane wale samaan ki list, ya phir un rishtedaron ki list jinhe agle function mein nahi bulana hai! Ek successful blogger ke liye bhi Lists aur Tables kisi brahamastra se kam nahi hain. Google SEO in bullet points ko dekh kar khushi se naachne lagta hai.
Toh chaliye, bina kisi deri ke shuru karte hain Lists aur Tables ka ye funny safar!
1. HTML Lists: Kyunki Har Cheez Ka Ek Order Hota Hai (Ya Nahi Bhi!)
HTML humein teen tarah ki lists banane ki aazadi deta hai. Chaliye in teeno bhaiyon se milte hain:
A. Unordered List (Bina Number Wali List - Gol Gol Ande)
Maan lijiye aap CC NEWS ke liye ek article likh rahe hain: "Blogger banne ke liye kya-kya chahiye?". Isme order important nahi hai, bas cheezein honi chahiye. Jab kram (order) zaroori na ho, toh hum Unordered List ka use karte hain. Ise banane ke liye hum <ul> (Unordered List) tag ka use karte hain. Iske andar har ek point ko likhne ke liye <li> (List Item) tag lagaya jata hai.
<h3>Blogger Banne Ke Liye Zaruri Samagri:</h3>
<ul>
<li>Ek dimaag (Agar ho toh bahut accha hai, Nahi hai to bhi chalega.)</li>
<li>Chalti hui internet connection (Padosi ka Wi-Fi best hai)</li>
<li>Thoda sa dhairya (Patience)</li>
<li>Chai aur Samosa (Creative ideas ke liye)</li>
</ul>Upar wale code ko jab aap browser mein dekhenge, toh har <li> ke aage ek kala chota sa gol anda (bullet point) dikhega. CSS ki madad se hum in gol andon ko square, ya bina bullet ke bhi kar sakte hain (par makeup ka saaman CSS wale chapter ke liye bacha ke rakhte hain!).
B. Ordered List (Number Wali List - School Ki Line)
Ab sochiye aap CC NEWS par ek tutorial likh rahe hain: "Chai Kaise Banayein?". Isme steps aage-peeche nahi kar sakte. Agar pehle doodh ubal diya aur baad mein gas chalayi, toh kalesh ho jayega. Jahan sequence zaruri ho, wahan hum Ordered List yani <ol> ka use karte hain. Yahan bhi andar ke items ke liye <li> hi lagta hai.
<h3>Masterchef: Special Chai Banane Ki Vidhi</h3>
<ol>
<li>Gas chalao aur patila rakho.</li>
<li>Pani dalo aur usko ubalne do.</li>
<li>Chai patti aur adrak koot ke dalo (Padosi ka sar nahi kootna hai, adrak kootna hai).</li>
<li>Doodh aur cheeni dalo.</li>
<li>Ubaal aane par chhan lo aur piyo.</li>
</ol>Default roop se, browser isme 1, 2, 3, 4 numbers laga deta hai. Lekin agar aapko thoda "Angrez" banna hai aur A, B, C ya Roman numbers I, II, III chahiye, toh aap type attribute ka use kar sakte hain.
<!-- Roman numbers ke liye type="I" lagayein -->
<ol type="I">
<li>Pehla step</li>
<li>Dusra step</li>
</ol>
<!-- Capital ABCD ke liye type="A" lagayein -->
<ol type="A">
<li>Apple</li>
<li>Bat</li>
</ol>C. Nested List (List Ke Andar List - Inception!)
Kayi baar ek list ke andar dusri list banani padti hai. Jaise ek category ke andar sub-categories. HTML isme bhi fail nahi hota. Aap ek <li> ke andar ek aur poori <ul> ya <ol> daal sakte hain. Chaliye dekhte hain:
<h3>Duniya Ke Sabse Khatarnak Log:</h3>
<ul>
<li>Subah 5 baje uthne wale log</li>
<li>Pados wali Auntiyan
<ul>
<li>Sharma Aunty (CCTV Camera)</li>
<li>Verma Aunty (Breaking News Reporter)</li>
</ul>
</li>
<li>Bina sugar ki chai peene wale log</li>
</ul>D. Description List (Dictionary Style - Gyaan Bato)
Ye list thodi special hai. Bloggers ise FAQ (Frequently Asked Questions) ya kisi shabd ka meaning samjhane ke liye use karte hain. Isme teen log hote hain:
<dl>: Description List (Ye baap hai, poori list iske andar aayegi).<dt>: Description Term (Wo shabd ya sawal jisko samjhana hai).<dd>: Description Details (Us shabd ka meaning ya lamba chouda answer).
<h3>CC NEWS Ki Dictionary</h3>
<dl>
<dt><strong>SEO</strong></dt>
<dd>Search Engine Optimization. Ek aisi jadu ki chhadi jisse Google baba khush hote hain aur aapka article upar dikhate hain.</dd>
<dt><strong>Blogger</strong></dt>
<dd>Wo insaan jo raat bhar jag kar content likhta hai aur umeed karta hai ki ek din wo crorepati banega.</dd>
</dl>2. HTML Tables: Data ko Dibbe mein Band Karo
Ab aate hain HTML ke sabse "Complex" lagne wale lekin sabse mazedar topic par: Tables. Jab aapko bahut saara data ek structured form (rows aur columns) mein dikhana ho, jaise Cricket ka scorecard, ya CC NEWS ke reporters ki salary list (jo ki filhal 0 hai), toh hum Table ka use karte hain.
Table banane ke liye hume railway train ka system samajhna hoga:
<table>: Ye poori train hai. Saara tam-jham iske andar hoga.<tr>(Table Row): Ye train ke dibbe (bogies) hain. Har nayi row ke liye naya dibba judega.<th>(Table Heading): Ye VIP seatein hain. Inme likha hua text bold (mota) aur center mein hota hai. Ye generally sabse upar wali row mein lagte hain batane ke liye ki niche kya data aane wala hai.<td>(Table Data): Ye normal seatein hain. Inke andar asli janta (data) baithti hai.
Chaliye Ek Basic Table Banate Hain
<h3>CC NEWS - Top Reporters Ki List</h3>
<table border="1">
<!-- Pehli Row (Dibba 1) - Headings ke liye -->
<tr>
<th>Reporter Ka Naam</th>
<th>Area</th>
<th>Chugli Level</th>
</tr>
<!-- Dusri Row (Dibba 2) - Pehla Data -->
<tr>
<td>Desh Raj</td>
<td>Himachal Pradesh</td>
<td>50% (Intermediate)</td>
</tr>
<!-- Teesri Row (Dibba 3) - Dusra Data -->
<tr>
<td>CC News</td>
<td>Online</td>
<td>100% (Expert)</td>
</tr>
</table>Blogger Note: Upar maine border="1" likha hai taaki table ke chaaron taraf line dikhe. Warna HTML table default roop se bina lines ki hoti hai. Aajkal borders aur design lagane ka kaam CSS se kiya jata hai, HTML se nahi. HTML ka kaam sirf data rakhna hai. Par kyuni hum abhi CSS nahi jante, toh hum is purane tarike (attribute) ka use kar rahe hain.
Table Spanning: Ek Mota Aadmi Do Seatein Le Raha Hai!
Kabhi kabhi table mein kuch data aisa hota hai jisko ek se zyada columns ya rows ki jagah chahiye hoti hai. Ise 'Spanning' kehte hain. Iske liye do super-powers hain:
colspan: Jab aapko ek cell ko baazu wale (left-right) cells par failana ho. (Aade mein failna).rowspan: Jab aapko ek cell ko niche wale (up-down) cells par failana ho. (Lamba failna).
<h3>CC NEWS - Weekly Budget</h3>
<table border="1">
<tr>
<th>Kharcha</th>
<th>Rupaye (Mon, Tue, Wed)</th>
<th>Rupaye (Thu, Fri, Sat)</th>
</tr>
<tr>
<td>Chai aur Samosa</td>
<td colspan="2" align="center">Poore Hafte ka 500 Rs (Dekho fail gaya!)</td>
</tr>
<tr>
<td>Internet Bill</td>
<td>100 Rs</td>
<td>100 Rs</td>
</tr>
</table>Blogger Bhaiyo Ke Liye SEO Pro-Tips (Lists & Tables)
Kyunki aap ek Hindi News Writer aur SEO Visheshagya banne ja rahe hain, toh aapke liye kuch andar ki batein:
- Readability: Bade paragraph likhne se bachein. Log lamba text dekh kar hi bhaag jate hain. Apni news ko chote chote points (
<ul>aur<li>) mein todein. Isse padhne wala bore nahi hota aur page par zyada der tak rukta hai (Low Bounce Rate). - Featured Snippets: Google aajkal search results ke bilkul top par ek box dikhata hai jise 'Featured Snippet' ya 'Position Zero' kehte hain. Google ko tables aur ordered lists (jaise "Top 5 Mobile Phones") bahut pasand aate hain. Apne article mein Table zaroor dalein, Google aapko free mein top rank de sakta hai!
- Semantics: Hamesha sahi jagah par sahi tag use karein. Designing ke liye table ka use kabhi na karein (ye 90s mein hota tha). Table sirf aur sirf tabular data (ankdo) ke liye use karein.
Aapka Aaj Ka Homework (Task 2)
Sirf mundi hila ke padhne se HTML nahi aayegi, haath chalane padenge boss! Aaj aapko do cheezein karni hain:
- Apne text editor mein ek naya HTML page banayein jisme ek Unordered list ho ("Meri Favorite Movies").
- Ek Table banayein jisme 3 Columns hon (Serial No., Dost ka Naam, Udhaar Liye Gaye Paise). Is table ko kam se kam 4 rows (4 doston ka data) se bharein.
Agle chapter mein hum website par photo chipkana (Images) aur ek page se dusre page tak chhalang lagana (Links / Anchor Tags) seekhenge. Tab tak ke liye, Happy Coding!
