BPLCK205A Introduction to Web Programming Lab Manual

Academic Year 2024 – 2025 (Even Semester)

LAB MANUAL
Introduction to Web Programming Lab
BPLCK205A
II Semester CSE(DS)

Prepared By
LATHA YADAV T R SWETA
Assistant Professor Assistant Professor
Dept. of CSE(DS) Dept. of CSE

Dept. of CSE [Data Science], Vemana IT Page |1

BPLCK205A Introduction to Web Programming Lab Manual

Vision and Mission of the Institute

Vision
To become a leading institute for quality technical education and research with ethical values.
Mission
M1: To continually improve quality education system that produces thinking engineers having good
technical capabilities with human values.
M2: To nurture a good eco-system that encourages faculty and students to engage in meaningful research
and development.
M3: To strengthen industry institute interface for promoting team work, internship and entrepreneurship.
M4: To enhance educational opportunities to the rural and weaker sections of the society to equip with
practical skills to face the challenges of life.

Vision and Mission of the Department

Vision
To become a leading department engaged in quality education and research in the field of
computer science and engineering.
Mission
M1: To nurture a positive environment with state of art facilities conducive for deep learning and
meaningful research and development.
M2: To enhance interaction with industry for promoting collaborative research in emerging technologies.
M3: To strengthen the learning experiences enabling the students to become ethical professionals with
good interpersonal skills, capable of working effectively in multi-disciplinary teams.

Dept. of CSE [Data Science], Vemana IT Page |2

BPLCK205A Introduction to Web Programming Lab Manual

PROGRAM EDUCATIONAL OBJECTIVES (PEOS)

PEO 1: Practical Application of Web Technologies

Graduates will be able to apply the foundational knowledge of HTML, CSS, and JavaScript through
hands-on practice to design and develop interactive and responsive web pages, thereby solving real-
world problems.

PEO 2: Skill Development in Web Programming Tools and Techniques

Graduates will gain proficiency in using modern web development tools and methodologies, fostering
the ability to experiment, debug, and optimize front-end web components with attention to standards and
accessibility.

PEO 3: Lifelong Learning and Innovation in Web Technologies

Graduates will be motivated to engage in continuous learning and keep up with the evolving web
technologies, preparing them for further education, industry adaptation, and contribution to innovative
web solutions.

PROGRAM SPECIFIC OUTCOMES (PSOs)

PSO 1: Web Page Design and Structure Development
Apply the principles of HTML and CSS to design structured, user-friendly, and visually appealing static
and dynamic web pages.
PSO 2: Client-Side Scripting Proficiency
Develop interactive web functionalities using JavaScript and effectively manipulate the Document
Object Model (DOM) for responsive user interfaces.
PSO 3: Integration of Web Standards and Best Practices
Demonstrate the ability to implement web programming projects adhering to W3C standards,
accessibility guidelines, and responsive design principles for various devices and platforms.

Dept. of CSE [Data Science], Vemana IT Page |3

BPLCK205A Introduction to Web Programming Lab Manual

PROGRAM OUTCOMES (POs)

PO1: Engineering Knowledge
Apply the knowledge of mathematics, science, and computing fundamentals to solve web programming
problems.
PO2: Problem Analysis
Identify, formulate, and analyze user requirements to develop appropriate web solutions using HTML,
CSS, and JavaScript.
PO3: Design/Development of Solutions
Design responsive and accessible web applications that meet modern UI/UX standards and address
specified needs.
PO4: Conduct Investigations of Complex Problems
Investigate problems through experimentation, debugging, and evaluation of different web design
approaches and tools.
PO5: Modern Tool Usage
Use modern web development tools, frameworks, and editors effectively for developing, testing, and
deploying web solutions.
PO6: The Engineer and Society
Understand and evaluate the societal, health, safety, and cultural issues related to the impact of web
technologies.
PO7: Environment and Sustainability
Demonstrate awareness of the impact of sustainable web design and energy-efficient web application
development.
PO8: Ethics
Commit to professional ethics and responsible practices in creating accessible and secure web content.
PO9: Individual and Team Work
Function effectively as an individual, and as a member or leader in diverse teams, particularly in project-
based learning or lab assignments.
PO10: Communication
Communicate effectively using documentation, presentations, and user interfaces, with clear coding
practices and semantic HTML.
PO11: Project Management and Finance

