[go: up one dir, main page]

0% found this document useful (0 votes)
28 views41 pages

Internet Technologies Lab Cycles

Uploaded by

kg8517052
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
28 views41 pages

Internet Technologies Lab Cycles

Uploaded by

kg8517052
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Internet Technologies lab

INTERNET TECHNOLOGIES LAB CYCLES

Program 3 – Create a form by using various attributes of the input


tags (textbox, multiline textbox, option button, Check box)
<html>
<head>
<title>Complete Form</title>
</head>
<body bgcolor="orange"text="white">
<h1><center>Registration Form</center></h1>
<form action=" ">
<p>
<label>Enter your email id:
<input type = "text" name = "myname" size = "30" maxlength = "30"/>
</label>
</p>
<p>
<label>Enter the password:
<input type = "password" name = "mypass" size = "20" maxlength = "20"
/><br>
</label>
</p>
<p>Sex
<br>
<label><input type="radio" name="act"
value="one"/>Male</label><br>
1
Internet Technologies lab

<label><input type="radio" name="act"


value="two"/>Female</label><br>
</p>
<p>Which of the following Accounts do you have?</p>
<p>
<label><input type="checkbox" name="act" value="one"
checked="yes"/>Gmail</label><br>
<label><input type="checkbox" name="act"
value="two"/>Facebook</label><br>
<label><input type="checkbox" name="act"
value="three"/>Twitter</label><br>
<label><input type="checkbox" name="act"
value="four"/>Google</label><br>
</p>
<p>Any Suggestions?</p>
<p>
<textarea name="feedback" rows="5" cols="70">
</textarea>
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>

2
Internet Technologies lab

OUTPUT

3
Internet Technologies lab

Program 4 – Create a simple HTML page by using some of the


basic tags (Hyperlink, Marquee, Image)
<html>
<head><title> Basic Tags Demo </title></head>
<body bgcolor="gray" text="cyan">
<h1><center> Encyclopedia </center></h1>
<img src="es1.jpg" align ="left" height="200" width="200">
<hr>
<h1> About Encyclopedia: </h1>
<p>
<h3> Welcome to Encyclopedia. Click on the link to learn more </h3>
<a href = "https://www.encyclopedia.com/"> Encyclopedia </a>
</h3>
</p>
<h3><marquee> Encyclopedia the world of Information
</marquee></h3>
</body>
</html>
OUTPUT:

4
Internet Technologies lab

Program 5 – Create a webpage with multiple types of style sheets


used in a single page

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body{
color: red;
text-align:center;
background-color:yellow;
}

p{
color:violet;
text-align:center;
}
</style>
<body>
<h1 style="color:blue; text-align:center;"> This is inline CSS</h1>
<b>This is internal style sheet </b>
<p> This is a paragraph in internal style </p>
<h2>The External style sheet is applied on this heading </h2>
</body>
</html>

5
Internet Technologies lab

Save this coding in fresh page style.css (filename.css)


h2{color:green;
margin-left: 20px;
}
OUTPUT

6
Internet Technologies lab

Program 6 – Write a CGI sample program to send Output back to


the user.

Save it as lab6.cgi extension


#!"C:\xampp\perl\bin\perl.exe"
print "Content-type: text/html\n\n";
print "<h1>Hello World</h1>\n";
use CGI':standard';
print "<html><body>";
$p=param("p");
@greetings=("Good morning", "welcome", "How are you doing?",
"Hello!");
$i=int rand scalar @greetings;
print "Hi $p, $greetings[$i]";

Save it as lab6.html extension


<html>
<head>
<title> Server Information </title>
</head>
<body>
<form action="http://localhost/lab6.cgi" method="post">
<p>
Server Information Display Program
<input type="submit" value="Click here" />
</p>
7
Internet Technologies lab

</form>
</body>
</html>
OUTPUT

1. Place both the files (lab6.cgi & lab6.html) in the folder


C:\xampp\htdocs.
2. Run the XAMPP server from the command prompt through the
XAMPP control panel.
3. Start Apache server. Run the lab6.html from c:\xampp\htdocs folder.
4. The output is displayed as below.

5. On clicking the “Click here” button, you will get the below output.

8
Internet Technologies lab

Program 7 - Create a Time Table using table tag


<html>
<body>

<table border=3 cellspacing="0">

<tr>
<th colspan="6"> Time Table </th>
</tr>

<tr>
<td rowspan="6"> Hours </td>
<th> mon </th>
<th> tues </th>
<th> Wed </th>
<th> Thrus</th>
<th> Fri </th>
</tr>

