Images, Links and Tables

Multiple Choice Questions

Question 1

Which tag is used to insert an image in a web page?

1. <SRC>
2. <IM>
3. <IMG>
4. None of these

Answer

<IMG>

Reason — <IMG> tag is used to insert an image in a web page.

Question 2

Which attribute of the <IMG> tag allows you to display a text instead of an image?

1. Alt
2. Image
3. Alternate
4. Border

Answer

Alt

Reason — The Alt attribute can display a phrase instead of the image, in case the image cannot be displayed by the browser.

Question 3

You can use the ............... attribute to control the horizontal space around an image.

1. Hspace
2. Rspace
3. Lspace
4. None of these

Answer

Hspace

Reason — You can use the Hspace attribute to control the horizontal space around an image.

Question 4

We can present data in a row and column format by using the ............... tag.

1. <TR><TC>
2. <TABLE>
3. <ROW><COL>
4. None of these

Answer

<TABLE>

Reason — We can present data in a row and column format by using the <TABLE> tag.

Question 5

The column heading is specified by using the ............... tag.

1. <CH>
2. <TR>
3. <TH>
4. <TD>

Answer

<TH>

Reason — The column heading is specified by using the <TH> tag.

Question 6

<TR> tag is used to create a ............... in a table.

1. Row
2. Column
3. Caption
4. All of these

Answer

Row

Reason — <TR> tag is used to create a row in a table.

Question 7

............... tag defines the cells or columns of a table which denotes table data.

1. <TR>
2. <TD>
3. <TH>
4. None of these

Answer

<TD>

Reason — <TD> tag defines the cells or columns of a table which denotes table data.

Question 8

Which attribute is used to set the amount of space between the cell border and the cell data?

1. Spacing
2. Cellpadding
3. Cellspacing
4. Align

Answer

Cellpadding

Reason — Cellpadding attribute is used to set the amount of space between the cell border and the cell data.

Question 9

The default alignment of the contents of table cells is ............... .

1. Center
2. Right
3. Top
4. Left

Answer

Left

Reason — The default alignment of the contents of table cells is left.

Question 10

Choose the correct HTML code to right-align the data inside a table cell.

1. <TRright Align>
2. <TD Align ="Right">
3. <TD VAlign ="Right">
4. <TR "Right">

Answer

<TD Align ="Right">

Reason — To right-align the data inside a table cell, we use the given HTML code:

<TD Align ="Right">

Question 11

Which is the correct code to merge four columns in a table?

1. <TD COLSPAN = 4>
2. <TD COLUMN SPAN= 4>
3. <COLSPAN = 4>
4. <TD SPAN = 4>

Answer

<TD COLSPAN = 4>

Reason — The correct HTML code to merge four columns in a table is as follows:

<TD COLSPAN = 4>

Question 12

Which of the following is not the attribute of <A> tag?

1. NAME
2. TITLE
3. HREF
4. SRC

Answer

SRC

Reason — SRC is not the attribute of <A> tag. The other attributes of <A> tag are used for the following purposes:

1. HREF — It defines the document to which the link leads.
2. TITLE — It is used to give a title to the document to which we are linking.
3. NAME — It specifies the name of the anchor being set up for internal linking in a document.

Question 13

Combining two or more cells either column-wise or row-wise in a table is called ............... .

1. Merging
2. Spanning
3. Combining
4. None of these

Answer

Spanning

Reason — Combining two or more cells either column-wise or row-wise in a table is called Spanning.

Question 14

The two common attributes of the <IMG> and the <TABLE> tags are ............... .

1. SRC and HEIGHT
2. HEIGHT and WIDTH
3. BORDER and SRC
4. They do not have any common attributes

Answer

They do not have any common attributes

Reason — The <IMG> and the <TABLE> tags do not have any common attributes.

Question 15

Why is it important to specify width and height attribute in <IMG> tag?

1. To ensure that the image is not copied.
2. The image will not render without these.
3. To stop the image from loading.
4. Helps the browser to load the web page faster.

Answer

Helps the browser to load the web page faster.

Reason — It is important to specify width and height attribute in <IMG> tag so that the browser can reserve the space for the images when the page is loaded.

Question 16

Which command should we use to link a page with an HTML page?

1. <A Link= "page.htm"> </a>
2. <A Href = "page.htm">page</a>
3. <A Connect= "page.htm"></a>
4. <A Attach="page.htm" > </a>

Answer

<A Href = "page.htm">page</a>

Reason — We can use the following command to link a page with an HTML page :

<A Href = "page.htm">page</a>

