Wednesday, 3 July 2013

HTML FORMS

HTML FORMS

Html Forms are used to accept different kinds of input from the user. The Form element is used to create forms. To create different controls in a form, the web page designers use the Input element. The Type attributes within the INPUT element  defines the type of control to be created. We have different kinds of the  form element like text box, radio button, menu list, check box and buttons in the form elements. 

Here is the simple code of a Form:
<form action="" method="Get">
<table>
<tbody>
<tr>
<td>Brand: </td>
<td><input disabled="" type="text" value="Cars" /> </td></tr>
<tr>
<td>Brand Model: </td>
<td><input type="text" value="Honda City" /> </td></tr>
<tr>
<td>Color: </td>
<td><textarea cols="15" readonly="" rows="3">
Black
White
Gray
</textarea>
</td></tr>
<tr>
<td><input type="hidden" value="M101" /></td>
<td><input type="button" value="Done" /></td>
</tr>
</tbody></table>
</form>

 Here is the simple output:

Brand:
Brand Model:
Color:
Posted by at 1 comment:

Friday, 28 June 2013

FRAMES

FRAMES

HTML provides the feature of frames that allows the users to simultaneously have multiple view of the web page. This is done by splitting the browser window into the multiple screens. There are two types of frames.

  1. Normal Frames divide the browser window into multiple screen. It can be resizeable.
  2. In-line Frames appear within the content of a document.It can not be resize. Its support is limited.

Hyperlinked Frames:

Frames can contain hyperlinks that allow web page designers to link one frame to other frame. The frame for which a link should be established is known as the "Source Frame" and the frame from which the link should be established is known as the "Target Frame".  The "name" attribute of the Frame element is used to specify the name of the source frame. 
The Linked frame can open in the same frame, different frame or in a different browser window. The different values of the target attribute determine where the linked frame will be loaded.

Here is a simple code as shown below:

<html>
<head>
<title> New Frame Style </title>
</head>
<frameset cols="25%,75%">
<frame name="Links" src="Links.html"></frame>
<frame name="content" src="main.html"></frame>
</frameset>
</html>
Posted by at No comments:

TABLE ELEMENT

TABLE ELEMENT

In order to display the data in shape of table we need to the different kind of tags which will help to form the table.Some time the table become long that we need to scroll the page down for this to avoid different anomaly we used the Header and Footer option of the Microsoft Word. There are three sub elements of the Table element that helps in dividing the table into header, footer and the body.


Elements Description
THEAD Defines a table's header.
TFOOT Defines a table's footer.
TBODY Defines a table's content (body).
You can also group the columns of a table by using the COLGROUP element inside TABLE element. You can specify the number of columns for a column group in either of the two ways by using

  • The Span attribute of the COLGROUP element : sets the number of columns in the group. Its default value is 1.
  • The COL element in the COLGROUP element: Specifies one or more columns in the group.
You must specify the COLGROUP element immediately after the Table element, then THEAD, TFOOT and then the TBODY.

Here is the simple code:

<table border="3">
<colgroup span="3" width="300">
</colgroup>
<thead>
<tr>
<th>Student Name
</th><th>Grand Total (Out of 500)
</th><th>Percentage
</th></tr>
</thead>
<tfoot>
<tr>
<th>Total Student
</th><th>4
</th><th></th></tr>
</tfoot>
<tbody>
<tr>
<td>Saif
</td><td>450
</td><td>90%
</td></tr>
<tr>
<td>Ajmal
</td><td>40
</td><td>80%
</td></tr>
<tr>
<td>Saif
</td><td>452
</td><td>86%
</td></tr>
</tbody></table>

Here is the result shown below:

Student Name Grand Total (Out of 500) Percentage
Total Student 4
Saif 450 90%
Ajmal 40 80%
Saif 452 86%
Posted by at 4 comments:

NESTED LIST

NESTED LIST

Nested list is a list with in a list. You can form the combination of ordered list with nested unordered list. You just need to place the one list into the other list. Just try out

Simple code as shown below:
<ol>
<li>Pakistan
<ul>
<li> Islamabad
</li>
<li> Lahore

<ul type="rect">
<li> Shadman
</li>
<li> Bahria Town
</li>
<li> Bhati
</li>
<li> Cantt
</li>
</ul>
</li>
<li> Karachi
</li>
</ul>
</li>
<li> India
<ol type="I">
<li> Delhi
</li>
<li> Bombay
</li>
<li> Colcata</li>
</ol>
</li>
<li> America
</li>
<li>Afghanistan
</li>
<li>china
</li>
</ol>

Result is shown below:
  1. Pakistan
    • Islamabad
    • Lahore
      • Shadman
      • Bahria Town
      • Bhati
      • Cantt
    • Karachi
  2. India
    1. Delhi
    2. Bombay
    3. Colcata
  3. America
  4. Afghanistan
  5. china
Posted by at No comments:

UNORDERED LIST

UNORDERED LIST 

Unordered list is a a kind of list in which the list item represent in a sequence order without any no or alphabet. Unordered list represent in three different formats. Which are mentioned below:
  1. Disc
  2. Circle
  3. Square
You can not start the list with any no or alphabet because all the symbols are same. The Unorder List tag is as mentioned  <UL>, here "U" stands for unorder and "L" stands for List. One more important tag is <LI> which is known as List Index, this tag is used to enter the entries in the List. You must close the <UL> tag but <LI> is not necessary to close.
To use the style and start use the Tag like <UL type= disc>.

Some simple code is as mentioned below:

<ul  type=disc>
<li>Pakistan
</li>
<li>India
</li>
<li>China
</li>
<li>America
</li>
<li>Afghanistan
</li>
</ul>

Output is shown below: Check the other attributes by placing the code with your own.

  • Pakistan
  • India
  • China
  • America
  • Afghanistan
Posted by at No comments:

ORDERED LIST

Ordered List: 

Ordered list is a a kind of list in which the list item represent in a sequence order.Ordered list represent in five different number formats. Which are mentioned below:
  1. Decimals
  2. Lower-roman
  3. Upper-roman
  4. Upper case Alphabet
  5. Lower case Alphabet
You can start the list with any no or alphabet if you use the attribute start. The Order List tag is as mentioned  <OL>, here "O" stands for order and "L" stands for List. One more important tag is <LI> which is known as List Index, this tag is used to enter the entries in the List. You must close the <OL> tag but <LI> is not necessary to close.
To use the style and start use the Tag like <OL type= A start 4>.

Some simple code is as mentioned below:

<ol start="4" type="A">
<li>Pakistan
</li>
<li>India
</li>
<li>China
</li>
<li>America
</li>
<li>Afghanistan
</li>
</ol>

Output is shown below:


  1. Pakistan
  2. India
  3. China
  4. America
  5. Afghanistan

Posted by at No comments:

LIST AND NESTED LIST

LIST AND NESTED LIST

In order to display a set or related items we use the list and HTML language provides different kind of the lists. A web developer has the choice to display the list singly or in nested shape. Any how the list are mainly divided into the five major categories.

But we will discuss the two main categories Ordered List and Unordered list but if you want to check out the other tags then they are just for your information. Check out your own.

Posted by at No comments:
Subscribe to: Posts (Atom)