Scribd
Upload
2K views12 pages

CH-11 HTML Table Forms PDF

This document provides information about HTML lists, tables, and forms. It discusses the different types of lists supported in HTML, how to create tables with various attributes, and defines common form controls like text boxes, radio buttons, and submit buttons. It also includes sample code to demonstrate creating lists, tables, and form controls.

Uploaded by

Jay Sanduke
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
2K views12 pages

CH-11 HTML Table Forms PDF

This document provides information about HTML lists, tables, and forms. It discusses the different types of lists supported in HTML, how to create tables with various attributes, and defines common form controls like text boxes, radio buttons, and submit buttons. It also includes sample code to demonstrate creating lists, tables, and form controls.

Uploaded by

Jay Sanduke
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 12

HTML - II

LISTS, TABLES AND FORMS


TYPE A: Very Short Answer Questions
1 What type of lists are supported by HTML?
Ans. There are three types of lists are supported by HTML.
1. Unnumbered 2. Numbered 3. Definition
2 Which three tags let you create the definition lists?
Ans. 1. <DL> - Definition list 2. <DT> - Definition term 3. <DD> - Definition description
3 Which two tags let you create the
(i) Unnumbered list? ii) Numbered list?
Ans. (i) <UL> (ii) <OL>
4 What is the table? Which tag is used to create tables in HTML?
Ans. A table is a collection of rows and column. <TABLE> tag is used to create tables in HTML.
5 Which attributes are used to give border to table?
Ans. BORDER attribute is used to give border to table.
6 Which attributes lets you control the display of select border sides of a table?
Ans. FRAME attribute lets you control the display of select border sides of a table.
7 Which attribute is used to control the inside table border?
Ans. RULES attribute is used to control the inside table border.
8 How is spacing in cells of table controlled?
Ans. To control the spacing in cells, The CELLSPACING and CELLPADDING attributes can be used.
9 What is the role of ALIGN attribute of <TABLE> tag?
Ans. Align attribute is used to align the table. It specifies the alignment of a table according to the surrounding text. It
can have values left, right or center.
10 What is the use of having a SUMMARY attribute in <TABLE> tag?
Ans. The summary attribute specifies a summary of the content of a table. It makes no visual difference in ordinary web
browsers.
11 How can you specify following in a table?
(i) Background image ii) Background colour. (iii) Table height vi) Table width.
Ans. (i) <TABLE BACKGROUND = “D:\Bg3.jpg”> (ii) <TABLE BGCOLOR = “RED”>
(iii) <TABLE HEIGHT = 100> (iv) <TABLE WIDTH = 70>
12 Which tag is used to specify
(i) Table data? ii) Table header? iii) Table row?
Ans. (I) <TD> (II) <TH> (III) <TR>
13 Name the attributes used for following?
(i) Setting the cell width ii) Setting cell’s background image iii) Setting cell’s background colour
vi ) Changing the cell span v) Aligning cell contents vertically.
Ans. (i) WIDTH (ii) BACKGROUND (iii) BGCOLOR (iv) ROWSPAN AND COLSPAN (v) VALIGN
14 What for are <TH> and <TR> tags used?
Ans. <TH> is used for table header and <TR> is used for table row.
15 A set of header rows is defined using _______________ tag.
Ans. A set of header rows is defined using < THEAD > tag.
16 What are forms?
Ans. Forms are means to collect information/data from the site-visitor. It is done with the help of controls that collect
the information and send it over.
17 What do you understand by controls in forms?
Ans. Users interact with forms through named controls. A control’s “control name” is given by its name attribute. Each
control has both an initial value and a current value, both of which are character strings.
18 Name different control types supported by HTML forms.
Ans. 1. Buttons 2. Checkboxes 3. Radio buttons 4. Menus 5. Password 6. Text input
7. Hidden controls
19 Write the tags to define the following:

Page 1 of 12
(i) A text box (ii) A text area (iii) A radio button (iv) A check box
(v) A password box (vi) A pop up box (vii) Submit button (viii) A label.
Ans. (i) <INPUT type = “text” >
(ii) <TEXTAREA>
(iii) <INPUT type = “radio”>
(iv) <INPUT type = “checkbox”>
(v) <INPUT type = “password”>
(vi) HTML does not have any pop component, for this we can use any scripting language.
(vii) <BUTTON type = “submit”>
(viii) <label for="male">label name</label>

TYPE B: Short Answer Questions