Question 17

Which attribute(s) is/are used to merge rows?

1. Rowspan
2. Colspan
3. Both 1 and 2
4. None of these

Answer

Rowspan

Reason — Rowspan attribute is used to merge rows.

Question 18

What is the correct syntax in HTML for creating a link to an e-mail address?

1. <A Href = "E-mail.htm">
2. <A e-mail:to@address>
3. <A Href="mailto:e-mail_id">
4. None of these

Answer

<A Href="mailto:e-mail_id">

Reason — The correct syntax in HTML for creating a link to an e-mail address is as follows:

<A Href="mailto:e-mail_id">

Fill in the Blanks

Question 1

The height attribute specifies the height of an image in the form of an ............... or a percentage value.

Answer

The height attribute specifies the height of an image in the form of an integer or a percentage value.

Question 2

............... attribute of an image tag controls the vertical space around the image.

Answer

Vspace attribute of an image tag controls the vertical space around the image.

Question 3

............... is an attribute of the <IMG> tag which specifies the location or URL of the image to be displayed.

Answer

Src is an attribute of the <IMG> tag which specifies the location or URL of the image to be displayed.

Question 4

An image to be displayed on a web page has to cover 25% of the browser window horizontally and 50% vertically. The attributes ............... and ............... of the <IMG> tag would be used for achieving this.

Answer

An image to be displayed on a web page has to cover 25% of the browser window horizontally and 50% vertically. The attributes Height and Width of the <IMG> tag would be used for achieving this.

Question 5

The ............... tag is used to create inline images.

Answer

The <img> tag is used to create inline images.

Question 6

An ............... link allows a link to another section on the same web page.

Answer

An internal link allows a link to another section on the same web page.

Question 7

The three values of the VAlign attribute, used with <TD> tag, are ..............., ............... and ............... .

Answer

The three values of the VAlign attribute, used with <TD> tag, are Top, Bottom and Middle.

Question 8

Tables arrange data in ............... and ............... .

Answer

Tables arrange data in Rows and Columns.

Question 9

The ............... attribute of the <TABLE> tag is used to set the minimum distance between two adjacent cells.

Answer

The Cellspacing attribute of the <TABLE> tag is used to set the minimum distance between two adjacent cells.

Question 10

The default border size of a table is ............... pixel.

Answer

The default border size of a table is one pixel.

Question 11

The Border attribute of a table specifies the ............... of the border of a table.

Answer

The Border attribute of a table specifies the width of the border of a table.

Question 12

The <TD> tag must always be present inside the ............... tag.

Answer

The <TD> tag must always be present inside the <TR> tag.

State True or False

Question 1

The <IMG> tag is an empty element.

Answer

True

Reason — The <IMG> tag is an empty element as it doesn't require a closing tag.

Question 2

The Align attribute can be used to center-align the image horizontally.

Answer

False

Reason — The Align attribute cannot be used to center-align the image horizontally. It can be done by using the Center element.

Question 3

The Alt attribute lets you specify text as an alternative to the image.

Answer

True

Reason — The Alt attribute can display a phrase instead of the image, in case the image cannot be displayed by the browser.

Question 4

The Height Attribute of an image can only be specified in the format of a percentage value.

Answer

False

Reason — The Height Attribute of an image can be specified in the format of an integer or a percentage value.

Question 5

The <TITLE> tag is one of the structural tags of HTML documents.

Answer

True

Reason — The <TITLE> tag is one of the structural tags of HTML documents and is defined inside the <HEAD> tag.

Question 6

The <TFOOTER> tag is used to define a set of header rows.

Answer

False

Reason — The <THEAD> tag is used to define a set of header rows.

Question 7

The table row begins with a <T Row> tag.

Answer

False

Reason — The table row begins with a <TR> tag.

Question 8

The <TH> tag makes the text of the table heading bold.

Answer

True

Reason — The <TH> tag makes the text of the table heading bold.

Question 9

The Href attribute with <A> tag is used to open a link in a new window.

Answer

True

Reason — The Href attribute with <A> tag is used to open a link in a new window.

Question 10

We can give different colours to each cell in a table.

Answer

True

Reason — We can give different colours to each cell in a table by using the Bgcolor attribute.

Question 11

We can put a border around an image by using cellpadding attribute.

Answer

False

Reason — We can put a border around an image by using Border attribute of <IMG> tag.

Question 12

No value is specified with alt attribute of <IMG> tag.

Answer

False

Reason — The value for the Alt attribute is a text string of up to 1024 characters, enclosed in quotation marks.

Question 13