Dept. of CSE [Data Science], Vemana IT Page |4

BPLCK205A Introduction to Web Programming Lab Manual

Demonstrate knowledge of project management principles while working on time-bound web

development tasks or mini-projects.
PO12: Life-Long Learning
Recognize the need for, and engage in, independent and life-long learning in the field of web
technologies and evolving internet standards.

Dept. of CSE [Data Science], Vemana IT Page |5

BPLCK205A Introduction to Web Programming Lab Manual

SYLLABUS

Introduction to Web Programming Semester 2

Course Code BPLCK205A CIE Marks 50
Teaching Hours/Week (L: T:P: S) 2:0:2 SEE Marks 50
Total Hours of Pedagogy 40 Total Marks 100
Credits 03
Course objectives
 To use the syntax and semantics of HTML and XHTML
 To develop different parts of a web page
 To understand how CSS can enhance the design of a webpage.
 To create and apply CSS styling to a webpage
 To get familiarity with the JavaScript language and understand Document Object Model handling
of Java Script
Sl.NO Experiments
1. 1. Create an XHTML page using tags to accomplish the following:
 A paragraph containing text “All that glitters is not gold”. Bold face and italicize
this text
 Create equation: x = 1/3(y12 + z12 )
 Put a background image to a page and demonstrate all attributes of background
image.

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

3. Use HTML5 for performing following tasks:

i. Draw a square using HTML5 SVG , fill the square with green color and make 6px
brown stroke width

ii. Write the following mathematical expression by using HTML5 MathML. d=x2-y2

iii. Redirecting current page to another page after 5 seconds using HTML5 meta tag

Dept. of CSE [Data Science], Vemana IT Page |6

BPLCK205A Introduction to Web Programming Lab Manual

4. Demonstrate the following HTML5 Semantic tags – < article >, < aside >, < details >,
< figcaption >, < figure >, < footer >, < header >, < main >, < mark >, < section > for a
webpage that gives information about travel experience.

5. Create a class called income, and make it a background color of #0ff. Create a class called
expenses, and make it a background color of #f0f. Create a class called profit, and make it
a background color of #f00. Throughout the document, any text that mentions income,
expenses, or profit, 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₹
6. Change the tag li to have the following properties:
 A display status of inline
 A medium, double-lined, black border
 No list style type
 Add the following properties to the style for li:
 Margin of 5px
 Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to the
left
Also demonstrate list style type with user defined image logos
7. Create following web page using HTML and CSS with tabular layout

Dept. of CSE [Data Science], Vemana IT Page |7

BPLCK205A Introduction to Web Programming Lab Manual

8.
Create following calculator interface with HTML and CSS

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

10. Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further
when the mouse is over any image, it should be on the top and fully displayed.
Course outcomes (Course Skill Set):
At the end of the course the student will be able to:
CO1: Explain the historical context and justification for HTML over XHTML
CO2: Develop HTML5 documents and adding various semantic markup tags
CO3: Analyse various attributes, values and types of CSS
CO4: Implement core constructs and event handling mechanisms of JavaScript.

Suggested Learning Resources:

 TextBook-1: HTML & CSS: The Complete Reference Thomas A. Powell, , Fifth Edition, Tata
McGraw Hill,
 TextBook-2: WEB PROGRAMMING with HTML5, CSS and JavaScript, John Dean, Jones & Bartlett
Learning, First Edition
 Web links and Video Lectures (e-Resources):
