CH-2 PART-2 LIST, TABLES AND IMAGES

I.FILL IN THE BLANKS:

1. By default, the unordered lists items are marked with ———-.
Ans. bullet

2. ——— attribute of list lets you reverse the order of the item list.

Ans. REVERSED.

3. A list inside another list is called as a ——- list.

Ans. nested.

4. A collection of related elements is called as ——-

Ans. list.

5. ——– property of table defines the space between the content of the table and the border.

Ans. CELLPADDING.

6. The <img> tag is an —— tag, that means it has no closing tag.

Ans. empty.

7. ——- is an attribute of the <img> tag which specifies the location or URL of the image to be displayed.

Ans. SRC.

8. ——- attribute is used to give border to an image.

Ans. BORDER.

II. MULTIPLE CHOICE QUESTIONS:

1. Which tag is used for List items?

(a) <OL> (b) <LI> (c) <UL> (d) <DL>

Ans. (b) <LI>

2. Which element contains definition?

(a) <DL> (b) <DD> (c) <DT> (d) <UL>

Ans. (b) <DD>.

3. Which of the following can’t be the value of list-style-type? (a) Square (b) Circle (c) Ellipse (d) Disc

Ans. (c) Ellipse

4. Which attribute is only used with <ol> ? (a) Value (b) type (c) compact (d) start

Ans. (d) start

5. With the help of which tag, is a row defined in HTML? (a)<row> (b) <tr> (c) <row-table> (d) <tablerow>

Ans. (b) <tr>

6.By using which of the following options, the border of table can be collapsed? (a) border-collapse: collapse  (b) table-border: collapse (c) border: collapse (d) table-border-collapse: collapse

Ans. (a) border-collapse: collapse

7. Web browsers display images in the following format (a) XBM (b) GIF (c) JPEG (d) All of these

Ans. (d) All of these

8.The correct HTML code for inserting an image is  (a) <img href=”image.gif”> (b) <img> image.gif</gif> (c) <img src=”image.gif”>  (d) <image src=”image.gif”>

Ans. (c) <img src=”image.gif”>

9. src attribute used with <img> tag stands for (a)screen (b)source (c) screen resolution count (d) structure

Ans. (b) source

10. alt attribute allows: (a) addition of an alternate hyperlink (b) addition of a border to image (c) use of an alternative image in place of the specified image (d) addition of alternative text about an image

Ans. (d) addition of alternative text about an image.

III. APPLICATION BASED QUESTIONS:

(a) Ruchika was making an ordered list and she noticed that the items of the list by default started with numbers. She wants to use Roman numerals for numbering. How can she do this?

Ans. To use Roman numerals for numbering, Ruchika must use the following code

<OL TYPE-I> or <OL TYPE-i>

e.g.

<HTML>
<HEAD>
<TITLE> LIST MADE BY RUCHIKA </TITLE>
</HEAD>
<BODY>
<OL TYPE = I>
<LI> SEBAHELP.COM </LI>
<LI> SEBA BOARD </LI>
<LI> ASSAM </LI>
<OL TYPE = i>
<LI>sebahelp.com</LI>
<LI>seba board </LI>
<LI> assam </LI>
</OL>
</BODY>
</HTML>

(b) Rohan has created a table and he wants that the table border should be collapsed into a single border. Which property should he use?

Ans. To make the border to collapsed, Rohan must use the following property: border-collapse: collapse

e.g.

<HTML>

<HEAD>

<TITLE> Table made by Rohan. </TITLE>

<style type="text/css">

table, th, td
{

border: 2px solid black;
border-collapse:collapse;

}

</style>

</HEAD>

<BODY>

<TABLE>

<CAPTION> Student Details </CAPTION>

<TR>

<TH> Sl. No. </TH>

<TH> Name </TH>

<TH> Marks </TH>

</TR>

<TR>

<TD> 1 </TD>

<TD> Rohan </TD>

<TD> 56</TD>

</TR>

<TR>

<TD> 2 </TD>

<TD> Arpita </TD>

<TD> 48</TD>

</TR>

</TABLE>

</BODY>

</HTML>

(c) Ashmita has added few images on her web page but she wants to keep some provisions for the visually impaired people or users using text-based browsers so that they get the description for the images. Which attribute should she use to accomplish the task?

Ans. To accomplish the task, Ashmita should use the ALT attribute with the image tag. The syntax of ALT attribute is given below:

<IMG SRC = “path of the image” ALT = “alternate text”>

IV. ANSWER THE FOLLOWING:

(a) Differentiate between the <OL> and <UL> tag.

