New Microsoft Word Document

WEB TECHNOLOGY 00613704418
Q1. Create a web page with HTML to display a table with borders and a table without
border. Display table headers. Add a caption to the tables. Create cells that span more than
one column/row. Display another table in one of the cells of a table.
Solution.
<html>
<head></head>
<body>
<table border=1 cellpadding='10' cellspacing='1'>
<tr>
<throwspan=3> Day</th>
<thcolspan=3> Seminar</th>
</tr>
<tr>
<thcolspan=2> Schedule</th>
<throwspan=2>Topic </th>
</tr>
<tr>
<th> Begin </th>
<th> End </th>
</tr>
<tr>
<td rowspan=2> Monday </td>
<td rowspan=2 style="background:#FFFECF"> 8:00 a.m. </td>
<td rowspan=2 style="background:#CCCEFF"> 5:00 a.m. </td>
<td align="center"> Introduction to XML </td>
</tr>
1
<tr>
<td align="center">Validity:DTD and Relax NG </td>
</tr>
<tr>
<td rowspan=4>Tuesday </td>
<td style="background:#FFFECF"> 8:00 a.m. </td>
<td style="background:#FFFECF"> 11:00 a.m. </td>
<td rowspan=2 align="center">XPath </td>
</tr>
<tr>
<td rowspan=2 style="background:#FFFECF"> 11:00 a.m.</td>
<td rowspan=2 style="background:#CEFECE"> 2:00 p.m. </td>
</tr>
<tr>
<td rowspan=2 align="center"> XSL Transformations </td>
</tr>
<tr>
<td style="background:#CEFECE"> 2:00 p.m. </td>
<td style="background:#CCCEFF"> 5:00 p.m. </td>
</tr>
<tr>
<td> Wednesday </td>
<td style="background:#FFFECF"> 8:00 am. </td>
<td style="background:#CEFECE"> 12:00 pm. </td>
<td align="center"> XSL Formatting objects </td>
2
</tr>
</table>
</body>
</html>
OUTPUT
3
Q2. Create a web page with HTML to display an ordered list, an unordered list, nested list
and definition list.
SOLUTION
. <html>
<head>
<title></title>
</head>
<body>
<h2>Different Courses offered by GGSIPU </h2>
<p>Graduate</p>
<ol type="1">
<li>BCA </li>
<li>BBA </li>
<li>B.Tech</li>
<li>B.Sc</li>
<li>B.Com</li>
<li>B.Stat</li>
<li>BA</li>
</ol>
<p>Post-graduate</p>
<ol type="a">
<li>MCA</li>
<li>MBA</li>
<li>M.Com</li>
<li>M.Tech</li>
<li>M.Sc</li>
<li>M.Stats</li>
<li>MA</li>
</ol>
</body>
4
</html>
OUTPUT
5
Unordered List
<html>
<head>
<title>un ordered list</title><br></head>
<body bgcolor="pink" text="red" order="">
<h1><u>UN ORDERED LIST</u></h1>
<h2>Ingredients for making of Tea</h2>
<h3>
<ul type="circle">
<li>sugar</li>
<li>tea powder</li>
<li>milk</li>
<li>water</li>
</ul>
<h3>
</body>
</html>
OUTPUT
6
Definition List
<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor="blue" text="yellow">
<h1><u>DEFINITION LIST</u></h1>
<h3>
<dl>
<dt><u>HTML:</u></dt>
<dd>HTML means hyper text markup language.A plain page without any styles and Scripts
called as HTML.HTML only stands for static pages
</dd>
</dl>
<h3>
</body>
</html>
OUTPUT
7
Nested List
<html>
<head>
<title>How to make nested Html list</title>
</head>
<body>
<h4>Html nested list</h4>
<ul>
<li>Chapter 1
<ul>
<li>Section 1</li>
<li>Section 2 </li>
<li>Section 3 </li>
<li>Section 4 </li>
</ul>
</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
</ul>
</body>
</html>
8
OUTPUT
9
Q3. Create a web page with HTML to display a form with text fields, password fields,
dropdown list, check boxes, radio buttons and Submit button.
SOLUTION
<html>
<form>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username">
</td>
</tr>
<tr>
<td>
<label for="uemail">Email</label>
</td>
<td>
<input type="text" id="uemail" name="usermail">
<button type="button">Check</button>
</td>
</tr>
<tr>
<td>
<label for="age">Age</label>
</td>
<td>
<input type="text" name="userage" id="age" size="2" maxlength="2">
10
</td>
</tr>
<tr>
<td>
<label>Country</label>
</td>
<td>
<input type="text" value="India" name="country" disabled>
</td>
</tr>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="password" id="pass">
</td>
</tr>
<tr>
<td>
<label for="res">Resume</label>
</td>
<td>
<input type="file" id="res">
</td>
</tr>
<tr>
<td>
<label>Hobbies</label>
</td>
11
<td>
<label>
<input type="checkbox" checked> Cricket
</label>
<label>
<input type="checkbox"> Football
</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="f" name="gender"> Female</label>
<label>
<input value="m" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select id="city" name="city">
<option disabled selected>--Choose City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
12
<option>Channai</option>
<option>Kolkata</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</html>
13
OUTPUT
14
Q4. Create a web page with HTML to display vertical frameset, horizontal frameset and
nested frameset.
SOLUTION
<html>
<head>
<frameset rows="20%,70%,10%">
//Frame 1
<frame src="">
// Frame 2
<frameset cols="50%">
<frame src="">
<frame src="">
</frameset>
//Frame 3
<frame src="">
</frameset>
</head>
</html>
OUTPUT
15
CODE
<html>
<head>
<frameset cols="50%,50%">
<frame name="frame1" src="ul.html"/>
<frame name="frame2" src="un.html"/>
</frameset>
</head>
</html>
OUTPUT
16
NESTED FRAMESET
<html>
<head>
<title>TAG index</title>
</head>
<frameset rows="10%,80%,10%">
<frame src="ul.html">
<frameset cols="100,*,100">
<frame src="un.html">
<frameset rows="50%,50%">
</frameset>
</frameset>
<noframes>
<body>
<p>Alternate content</p>
</body>
</noframes>
</frameset>
</html>
17
OUTPUT
18
Q5. Write a program to Use Java Script to display date
SOLUTION
<html>
<body>
<h1>Demo:Current Time</h1>
<p id="p1">>/p>
<script>
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

