HSLC Computer Science Solution: Chapter 3 (Inserting Images and Creating Tables in HTML5)

Contents:

• Objective Type Questions
  1. Fill in the blanks
  2. True and False
  3. Choose the correct option
• Descriptive Type Questions
  1. Short Answer Questions
  2. Long Answer Questions
• Application-based Questions
  

• Objective Type Questions:

1. Fill in the blanks:

a. The ………………… image format uses a maximum of 256 colors and a combination of these to create more colors.
ans: GIF

b. The src attribute of the ………………… tag specifies the URL of an image.
ans: <img>

c. The <img> tag is a/an ………………… element.
ans: empty

d. The value of the height attribute of <img> tag is specified in ………………… .
ans: pixels

e. A ………………… arranges data in rows and columns
ans: table

g. The default value of caption-side property is ………………… .
ans: top

e. The ………………… property specifies the space between the border and content in a table.
ans: padding

f. The value of src attribute is ………………….
ans: URL

h. The ………………… property sets the horizontal alignment of text in a table.
ans: text-align

2. True and False

a. Web browsers use only the GIF format.
ans: False

b. PNG format works best for images with transparencies or low color count.
ans: True

c. The <img> tag is an empty element.
ans: True

d. The alt attribute cannot be used for the <img> tag.
ans: False

e. The <td> tag specifies an individual block or a cell in a table row.
ans: True

f. The value of width attribute for the <img> tag can be specified in pixels only.
ans: True

g. The border properties can be used with <td> and <tr> tags.
ans: True

h. The text-align property sets the horizontal alignment of text in a table.
ans: True

i. Graphics can be inserted in a table cell using the <image> tag.
ans: False

j. The default value of the border-collapse property is ‘separate’.
ans: True

3. Choose the correct option.

a. The tag specifies an image to be displayed in an HTML5 document.

i. <img>
ii. <image>
iii. <imagehtml>
iv. none of these

ans: i. <img>

b. src is an attribute of the tag

i. <img>
ii. <image>
iii. <imagesource>
iv. none of these

ans: i. <img>

c. The’vertical-align property of the <td> tag can have the value

i. top
ii. bottom
iii. middle
iv. all of these

ans: iv. all of these

d. The attribute specifies an alternate text for an image.

i. alternate
ii. alter
iii. alt
iv. none of these

ans: iii. alt

e. Which of the following is the best format for photographs?

i. PNG
ii. JPEG
iii. GIF
iv. None of these

ans: ii. JPEG

f. The main tag used to define a table in HTML5 is

i. <table>
ii. <td>
iii. <tr>
iv. none of these

ans: i. <table>

g. Which of the following tags is used to define an individual block or cell in a table row in an HTML5 document?

i. <table>
ii. <tr>
iii.<td>
iv. All of these

ans: iii.<td>

h. The default value of empty-cells property is

i.hide
ii. show
iii. separate
iv. none of these

ans: i.hide

i. Which of the following properties are used with the <td> tag?

i. text-align
ii. vertical-align
iii. padding
iv. All of these

ans: i. text-align

• Descriptive Type Questions

1. Short Answer Questions

a. Give the full form of GIF and PNG.

ans: GIF stands for Graphics Interface Format. On the other hand, PNG stands for Portable Network Graphics

b. Name the attribute of the <table> tag that is used to define background color.

ans: The ‘background-color’ attribure of the <table> tag that is used to define background color.

c. Expand the following:
i. <td> ii. <th>

ans: i. table data        ii. table header

d. Name the tag used to define the title to the table.

ans: <caption> tag is used to define the title to the table.

e. What is the use of the <th> tag?

ans: The table header tag <th> indicates the cell is a header for a column or a row

f. What are the values in which the width and the height property of a table can be given?

ans: The width and the height property of a table can be given is pixels

g. Which table property is used to specify the placement of a table caption?

ans: The ‘caption-side’ property is used to specify the placement of a table caption.

h. What is the use of empty-cells property?

ans: Empty-cells property specifies whether to display borders and background for empty cells or not.

