Sri DevarajUrsEducationalTrust®,Kolar.

R.L. JALAPPAINSTITUTEOFTECHNOLOGY
(Affiliated to VTU, Belagavi& Recognized by AICTE, New
Delhi)Kodigehalli,Doddaballapur-561203,BangaloreRuralDistrict
Delhi)Kodigehalli,Doddaballapur

WEB PROGRAMMING (21CSL481)

(As per Visvesvaraya Technological University Syllabus)

For IV Semester CSE

Prepared By:
Mr. Vinaykumar Y B
Assistant Professor
Dept. of CS&E, RLJIT, Doddaballapur

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

2022-2023
 Vision of the Institute
To be a premier Institution by imparting quality Technical education, Professional Training and Research .
Mission of the Institute
M1: To Provide an outstanding Teaching, Learning and Research environment through Innovative Practices in
Quality Education.
M2: Develop Leaders with high level of Professionalism to have career to the Industry, Zeal for Higher
Education., focus on Entrepreneurial and Societal activities.
Vision of the Department
To empower the Students with recent trends and Technologies in the area of Computer Science and
Engineering to excel in the global competitive world. .

Mission of the Department

M1: To develop skills in the field of Computer Science and Engineering in different domains to focus on
developing the essential competencies and qualities to meet the industry prospects.
M2: To ensure quality research and innovations to cater the needs of Industry, Government and Society
imparting the Entrepreneurship and Consultancy skills.

PROGRAM OUTCOMES
PO1: Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals, and
an engineering specialization to the solution of complex engineering problems
PO2: Problem analysis: Identify, formulate, research literature, and analyze complex engineering problems
reaching substantiated conclusions using first principles of mathematics, natural sciences &engineering
sciences.
PO3: Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the public
health and safety, and the cultural, societal, and environmental considerations.
PO4: Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern engineering
and IT tools including prediction and modelling to complex engineering activities with an understanding of the
limitations.
PO6: The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice.
PO7: Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.
PO8: Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of the
engineering practice
PO9: Individual and team work: Function effectively as an individual, and as a member or leader in diverse
teams, and in multidisciplinary settings
PO10: Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports and design
documentation, make effective presentations, and give and receive clear instructions
PO11: Project management and finance: Demonstrate knowledge and understanding of the engineering and
management principles and apply these to one’s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments
PO12: Life Long Learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
 WEB PROGRAMMING LAB

Hours/Week: 02 Exam Hours: 02

CIE Marks: 50 Total Hours: 24
Semester: 4

WEB PROGRAMMING LABORATORY

SEMESTER – IV
Course Code :21CSL481 CIE Marks 50

SEE Marks 50

Total Number of Lab Contact Hours 24 Exam Hours 02

Credits – 1(Practical based)

Course Objectives: This course (21CSL481) will enable students to:

 Learn Web tool box and history of web browsers.

 Learn HTML, XHTML tags with utilizations.

 Know CSS with dynamic document utilizations.

 Learn JavaScript with Element access in JavaScript.

 Logically plan and develop web pages.

WEB PROGRAMMING 21CSL481
Web Programming Laboratory-(21CSL481) for IV Semester CSE
List of Programs
1. Create an XHTML page using tags to accomplish the following:
(i) A paragraph containing text “RLJIT CSE”. Bold face and italicize this text
(ii) Create equation: = 1/3( 1 2 + 1 2)
(iii) Put a background image to a page and demonstrate all attributes of
background image
(iv) Create unordered list of 5 fruits and ordered list of 5 flowers with upperRoman
letters

2. Create following table using XHTML tags. Properly align cells, give suitable cell padding
and cell spacing, and apply background color, boldand emphasis necessary

3. Create following web page using HTML and CSS with tabular layout

4. Create a class called ISE, and make it a background color of #0ff.Create a class called
CSE, and make it a background color of #f0f. Create a class called AIML, and make it a
background color of #f00.
5. Write a JavaScript program to design a simple calculator to performthe following
operations:sum, product, difference and quotient.

6. Write a Java Script program that on clicking a button, displaysscrolling

text which moves from left to right with a small delay

7. Develop and demonstrate a HTML file that includes JavaScript script

