PLC Lab Programs

Programming Assignments:
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
Sol:
<!DOCTYPE>
<html>
<head>
<title> HTML </title>
</head>
<body>
<p> <b> <i> “All that glitters is not gold” </i> </b> </p>
</body>
</html>
(ii) Create equation:

𝑥 = 1/3(𝑦2 + 𝑧2
Sol:
1 1
<!DOCTYPE>
<html>
<head>
<title> Equation </title>
</head>
<body>
x=1/3 <span> ( </span> <var>y </var> <sup> 2 </sup> + <var> x
</var> <sup> 2 </sup>

</body>
</html>
(iii) Put a background image to a page and demonstrate all attributes of background
image
Sol:
<!DOCTYPE>
<html>
<head>
<style>
body {
background:url("C:/Users/ram/Pictures/sri.jpg");
background-repeat=no-repeat;
background-size:cover;
background-position=center;
}
</style>
</head>
<body>
</body>
</html>
(iv) Create unordered list of 5 fruits and ordered list of 3 flowers

Sol:
<!DOCTYPE>
<html>
<head>
<title> HTML Lists </title>
</head>
<body>
<ul>
<h1> Unordered list of 5 fruits </h1>
<li> Apple </li>
<li> Orange </li>
<li> Banana </li>
<li> Berry </li>
<li> Guava </li>
</ul>
<ol>
<h1> Ordered list of 3 flowers </h1>
<li> Rose </li>
<li> Lily </li>
<li> Jasmine </li>
</ol>
</body>
</html>
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
Se SubjectB
m1 SubjectC
SubjectE
Department Se SubjectF
m2 SubjectG
SubjectH
Se SubjectI
m3 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> <em> Subjectd </em> </td>
<tr>
<td> <em> Subjecte </em> </td>
</tr>
<tr>
<td> <em> Subjectf </em> </td>
</tr>
<td> <em> Subjectg </em> </td>
<tr>
<td> <em> Subjecth </em> </td>
</tr>
<tr>
<td> <em> Subjecti </em> </td>
</tr>
</body>
</html>
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
Sol: <!DOCTYPE html>

<html>
<head>
</head>
<body>
<svg width="200" height="200">
<rect
x="20" y="20"
width="100" height="100"
fill="green" stroke="brown"
stroke-width="6px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>
(ii) Write the following mathematical expression by using

HTML5 MathML. d=x2-y2
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<math>
<mrow>
<mi>d</mi>
<mo>=</mo>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>-</mo>
<msup><mi>y</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
(iii) Redirecting current page to another page after 5 seconds using
HTML5 meta tag
Sol:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="refresh" content="5; url=www.theoxford.edu" />
</head>
<body>
<p> Hello HTML5 </p>
</body>
</html>
4. 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₹
<!DOCTYPE html>
<html>
<head>
<meta charst="utf-8">
<title> Income </title>
<style>
.income{background-color:#0fff;}
.expenses{background-color:#f0f;}
.profit{background-color:#f00;}
q{font-family: Impact;}
</style>
</head>
<body>
<h1 class="income"> Income statement </h1>
The Income Statement is one of a company’s core financial statements that shows
their profit and loss over a period of time.
The profit or loss is determined by taking all revenues and subtracting all expenses
from both operating and non-operating activities.
The income statement is one of three statements used in both corporate finance
(including financial modeling) and accounting.
The statement displays the company’s revenue, costs, gross profit, selling and
administrative expenses, other <span class="expenses">expenses</span>
and income, taxes paid,
and net profit in a coherent and logical manner.
<p> The statement is divided into time periods that logically follow the company’s
operations.
The most common periodic division is monthly (for internal reporting), although
certain companies may use a thirteen-period cycle.
These periodic statements are aggregated into total values for quarterly and annual
results.
This statement is a great place to begin a financial model, as it requires the least
amount of information from the balance sheet and cash flow statement.
Thus, in terms of information, the income statement is a predecessor to the other
two core statements.</p>
<h1 class="income">Components of an Income Statement</h1>
<p>The income statement may have minor variations between different
companies, as expenses and income will be dependent on the type of operations
or business conducted. However, there are several generic line items that are
commonly seen in any income statement.</p>
The most common income statement items include:
Revenue/Sales
Sales Revenue is the company’s revenue from sales or services, displayed at the
very top of the statement.
This value will be the gross of the costs associated with creating the goods sold or
in providing services.
Some companies have multiple revenue streams that add to a total revenue line.
Cost of Goods Sold (COGS)
Cost of Goods Sold (COGS) is a line-item that aggregates the direct costs
associated with selling products to generate revenue.
This line item can also be called Cost of Sales if the company is a service business.
Direct costs can include labor, parts, materials, and an allocation of other expenses
such as depreciation (see an explanation of depreciation below).</p>
<h1 class="expenses">Marketing, Advertising, and Promotion Expenses </h1>
<p>Most businesses have some expenses related to selling goods and/or
services.While not present in all income statements,
EBITDA stands for Earnings before Interest, Tax, Depreciation, and
Amortization.
It is calculated by subtracting SG&A expenses (excluding amortization and
depreciation) from gross <q class="profit">profit</q>.
Marketing, advertising, and promotion expenses are often grouped together as they
are similar expenses, all related to selling.Depreciation
and amortization are non-cash expenses that are created by accountants to spread
out the cost of capital assets such as Property, Plant, and Equipment (PP&E).
Operating Income (or EBIT)

Operating Income represents what’s earned from regular business operations. In
other words, it’s the profit before any non-operating income,
non-operating expenses, interest, or taxes are subtracted from revenues.
EBIT is a term commonly used in finance and stands for Earnings Before Interest
and Taxe</p>
<h1 class="expenses">General and Administrative (G&A) Expenses</h1>
<p>SG&A Expenses include the selling, general, and administrative section that
contains all other indirect costs associated with running the business.
This includes salaries and wages, rent and office expenses, insurance, travel
expenses, and sometimes depreciation and amortization,
along with other operational expenses.</p>
<h1 class="profit">Gross Profit</h1>
Gross Profit Gross profit is calculated by subtracting Cost of Goods Sold (or Cost
of Sales) from Sales Revenue.
<p> The new price is <span class="profit"> $40 </span> </p>
</body>
</html>
5. 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.
Sol:
<!DOCTYPE html>
<html>
<head>
<title>my travel experience</title>
</head>
<body>
<header>
<main>
<h1>gokak falls</h1>
</main></header>
<article>Gokak Falls near Belgaum is not just known for its heavy water flow (it falls over 177
metres!). There are also <mark> Chalukyan temples </mark> nearby, a century-old hanging
bridge and a colonial power station where electricity was first generated in the country. Often
compared to the Niagara Falls, Karnataka's very own Gokak Falls (located just 50 km from
Belgaum) is a relatively unknown but a good getaway. About Gokak Water Falls
After a long winding course, the Ghataprabha river takes a leap of 52 metres (171 ft) over the
sandstone cliff amidst a picturesque gorge of the rugged valley, resembling Niagara Falls on a
smaller scale. The waterfall is horse shoe shaped at the crest, with a flood breadth of 177
metres (581 ft). It also has a hanging bridge which is an attraction for people visiting Gokak.
Gokak Falls is 6 km away from Gokak town and gets its name from the Goki trees found in
abundance in these areas. It resembles the Niagara Falls due to its features like the fall, shape
etc. Here, River Ghataprabha takes a leap of 52 metres over the sand-stone cliff amidst a
picturesque gorge of the rugged valley, making a beautiful sight. This place has the credit of
generating electricity for the first time in the country in about 1887. A prime attraction of the
Gokak Falls is the hanging 200-m-long bridge that lies 14 m above the bedrock. Tourists can
also visit monuments on both sides of the rocky gorge which include temples of Goddess
Durga, Lord Shanmukha and Lord Mahalingeshwara built in the traditional Chalukyan style of
architecture.
<pre>
Reasons to visit Gokak Falls:
Hanging Bridge: Built across the river, 200 meters long, gives an elevated view of the falls.
Lord Mahalingeshwara Temple, built-in Chalukya style architecture.
Kemple Park botanical gardens
Yogi Kolla hiking: A popular trekking destination 3 kms from the falls.
Mallaprabha Boating: Boating options in Markandeya river, 8 kms from the Falls
More temples: such as Yogikolla Mallikarjuna Temple, Kariyamma Temple, Laxmi Temple,
Hanuman Temple and more.
Nearby: Godachinmalki waterfalls (13 kms from Gokak Falls) and Saundatti Yellamma (73 kms)
are often visited along with the Falls.
How to reach Gokak Falls: The Falls is 622 kms from Bengaluru and 62 kms from Belagavi.
Belagavi is the nearest airport and major railway station. Belagavi is well-connected by air, rail
and road to rest of Karnataka. From Belagavi taxi can be hired to reach Gokak falls.
Stay: Gokak city, 6 kms away, has budget hotels. Belagavi city has more hotel options.
Gokak falls is a waterfall known for its beauty. It is at a distance of 60 Kms from Belgaum and
10 kms from Gokak town. Located right on the main road is a celebrated tourist center in the
district. This falls has a height of about 170 feet.
The river Ghataprabha after winding a course of a long route takes a leap of 52 meters, over a
rocky bed 170 feet down. The falls is famous for its spread and shape.Except in width and
colour of the water, the general features of the fall, its height, shape and rapidity above are
much like those of ” Niagara”.
The waterfall is horse shoe shaped at the crest, with a flood breadth of 177 metres (580 ft).
During rainy season the thick reddish brown water sweeps far over the brink of the cliff with a
dull roar that can be heard from some distance.
<figure id ="gokak falls"></figure>
<img src ="C:/Users/ARCLAB-004/Downloads/abc.jpg" width="500" height="500">
<fig caption="Hear Me Roar: Head To Gokak Falls For Stunning Views And A Dose Of
History"></article>
<aside>Badami Chalukya architecture is a style in Hindu temple architecture that evolved in the
5th – 8th centuries CE in the Malaprabha river basin, in the present-day Bagalkot district of
Karnataka state of India, under the Chalukya dynasty; later it spread more widely. This style is
sometimes called the Vesara style and Chalukya style, a term that also includes the much later
Western Chalukya architecture of the 11th and 12th centuries.
<figure id = "chalukya architecture"></figure>
<img src="C:/Users/ARCLAB-004/Downloads/a.jpg" width="300" height"300">
</aside>
<details>
<summary>
<p>Catch a bus from Belgaum or hire a private taxi, and you will reach here in about a couple of
hours. As you near it, you will hear the roar of the falls much before it actually comes into sight.
The falls is formed when the Ghataprabha river enters the rocky belt of Gokak, forcing it to
make the leap over a nearly 180-feet sandstone cliff, into a horseshoe-shaped gorge. In fact, if
you go up to the very top, you can take a peek down where the water is falling into dizzying
depths.
Shutterbugs can take a walk along the cliffs and take in panoramic views of the rugged cliffs and
the water. <section>Fun fact: when the British discovered the falls, they established a textile mill
there and installed the first hydro-electric turbine in the country to generate electricity (Gokak
was lit in 1907!). You can still see the mill and the power plant there -- they are both operational
and their main activity is to convert cotton into yarn.
There's also a sprawling riverside temple from the Chalukyan age, dedicated to Lord
Mahalingeshwara that you can check out. Also located near the falls is another historical
landmark: a 210-metre long hanging wooden bridge that was originally built to help workers
across the river and arrive at work. A walk across this century-old creaking bridge is nothing
short of an adventure. People are allowed sparingly here, and it is mostly at the mercy of the
guard whether you get to walk on it or not!</section>
</pre>
</p></summary>
</details>
<a href="https://en.wikipedia.org/wiki/Gokak_Falls">wikipedia</a>
<footer>copywrite from LBB</footer>
</body>
</html>
6 Create following web page using HTML and CSS with tabular layout
Sol:
-------------------------------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;
}
#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;
}
7. Create following calculator interface with HTML and CSS
Sol:
-------------------------------HTML-------------------------------
<!DOCTYPE html>
<html>
<head>
<title> Simple Calculator </title>
<link rel="stylesheet" type="text/css" href="c.css">
</head>
<body>

<div class="calc-body">

<div class="calc-screen">
<div id="calc-operation">1234 + 567 + </div>
<div id="calc-typed">890</div>
</div>

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

PLC Lab Programs

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PLC Lab Programs

Uploaded by

Copyright:

Available Formats

Programming Assignments:

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

(ii) Create equation:

</var> <sup> 2 </sup>

(iv) Create unordered list of 5 fruits and ordered list of 3 flowers

Sol: <!DOCTYPE html>

(ii) Write the following mathematical expression by using

4. Create a class called income, and make it a background color of

The current price is 50₹ and new price is 40₹

Operating Income (or EBIT)

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

<title>my travel experience</title>

Reasons to visit Gokak Falls:

Lord Mahalingeshwara Temple, built-in Chalukya style architecture.

Kemple Park botanical gardens

<figure id ="gokak falls"></figure>

<img src ="C:/Users/ARCLAB-004/Downloads/abc.jpg" width="500" height="500">

<figure id = "chalukya architecture"></figure>

<img src="C:/Users/ARCLAB-004/Downloads/a.jpg" width="300" height"300">

<footer>copywrite from LBB</footer>

7. Create following calculator interface with HTML and CSS

<link rel="stylesheet" type="text/css" href="c.css">

<div id="calc-operation">1234 + 567 + </div>

box-shadow: 0 8px 50px -7px black;

/*Calculator Display Screen*/

border-width: 1px 1px 0px 0;

You might also like

/Calculator Display Screen/