i. Name the property used to set the vertical alignment of text in a table.

ans: The vertical-align property is used to set the vertical alignment of text in a table

j. Can you insert an image in a table cell?

ans: Yes, we can insert an image in a table cell.

2. Long answer questions

a. Differentiate between GIF and JPEG formats.
ans:

b. What is the use of the <img> tag? Is it an empty or a container element? Explain any two attributes used with this tag using an example.
ans: The <img> tag specifies an image to be displayed in an HTML5 document.
It is an empty element.

Two attributes used with this tag are:
(1) src: specifies the URL of an image. Example: <img src=”picture.jpeg”>
(2) height: specifies the height of an image. Example: <img src=”picture.jpeg” height=”100″>

c. What is the difference between <tr> and <td> tags?
ans: The <tr> (table row) tag defines horizontal row of cells whereas the <td> (table data) tag specifies an individual block or cell in a row.

d. Write the use of the following properties:

i. border-spacing
ans: It specifies the distace between the border of adjacent cells
ii. caption-side
ans: It specifies the placement of table caption
iii. border-collapse
ans: It specifies whether the table border should be collapsed or not

e. How can you specify the height and width of a table? Explain with an example.
ans: The height attribute is used to specify the height of a table. For example height: 100% or height: 75px
The width attribute is used to specify the width of a table. For example width 45% or width 170px

f. Explain the border properties that can be used with the <table> tag. Can you apply these properties to the <td> and <tr> tags?
ans: The border properties used with the <table> tag specifies the table border of around the table.
Yes we can apply these properties to the <td> and <tr> tags.

g. Differentiate between text-align and vertical-align properties. What values can be assigned to these properties?
ans: Text-align properties of <td> tag sets the horizontal allignment of text in a table. Whereas, vertical-align properties of <td> tag sets the vertical allignment of text in a table.
The different values that can be assigned to text-algin properties are: left, right or center.
The different values that can be assigned to vertical-algin properties are: top, bottom or middle.

h. Which properties will you use to change the background color and text color for the heading row?
ans: To change the background color and text color for the heading row, we can use the background-color and color properties respectively.

i. What is the use of the padding property? Which HTML5 tag uses this property?
ans: The padding property is used to generate space between the border and content in a table.
This property is used with the <td> tag of a table.

j. What is the use of the empty-cells property? What different values can be assigned to this property?
ans: Empty-cells property is used to specify whether to display borders and background for empty cells in a table or not.
The different values that can be assigned to this property are: show and hide.

• Application-based Questions

1. Tavishu wants to insert an image in a web page:

a. Which tag will he use to insert the image?
ans: He will use <img> tag to insert the image.
b. Name any two attributes of this tag and their use.
ans: Two attributes of this tag are:
(1) src tag: Specifies the URL of an image file
(2) alt tag: Specifies the alternate text for an image
c. Name the attribute of this tag for specifying the URL of an image. Explain with an example.
ans: the src attribute of <img> tag is used for specifying the URL of an image.
Example: <img src=”picl.jpg”>

2. Identify the error(s) in the following code and then write the correct code:

3. Observe the given code and answer the questions following it:

a. Will the above code display a border around the table?
ans: No, the above code will not display a border around the table.

b. Which properties can you use to get the table border?
ans: We can use the border property to get the table border.

c. What changes will you make in the above code to get a solid orange-colored border of 3px?
ans: We will add ‘border: 3px solid orange’ property to the table tag to get a solid orange-colored border of 3px.

4. Observe the given code and answer the following questions:

a. What will be the background and text color for the table’s heading row?
ans: The background color will be pink and the text color will be blue for the table’s heading row.

b. Which properties have been used to specify the background and text color?
ans: The background-color property have been used to specify the background color and the color property have been used to specify the text color.

c. What is the space between the border and the cell content known as? Which property has been used to specify this value?
ans: The space between the border and the cell content is known as padding. The padding property is used to specify this value

5. Observe the code given below:

ans: The above code can also be written as follows:

Vishal Junak Das