that uses functions for the following problems:
Parameter: A string Output: The position in the string of the left-most vowel
8. Develop a web page that displays a dynamic clock using JavaScript.
The clock should update every second.
Dept. of CSE, RLJIT Page 5
WEB PROGRAMMING 21CSL481

Programs:
1. Create an XHTML page using tags to accomplish the following:
(i) A paragraph containing text “RLJIT CSE”. Bold face and italicize this text
(ii) Create equation: = 1/3( 1 2 + 1 2)
(iii) Put a background image to a page and demonstrate all attributes of backgroundimage
(iv) Create unordered list of 5 fruits and ordered list of 5 flowers with upper Romanletters

<!DOCTYPE html>
<html>
<head>
<title>1st Program</title>
</head>
<body background="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"
style="background-repeat=norepeat">

<p><b><i>"RLJIT CSE"</i></b></p>
<p>LISTS</p>
<ul>
<li>APPLE</li>
<li>ORANGE</li>
<li>GRAPES</li>
<li>MANGO</li>
<li>BANANA</li>
</ul>

<ol list style type="I">

<li>ROSE</li>
<li>LOTUS</li>
<li>JASMIN</li>
<li>LILLY</li>
<li>MARIGOLD</li>
</ol> x=1/2(y²₁

+z²₁)
</body>
</html>

Dept. of CSE, RLJIT Page 6

WEB PROGRAMMING 21CSL481

OUTPUT:

Dept. of CSE, RLJIT Page 7

WEB PROGRAMMING 21CSL481

2. Create following table using XHTML tags. Properly align cells, give suitable cell padding
and cell spacing, and apply background color, boldand emphasis necessary

<!DOCTYPE html>
<html>
<head>
<title>tables</title>
</head>
<body>
<table border="4" cellspacing="0" cellpadding="2">
<tr >
<td rowspan="9" bgcolor="lightblue"><strong>Department<strong></td>
<td rowspan="3" bgcolor="purple"><strong>Sem 1</strong></td>
<td><em>SubjectA</em></td>
</tr>
<tr>
<td><em>SubjectB</em></td>
</tr>
<tr>
<td><em>SubjectC</em></td>
</tr>
<tr>
<td rowspan="3" bgcolor="purple"><strong>Sem2 </strong></td>
<td><em>SubjectD</em></td>
</tr>
<tr>
<td><em>SubjectE</em></td>
</tr>
<tr>
<td><em>SubjectF</em></td>

Dept. of CSE, RLJIT Page 8

WEB PROGRAMMING 21CSL481
</tr>
<tr>
<td rowspan="3" bgcolor="purple"><strong>Sem3</strong> </td>
<td><em>SubjectG</em></td>
</tr>
<tr>
<td><em>SubjectH</em></td>
</tr>
<tr>
<td><em>SubjectI</em></td>
</tr>
</table>
</body> </html>

OUTPUT:

Dept. of CSE, RLJIT Page 9

WEB PROGRAMMING 21CSL481

3. Create following web page using HTML and CSS with tabular layout

<!doctype html>
<html>
<head>
</head>
<style>
div {
border-radius: 5px; background-
color: #C4A484;padding: 20px;
height: 300px;
width: 250px;
}
<!--q.font{font-size: xx-large;}-->
</style>
<body>
<div>
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>

Dept. of CSE, RLJIT Page 10

WEB PROGRAMMING 21CSL481

<input type="checkbox" name="newsletter" id="newsletter">

<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

OUTPUT

Dept. of CSE, RLJIT Page 11

WEB PROGRAMMING 21CSL481

4. Create a class called ISE, and make it a background color of #0ff.

