Web Programming Manual
Web Programming Manual
i) A paragraph containing text “All that glitters are not gold”. 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 3 flowers
Solution:
<h4>Paragraph</h4>
<p>
<i>x</i> = 1/3(<i>y</i><sub>1</sub><sup>2</sup> +
<i>z</i><sub>1</sub><sup>2</sup>)
<ul>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
<li>Apples</li>
</ul>
Output:
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.
Solution:
<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>
Solution:
<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;
.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;
}
Program 4: Design a web page using JavaScript program to displays scrolling text which
moves from left to right with a small delay, upon clicking a button.
Solution:
}
</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:
Program 5: Develop and demonstrate a XHTML file that includes JavaScript script for
the following problems:
a)
<?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>Fibonacci Series</title>
</head>
<body>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num=prompt("Enter a number : \n", "");
if(num != null && num > 0 )
{
document.write("<h1>The first "+num+" numbers in the fibonacci series
</h1>");
if(num==1)
document.write("<h2> "+ fib1 + "</h2>");
else
{
document.write("<h2>" + fib1 + "</h2>");
document.write("<h2>" + fib2 + "</h2>");
}
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h2> " + fib + "</h2>");
fib1=fib2;
fib2=fib;
}
}
else
alert("Invalid Input");
</script>
</body>
</html>
Output:
b)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Number and its squares</title>
</head>
<body>
<script type="text/javascript">
var num = prompt("Enter a number : \n", "");
var msgstr;
if(num > 0 && num !=null){
msgstr="Number and its Squares are \n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " ^ 2 = " + i*i + "\n";
}
alert(msgstr);
}
else
alert("Invalid Input");
</script>
</body>
</html>
Output:
Program 6: Develop and demonstrate a XHTML file that includes JavaScript script that
uses functions for the following problems:
a) Parameter: A string Output: The position in the string of the left-most vowel.
b) Parameter: A number Output: The number with its digits in the reverse order.
Solution:
b)
<?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>Program 3b</title>
</head>
<script type="text/javascript">
<!--
function rev()
{
var n = prompt("Enter a number: ","");
var str=0;
for(i=n.length-1;i>=0;i--)
str = str*10 + Number(n[i]);
alert(str);
}
-->
</script>
<body onload="rev()">
</body>
</html>
Output:
Program 7: Create a webpage containing 3 overlapping images using XHTML, CSS and
Solution:
.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">
Program 8: Write a PHP program to store current date-time in a COOKIE and display
the ‘Last visited on’ date-time on the web page upon reopening of the same page.
Solution:
<?php
date_default_timezone_set('Asia/Calcutta');
$inTwoMonths = 60 * 60 * 24 * 60 + time();
if(isset($_COOKIE['lastVisit']))
$visit = $_COOKIE['lastVisit'];
else
?>
Department of ISE, DSATM 2024-25 P a g e 21 | 34
Web Programming 23ISEN37
Output:
Program 9: Create a XHTML form with Name, Address Line 1, Address Line 2, and E-
mail text fields. On submitting, store the values in MySQL table. Retrieve and display the
data based on Name.
Solution:
<html>
<body>
<?php
$self = $_SERVER['PHP_SELF'];
die(mysql_error());
mysql_select_db('satish') or die(mysql_error());
if(isset($_POST['name']))
$nme = $_POST['name'];
$ad1 = $_POST['add1'];
$ad2 = $_POST['add2'];
$eml = $_POST['email'];
else
mysql_close($dbh);
?>
<P>
<INPUT TYPE=submit>
</FORM>
</body>
</html>
<html>
<head><title>Program 13</title></head>
<body>
<input type=submit>
</form>
</body>
</html>
<html>
<body>
<hr>
<?php
$link=mysql_connect("localhost","root","satish1");
mysql_select_db("satish");
$n=$_POST["name"];
<th>E-mail</th></tr>";
while ($arr=mysql_fetch_row($var))
<td>$arr[3]</td> </tr>";
echo"</table>";
mysql_free_result($var);
mysql_close($link);
?>
<hr>
<form action="12b.html">
</form>
</body>
</html>
Output:
Program 10: Using PHP and MySQL, develop a program to accept book information viz.
Accession number, title, authors, edition and publisher from a web page and store the
information in a database and to search for a book with the title specified by the user and
to display the search results with proper headings.
Solution:
<html>
<body>
<input type="submit"value="SUBMIT">
<input type="reset"value="CLEAR">
</form>
</body>
</html>
<?php
header('content-type:text/plain');
mysql_select_db('librarys',$db);
values('$_POST[Acc_no]','$_POST[Title]','$_POST[Author]','$_POST[Publi
sher]','$_POST[Edition]')") or
die("Insertion Failed");
?>
<html>
<body>
</form>
</body>
</html>
<?php
header("Content-type:text/plain");
mysql_select_db('student',$db);
if(!$result)
$row=mysql_fetch_row($result);
if(empty($row))
exit;
do
echo $row[0]."\t\t".$row[1]."\t".$row[2]."\t".$row[3]."\t".$row[4]."\n";
}while($row=mysql_fetch_row($result));
?>
Output:
1. Expand HTML.
Ans: Web 2.0 is all about "Design Pattern" and "Business Model" for the
next generation of the software
7. How do you make decision when to use use HTML & XHTML ?
Ans: HTML and XHTML are very similar, but XHTML follows a stricter
set of rules, making it easier to validate data and design pages ...
Ans: HTML elements are nothing but HTML tags. eg: html, head, title,
meta, body, table, h1, h2, h3, font, p, marquee etc ...
Ans: The head tag is placed above the body element in the html
document. The head element contains general information, also called
meta-information, about a document.
Ans: Document Type Defination (DTD) specifies the syntax of a web page,
It is used to specify rules that apply to the markup of the document of a
particular type, including a set of element and entity declarations.
Ans: DIV is used to select a block of text so that one can apply styles to
it. SPAN is used to select inline text and let users to apply styles to it.
16. What are tags used for the following and give details on the same?
Ordered list
Unordered list
Table
Span
Image
Paragraph
Scrolling text
Headings
Frames
45.What is php?
********************************************************************