https://onlinecourses.swayam2.ac.in/aic20_sp11/preview

Dept. of CSE [Data Science], Vemana IT Page |8

BPLCK205A Introduction to Web Programming Lab Manual

Program -1
Create an XHTML page using tags to accomplish the following:
 A paragraph containing text “All that glitters is not gold”. Bold face and italicize this text
 Create equation: x = 1/3(y12 + z12 )
 Put a background image to a page and demonstrate all attributes of background image
Create unordered list of 5 fruits and ordered list of 3 flowers.

Program:
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en">
<head>
<title>SAMPLE XHTML PAGE</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
</head>
<body>
<style>
body {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
</style>
<h4>Paragraph</h4>
<p>
<b><i>All that glitters is not gold</i></b> is an aphorism stating that not everything that looks precious or
true turns out to be so.
While early expressions of the idea are known from at least the 12th-13th century, the current saying is
derived from a 16th-century line by William Shakespeare,
<b><i>All that glisters is not gold</i></b>.
<br /><br />
<b><i>All that glisters is not gold</i></b><br />

Dept. of CSE [Data Science], Vemana IT Page |9

BPLCK205A Introduction to Web Programming Lab Manual

Often have you heard that told.<br />

Many a man his life hath sold<br />
But my outside to behold.<br />
Gilded tombs do worms enfold.<br />
Had you been as wise as bold,<br />
Young in limbs, in judgment old,<br />
Your answer had not been inscrolled<br />
Fare you well. Your suit is cold<br />
-William Shakespeare, Merchant of Venice, Act II Scene 7
</p>
<h4>Equation</h4>
<i>x</i> = 1/3(<i>y</i>₁² + <i>z</i>₁²)
<h4>Unordered Fruit List</h4>
<ul>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
<li>Apples</li>

</ul>
<h4>Ordered Flower List</h4>
<ol>
<li>Jasmine</li>
<li>Rose</li>
<li>Lotus</li>
<li>Tulip</li>
</ol>
<br />
</body>
</html>

OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 10

BPLCK205A Introduction to Web Programming Lab Manual

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

Program:
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<title>Table Demo XHTML PAGE</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv=" content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
Dept. of CSE [Data Science], Vemana IT P a g e | 11
BPLCK205A Introduction to Web Programming Lab Manual

<meta http-equiv="expires" content="0"/>

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding-left: 10px;
padding-bottom: 20px
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<h3>Tables in XHTML</h3>
<table align="center" width="70%" style="height:450px">
<tr>
<td rowspan="9" align="center" bgcolor=DEEEEE>
<b>Department</b>
</td>
<td rowspan="3" align="center" bgcolor=9E7BA0>
<b>Sem1</b>
</td>
<td padding:15px>
<em>Subject A</em>
</td>
</tr>
<tr>
<td><em>Subject B</em></td>
</tr>

Dept. of CSE [Data Science], Vemana IT P a g e | 12

BPLCK205A Introduction to Web Programming Lab Manual

<tr>
<td><em>Subject C</em></td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor=9E7BA0>
<b>Sem2</b>
</td>
<td><em>Subject E</em></td>
</tr>
<tr>
<td><em>Subject F</em></td>
</tr>
<tr>
<td><em>Subject G</em></td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor=9E7BA0>
<b>Sem3</b>
</td>
<td><em>Subject H</em></td>
</tr>
<tr>
<td><em>Subject I</em></td>
</tr>
<tr>
<td><em>Subject J</em></td>
</tr>
</table>
</body>
</html>
OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 13

BPLCK205A Introduction to Web Programming Lab Manual

Dept. of CSE [Data Science], Vemana IT P a g e | 14

BPLCK205A Introduction to Web Programming Lab Manual

Program-3
Use HTML5 for performing following tasks:
i. Draw a square using HTML5 SVG , fill the square with green color and make 6px brown
stroke width
ii. Write the following mathematical expression by using HTML5 MathML. d=x2-y2
iii. Redirecting current page to another page after 5 seconds using HTML5 meta tag.

Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<meta http-equiv="refresh" content="5; URL=http://www.google.com">
</head>
<body>
<h3>HTML5 SVG</h3>
<svg width="200" height="200" align="centre">
<rect x="50" y="50" width="100" height="100" fill="green" stroke="brown" stroke-width="6px"/>
</svg>
<h3>HTML5 MathML</h3>
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>d</mi></msup>
<mo> = </mo>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>-</mo>
<msup><mi>y</mi><mn>2</mn></msup>
</mrow>
</math>
<h3>This page redirects in 5 seconds</h3>
</body>
</html>
Dept. of CSE [Data Science], Vemana IT P a g e | 15
BPLCK205A Introduction to Web Programming Lab Manual

OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 16

BPLCK205A Introduction to Web Programming Lab Manual

Program-4
Demonstrate the following HTML5 Semantic tags – < article >, < aside >, < details >, < figcaption >,
< figure >, < footer >, < header >, < main >, < mark >, < section > for a webpage that gives
information about travel experience.
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Semantic Tags Demo</title>
<style>
body{
background-color: #FFFDD0;
}
aside {
float: right;
width: 25%;
background-color: cyan;
font-style: italic;
padding: 15px;
}
main {
float: left;
width: 70%;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
Dept. of CSE [Data Science], Vemana IT P a g e | 17
BPLCK205A Introduction to Web Programming Lab Manual

mark {
background-color: yellow;
color: black;
}
figure {
display: inline-block;
margin: auto;
}
figcaption {
font-style: italic;
}
</style>
</head>
<body>
<article>
<header>
<h1>My Travelogue</h1>
<p>Random Escapades</p>
</header>
<main>
<figure>
<img src="journey.jfif" alt="Example Image" width="350" height="235">
<figcaption>The road never ends</figcaption>
</figure>
<section>
<h2>Ooty</h2>
<p>Ooty is a popular hill station located in the Nilgiri Hills. It is popularly called the "Queen of Hill
Stations".</p>
</section>
<section>
<h2>Mysore</h2>
<p> The city is also known as the City of Palaces, Mysuru has always enchanted its visitors with its quaint

Dept. of CSE [Data Science], Vemana IT P a g e | 18

BPLCK205A Introduction to Web Programming Lab Manual

charm.</p>
</section>
</main>
<aside>
<section>
<p>Upcoming Trek planned to <mark>Kumara Parvata</mark> will be sharing detils soon</p>
<details>
<summary>Tentative Dates</summary>
<p>24th January 2023</p>
</details>
</section>
</aside>
<footer>
<p>© 2025 Latha Yadav</p>
</footer>
</article>
</body>
</html>
OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 19

BPLCK205A Introduction to Web Programming Lab Manual

Program-5
Create a class called income, and make it a background color of #0ff. Create a class called expenses,
and make it a background color of #f0f. Create a class called profit, and make it a background color
of #f00. Throughout the document, any text that mentions income, expenses, or profit, 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₹
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Class Selectors Demo</title>
<style>
.income {background-color: #0ff; font-style: italic;}
.expenses {background-color: #f0f;font-style: oblique;}
.profit {background-color: #ff0;font-weight: bold;}
.red{color: red;font-size: 24px;}
.strike{text-decoration: line-through; font-size: 24px;}
p {font-family: Cursive;}
</style>
</head>
<body>
<h1>Class Selectors Demo</h1>
<p>
Income, expenses, and profit are financial terms that are used to measure the financial health of a person or
a business.
</p>
<p class="income">
Income refers to the amount of money received by an individual or business from various sources such as
employment, investments, or sales of goods and services. Income can be earned on a regular basis, such as a
salary, or irregularly, such as a bonus or one-time payment.
</p>
Dept. of CSE [Data Science], Vemana IT P a g e | 20
BPLCK205A Introduction to Web Programming Lab Manual

<p class="expenses">
Expenses, on the other hand, refer to the amount of money spent by an individual or business to cover their
costs of living or operating. Expenses can include fixed costs such as rent or salaries, variable costs such as
the cost of materials, or discretionary costs such as entertainment or travel.
</p>
<p class="profit">
Profit is the amount of money that remains after deducting expenses from income. It represents the financial
gain or loss that a person or business has generated over a given period of time. A positive profit means that
the income was greater than the expenses, while a negative profit means that the expenses were greater than
the income.
</p>
<span class="strike">The current price is 50₹ </span><span class="red">and new price is 40 ₹</span>
</body>
</html>
OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 21

BPLCK205A Introduction to Web Programming Lab Manual

Program-6
Change the tag li to have the following properties:
 A display status of inline
 A medium, double-lined, black border
 No list style type
 Add the following properties to the style for li:
 Margin of 5px
 Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to the left
Also demonstrate list style type with user defined image logos
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tag Properties </title>
<style>
.custom {
display: inline;
border: 6px double black;
list-style-type: none;
margin: 5px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.logo {
list-style-image: url('https://www.w3schools.com/cssref/sqpurple.gif');
margin: 15px;
}
</style>
</head>

Dept. of CSE [Data Science], Vemana IT P a g e | 22

BPLCK205A Introduction to Web Programming Lab Manual

<body>
<h2>li Tag Property modification Demo</h2>
<h3>Current Top FootBall Players</h3>
<ul>
<li class="custom">Lionel Messi</li>
<li class="custom">Kylian Mbappe</li>
<li class="custom">Lewandowski</li>
</ul>
<br>
<h2>list style type with user defined image logos</h2>
<h3>Current Top FootBall Goalkeepers</h3>
<ul class="logo">
<li>Emiliano Martinez</li>
<li>Thibaut Courtois</li>
<li>Yassine Bounou</li>
</ul>
</body>
</html>

OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 23

BPLCK205A Introduction to Web Programming Lab Manual

Program-7
Create following web page using HTML and CSS with tabular layout

Program:
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #F7E7CE;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
table {
width: 100%;
}
Dept. of CSE [Data Science], Vemana IT P a g e | 24
BPLCK205A Introduction to Web Programming Lab Manual

th, td {
padding: 10px;
}
th {
text-align: left;
background-color: #f2f2f2;
}
input[type=text], input[type=password], input[type=email] {
width: 100%;
padding: 8px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button[type=submit] {
background-color: #FFA500;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Sign up Today</h1>
<form>
<table>
<tr>
<td><label for="username">Name:</label> <br>

Dept. of CSE [Data Science], Vemana IT P a g e | 25

BPLCK205A Introduction to Web Programming Lab Manual

<input type="text" id="username" name="username" required></td>

</tr>
<tr>
<td><label for="email">Email:</label> <br>
<input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td><label for="password">Password:</label> <br>
<input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td><label for="password">Confirm password:</label> <br>
<input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td colspan="2"><button type="submit">Register</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>
OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 26

BPLCK205A Introduction to Web Programming Lab Manual

Program-8
Create following calculator interface with HTML and CSS.

Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="calcstyle.css">
</head>
<body>
<div class="calculator">
<div class="display">
<p id="result">0</p>
</div>
<div class="buttons">
<button onclick="appendToDisplay('(')">(</button>
<button onclick="appendToDisplay(')')">)</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('%')">%</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('*')">X</button>
Dept. of CSE [Data Science], Vemana IT P a g e | 27
BPLCK205A Introduction to Web Programming Lab Manual

<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="evaluate()">=</button>
</div>
</div>
</body>
</html>

CSS CODE
.calculator {
display: flex;
flex-direction: column;
width: 350px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 15px;
background-color: #F0C0FF;
}
.display {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
display: flex;

Dept. of CSE [Data Science], Vemana IT P a g e | 28

BPLCK205A Introduction to Web Programming Lab Manual

justify-content: flex-end;
align-items: center;
padding: 10px;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 20px;
}
button {
padding: 20px;
background-color: #8D918D;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
margin: 10px;
font-size: 18px;
font-weight: bold;
}
button:hover {
background-color: #d9d9d9;
}
button:active {
background-color: #bfbfbf;
}
#result {
margin: 0;
font-size: 24px;
font-weight: bold;
}
Dept. of CSE [Data Science], Vemana IT P a g e | 29
BPLCK205A Introduction to Web Programming Lab Manual

OUTPUT:

Dept. of CSE [Data Science], Vemana IT P a g e | 30

BPLCK205A Introduction to Web Programming Lab Manual

Program-9
Write a Java Script program that on clicking a button, displays scrolling text which moves from left
to right with a small delay.
Program
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text Example</title>
<style>
#scrollingText {
font-size: 24px; font-weight: bold;
white-space: nowrap; overflow: hidden;
}
</style>
</head>
<body>
<button id="startBtn">Start Scrolling</button>
<div id="scrollingText">This is some scrolling text!</div>
<script>
var scrollingText = document.getElementById("scrollingText");
var startBtn = document.getElementById("startBtn");
var textWidth = scrollingText.clientWidth;
var containerWidth = scrollingText.parentNode.clientWidth;
var currentPosition = 0;
function scrollText() {
if (currentPosition < containerWidth) {
scrollingText.style.transform = "translateX(-" + currentPosition + "px)";
currentPosition += 1;
setTimeout(scrollText, 20);
} else {
currentPosition = -textWidth;
scrollText();
Dept. of CSE [Data Science], Vemana IT P a g e | 31
BPLCK205A Introduction to Web Programming Lab Manual

}
}
startBtn.addEventListener("click", function() {
currentPosition = 0;
scrollText();
});
</script>
</body>
</html>

OUTPUT:

Initial Page

Page with Scrolled text

Dept. of CSE [Data Science], Vemana IT P a g e | 32
BPLCK205A Introduction to Web Programming Lab Manual

Program-10
Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further when the
mouse is over any image, it should be on the top and fully displayed.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Putta" >
<title>Animal Stacking</title>
<style>
h1 {text-align: center;}
.dog {
position: absolute;
left: 10%; top: 10%;
z-index: 0;
}
.cat {
position: absolute;
left: 30%; top: 30%;
z-index: 1;
}
.horse {
position: absolute;
left: 50%; top: 50%;
z-index: 2;
}
</style>
<script>
var topIndex = 2;
function moveToTop(picture) {
picture.style.zIndex = ++topIndex;
Dept. of CSE [Data Science], Vemana IT P a g e | 33
BPLCK205A Introduction to Web Programming Lab Manual

}
</script>
</head>
<body>
<h1>Image Overlap Demo</h1>
<div id="image-container">
<img id="dog" class="dog" src="dog.jpg" onmouseover="moveToTop(this)" width="400" height="300">
<img id="cat" class="cat" src="cat.jpg" onmouseover="moveToTop(this)" width="400" height="300">
<img id="horse" class="horse" src="horse.jpg" onmouseover="moveToTop(this)" width="400"
height="300">
</div>
</body>
</html>

OUTPUT:
Images used in this exercise
dog.jpgDownload
cat.jpgDownload
horse-2Download

Dept. of CSE [Data Science], Vemana IT P a g e | 34

BPLCK205A Introduction to Web Programming Lab Manual

Mouse over Image 1

Mouse over Image 2

Dept. of CSE [Data Science], Vemana IT P a g e | 35

BPLCK205A Introduction to Web Programming Lab Manual

Mouse over Image 3

Dept. of CSE [Data Science], Vemana IT P a g e | 36