جامعة نزوى · Web viewCSS3 allows you to add multiple background images for an element,...
Transcript of جامعة نزوى · Web viewCSS3 allows you to add multiple background images for an element,...
Internet Technology (INFS 230L) Lab Record
LAB - 1
1. Create HTML5 Document to print Program- 1(My First Web Page)
<!DOCTYPE HTML>
<html>
<head>
<title>
Program -1
</title>
</head>
<body>
Program - 1 (My First Web Page)
</body>
</html>
OUTPUT:
Name:_______________________________ 1 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
2. Create HTML5 Document with Background Color
<!DOCTYPE HTML>
<html>
<head>
<title>
Background Color
</title>
</head>
<body bgcolor="#FF0000">
Program - 2
</body>
</html>
OUTPUT:
Name:_______________________________ 2 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
3. Create HTML5 Document with Image Background
<!DOCTYPE HTML>
<html>
<head>
<title>
Background Image
</title>
</head>
<body background="Desert.jpg">
Program - 3
</body>
</html>
OUTPUT:
Name:_______________________________ 3 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
4. Create HTML5 Document using font attribute / element and its properties
<!DOCTYPE HTML>
<html>
<head>
<title>
FONT PROPERTIES
</title>
</head>
<body background="Desert.jpg">
<font size="30pt" color="#FFFFFF" face="Arial">
Program - 4
</font> <hr>
<br><B>
<font size="30pt" color="#FFFFFF" face="Arial">
Program - 4
</font>
</B>
<br><strong>
<font size="30pt" color="#FFFFFF" face="Arial">
Program - 4
</font>
</strong>
<br><i>
<font size="30pt" color="#FFFFFF" face="Arial">
Program - 4
</font>
</i>
<br><em>
Name:_______________________________ 4 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
<font size="30pt" color="#FFFFFF" face="Arial">
Program - 4
</font>
</em>
<br><u>
<font size="30pt" color="#FFFFFF" face="Arial">
Program - 4
</font>
</u>
</body>
</html>
OUTPUT:
Name:_______________________________ 5 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 2
5. Create HTML5 Document with different Headings using Heading attribute
<!DOCTYPE HTML>
<html>
<head>
<title> HEADINGS</title>
</head>
<body>
<center>
<H1> Heading 1</H1>
<H2> Heading 2</H2>
<H3> Heading 3</H3>
<H4> Heading 4</H4>
<H5> Heading 5</H5>
<H6> Heading 6</H6>
</center>
</body>
</html>
OUTPUT:
Name:_______________________________ 6 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
6. Insert an Image in HTML5 Document using Image element and its properties
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>IMAGE</title>
</HEAD>
<body>
<img src="Desert.jpg" height="200px" width="300px" title="This is a Desert picture"/>
<body>
</HTML>
OUTPUT:
Name:_______________________________ 7 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
7. Create HTML5 Document which contains TEXT and Image Links using anchor tag
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title>IMAGE</title>
</HEAD>
<body>
<a href="http://www.google.com">GOOGLE</a><br><br>
<a href="http://www.Photobucket.com">
<img src="Desert.jpg" height="100px" width="100px"/>
</a>
</body>
</HTML>
OUTPUT:
Name:_______________________________ 8 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 3
8. Create HTML5 Document which contains types of Ordered list
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>ORDERED LIST</TITLE></HEAD>
<BODY>
<CENTER><H1> ORDERED LIST </H1></CENTER>
<ol><li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ol>
<br><br><ol type="A">
<li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ol>
<br><br><ol type="a">
<li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ol>
<br><br><ol type="I">
<li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ol>
<br><br><ol type="i">
<li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ol></BODY></HTML>
Name:_______________________________ 9 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 10 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
9. Create HTML5 Document which contains types of UnOrdered list
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>UNORDERED LIST</TITLE></HEAD>
<BODY>
<CENTER><H1> UNORDERED LIST </H1></CENTER>
<ul><li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ul>
<ul type="circle"><li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ul>
<ul type="disk"><li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ul>
<ul type="square"><li> PEN </li><li> PENCIL </li><li> INK POT </li><li> PRINTER </li>
</ul>
</BODY></HTML>
Name:_______________________________ 11 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 12 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
10. Create HTML5 Document which contains Definition list
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>DEFINITION LIST</TITLE></HEAD>
<BODY><CENTER> <H1> DEFINITION LIST </H1> </CENTER>
<dl><dt> COMPUTER </dt>
<dd>Computer is an electronic device which takes
input, Processes based on set of Instructionsand gives output.
</dd>
</dl></BODY></HTML>
OUTPUT:
Name:_______________________________ 13 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 4
11. Create HTML5 Document which contains 3 x 3 Table
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>TABLE 2</TITLE></HEAD>
<BODY><center><table border="1" height="600px" width="80%">
<tr><td> </td><td> </td><td> </td>
</tr><tr>
<td> </td><td> </td><td> </td>
</tr><tr>
<td> </td><td> </td><td> </td>
</tr></table></center>
</BODY></HTML>
OUTPUT:
Name:_______________________________ 14 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
12. Create a Table in HTML5 using all table properties
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>TABLE 3</TITLE></HEAD>
<BODY><center><table border="1" height="600px" width="80%" cellspacing=0
cellpadding=0>
<tr height="20%">
<td colspan="2">Col 1 and 2</td></tr>
<tr><td width="75%"> Col 1 </td><td> Col 2 </td>
</tr>
</table></center>
</BODY></HTML>
OUTPUT:
Name:_______________________________ 15 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 16 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 5
13. Create a simple HTML5 Web Page using Table
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>TABLE 4</TITLE></HEAD>
<BODY><center>
<table border="1" height="600px" width="80%" cellspacing="0">
<tr height="20%"><td colspan="4">
<H1>INTERNET TECHNOLOGY LAB
</H1></td>
</tr>
<tr height="7%"><td width="25%">HOME</td><td width="25%">ABOUT US </td><td width="25%">PHOTO GALLERY</td><td width="25%">CONTACT US </td>
</tr>
<tr><td colspan="3"> LAB 4 </td><td> LINKS </td>
</tr>
</table>
</center>
</BODY>
</HTML>
Name:_______________________________ 17 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 18 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 6
14. Create a colorful HTML5 Web Page with links using Table and HTML5 element properties
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>TABLE 5</TITLE></HEAD>
<BODY><center><table border="0" cellspacing="0" height="635px" width="80%">
<tr height="20%"><td colspan="4" bgcolor="Green">
<H1>INTERNET TECHNOLOGY LAB</H1></td>
</tr><tr height="7%">
<td width="25%" bgcolor="blue"> <font color="white">
<a href="Prg 16.html">HOME</a> </font>
</td><td width="25%" bgcolor="brown">
<font color="white"><a href="about.html">ABOUT US</a>
</font></td><td width="25%" bgcolor="pink">
<font color="white">PHOTO GALLERY</font></td><td width="25%" bgcolor="red">
<font color="white">CONTACT US</font></td>
</tr><tr>
<td colspan="3" bgcolor="cyan"> LAB 4 </td>
<td bgcolor="megenta"> LINKS </td></tr><tfoot>
<td colspan="4" bgcolor="YellowGreen" height="8%"><center>&Copy All Copy Rights all Reserved 2013</center></td>
</tfoot>
</table></center>
</BODY></HTML>
Name:_______________________________ 19 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 20 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 7
15. Create a Registration Form using HTML5 Form tags and its properties
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>Registration Form</TITLE></HEAD>
<BODY><center><table border="0" cellspacing="0" height="635px" width="80%">
<thead><tr height="20%">
<th bgcolor="cream">
<H1>INTERNET TECHNOLOGY LAB</H1>
</th>
</tr></thead>
<tr height="7%"><td width="100%" bgcolor="gray">
<Center><H3>Registration</H3></center></td>
</tr><tr>
<td><div>
<form method="post" action="http:\\www.unizwa.edu.om">
<P><label> Name: </label><input type="text" name="name"
value="Name"><br><br><label> UserId: </label><input type="text" name="userid"
value="UserId"><br><br><label> Password: </label><input type="password"
name="Password" value="Password"><br><br><label> Retype-Password: </label><input type="password"
name="rePassword" value="Password">
Name:_______________________________ 21 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
<br><br>Sex:<input type="radio"
name="sex" checked="checked">Male<input type="radio"
name="sex">Female<br><br><label> Qualification: </label><input type="Checkbox"
name="qualification" checked="checked"> Primary School<input type="Checkbox"
name="qualification"> Secondary School<input type="Checkbox"
name="qualification"> College<input type="Checkbox"
name="qualification"> Univeristy
<br><br><label> Address:</lable><textarea rows="5" cols="30"
name="address">Enter Address</textarea>
<br><br>Year: <Select name="Degree">
<option>--Select--</Option><option>ONE</Option><option>TWO</Option><option>THREE</Option><option>FOUR</Option>
</select><br><br><br><br><br>
<input type="submit" value="Register">
<input type="reset" value="clear"></P>
</form></div>
</td></tr>
<tfoot><td width="100%" bgcolor="pink"> <center>2013 © All
CopyRights are Reserved...</center> </td>
</tfoot>
</table></center>
</BODY></HTML>
Name:_______________________________ 22 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 23 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
16. Create a FORM in HTML5 give a name to form using Legend element
<!Doctype html><html>
<head><style>
body{background:silver;
}</style>
</head><body><fieldset>
<legend>DETAILS</legend><form>
Name :<input type="text"><br><br>E-mail:<input type="text"><br><br><input type="submit" value="SUBMIT">
</form></fieldset></body></html>
OUTPUT:
Name:_______________________________ 24 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 8
17. Create HTML5 Document using Inline CSS background and Font styles
<!DOCTYPE HTML><HTML>
<HEAD><title> INLINE CSS</title>
</HEAD><body style="background-image:url(Images\WSBackground.png); background-color:green;background-repeat:no-repeat;background-position:left bottom;"><p style="Font-size:20pt;"> To change the font size use Font-size:sizept;// Font-size:8pt; </p>
<p style="color:deepskyblue;"> To change the font color use color:color_name;// color:blue; </p>
<p style="Font-family:Arial;"> To change the font type use Font-Family:family_name; // Font-Family:Arial; </p>
<p style="Font-style: italic;"> To change the font style like Italic(oblique), Normal Font-style: italic;</p>
<p style="Font-variant:Small-Caps;"> To change the font style like all capital letters, all small caps, Normal. Font-variant:smallcap;</p>
<p style="Font-weight: bold;"> To change the font style to BOLD we use bold, normal, 222 Font-weight: bold;</p></body></HTML>
Name:_______________________________ 25 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 26 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
18. Create a HTML5 Document to demonstrate Internal CSS link Properties
<!DOCTYPE HTML><html>
<head><style>
a:link{text-decoration:none;color:grey;
}a:visited{
color:red;}a:hover{
color:yellowGreen;font-size:20pt;
}a:active{
color:black;font-size:12pt;
}</style>
</head><body><a href="http://www.google.com">GOOGLE</a></body></html>
OUTPUT:
Name:_______________________________ 27 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 9
19. Create a HTML5 Document to demonstrate Inline CSS Text Properties
<!DOCTYPE HTML><HTML>
<HEAD><TITLE>INLINE CSS TEXT PROPERTIES</TITLE>
</HEAD><body><p style="text-decoration:line-through;text-transform:Uppercase; color:LimeGreen; text-align:center;">hello 1</p>
<p style="text-decoration:Overline;text-transform:lowercase; color:pink; text-align:left;">hello 2</p>
<p style="text-decoration:Underline;text-transform:Capitalize; color:MidnightBlue; text-align:Right;">hello 3</p>
<p style="text-decoration:none;text-transform:normal; color:LimeGreen; text-align:Justify;">hello 4</p></body></HTML>
OUTPUT:
Name:_______________________________ 28 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
20. Create a HTML5 Document to demonstrate External CSS
CSS FILE
#p1{text-decoration:line-through;text-transform:Uppercase;text-align:center;color:Blue;
}#p2{
text-decoration:overline;text-transform:lowercase;text-align:left;color:LimeGreen;
}#p3{
text-decoration:Underline;text-transform:Capitalize;text-align:Right;color:Pink;
}#p4{
text-decoration:none;text-transform:normal;text-align:Justify;color:YellowGreen;
}
HTML FILE
<!DOCTYPE HTML><HTML>
<HEAD><link rel="stylesheet" type="css/text"
href="style.css"/></HEAD>
<BODY><center><H1>EXTERNAL CSS DEMO</H1></center><p id="p1">
This is a paragraph</p><p id="p2">
This is a paragraph</p><p id="p3">
This is a paragraph</p><p id="p4">
This is a paragraph</p>
</BODY></HTML>
Name:_______________________________ 29 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
OUTPUT:
Name:_______________________________ 30 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 10
21. Creating Menu and Sub Menu using CSS properties
<!DOCTYPE HTML>
<HTML><head>
<title>MENU</title><style>
#menu{background-color:YellowGreen;height:20px;border-radius:10px;width:80%;margin-left:10%;
}#menu li{
list-style:none;}#menu li a{
text-decoration:none;color:white;text-align:left;
}
#menu li ul{display:none;background-color:maroon;width:80px;margin:0px;padding:0px;border-radius:0px 0px 10px 10px;
}#menu li:hover ul{
display:block;}#menu li:hover ul li a{
margin-left:15px;font-size:8pt;
}#menu li:hover li:hover{
margin-left:10px;color:blue;
}</style>
</head><body>
<div id="menu"><ul>
<li><a href="Menu.html">MENU</a>
<ul>
Name:_______________________________ 31 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
<li><a href="www.google.com">GOOGLE</a></li><li><a href="www.images.google.com">IMAGES</a></li><li><a href="www.googlemapscom">MAPS</a></li>
</ul></li>
</ul></div>
</body></HTML>
OUTPUT:
Name:_______________________________ 32 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 11
22. Write an html program to demonstrate CSS3 Rounded Corner, Text-Shadow and Box-Shadow properties?
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners, Text-Shadow and Box-Shadow</title>
<meta charset="utf-8">
<style>
#rcorners1 {
border-radius: 25px; background: #73AD21;
padding: 20px; width: 200px;
height: 150px;
box-shadow:4px 4px 4px #A9A9A9; /* BOX SHADOW */
}
p{
text-shadow:3px 3px #E8E8E8; /* TEXT SHADOW */
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements. </p>
<p>Rounded corners for an element with box shadow and text shodow for paragraphs </p>
<p id="rcorners1">Rounded corners!</p>
</body>
</html>
Name:_______________________________ 33 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 34 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
23. Write an html program to demonstrate CSS3 Border Image property?<!DOCTYPE html>
<html>
<head>
<title>Border-Image Demo</title>
<meta charset="utf-8">
<style>
#borderimg {
border: 10px solid transparent; padding: 15px;
border-image: url(border.png) 30 stretch;
}
#borderimg1 {
border: 10px solid transparent; padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id="borderimg">Here, the middle sections of the image are stretched to create the border.</p>
<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id="borderimg1">Here, the middle sections of the image are round to create the border.</p>
<p>Here is the original image:</p><img src="border.png">
</body>
</html>
Name:_______________________________ 35 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 36 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
24. Write an html program to demonstrate CSS3 Multiple Background Images property?
<!DOCTYPE html>
<html>
<head>
<title>Multiple Backgrounds</title>
<meta charset="utf-8">
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
background-size:100px, 130px, auto;
}
</style>
</head>
<body>
<div id="example1">
<h1>Multiple Background Demo</h1>
<p>CSS3 allows you to add multiple background images for an element, through the <i>background-image</i> property.</p>
<p>The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.</p>
<p>The <i>background-size</i> property also accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds.</p>
</div>
</body>
</html>
Name:_______________________________ 37 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 38 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 39 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
25. Write an html program to demonstrate CSS3 Gradient property?<!DOCTYPE HTML>
<html>
<head>
<title>Gradients Demo</title>
<meta charset="utf-8">
<style>
div{
height:100px; width:100px;
border:2px solid #C0C0C0;
border-radius:20px; padding:15px;
float:left; color:white;
}
#rad{background:radial-gradient(red, blue, green);}
#lin{background:linear-gradient(red, blue, green);}
#lind{
background:linear-gradient(to bottom right,red, blue, green);
}
</style>
</head>
<body>
<h1>All Divisions with rounder corners</h1>
<div id="rad">Radial Gradient</div>
<div id="lin">linear Gradient</div>
<div id="lind">linear Gradient (diagonal)</div>
</body>
</html>
Name:_______________________________ 40 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 41 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 12
26. Write an html program to demonstrate CSS3 Animation?<!DOCTYPE HTML>
<html>
<head>
<title>Animation Demo</title> <meta charset="utf-8">
<style>
#d1{
height:100px; width:100px;
border-radius:50px; background:red;
position:absolute; color:white;
animation-name:anim; animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:reverse;
animation-timing-function:linear;
}
@keyframes anim{
from{background:blue;} to{background:yellow;}
0%{opacity:1;top:0px;left:250px;}
25%{opacity:0;top:250px;left:500px;}
50%{opacity:1;top:500px;left:250px;}
75%{opacity:0;top:250px;left:0px;}
100%{opacity:1;top:0px;left:250px;}
}
</style>
</head>
<body> <div id="d1"></div> </body></html>
Name:_______________________________ 42 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 43 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
27. Write an html program to demonstrate CSS3 Transformation functions?
<!DOCTYPE html>
<html>
<head>
<title>Transfrom Demo</title>
<meta charset="utf-8">
<style>
div {
width: 100px; float:left; height: 100px;
background-color: yellow; border: 1px solid black;
}
#transl {transform: translate(50px,100px); /* Standard syntax */}
#rotate {transform: rotate(-20deg); /* Standard syntax */}
#skw-x {transform: skewx(-20deg); /* Standard syntax */}
#skw-y {transform: skewy(-20deg); /* Standard syntax */}
#scl {margin:250px; transform: scale(2,2); }
</style>
</head>
<body>
<div>This a normal div element.</div>
<div id="transl">Translate form original position of div</div>
<div id="rotate">Rotate clockwise 20 degrees</div>
<div id="skw-x">Sekew - X-axis 20 degrees</div>
<div id="skw-y">Sekew - Y-axis 20 degrees</div> <br/><br/>
<div style="float:none;" id="scl">Scale</div>
</body>
</html>
Name:_______________________________ 44 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 45 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
28. Write an html program to demonstrate CSS3 Transition?<!DOCTYPE html>
<html>
<head>
<title>Tansition Demo</title> <meta charset="utf-8">
<style>
div {
width: 100px; height: 100px;
background: red; transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {width: 300px;}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in IE9 and earlier versions.</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
<p>Hover over the div elements above, to see the different speed curves.</p>
</body>
</html>
Name:_______________________________ 46 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
29.
Name:_______________________________ 47 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
LAB – 13
30. Write an html Program to demonstrate External and Internal JavaScript Scripting?
HTML File with Internal JavaScript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External and Internal JavaScript</title>
<script src="external.js" type="text/javascript"></script>
</head>
<body>
<script>
document.write("<br/><br/><h3>This is an Internal JavaScript Text</h3>");
</script>
</body>
</html>
External.js File
document.write("<h1>This is an external JavaScript Text</h1>");
Output:
Name:_______________________________ 48 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
31. Write an html Program to demonstrate Addition of two numbers using JavaScript variables?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using JavaScript Variables</title>
<script>
document.write("Addition of Two Numbers is: ");
var num1 = 10;
var num2 = 20;
var num3 = num1 + num2;
document.write(num3);
</script>
</head>
<body>
</body>
</html>
Output:
Name:_______________________________ 49 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
32. Write an html Program to demonstrate JavaScript popup boxes?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.alert("This is alert box");
window.confirm("This is confirm box");
var name = window.prompt("Enter your Name");
document.write("Hello "+name);
</script>
</head>
<body>
</body>
</html>
Output:
Alert Box: Confirm Box:
Name:_______________________________ 50 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Prompt Box: HTML:
Name:_______________________________ 51 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
33. Write an html Program to demonstrate addition of two numbers using JavaScript Prompt Boxes and Alert Box?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Addition of Numbers using Prompt Boxes</title>
<script>
var first = window.prompt("Enter First Number");
var second = window.prompt("Enter Second Number");
var third = parseInt(first)+parseInt(second);
window.alert("The Addition of Two Numbers is: " + third);
</script>
</head>
<body>
</body>
</html>
Output:
Name:_______________________________ 52 ID No:_____________________
Internet Technology (INFS 230L) Lab Record
Name:_______________________________ 53 ID No:_____________________