Createa class called CSE, and make it a background color of #f0f.
Create a class called AIML, and make it a background color of #f00.
Throughout the document, any text that mentions income, expenses, orprofit, attach the appropriate
class to that piece of text.
Further create following line of text in the same document:The current price is 50₹
and new price is 40₹

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Class Selectors</title>
<style>
.ise{background-color: #0ff;}
.cse {background-color: #f0f;}
.aiml {background-color: #f00;}q
{font-family: Impact;}
*.big-warning {font-size:small; color: red;
</style>
</head>
<body>
<h1>CSS Class Selectors</h1>
<q class="ise">Information Science and Engineering</q><br>
<q class="cse"> Computer Science and Engineering </q><br>
<q class="aiml">Artificial Intelligence and Machine Learning </q>
<p><del>The current price is 50$ </del><q class="big-warning">and new price is40$</q></p>
</body>
</html>

OUTPUT:

Dept. of CSE, RLJIT Page 12

WEB PROGRAMMING 21CSL481

5. Write a JavaScript program to design a simple calculator to perform thefollowing operations:

sum, product, difference and quotient.

<html>
<head>
<title>My calculator</title>
<script type="text/javascript">
function call(click_id)
{
var v1=parseFloat(document.getElementById("ip1").value);
var v2=parseFloat(document.getElementById("ip2").value);
if(isNaN(v1) || isNaN(v2))alert("enter a valid number");
else if(click_id=="add")document.getElementById("output").value=v1+v2;
else if(click_id=="sub")document.getElementById("output").value=v1-v2;
else if(click_id=="mul")document.getElementById("output").value=v1*v2;
else if(click_id=="div")document.getElementById("output").value=v1/v2;
}
</script>
</head>
<body><center><h1> A SIMPLE CALCULATOR PROGRAM</h1>
<table style="background-color:R" align=="center">
<tr><td>
<form method="get" action="">
<div width=50% align="center">
<label>OPER1<input type="text" id="ip1"/></label>
<label>OPER2<input type="text" id="ip2"/></label>
<lablel>TOTAL<input type="text" id="output"/></label>
</div><br><div width=50% align="center">
<input type="button" value="+" id="add" onclick="call(this.id)"/>
<input type="button" value="-" id="sub" onclick="call(this.id)"/>
<input type="button" value="*" id="mul" onclick="call(this.id)"/>
<input type="button" value="/" id="div" onclick="call(this.id)"/>
<input type="reset" value="clear"/>
</div>
</form>
</td></tr></table></center>
</body>
</html>

Dept. of CSE, RLJIT Page 13

WEB PROGRAMMING 21CSL481
Output:

6. Write a Java Script program that on clicking a button, displays scrollingtext which moves from
left to right with a small delay

<!DOCTYPE html>
<html>
<body bgcolor=”light green”>
<button onclick="enable()"> Click
here to enable the message
</button>
<button onclick="disable()">
Click here to disable the message</button>
<marquee id="msg" direction="right" scrollamount="5">
</marquee>
</body>
<script> function
enable()
{
document.getElementById("msg").innerHTML="This is a scrolling text";
}
function disable()
{
document.getElementById("msg").innerHTML="";
}
</script>
</html>

Dept. of CSE, RLJIT Page 14

WEB PROGRAMMING 21CSL481

OUTPUT:

Dept. of CSE, RLJIT Page 15

WEB PROGRAMMING 21CSL481
7. Develop and demonstrate a HTML file that includes JavaScript script that uses functions for the
following problems:
Parameter: A string Output: The position in the string of the left-most vowel

<html >
<head><title>program </title>

<script type="text/javascript">
function findpos()
{
var str=prompt("Enter the String:","");
var pos=str.search(/a|e|i|o|u|A|E|I|O|U/);
var len=str.length;
alert("length of the string is:"+len);
if(pos >= 0)
alert("Position of the leftmost vowel is" +pos);
else
alert("vowel is not found ");
}
</script>
</head>
<body bgcolor="lightgreen">
<center> Click here to enter the String : <input type="submit" value="CLICK!" onClick="findpos()" />
</center></body></html>

OUTPUT:

Dept. of CSE, RLJIT Page 16

WEB PROGRAMMING 21CSL481

8. Develop a web page that displays a dynamic clock using JavaScript. The clock should update
every second.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Clock</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}

#clock {
font-size: 48px;
margin-top: 100px;
}
</style>
</head>
<body bgcolor="pink">
<h1>Dynamic Clock</h1>
<hr>

Dept. of CSE, RLJIT Page 17

WEB PROGRAMMING 21CSL481
<div id="clock"></div>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

// Add leading zeros if necessary

hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;

var time = hours + ":" + minutes + ":" + seconds;

document.getElementById("clock").textContent = time;
}

// Update the clock every second

setInterval(updateClock, 1000);
</script>
</body>
</html>

OUTPUT:

Dept. of CSE, RLJIT Page 18