Computer Applications (Commerce) – XII Chapter 5

Chapter 5
Web Designing using HTML

Different types of Lists in HTML

There are three kinds of lists in HTML - unordered lists, ordered lists and definition lists.
Unordered list displays a bullet in front of each item in the list. Ordered list presents the
items in some numerical or alphabetical order. A definition list is a list of terms and the
corresponding definitions.

Tags Use Attributes Values and Purpose

To create bulleted To specify the type of bullet. “Disc”, “Circle”
<UL> Type
list and “Square” are the values for ●, ○ and ▪
To specify the type of numeral. The values
Type
To create numbered are “1”, “I”, “i”, “a” and “A”.
<OL>
list To specify the starting number. The value
Start
should be an integer.
To specify an item in the unordered or ordered list. Used inside the pairs
<LI>
<UL>…</UL> and <OL> … </OL>
<DL> To create a definition list
<DT> Used inside <DL>… </DL> to specify each data item (or term) in the list
<DD> Used after each <DT> to describe the term

Nested List: A list inside another list is called nested list. Usually unordered and ordered lists
are nested.

Links in HTML
A hyperlink (or simply link) is a text or an image in a web page that we can click on, and
move to another document or another section of the same document. The <A> tag, called
anchor tag is used to give hyperlinks. Anything given between the tag pair <A> and </A> will
be a link. Href is the main attribute of <A> tag. The URL (address of the web page/site) is
given as its value.
There are two types of linking – internal linking and external linking.
A link to a particular section of the same document is known as internal linking. The
attribute Name of <A> tag is used to specify the name of a section of the web page. This
name should be prefixed with # symbol to create the link using Href attribute.
The link from one web page to another web page is known as external linking. The URL
(address of the web page/site) is given as the value for Href attribute.
The following is an example for e-mail linking:
<A Href= mailto: "[email protected]"> SCERT</A>

1
Joy John’s CA capsules
Computer Applications (Commerce) – XII Chapter 5

Inserting Music and Video in Web pages

To add music or video to the web page, <EMBED> tag is used. There is another tag
<NOEMBED> which can be used to display a text if the <EMBED> tag is not supported by the
browser. The main attribute of the <EMBED> tag is Src, which specifies the URL of the music
or video files to be included. The other attributes are Height, Width, Align, etc.
There is another tag <BGSOUND> with which music can be played in the background while
the page is viewed.

Creating Table in Web page

Tags Use Attributes Values and Purpose

To specify the thickness of the border line
Border
around the table.
Bordercolor To set the colour to the border
To specify the position of the table inside
Align
the browser window.
Bgcolor To set the background colour of the table.
<TABLE> To create table
To set an image as the background of the
Background
table.
To specify the space to be left between
Cellspacing
cells.
To specify the space in between the cell
Cellpadding
border and cell content.
To specify the horizontal alignment of the
Align
text in a cell in that particular row.
To specify a row To specify the vertical alignment of the
<TR>
in a table Valign content in a cell of a row. Top, Middle,
Bottom or Baseline are the values.
Bgcolor To give background colour to a particular row.
To specify the Align
Same as in the case of <TR>, but applicable
heading cell. Data Valign
<TH> only in a particular cell.
will be bold and Bgcolor
central aligned. To span a cell over 2 or more columns in a
Colspan row. It is a kind of merging 2 or more columns
in a row.
To specify the To span a cell over 2 or more rows in a
<TD>
data in a cell Rowspan column. It is a kind of merging 2 or more rows
within a row. in a column.
<CAPTION> To add descriptive text to a table as its caption.

Dividing the Browser window

The browser window can be divided into two or more panes to accommodate different
pages simultaneously. HTML provides a tag <FRAMESET> to partition the browser window
into different sections. Each individual section is called a frame. Such a frame can contain a
web page.

2
Joy John’s CA capsules
Computer Applications (Commerce) – XII Chapter 5

Tags Use Attributes Values and Purpose

To specify the number of vertical frames in the
To partition the Cols
frameset.
browser window
<FRAMESET> Rows To specify the number of horizontal frames.
into different
To specify the thickness of border for the
frame sections. Border
frames
To define the To specify the html file to be loaded in the
Src
frame for frame.
<FRAME>
including the
Name To give a name to target the frame
web page
Used to display some text content in the window if the browser is unable to
<NOFRAME>
support frames.

Nesting of Frameset
When we want to divide a horizontal frame into 2 or more vertical frame or vice versa
nesting of frameset is used.

Forms in Web pages

HTML Forms are used to collect data from the webpage viewer for processing. A Form
consists of two elements: a <FORM> container tag and Form controls like text boxes,
textarea fields, drop-down menus, radio buttons, checkboxes, etc.

Tags Use Attributes Values and Purpose

To specify the URL of the Form handler to