<tr>
<td> IT </td>
<td> SE</td>
<td> IT</td>
<td>SE </td>
<td> ADA</td>

9
Internet Technologies lab

</tr>

<tr>
<td>IT </td>
<td> SE</td>
<td> IT</td>
<td>SE </td>
<td> ADA</td>
</tr>

<tr>
<th colspan="5"> Lunch </th>
</tr>

<tr>
<td> IT</td>
<td>SE </td>
<td> IT</td>
<td>SE </td>
<td rowspan="2"> Project </td>
</tr>

<tr>
<td> IT</td>
<td>SE </td>

10
Internet Technologies lab

<td> IT</td>
<td>SE </td>
</tr>
</table>

</body>
</html>
OUTPUT

11
Internet Technologies lab

Program 8 – Creation of Frames in browser window using HTML


<html>
<head><title> Frames Program Demo</title></head>
<frameset rows="30%,40%,30%">
<frame src="a1.html">
<frame src="a2.html">
<frame src="a3.html">
</frameset>
</html>

Code for a1.html


<html>
<head><title>Frame Program1</title></head>
<body>
<h1><center>W&nbsp;e&nbsp;l&nbsp;c&nbsp;o&nbsp;m&nbsp;e&nbsp;t
&nbsp;o&nbsp;K&nbsp;L&nbsp;E&nbsp;S&nbsp;N&nbsp;C&nbsp</center
></h1>
</body>
</html>
Code for a2.html
<html>
<head><title>Image Demo</title></head>
<body>
<center><img src="kle.jpg" height="300" width="300"></center>
</body>
12
Internet Technologies lab

</html>
Code for a3.html
<html>
<head><title>Frame Program1</title></head>
<body>
<h1><center>BCA - Bachelor of Computer Applications</center></h1>
</body>
</html>

OUTPUT

13
Internet Technologies lab

Program 9 – Write a java script program to create dialogue box


using Alert, Confirm and prompt methods

