Images aur Links - Website Mein Rang Bharo aur Chhalange Lagao

Chapter 3: Images aur Links - Website Mein Rang Bharo aur Chhalange Lagao!

Swagat hai dosto Chapter 3 mein! Ab tak humne CC NEWS ki haddiyan jodh li hain (Headings, Paragraphs) aur padosiyon ki list bhi bana li hai (Lists, Tables). Par yaar, bina photo ke news aisi lagti hai jaise bina namak ke daal. Aur agar website mein ek page se dusre page par jaane ka raasta (Link) hi na ho, toh wo website nahi, jail ban jayegi!

Toh aaj ka mudda bahut hi mazedar aur important hai. Hum seekhenge ki apne web pages mein rang-birangi photos kaise lagate hain, aur do pages ke beech me rishtedari (Links) kaise banate hain. Tayaar ho? Chaliye shuru karte hain!

1. HTML Images: Bina Photo Sab Soona!

Apne web page par photo dikhane ke liye hum <img> tag ka use karte hain. Ye tag bhi un "Single Munde" tags (Empty Tags) me se ek hai jisko close karne ki zaroorat nahi padti, jaise <br> aur <hr>. Ek hi line mein saara kaam ho jata hai.

Lekin sirf <img> likh dene se jadu nahi hoga. Humein isko batana padega ki photo laani kahan se hai. Iske liye do bahubali Attributes (powers) use hote hain:

• src (Source): Ye batata hai ki photo ka address kya hai (Photo kahan rakhi hai).
• alt (Alternate Text): Ye SEO ke liye sabse zaruri cheez hai! Agar kisi wajah se (internet slow hone ke karan) photo load nahi ho paati, toh uski jagah ye text dikhai deta hai. Sath hi, Google image search ko ishi se pata chalta hai ki photo mein aakhir hai kya.

Chaliye Photo Chipkate Hain:

<!-- CC NEWS ka bada sa logo lagane ka code -->
<h3>Dekhiye Humara Naya Logo!</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSuSFVb-TrDPvTEFxBQ9uIKZJaqcT8bTsui0nZeWXmBD-Yrpr554K3X02IK89qG_hzoegyaDfbqCOfK5ymsVhaZsm952Fa05JpuTVqpatt-V6agO7YGt4-Ayikw1UllbnIYDvVJhWybBp9vgJm1_Hat6LrHku2kK6DcA68zgcEh0zcCDE/s1600/6442.png" alt="CC News Ka Sabse Sundar Logo" width="300" height="150">

Code Ka Post-Mortem:

• src="cc-news-logo.jpg": Iska matlab hai ki jahan meri HTML file save hai, usi folder mein "cc-news-logo.jpg" naam ki photo bhi rakhi hui hai.
• width="300" height="150": Ye humne height aur width (lambayi aur chaudayi) fix kar di. Agar ye nahi denge toh photo apne asli size (shayad pure screen par!) me fail jayegi. (Waise modern web dev mein size set karne ka kaam CSS karta hai, par html me jaan lene mein koi burayi nahi hai).

Blogger Pro-Tip: Alt Text (SEO Ka Brahmaastra)

Blogger bhaiyo, dhyan dena! Google bots ki aakhein nahi hotin. Wo photo ko dekh kar nahi samajh sakte ki usme Virat Kohli hai ya padosi ka kutta. Wo photo ko samajhne ke liye aapke diye gaye alt text ko hi padhte hain. Agar aapne alt tag khali chhod diya, toh aapne SEO mein apne hi pair par kulhadi maar li. Hamesha apni image ko describe karne wala keyword-rich alt text zaroor likhein!

---

2. HTML Links: Ek Jagah Se Dusri Jagah Udanchhoo! (Anchor Tag)

Website ka asli maza hi Links mein hai. Socho agar Wikipedia me kisi neele (blue) word par click karke naya page open hi na ho, toh kaisa lagega? Internet 'Web' isi liye kehlata hai kyunki isme saare pages ek dusre se jude (linked) hote hain.

Link banane ke liye hum Anchor Tag yani <a> ka use karte hain. Iska main sathi hota hai href attribute. href ka matlab hai Hypertext Reference, yani wo pata (URL) jahan click karne ke baad user ko bhejna hai.

Basic Link Banane Ka Tarika:

<p>Agar aapko aur chatpati khabrein padhni hain, toh <a href="www.ccnews.in">yahan click karein</a>.</p>

Upar wale code me, screen par user ko sirf "yahan click karein" blue colour me aur underline ke sath dikhai dega. Jaise hi wo uspe click karega, bhai Google.com par land kar jayega!

Links Ke Prakaar (Types of Links)

Links bhi alag-alag rishte nibhate hain:

A. External Link (Padosi Ke Ghar Jaana)

Jab aap apni website se kisi dusri website (jaise Facebook, YouTube) ka link dete hain. (Upar wala example external link hi tha).

B. Internal Link (Apne Hi Ghar Ke Dusre Kamre Mein Jaana)

Maan lijiye aapne do page banaye hain: ek 'home.html' aur dusra 'about.html'. Dono ek hi folder me rakhe hain. Ab aapko Home page se About page par bhejna hai:

<a href="www.ccnews.in">Hamare Bare Mein Janne Ke Liye Click Karein (Par Hum Batayenge Nahi!)</a>

Internal linking SEO ke liye Ram-baan hai. Ye Google ko samajhne me madad karta hai ki aapki website ka structure kaisa hai aur kon sa page kitna important hai.

C. Naye Tab Mein Kholna (Naya Darwaza Banana)

Aap chahte hain ki user aapki news website chhod kar na jaye, bas naye Tab me link khul jaye. Iske liye hum target="_blank" attribute ka use karte hain.

<a href="www.ccnews.in" target="_blank">CC News Open New Tab</a>

D. Image Ko Link Banana (Photo Pe Click, Jadu Shuru!)

Hum sirf text ko hi nahi, balki photo ko bhi ek button (link) bana sakte hain. Bas <img> tag ko <a> tag ke andar daal do. Pura inception wala scene hai!

<!-- CC NEWS ke logo par click karne se home page khulega -->
<a href="www.ccnews.in">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSuSFVb-TrDPvTEFxBQ9uIKZJaqcT8bTsui0nZeWXmBD-Yrpr554K3X02IK89qG_hzoegyaDfbqCOfK5ymsVhaZsm952Fa05JpuTVqpatt-V6agO7YGt4-Ayikw1UllbnIYDvVJhWybBp9vgJm1_Hat6LrHku2kK6DcA68zgcEh0zcCDE/s1600/6442.png" alt="Home Page Par Jayein" width="200">
</a>

Aapka Aaj Ka Homework (Task 3)

Chaliye aaj ki class ka practical kaam shuru karte hain:

1. Ek naya page banaiye. Usme apni (ya kisi bhi animal ki) ek photo lagaiye <img> tag ka use karke. Dhyaan rahe ki alt attribute miss na ho!
2. Us photo ke niche ek paragraph likhiye aur us paragraph mein koi aisa shabd chuniye jise click karke kisi mazedar website (jaise kisi funny YouTube video) ka naya tab target="_blank" khul jaye.

Photo lagate waqt ye baat hamesha yaad rakhna ki photo ka naam aur extension (.jpg, .png) wahi hona chahiye jo code mein likha hai, aur photo usi folder me honi chahiye jahan HTML file hai, warna sirf 'toota hua photo' wala icon aur Alt text dikhega.

Agle chapter mein hum form bharna seekhenge (jaise Login form, Contact form) jisse aap apne readers ka data collect kar saken. Milte hain break ke baad!