HTML, CSS & JavaScript · Chapter 1.4 · Basic level

Images & Clickable Links (<img>, <a> & Attributes)

फ़ोटो और क्लिक करने वाले लिंक्स (<img>, <a> और Attributes)

A plain text page feels incomplete without pictures and clickable links! Here you learn Attributes — extra settings written inside the opening tag as name="value". For a picture, <img src="trophy.png" alt="Winner Trophy"> uses src (photo address) and alt (backup label). For a link, <a href="https://google.com">Search</a> uses href (destination website URL)!

बिना फ़ोटो और लिंक्स के वेबसाइट अधूरी लगती है! यहाँ हम सीखेंगे Attributes (एट्रिब्यूट्स) — यानी शुरुआती टैग के अंदर दी गई अतिरिक्त जानकारी (नाम="वैल्यू")। फ़ोटो के लिए <img src="trophy.png" alt="Trophy"> में src फ़ोटो का पता बताता है। और लिंक के लिए <a href="https://google.com">Search</a> में href बताता है कि क्लिक करने पर किस वेबसाइट पर जाना है!

Open this chapter in the live classroom HTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<img>: Image tag — displays a picture on the page (self-closing, no </img>).; इमेज टैग — पेज पर फ़ोटो दिखाता है (इसमें </img> बंद करने की ज़रूरत नहीं)।
src="...": Source attribute — the file name or URL of the image (trophy.png, rocket.png).; Source (स्रोत) — फ़ोटो की फ़ाइल का नाम या पता (जैसे trophy.png, rocket.png)।
alt="...": Alternative text — shown if the image fails to load, and read by screen readers.; वैकल्पिक नाम — अगर धीमे इंटरनेट से फ़ोटो न खुले तो यह शब्द दिखता है।
<a href="...">: Anchor (Link) tag — href holds the web address to open when clicked.; लिंक टैग — href में वह वेबसाइट पता लिखते हैं जहाँ क्लिक करने पर जाना है।
target="_blank": Opens the link in a fresh browser tab.; लिंक को नए ब्राउज़र टैब में खोलता है।

Ready example

<h2>🏆 Champion Showcase</h2>
<img src="trophy.png" alt="Golden Trophy" width="140">
<img src="rocket.png" alt="Space Rocket" width="140">
<br><br>
<a href="https://truevacancy.in" target="_blank">🌐 Visit TrueVacancy Academy</a>

What you will see: Glowing Trophy & Rocket illustrations appear along with a real clickable website link!

प्रिव्यू में चमकती हुई ट्रॉफी और रॉकेट के चित्र तथा क्लिक करने वाला लिंक दिखाई देगा!

Line by line

<img src="trophy.png" alt="Golden Trophy" width="140">: Displays our built-in Golden Trophy illustration at 140px width.; trophy.png ट्रॉफी का चित्र 140 पिक्सेल चौड़ाई में दिखाता है।
<img src="rocket.png" alt="Space Rocket" width="140">: Displays the Space Rocket illustration right beside it.; बगल में rocket.png स्पेस रॉकेट का चित्र दिखाता है।
<a href="https://truevacancy.in" target="_blank">...</a>: Creates a clickable link button to TrueVacancy.; क्लिक करने योग्य नीला वेबसाइट लिंक बनाता है।

Common mistake

✗ Wrong

<a url="https://google.com">Google</a>

✓ Right

<a href="https://google.com">Google</a>

Anchor links always use href="..." (Hypertext Reference), never url= or src=!

लिंक टैग <a> में पता हमेशा href="..." से दिया जाता है (src सिर्फ़ फोटो <img> में लगता है)!

Your task

Add an <img src="trophy.png"> image and below it create a clickable <a href="https://google.com">...</a> link!

एक <img src="trophy.png"> फ़ोटो लगाओ और उसके नीचे <a href="https://google.com">...</a> लिंक बनाओ!

Write <img src="trophy.png" alt="Trophy" width="150">.
फ़ोटो के लिए <img src="trophy.png" alt="Trophy" width="150"> लिखो।
Add <br> and write <a href="https://google.com">Search</a>.
<br> लगाकर <a href="https://google.com">Search</a> लिंक लिखो।
Click ▶ Run & Preview!
▶ Run & Preview दबाकर फ़ोटो और लिंक चेक करो!

Starter code for the task

<h3>🏆 Meri Trophy</h3>
<!-- TODO 1: img tag lagao: src="trophy.png" alt="Winner Trophy" width="150" -->

<br><br>
<!-- TODO 2: a tag (link) banao: href="https://google.com" aur beech mein "Search on Google" likho -->

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

Attributes are extra settings inside the opening tag: name="value".
<img src="..." alt="..."> shows a picture; alt describes it if it cannot load.
<a href="...">text</a> makes a link; target="_blank" opens it in a new tab.

Attributes ओपनिंग टैग के अंदर की अतिरिक्त सेटिंग हैं: name="value"।
<img src="..." alt="..."> फ़ोटो दिखाता है; फ़ोटो न खुले तो alt उसका विवरण बताता है।
<a href="...">text</a> लिंक बनाता है; target="_blank" उसे नए टैब में खोलता है।

Quick quiz

Which attribute inside <a> specifies the website address to open?

<a> टैग में वेबसाइट का लिंक देने के लिए कौन-सा एट्रिब्यूट लिखते हैं?

src
href
alt
link

Show the answer

Answer: B (href)

<a href="https://..."> sets the destination URL; src is for <img>.

<a href="..."> लिंक का पता बताता है, जबकि src फोटो (<img>) में लगता है।

Practice problems for this chapter

Taj Mahal Photo Card (fill the attributes) · Basic · Fill in the blanks
ताज महल फ़ोटो कार्ड (attributes भरो)

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.