Lab Manual For INTERNET TECHNOLOGY

INTERNET TECHNOLOGY
SUBJECT CODE: 2720214
AIM-1 Write a HTML program to print Hello World in browser.

Code:
<html>
<head>
<title>This is first Web page.</title>
</head>
<Body>
<b>Hello World.</b>
</body>
</html>
Output:
INTERNET TECHNOLOGY
AIM-2 Create a web page illustrating text formatting tags available in html(i.e<h1>,
<b>, <u>, <i>).
Code:
<html>
<head>
<title>HTML tags</title>
</head>
<body>
<p><h1>This is HTML Tag Examples.</h1></p>
<p><b>This is bold Tag.</b><br></p>
<p><u>This is underline Tag.</u><br></p>
<p><i>This is italic Tag.</i><br></p>
<p>I am <del>reading</del> <ins> writing.</ins></p><br></p>
</body>
</html>
Output:
INTERNET TECHNOLOGY
AIM-3: Prepare a sample code for different type of Heading in HTML.

Code:
<html>
<head>
<title>Heading Tag</title>
</head>
<body>
<h1>This is Heading 1.</h1>
</body>
</html>
Output:
INTERNET TECHNOLOGY
AIM-4: Prepare a sample code to illustrate three types of list in HTML.

Code:
<html>
<head>
<title>HTML Different Types of List</title>
</head>
<Body>
<h1>This is unorder List.</h1>
<ul type="circle">
<li>beetroot</li>
<li>Ginger</li>
<li>potato</li>
<li>Radish</li>
</ul>
<h2>This is order list.</h2>
<ol type="i" start="4">
<li>beetroot</li>
<li>Ginger</li>
<li>potato</li>
<li>Radish</li>
</ol>
<h3>This is Definition List</h3>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language.</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol.</dd>
</body>
</html>
4
INTERNET TECHNOLOGY
Output:
INTERNET TECHNOLOGY
AIM-5:Create a HTML file that displays three images at left, right and center
respectively in the browser
Code:
<html>
<head>
<title>Images in webpage</title>
</head>
<body>
<imgsrc="Tulips.jpg" alt=Tulips image" width="150" height="100" align="left"/>
<imgsrc="Pink Tulips.jpg" alt=Pink Tulips image" width="150" height="100" align="right"/>
<imgsrc="tulip 003.jpg" alt=tulip 003 image" width="150" height="100" align="center"/>
</body>
</html>
Output:
INTERNET TECHNOLOGY
AIM-6: Create a below given table.
CODE:
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1" cellpaddings="5" cellspacing="5">
<tr>
<table border="1">
<tr>
<th>Coloumn 1</th>
<th>Coloumn 2</th>
<th>Coloumn 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
7
INTERNET TECHNOLOGY
<td colspan="3">Row 3 Cell 1</td>