A table's background colour can be specified using bgcolor attribute.

Answer

True

Reason — A table's background colour can be specified using bgcolor attribute.

Question 14

<CAPTION> tag gives a description of the table.

Answer

True

Reason — <CAPTION> tag gives a description of the table.

Question 15

An image can be used as a hyperlink to another document.

Answer

True

Reason — An image can be used as a hyperlink to another document.

Answer in One Word or a Sentence

Question 1

Which attribute is used to combine the cells of a table vertically?

Answer

Rowspan

Question 2

What is the default border colour of an HTML table?

Answer

Gray

Question 3

Name the attribute which is used to set the background image for the table.

Answer

Background

Question 4

Name the tag used to group header rows, that defines a table header.

Answer

<THEAD> tag

Question 5

Name the link that allows visitors to send an e-mail message quickly.

Answer

"mailto" link

Question 6

Which attribute of <A> tag specifies the name of the anchor being set up?

Answer

Name

Question 7

When creating a web document, which unit is used to express an image's height and width?

Answer

Integer or percentage value

Question 8

Which type of image is not shown automatically with other content on the web page?

Answer

External image

Question 9

Mention the HTML tag to left-align the content inside a table cell.

Answer

<TD ALIGN = "LEFT">

Short Answer Type Questions

Question 1

What do you understand by Alternate text?

Answer

Alternate text is the text that is displayed as an alternate to the image when the browser is not able to display the image. It is specified using the Alt attribute of <IMG> tag.

Question 2

Differentiate between <TH> and <THEAD> tag.

Answer

Question 3

Which tag in HTML is used to combine the cells vertically in a Table?

Answer

Rowspan attribute of <TD> tag is used to combine the cells vertically in a Table.

Question 4

Which tag is used to create a row in a Table?

Answer

<TR> tag is used to create a row in a Table.

Question 5

Which sides of the Table's outside border would be visible by setting Frame = "Vsides".

Answer

The left and right sides (vertical sides) of the Table's outside border would be visible by setting Frame = "Vsides".

Question 6

Mention the suitable HTML tag and the attribute to insert an image named 'globe.jpg' in the background of a webpage.

Answer

We can use the <BODY> tag with the BACKGROUND attribute to insert an image named 'globe.jpg' in the background of a webpage.
E.g. <BODY BACKGROUND = "GLOBE.JPG">

Question 7

Mention any two attributes of <IMG> tag along with their significance.

Answer

Two attributes of <IMG> tag are as follows:

1. Src — The Src attribute helps in defining the source of an image.
2. Alt — The Alt attribute lets us specify text as an alternate to the image, that the browser can display if the image cannot be displayed.

Question 8

How can text be displayed in place of an image for users whose browsers do not support images?

Answer

We can use the Alt attribute of the <IMG> tag to display text in place of an image for users whose browsers do not support images.
E.g.
<IMG Src= "garden.jpg" Alt = "Image of a garden">

Question 9

Name two common graphics file formats that most browsers recognise.

Answer

Two common graphics file formats that most browsers recognise are GIF and JPEG.

Question 10

Name the attributes of <A> tag which are used for internal linking in a web page.

Answer

The attributes of <A> tag which are used for internal linking in a web page are:

1. Name — The Name attribute allows the user to create links within the same document. This attribute specifies the name of the anchor being set up.
2. Href — The Href attribute serves as a hypertext link, i.e., the command that leads the browser to another section on our web page.

Question 11

Write names of two attributes each for the following tags:

(i) <Img>

(ii) <Table>

(iii) <A>

Answer

(i) <Img> — Src, Alt

(ii) <Table> — Bgcolor, Bordercolor

(iii) <A> — Href, Name

Question 12

Which tags divide HTML tables in multiple sections?

Answer

HTML tables can be divided into multiple sections by the following tags:

1. <THEAD> — This tag is used to group header rows that define the table's header.
2. <TBODY> — This tag defines a table's body.
3. <TFOOT> — This tag defines a group of footer rows in a table.

Long Answer Type Questions

Question 1

How can you add space around the top and bottom of an image?

Answer

We can use the Vspace attribute to add space around the top and bottom of an image. The value of Vspace is defined in pixels.

For example,

<IMG SRC = "IMAGE.JPG" ALT = "GARDEN" VSPACE = "40">

Question 2

How will you add border to an image?

Answer

We can add border around the image by using the Border attribute. It accepts value in terms of pixels.

For example,

<IMG SRC = "IMAGE.jpg" Border= "5">

Question 3

Differentiate between the Rowspan and Colspan attributes of a table.