Ans. <OL> stands for Ordered List which can be either numerical or alphabetical while <UL> stands for Unordered List which can be either disc, square or circle.

(b) Write the syntax for using list-style-type property.

Ans. <UL style=”List-style-type:square”>

<LI> List Item 1</LI>

<LI> List Item 2</LI>

</UL>

(c) Define Padding property.

Ans. Padding property is the space between its content and its border.

The syntax for padding property for all four sides of a <p> element to 20px is as follows:

p{

padding: 20px

}

(d) What is description list? Define the different tags used to create a description.

Ans. A definition list, also called a description list consists of a term followed by its definition. In simple terms, this is a list of items, with a description of each item. It starts and ends with <DL> and </DL> tag

The different tags used to create a description are:-

(a) The <DT> tag is used in defining the terms.

(b) The <DD> tag is used in describing each term.

(e) What is the use of type attribute with an unordered list?

Ans. The HTML <ul> type attribute is used to specifics what kind of bullet used to mark items in the list such as Disc, Circle or Square.

(f) State the use of any two properties that you use to enhance the appearance of a table.

Ans. The following properties are used to enhance the appearance of a table:-

• Border-property, which is used to specify the thickness, type and color of the border.

•Border-collapse, is used to apply separate or single border for each cell.

(g) How are images added in an HTML document?

Ans. The images on a web page can be inserted using <IMG> tag, which is an empty tag. The most widely used image formats supported by HTML are GIF, JPEG and PNG.

The syntax to insert an image on the web page is

<IMG SRC=”image file name”>

ACTIVITY:

1. Create a web page to show a list of various colours and their Hex codes (Hexadecimal numerals are widely used by computer system designers and programmers because they provide a human-friendly representation of binary-coded values). Also provide image for the colors you mention in your code.

<!DOCTYPE html>
<html>
<head>
<title> Colours and their Hex codes</title>
</head>
<body text=white>

<H1 align=center> <FONT COLOR=BLUE> CH-2, PART-2, V.1. ACTIVITY</FONT> </H1>
<P>Below are some of the common color names and codes.</P>

<FONT SIZE=5 color=brown>

<TABLE border=2 width=80% align=center>
<CAPTION> LIST OF VARIOUS COLOURS AND THEIR HEX CODES </CAPTION>

<TR>

<TH> Color Name</TH>

<TH> Color Code</TH>

<TH>Image</TH>

</TR>

<TR>

<TD> 1. CYAN </TD>

<TD>#00FFFF</TD>

<TD bgcolor=#00FFFF> </TD>

</TR>

<TR>

<TD> 2. RED </TD>

<TD>#FF0000</TD>

<TD bgcolor=#FF0000> </TD>

</TR>
<TR>

<TD> 3. BLUE </TD>

<TD>#0000FF</TD>

<TD bgcolor=#0000FF> </TD>

</TR>
<TR>

<TD> 4. DARK BLUE </TD>

<TD>#00008B</TD>

<TD bgcolor=#00008B> </TD>

</TR>
<TR>

<TD> 5. LIGHT BLUE </TD>

<TD>#ADD8E6</TD>

<TD bgcolor=#ADD8E6> </TD>

</TR>
<TR>

<TD> 6. PURPLE </TD>

<TD>#800080</TD>

<TD bgcolor=#800080> </TD>

</TR>
<TR>

<TD> 7. Yellow</TD>

<TD>#FFFF00 </TD>

<TD bgcolor=#FFFF00 > </TD>

</TR>
<TR>

<TD> 8. Lime </TD>

<TD> #00FF00 </TD>

<TD bgcolor= #00FF00 > </TD>

</TR>
<TR>

<TD> 9. Magenta </TD>

<TD>#FF00FF </TD>

<TD bgcolor=#FF00FF > </TD>

</TR>
<TR>

<TD> 10. Pink </TD>

<TD>#FFC0CB</TD>

<TD bgcolor=#FFC0CB> </TD>

</TR>
<TR>

<TD> 11. White</TD>

<TD>#FFFFFF</TD>

<TD bgcolor=#FFFFFF> </TD>

</TR>
<TR>

<TD> 12. Silver</TD>

<TD>#C0C0C0</TD>

<TD bgcolor=#C0C0C0> </TD>

</TR>

<TR>

<TD> 13. Gray </TD>

<TD>#808080</TD>

<TD bgcolor=#808080> </TD>

</TR>

<TR>

<TD> 14. Black </TD>

<TD>#000000</TD>

<TD bgcolor=#000000> </TD>

</TR>

<TR>

