Python 4
Python 4
TECHNOLOGY-NORTH CAMPUS
Off International Airport Road, Kundana, Bengaluru -
562110
II SEMESTER-2024
PREPARED BY:
MAHALAKSHMI J
ASSISTANT PROFESSOR
CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)
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
SubjectA
Sem1 SubjectB
SubjectC
SubjectE
SubjectG
SubjectH
Sem3 SubjectI
SubjectJ
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:
7. Create following web page using HTML and CSS with tabular layout
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.
<h4>Paragraph</h4>
<p>
<b><i>All that glitters is not gold</i></b>
<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>
SAMPLE OUTPUT:
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
Department
Sem1 SubjectA SubjectB SubjectC
Sem2 SubjectE SubjectF SubjectG
Sem3 SubjectH SubjectI SubjectJ
<!DOCTYPE html>
<head></head>
<body>
<table border="1" align="center" cell-padding="2" cell-spacing="2" width="100"height="100">
<tr><td rowspan="9" bgcolor="lightblue"> <b>Department </b> </td>
<td rowspan="3" bgcolor="violet"> <b> Sem1 </b> </td><td> <em> Subjecta </em> </td>
<tr><td> <em> Subjectb </em> </td></tr>
<tr><td> <em> Subjectc </em> </td></tr>
<td rowspan="3" bgcolor="violet"> <b> Sem2 </b> </td><td> <em> Subjectd </em> </td>
<tr><td> <em> Subjecte </em> </td></tr>
<tr><td> <em> Subjectf </em> </td></tr>
<td rowspan="3" bgcolor="violet"> <b> Sem3 </b> </td><td> <em> Subjectg </em> </td>
<tr><td> <em> Subjecth </em> </td></tr>
<tr><td> <em> Subjecti </em> </td></tr>
</body></html>
SAMPLE OUTPUT:
<h3>HTML5 MathML</h3>
SAMPLE OUTPUT:
INITIAL PAGE:
<!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; 16 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> 49 </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>
SAMPLE OUTPUT:
INITIAL PAGE:
5. Create a class called income, and make it a background color of#0ff. Create a class called
expenses , and make it a background colorof #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₹
<!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>
SAMPLE OUTPUT:
<!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> 23 </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>
</body>
</html>
SAMPLE OUTPUT:
7. Create following web page using HTML and CSS with tabular layout
HTML
<!DOCTYPE html>
<html>
<head><title>Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><br><div class="login"><form id="login" method="get" action="login.php">
<h2> Sign up today </h2>
<label><b> Name:<br></b></label>
<input type="text" name="Name" id="Uname" placeholder=" "><br><br>
<label><b>Email:<br></b></label>
<input type="text" name="" id="Email" placeholder=" "><br><br>
<label><b>Password:<br>
</b></label>
<input type="Password" name="Pass" id="Pass" placeholder=" "><br><br>
<label><b>Confirm Password:<br></b></label><input type="Password" name="Pass" id="CPass"
placeholder=" "><br><br><input type="button" name="log" id="log" value=" Register"><br><br>
</form></div>
</body>
</html>
--------------------CSS------------------------------------
body{margin: 0; padding: 0; background-color:#6abadeba;font-family: 'Arial';}.
login{width: 382px;overflow: hidden; margin: auto; margin: 20 0 0 450px; padding:
80px; background: #23463f; border-radius: 15px ;}
h2{text-align: center; color: #277582; padding: 20px;}
label{color: #08ffd1;font-size: 17px;}
#Uname{width: 300px;height: 30px; border: none; border-radius: 3px; padding-left: 8px;}
#Email{width: 300px;height: 30px; border: none; border-radius: 3px; padding-left: 8px;}
#Pass{width: 300px;height: 30px; border: none; border-radius: 3px; padding-left: 8px;}
SAMPLE OUTPUT:
-------------------------------HTML-------------------------------
<!DOCTYPE html>
<html>
<head>
<title> Simple Calculator </title>
<link rel="stylesheet" type="text/css" href="c.css"></head>
<body><!-- Calculator Body --><div class="calc-body">
<!-- Calculator Display Screen --><div class="calc-screen">
<div id="calc-operation">1234 + 567 + </div>
<div id="calc-typed">890</div></div>
<!-- Calculator Buttons --><div class="calc-button-row"> <button class="ac">AC</button>
<button class="opt">+/−</button>
<button class="opt">%</button>
<button class="opt">÷</button>
<button>7</button> <button>8</button>
<button>9</button> <button class="opt">×</button>
<button>4</button> <button>5</button>
<button>6</button> <button class="opt">−</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="opt">+</button>
<button>0</button>
<button>.</button>
<button>⌫</button>
<button class="opt">=</button></div></div>
</body>
</html>
--------------------CSS------------------------------------
/*Calculator Body*/.
calc-body { width: 275px; margin: auto; min-height: 400px; box-shadow: 0 8px 50px -
7px black; background: #3A4655;}
/*Calculator Display Screen*/.
calc-screen {padding: 1rem;}
#calc-operation { font-size: 1.3rem; text-align: right; color: #727B86; padding-bottom: .5rem;}
#calc-typed { font-size: 2rem; text-align: right; color: #fff;}
/*Calculator Buttons*/.
calc-button-row{ display: table;}.
calc-button-row button { display: table-
cell; width: 25%; background: #425062; color: #fff; height: 65px; font-size: 1.3rem; border: none;
border-color: #3C4857; border-width: 1px 1px 0px 0; border-style: solid;}.
calc-button-row button.ac { color: #ff7665;}.
calc-button-row button.opt { color: #ffbc56;}
/*The border has been managed in every fourth button so that the design will not distract.*/.
calc-button-row button:nth-child(4n){ border-right: none;}.
calc-button-row button:active { position: relative; top: 1px;}.
calc-button-row button:hover { background: #3e4b5c;}
SAMPLE OUTPUT:
9. Write a Java Script program that on clicking a button, displays scrolling text which
moves from left to right with a small delay
<!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; 28scrollText();
}
}
startBtn.addEventListener("click", function() {
currentPosition = 0;
scrollText();
});
</script>
</body>
</html>
SAMPLE OUTPUT:
INITIAL PAGE:
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.
<!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">
SAMPLE OUTPUT: