Scribd
Upload
116 views16 pages

IWP Lab Manual

nothing

Uploaded by

ranjitha1065r
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
116 views16 pages

IWP Lab Manual

nothing

Uploaded by

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

Introduction to Web Programming

Course Title: Introduction to Web Programming


Course Code: BPLCK105A
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
1
(ii) Create equation: 𝑥 = 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
Code:
<!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">
<!--1st web program---->
<title>1st program</title>
<h1>1st program<h1>
<body>
<hr>
<!--creating a para---->
<p><b><i>All that glitters is not gold</i></b></p>
<!--creating a equation---->
<p>x=1/3(y<sub>1</sub><sup>1</sup>+z<sub>1</sub><sup>1</sup>)</P>
<p>
<style>
body {
background-image: url('c.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
</body>
<!--creating un order list---->
<ul>
<li>orange</li>
<li>mango</li>
<li>banana</li>
<li>kiwi</li>
<li>custered apple</li>
</ul>
<br>
<!--creating order list---->
<ol>
<li>rose</li>
<li>lotus</li>

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

<li>daisy</li>
</ol>
</body>
</html>

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

Code:
<!DOCTYPE htmlPUBLIC "-/W3C//DTD XHTML 1.0 Scritct//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-strict.dtd">
<html xmlns=http://www.w3.org/1999/xhtml">
<head>
<title>creting a table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align:center;
}
Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE
Introduction to Web Programming

</style>
</head>
<body>
<!--creating a table-->
<table style="width:50%">
<tr>
<th rowspan="9" style="background-color:lightblue">Department</th>
<th rowspan="3" style="background-color:purple">Sem1</td>
<td>SubjectA</td>
</tr>
<tr>
<td>SubjectB</td>
</tr>
<tr>
<td>SubjectC</td>
</tr>
<tr>
<th rowspan="3" style="background-color:purple">Sem2</td>
<td>SubjectD</td>
</tr>
<tr>
<td>SubjectE</td>
</tr>
<tr>
<td>SubjectF</td>
</tr>

<th rowspan="3" style="background-color:purple">Sem3</td>


<td>SubjectG</td>
</tr>
<tr>
<td>SubjectH</td>
</tr>
<tr>
<td>SubjectI</td>
</tr>
</table>
</body>
</html>

Output:

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

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. 𝑑 = 𝑥 2 − 𝑦 2
(iii) Redirecting current page to another page after 5 seconds using HTML5 meta tag
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag</title>
<!--Redirecting current page to another page after 5 seconds-->
<meta http-equiv = "refresh" content = "5; url = https://www.canaraengineering.in/"/>
</head>
<body>
<!--Drawing a square using SVG-->
<svg height="300" width="600">
<rect x="0" y="0" width="250" height="250" style="fill:green;stroke-width:6;stroke:brown" />
</svg>
<!--creating a link for redirecting the page--->
<body>
<p>Please follow <a href="https://www.canaraengineering.in/">this link</a>.</p>

<!--mathematical expression by using HTML5 MathML-->


<!--mn-a numeric literal and mi-identifier such as any kind of symbol or function, mo-an
operator -->
<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>
Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE
Introduction to Web Programming

</html>
</body>
</html>
Output:

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.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Travel Guide</title>
<style>
<!--aside with css-->
aside {
width:40%;
padding-left:10px;
margin-left:30px;
float:right;
font-style:italic;
background-color:aqua;
}
.down {
padding:10px;
}
<!--details element-->
details {
padding:5px;
width:200px;
background-color:grey;
border:none;
box-shadow:1px 1px 2px black;
cursor:circle;
float:left;
}

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

</style>
</head>
<body>
<main>
<h1 align="center">TOP PLACES TO VISIT IN MANGLORE
<details>
<h2>Places</h2>
<p>Panambur Beach</p>
<p>Sultan Battery</p>
<p>Pilikula NisargaDhama</p>
</details>
</h1>
<hr noshade="20px">
<!--inserting figure-->
<figure>
<img src="source " width=500 height=300>
<figcaption>Manglore</figcaption>
</figure>
<hr>
<!--creating an article-->
<article>
<header>
<h2><center>Panambur Beach</center></h2>
<figure>
<center>
<img src="source" width=500 height=300">
</center>
</figure>
<p><strong>The Panambur Beach has beautiful,mesmerizing sunset.This beach is on the shores
of Arabian sea and is credited as one of the safest and best maintained beaches of India. It is the
most popular, well connected and the most visited beach of Karnataka</strong></p>
</header>
</article>
<hr noshade="20px" color="red">
<article>
<h2><center>Sultan Battery</center></h2>
<figure>
<center>
<img src="source" width=500 height=300>
</center>
</figure>
<p><strong>This watch tower constructed in the era of the emperor Tipu Sultan such that now
the area surrounding the decaying structure is its namesake. The watch tower was constructed 15

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

years before his death in 1784 A.D. The place was previously known as Sultan's
Battery</strong></p>
</article>
<hr noshade="20px" color="red">
<article>
<h2><center>Pilikula NisargaDhama</center></h2>
<figure>
<center>
<img src="http://www.pilikula.com/images/lake_garden01.jpg" width=500 height=300>
</center>
</figure>
<p><strong>The Park where kids would enjoy and understand more about wildlife and natureAn
integrated theme park with a wide variety of features, Pilikula has many attractions of cultural,
educational and scientific interest. The park is spread over an area of 370 acres comprising of a
tropical forest and the enchanting Pilikula Lake. The project presently includes a Biological
Park, Arboretum, a Science Centre, a Lake Park with Boating Centre, a Water Amusement Park
and a Golf Course. Other features which are currently being developed include a Heritage
Village, an Ayurveda Health Therapy Centre and Tourist Cottages</strong></p>
</article>
<hr>
<footer class="down">
<p><b>Author:xxxxx</b></p>
<a href="[email protected]">Contact me here</a>
</footer>
</main>
</body>
</html>
Output:

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

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:
The current price is 50₹ and new price is 40₹
Code:
<DOCTYPE! html>
<html>
<head>
<title>Class element</title>
<style>
.income {
background-color:#0ff;
padding:10px;
border:2px solid purple;
}
.expenses {
background-color:#f0f;
padding:10px;
border:2px solid purple;
}
.profit {
background-color:#f00;
padding:10px;
border:2px solid purple;
}
</style>
</head>
<body>
<h1 class="income">INCOME</h1>
<p>income class</p>
<h1 class="expenses">EXPENSES</h1>
<p>expenses class</p>
<h1 class="profit">PROFIT</h1>
<p>profit class</p>
<p><strike>The current price is 50 &#8377;</strike><b style="color:red">new price is 40
&#8377;</b></p>
</body>
</html>
Output:

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

6. Change the tag li to have the following properties:


A display status of inline, A medium, double-lined, black border and 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
Code:
<!DOCTYPE html>
<html>
<head>
<title>Tag list</title>
<style>
li {
list-style: none;
display: inline-block;
margin:5px;
padding:10px 20px 10px 20px;
border: 5px double black;
}
</style>
</head>
<body>

<p>The ul element defines an unordered list:</p>


<ul>
<li>Coffee </li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
Output:

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

B: user defined logo


<!DOCTYPE html>
<html>
<head>
<title>User Defined Logo</title>
<style>
ul {
padding-left:1000px;
}
</style>
</head>
<body>
<h2>Unorder list</h2>
<li style="list-style-image: url('apple.gif')">Apple</li>
<li style="list-style-image: url('watermilon.jfif')">Watermelon</li>
<li style="list-style-image: url('pomo.gif')">promogranate</li>
<li style="list-style-image: url('papaya.jfif')">papaya</li>
</ul>
</body>
</html>
Output:

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

7. Create following web page using HTML and CSS with tabular layout

Code:
<!DOCTYPE html>
<html>
<head>
<title>form creation</title>
<style>
.form {
background-color: #FFB6C1;
color: black;
border: none;
margin: 20px;
padding: 20px;
width:20%;
}
</style>
<body>
<div class="form">
<h2>Sign up Today</h2>

<form action="/action_page.php">
<label for="name">Name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="password" name="password"><br>
<label for="password">Confirm password:</label><br>
<input type="password" id="password"><br>
<br>

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

<input type="submit"; style="background-color: #FFAE42; color: white; border:none;"


value="Rigister">
</form>
</div>

</body>
</html>
Output:

8. Create following calculator interface with HTML and CSS

Code:
<!DOCTYPE html>
<html>
<head>
<title>calcultor</title>
<style>
body {
background: white;
}
Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE
Introduction to Web Programming

.wrap {
width: 400px;
margin: auto;
height: auto;
background: pink;
padding: 20px;
border-radius: 10%;
}
input[type=text]{
width: 90%;
padding: 10px;
font-size: 22px;
font-weight: bold;
margin: 0px 20px 0px 0px;
border-radius: 5px;
border-radius: 10%;
}
input[type=button]{
width: 90px;
padding: 20px;
font-size: 30px;
margin-right: 3px;
font-weight: bold;
border-radius: 20%;
background: #B09B97;
}

</style>
</head>
<body>
<div class="wrap">
<form name="cal">
<input type="text" name="display">
<br><br>
<input type="button" value="(" onclick="cal.display.value+='('">
<input type="button" value=")" onclick="cal.display.value+=')'">
<input type="button" value="C" onclick="cal.display.value=' ' " id="del">
<input type="button" value="%" onclick="cal.display.value+='%'">
<br><br>
<input type="button" value="7" onclick="cal.display.value+='7'">
<input type="button" value="8" onclick="cal.display.value+='8'">
<input type="button" value="9" onclick="cal.display.value+='9'">
<input type="button" value="*" onclick="cal.display.value+='*'">
<br><br>

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE


Introduction to Web Programming

<input type="button" value="4" onclick="cal.display.value+='4'">


<input type="button" value="5" onclick="cal.display.value+='5'">
<input type="button" value="6" onclick="cal.display.value+='6'">
<input type="button" value="-" onclick="cal.display.value+='-'">
<br><br>
<input type="button" value="1" onclick="cal.display.value+='1'">
<input type="button" value="2" onclick="cal.display.value+='2'">
<input type="button" value="3" onclick="cal.display.value+='3'">
<input type="button" value="+" onclick="cal.display.value+='+'">
<br><br>
<input type="button" value="0" onclick="cal.display.value+='0'">
<input type="button" value="." onclick="cal.display.value+='.'">
<input type="button" value="/" onclick="cal.display.value+='/'">
<!-- solve function call function solve to evaluate value -->
<input type="button" value="=" onclick="cal.display.value =eval(cal.display.value)"><br>
</form>
</div>
</body>
</html>
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
Code:
<!DOCTYPE html>
<html>
<head>
<title> Scroll Text With Delay </title>
</head>
<body>
<center>
<marquee style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080"
direction="right"
scrolldelay="10" id="clickhere">Hello HTML Users(Delay : 100 Milliseconds)</marquee>
Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE
Introduction to Web Programming

<input type="button" value="Stop" onClick="document.getElementById('clickhere').stop();"/>


<input type="button" value="Start" onClick="document.getElementById('clickhere').start();"/>
</center>
</body>
</html>
Output:

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.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Overlap and Mouseover Effect</title>
<style type="text/css">
.image-container {
position: relative;
height: 100%;
width: 100%;
}
p.image1
{
position:absolute;
top:0;
left:0;
}
p.image2
{
position:absolute;
left:50px;
}
p.image3
{
position:absolute;
left:100px;
}
</style>
</head>
<body>
<div class="image-container">
<script type="text/javascript">
topLayer="img3";
Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE
Introduction to Web Programming

function mousemove(toTop)
{
document.getElementById(topLayer).style.zIndex="0";
document.getElementById(toTop).style.zIndex="1";
topLayer=toTop;
}
</script>
<p class="image1" id="img1" onmouseOver="mousemove('img1');"><img src="a.jpg"
style="width:500px;height:300px;"/></p>
<p class="image2" id="img2" onmouseOver="mousemove('img2');"><img src='b.jpg'
style="width:500px;height:300px;"/></p>
<p class="image3" id="img3" onmouseOver="mousemove('img3');"><img src='c.jpg'
style="width:500px;height:300px;"/></p>
</div>
</body>
</html>
Output:

Canara Engineering College, Mangaluru Ramesh E, Asst.Profesor Dept of ECE

You might also like