document.getElementById("p1").innerHTML = time;
</script>
</body>
</html>.
OUTPUT
19
Q6. Write a program to Use JavaScript to display pop up boxes (alert box, alert box with
line breaks, confirm box, prompt box)
SOLUTION
<html>
<head>
<script type="text/javascript">
function Value(){
var Val = prompt("Enter your name : ", "name");
document.write("You entered : " + Val);
}
</script>
</head>
<body>
<p>Click me: </p>
<form>
<input type="button" value="Click Me" onclick="Value();" />
</form>
</body>
</html>
20
OUTPUT
<html>
<head>
function Value(){
}
</script>
</head>
<body>
<p>Click me: </p>
<form>
</form>
</body>
</html>
<html>
<head>
function Value(){
21

}
</script>
</head>
<body>
<p>Click me: </p>
<form>
</form>
</body>
</html>
22
Alert box with line break

<html>
<head>
function disp_alert(){
alert("Line 1" + '\n' + "Line 2")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
OUTPUT
23
CONFIRM BOX
<!DOCTYPE html>
<html>
<head>
function Confirmation(){
var Val = confirm("Do you want to continue ?");
if( Val == true ){
document.write (" CONTINUED!");
return true;
}
else{
document.write ("NOT CONTINUED!");
return false;
}
}
</script>
</head>
<body>
24
<p>Click me: </p>

<form>
<input type="button" value="Click Me" onclick="Confirmation();" />
</form>
</body>
</html>
OUTPUT
25
ALERT BOX
<html>
<head>
<body>
<div style="text-align:center;padding:10px;">
<h1>Amazing Web Page</h1>
<script>
alert('But wait, there\'s more...');
</script>
<p><a href="JavaScript:self.close();">Close This Silly Page!</a></p>
</div>
</body>
</html>
OUTPUT
26
Q. write a program to Use JavaScript to call a function with an argument that returns a
value.
SOLUTION
<!DOCTYPE html>
<html>
<head>
<title>
Function Parameters and Arguments
</title>
</head>
<body style="text-align:center;">
<h2>Largest Number</h2>
<p>Finding the largest number : (7, 78, 70)</p>
<p id="geeks"></p>
<script>
function GFG( var1, var2, var3 ) {
if( var1 > var2 ) {
if( var1 > var3 ) {
return var1;
}
else {
return var3;
}
}
27
else {
if( var2 > var3 ) {
return var2;
}
else {
return var3;
}
}
}
document.getElementById("geeks").innerHTML
= GFG(4, 50, 6);
</script>
</body>
</html>
OUTPUT
28
Q. Write a program to Demonstrate Java Script Exception handling

SOLUTION
<html>
<head>
<title>Error and Exception handling</title>
function First() {
var a = 761;
var b = 679;
var c = a + b;
try {
alert("Value of a: " + a );
alert("Value of b: " + b );
alert("Sum of a and b: " + c);
}
catch ( e ) {
alert("Error: " + e.description );
}
finally {
alert("Finally block will always execute!" );
}
}
</script>
</head>
<body>
<p>Click the GfG button to see the result:</p>
29
<form>
<input type="button" value="Click GfG" onclick="First();" />
</form>
</body>
</html>
OUTPUT
30
CODE
<html>
<head>
<script type = "text/javascript">

</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
31
OUTPUT
32
Q. Write a program to Use CSS to set image as the background of a page. Position the
background image. Repeat a background image only horizontally.
SOLUTION
<html>
<head>
<style type="text/css">
.bgimg{
background-image: url(joker.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body class="bgimg">
<br><br><br>
</body>
</html>
33
OUTPUT
<html>
<head>
<meta charset="utf-8">
<title>css properties</title>
body{
background-color:white;
background-image:url(header.webp);
background-repeat:no-repeat;
background-position:top center;
}
</style>
34
</head>
<body>
<div>
</div>
</body>
</html>
OUTPUT
<html>
<head>
<meta charset="utf-8">
<title>css properties</title>
body{
background-color:white;
35
background-image:url(web1.jpg);
background-repeat: repeat-x;
background-position:top center;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT
36
Q. Write a program to Demonstrate Java Script events

SOLUTION
ON CLICK EVENT
<!doctype html>
<html>
<head>
<script>
var a = 0;
var b = 0;
var c = 0;
function changeBackground() {
var x = document.getElementById('bg');
bg.style.backgroundColor = 'rgb('+a+', '+b+', '+c+')';
a += 1;
b += a + 1;
c += b + 1;
if (a > 255) a = a - b;
if (b > 255) b = a;
if (c > 255) c = b;
}
</script>
</head>
<body>
<input id="bg" onkeyup="changeBackground()"
placeholder="write something" style="color:#fff">
</body>
</html>
37
OUTPUT
ON MOUSE OVER EVENT

<!doctype html>
<html>
<head>
<script>
function hov() {
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseover="hov()"
style="background-color:black;height:200px;width:200px;">
</div>
</body>
</html>
OUTPUT
38

New Microsoft Word Document

Uploaded by

Copyright:

Available Formats

You might also like

New Microsoft Word Document

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

New Microsoft Word Document

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY 00613704418

Q5. Write a program to Use Java Script to display date

var today = new Date();

var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

var Val = prompt("Enter your name : ", "name");

Alert box with line break

<p>Click me: </p>

<p>Finding the largest number : (7, 78, 70)</p>

Q. Write a program to Demonstrate Java Script Exception handling

Q. Write a program to Demonstrate Java Script events

ON MOUSE OVER EVENT

You might also like