HTML-I

Types of List in HTML

HTML Support two types lists, which are described below. 

1. OL (Ordered List): This list is used to create numerical list such (1, 2, 3, 4....) and alphabetical (i, ii, iii, iv), (a, b, c, d) with selected data items.

Example of OL

<OL>

<LI> Keyboard </LI> 

<LI> Mouse </LI> 

<LI> Scanner </LI>

 <LI> MICR </LI> 

</OL>

2. UL (Un-Ordered List): This list is used to create symbol list such (Bullets, Circle, Square, etc.) with selected number of data elements. 

Example of UL

<UL>

<LI> Keyboard </LI> 

<LI> Mouse </LI> 

<LI> Scanner </LI>

 <LI> MICR </LI> 

</OL>

A Complete Example of OL (Ordered List) and UL (Unordered Listed)

<html>
<title> An example of ordered and unordered list </title>
<body>

<h1> Examples of Ordered List </h1>

<OL>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<OL start=100>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<OL type=i>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<OL type=I>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<OL type=a>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<OL type=A>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<OL type=I start=5>

<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</OL>

<h1> Examples of Unordered List </h1>
<UL>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</UL>

<h1> List of Computer Parts </h1>
<UL type=circle>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</UL>

<h1> List of Computer Parts </h1>
<UL type=square>
<LI> Monitor </LI>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> Printer </LI>
</UL>
</body>
</html>

Tables in HTML

A table consisted with number of rows and columns and in HTML, tables are created using the <table> tag.

Elements of Table

Cell: a cell is a smallest element of every table which appear in rectangle shape.

<TD>: TD stands for “Table Data” and this tag is responsible to define a table cell.

Row: in a table row responsible to contain a complete record and its available in horizontal form.  

<TR>: TR stands for “Table “Row” and this tag is used to define a table row.

Headings: The 'th' tag is used to define a tables heading.

<TH>: TH stands for “Table Heading” and this tag is used to define a table headings. 

Attributes of Table 

bgcolor: this attribute is used to fill desired color in table background. 

Example

<table border=4 bgcolor="Lime">

background: this attribute is used to fill desired image file in background of table. 

Example

<table border=4 background="nature.jpg">

Cellpadding and Cellspacing

These attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

A Complete Example of Table 

<table border="2" bgcolor="Blue" cellpadding="10" cellspacing="5">

<th> Employee no. </th>

<th> Employee name </th>

<th> Department </th>

<tr>

<td>101</td>   <td>Ravi kumar</td>   <td>Admin</td>

</tr>

<tr>

<td>102</td>   <td>Manoj sharma</td>   <td>Sales</td>

</tr>

<tr>

<td>103</td>   <td>Dinesh</td>   <td>Purchase</td>

</tr>

</table>

Form Controls in HTML

Form controls are mostly used to accept data from users 

<input type=text>: this control is used to create a simple text box and a text normally is used to accept different types of input from the user.    This control is used to create radio buttons and radio controls are used to select only one item form multiple choices.

Example Radio Control 

<form> Select your gender

Male <input type=radio name=g>

Female <input type=radio name=g>

</form>

<input type="checkbox">: this control is used to create Checkbox buttons and checkbox control is used to select multiple items from a list.

Example Checkbox Control 

<form>Select your qualification

10th <input type=checkbox name=q>

12th <input type=checkbox name=q>

Graduation <input type=checkbox name=q>

</form>

<input type="select">: This control is used to create drop down list.

Example Select Control

<select name=country>

<option> Indian </option> 

<option> Japan </option> 

<option> Shri Lanka </option> 

<option> China </option> 

</select>

Button Controls: The Button control is used to display a push button and a push button can be a submit button or a command button but by default, this control is a submit button.

Note: A button control should be attach with a event to perform any types of operation.

Example of Submit Button Control

<input type="Submit">

Example of Command Button Control

<input type="Submit">

Introduction of Frames

HTML frames are used to divide a single browser window into multiple sections where each section can load a separate HTML document and a collection of frames in web browser window is known as a frameset. 

An Example of Frames in HTML 
<html>
<title>HTML Frame Examples</title>
<frameset cols="25%,50%,25%">
   <frame name="left" src="a.html" />
   <frame name="center" src="b.html" />
   <frame name="right" src="c.html" />
   </frameset>
</html>