WEB DESIGNING PRACTICAL IMPORTANT QUESTION
Q: Design a html page to display a picture. the picture should be removed from the screen after a mouse click on the picture.
A:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="logo1.png" width="50%" height="60%" onclick="remove(this)">
<script type="text/javascript">
function remove(hide) {
hide.style.display="none";
}
</script>
</body>
</html>
Q: create a html document with java-script code that has three text boxes and a button. the details should be accepted using text boxes are principal, rate of interest, and duration in years. when user click the OK, a message box appears showing the simple interest of principal amount?
A:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script >
function cal() {
p=document.getElementById('p').value;
r=document.getElementById('r').value;
n=document.getElementById('t').value;
alert("SIMPLE INTEREST OF PRINCIPAL AMOUNT=" + (p*n*r/100));
}
</script>
<style type="text/css">
input{
padding: 10px;
margin: 5px;
border-color: blue;
}
button{
color: white;
background-color: #4CAF50;
font-size: 16px;
padding: 15px 20px;
text-align: center;
}
h1{
text-align: center;
color: dodgerblue;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>SIMPLE INTEREST CALCULATOR: </h1>
AMOUNT: <input id="p"><br>
RATE OF INTEREST: <input id="r"><br>
TIME (IN YEARS): <input id="t"><br>
<button onclick="cal()">OK</button>
</body>
</html>
Q: write java-script code for displaying an alert dialog box with OK button, welcoming a user with a message to my web site." as soon as the OK button is clicked, an image should be displayed in the web browser?
A:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
alert("WELCOME TO MY SITE!");
document.write('<img src="logo1.png"/>');
</script>
</body>
</html>
Q Create a page with two frames using HTML: - The left frame of page contains the list of names and images of the Indian national leaders. - On the left frame when you click on the image, the details will be shown on the right fame.?
A IMAGE FOR DOWNLOAD:
code:-
first html page code for frame set page:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset cols="20%,80%">
<frame src="leader.html"></frame>
<frame src="" name="right"></frame>
</frameset>
</html>
second page for image:-
<body>
<h1>INDIAN LEADERS</h1>
<h1>LEADER 1(BAL GANGADHAR TILAK)</h1>
<a href="leader1.html" target="right"><img src="bal.png" height="200px" width="200px"></a>
<h1>LEADER 2</h1>
<a href="leader2.html" target="right"><img src="sardar.png" height="200px" width="200px"></a>
<h1>LEADER 3</h1>
<a href="leader3.html" target="right"><img src="maha.png" height="200px" width="200px"></a>
third page for detail by html name:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p{
background-color: lightblue;
border-style: solid;
border-color: cyan;
font-size: 20px;
}
h1{
background-color: pink;
text-align: center;
}
</style>
<body>
<h1>LEADERS</h1>
<p>India is a land of great political leaders who ruled the country effectively and also by protecting its national interest. It was not an easy task to accomplish, keeping in view the changes taking place in the world political scenario. Leaders like Pandit Jawaharlal Nehru, Lal Bahadur Shastri and Indira Gandhi Bose played an indispensable role in changing the perspective of world towards India. The manner, in which issues like border disputes, Kashmir and growing shortage of food grains were handled, they really deserve an honor. The far-sightedness and pragmatic characteristics of the leaders can be assumed from the fact that they framed the Constitution of India by inducting the best possible clauses of the world. They led the country from the front, without being showing any inclination to either of the power blocs. To know more about the political leaders of India, read the brief biography of the Indian political leaders.</p>
<h1>BAL GANGADHAR TILAK</h1>
<p>Bal Gangadhar Tilak was a social reformer and freedom fighter. He was one of the prime architects of modern India and strongest advocates of Swaraj (Self Rule). He was universally recognized as the "Father of Indian Movement".</p>
<p>Keshav Gangadhar Tilak was born on 23 July 1856 in an Marathi Hindu Chitpavan Brahmin family in Ratnagiri, the headquarters of the Ratnagiri district of present-day Maharashtra (then Bombay Presidency). His ancestral village was Chikhali. His father, Gangadhar Tilak was a school teacher and a Sanskrit scholar who died when Tilak was sixteen. In 1871, Tilak was married to Tapibai (Née Bal) when he was sixteen, a few months before his father's death. After marriage, her name was changed to Satyabhamabai. He obtained his Bachelor of Arts in first class in Mathematics from Deccan College of Pune in 1877. He left his M.A. course of study midway to join the L.L.B course instead, and in 1879 he obtained his L.L.B degree from Government Law College.After graduating, Tilak started teaching mathematics at a private school in Pune. Later, due to ideological differences with the colleagues in the new school, he withdrew and became a journalist. Tilak actively participated in public affairs. He stated: "Religion and practical life are not different. The real spirit is to make the country your family instead of working only for your own. The step beyond is to serve humanity and the next step is to serve God." Inspired by Vishnushastri Chiplunkar, he co-founded the New English school for secondary education in 1880 with a few of his college friends, including Gopal Ganesh Agarkar, Mahadev Ballal Namjoshi and Vishnushastri Chiplunkar. Their goal was to improve the quality of education for India's youth. The success of the school led them to set up the Deccan Education Society in 1884 to create a new system of education that taught young Indians nationalist ideas through an emphasis on Indian culture. The Society established the Fergusson College in 1885 for post-secondary studies. Tilak taught mathematics at Fergusson College. In 1890, Tilak left the Deccan Education Society for more openly political work. He began a mass movement towards independence by an emphasis on a religious and cultural revival.
</p>
</body>
</html>
</body>
</html>
Q Using HTML a) Create a 4x3 table b) Within table, place 12 images of Indian Tourist Spots, in each box c) Each image should link to the corresponding Website of the Tourist Spot d) Each Image must be at least 100x100 in size
A: images:-
Code:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
th{
border:solid;
border-color: lightblue;
border-size:10px;
border-spacing: 5px;
}
</style>
<body>
<table>
<tr>
<th>
<a href="#">
<img src="golden.png" height="100" width="100"></a>
</th>
<th>
<a href="#">
<img src="lotus.png" height="100" width="100"></a>
</th>
<th>
<a href="#">
<img src="sun.png" height="100" width="100"></a>
</th></tr>
<tr><th>
<a href="#">
<img src="temple.png" height="100" width="100"></a>
</th>
<th>
<a href="#">
<img src="india.png" height="100" width="100"></a>
</th>
<th>
<a href="#">
<img src="india.png" height="100" width="100"></a>
</th>
</tr>
<tr><th>
<a href="#">
<img src="temple.png" height="100" width="100"></a>
</th>
<th>
<a href="#">
<img src="india.png" height="100" width="100"></a>
</th>
<th>
<a href="#">
<img src="india.png" height="100" width="100"></a>
</th>
</tr>
</table>
</body>
</html>
Q:
ANSWER:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
th,td{
border:1px solid black;
text-align:left;
padding:3px;
}
table{
border-collapse:collapse;
}
</style>
<body>
<table>
<tr>
<th>Company Name</th>
<th>Symbol</th>
<th>Current</th>
<th>52 Wk High</th>
<th>52 Wk Low</th>
</tr>
<tr>
<td>reliance industries</td>
<td>RILI</td>
<td>1009</td>
<td>1184</td>
<td>840</td>
</tr>
<tr>
<td>reliance industries</td>
<td>RILI</td>
<td>1009</td>
<td>1184</td>
<td>840</td>
</tr>
<tr style="background-color:orange;">
<td>reliance industries</td>
<td>RILI</td>
<td>1009</td>
<td>1184</td>
<td>840</td>
</tr>
<tr>
<td>reliance industries</td>
<td>RILI</td>
<td>1009</td>
<td>1184</td>
<td>840</td>
</tr>
</table>
</body>
</html>
Question: Create a HTML file which displays three images at LEFT, RIGHT and CENTER respectively in the browser.
Answer:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
header{
font-size: 25px;
text-align: center;
}
.box{
display: block;
float: left;
width: 20;
padding: 10px;
}
img{
width: 100%;
}
</style>
<body>
<header>image gallery</header>
<main>
<div class="box"><img src="golden.png"></div>
<div class="box"><img src="golden.png"></div>
<div class="box"><img src="golden.png"></div>
</main>
</body>
</html>
Question:Create an html page with a blinking warning in red background having a message “warning” in large size . Add moving text “read the message” below it.
Answer:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.bink{
animation:satyam is infinite;
}
@keyframes satyam{
100%(color: transparent;)
}
</style>
<body bgcolor="red" text="white">
<center><font size="50px;" class="bink">WARNING</font></center>
<marquee>read the message</marquee>
</body>
</html>
Question:- Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTML text that displays the resulting values in an HTML table format?
code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.write('<table border="2" cellspacing="2"')
document.write("<table><tr><th>number</th><th>square</th><th>cubes</th></tr>")
for(var n=0;n<=10;n++)
{
document.write("<tr><td>"+n+"</td><td>"+n*n+"</td><td>"+n*n*n+"</td</tr>")
}
document.write("<table>")
</script>
</head>
<body>
</body>
</html>
Question: make a calculator with using javascript?
Answer:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
input{
padding:5px;
margin:5px;
border:solid;
border-color:lightblue;
background-color:lightgreen;
}
</style>
<body>
<script type="text/javascript">
function insert(num){
document.form.textView.value=document.form.textView.value+num;
}
function equal(){
var exp = document.form.textView.value;
if(exp){
document.form.textView.value=eval(document.form.textView.value);
}
}
function c(){
document.form.textView.value=" ";
}
</script>
<center>
<form name="form">
<input type="text" name="textView"/><br>
<input type="button" value="1" onclick="insert(1)"/>
<input type="button" value="2" onclick="insert(2)"/>
<input type="button" value="3" onclick="insert(3)"/>
<input type="button" value="+" onclick="insert('+')"/>
<br><br>
<input type="button" value="4" onclick="insert(4)"/>
<input type="button" value="5" onclick="insert(5)"/>
<input type="button" value="6" onclick="insert(6)"/>
<input type="button" value="-" onclick="insert('-')"/>
<br><br>
<input type="button" value="7" onclick="insert(7)"/>
<input type="button" value="8" onclick="insert(8)"/>
<input type="button" value="9" onclick="insert(9)"/>
<input type="button" value="*" onclick="insert('*')"/>
<br><br>
<input type="button" value="0" onclick="insert(0)"/>
<input type="button" value="/" onclick="insert('/')"/>
<input type="button" value="=" onclick="equal()"/>
<input type="button" value="C" onclick="c()"/>
<br>
</form>
</center>
</body>
</html>