<!DOCTYPE html>
<head>
<title>Factorial of a Number</title>
<script type="text/javascript">
function factorial()
{
varnum,n,s;
num=window.prompt("Enter a positive integer");
n=parseInt(num);
s=1;
for( i=1;i<=n;i++)
{
s=s*i;
}
var x = window.confirm("Do you want to see the factorial of the given
number");
if(x == true)
{
window.alert("Factorial is: " +s);
}
else
{
14
Internet Technologies lab

window.alert("Enjoy Maths");
}
}
</script>
</head>
<body>
<h1 align="center">Factorial of a Number</h1>
<form>
<input type="button" value="Calculate Factorial" onclick="factorial();"/>
</form>
</body>
</html>
OUTPUT

15
Internet Technologies lab

Program 10 – Write a java script program on Form Validations


<html>
<body>
<script>
function validateEmail() {
var email = document.getElementById("email").value;
var pattern1 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
varisValid = pattern1.test(email);

if (isValid) {
document.getElementById("result1").innerHTML = "Email is valid.";
} else {
document.getElementById("result1").innerHTML = "Email is invalid.";
}
}

16
Internet Technologies lab

function validatePassword() {
var password = document.getElementById("password").value;
var pattern2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-
Z])(?=.*[!@#$%^&*]).{8,}$/;
varisValid = pattern2.test(password);

if (isValid) {
document.getElementById("result2").innerHTML = "Password is valid.";
} else {
document.getElementById("result2").innerHTML = "Password is invalid.";
}
}
</script>
<body>
<h1>Email Validation</h1>
<input type="text" id="email" placeholder="Enter email">
<button onclick="validateEmail()">Validate</button>
<p id="result1"></p>

<h1>Password Validation</h1>
<input type="password" id="password" placeholder="Enter password">
<button onclick="validatePassword()">Validate</button>
<p id="result2"></p>
</form>
</body>

17
Internet Technologies lab

</html>
OUTPUT

18
Internet Technologies lab

Program 11 – Write a java script program to perform four


Arithmetic operations (Addition, Subtraction, Multiplication, and
Division on two numbers)

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function multiply(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=c;
}
function addition(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a+b;
document.my_cal.total.value=c;
19
Internet Technologies lab

}
function subtraction(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a-b;
document.my_cal.total.value=c;
}
function division(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a/b;
document.my_cal.total.value=c;
}
function modulus(){
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a%b;
document.my_cal.total.value=c;
}
</script>

<!-- Opening a HTML Form. -->


<form name="my_cal">

<!-- Here user will enter 1st number. -->

20
Internet Technologies lab

Number 1: <input type="text" name="first">

<br><br>

<!-- Here user will enter 2nd number. -->


Number 2: <input type="text" name="second">

<br><br>

<input type="button" value="ADD" onclick="javascript:addition();">


<input type="button" value="SUB" onclick="javascript:subtraction();">
<input type="button" value="MUL" onclick="javascript:multiply();">
<input type="button" value="DIV" onclick="javascript:division();">
<input type="button" value="MOD" onclick="javascript:modulus();">

<br><br>

<!-- Here result will be displayed. -->


Get Result: <input type="text" name="total">

</body>
</html>

OUTPUT

21
Internet Technologies lab

Program 12 – Create a website of our College

22
Internet Technologies lab

23
INTERNET TECHNOLOGIES
12. Create a Website of our College
Code: CollegeKLE.html
<!DOCTYPE html>
<html>
<head>
<title> KLE Society's S Nijalingappa College </title>

<style>
body
{
font-family: Arial, sans-serif;
}
header
{
background-color: #f8f9fa;
padding: 20px;
text-align:Center;
}
nav
{
magin: 20px 0;
text-align:center;
}
nav a
{
margin: 0 15px;
}
</style>
</head>

<body>
<header>
<img align="left" img src = "KLE_logo.jpg" alt="KLESNC" width="100">
<img align="right" img src= "BCA_logo.jpg" alt="BCA" width="100">
<h1> KLE Society's S Nijallingappa College </h1>
<p>Rajajinagar, Bangalore - 10</p>
</header>

<nav>
<a href = "index.html">Home</a>
<a href = "about.html">About</a>
<a href = "courses.html">Courses</a>
<a href = "contact.html">Contact Us</a>
</nav>
<main>
<h2> Welcome to KLESNC</h2>
<p>We provide best education on Computer Application Courses.</p>
</main>
</body>
</html>
This file represents main page of the website with a header containing the logo and the
name of the institution and navigation bar with links to other pages. The main section
contains a welcome message.

Code: Home
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home - KLESNC BCA</title>
<style>
p.sentence
{
line-height:2.1;
}
p.sentence
{
font-size:20px
}
</style>
</head>
<body>
<img align="center" img src ="kelsociety.png" alt="KLESNC" hspace="420"
width="400" height="300">
<h1><center> Why Kle?</center></h1>
<p class ="sentence" align-text = "justified">
The KLE society is an embodiment of perseverance of thousands of people who have
dedicated their lives to the cause of enhanced education and health care.
Our wide range of programs offered is a reason for our institutions being the most
preferred destination for studies and research.
Our collaborations with famous Universities world over have added a new dimension to
our legacy as we aspire to bring a global perspective to our curriculum.
Our institutes spread across the country exemplifies our efforts to bring the best of
educational and medical facilities to people from all backgrounds and thereby
contributing to make KLE a global destination for health care and education.
</p>
</body>
</html>
Code: About
About.html
<!DOCTYPE html>
<html>
<head>
<title>About Us - KLESNC BCA</title>
<style>
p.sentence
{
line-height:2.3;
}
p.sentence
{
font-size:20px
}
</style>
</head>
<body>
<h1>About Us</h1>
<img align="left" img src = "building.webp" alt="KLESNC" hspace="30"
width="350" height="250">
<p class ="sentence" align-text = "justified">
BCA at KLESNC, one of the top BCA courses in Bengaluru, was established in the year
2000 with a vision to nurture IT professionals who are a perfect blend of technological
skills and human values. KLE BCA is one of the top colleges in Bengaluru where “Smart
classes and close mentoring relationships” is more than a tagline; it is a long-standing
philosophy, a hallmark and a genuine distinguishing feature. The course empowers the
students by preparing them to adapt, adhere, apply and achieve balance and excellence in
their careers; thereby empowering them to add value to industry and society at
large.</p>
</body>
</html>
Code: Course
Courses.html
<!DOCTYPE html>
<html>
<head>
<title>Courses - Computer Applications</title>
</head>
<body>
<h1> Courses</h1>
<h2>BCA</h2>
<h2>MCA</h2>
</body>
</html>
Code: Contact Us
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Us - KLESNC BCA</title>
</head>
<body>
<h1>Contact Us</h1>
<p><b>Address:</b> #1040, 2nd Block, 28th Cross Road, Rajaji Nagar,<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbspBengaluru, Karnataka-560010</p>
<p><b>Phone:</b> +91-73495 36517 </p>
<p><b>Email:</b> info@klesncbca.edu.in</p>
<p><b>Timings:</b> Mon - fri: 9:00am - 5:00pm</p>
</body>
</html>

You might also like