Answer

Differences between Rowspan and Colspan attributes of a table are:

Question 4

How is spacing in cells controlled?

Answer

Spacing in cells is controlled by the following attributes of the <TABLE> tag.

1. Cellspacing — It gives the amount of space between cells.
2. Cellpadding — It gives the amount of space between the cell border and the cell contents.

Consider the following example,

<TABLE BORDER = "3" CELLSPACING = "1" CELLPADDING = "1">
<TR> 
<TD> Fruits </TD> 
<TD> Vegetables </TD> 
</TR>
<TR> 
<TD> Mango, Apple, Banana </TD> 
<TD> Potato, Aubergine, Gourd  </TD> 
</TR>
</TABLE>

Question 5

How will you add an image of a table at the top of your web page?

Answer

We can use the <IMG> tag with its attribute 'src' to add an image of a table at the top of our web page. The HTML code is as follows:

<HTML>
<HEAD> 
</HEAD>
<BODY>
<IMG SRC = "TABLE.JPG" ALT = "IMAGE OF A TABLE"> 

...contents of the web page...

</BODY>
</HTML>

Question 6

Write the HTML code to:

i. Align the content of a cell in a Table to the top

ii. Link to a specific section of another webpage

Answer

i. To align the content of a cell in an HTML table to the top, we can use the 'valign' attribute with the value "top" for the <td> element. Consider the given example,

<TABLE>
<TR>
<TD VALIGN = "TOP"> Mouse </TD>
<TD>Monitor </TD>
</TR>
<TR>
<TD>Keyboard </TD>
<TD>Printer </TD>
</TR>
</TABLE>

ii. To create a link to a specific section of another webpage, we can use anchor tags <a> with the 'href' attribute pointing to the target webpage and specifying the target section using a '#' followed by the section's 'name' attribute. Consider the given example,

<a href="https://computerhardware.com#inputdevices">Input Devices</a>

Here, "inputdevices" is the value of the 'name' attribute which refers to a specific section of another webpage.

Question 7

Write the HTML code to send an email to abc@xyz.com from your web page.

Answer

<HTML>
<HEAD>
<TITLE>Send Email Example</TITLE>
</HEAD>
<BODY>
<A HREF = "mailto:abc@xyz.com">Send Mail to abc</A>
</BODY>
</HTML>

Question 8

Create a table having four header rows with yellow background colour, four table body rows having light orange colour, and two footer rows having light green colour. Add table contents on your own.

Answer

<HTML>
<HEAD>
<TITLE>Table Example</TITLE>
</HEAD>
<BODY>
<TABLE>
<THEAD BGCOLOR = "YELLOW">
<TR> <TD> Names </TD> </TR>
<TR> <TD> Of </TD> </TR>
<TR> <TD> Some </TD> </TR>
<TR> <TD> Fruits </TD> </TR>
</THEAD>
<TBODY BGCOLOR = "ORANGE">
<TR> <TD> Apple </TD> </TR>
<TR> <TD> Mango  </TD> </TR>
<TR> <TD> Banana </TD> </TR>
<TR> <TD> Guava </TD> </TR>
</TBODY>
<TFOOT BGCOLOR = "LIGHTGREEN">
<TR> <TD> Note  </TD> </TR>
<TR> <TD> Fruits are rich in fibre. </TD> </TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>

Application Based Questions

Question 1

Raveena wants to insert an image on her web page and align it in the center. She has written the following code to center-align the image, but the desired result is not displayed. Can you tell her what is wrong with her code?

<IMG Src= "SAVETIGER.GIF" Align= "Center">

Answer

The Align attribute cannot be used to center-align the image horizontally. The middle value of align attribute center aligns the image vertically with the current line but not horizontally. It can be done by using the Center element. Thus, the HTML code should be as follows:

<CENTER>
<IMG Src= "SAVETIGER.GIF">
</CENTER>

Question 2

Shagun wants to set different background colours for the individual cells of the table. How can she achieve this?

Answer

We can use the 'bgcolor' attribute of the <TD> element to give different colours to the cells of a table. Consider the following example,

<TABLE>
<TR> 
<TD BGCOLOR = "YELLOW"> Cell 1 </TD> 
<TD BGCOLOR = "PINK"> Cell 2 </TD> 
</TR>
<TR> 
<TD BGCOLOR = "BLUE"> Cell 3 </TD> 
<TD BGCOLOR = "GREEN"> Cell 4 </TD> 
</TR>
</TABLE>

Question 3

