Class VI · Computer Applications · More on HTML

More on
HTML.

Take your HTML skills to the next level. Learn how to add images, create organized tables, link pages together with hyperlinks, and build interactive forms to collect user input.

Start the lesson ↗ Question & Answers ↓ Exercise ↓ Workbook ↓

<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <img src="image.jpg" alt="My Image">
    <a href="page2.html">Click Here</a>
  </body>
</html>

Key elements: Images, links, tables, and forms bring your web pages to life.

AT A GLANCE

What you will learn.

This chapter covers the essential elements for building interactive and well-structured web pages: adding images, creating tables, using hyperlinks, and designing forms.

IMAGES & TABLES

Master the <img> tag and its attributes. Learn to organise data neatly using table rows, headers, and data cells.

HYPERLINKS

Connect web pages using the <a> (anchor) tag. Understand external, internal, and image links.

FORMS & INPUTS

Build interactive forms using textboxes, radio buttons, checkboxes, drop-downs, and submit buttons.

01 · COMPLETE LESSON

HTML elements, step by step.

Study each module slowly. Each one builds on the previous one, so go in order.

Module 1 · Adding Images

1. Bringing web pages to life with images

A web page without pictures is incomplete. The <img> tag is used to add an image to a web page. It is an empty tag, meaning it does not have a closing tag.

Key Attributes of the `<img>` tag

Attribute	What it does
src	Specifies the path or name of the image file (e.g., `src="Tooth.jpg"`).
alt	Alternative text displayed if the image cannot be loaded. It is also used by search engines.
width & height	Changes the size of the image (in pixels). If only one is specified, the other adjusts proportionately.
border	Adds a border around the image. The value specifies the thickness in pixels.

Exam point: The alt attribute is crucial. It tells the user what the image is supposed to be if it fails to load. For example: <img src="Tooth.jpg" alt="This is an image of a tooth">.

Module 2 · Creating Tables

2. Organising data with tables

Tables are used to organise data into rows and columns. They can also be used to design a web page layout.

Basic Structure of an HTML Table

<table>: The main container for the table.
<caption>: Provides a title for the table (immediately after <table>).
<tr>: Defines a table row.
<th>: Defines a header cell (bold and centered by default).
<td>: Defines a standard data cell.

Merging Cells

rowspanMerges cells across rows. For example, rowspan="2" spans the cell over two rows.

colspanMerges cells across columns. For example, colspan="3" spans the cell over three columns.

borderAn attribute of the <table> tag. If not specified, the table displays without borders.

Module 3 · Creating Hyperlinks

3. Connecting the web with hyperlinks

A hyperlink is a special text or image that allows you to navigate from one web page to another. We use the <a> (anchor) tag with the href attribute.

General form: <a href="url">link text</a>

Types of Hyperlinks

External Links: Link to other web pages or websites (e.g., <a href="https://www.google.com">Google</a>).
Internal Links: Link to different sections within the same web page. We use the name attribute to define a section, and href="#sectionName" to link to it.
Image Links: Using an image as a clickable link by wrapping the <img> tag inside the <a> tag: <a href="url"><img src="image.jpg"></a>.

Default Link Colors: Blue = unvisited, Red = active (being clicked), Purple = visited.

Module 4 · Creating Forms

4. Collecting user input with forms

HTML forms are used to accept user inputs. They provide an easy way for users to interact with web applications.

Common Input Elements

Element	Purpose
`<input type="text">`	Single-line text input.
`<textarea>`	Multi-line text input (uses `rows` and `cols`).
`<input type="password">`	Masks the user's input with asterisks.
`<input type="checkbox">`	Allows users to select multiple options.
`<input type="radio">`	Allows users to select a single option from a group.
`<select>` & `<option>`	Creates a drop-down list.
`<input type="submit">`	Submits the form data.

Form Attributes

action: Specifies the URL of the web page that will process the form data.
method: Defines how the data is submitted. get (default) appends data to the URL; post sends data securely in the background.

02 · QUESTION & ANSWERS

Textbook questions, answered.

Tap any question to reveal the model answer.

Q.2 (a). What are input elements in an HTML form? Which input element will you use to allow the user to select any one option from a set of multiple options?

Input elements are used to accept information from a user in different ways. I will use radio buttons in the HTML form as I want the user to select one option from the given 3-4 options.

Q.2 (b). Write the HTML code to display an image "mango.png" with a width of 400 pixels and a border of 2 pixels. It should display the name of the file in case the image cannot be displayed.

To display the file name if the image cannot be loaded, we use the alt attribute.

<html>
<head>
  <title>Mango</title>
</head>
<body>
  <h1>King of Fruit</h1>
  <img src="mango.png" alt="mango.png" width="400" border="2">
</body>
</html>

Q.2 (c). Write the HTML code to display a table with a border of width 2 pixels. The table should have columns for Name and Roll No.

<html>
<head>
  <title>Class VI</title>
</head>
<body>
  <table border=2>
    <caption>List of Students</caption>
    <tr>
      <th>Name</th>
      <th>Roll No.</th>
    </tr>
    <tr>
      <td>Aarav</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Ankit</td>
      <td>2</td>
    </tr>
  </table>
</body>
</html>

Q.2 (d). Disha created a web page containing text and images on 'Different types of flowers'. What will be the HTML code to display the image "rose.jpg", so that clicking on it opens the web page "rose.htm"?

She should create an image link by combining the anchor tag and the image tag.

<a href="rose.htm"><img src="rose.jpg"></a>

When she clicks on the image, the specified web page will open.

Q.2 (e). You are developing an online registration form for a tech conference. Answer the following questions to create the forms.

