Tuesday 31 January 2017

How to create table in HTML


                             

                                             Table

Definition of table

   In html, the beginning of a table is marked by the <table> tag and end is marked by the </table>
tag.
    A table places information inside the cells formed by dividing a rectangle into rows and columns. Most cells contain data, some cells usually on the table's top or side.
    Using one or more rows <tr> </tr>.
    Each  row contains cells holding a heading <th> </th>.
    Each  row contains cells holding a data <td> </td>.

Attributes:

1. Caption
     The table might also have a caption enclosed within <caption> .......</caption>.
     Contents generally are rendered above or below the table, indicating what the table contains.

2. Border
      If we want a border for our table, we must give the beginning tag as <table border>.
      We can also give numbers to represent the size of the border <table border=5>.

3. Align 
      Align attribute is used  to place the table in the form left, right, center being the default.

4. Width
      The width attribute for the table element specifies the width of a table in pixel, or as a percentage  value %.

5. Bgcolor
      The table element also can be assigned background colors using the bgcolor attribute.
      Bgcolor valid for <table>, <tr>, <th>, <td>.

6. cellpadding
      Give space  between content and border that controlled by the cellpadding attribute.
7. cellspacing
      Give space between cells in a table is controlled by the cell spacing attribute.
      Value as pixels, percentage.

8. Row span
      The process of combining vertically, one or more adjacent cells into one in know as row span.

9. Colspan 
       The process of combining horizontally, one or more adjacent cells into one in know as colspan.

 Simple Example:

 <html>
<head>
<title> Table </title>
</head>
<body>
<table border="5">
<th>name</th>
<th>place</th>
<tr>
<td>Divya</td>
<td>india</td>
</tr>
<tr>
<td>john</td>
<td>usa</td>
</tr>
</table>
</body>
</html>

output:  

 Example of Rowspan and colspan attribute:

 Rowspan example:
 <html>
<body>
<table border="4">
<caption>Rowspan</caption>
<tr>
<td rowspan="2">admi</td>
<td>john</td>
</tr>
<tr>
<td>raj</td>
</tr>
</table>
</body>
</html>

Output:

Colspan example:

<html>
<body>
<table border="4">
<caption>Rowspan</caption>
<tr>
<td colspan="3">admi</td>
</tr>
<td>john</td>
<td>raj</td>
<td>mach</td>
</tr>
</table>
</body>
</html>

Output:

  

 Example of Cellspacing and cellpadding:

 <html>
<body>
<table border="1" cellspacing="30" cellpadding="40">
<caption>Cellspacing and cellpadding</caption>
<tr>
<td>fruit</td>
<td>vegitable</td>
<td>sweets</td>
</tr>
</table>
</body>
</html>

Output:

 

Example of Alignment:

<html>
<body>
<table border="1" cellspacing="10" cellpadding="10" width="100%">
<caption>Alignment</caption>
<tr>
<td align="center">fruit</td>
<td align="left">vegitable</td>
<td align="right">sweets</td>
</tr>
<tr>
<td valign="top" height="100">orange</td>
<td valign="middle">onion</td>
<td valign="bottom">laddu</td>
</tr>
</table>
</body>
</html> 

Output:

Color for table and cell:

<html>
<body>
<table border="1" cellspacing="10" cellpadding="10" bgcolor="green">
<caption>color</caption>
<tr>
<td bgcolor="lightblue">color1</td>
<td bgcolor="pink">color2</td>
<td bgcolor="orange">color3</td>
</tr>
</table>
</body>
</html>

Output:

 Background image in Table:

<html>
<body bgcolor="green">
<table border="1" cellspacing="10" cellpadding="30" background="E:\lavanya\image\nature image\cascate - Copy.gif">
<caption>color</caption>
<tr>
<td bgcolor="lightblue">color1</td>
<td bgcolor="pink">color2</td>
<td bgcolor="orange">color3</td>
</tr>
</table>
</body>
</html> 

Output:

  

Posted by at No comments:

Working with Frames in HTML

                                           FRAMES

Definition of frames:

       HTML provides the facility to divide the internet explorer window into many section using frameset. Each frame can contain a different document. A frameset in HTML is a way to display multiple web page in the same internet explorer window, at the same time.
       The contents of one frame can be linked to the contents of another. example of : one frame can contain links that produce a result in another frame.

Attributes of frames:

  1. cols
  2. rows
  3. frameborder
  4. framespacing
1. Cols
     If you want that your internet explorer window divides into vertical section then you can do it by using cols attribute of the <frameset> tag. The cols attribute takes the values in percentage separated by commas.
     Example:  <frameset cols="30%, 40%, 30%">

2. Rows
      If you want that your internet explorer window divides into horizontal section then you can do it by using rows attribute of the <frameset> tag. The rows attribute takes the values in percentage separated by commas.
        Example:  <frameset rows="30%, 40%, 30%">

3. Frameborder
      If you want apply border to your frame using frameborder attribute of <frameset> tag.
         Example:  <frameset  frameborder="10">
                     If you Don't want border to your frame, set the frameborder = "0"

4.Framespacing
     You can also set the thickness of the frame border using the framespacing attribute of the <frameset> tag.
         Example: <frameset frameborder="1" framespacing="10">

Using of <noframes>:

       The <noframes> tag should contain the markup and text to be dispalyed when a browser that doesn't support frames accesses the web page.  The <noframes> tag should be found only within the frameset element.

Creating a frame:

        Frames are created by using <frameset> tag.  You can create multiple <frame> tag inside a <frameset> tag.  The <frame> tag uses an attribute named as src.  The src attribute takes an html file, as a value, which you want to upload to that frame.
       

Example of vertical and horizontal frames:

