جامعة نزوى · Web viewCSS3 allows you to add multiple background images for an element, through the background-image property. The

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:_____________________


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:_____________________


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:_____________________


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>


Program - 4

</font>

</B>

<br><strong>


Program - 4

</font>

</strong>

<br><i>


Program - 4

</font>

</i>

<br><em>

Name:_______________________________ 4 ID No:_____________________



Program - 4

</font>

</em>

<br><u>


Program - 4

</font>

</u>

</body>

</html>

OUTPUT:

Name:_______________________________ 5 ID No:_____________________


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:_____________________


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:_____________________


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:_____________________


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">


</ol>

<br><br><ol type="I">


</ol>

<br><br><ol type="i">


</ol></BODY></HTML>

Name:_______________________________ 9 ID No:_____________________


OUTPUT:

Name:_______________________________ 10 ID No:_____________________


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:_____________________


OUTPUT:

Name:_______________________________ 12 ID No:_____________________


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:_____________________


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:_____________________


12. Create a Table in HTML5 using all table properties

<!DOCTYPE HTML>

<HTML><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:_____________________


Name:_______________________________ 16 ID No:_____________________


LAB – 5

13. Create a simple HTML5 Web Page using Table

<!DOCTYPE HTML>

<HTML><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:_____________________


OUTPUT:

Name:_______________________________ 18 ID No:_____________________


LAB – 6

14. Create a colorful HTML5 Web Page with links using Table and HTML5 element properties

<!DOCTYPE HTML>

<HTML><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:_____________________


OUTPUT:

Name:_______________________________ 20 ID No:_____________________


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:_____________________


<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 &copy All

CopyRights are Reserved...</center> </td>

</tfoot>

</table></center>

</BODY></HTML>

Name:_______________________________ 22 ID No:_____________________


OUTPUT:

Name:_______________________________ 23 ID No:_____________________


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:_____________________


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:_____________________


OUTPUT:

Name:_______________________________ 26 ID No:_____________________


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:_____________________


LAB – 9

19. Create a HTML5 Document to demonstrate Inline CSS Text Properties


<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:_____________________


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


<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>

</BODY></HTML>

Name:_______________________________ 29 ID No:_____________________


OUTPUT:

Name:_______________________________ 30 ID No:_____________________


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:_____________________


<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:_____________________


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:_____________________


Name:_______________________________ 34 ID No:_____________________


23. Write an html program to demonstrate CSS3 Border Image property?<!DOCTYPE html>

<html>

<head>

<title>Border-Image Demo</title>


<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:_____________________


Name:_______________________________ 36 ID No:_____________________


24. Write an html program to demonstrate CSS3 Multiple Background Images property?

<!DOCTYPE html>

<html>

<head>

<title>Multiple Backgrounds</title>


<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:_____________________


Name:_______________________________ 38 ID No:_____________________


Name:_______________________________ 39 ID No:_____________________


25. Write an html program to demonstrate CSS3 Gradient property?<!DOCTYPE HTML>

<html>

<head>

<title>Gradients Demo</title>


<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:_____________________


Name:_______________________________ 41 ID No:_____________________


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;}





}

</style>

</head>

<body> <div id="d1"></div> </body></html>

Name:_______________________________ 42 ID No:_____________________


Name:_______________________________ 43 ID No:_____________________


27. Write an html program to demonstrate CSS3 Transformation functions?

<!DOCTYPE html>

<html>

<head>

<title>Transfrom Demo</title>


<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:_____________________


Name:_______________________________ 45 ID No:_____________________


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:_____________________


29.

Name:_______________________________ 47 ID No:_____________________


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:_____________________


31. Write an html Program to demonstrate Addition of two numbers using JavaScript variables?

<!doctype html>

<html lang="en">

<head>


<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:_____________________


32. Write an html Program to demonstrate JavaScript popup boxes?

<!doctype html>

<html lang="en">

<head>


<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:_____________________


Prompt Box: HTML:

Name:_______________________________ 51 ID No:_____________________


33. Write an html Program to demonstrate addition of two numbers using JavaScript Prompt Boxes and Alert Box?

<!doctype html>

<html lang="en">

<head>


<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:_____________________


Name:_______________________________ 53 ID No:_____________________

Documents

جامعة نزوى · Web viewCSS3 allows you to add multiple background images for an element, through the background-image property. The