Code / Web Basics: HTML & CSS / Unit 1: Your first web page

Links and pictures लिंक और चित्र

Lesson 2 of 14 · about 15 minutes · Connect pages with links and draw pictures right inside HTML.

⚡ 0 XP

Step 1 of 2

Links with <a>

The anchor tag <a> makes a link. Its href attribute says where the link goes, and the text between the tags is what people click.

Full address: <a href="https://www.isro.gov.in">ISRO</a>
A page on the same site starts with /: <a href="/code">Courses</a>
target="_blank" opens the link in a new tab (add rel="noopener" for safety)

Write link text that says where it goes. "ISRO website" is better than "click here".

Example

<p>Read about Chandrayaan on the
  <a href="https://www.isro.gov.in" target="_blank" rel="noopener">ISRO website</a>.</p>
<p>Back to <a href="/code">all courses</a>.</p>

In the preview, links do not open — the console tells you which link was clicked.

🎯 Challenge: My favourite websites +15 XP

Add at least two links:

one full link starting with https:// (for example ISRO or your state’s tourism site) that opens in a new tab with target="_blank"
one link to a page on this site, starting with / (for example /code)

Every link needs clear text of at least 3 letters.

Try twice to unlock the solution (0/2)

index.htmlCtrl ⏎

Preview

Console

Output from console.log appears here.

Checklist

Press Run to check your code.

At least two links with href
One link starts with https://
The https link opens in a new tab
One link goes to a page on this site (starts with /)
Every link has clear text

Lesson notes (text version)

1. Links with <a>

The anchor tag <a> makes a link. Its href attribute says where the link goes, and the text between the tags is what people click.

Full address: <a href="https://www.isro.gov.in">ISRO</a>
A page on the same site starts with /: <a href="/code">Courses</a>
target="_blank" opens the link in a new tab (add rel="noopener" for safety)

Write link text that says where it goes. "ISRO website" is better than "click here".

                <p>Read about Chandrayaan on the
  <a href="https://www.isro.gov.in" target="_blank" rel="noopener">ISRO website</a>.</p>
<p>Back to <a href="/code">all courses</a>.</p>

Challenge: My favourite websites

Add at least two links:

one full link starting with https:// (for example ISRO or your state’s tourism site) that opens in a new tab with target="_blank"
one link to a page on this site, starting with / (for example /code)

Every link needs clear text of at least 3 letters.

2. Pictures: emoji, SVG and alt text

Pictures usually use <img src="..." alt="...">. The alt text describes the picture for people who cannot see it — always write it.

In this course the preview cannot load pictures from other websites, so we use three tricks that work everywhere:

Emoji are just text: <p>🍵 Chai</p>
Inline SVG draws shapes with code: <svg> with <rect> and <circle> inside
data: URIs put a tiny image right inside src

Give an SVG role="img" and an aria-label — that is its alt text.

                <svg viewBox="0 0 100 100" width="100" role="img" aria-label="An orange sun">
  <circle cx="50" cy="50" r="40" fill="orange"/>
</svg>

Challenge: Draw the Tiranga

Finish the Indian flag in SVG. The saffron stripe is done. Add:

a white stripe (fill="#FFFFFF") at y="20"
a green stripe (fill="#138808") at y="40"
a navy <circle> for the chakra in the middle (cx="45" cy="30")
role="img" and an aria-label on the <svg>