</tr>
</table>
</body>
</html>
Output:
INTERNET TECHNOLOGY
AIM-7 Using Frames Divide the web page as follows :
Code:
<html>
<frameset rows="25%,50%,25%">
<frame src="j.html">
<frameset cols="25%,75%">
<frame src="j1.html">
</frameset>
</frameset>
</frameset>
</html>
INTERNET TECHNOLOGY
Output:
10
INTERNET TECHNOLOGY
AIM-8: Create a student registration form using the following tags <form>, <input>
, <textarea>, <button>, <select>, <option>The registration form must consist of
following information :
First Name, Middle Name, Last Name, Gender (use radio button), Address, Phone
No., email id, Hobbies (use checkbox), City, State, Country, College Name (use
dropdown menu)
Code:
<html>
<head>
<title>Frorms</title>
</head>
<body>
<form>
First Name : <input type="text" name="first_name" />
<p>Last Name : <input type="text" name="last_name" /></p>
<p>Gender : <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female</p>
<p> Address : <input type="text" name="address" /> </p>
<p> Phone No. : <input type="text" name="phoneno" /></p>
<p> Email ID : <input type="text" name="emailid" /> </p>
<p> Mobile No. : <input type="text" name="phoneno" /> </p>
<p> Hobbies : <input type="checkbox" name="playing cricket" value="on">Playing Cricket
<input type="checkbox" name="watching movies" value="on">Watching movies
<input type="checkbox" name="Reading Books" value="on">Reading Books
<p> City : <input type="text" name="city" /></p>
<p> State : <input type="text" name="state" /> </p>
<p> Country : <input type="text" name="country" /> </p>
<p> College Name : <input type="text" name="College name" />
<select>
11
INTERNET TECHNOLOGY
<option value="PIT">PIT</option>
<option value="PIET">PIET</option>
<option value="PGDM">PGDM</option>
<option value="PIP">PIP</option>
</select>
</p>
<p> <input type="submit" /> </p>
</form>
</body>
</html>
Output:
12
INTERNET TECHNOLOGY
AIM-9 Make a student Registration form using CSS-inline, internal & external style
sheet.
CSS Code:
.main{
margin-left:200px;
width:600px;
border:2px;
background-color:#e9e2a2;
color:#eeffcc;
height:600px;
}
.banner{
width:600px;
margin-top:0px;
height:120px;
background-color:#002244;
text-align:center;
padding-top:40px;
font-size:50px;}
.menu{
width:600px;
margin-top:0px;
height:20px;
background-color:#c9c249;
text-align:center;
padding-top:0px;
font-size:14px;}
.maincontent{
color:#0000CC;
padding-left:60px;
13
INTERNET TECHNOLOGY
text-align:center;
font-size:20px;
padding-top:30px;
}
Code:
<html>
<head>
<title>Parul University</title>
<link rel="stylesheet" type="text/css" href="tropical.css">
</head>
<body>
<div class="main">
<div class="banner"><marquee>Parul Institute of Technology</marquee></div>
<div class="menu"><span class="menucontent"><a href="home.html">Home</a></span>
<span class="menucontent"><a href="register.html" >Register</a></span> <span
class="menucontent"><a href="confirm.html" >Contact Us</a></span> </div>
<div class="maincontent"> Welcome to Parul Institute of Technology<br> Click on the Link Below to
Register for a Computer Programme.<p><a href="register.html"><input type="submit" value="Register"
/></a></p>
</div>
</div>
</body>
</html>
14
INTERNET TECHNOLOGY
Output:
15
INTERNET TECHNOLOGY
AIM-10 Write HTML/CSS Code to create table with 5 rows & 3 coloums that even
no. of rows display in green and odd no. of rows display in white color .
CSS Code:
table {
border-collapse: separate;
border-spacing: 0;
color: #4a4a4d;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
th,td {
padding: 10px 15px;
vertical-align: middle;
}
thead {
background: #395870;
background: linear-gradient(#49708f, #293f50);
color: #fff;
font-size: 11px;
text-transform: uppercase;
}
th:first-child {
border-top-left-radius: 5px;
text-align: left;
}
th:last-child {
border-top-right-radius: 5px;
}
tbody tr:nth-child(even) {
background: #5EFB6E;
color: #fff;}
16
INTERNET TECHNOLOGY
td {
border-bottom: 1px solid #cecfd5;
border-right: 1px solid #cecfd5;
}
td:first-child {
border-left: 1px solid #cecfd5;
}
.book-title {
color: #395870;
display: block;}
.text-offset {
color: #7c7c80;
font-size: 12px;}
.item-stock,
.item-qty {
text-align: center;}
.item-price {
text-align: right;}
.item-multiple {
display: block;}
tfoot {
text-align: right;
color: #fff;}
tfoot tr:last-child {
background: #f0f0f2;
color: #395870;
font-weight: bold;}
tfoot tr:last-child td:first-child {
border-bottom-left-radius: 5px;
color: #fff;}
17
INTERNET TECHNOLOGY
tfoot tr:last-child td:last-child {

border-bottom-right-radius: 5px;}
Code:
<html>
<head>
<title>Tables</title>
<link rel="stylesheet" type="text/css" href="table.css">
<table>
<thead>
<tr>
<th scope="col" colspan="2">COmpany Name</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong class="book-title">Parul Institute of Technology</strong>
<span class="text-offset">by Jay Patel</span>
</td>
<td class="item-stock">In Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$30.02</td>
</tr>
<tr>
<td>
<strong class="book-title">Parul Institute of Management</strong>
<span class="text-offset">by Shreemad Patel</span>
</td>
18
INTERNET TECHNOLOGY
<td class="item-price">$52.94
<span class="text-offset item-multiple">$26.47 ×2</span></td>
</tr>
<tr>
<td>
<strong class="book-title">Parul Institute of Pharmacy</strong>
<span class="text-offset">by Pinal Prajapati</span>
</td>
<td class="item-stock">Out of Stock</td>
</tr>
<tr>
<td>
<strong class="book-title">Parul Institute of Diploma Studies</strong>
<span class="text-offset">by DanKumar Yadav</span>
</td>
</tr>
</tbody>
<tfoot>
<tr class="text-offset">
<td colspan="3">Subtotal</td>
<td>$135.36</td>
</tr>
<tr class="text-offset">
<td colspan="3">Tax</td>
<td>$13.54</td>
19
INTERNET TECHNOLOGY
</tr>
<tr>
<td colspan="3">Total</td>
<td>$148.90</td>
</tr>
</tfoot>
</table>
Output:
20
INTERNET TECHNOLOGY
AIM-11 Develop and demonstrate a HTML document that illustrates the use
external style sheet, ordered list, table, borders, padding, color, and the <span> tag.
CSS Code:
p,table,li,{
font-family: "lucida calligraphy", arial, 'sans serif';
margin-left: 10pt;}
p { word-spacing: 5px; }
body { background-color:rgb(200,255,205); }
p,li,td { font-size: 75%;}
td { padding: 0.5cm; }
th { text-align:center;
font-size: 85%;}
h1, h2, h3, hr {color:#483d8b;}
table{
border-style: outset;
background-color: rgb(100,255,105);}
li {list-style-type: lower-roman;}
span{
color:blue;
background-color:pink;
font-size: 29pt;
font-style: italic;
font-weight: bold;}
Code:
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> Lab program11 </title>
21
INTERNET TECHNOLOGY
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
<table border="4" width="5%"> 
<tr>
<th width="204">Name </th>
<th>Email</th>
</tr>
<tr>
<td width="204">Dr. Jay</td>
<td>patel999jay@gmail.com</td>
</tr><tr>
<td width="204">Dr. Pinal</td>
<td>pinal.prajapati090@gmail.com</td>
</tr> <tr>
<td width="204">Dr. Shrimad</td>
<td>shreemadpatel3@gmail.com</td>
</tr> <tr>
<td width="204">Dr. Dan</td>
<td>yadav5048@gmail.com</td>
</tr></table>
<hr> 
<ol> 
<li> LINUX</li>
<li> Windows</li>
<li> Sailfish</li>
</ol>
<p><span>This is a text.</span> This is a text. This is a text. This is a text. This is a
text. This is a text. This is a text. This is a text. This is a text. <span>This is a text.</span>
22
INTERNET TECHNOLOGY
</p></body></html>
Output:
23
INTERNET TECHNOLOGY
AIM-12 Develop and demonstrate a HTML document that illustrates the use
external style sheet, ordered list, table, borders, padding, color, and the <span> tag.
CSS Code:
label {display:block; margin-left:15px; color:blue; font-size:13pt;}
usn {color:red; font-size:12pt; margin-left: 15px;}
name {color:red; font-size:12pt; margin-left: 15px;}
college {color:red; font-size:12pt; margin-left: 15px;}
branch {color:red; font-size:12pt; margin-left: 15px;}
year {color:red; font-size:12pt; margin-left: 15px;}
email {color:red; font-size:12pt; margin-left: 15px;}
h1 {color:red;font-size:18pt;}
h2 {display:block;color:black;font-size:16pt:}
Code:
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/css" href = "6a.css" ?>
<students>
<h1> Student Information </h1>
<h2>Student 1</h2>
<GTU>
<label>USN: <usn> 0314EC003 </usn></label>
<label>NAME: <name> Jay </name></label>
<label>COLLEGE: <college> PIT </college></label>
<label>BRANCH: <branch> ECE</branch></label>
<label>YEAR of JOINING:<YOJ> 2014 </YOJ></label>
<label>EMAIL: <email> patel999jay@gmail.com </email></label>
</GTU>
<h2>Student 2</h2>
<GTU>
<label>USN : <usn> 0414EC004</usn></label>
<label>NAME: <name> Shreemad</name></label>
<label>COLLGE: <college> PIT </college></label>
24
INTERNET TECHNOLOGY
<label>BRANCH: <branch> ECE </branch></label>

<label>YEAR of JOINING: <YOJ> 2014 </YOJ></label>
<label>EMAIL : <email> shreemadpatel3@gmail.com </email></label>
</GTU>
<h2>Student 3</h2>
<GTU>
<label>USN : <usn> 1414EC007 </usn></label>
<label>NAME <name> Pinal </name></label>
<label>COLLEGE: <college> PIT</college></label>
<label>BRANCH: <branch> ECE </branch></label>
<label>YEAR of JOINING: <YOJ> 2014</YOJ></label>
<label>EMAIL: <email> pinal.prajapati090@gmail.com </email></label>
</GTU>
</students>
Output:
25
INTERNET TECHNOLOGY
AIM-13 Format your Profile Page Using Different CSS Elements.

(Note: e.g. CSS Background, Text, Font, Tables, Links, Images, Margin ).
CSS Code:
body{background:url(autumn.jpg) no-repeat top left;
background-repeat:repeat;
color:Blue;
margin: 10px 10px 10px 10px;
letter-spacing: 5px;
text-transform: uppercase;
word-spacing: 15px;
text-align: center;
text-decoration: underline;
font-size: 20px;
font-weight: bold;}
Code:
<html>
<head>
<title>Exp15</title>
<link rel="stylesheet" type="text/css" href="exp14.css">
</head>
<body style=font-family: Arial>
<p>This text will be Arial as well.</p>
<h1>Names</h1>
<h2>Jay Patel</h2>
</body>
</html>
26
INTERNET TECHNOLOGY
Output:
27
INTERNET TECHNOLOGY
AIM-14 Design a simple static website using HTML Frameset, Frame Having
Following Structure.
Code:
<html>
<frameset rows="25%,75%">
<frame src="banner.html">
<frameset cols="25%,75%">
<frame src="menus.html">
<frame src="paruls.html">
</frameset>
</frameset>
</frameset>
</html>
Output:
28
INTERNET TECHNOLOGY
AIM-15 Write JavaScript to perform the following operations:

A. To calculate sum of 1 to n.
Code:
<html>
<head>
<script type = "text/javascript">
var num = window.prompt("Enter the number:","");
var n = parseInt(num);
result = sumnaturalno(n);
window.alert("The sum of " + n + "natural number is" + result);
function sumnaturalno(n)
{ var i;
var sum = 0;
for(i = 1;i <= n; i++){
sum = sum + i;}
return (sum);}
</script>
</head>
</html>
Output:
29
INTERNET TECHNOLOGY
B.
To check if given no. is prime or not.
Code:
<html>
<head><TITLE></TITLE>
<script language="JavaScript">
var a=prompt("enter a value");
var c=0;
for(var i=2;i<a;i++)
{ if(a%i==0)
{
c=i; //alert("Now C IS:"+c);
} }
if(c==0)
{ alert("given no is prime"); }
else
{ alert("given no is not a prime"); }
</script>
</head> <body></body>
</html>
30
INTERNET TECHNOLOGY
Output:
C. To check if given no. is Armstrong or not.

Code:
<html>
<head><TITLE></TITLE>
<script language="JavaScript">
var b,z,c=0;
var a=prompt("Enter a number");
z=a;
while(z>0)
{
b=z%10;
c=c+(b*b*b);
z=parseInt(z/10);
}
if(a==c)
alert("given no is amstrong number");
else
alert("given no is not an amstrong number");
</script>
</head>
<body></body>
</html>
31
INTERNET TECHNOLOGY
Output:
D. To check if given no. is palindrome or not.

Code:
<html>
<body>
<script type="text/javascript">
function Palindrome() {
var revStr = "";
var str = document.getElementById("str").value;
var i = str.length;
for(var j=i; j>=0; j--) {
revStr = revStr+str.charAt(j);}
if(str == revStr) {
alert(str+" -is Palindrome");
}else { alert(str+" -is not a Palindrome");
}}
</script>
<form >
Enter a String/Number: <input type="text" id="str" name="string" /><br />
<input type="submit" value="Check" onclick="Palindrome();"/>
</form>
</body>
</html>
32
INTERNET TECHNOLOGY
Output:
E. To find the roots of Quadratic Equation.

Code:
<html>
<head><title>Quadratic Equation</title></head>
<body><script type="text/javascript">
</script> </body></html>
Output:
33
INTERNET TECHNOLOGY
F. To Calculate factorial of n numbers.

Code:
<html>
<body>
<script type = "text/javascript">
var n = parseInt(window.prompt("Enter the Number:"));
var result = fact(n);
window.alert("Factorial of the given number " + result);
function fact(n)
{
if(n == 0)
return 1;
else
return (n*fact(n-1));}
</script> </body></html>
Output:
34
INTERNET TECHNOLOGY
G. To find highest from given three values.

Code:
<html>
<head><title>max</title></head>
<body>

</script> </body></html>
Output:
35
INTERNET TECHNOLOGY
H. To Prime any Triangle form for given n.

Code :
<html>
<head>
<title>Star</title>
<body>
<script language="Javascript">
var n = prompt("Enter value of n");
var x,y;
for(x=0;x<n;x++)
{for(y=0;y<=x;y=y+1)
{document.write("*");
}
document.write("<br>");}
</script></body></html>
Output:
I. To find all prime numbers that are lies between a given range.
CODE:
<html>
<head>
<title>LeapYears</title>
36
INTERNET TECHNOLOGY
/* <![CDATA[ */
function calcPrimeNumber(){
var beginNum = document.numbers.firstNum.value;
var endNum = document.numbers.secondNum.value;
var primeNumbs = new Array();
var ctr = 0;
while (beginNum <= endNum){ //throwaway
if ((beginNum % beginNum == 0) && (beginNum % 1 == 0)){
primeNumbs[ctr] = beginNum;
++ctr;
}
++beginNum;
}
if (primeNumbs == 0){
window.alert("There were no leap years within the range.");
}
else {
outputPrimeNums(primeNumbs);
}
}
function outputPrimeNums(primes){
document.write("<h2>Prime Numbers</h2>");
for (i=0;i<primes.length;i++){
document.write(primes[i] + "<br/>");
}
}
/* ]]> */
</script> </head>
<body>
37
INTERNET TECHNOLOGY
<form name="numbers">
Beginning Number: <input type="text" name="firstNum" /> End Number: <input type="text"
name="secondNum" />
<input type="button" value="Find Prime Numbers" onclick="calcPrimeNumber()" />
</form> </body></html>
Output:
38
INTERNET TECHNOLOGY
AIM-16 Create a blog of your favourite subject.
39

Lab Manual For INTERNET TECHNOLOGY

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lab Manual For INTERNET TECHNOLOGY

Caricato da

Copyright:

Formati disponibili

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-1 Write a HTML program to print Hello World in browser.

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

AIM-3: Prepare a sample code for different type of Heading in HTML.

SUBJECT CODE: 2720214

AIM-4: Prepare a sample code to illustrate three types of list in HTML.

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

AIM-6: Create a below given table.

SUBJECT CODE: 2720214

<td colspan="3">Row 3 Cell 1</td>

SUBJECT CODE: 2720214

AIM-7 Using Frames Divide the web page as follows :

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

tfoot tr:last-child td:last-child {

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

<label>BRANCH: <branch> ECE </branch></label>

SUBJECT CODE: 2720214

AIM-13 Format your Profile Page Using Different CSS Elements.

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

AIM-15 Write JavaScript to perform the following operations:

SUBJECT CODE: 2720214

To check if given no. is prime or not.

SUBJECT CODE: 2720214

C. To check if given no. is Armstrong or not.

SUBJECT CODE: 2720214

D. To check if given no. is palindrome or not.

SUBJECT CODE: 2720214

E. To find the roots of Quadratic Equation.

var a = prompt("Enter value of a","1");

SUBJECT CODE: 2720214

F. To Calculate factorial of n numbers.

SUBJECT CODE: 2720214

G. To find highest from given three values.

var a = prompt("Enter value of a");

SUBJECT CODE: 2720214

H. To Prime any Triangle form for given n.

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

SUBJECT CODE: 2720214

AIM-16 Create a blog of your favourite subject.

Potrebbero piacerti anche