ITFinal it lab manual

MARWADIEDUCATIONFOUNDATION’SGROUPOF INSTITUTIONS
FACULTYOFPOSTGRADUATE STUDIES&RESEARCHIN
ENGINEERING&TECHNOLOGY,GAURIDADCAMPUS.
DEPARTMENTOFCOMPUTERENGINEERING
KAVAR NILESH 130570742004 INTERNET TECHNOLOGY Page 1
Lab#1: Introduction to HTML.
Basic HTML, Formatting and Fonts, Commenting code.
Create Following Web Page Using given tags with its attributes.
TAG ATTRIBUTESTOBE USED
<HTML> --
<HEAD> --
<TITLE> --
<BODY> BGCOLOR,TEXT,BACKGROUND
<H1>,<H2>,<H3>,<H4>,<H5>,<H
6>
ALIGN
<FONT> FACE,SIZE,COLOR
<P> (Paragraph) --
<U> (Underline) --
<HR> (Horizontal Rules) WIDTH,COLOR,ALIGN
<BR>(Break Line) --

HTML CODE:
<html>
<head>
<title>Lab#1</title>
<font size="6">
<b>
MEFGI...WAD/WTP - Lab Session#1
</b>
</font>
</head>
<body style="background-color: cyan ;">
<h1>Heading#1</h1>
<h2>Heading#2</h2>
<h3>Heading#3</h3>
<h4>Heading#4</h4>
<h5>Heading#1</h5>
<h6>Heading#1</h6>
<font color="red" size="15">This text displays the use of font tag with font face, color and
size.</font>
<p>paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. <u> paragraph 1 start with
underline.</u> here paragraph 1 start here.</p>
<hr>
Some random text. Some random text. Some random text. Some random text. Some random
text.<br>
Some random text. Some random text. Some random text. using br tag we can break the line.<br>
Some random text. Some random text. Some random text. Some random text. Some random text.
</body>
</html>

Lab#2: Formatting web pages with HTML
 Hyperlink, Lists, Tables, Images:
1) Create following Web Page Using given tags with its attributes.
<HTML> --
<HEAD> --
<TITLE> --
<H1>,<H2>,<H3>,<H4>,<H5>,<H
6>
ALIGN
<A> --
<UL> --
<OL> --
<LI> --
<TABLE> BORDER
<TH> --
<TR> --
<TD> --

HTML CODE:
<html>
<head>
<font size="6">
<b>
</b>
</font>
</head><br>
<br>
<br>
<body style="background-color:cyan;">
<a href="http://www.marwadieducation.edu.in">Click for Marwadi Education</a>
<br>
<br>
<b>List of Institutes</b>
<ul>
<li>FOE
<li>FOT
<li>FOPG
</ul>
<b>List of Subjects</b>
<ol type="1">
<li>WAD
<li>WTP
<li>IS
</ol>
<br>
<table border="1">
<tr>
<td><b>Subjects</b></td>
<td><b>Marks</b></td>
</tr>
<tr>
<td>WAD</td>
<td>20</td>
</tr>
<tr>
<td>WTP</td>
<td>30</td>
</tr>
</table>
<img src="D:ARPAT1846_365175073598623_767591942_n.jpg" width="144" height="144" />
</body>
</html>

Lab#2 Formatting web pages with HTML
 Simple HTML Forms:
2) Create following Web Page Using given tags with its attributes.
<HTML> --
<HEAD> --
<TITLE> --
<H1>,<H2>,<H3>,<H4>,<H5>,<H6> ALIGN
<FORM> --
<TABLE> --
<TR> --
<TD> --
<INPUT> TYPE, NAME, SIZE, MAXLENGTH
<SELECT> NAME
<OPTION> VALUE,SELECTED VALUE

HTML CODE:-
<html>
<head>
<title> Lab#2_2 </title>
</head>
<body bgcolor=#00eeff>
<h1><b>MEFGI...WAD/WTP -Lab Session#2_2 </b></h1><br><br>
<h2>Registration Form Demo</h2>
<form>
<table align="left">
<tr>
<td> First Name </td>
<td><input type="text" name="fn" maxlength=30 /></td>
</tr>
<tr>
<td> Last Name </td>
<td><input type="text" name="ln" maxlength=30 /></td>
</tr>
<tr>
<td> Desired Login Name </td>
<td><input type="text" name="dln" /></td>
</tr>
<tr>
<td> Choose a Password </td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td> Re-enter a Password </td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td> Choose a question </td>

