CLASS 10 INSERTING IMAGE CHAPTER 3

    SEBA 
    CLASS- 10
    CHAPTER-3
    Inserting Image and Creating Table in HTML5

    1. Fill in the blanks:

    a. The Gif image format uses a maximum of 256 colors and a combination of these to create more colors.

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

    c. The <img> tag is a/an Empty element.

    d. The value of the height attribute of an <img> tag is specified in Percentage or Pixel.

    e. A Table header <th> arranges data in rows and columns.

    f. The Table tag indicates that the cell is a header for a column or a row.

    g. The default value of caption-side property is Top.

    h. The Cell padding property specifies the space between the border and content in a table.

    i. The value of src attribute is URL

    j. The Text-Align property sets the horizontal alignment of text in a table.

     Click To Top

    2. Write True or False:

    a. Web browser use only the GIF format. FALSE

    b. PNG format works best for images with transparencies or low color count. TRUE

    c. The <img> tag is an empty tag. TRUE

    d. The alt attribute cannot be used for <img> tag. FALSE

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

    f. The value of which attribute for the <img> tag can be specified in pixel only. TRUE

    g. The border properties can be used with <td> and <tr> tags. TRUE

    h. The text-align property sets the horizontal alignment of text in a table. TRUE

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

    j. The default value of the border – collapse property is ‘separate’. TRUE

     Click To Top

    3. Choose the correct options:

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

    <img>

    b. src is an attribute of the ____ tag.

    <img>

    c. The vertical – align property of the <td> tag can have the value ____

    All of these ( top, bottom, middle)

     

    d. The ____ attributes specifies an alternate text for an image.

    alt

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

    JPEG

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

    <table>

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

    <td>

    h. The default value of empty – cells property is

    show

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

    All of these ( text-align, vertical – align, padding)


    Click To Top

    1. Short answer type questions:

    a. Give the full form of GIF and PNG.

    CLICK ME 👈FOR FULL FORM

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

    Attribute of <table> tag used to define background color is <table background = “red”>.

    c. Expand the following:

    i) <td> : Table data tag  ii) <th> : Table header Tag

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

    The tag used to defined the title to the table is <caption> tag.

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

    <th> is use as a table header tag. It indicates that 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?

    The values in which the width and the height property of a table can be given as percentage (%) or Pixel (px).

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

    Caption-side is the table property used to specify the placement of the table caption.

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

    Empty-cells property is used to specify whether to display borders and background for empty cells in a table or not.

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

    Vertical- align property is the property used to set the vertical alignment of the text in a table.

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

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

     Click To Top

    2. Long answer questions:

    a. Differentiate between GIF and JPEG formats.

    The different between GIF and JPEG format are given below

    GIF

    JPEG

    PNG

    i) GIF stand for Graphic Interchange Formate

    i) JPEG stand for Joint Photographic Experts Group

    i) PNG stand for Portable Network Graphic

    ii) it is a lossless compression method

    ii) It is a lossy compression method

    ii) It uses lossless compression algorithms

    iii) It supports only 8-bit color images

    iii) It supports 24- bit full color images

    iii) PNG image is a high quality

    iv) It contains 256 colors

    iv) It contains 1 million colors.

    iv) PNG image is generally larger than JPEG image.

    v) GIF uses its limited color details to compress the images

    v) JPEG minimizes the file size by loosing the details of the image.

    v) PNG image supports transparency in images

    vi) GIF image is of high quality

    vi) JPEG image are used in photography

    vi) PNG images are generally used in icon creation

    vii) GIF image support animation

    vii) JPEG image does not support animation

    vii) PNG use .png extension

    viii) GIF image use .gif extension

    viii) JPEG image use .jpeg or .jpg extension

     


    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.

    <img> tag is used to specify an image to be displayed in an HTML5 document.

    Yes, it is an empty element or Container tag.

    The two attributes used in<img> tag is:

    i) src: This attribute of <img> tag specifies the path of an image file. Its value is written in URL. Example: <img src = “image.jpg”>

    ii) alt: This attribute of an <img> tag specifies the alternate text for an image. This text is displayed when the graphics feature is turned off in the browser.

    Example: <img src = “image.jpg” alt= “Image not available”>

    c. What is the different between <tr> and <td> tags?

    The different between <tr> and <td> tag is that:

    <tr> tag is used to define a horizontal row of a cells. There must be at least one row in the table. Whereas,

    <td> tag is used to specify an individual block or cell in a table row.

    OR

     <td> tag defines a standard cell in an HTML table, it will contain data for the table, and not for table headings. This tag is also commonly referred to as the <td> element.

    d. Write the use of the following properties.

    i) border-spacing ii) caption iii) border- collapse

    Border-Spacing: This property is used to specifies the distance between the border of adjacent cell.

    Caption Side: This property is used to specifies the placement of table caption.

    Border- Collapse: Specifies whether table borders should be collapsed or not.

    e. How can you specify the height and width of a table? Explain with an example.

    We can specify the height and width of the table by the height and width property of the <table> tag. Its values are in Percentage (%) or Pixel (px).

    Example: <table height= “50px”, width = “100%”>.

    f. Explain the border properties that can be used with the <table> tag. Can you apply these properties to <td> and <tr>?

    The border attribute is very important to use in the formation of table, if the border size will not be added in the table border attribute, then the data that is defined on the table will not show in the tabular form.

    Border attribute is generally used to show our data in the tabular form and sequential form or we can say that in the manner order, that is for the data and information.

    Yes, we can apply these properties to the <td> and <tr> tags, using CSS <style> tag for our table

     

    g. Differentiate between text-align and vertical align properties. What values can be assigned to these properties?

    The different between text align and vertical align properties are given below:

    TEXT-ALIGN PROPERTY

    VERTICAL-ALIGN PROPERTY

    i) It sets the horizontal alignment of text in a table

    ii) The value of this property is left/right/center

    i) It sets the vertical alignment of text in a table.

     

    ii) The value of this property is Top/Bottom/Middle.


    h. Which properties will you use to change the background color and the text color for the heading row?

    To change the background color for the heading row we will use the bg-color attribute and to change the text color of the heading row we must use text-color property.

    i. What is the use of the padding property? Which HTML tag uses this property?

    Padding property is use to generate space around an elements content, inside of a defined border. Its values are in pixels.

    The <td> tag uses this property.

    j. What is the use of the empty -cells property? What different values can be assigned to this property?

    The use of empty cells properties is that it selects empty table cells for the purpose of specifying whether or not to display borders and background on them. In other words, it tells the browser whether or not to draw border around a table cell or fill in the background when that cell contain no content.

    The empty cells property has two primary values:

    i) show : Display a border and background on a empty cell.

    ii) Hide: Does not display a border or background on an empty cell.


    Click To Top

    Application Based Questions:

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

    a. Which tag will he use to insert the image?

    b. Name any two attributes of this tag and their use.

    c. Name the attribute of this tag for specifying the URL of an image. Explain with an example.

    Ans: a) The tag he will use to insert an image is <img>.

    b) The two attributes of this tag are:

    i) src: This attribute is use to specifies the URL of an image file.

    ii) height: This attribute is use to specify the height of an image.

    c) The attribute of this tag for specifying the URL of an image is src.

    Example: <img src = “image.Jpg”>

     

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

    <style type=”text/css”>

    Image {border-size: 6px solid green; width: 220px; height: 200px}

    h2{transform: uppercase}

    </style>

    Ans: <style type=”text/css”>

    Image {bordersize: 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 borer around the table?

    b) Which properties can you use 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: a) No, the above code will not display a border around the table.

    b) To get the table border we can use the border property.

    c) We will add a new code i.e, border: 3px solid orange.

     

    4. Observe the given code and answer the question following it:

    <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?

    b) Which properties have been used to specify the background and 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: a) The background color for the table’s heading row will be pink

    &

    The text color for the table’s heading row will be blue.

    b) The property that have been used to specify the background color is background-color property and the property that have been used to specify the text color is text color property.

    c) The space between the border and the cell content is known as padding. The property that has been used to specify this value is cell padding.

     

    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:  th,tr {background-color: pink, color: blue}