Html and Css  for webpage is the  best  platform for the  complete webpage and website development. html provides many tags  that very useful for  web development . here i will tell you how to create  webpage or website that contains Form , links to another page , top navigation menus , tables  and much more. lets start !

 Web Page

abc

this is a simple webpage designed in html and css.

first of all you have create a simple syntax of html . you can use notepad or dreamweaver. Simple syntax of html language is given below:

<html>
<head>
<body>



</body>
</head>
</html>

I have created five main pages (Home page,Form page, Algebra page, Address page and Names page).

Home page consist of links to others pages or simple navigation menus, header ,hyperlinks  and data in tabular form.

while Form page contain Contact form and Algebra page consist of some values in Superscript form. In other two pages Address and names page i will tell you how to write names in Subscript form and in postal address syntax form.

now lets move towards the coding . the Html and Css code for the FORM page is given bellow :

 Form webPage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Page</title>
<style type="text/css">
body,td,th {
  color: #FFFFFF;
}
</style>
</head>

<body bgcolor="#00CCFF">
<form id="form1" name="form1" method="post" action="">
  <h1><strong>Contact me </strong></h1>
  <table width="525" height="235" border="1" cellpadding="00">
    <tr>
      <td width="113" bgcolor="#336633"><label for="name"><strong>Name:</strong></label></td>
      <td width="311" bgcolor="#666666"><input type="text" name="name" id="name" /></td>
    </tr>
    <tr>
      <td bgcolor="#006600"><label for="email"><strong>Email :</strong></label></td>
      <td bgcolor="#666666"><input type="text" name="email" id="email" /></td>
    </tr>
    <tr>
      <td bgcolor="#006600"><strong>Mobile :</strong></td>
      <td bgcolor="#666666"><input type="text" name="mobile" id="mobile" /></td>
    </tr>
    <tr>
      <td bgcolor="#006600"><strong>Comment :</strong></td>
      <td bgcolor="#666666"><textarea name="comment" id="comment" cols="45" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="2" align="center" bgcolor="#00FF00"><input type="submit" name="submit" id="submit" value="Submit" /> 
      <input type="submit" name="Cancel" id="Cancel" value="Cancel" /></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>
</body>
</html>

now the next one is algebra page .

Algebra webpage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body bgcolor="#33CCFF">

<p>1<sup sub>2</sup sub>=1</p>
<p>2<sup sub>2</sup sub>=4</p>
<p>3<sup sub>2</sup sub>=9</p>
<p>4<sup sub>2</sup sub>=16</p>
<p>5<sup sub>2</sup sub>=25</p>
<p>6<sup sub>2</sup sub>=36</p>
<p>7<sup sub>2</sup sub>=49</p>
<p>8<sup sub>2</sup sub>=64</p>
<p>9<sup sub>2</sup sub>=81</p>
<p>10<sup sub>2</sup sub>=100</p>
<p>11<sup sub>2</sup sub>=121</p>
<p>12<sup sub>2</sup sub>=144</p>
<p>13<sup sub>2</sup sub>=169</p>
<p>14<sup sub>2</sup sub>=196</p>
<p>15<sup sub>2</sup sub>=225</p>
<p>16<sup sub>2</sup sub>=256</p>
<p>17<sup sub>2</sup sub>=289</p>
<p>18<sup sub>2</sup sub>=324</p>
<p>19<sup sub>2</sup sub>=361</p>
<p>20<sup sub>2</sup sub>=400</p>

</body>
</html>

 Address webPage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body bgcolor="#00CCCC">
<p>Sender Addres (e.gcomsats abbottabad)</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;This a message E.G a, d d dc ve verb r b rb rwb rw bwr b wr br tb b bw b we f eqg req geq g .</p>
<p align="center"> Reciver addres</p>
</body>
</html>

 Names webPage :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body bgcolor="#00CCCC">

<h1> <strong>NAMES </strong></h1>
<h1>Ali<sub>1</sub></h1>
<h1>asim<sub>2</sub></h1>
<h1>Akbar<sub>3</sub></h1>
<h1>Adnan<sub>4</sub></h1>
<h1>Arif<sub>5</sub></h1>
<h1>Abdul<sub>6</sub></h1>
<h1>Anees<sub>7</sub></h1>
<h1>Akraam<sub>8</sub></h1>
<h1>basheer<sub>9</sub></h1>
<h1>junaid<sub>10</sub></h1>

</body>
</html>

now lets move towards the Home page .

Home webpage :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#navigation li{
  font:34px Arial, Helvetica, sans-serif;
  display:inline;
  list-style-type:none;
}
#navigation a{
  padding:25px 35px;
  bgcolor:#09f;
  color:#93F;
  text-decoration:none;
}
#navigation a:hover {
  bgcolor:#666666;
  color:#66;
}
#nagivation clear border{
  border-left-style:none;
}
.left edge{
  border-radius:6px 0px 0px 6px;
}
.right edge{
  border-radius:0px 6px 6px 0px;
}

  
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.k {
  font-family: Times New Roman, Times, serif;
}
body,td,th {
  color: #000;
}
.nav {
  font-size: large;
  font-style: oblique;
  background-color: #FFF;
  text-align: center;
  display: inline;
  height: auto;
  width: auto;
}
.navigation {
  float: right;
  border-top-color: #0F0;
  border-right-color: #0F0;
  border-bottom-color: #0F0;
  border-left-color: #0F0;
}
</style>
</head>

<body bgcolor="#669999">


 <p><img src="header.png" width="1360" height="155" alt="header pic" /></p>
 <div class="nav">
   <nav>
   <div id="navigation">
   <ul>
   <div class="#navigation">
     <div class="#navigation">
       
         <li>
         <a href="file:///C:/Users/Sohail%20Afzal/Desktop/assignmnt/form.html">Form</a></li>
       
       <li><a href="file:///C:/Users/Sohail%20Afzal/Desktop/assignmnt/algebra.html">Algebra</a></li>
       <li><a href="file:///C:/Users/Sohail%20Afzal/Desktop/assignmnt/address.html">Address</a></li>
       <li><a href="file:///C:/Users/Sohail%20Afzal/Desktop/assignmnt/names.html">Names</a></li>
     </div>
   </div>
   
   </nav>
 </div>

                   <h1 align="center">Sohail Afzal</h1>
                   <p align="center"> citizen of Abbottabad </p>
                 
                 <p align="center">Email Address: Sohailafzal128@gmail.com</p>
               
 <table width="379" height="168" border="05" align="center" cellpadding="10" cellspacing="10">
   <tr>
     <td colspan="2"><strong>Comsats Institute of information technology </strong></td>
   </tr>
   <tr>
     <td width="109"><strong>Name </strong></td>
     <td width="186"><strong>Sohail Afzal</strong></td>
   </tr>
   <tr>
     <td><strong>Reg No</strong></td>
     <td><strong>FA14-BSE-221</strong></td>
   </tr>
 </table>
<p>&nbsp;</p>
 <div bgcolor="red">
 <marquee>
<h1><a href="http:/www.infoopoint.com" target="new">Infoopint</a> <a href="http:/www.infoopoint.com" target="new"> InfooPoint</a></h1>
                         
             
   </blockquote>
   </marquee>
 </div>
</body>
</html>

you can download the  complete project by clicking on  the following button :

Download

Hope this project  will help the beginners to understand the basic tags of html and Css.

Stay connected for more updates . 🙂

LEAVE A REPLY

This blog is kept spam free by WP-SpamFree.