1 Differentiate between ordered and unordered lists.
Ans. The < ol > tag is used for defining ordered or numbered lists. In these lists, a number or letter appears in front of
each list item.
The < ul > tag is used for defining unnumbered lists (or unordered lists). They have a special bullet symbol in front of
each item.
2 How will you nest an unordered list inside an ordered list?
Ans. <html>
<head>
<title> set of list
</title>
</head>
<body>
<ol>
<li>First order point
<ul>
<li>First unordered list item</li>
<li>Second unordered list item</li>
</ul>
</li>
<li>Another ordered point</li>
</ol>
</body>
</html>
3 How would you indent a single word and put a square bullet in front of it?
Ans. <ul type="square"><li>example</li></ul>
(Putting the type="square" in the <li> tag would give the same result because there's only one item in this list.)
4 Write the HTML to create the following indentation effect:
Apple pie,
pudding,
and pancake,
all begin with an A.
Ans. <html>
<head>
<title>example </title>
</head>
<body>
<dl>
<dt>Apple pie,</dt>
<dd>pudding,</dd>
<dl>
<dd>and pancake,</dd>
</dl>
All begin with an A.
</dl>
Page 2 of 12
</body>
</html>
5 Use a definition list to show that the word “glunch” means “a look of disdain, anger, or displeasure” and that the
word “glumpy” means “sullen, morose, or sulky.”
Ans. <html>
<head>
<title>example </title>
</head>
<body>
<DL>
<DT>glunch
<DD>a look of disdain, anger, or displeasure.
<DT>glumpy
<DD>sullen, morose, or sulky.
</DL>
</body>
</html>
6 Write code to produce following HTML tables?
i) B ii) A D
A
C B E
C F

A C E iv) A B C D
iii) B D F B D F H

A B C vi) A B C D
v) D E F B F G H

Ans. (i)
<html>
<body>
<table border>
<tr><td rowspan="2" align="center">A</td>
<td >B</td>
</tr>
<tr>
<td >C</td>
</tr>
</table>
</body>
</html>

(ii)
<html>
<body>
<table border="1" frame="void" >
<tr>
<td>A</td>
<td>D</td>
</tr>
<tr>
<td >B</td>
<td >E</td>
</tr>
<tr>
<td >C</td>
<td >F</td>

Page 3 of 12
</tr>
</table>
</body>
</html>

(iii)
<html>
<body>
<table border="1" frame="lhs" >
<tr>
<td>A</td>
<td>C</td>
<td>E</td>
</tr>
<tr>
<td >B</td>
<td >D</td>
<td>F</td>
</tr>
</table>
</body>
</html>

(iv)
<html>
<body>
<table border="1" frame="above" >
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td >B</td>
<td >D</td>
<td>F</td>
<td>H</td>
</tr>
</table>
</body>
</html>

(v)
<html>
<body>
<table frame="border" rules="cols">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td >D</td>
<td >E</td>
<td>F</td>
</tr>
</table>
</body>
Page 4 of 12
</html>

(vi)
<html>
<body>
<table border="1" frame="box" rules="groups">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td >B</td>
<td >F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
</body>
</html>
7 Write HTML to produce a table having a background image image.gif stored in pictures folder of D: drive and
having height of 200 pixels and width of 130 pixels.
Ans. <html>
<body>
<table border="3" background="D:\pictures\image.jpg" height=200 width=130>
<tr>
<td> cell </td>
<td> cell </td>
</tr>
<tr>
<td> cell </td>
<td> cell </td>
</tr>
</table>
</body>
</html>
8 Create following HTML table
A B
C D E F
G H
Ans. <html>
<body>
<table width="132" border="1">
<tr align="center">
<td width="22" rowspan="3">A<br/>C<br />G<br /></td>
<td colspan=3 align="center">B</td>
</tr>
<tr align="center">
<td width="29">D</td>
<td width="24">E</td>
<td width="29" rowspan=2>F</td>
</tr>
<tr align="center">
<td colspan=2 align="center">H</td>
</tr>
</table>
</body>
Page 5 of 12
</html>
9 Create a table having three header rows with yellow background colour, five table-body rows having pink colour
and two footer rows having cyan colour. Assume table contents on your own.
Ans. <html>
<body>
<table border="1">
<thead bgcolor="yellow">
<tr>
<td>header 1</td>
</tr>
<tr>
<td> header 2 </td>
</tr>
<tr>
<td> header 3 </td>
</tr>
</thead>
<tbody bgcolor="pink">
<tr>
<td>body 1</td>
</tr>
<tr>
<td> body 2</td>
</tr>
<tr>
<td>body 3 </td>
</tr>
<tr>
<td>body 4</td>
</tr>
<tr>
<td>body 5</td>
</tr>
</tbody>
<tfoot bgcolor="cyan">
<tr>
<td>footer 1</td>
</tr>
<tr>
<td> footer 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
10 Write HTML code to produce following controls Grade :

Ans. <html>
<body>
<form>
Grade:
<input type="radio" name="grade" value="A"/>A
<input type="radio" name="grade" value="B"/>B
<input type="radio" name="grade" value="C"/>C
<br>
Subjects:
<input type="checkbox" name="s1" value="english">English
Page 6 of 12
<input type="checkbox" name="s2" value="maths">Maths
<input type="checkbox" name="s3" value="computer">Computers
<input type="checkbox" name="s4" value="account">Accounts
<input type="checkbox" name="s5" value="eco">Economics
<input type="checkbox" name="s6" value="bo">Business Studies.
</form>
</body>
</html>
11 Write HTML code to produce these controls
(i) A text box (ii) A text area with 10 rows and 30 columns (iii) A password text box
(ii) A pop up box to choose class from it.
Ans. <html>
<body>
<form>
Name:
<input type="text" name="f_name" >
<br>
<textarea rows="10" cols="30" name="add">
write address here.....
</textarea>
<br>
password:
<input type="password" name="pwd" >
<br>
Class:
<select name="class">
<option value="class10">Class 10</option>
<option value="class11">Class 11</option>
<option value="class12">Class 12</option>
</select>
</form>
</body>
</html>

