CBSE Class 10 Foundation of Information Technology: Inserting Images and Links in HTML NCERT Solutions

Reviewed by · Updated on

NCERT Solutions PDF Class 10 PDF

This chapter, "Inserting Images and Links in HTML," is a crucial part of the CBSE Class 10 Foundation of Information Technology syllabus. These NCERT Solutions provide comprehensive explanations and step-by-step answers for exercises focused on embedding images and creating hyperlinks within web pages. Students will learn about essential HTML tags like `<img>` and `<a>`, and their attributes such as `src`, `alt`, `href`, and how to control image alignment and dimensions. The solutions also cover the concept of hypertext and how to link between different web pages. Mastering these concepts is vital for building interactive and visually appealing websites. These solutions are designed to help students understand the core principles of web page construction and prepare effectively for their examinations by reinforcing practical HTML coding skills.

Home

Quick info

BoardCBSE
ClassClass 10
SubjectFoundation of Information Technology
Session2026
LanguageEnglish
TypeNCERT Solutions
Chapter6. Inserting Images and Links in HTML

Chapter summary

Chapter 6 of the CBSE Class 10 Foundation of Information Technology syllabus focuses on the fundamental techniques for inserting images and creating links in HTML. The NCERT Solutions cover the usage of the `<img>` tag with its `src` and `alt` attributes for displaying images and providing alternative text, respectively. It also explains how to control image display using attributes like `align`, `width`, and `height`. Furthermore, the solutions delve into the concept of hypertext and the `<a>` tag for creating hyperlinks, including internal and external linking. This chapter equips students with the basic skills to enhance web pages with visual elements and navigation.

Learning outcomes

  • Understand the purpose and usage of the `alt` attribute in the `<img>` tag.
  • Learn to insert images into an HTML document using the `<img>` tag.
  • Identify and correct issues related to image alignment in HTML.
  • Explain the function of `width` and `height` attributes for images.
  • Define hypertext and its role in web navigation.
  • Create hyperlinks using the `<a>` tag and `href` attribute.
  • Differentiate between internal and external linking.
  • Apply HTML tags like `<sup>` and `<sub>` for displaying superscripts and subscripts.

Topics covered

Paper topics

  • Inserting Images in HTML
  • The `<img>` tag
  • Image `src` attribute
  • Image `alt` attribute
  • Image alignment
  • Image `width` and `height` attributes
  • Hypertext
  • Linking in HTML
  • The `<a>` tag
  • The `href` attribute
  • Internal Linking
  • External Linking
  • Superscript and Subscript tags (`<sup>`, `<sub>`)

Important topics

  • Using `<img>` tag with `src` and `alt` attributes
  • Creating hyperlinks with `<a>` and `href` attributes
  • Understanding Hypertext
  • Controlling image dimensions (`width`, `height`)
  • Accessibility considerations with `alt` text

PDF preview

Read page by page below. PDF is streamed from the official NCERT website — no download button on this page.

Loading document …
Page of
Loading page …

Questions and Solutions

Question 1

How can text be displayed in place of an image for users whose browsers do not support images? (CBSE 2007)
Solution:

The `alt` attribute of the `` tag is used to specify alternate text. This text will be displayed in the browser if the image cannot be loaded or if the user's browser does not support image display. This ensures that the user still gets some information about the content the image was supposed to convey.

Question 2

Write an HTML statement that inserts an image named 'school.jpg' found in the 'images' folder of the current folder. In case the image cannot be found, it should display 'Schools in India'.
Solution:

To insert the image and provide alternate text, you would use the `` tag with the `src` and `alt` attributes. The `src` attribute points to the image file's location, and the `alt` attribute provides the text to display if the image is not available.

<img src = "images\/school.jpg" alt = "Schools in India">

Question 3

The following code is written to align the image in the center of the browser's window:

<img src = "image.jpg" align = "center">

However, the desired result is not achieved. Mention the reason.
Solution:

The reason the desired result is not achieved is that `center` is not a valid value for the `align` attribute in the `` tag. While `align` could accept values like `left`, `right`, `top`, `middle`, and `bottom` in older HTML versions, `center` was not a standard option. Modern web development uses CSS for alignment.

Question 4

Why are the `width` and `height` attributes used for images?
Solution:

The `width` and `height` attributes are used to specify the dimensions of an image directly within the HTML code. By providing these dimensions, the browser can reserve the correct amount of space for the image before it has fully downloaded. This helps to prevent the page layout from jumping around as images load, leading to a faster perceived loading time and a better user experience.

Question 5

What do you mean by hypertext?
Solution:

Hypertext is text that contains links to other texts or resources. It is the fundamental concept behind the World Wide Web, allowing users to navigate between different pieces of information by clicking on specially formatted words or phrases (hyperlinks). When you click on a hypertext link, it directs you to the associated content, which could be on the same page, a different page, or even a different website.

Question 6

In HTML, how can linking be done?
Solution:

Linking in HTML is primarily done using the anchor tag, represented as ``. This tag is used in conjunction with the `href` attribute, which specifies the URL (Uniform Resource Locator) of the destination. The text or content placed between the opening `` and closing `` tags becomes the clickable hyperlink.

Question 7

Explain linking.
Solution:

Linking, in the context of web pages, refers to the process of creating a connection between one web page (or a specific part of it) and another. When a user clicks on a link, they are directed to the target resource. Linking is what enables navigation across the internet. There are two main types of linking: internal linking, which connects pages within the same website, and external linking, which connects to pages on different websites.