To provide a Action
process the data collected.
<FORM> container for
To specify the method to upload the data.
Form controls. Method
Get and Post are the values.
To specify the control type. The values:
Text creates textbox,
Password creates textbox in which typed
characters are displayed as asterisks (*),
To make Type
Radio creates radio buttons for selection,
different types
Submit creates submit button to upload
of controls
data,
<INPUT> such as Text
Reset clears the entries in the Form.
Box, Radio
Name To give a name to an input control.
Button, Submit
Value To give an initial value to a control.
Button etc.
To specify the size of the text box and
Size
password box.
To specify the maximum length of
Maxlength
characters in text box and password box.

3
Joy John’s CA capsules
Computer Applications (Commerce) – XII Chapter 5

To provide Name To give a name to the control

space to give Rows To specify the number of rows in the area.
<TEXTAREA>
text in more To specify the number of characters in a
Cols
than one line. row.
Name To identify the control
To create drop To specify whether it is a list box or combo
<SELECT> Size
down list box box.
Multiple To allow selection of multiple items.
To specify the
<OPTION> items in the Selected To indicate the item for default selection.
SELECT list
<FIELDSET> To group related controls in the Form.
<LEGEND> To set a caption for FIELDSET group

Overview of HTML 5
HTML5 was developed jointly by World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG). The new standard incorporates features like
video playback, drag-and-drop etc. Mobile web browsers that are pre-installed in iPhones, iPads,
Android phones, etc. support HTML5.

4
Joy John’s CA capsules
Computer Applications (Commerce) – XII Chapter 5

Questions from Previous Years’ Question Papers (Computer Applications)

1. Consider the following list created using HTML.
D. Laptop
E. Desktop
F. Printer
What will be the value of START and TYPE attribute of <OL> tag?
(a) START = “D” TYPE = “A”
(b) START = “4” TYPE = “A”
(c) START = “4” TYPE = “I”
(d) START = “D” TYPE = “I” (1) (March 2016)
2. Explain the HTML tag <table> and its attributes. (3) (March 2016)
3. ____ attribute of <frame> tag is used to prevent users from resizing the border of a
specific frame by dragging it. (1) (SAY 2016)
4. Explain <OL> tag with suitable example. (3) (SAY 2016)
5. Write the complete HTML tag that links the text “PSC” to the website
www.keralapsc.org. (1) (March 2017)
6. Explain nesting of frameset with an example. (3) (March 2017)
7. Write the HTML code to create the following table:
No. of Students
Science 55
Commerce 60
(2) (March 2017)
Humanities 58
8. _____ tag in HTML is used to create drop-down list.
(a) SELECT (b) OPTION (c) INPUT (d) LIST (1) (SAY 2017)
9. Write an HTML code to create the following table:
PAY ROLL
EMPNO NAME SALARY
101 ABIN 15,000
102 SINI 25,000
103 ANU 20,000 (3) (SAY 2017)

Questions from Previous Years’ Question Papers (Computer Science)

1. The <DD> tag gives ________. (1) (March 2016)
2. Create a table with 5 types of fruit names, use headings as serial number, name and
cost. (5) (March 2016)
3. Create an ordered list of five fruits using small Roman numerals. (5) (March 2016)
4. Write an HTML code to display a list of hardware and software of a company in the
following format:
I. Hardware
1. Cables
(i) UTP
(ii) Coaxial
(iii) Fiberoptic

5
Joy John’s CA capsules
Computer Applications (Commerce) – XII Chapter 5

2. Storage Devices
(i) USB
(ii) HardDisk
(iii) Tape
II. Software
1. Application Software
(i) MS Office
(ii) Inventory Management System
2. System Software
(i) Compilers
(ii) Assemblers (5) (SAY 2016)
5. Write an HTML code to display a user registration form as shown below:

User Registration Form

Please complete the following form to register with our site

User name Password

Gender: Male: Female:

How did hear about us: Select Answer

Please check this box if you wish to be added in our mailing list

We will not pass your details to any third party

Register Now
(5) (SAY 2016)
6. A link to a particular section of the same document is called ______. (1) (March 2017)
7. Create a web page using frames for Tourism department showing list of tourist places in
Kerala. When a place is selected a detailed description should be available in a separate
window. (5) (March 2017)
8. Create a form that accepts information regarding a student. Fields necessary are name,
age, class, sex, roll number, hobbies and date of birth. Use appropriate form controls.
(5) (March 2017)
9. Which HTML tag is used to create ordered list? (1) (SAY 2017)
10. Write an HTML code for a web page to show the following details in blue background:
Components of a Computer
 Hardware
1. RAM
2. ROM
3. Hard Disk
 Software
1. System Program
2. Application Program (3) (SAY 2017)
11. <FORM> tag contains some other tags to facilitate interaction between user and web
page. Write any two control tags and explain their mode of interaction. (2) (SAY 2017)

6
Joy John’s CA capsules