Type C: Long Answer Questions


1 Create web pages to display following sets of lists:

Ans. <html>
<head>
<title> set of list
</title>
</head>
<body>
<table width="1000">
<tr>
<td>
<ol>
<li> one
Page 7 of 12
<ol type="a">
<li>uno
<li>hanna
</ol>
<li> two
<ol type="a">
<li>dos
<li>dool
</ol>
<li> three
<ol type="a">
<li>tres
<li>set
</ol>
</ol>
</td>
<td>
<ul>
<li>Chevy
<ul type="circle">
<li>Cavaler
<li>Malibu</ul>
<li>Ford
<ul type="circle">
<li>Escort
<li>F100</ul>
<li>Mazda
<ul type="circle">
<li>626
</ul>
</ul>
</td>
<td>
<dl>
<dt><u>Fruit</u>
<dd>Applies, Oranges, Pears, Plums
<dt><u>Vegetables</u>
<dt>&nbsp;&nbsp;&nbsp;&nbsp;Com
<dd>on the cob
<dd>cream
<dt>&nbsp;&nbsp;&nbsp;&nbsp;Carrots
<dt>&nbsp;&nbsp;&nbsp;&nbsp;Green Beans
</dl>
</td>
</tr>
</table>
</body>
</html>
2 Create a webpage to display a table as given below:

Ans. <html>

Page 8 of 12
<body>
<table border="1">
<thead bgcolor="pink" align="center">
<tr>
<td>Decimal</td>
<td>English</td>
<td>Hindi</td>
<td>Spanish</td>
<td>Korean</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>One</td>
<td>Ek</td>
<td>Uno</td>
<td>Hanna</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
<td>Dou</td>
<td>Dos</td>
<td>Dool</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
<td>Theen</td>
<td>Tres</td>
<td>Set</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
<td>Chaar</td>
<td>Quatro</td>
<td>Net</td>
</tr>
<tr>
<td>5</td>
<td>Five</td>
<td>Paanch</td>
<td>Cinco</td>
<td>Daset</td>
</tr>
</tbody>
</table>
</body>
</html>
3 Create a form as given below by using different Form tags and attributes.

Page 9 of 12
Ans. <html>
<head>
<title> form
</title>
</head>
<body>
<h1>My Guest Book</h1>
<form method=post>
Please let me know what you think of my web pages. Thanks!
<br><br>
What is your
name?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;
<input type="text" id="name"><br>
What is your e-mail address:
<input type="text" id="name"><br><br>
Check all that apply:
<br>
<input type="checkbox" name="s1" value="v1">I realy like your Web Site.
<br>
<input type="checkbox" name="s2" value="v2">One of the best site I've seen.
<br>
<input type="checkbox" name="s3" value="v3">I have no taste so your site
didn't do much for me.
<br><br>
Choose the one thing you love best of my pages:
<br>
<input type="radio" name="grade" value="A"/>That gorgeous picture of you and
your dogs.
<br>
<input type="radio" name="grade" value="B"/>The inspiring recap about your

Page 10 of 12
childhood.
<br>
<input type="radio" name="grade" value="C"/>The detailed list of your hobbies.
<br><br>
Imagine my site as a book, vedio, or album.<br>
What do you think about my site?<br>
<textarea rows="4" cols="40">ADD MORE DETAILS ABOUT YOUR HOBBIES!
ADD PICTURES OF YOUR CHILHOOD
ADD YOUR FAVOURITES
</textarea>
<br>
<br>
<input type="button" value="Click here to submit">
</form>
</body>
</html>
4 Create a webpage that receives pizza orders through a web form as shown below:

Ans. <html>
<head>
<title> form
</title>
</head>
<body>
<h1>Pizza Factory</h1>
<hr>
<form method=post>
<table>
<tr>
<td>
<h3>Pizza order Form</h3>
</td>
</tr>
<tr>
<td width="200">
Name
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
Page 11 of 12
Address
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
<h3>Size</h3>
</td>
<td>
<h3>Toppings</h3>
</td>
</tr>
<tr>
<td>
<input type="radio" name="size" value="A"/>Small
<br>
<input type="radio" name="size" value="B"/>Medium
<br>
<input type="radio" name="size" value="C"/>Large
<br><br>
</td>
<td>
<input type="checkbox" name="s1" value="v1">Cheese
<br>
<input type="checkbox" name="s2" value="v2">Olives
<br>
<input type="checkbox" name="s3" value="v3">Pepperotn
<br>
<input type="checkbox" name="s3" value="v3">Bacon
</td>
</tr>
<tr>
<td>
<input type="button" value="Process Order">
</td>
<td>
<input type="button" value="Clear">
</td>
</tr>
</table>
<textarea rows="5" cols="50">
</textarea>
</form>
</body>
</html>

Page 12 of 12

You might also like