Creating vertical frames:

Frame.html
<html>
<frameset cols="30%,30%,40%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<noframes></noframes>
</html>     

Frame1.html
<html>
<body>
<h5>Frame 1<h5>
<h6> This is a frame1 <h6>
</body>
</html>

Frame2.html 
<html>
<body>
<h5>Frame 2<h5>
<h6> This is a frame 2 <h6>
</body>
</html>

Output:


Creating horizontal frames:

Frame.html
<html>
<frameset rows="30%,30%,40%">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
<noframes></noframes>
</html>     

Frame3.html
<html>
<body>
<h5>Frame 3<h5>
<h6> This is a frame 3 <h6>
</body>
</html>

Frame4.html 
<html>
<body>
<h5>Frame 4<h5>
<h6> This is a frame 4 <h6>
</body>
</html>

Output:


Using a named frame ad Hyperlink Targets:

       Named frames are those frames for which you assign a name.  When you want to use a named frames as hyperlink target, you have to pass the name of the frame to the target attribute. So when you click the hyperlink, the referenced page opens in the target frame that you assign in the target attribute.  

Example:

Frame.html:

 <html>
<frameset cols="25%,75%">
<frame src="frame1.html">
<frame src="frame2.html" name="hyper">
</frameset>
<noframes></noframes>
</html>

Frame1.html
<html>
<body>
<a href="page1.html" target="hyper">
<h1>page 1</h1>
</a>
<br>
<a href="page2.html" target="hyper">
<h1>page 2</h1>
</a>
<br>
<a href="page3.html" target="hyper">
<h1>page 3</h1>
</a>
<br>
</body>
</html>

Frame2.html<html>
<body>
<h1 align="center">
click a hyperlink
</h1>
</body>
</html>

Output:


Posted by at No comments:

Wednesday 4 January 2017

HTML has three basic forms of lists

                                             Lists

Definition of Lists

         List is used  mention a list of items. When we want to mention a list of items, there are two methods of doing so. We can number them as 1,2,3... etc. or we can list them one below the other without numbers.
        when we list them without numbers, it is called an unordered list.
        When we number them, it is called an ordered list.

    Types of lists:

        There are three types of lists:
        1. Ordered Lists  (<ol>)
        2. Unordered List  (<ul>)
        3. Definition List  (<dl>)

   Ordered List

        Lists appear with numbers are called ordered list.  An ordered list as enclosed by <ol> and </ol>. Using Arabic number, letters, or roman numerals. Ordered lists are used for creating step-by-step instructions because the list items are automatically numbered by the browser.
        List items in ordered and other lists are defined by using list item tag <li> and use of the closing </li>
tag is required.

   <ol> Tag:

    The  <ol> tag  has three type of attributes
         1. Compact
         2. Start
         3. Type

1. Compact 
        The compact attribute requires no values under traditional HTML
   ex:    <ol compact = "compact">

2. Start 
      The <ol> element also has a start attributes that takes a numeric values to begin the list numbering.
      The type attributes is a letter  or a numeral, the start value must be a number.
ex:    <ol type="a"  start="10">

3. Type
        The type attribute of following:
   

Symbol
                                        Meaning
                   1
            Number
                   A
            Upper Case letter A,B,C…
                   a
            Lower case letter a,b,c…..
                   I
            Upper case Roman numerals I,II,III….
                   i
            Lower case Roman numerals I,ii,iii…..

Example of ordered list:

      We give some following html code
<html>
<body>
<h1> orderlist </h1>
<h3> chocolates</h3>
<ol type="I">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ol>
<h3> Games </h3>
<ol type="1">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ol>
</body>
</html>

Output:

The Another example:

We give some following html code

 <html>
<body>
<h1>Order list</h1>
<h3> fruit </h3>
<ol type="i">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
<li> banana </li>
</ol>
<h3> vegetable </h3>
<ol type="A">
<li> carrot </li>
<li> onion </li>
<li> potato </li>
</ol>
</body>
</html>

Output: 

 

 Unordered List

     An unordered list is represented by the <UL> and </UL> tags. It is used for lists of items in which the ordering is not specific.
     The <UL> tag is given at the beginning and the </UL> tag is given at the end.
     Each  List item is given an <LI> tag. 

<UL> Tags:

     The type attribute can appear within the <UL> tag.
     The value for type attribute :
  1.  disc
  2. circle
  3. square 

Example:

We give some following html code

 <html>
<body>
<h1> Unordered list </h1>
<h3> chocolates</h3>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul>
<h3> Games </h3>
<ul type="disc">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ul>
<h3> fruit </h3>
<ul type="circle">
<li> apple</li>
<li> orange </li>
<li> grapes </li>
</ul>
</body>
</html>

Output:



 Definition List

       A Definition list is a list of terms paired with associated.
           Definition lists are enclosed within <dl> and </dl>. Each term being defined is indicated by a <dt>
element, which derived from "definition term".
           Each definition itself is defined by <dd>.

Example:

We give some following html code

<html>
<body>
<h1> Definition List </h1>
<ol><li> chocolates</li>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul><br>
<li> fruit  </li>
<ul type="circle">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
</ul><br>
<h4>vegetable</h4>
<dl>
<dt>carrot</dt>
<dd>Good for health</dd>
</dl></ol>
</body>
</html>

 

Ouptut: 

 Nested Lists

     It is possible to use one type of list within another type of list. There are called nested lists.

Example:

We give some following html code

<html>
<body>
<h1> Nested List </h1>
<ol><li> chocolates</li>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul>
<li> Games </li>
<ul type="disc">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ul>
<li> fruit  </li>
<ul type="circle">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
</ul>
</ol> 
</body>
</html>

Output:


 


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