<TD> 15. Orange </TD>

<TD>#FFA500</TD>

<TD bgcolor=#FFA500> </TD>

</TR>

<TR>

<TD> 16. Brown </TD>

<TD>#A52A2A</TD>

<TD bgcolor=#A52A2A> </TD>

</TR>

<TR>

<TD> 17. Maroon </TD>

<TD>#800000</TD>

<TD bgcolor=#800000> </TD>

</TR>

<TR>

<TD> 18. Green </TD>

<TD>#008000</TD>

<TD bgcolor=#008000> </TD>

</TR>

<TR>

<TD> 19. Olive</TD>

<TD>#808000</TD>

<TD bgcolor=#808000> </TD>

</TR>

<TR>

<TD> 20. Aquamarine </TD>

<TD>#7FFD4</TD>

<TD bgcolor=#7FFD4> </TD>

</TR>

</TABLE>

</FONT>

</body>

</html>

2.Create a web page to form a tabular representation of different mobile names with their features.

<!DOCTYPE html>
<html>
<head>
<title> list of Mobile phones with features </title>
</head>
<body text=white>

<H1 align=center> <FONT COLOR=BLUE> CH-2, PART-2, V.2. ACTIVITY</FONT> </H1>
<P>Below are some of the common color names and codes.</P>

<FONT SIZE=5 color=brown>

<TABLE border=2 width=80% align=center>
<CAPTION> LIST OF MOBILES WITH FEATURES </CAPTION>

<TR>

<TH> MOBILE NAME</TH>

<TH> FEATURES</TH>

</TR>

<TR>

<TD> 1. Apple iPhone 13 Pro Max </TD>

<TD>
Hexa Core (3.23 GHz, Dual Core + 1.82 GHz, Quad core)
Apple A15 Bionic
6 GB RAM
Display:
6.7 inches (17.02 cm)
457 PPI, OLED
120 Hz Refresh Rate
Camera:
12 MP + 12 MP + 12 MP Triple Primary Cameras
Dual LED Flash
12 MP Front Camera
Battery:
4352 mAh
Fast Charging
Lightning Port</TD>

</TR>

<TR>

<TD> 2. Samsung Galaxy S22 Ultra </TD>

<TD>
Octa core (3 GHz, Single Core + 2.4 GHz, Tri core + 1.7 GHz, Quad core)
Snapdragon 8 Gen 1
12 GB RAM
Display
6.8 inches (17.27 cm)
501 PPI, Dynamic AMOLED
120 Hz Refresh Rate
Camera
108 + 12 + 10 + 10 MP Quad Primary Cameras
LED Flash
40 MP Front Camera
Battery
5000 mAh
Fast Charging
USB Type-C Port</TD>

</TR>
<TR>

<TD> 3. Vivo X80 Pro Plus 5G</TD>

<TD>Octa core (3.2 GHz, Single Core + 2.75 GHz, Tri core + 2 GHz, Quad core)
Snapdragon 8 Plus Gen 1
8 GB RAM
Display6.78 inches (17.22 cm)
518 PPI, AMOLED
120 Hz Refresh Rate
Camera50 + 48 + 12 + 12 MP Quad Primary Cameras
LED Flash
44 MP Front Camera
Battery4700 mAh
Flash Charging
USB Type-C Port</TD>

</TR>
<TR>

<TD> 4. Xiaomi 12 Pro 5G </TD>

<TD>
Octa core (3 GHz, Single Core + 2.5 GHz, Tri core + 1.8 GHz, Quad core)
Snapdragon 8 Gen 1
8 GB RAM
Display
6.73 inches (17.09 cm)
521 PPI, AMOLED
120 Hz Refresh Rate
Camera
50 MP + 50 MP + 50 MP Triple Primary Cameras
Dual-color LED Flash
32 MP Front Camera
Battery
4600 mAh
Hyper Charging 4.0
USB Type-C Port</TD>

</TR>
<TR>

<TD> 5.OnePlus 10 Pro </TD>

<TD>Octa core (3 GHz, Single Core + 2.5 GHz, Tri core + 1.8 GHz, Quad core)
Snapdragon 8 Gen 1
8 GB RAM
Display
6.7 inches (17.02 cm)
526 PPI, Fluid AMOLED
120 Hz Refresh Rate
Camera
48 MP + 50 MP + 8 MP Triple Primary Cameras
Dual LED Flash
32 MP Front Camera
Battery
5000 mAh
Super VOOC Charging
USB Type-C Port</TD>

</TR>

</TABLE>

</FONT>

</body>

</html>

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here