Chat room

Create a Meebo Chat Room
Showing posts with label learn web page design. Show all posts
Showing posts with label learn web page design. Show all posts

Thursday, November 25, 2010

HTML Calculator:gcufbioinfo

paste this code to your source code of your calculator in head part
function sqrt(form)
 {
form.displayvalue.value=Math.sqrt(form.displayvalue.value);
 }
function sq(form)
 {
form.displayvalue.value=eval(form.displayvalue.value)*eval(form.displayvalue.value);
 }
function ln(form)
 {
form.displayvalue.value=Math.exp(form.displayvalue.value);
 }
function equal(form)
 {
form.displayvalue.value=eval(form.displayvalue.value);
 }
function delChar(input)
 {
input.value=input.value.substring(0,input.value-length-1);
 }
function addChar(input,character)
 {
if(input.value==null||input.value=="0")
      input.value=character
else
      input.value+=character
 }
Insha Allah you will see your functioning very soon regards Admin Quratt ul ain Siddique.

Monday, November 22, 2010

HTML Calculator:gcufbioinfo

As I told you how to generate calculator using html codes so this is again calculator with some changes so plz try it. I will tell you how to make it functional
<html>
<title>Calculator</title>
<head></head>
<body>
<table border="2">
<tr>
<td><input name="displayvalue" size="39" value="0"></td>
   <tr>
     <td>
         <table border="2">
          <tr>
            <td>
                 <input type="button" value="     char      ">
            </td>
        <td>
        <input type="button" value="     delete       ">
        </td>
              <td>
        <input type="button" value="        =         ">
        </td>
          </tr>
         </table>
     </td>
            <tr>
              <td>
           <table border="2">
                <tr>
                <td>
                  <input type="button" value="  exp  ">
                </td>
                <td>
                  <input type="button" value="    7    ">
                </td>
                <td>
                  <input type="button" value="    8    ">
                </td>
                <td>
          <input type="button" value="    9    ">
        </td>
                <td>
                  <input type="button" value="  /  ">
                </td>
                </tr>
                <tr>
                <td>
                <input type="button" value="    ln    ">
      
                </td>
                <td>
                        <input type="button" value="    4    ">
                </td>
                <td>
                        <input type="button" value="   5     ">
                </td>
                <td>
            <input type="button" value="   6     ">
                </td>
                <td>
            <input type="button" value="  *  ">
                </td>
                </tr>
                <tr>
                 <td>
            <input type="button" value="  sqrt  ">
                 </td>
                 <td>
                        <input type="button" value="    1    ">
                 </td>
                 <td>
            <input type="button" value="    2    ">
                 </td>
                 <td>
            <input type="button" value="    3    ">
                 </td>
                 <td>
            <input type="button" value="  -  ">
                 </td>
                </tr>
                <tr>
                 <td>
            <input type="button" value="   sq   ">
                 </td>
                 <td>
            <input type="button" value="    0    ">
                 </td>
                 <td>
            <input type="button" value="     .    ">
                 </td>
                 <td>
            <input type="button" value="   %   ">
                 </td>
                 <td>
                        <input type="button" value="  + ">
                 </td>
                </tr>
                <tr>
                 <td>
              <input type="button" value="     (     ">
                 </td>
                 <td>
            <input type="button" value="  cos ">
         </td>
                 <td>
            <input type="button" value="  sin   ">
                 </td>
                 <td>
            <input type="button" value="  tan  ">
                 </td>
                 <td>
            <input type="button" value="  )  ">
                 </td>
                </tr>
           </table>
              </td>
        </tr>
   </tr>

</tr>
</table>
</body>
</html>
out put is as:
Now I tell you how to make it functional
Quratt ul ain Siddique

Monday, October 11, 2010

HTML Frames:

I told you people about the html frames there is the same thing but with the slight variation
<html>
<frameset rows="20%,80%">
<frame src="file:///E:/anny.html" name="frame1" noresize="noresize">
<frame src="http://www.islamickorner.com">
</frameset>
</html>
one new thing is noresize attribute which means you can not resize your page as previously by dragging its size is fixed you can check it by dragging your page it can't be happened.
the out put is as:

HTML Images2:

I told you how to link your page to other sites by using the <a href> tag so I have an assignment for you design a page in which you click on image to access the new page instead of a text eg you click Islamickorner to access this site but now click an image to access this site so try it
out put is as:

 click the second image to get the next page
this is the next page or site which is accessed by the link behind that image its code is as:

<a href="http://www.bermuda-online.org/roses2.gif"><img src="file:///C:/Documents%20and%20Settings/Administrator/My%20Documents/My%20Pictures/roses2.gif" height="200" width="200" border="10"></img></a>

HTML Images:

When you want to insert images to your web page:
<img src="enter your source or link of your image.jpg" alt="if your source is not available so enter any other link or display the message for the user image is not available.jpg" width="200" height="200" border="2"></img>
height of the pic width of the pic and border is for bordering the pic
the code is as
<center>
<img src="file:///C:/Documents%20and%20Settings/Administrator/My%20Documents/My%20Pictures/roses2.gif" alt="image not available" height="200" width="200" border="2"></img></center>

HTML Comment:

comments are actually for users they are not interpreted by your browser they are only for the convience of the developer for future use to remember for which purpose he/she used the tags.
<!--comment like this is the tag for comments not displayed on your web page-->
<hr>a horizontal line will be displayed on your page to divide it</hr>
<!--comment-->
<hr></hr>

HTML Lists:2:

Previously I told you about the ordered and ordered lists now there are some other examples the code is as:
<ol>
<li type="a">lowercase letter</li>
<li type="A">uppercase letter</li>
<li type="i">lowercase roman</li>
<li type="I">upppercase roman</li>
<li type="1">numeric</li>
</ol>
<ul>
<li type="square">square</li>
<li type="disc">disc</li>
<li type="circle">circle</li>
</ul>

HTML Lists:

Now the next is HTML Lists when you want to generate the lists of your items these lists can be ordered in the form of numbers or letters and in an unordered form also so the ordered list is
<ol>ordered list</ol>
<li>milk</li>
li means list items

<ul></ul>unordered list
<li>milk</li>
code is as:
<ul>
<li>coffee</li>
<li>milk</li>
</ul>
<ol>
<li>coffee</li>
<li>milk</li>
</ol>
the out put is as:

HTML Tables:

Now we are going to generate tables in HTML
First use the table tag <table border=1>
border=1 means the border of the table and its size
<tr> table row <td>table data</td> </tr>
now the code is as
</table>
<html>
<body>
<table border="1">
<tr>
<td><h1>Roll#</h1></td><td><h1>Name</h1></td><td><h1>E-mail</h1></td>
</tr>
<tr>
<td>1323</td><td>Quratt ul ain </td><td>Quratt786@live.com</td>
</tr>
<tr>
<td>1171</td><td>Ubaid ur rehman</td><td>obaid1986@live.com</td>
</tr>
</table>
</body>
</html>
out put is

Friday, October 8, 2010

HTML Tutorial part 4.1

you can also do this by splitting your page in columns like this

<frameset cols="50%,50%">
<frame src="a.html">
<frame src="b.html">
</frameset>
now I have a small assignment for you to check what you have learned generate a code for the following output:
for your convinience the source code of this page is
 as :
<html>
<frameset rows="25%,75%">

<frame src="b.html">

<frameset cols="25%,75%">
<frame src="b1.html">
<frame src="http://www.ncbi.com">
</frameset>
</html>
Hope you will like it so please leave your comments and give your feedbacks regards Quratt ul ain Siddique

Twitter Delicious Facebook Digg Stumbleupon Favorites More