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:
2. Create HTML5 Document with Background Color
<!DOCTYPE HTML>
<html>
<head>
<title>
Background Color
</title>
</head>
<body bgcolor="#FF0000">
Program - 2
</body>
</html>
OUTPUT:
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:
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>
<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:
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:
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:
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:
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>
OUTPUT:
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>
OUTPUT:
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 Instructions
and gives output.
</dd>
</dl>
</BODY>
</HTML>
OUTPUT:
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:
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:
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>
OUTPUT:
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>
OUTPUT:
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">
<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>
OUTPUT:
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:
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>
OUTPUT:
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:
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:
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>
OUTPUT:
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>
<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:
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>
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>
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>
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>
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>
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>
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>
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:
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:
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:
Prompt Box: HTML:
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>