<td><select name="Security Question">
<option name="sop1" selected>Security Question</option>
<option name="sop2" value="who is your best friend?">who is your best friend?</option>
<option name="sop3" value="who is your favourite teacher?">who is your favourite
teacher?</option>
<option name="sop4" value="what is your nick name?">what is your nick name?</option>
</select>
</td>
</tr>
<tr>
<td> Answer </td>
<td><input type="text" name="ans" /></td>
</tr>
<tr>
<td> Location </td>
<td><select name="s2">
<option name="lop1">country</option>
<option name="lop2" value="India" selected>India</option>
<option name="lop3" value="afrika">afrika</option>
<option name="lop4" value="shri-lanka">shri-lanka</option>
</select>
</td>
</tr>
</table>
</body>
</html>

Lab#3: Introduction to CSS
 Basic syntax and structure, using CSS, background images, Colors and properties
Create following Web Page Using given tags with its attributes.
<HTML> --
<HEAD> --
<TITLE> --
<H1>,<H2>,<H3>,<H4>,<H5>,<H6> ALIGN, CLASS
<SPAN> CLASS
<P> ID

HTML CODE:
<html>
<head>
<link rel="stylesheet" href="a.css"/>
<font size="6" color="blue">
<b>
</b>
</font>
</head>
<body>
<h1>Heading#1</h1>
<h2>Heading#2</h2>
<h3 class="redbox">Heading#3</h3>
<h4>Heading#4</h4>
<h5>Heading#5</h5>
<h6>Heading#6</h6>
<font color="red" size="15">This text displays the use of font tag with font face,color and
size.</font>
<p>paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
<hr>
text.<br>
</body>
</html>
CSS CODE
body
{
background:#bdcffb url(abstract_0037.jpg);
color:#00ff00;
}
h3.redbox

{
color:#FFFFFF;
}

Lab#4: Formatting web pages with CSS
 Manipulating texts, using fonts, borders and boxes, margins, padding lists.
Create following Web Page Using given tags with its attributes.
<HTML> --
<HEAD> --
<TITLE> --
<H1>,<H2>,<H3>,<H4>,<H5>,<H6> ALIGN, CLASS
<IMG> FLOAT
<P> ID

HTML CODE:
<html>
<head>
<style type="text/css">
img {float:left;}
</style>
<link rel="stylesheet" href="b.css"/>
<font size="6" color="blue">
<b>
</b>
</font>
</head>
<body>
<h1>Heading#1</h1>
<h2>Heading#2</h2>
<h3 class="redbox">Heading#3</h3>
<h4>Heading#4</h4>
<h5 class="bbox">Heading#5</h5>
<h6 class="bluebox">Heading#6</h6>
<font color="red" size="15">This text displays the use of font tag with font face,color and
size.</font>
<p>
<img src="1475872_10201919425338870_1838258255_n.jpg" width="50" height="50"
/>paragraph 1 start here. paragraph 1 start here. paragraph 1 start here. paragraph 1 start here.
<hr>
text.<br>
</body>
</html>
CSS code

body
{
background:#bdcffb url(abstract_0037.jpg);
color:#00ff00;
}
h3.redbox
{
color:#FFFFFF;
}
h5.bbox
{
color:#FF0000;
}
h6.bluebox
{
color:#FF0000;
}
h1
{
border:5px solid #ff0000;
color:#ff0000;
}
h2
{
border:5px dotted #ff0000;
color:#ff0000;
}
h4
{
border:5px groove #ff0000;
color:#ff0000;
}
#f1
{
font:35px;
color:#ff0000;
font-family:"'Lucida Handwriting’, script";
}
#p1
{
font-weight:italic;

}
#s1
{
text-decoration:underline;
color:lightblue;
}
#hr1
{
color:red;
}

Lab#5: Introduction to Java script
 How to develop Java script, variables, functions, condition
Create following Web Page Using given tags with its attributes and Java script.
1)

Screenshot#1 Program with two buttons to print 1 to100

Screenshot#1 Program with two buttons to print 100 to 0

