Intro to Web Programming Lab Manual for VTU (BPLCK105A/205A)

Prabodh C PAug 27, 20232 Comments

VTU has recently launched an exciting new subject called “Introduction to Web Programming” (Sub Code: BPLCK105A/205A) exclusively for first-year students. This comprehensive course incorporates an integrated lab component, providing hands-on experience. I am delighted to present the initial version of the lab manual, which includes meticulously crafted solutions and sample outputs for all the lab programs. As we progress, we plan to enrich this manual with additional documentation and algorithms. It is our vision to foster collaboration and knowledge sharing, so we invite anyone to contribute and freely distribute this manual under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

To those who are interested in contributing, we have set up a dedicated platform for collaboration. You can find the repository for the lab manual at https://gitlab.com/lab_manuals/web_22plc15a_repo_vtu_2022_23. This repository serves as a hub for sharing ideas, making improvements, and expanding the content. We welcome your valuable contributions to enhance the learning experience for all. Let’s work together to create a comprehensive resource that benefits the entire community.

Syllabus

BPLCK105A Syllabus Download

Web Programming Lab (BPLCK105A/205A)

You can go to the solutions of each question using the links below.

Question 01 – XHTML Page
Question 02 – XHTML Tables
Question 03 – HTML5
Question 04 – HTML5 Semantic Tags
Question 05 – Classes
Question 06 – li Tag
Question 07 – Signup Page
Question 08 – Calculator
Question 09 – Scrolling Text
Question 10 – Overlapping Images

Solutions

Question 01

XHTML Page

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(y₁² + z₁² )
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

HTML 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" xml:lang="en">
<head>
<title>SAMPLE XHTML PAGE</title>
<meta name="author" content="Putta" />
<meta name="date" content="2023-02-17T04:15:01+0530" />
<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"/>
<meta http-equiv="expires" content="0"/>
</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 />
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><sub>1</sub><sup>2</sup> + <i>z</i><sub>1</sub><sup>2</sup>)

  <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

Question 02

XHTML Tables

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

HTML 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" xml:lang="en">
<head>
<title>Table Demo XHTML PAGE</title>
<meta name="author" content="Putta" />
<meta name="date" content="2023-02-17T04:58:37+0530" />
<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"/>
<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>SubjectA</em>
    </td>    
  </tr>
  <tr>
    <td ><em>SubjectB</em></td>
  </tr>
  <tr>
    <td ><em>SubjectC</em></td>
  </tr>

  <tr>
    <td rowspan="3" align="center" bgcolor=9E7BA0>
	    <b>Sem2</b>
    </td>
    <td ><em>SubjectE</em></td>       
  </tr>
  <tr>
    <td ><em>SubjectF</em></td>
  </tr>
  <tr>
    <td ><em>SubjectG</em></td>
  </tr>

  <tr>
    <td rowspan="3" align="center" bgcolor=9E7BA0>
	    <b>Sem3</b>
    </td>
    <td ><em>SubjectH</em></td>       
  </tr>
  <tr>
    <td ><em>SubjectI</em></td>
  </tr>
  <tr>
    <td ><em>SubjectJ</em></td>
  </tr>

</table>

</body>
</html>

Output

Question 03

HTML5

Use HTML5 for performing following tasks:

Draw a square using HTML5 SVG , fill the square with green color and make 6px brown stroke width
Write the following mathematical expression by using HTML5 MathML. d=x²-y²
Redirecting current page to another page after 5 seconds using HTML5 meta tag

HTML Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>HTML5 Demo</title>
	<meta http-equiv="refresh" content="5; URL=http://www.vtu.ac.in">
</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>

Output

Question 04

HTML5 Semantic Tags

Demonstrate the following HTML5 Semantic tags – < article >, < aside >, < details >, < f igcaption >, < f igure >, < f ooter >, < header >, < main >, < mark >, < section > for a webpage that gives information about travel experience.

HTML Code

<!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;
      }
      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.jpeg" 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 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>© 2023 Prabodh C P</p>
    </footer>

</article>
</body>
</html>

Output

Question 05

Classes

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₹

HTML Code

<!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>

<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

Question 06

li Tag

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

HTML Code

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>Tag Properties </title>
  
    <style>
      .custom {
        display: inline;
        border: 2px 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>
  
  <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

Question 07

Signup Page

Create following web page using HTML and CSS with tabular layout

HTML Code

<!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%;
		}

		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> 
					<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

Question 08

Calculator

Create following calculator interface with HTML and CSS

HTML Code

<!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>
    <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;
  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;
}

Output

Question 09

Scrolling Text

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

HTML Code

<!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();
        }
      }
      startBtn.addEventListener("click", function() {
        currentPosition = 0;
        scrollText();
      });
    </script>
  </body>
</html>

Output

Question 10

Overlapping Images

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.

HTML Code

<!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;
		}

		</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>