جامعة نزوى€¦ · web viewlab - 1 create html5 document to print program- 1(my first web...

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. Create a Java Script which shows biggest among two and three numbers using Control Statements


<HEAD><SCRIPT>

var a; var b; var cdocument.write("*****************************<br>");document.write("Simple - If Statement<br>");document.write("------------------------------------------

<br>");document.write("Biggest Among Two Numbers<br>");a = parseInt(window.prompt("Enter first Number"));b = parseInt(window.prompt("Enter Second Number"));

if(a>b){

document.write("A is big <br><br><br>");}if(b>a){

document.write("B is big <br><br><br>");}document.write("*****************************<br>");document.write("If-Else Statement<br>");document.write("------------------------------------------

<br>");document.write("Biggest Among Two Numbers<br>");if(a>b){

document.write("A is big <br><br><br>");}else{

document.write("B is big <br><br><br>");}

document.write("*****************************<br>");document.write("Else - If Ladder<br>");document.write("------------------------------------------

<br>");document.write("Biggest Among Three Numbers<br>");c =parseInt(window.prompt("Enter Third Number"));if(a>b){

if(a>c){

document.write("A is big <br><br><br>");}else{

document.write("C is big <br><br><br>");}

}else if(b>c){document.write("B is big <br><br><br>");

Name:_______________________________ 33 ID No:_________________________


}else{document.write("C is big <br><br><br>")

}

</SCRIPT></HEAD>

<body></body></html>

OUTPUT:

Name:_______________________________ 34 ID No:_________________________


23. Create a Java Script file which prints Even and Odd numbers using while and do-while loop

<!DOCTYPE HTML>

<HTML><HEAD>

<script>var a=2; var b;

document.write("----------------------------------------------------<br>");

document.write("<center>WHILE</center>");


var b = parseInt(window.prompt("Till what number you need even numbers"));

document.write("Even Numbers till "+b+"<br>");while(a<=b){

document.write(a + "<br>"); a = a+2;

}a = 1;document.write("Odd Numbers till "+b+"<br>");while(a<=b){


}


document.write("<center>DO-WHILE</center>");


var a=2; var b;var b = parseInt(window.prompt("Till what number you need even

numbers"));document.write("Even Numbers till "+b+"<br>");do{


}while(a<=b);a = 1;document.write("Odd Numbers till "+b+"<br>");do{

document.write(a + "<br>");

Name:_______________________________ 35 ID No:_________________________


a = a+2;}while(a<=b);

</script></HEAD>

<BODY>

</BODY></HTML>

OUTPUT:

Name:_______________________________ 36 ID No:_________________________


LAB – 12

24. Create a Java Script File to print $ using Nested While


<HEAD><script>

var a=0; var b; var c;

var b = parseInt(window.prompt("Till what number you need even numbers"));

while(a<=b){

c=0;while(c<=a){

document.write("$ ");c++;

} document.write("<br>"); a++;

}

</script></HEAD>

<BODY>

</BODY>

</HTML>

OUTPUT:

Name:_______________________________ 37 ID No:_________________________


25. Create a Java Script File to Demonstrate For and Nested For

<!DOCTYPE HTML>

<HTML><HEAD>

<script>var a; var b;var b = parseInt(window.prompt("Enter a number"));document.write("-------------------------------------------------

<br>");document.write("<center>NESTED-FOR</center>");document.write("-------------------------------------------------

<br>");for(a=0;a<=b; a++ ){

for(c=0;c<=a;c++){

document.write(c);}document.write("<br>");

}document.write("-------------------------------------------------

<br>");document.write("<center>FOR MULTIPLICATION TABLE</center>");document.write("-------------------------------------------------

<br>");for(a=1;a<=20;a++){

c = b*a;document.write(b+" *"+a+" ="+c+"<br>");

}

</script></HEAD>

<BODY>

</BODY></HTML>

Name:_______________________________ 38 ID No:_________________________


OUTPUT:

Name:_______________________________ 39 ID No:_________________________


LAB – 13

26. Create a Java Script file to find the square root of a number using Built-in and User defined functions


<HEAD><script>

function Sroot(){var a = fr.n.value;var b = Math.sqrt(a);document.write(b);}

</script>

</HEAD>

<BODY><form name="fr">Enter a Number:<input type="text" name="n"></form><button Onclick="Sroot()">Square Root</button><br><br>

</BODY></HTML>

OUTPUT:

Name:_______________________________ 40 ID No:_________________________


27. Create a Java Script file to Generate Random numbers using Built-in and User defined Functions


<HEAD><script>

function rand(){var a = fr.n.value;var b = Math.random(a);var c = b*10000;document.write(Math.round(c));}

</script>

</HEAD>

<BODY><form name="fr">Enter a Number:<input type="text" name="n"></form><button Onclick="rand()">Random Number</button>

</BODY></HTML>

OUTPUT:

Name:_______________________________ 41 ID No:_________________________

جامعة نزوى€¦ · web viewlab - 1 create html5 document to print program- 1(my first web...

Documents