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

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

Empty Blackboard

Contents:

 

  • 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:

GIF

JPEG

1.

GIF is the best format for displaying images designed with a graphics program.

JPEG is the best format for photographs.

2.

It contains 256 colors.

It contains 1 million colors.

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:

<style type=”text/css”>
image {bordersize: 6px solid green; width: 220px; height: 200px}
h2 {transform: uppercase;}
</style>

ans:
<style type=”text/css”>
image {border: 6px solid green; width: 220px; height: 200px}
h2 {text-transform: uppercase;}
</style>

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

<style type=”text/css”>
table
{
border-collapse: separate;
border-spacing: 15px 25px;
}
</style>

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:

<style type=”text/css”>
td
{
padding: 12px
text-align: center
vertical-align: middle
}
th
{
background-color: pink
color: blue
}
</style>

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:

th
{
background-color: pink
color: blue
}
tr
{
background-color: pink
color: blue
}

Can you suggest an alternate way of writing the above code?

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

th,tr
{
background-color: pink
color: blue
}

 

 

 

 

Interested? Have any questions?

support@ujudebug.com

For more info Call us

+91 8486 201473

1 Comment

  1. […] Chapter 3: Inserting Images and Creating Tables in HTML5 […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Call Us Now:

Sales : +91-8011624355
Support : +91-8486201473
Support : +91-7002890335

Lowest Price Promise

[one_third] [/one_third] [two_third] We’re all looking for the best prices, even saving a couple of rupees can make a huge difference. That’s why we’ll match the price of your products if you find them cheaper somewhere else.

Our price match promise

We'll price match any item we sell against any other seller. Here’s what you need to do to you get the best price:
  • Give us a call on +918486201473
  • Let our friendly team know the product
  • Tell us where you spotted it
  • Get it on cheapest price
That’s it! The whole thing should only take a few minutes and you’ll save some money too. Winner winner! [/two_third]

Lowest Price Promise

We’re all looking for the best prices, even saving a couple of rupees can make a huge difference. That’s why we’ll match the price of your products if you find them cheaper somewhere else.

Our price match promise

We'll price match any item we sell against any other seller. Here’s what you need to do to you get the best price:

  • Give us a call on +918486201473
  • Let our friendly team know the product
  • Tell us where you spotted it
  • Get it on cheapest price

That’s it! The whole thing should only take a few minutes and you’ll save some money too. Winner winner!