Lab#5: Introduction to Java script
 How to develop Java script, variables, functions, conditions

ADDITION:
SUBTSACTION:

MULTIPLICATION:
DIVISION:

HTML CODE:
<! DOCTYPE>
<Html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h2>Calculator</h2>
<form>
<table cellpadding="2px">
<tr>
<td>1st Number:</td>
<td><input type="text" name="1st" id="1st" size="20px" /></td>
</tr>
<tr>
<td>2nd Number:</td>
<td><input type="text" name="2nd" id="2nd" size="20px" /></td>
</tr>
<tr>
<td>Total:</td>
<td><input type="text" name="total" id="total" size="20px" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Add" style="width:50px;" onclick="add()" />
<input type="button" value="Sub" style="width:50px;" onclick="substract()"/>
<input type="button" value="Mul" style="width:50px;" onclick="mul()"/>
<input type="button" value="Div" style="width:50px;" onclick="div()"/>
</td>
</tr>
</table>
</form>
<script>
function add()
{
var first=document.getElementById('1st').value;
var second=document.getElementById('2nd').value;
if(first=="")
{
alert("Enter First Value");
document.getElementById('1st').focus();
}

else if(second=="")
{
alert("Enter Second Value");
document.getElementById('2nd').focus();
}
else
{
var total=parseInt(first,10)+parseInt(second,10);
document.getElementById('total').value=total;
}
}
function substract()
{
if(first=="")
{
}
else if(second=="")
{
}
else
{
var total=parseInt(first,10)-parseInt(second,10);
}
}
function mul()
{
if(first=="")
{
}
else if(second=="")
{

}
else
{
var total=parseInt(first,10)*parseInt(second,10);
}
}
function div()
{
if(first=="")
{
}
else if(second=="")
{
}
else
{
var total=parseInt(first,10)/parseInt(second,10);
}
}
</script>
</body>
</html>

Lab#6: Browser interaction and validations using JS
1) Create following Web Page Using given tags with its attributes and Java script.

HTML CODE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div align="center">
<h3 style="color:#33F">Registartion Form</h3>
<form name="registrationform" method="post" action="submit.php" onsubmit=" return
validationcheck()">
<table cellpadding="2px">
<tr>
<td>First Name:<b style="color:red">*</b></td>
<td><input type="text" name="fname" id="fname" size="20"/></td>
</tr>
<tr>
<td>Last Name:<b style="color:red">*</b></td>

<td><input type="text" name="lname" id="lname" size="20"/></td>
</tr>
<tr>
<td>User Name<b style="color:red">*</b></td>
<td><input type="text" name="email" id="email" placeholder="XYZ@abc.com"/></td>
</tr>
<tr>
<td>Password:<b style="color:red">*</b></td>
<td><input type="password" name="password" id="password" size="20"/></td>
</tr>
<tr>
<td>ReEnter Password:<b style="color:red">*</b></td>
<td><input type="password" name="repassword" id="repassword" size="20" /></td>
</tr>
<tr>
<td>Gender:<b style="color:red">*</b></td>
<td>Male<input type="radio" id="gender" name="gender" value="Male"
checked="checked"/>    
Female<input type="radio" id="gender" name="gender" value="Female"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" /> Verify Terms & Condition.
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register" /></td>
</tr>
</table>
</form>
</div>
<script>
$(document).ready(function(e) {
$("input,textarea,select").focus(function() {
$(this).css("background-color","#cccccc");
});
$("input,textarea,select").blur(function(){
$(this).css("background-color","#FFF");
});
});
function validationcheck()
{
var fname=document.getElementById('fname');
var lname=document.getElementById('lname');
var email=document.getElementById('email');
var password=document.getElementById('password');
var repassword=document.getElementById('repassword');

2) Create following Web Page Using given tags with its attributes and Java script.
Image Slider, images should be in repeating fashion for infinite time.
Use following functions.
Image ()
Eva l ()
set Timeout ()
HTML CODE:
html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
<img src="dreamboy_sn4n27ia.jpeg" width="400" height="300"
border="5"/>
</body>
</html>

ITFinal it lab manual

Recommended

Recommended

More Related Content

Similar to ITFinal it lab manual

Similar to ITFinal it lab manual (20)

Recently uploaded

Recently uploaded (20)

ITFinal it lab manual