i. Which attribute of the <form> element will you use to specify the URL of the web page to process the form when it is submitted?

Ans. Action attribute

ii. What value will you give for the method attribute of the <form> tag to transmit the form data to the server in a secure way?

Ans. Post

iii. Which value of the method attribute in the <form> tag will submit the form data as a part of the web page's URL?

Ans. Get

03 · LET US EXERCISE

Test what you have learnt.

Attempt each question first, then reveal the answer to check yourself.

Question 1

Choose the correct option.

(a) Which attribute of the <img> tag specifies the text to be displayed in place of the image, if the image cannot be loaded in the browser?

width
border
alt
src

Show answer

(iii) alt. The alt attribute provides alternative text for an image if it fails to load.

(b) What is the purpose of the colspan attribute in a <td> tag?

Sets the column width
Merges multiple cells across columns
Defines the column spacing
Specifies the column alignment

Show answer

(ii) Merges multiple cells across columns. colspan allows a single cell to span across multiple columns.

GIF format is a low-resolution image file format.
It can be either static or animated.
It is generally used for simple logos, icons, buttons, and symbols.
All of the above

Show answer

(iv) All of the above. GIFs are low-resolution, support animation, and are perfect for simple graphics.

(d) When will you use internal links in a web page?

When you want to create a link to another web page
When you want to create a link to an image file
When you want to create a link to a section in the same web page
When you want to create a link to a section in another web page

Show answer

(iii) When you want to create a link to a section in the same web page. Internal links help users navigate within a long page.

(e) Tina wants to create a table using HTML. She wants to merge the first two rows of the table. Which of the following attributes should she use in the given case?

colspan
rowspan
rowcolspan
tablespan

Show answer

(ii) rowspan. The rowspan attribute is used to merge cells across rows.

04 · WORKBOOK

Workbook Questions & Answers.

Attempt each question first, then reveal the answer to check yourself.

Workbook Q.1 · Select the correct option

Choose the right answer.

(a) Which attribute of the <img> tag specifies the text to be displayed in place of the image, if the image cannot be loaded in the browser?

width
border
alt
src

Show answer

(iii) alt. The alt attribute provides alternative text for an image if it fails to load.

(b) What is the purpose of the colspan attribute in a <td> tag?

Sets the column width
Merges multiple cells across columns
Defines the column spacing
Specifies the column alignment

Show answer

(ii) Merges multiple cells across columns. colspan allows a single cell to span across multiple columns.

GIF format is a low-resolution image file format.
It can be either static or animated.
It is generally used for simple logos, icons, buttons, and symbols.
All of the above

Show answer

(iv) All of the above. GIFs are low-resolution, support animation, and are perfect for simple graphics.

(d) When will you use internal links in a web page?

When you want to create a link to another web page
When you want to create a link to an image file
When you want to create a link to a section in the same web page
When you want to create a link to a section in another web page

Show answer

(iii) When you want to create a link to a section in the same web page. Internal links help users navigate within a long page.

(e) Tina wants to create a table using HTML. She wants to merge the first two rows of the table. Which of the following attributes should she use in the given case?

colspan
rowspan
rowcolspan
tablespan

Show answer

(ii) rowspan. The rowspan attribute is used to merge cells across rows.

Workbook Q.2 · Answer the following questions

Write short, exam-style answers.

(a) What are input elements in an HTML form? Which input element will you use to allow the user to select any one option from a set of multiple options?

Input elements are used to accept information from a user in different ways. I will use radio buttons in the HTML form as I want the user to select one option from the given 3-4 options.

(b) Write the HTML code to display an image "mango.png" with a width of 400 pixels and a border of 2 pixels. It should display the name of the file in case the image cannot be displayed.

To display the file name if the image cannot be loaded, we use the alt attribute.

<html>
<head>
  <title>Mango</title>
</head>
<body>
  <h1>King of Fruit</h1>
  <img src="mango.png" alt="mango.png" width="400" border="2">
</body>
</html>

(c) Write the HTML code to display a table with a border of width 2 pixels. The table should have columns for Name and Roll No.

<html>
<head>
  <title>Class VI</title>
</head>
<body>
  <table border=2>
    <caption>List of Students</caption>
    <tr>
      <th>Name</th>
      <th>Roll No.</th>
    </tr>
    <tr>
      <td>Aarav</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Ankit</td>
      <td>2</td>
    </tr>
  </table>
</body>
</html>

(d) Disha created a web page containing text and images on 'Different types of flowers'. What will be the HTML code to display the image "rose.jpg", so that clicking on it opens the web page "rose.htm"?

She should create an image link by combining the anchor tag and the image tag.

<a href="rose.htm"><img src="rose.jpg"></a>

When she clicks on the image, the specified web page will open.

(e) You are developing an online registration form for a tech conference. Answer the following questions to create the forms.

i. Which attribute of the <form> element will you use to specify the URL of the web page to process the form when it is submitted?

Ans. Action attribute

ii. What value will you give for the method attribute of the <form> tag to transmit the form data to the server in a secure way?

Ans. Post

iii. Which value of the method attribute in the <form> tag will submit the form data as a part of the web page's URL?

Ans. Get

What you will learn.

HTML elements, step by step.

1. Bringing web pages to life with images

Key Attributes of the <img> tag

2. Organising data with tables

Basic Structure of an HTML Table

Merging Cells

3. Connecting the web with hyperlinks

Types of Hyperlinks

4. Collecting user input with forms

Common Input Elements

Form Attributes

Textbook questions, answered.

Test what you have learnt.

Choose the correct option.

Workbook Questions & Answers.

Choose the right answer.

Write short, exam-style answers.

More Information?

Key Attributes of the `<img>` tag