0% found this document useful (0 votes)
1 views25 pages

Python 4

The document is a lab manual for an Introduction to Web Programming course, detailing various tasks and exercises for students to complete using XHTML, HTML5, CSS, and JavaScript. It includes instructions for creating web pages, tables, lists, and implementing semantic tags, as well as styling elements with CSS. The manual is prepared by Asst. Prof. Mahalakshmi J from the Department of Cyber Security at Cambridge Institute of Technology - North Campus.

Uploaded by

rpsinghh8127
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
1 views25 pages

Python 4

The document is a lab manual for an Introduction to Web Programming course, detailing various tasks and exercises for students to complete using XHTML, HTML5, CSS, and JavaScript. It includes instructions for creating web pages, tables, lists, and implementing semantic tags, as well as styling elements with CSS. The manual is prepared by Asst. Prof. Mahalakshmi J from the Department of Cyber Security at Cambridge Institute of Technology - North Campus.

Uploaded by

rpsinghh8127
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

CAMBRIDGE INSTITUTE OF

TECHNOLOGY-NORTH CAMPUS
Off International Airport Road, Kundana, Bengaluru -
562110

II SEMESTER-2024

INTRODUCTION TO WEB PROGRAMMING


(BPLCK205A)
LAB MANUAL

PREPARED BY:

MAHALAKSHMI J

ASSISTANT PROFESSOR

DEPARTMENT OF CYBER SECURITY

CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

1. Create an XHTML page using tags to accomplish the following:


(i) A paragraph containing text “All that glitters is not gold”. Bold face and italicize this text
(ii) Create equation:
𝑥 = 1/3(𝑦12 + 𝑧12)
(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

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

Department Sem2 SubjectF

SubjectG

SubjectH

Sem3 SubjectI

SubjectJ

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 1|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

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.

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 2|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

1. Create an XHTML page using tags to accomplish the following:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title>SAMPLE XHTML PAGE</title>
</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>

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 3|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 4|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

SAMPLE OUTPUT:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 5|P ag e


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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 6|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

3. Use HTML5 for performing following tasks:


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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 7|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

SAMPLE OUTPUT:

INITIAL PAGE:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 8|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

4. Demonstrate the following HTML5 Semantic tags- <article>, <aside>,<details>,


<figcaption>,<figure>, <footer>, <header>, <main>, <mark>, <section> for a webpage thatgives
informationabout travel experience.Sol:<!DOCTYPE html><html><head><title>my travel
experience</title></head><body><header>

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 9|P ag e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

</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>&copy; 2023 Prabodh C P</p>
</footer>

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 10 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

SAMPLE OUTPUT:
INITIAL PAGE:

AFTER CLICKING ON DETAILS:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 11 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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>

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 12 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

<span class="strike">The current price is 50&#8377; </span><span class="red">and new price is


40&#8377;</span>
</body>
</html>

SAMPLE OUTPUT:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 13 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 14 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

<li>Thibaut Courtois</li>
<li>Yassine Bounou</li>
</ul>

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

SAMPLE OUTPUT:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 15 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 16 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

#CPass{width: 300px;height: 30px; border: none; border-radius: 3px; padding-left: 8px;}


#log{width: 300px; height: 30px; border: none; border-radius: 17px; padding-left: 7px; background-
color: yellow; color: white;}span{color: white; font-size: 17px;}
a{float: right; background-color: grey;}

SAMPLE OUTPUT:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 17 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

8. Create following calculator interface with HTML and CSS

-------------------------------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">&#43;&#47;&#8722;</button>
<button class="opt">&#37;</button>
<button class="opt">&#247;</button>
<button>7</button> <button>8</button>
<button>9</button> <button class="opt">&#215;</button>
<button>4</button> <button>5</button>
<button>6</button> <button class="opt">&#8722;</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="opt">&#43;</button>
<button>0</button>
<button>.</button>
<button>&#9003;</button>
<button class="opt">&#61;</button></div></div>
</body>
</html>

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 18 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 19 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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>

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 20 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

SAMPLE OUTPUT:

INITIAL PAGE:

PAGE WITH SCROLLED TEXT:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 21 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 22 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

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

SAMPLE OUTPUT:

MOUSE OVER IMAGE 1:

MOUSE OVER IMAGE 2:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 23 | P a g e


CITNC
INTRODUCTION TO WEB PROGRAMMING(BPLCK205A)

MOUSE OVER IMAGE 3:

Asst. Prof. Mahalakshmi J, Dept. Of CSE, 24 | P a g e


CITNC

You might also like