Question 8

What happens when we click on a hyperlink in a Web page? (CBSE 2008)
Solution:

When you click on a hyperlink in a web page, the browser interprets the link's destination specified by the `href` attribute. It then navigates the user to that destination. This could mean loading a different web page, scrolling to a specific section within the current page, opening a file, or initiating an email composition, depending on the type of link created.

Question 9

Give the expansion of the following:
  1. alt
  2. <a>
Solution:
  1. `alt` is the abbreviation for the 'alternate text' attribute, used primarily with the `` tag.
  2. `` is the HTML tag used for creating hyperlinks, known as the anchor tag.

Question 10

Write the HTML command to display the following in your Web page: A2 + B2 (CBSE 2006)
Solution:

To display mathematical expressions with superscripts in HTML, you use the `` tag. The text or number enclosed within the `` tags will be rendered as a superscript.

A<sup>2</sup> + B<sup>2</sup>

Question 11

Write the output on the Web page for the following HTML command: <u>Atomic weight of </u>O2
Solution:

The HTML command uses the `` tag for underlining and the `` tag for subscript. The `` tag will underline the text 'Atomic weight of', and the `` tag will display '2' as a subscript after 'O'.

The output on the Web page will be: Atomic weight of O2

Question 1

Describe the use of the `alt` attribute with the `` tag.
Solution:

The `alt` attribute, which stands for 'alternate text', is a crucial attribute for the `` tag in HTML. Its primary purpose is to provide a textual description of the image. This text serves several important functions:

  1. Accessibility: Screen reader software used by visually impaired users reads the `alt` text aloud, allowing them to understand the image content.
  2. Image Loading Issues: If an image fails to load due to a broken link, slow connection, or incorrect file path, the `alt` text is displayed in its place. This gives the user an idea of what the image was supposed to be.
  3. Search Engine Optimization (SEO): Search engines can use the `alt` text to understand the content of the image, which can help in image search results.
It is considered good practice to always include a descriptive `alt` attribute for every image to enhance the usability and accessibility of your web documents.

Question 2

Write the HTML code to display an image on the right side of the page. (CBSE 2016)
Solution:

To display an image on the right side of the page, you can use the `align` attribute with the value `right` within the `` tag. However, it's important to note that the `align` attribute is deprecated in modern HTML standards. The recommended approach for controlling image placement is by using CSS. For older HTML compatibility or simpler cases, the `align` attribute can be used as follows:

<img src = "your_image.jpg" alt = "Description of image" align = "right">

In this code, `your_image.jpg` should be replaced with the actual path to your image file, and `"Description of image"` should be replaced with a relevant alternative text.

Common mistakes

  • Using invalid values for the `align` attribute with the `<img>` tag.
  • Forgetting to provide `alt` text for images, impacting accessibility.
  • Incorrectly specifying image paths in the `src` attribute.
  • Not understanding the difference between `<sub>` and `<sup>` tags.
  • Misusing the `<a>` tag or `href` attribute when creating links.

Revision tips

  • Practice inserting various image types and experiment with `alt`, `width`, and `height` attributes.
  • Create a simple HTML page with multiple hyperlinks to different sections and external websites.
  • Review the syntax for `<img>` and `<a>` tags to ensure accuracy.
  • Understand the purpose of `<sub>` and `<sup>` tags for specific text formatting.
  • Test your HTML code in a browser to see the visual output of your image and link implementations.

Practice MCQs

Q1. Which attribute of the `<img>` tag is used to display text when an image cannot be loaded?

Q2. What is the primary purpose of the `href` attribute in an anchor `<a>` tag?

Q3. Which HTML tag is used to create a hyperlink?

Q4. What does the `<sub>` tag in HTML do?

Q5. Which of the following is NOT a valid value for the `align` attribute of the `<img>` tag in older HTML versions?

Frequently asked questions

What is the purpose of the `alt` attribute in an `<img>` tag?

The `alt` attribute provides alternative text for an image. This text is displayed if the image cannot be loaded by the browser and is also used by screen readers for visually impaired users, improving accessibility.

How do you create a link to another web page in HTML?

You create a link using the anchor tag `<a>` with the `href` attribute. The `href` attribute specifies the URL of the page you want to link to, and the text between the opening `<a>` and closing `</a>` tags is what the user clicks on.

Can I center an image using the `align` attribute?

In modern HTML, the `align` attribute for images is deprecated. While older browsers might have supported `align='center'`, it's not a standard value. Centering is best achieved using CSS (e.g., `text-align: center;` on a parent element or `margin: auto;` on the image itself).

What is hypertext?

Hypertext is text that contains links to other texts or resources. When you click on a piece of hypertext (like a link on a webpage), you are navigated to the linked content, which could be another part of the same page, a different page, or even a different website.

Why are `width` and `height` attributes important for images?

Specifying `width` and `height` attributes for images helps the browser reserve space for the image before it fully loads. This prevents the page layout from shifting unexpectedly as images download, improving the user experience and page rendering speed.

What is the difference between internal and external linking?

External linking connects to a page on a different website or a different domain. Internal linking connects to another page within the same website or even to a specific section (using an ID) on the current page.

Important links

Content reviewed by the NCERT Help team. Editorial Team and update policy

NCERT Solutions PDF PDF on NCERT Help. URL unchanged for search indexing.