Pages

Monday, March 26, 2018

how to create a website/webpage in html notepad in urdu/hindi

Source Codes for a stunning looking web page. copy it and past it to your own page and view it on any brower

onlinewebsite.html

   <html>

<style>
*{padding :0px ;
   margin : 0px ;}

body{background-color:#C2CDD1;}
#mainPage{ border:2px solid black;overflow:hidden; width:988px ; margin :24px auto ;background:#87CC99;}
#header{border:1px solid #485e49;width:100%;height:150px;background-color:#016E37;  }

#menu{background:#87CC99;  }
.menu{background:#485e49;margin:0px ;height : 50px ;border:2px solid
white;border-radius: 10px;
 overflow:hidden;}
.menu li{float:left ; border-right:1px solid white ; height : 50px}
.menu li a{font-size:30px ; color:white; text-decoration:none;
 margin:30px;55}
 .menu .submenu{display:none ;position:absolute;}
 .menu li:hover .submenu{display:block ; }

 .submenu li{ background:green;border:1px solid white;
 float:none;width: 170px ;
 list-style-type:none;position:relative ;top : 18px; }

 .submenu1{display:none;position:absolute ; left : 170px ; top:-20px}
 .submenu li:hover .submenu1{display:block;}

 #right-col{float : right ;}
 #right-col ul{background:#F5E58E; margin:0px; width: 150; }
 #right-col ul li{border : 1px solid white;list-style-type:none;
 margin-left: -40px ;} 
 
 #right-col ul li a{font-size : 30px ; text-decoration : none;
margin : 30px ;}



 #left-col {float:left}
 #left-col ul{background:#F5E58E; margin:0px; width: 150; }
 #left-col ul li{border : 1px solid white;list-style-type:none;
 margin-left: -40px ;}


#left-col ul li a{font-size : 30px ; text-decoration : none;
margin : 30px ;}
 
#writing{float:left ;width:605;background-color:#DEDBB8;border : 1px solid white;
  }

 

h1{color:#BCF5D1; font-size:44px; text-shadow:2px 1px white;}
h2{color:blue;font-size:22px;border-bottom:1px solid black;}

 </style>
<body>
 <div id="mainPage"> 
 <div id="header">
 <h1 align="center">Computer Master website</h1>
 <!--end of header-->
 <!-- menu color : #485e49-->
</div>
 <div id ="menu" >

 <ul class = "menu">
 <li><a href ="#" >home</a></li>
 <li><a href ="#" >beginner</a></li>
 <li><a href ="#" >intermediate</a>
 <ul class="submenu" ><li>beginner</li>
 <li>beginner</li>
 <li>beginner
 <ul class="submenu1" ><li>beginner</li>
 <li>beginner</li>
 <li>beginner</li>
 <li>beginner</li></ul></li>
 <li>beginner</li></ul>

 </li>
 <li><a href ="#" >contact</a></li>
 <li><a href ="about.html" >about us</a></li>

 </ul>

 <!-- end of menu-->
 </div>

 <div id ="left-col">
 
 <ul>
  <li><span style="font-size: 43px;padding: 30;color:blue;">Join us</span></li>
 <li><a href ="#">youtube</a></li>
 <li><a href ="#">youtube</a></li>
 <li><a href ="#">youtube</a></li>
 <li><a href ="#">youtube</a></li>


 </ul>
  <!-- end of left-col -->
 </div>
 
 
 <div id ="writing">
 <h2 align="center">Abdul wahab</h2>

 <p>my name is abdul wahaba and i belong to pakistan.i am the student
 of computer science.and if you have any problem related to java or html programming
 so you can contact me throw my page contact ok</p>

<p>my name is abdul wahaba and i belong to pakistan.i am the student
 of computer science.and if you have any problem related to java or html programming
 so you can contact me throw my page contact ok</p>

<p>my name is abdul wahaba and i belong to pakistan.i am the student
 of computer science.and if you have any problem related to java or html programming
 so you can contact me throw my page contact ok</p>

<p>my name is abdul wahaba and i belong to pakistan.i am the student
 of computer science.and if you have any problem related to java or html programming
 so you can contact me throw my page contact ok</p>

<p>my name is abdul wahaba and i belong to pakistan.i am the student
 of computer science.and if you have any problem related to java or html programming
 so you can contact me throw my page contact ok</p>

<p>my name is abdul wahaba and i belong to pakistan.i am the student
 of computer science.and if you have any problem related to java or html programming
 so you can contact me throw my page contact ok</p>
 <p align="center"><img src="website.jpg" width="400px" height="300px"></p>
 <!--end of writing-->
 </div>
 <div id ="right-col">
 
 <ul>
  <li><span style="font-size: 43px;padding: 30;color:blue;">Join us</span></li>
 <li><a href ="#">youtube</a></li>
 <li><a href ="#">youtube</a></li>
 <li><a href ="#">youtube</a></li>
 <li><a href ="#">youtube</a></li>


 </ul>
  <!-- end of left-col -->
 </div>
 <!--end of mainPage-->
 </div>
</body>

</html>





about.html

<html>

<title>about me</title>
<body>

<a href ="onlinewebsite.html">Home</a>

This is about me

</body>


</html>

5 comments: