Tuesday 9 July 2019

arithmatic operations page using html css and javascript



<html>
<head> </head>
<body bgcolor=cyan text=orange>
<center>
<h3>Javascript Programming</h3>
<hr/>
<table>
<tr>
<th>First Number:</th>
<td><input type="text" id="t1" value=" "/></td></tr>
<tr><th>Second Number:</th>
<td><input type="text" id="t2" value=" "/><td></tr>
<tr><td><input type="button" onclick="f1()" value="sum"/>
<input type="button" onclick="f2()" value="sub"/>
<input type="button" onclick="f3()" value="mul"/>
<input type="button" onclick="f4()" value="div"/>
</td></tr>
<tr><td><p id="p1"> </p>
<p id="p2"> </p>
<p id="p3"> </p>
<p id="p4"> </p></td></tr>
<script>
function f1()
{
var obj1=document.getElementById("t1");
var obj2=document.getElementById("t2");
var obj3=document.getElementById("p1");
var x=parseInt(obj1.value);
var y=parseInt(obj2.value);
var z=x+y;
obj3.innerText="sum Results:"+z;
}
function f2()
{
var obj1=document.getElementById("t1");
var obj2=document.getElementById("t2");
var obj3=document.getElementById("p2");
var x=parseInt(obj1.value);
var y=parseInt(obj2.value);
var z=x-y;
obj3.innerText="sub Results:"+z;
}
function f3()
{
var obj1=document.getElementById("t1");
var obj2=document.getElementById("t2");
var obj3=document.getElementById("p3");
var x=parseInt(obj1.value);
var y=parseInt(obj2.value);
var z=x*y;
obj3.innerText="mul Results:"+z;
}
function f4()
{
var obj1=document.getElementById("t1");
var obj2=document.getElementById("t2");
var obj3=document.getElementById("p4");
var x=parseInt(obj1.value);
var y=parseInt(obj2.value);
var z=x/y;
obj3.innerText="div Results:"+z;
}

</script>
</table>
</center>
</body>
</html>
















Saturday 6 July 2019

Horizontal paragraphs information using html and CSS3





<html>
<head>
<style>
#div1::first-letter
{
 color:green;
 font-size:40px;
}

#div1
{
  background-color:lightyellow;
  border:2px solid green;
  padding:5px;
  text-align:justify;
  column-width:150px;
  column-rule:5px double green;
 }
</style>
</head>
<body>
 <h1 align="center">CSS3</h1>
 <hr></hr>
 <div id="div1">
Hyderabad Sunrisers  captain Mr.Scott credited his bowlers after his side 
registered a 
massive 10-wicket win over Gujarat Lions on Thursday night. Opting to bowl,
 Bhuvneshwar Kumar's four for 29 helped SRH restrict Gujarat Lions to 135 for eight on a two-paced track.

Boosted by his team's bowling performance, 
Shikhar Dhawan too roared back to form to hit an unbeaten 53 as SRH posted their second successive victory in the Indian Premier League 2016. Skipper Warner too continued with his rich vein of form to hit 74 not out off just 48 balls.
<br><br>
"I have to give credit to the bowlers. Gives us a great opportunity to play the way we want to play with the bowlers restricting the opposition. Our bowlers were fantastic. Bhuvi and Fizzy, his change of pace is very different. I faced him in Bangalore and he tried to knock my block off. It's a great art to change the pace as he does.
<br><br>
"Proud of the way the bowlers are bowling and if we keep chasing totals like this, we'll go a long way in the tournament," Warner said.
<br><br>
Man of the Match Bhuvneshwar Kumar was elated with his performance and said Aaron Finch's wicket was a big boost.<br>
<br>
"It was a big boost. He was the one who scored runs for them, won all three matches for them. Wanted to get him early on. Heavily dependent on top three, they are. If we could get them out, the team wouldn't score too many," Bhuvneshwar said. 

Sunrisers Hyderabad captain David Warner credited his bowlers after his side registered a massive 10-wicket win over Gujarat Lions on Thursday night. Opting to bowl, Bhuvneshwar Kumar's four for 29 helped SRH restrict Gujarat Lions to 135 for eight on a two-paced track.

Boosted by his team's bowling performance, Shikhar Dhawan too roared back to form to hit an unbeaten 53 as SRH posted their second successive victory in the Indian Premier League 2016. Skipper Warner too continued with his rich vein of form to hit 74 not out off just 48 balls.
<br><br>
"I have to give credit to the bowlers. Gives us a great opportunity to play the way we want to play with the bowlers restricting the opposition. Our bowlers were fantastic. Bhuvi and Fizzy, his change of pace is very different. I faced him in Bangalore and he tried to knock my block off. It's a great art to change the pace as he does.
<br><br>
"Proud of the way the bowlers are bowling and if we keep chasing totals like this, we'll go a long way in the tournament," Warner said.
<br><br>
Man of the Match Bhuvneshwar Kumar was elated with his performance and said Aaron Finch's wicket was a big boost.<br>
<br>
"It was a big boost. He was the one who scored runs for them, won all three matches for them. Wanted to get him early on. Heavily dependent on top three, they are. If we could get them out, the team wouldn't score too many," Bhuvneshwar said. 
 </div>

</body>
</html>

Wednesday 3 July 2019

Student information form using html and css


<html>
<head>
<style>

h1
  { 
    color:green;
text-decoration:yellow;
  }
</style>
</head>
<body>
<table>
<center>
<h1>Student Form </h1>
<hr/>
<form id="form1" autocomplete="off" action="Register.java" method="GET">
Student Name:
<input type="text" name="t1" autofocus required />
<br/> <br/>
Student Age:
<input type="number" min="20" max="100" name="t2"/>
<br/> <br/>
Email ID:
<input type="email" name="t3"/>
<br/> <br/>
Pin code:
<input type="text" name="t4" pattern="\d{6}"/>
<br/> <br/>
Join Date:
<input type="date" name="t5" />
<br/> <br/>
are you agree terms and conditions?
<input form="form1" type="checkbox" name="ck1" value="yes" /><br/><br/>
<input type="submit" value="Register"/>
</form><br/>
</center>
</body>
</html>















Tuesday 2 July 2019

text styles in css3 using a web pages



<!DOCTYPE html>
<html>
<head>
<style>
p
{
 border:2px solid blue;
 padding:4px;
}
h1
{
 color:blue;
 fozt-size:50px;
 text-align:center;
 text-shadow:0px 0px 10px red;
}
h3
{
 border:2px solid green;
 text-align:center;
}

</style>
</head>
<body>
<h1>Text Styles of CSS3</h1>
<hr/>
<p style="text-align:justify;word-spacing:10px;">
this we page is developed by using css3 text styles</p>

<h3 style="letter-spacing:10px;">Aurora's Technology & Management Academy</h3>

<h3 style="text-transform:uppercase;">Aurora's Technology & Management Academy</h3>
<h3 style="text-transform:lowercase;">Aurora's Technology & Management Academy</h3>
<h3 style="text-transform:capitalize;">Aurora's Technology & Management Academy</h3>
<h3 style="text-decoration:underline;">Aurora's Technology & Management Academy</h3>
<h3 style="padding-top:10px;text-decoration:overline;">Aurora's Technology & Management Academy</h3>
<h3 style="text-decoration:line-through;">Aurora's Technology & Management Academy</h3>

</body>
</html>

Monday 1 July 2019

online product details page using html and css



<!DOCTYPE html>
<html> 
<head>
<style>
figure
{
  border:1px solid blue;
  width:250px;
  text-align:center;
  padding bottom:20px;
  border-radias:5px;
}
</style>
</head>
<body>
<h1>HTML5 semantic Tags </h1>
<hr> </hr>
<figure>
<img border="0" src="iphone.jpg" width="200"/>
<figcaption>product name:iphone 7s </figcaption>
</figure>
<br/> <br/>
<details>
<summary>show/hide product features</summary>

<ul>
<li>1715 mAH li-ion Battery</li>
<li>2GB RAM|16GB ROM </li>
<li>icloud</li>
<li>16MP primary camera|5MP front</li>
<li>5.7 inch retina Display</li>
<li>photo and video geotagging</li>
</ul>
</details>
</body>
</html>






</html>