Shivam has been given an assignment by her class teacher to design a table in such a way that the amount of space between its cell borders and cell data is 5 pixels and distance between any two cells is 3 pixels. Which attributes can she use to accomplish the task?

Answer

Shivam can use Cellspacing attribute of <TABLE> element to set the distance between any two cells and Cellpadding attribute of <TABLE> element to set the amount of space between its cell borders and cell data. Consider the following example,

<TABLE BORDER = "1" CELLSPACING = "3" CELLPADDING = "5">
<TR> 
<TD> Fruits </TD> 
<TD> Vegetables </TD> 
</TR>
<TR> 
<TD> Mango</TD> 
<TD> Potato</TD> 
<TR>
<TD>Guava </TD>
<TD>Aubergine </TD>
</TR>
<TR>
<TD>Banana </TD>
<TD>Cauliflower </TD>
</TR>
</TR>
</TABLE>

Question 4

Ayush has to display the sequence of events of the upcoming Annual Sports Day on the school website. Help Ayush in writing the HTML code to generate the following output.

Answer

<HTML>
<HEAD>
<TITLE>Annual Sports Day</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "2" CELLPADDING = "5">
<TR>
<TH ALIGN = "CENTER" BGCOLOR = "MAGENTA" COLSPAN = "3">ANNUAL SPORTS DAY - SEQUENCE OF EVENTS</TH>
</TR>
<TR>
<TD BGCOLOR = "LIGHTPINK">8:00 am - 9:00 am </TD>
<TD BGCOLOR = "LIGHTPINK"> 9:00 am to 1:00 pm</TD>
<TD BGCOLOR = "LIGHTPINK"> 1:00 pm  - 2:00 pm</TD>
</TR>
<TR>
<TD BGCOLOR = "ORANGE">CULTURAL EVENTS </TD>
<TD BGCOLOR = "ORANGE">TRACK EVENTS </TD>
<TD BGCOLOR = "ORANGE">PRIZE DISTRIBUTION </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Question 5

Consider the web page given below and answer the following questions:

1. Mention the tags used to create a table pointed by the letter A.
2. Which property of <IMG> tag is used to wrap the text around the image?
3. Name the tag and its attributes to set the alignment of text pointed by the letters B and D.
4. Name the tag used to create the links pointed by the letter C.

Answer

1. The tags used to create a table pointed by the letter A are <TABLE>, <TR> and <TD>.

2. The 'align' property of <IMG> tag is used to wrap the text around the image. In this case, Align = "Right" is used that places the image against the right margin and wraps the text around the left margin of the image.

3. We use the <P> tag and its 'align' attribute to set the alignment of text pointed by the letters B and D.

   1. For letter B, the value of align attribute is set to "center".
   2. For letter D, the value of align attribute is set to "left".

4. The anchor tag <A> is used to create the links pointed by the letter C.

Question 6

Identify the errors in the following HTML code and write the corrected code with each correction underlined.

<HTML>
<HEAD> IMAGES</TITLE>
<BODY BACKGROUND="Red">
<IMG HREF="abc.jpg">HERE IS MY IMAGE FILE
</HEAD> </HTML>

Answer

The given HTML code has the following errors:

1. The <HEAD> ... </HEAD tag must be placed above the <BODY> tag.
2. The <TITLE> tag is missing its opening tag.
3. The 'src' attribute of <IMG> tag should be used to define the image file to be displayed.
4. <BODY> tag is not closed i.e., </BODY> tag is missing.

The correct HTML code is as follows:

<HTML>
<HEAD> 
<TITLE> IMAGES </TITLE>
</HEAD>
<BODY BACKGROUND = "Red">
<IMG SRC = "abc.jpg"> HERE IS MY IMAGE FILE
</BODY> 
</HTML>

Question 7

Gaurav, a web designer in a company named "International Designers" has just created a webpage in which different sections of the webpage are linked and can be traversed by clicking on the text given as "Top", "Middle", and "Bottom". Is it internal linking or external linking and why? Additionally, tell him about the suitable tag and its attribute(s) to open another webpage named 'second.html' by clicking on the text "Next".

Answer

Gaurav has used internal linking to link different sections of the webpage such that they can be traversed by clicking on the text given as "Top", "Middle", and "Bottom".

Internal linking involves creating links within the same website or webpage to navigate between different sections or pages of that same website or webpage. In this case, the links are used to move within the current webpage to different sections, so it is called internal linking.

Gaurav can use the anchor tag <A> tag with its attribute 'href' to open another webpage named 'second.html' by clicking on the text "Next". He can use the following HTML code,

<A HREF = "second.html"> Next </A>