Dr.
Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Lab Manual
1332 CSA - 3
Web Programming - 1
[PRACTICAL ACTIVITY BOOK]
Prepared by
Dr. Vasanthi Muniasamy
Department of Computer Science,
Program: Web and Mobile Applications
Academic year-2023-2024
1
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Index Page
S. No Marks Given Date Submission Date Signature
1 2
2 2
3 2
4 2
5 2
6 2
7 2
8 2
9 2
10 2
11 2
12 2
13 2
14 2
15 2
2
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q1. Write A HTML program to describe the formatting elements.
<html>
<body>
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p> <p>This is
<del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
<p>This is <u>underline text</u>.</p>
<p>This text will be followed by a horizontal line </p>
<hr >
</body>
</html>
OUTPUT:
3
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q2. Write A HTML program to describe the orderlist.
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol>
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>
OUTPUT:
4
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q3. Write A HTML program to display the following output.
<html>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>Mohamed</td>
<td>Saudi arabia</td>
<td>Manager</td>
<td>5000</td>
</tr>
<tr>
<td>Fathima</td>
<td>Egypt</td>
<td>CEO</td>
<td>17000</td>
</tr>
<tr>
<td>Tom</td>
<td>USA</td>
<td>Photograper</td>
<td>10000</td>
</tr>
5
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
</table>
</body>
</html>
Q4. Write A HTML program to display the following output.
<html>
<body>
<label for="username">Username:</label>
<input type="text">
<br>
<br>
<label for="password">Password:</label>
<input type="password">
<br>
<br>
<label for="email">Email</label>
<input type="email">
<br>
<br>
<input type="submit">
<input type="reset">
</body>
</html>
6
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q5. Write A HTML program to create a Contact Form
OUTPUT:
7
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q6. Display your family information with background color.
OUTPUT:
8
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q7. Design a web page to display the table with hyperlinks.
9
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
OUTPUT:
Q8. Write A HTML program to describe the formatting elements.
<html>
<body>
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
<p>This is <u>underline text</u>.</p>
</body>
</html>
OUTPUT:
10
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q9. Write JavaScript program to create a function named mul which take two
parameters (n1, n2) and return the multiplication of two numbers.
<html>
<body>
<script>
function mul(n1, n2)
{
return n1 * n2;
}
var r = mul(5,3);
document.write(r);
</script>
</body>
</html>
OUTPUT:
11
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q10. Write a JavaScript program to perform the arithmetic operations: addition (+),
subtraction (-), multiplication (*) and division (/)
<html>
<body>
<script>
var a = 20;
var b = 10;
var c;
c = a + b;
document.write("<br> a + b = " + c );
c = a - b;
document.write("<br>a - b = " + c );
c = a * b;
document.write("<br>a * b = " + c );
c = a / b;
document.write("<br>a / b = " + c );
12
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
</script>
</body>
</html>
OUTPUT:
Q11. Write JavaScript program to print number from (1-15) using for loop.
<html >
<body>
<script>
var n;
for (n = 1; n <= 15; n++)
{
document.write(n + "<br>");
}
</script>
</body>
</html>
OUTPUT:
13
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q12. Write a CSS program to give a shadow effect on Text.
<style>
p{
text-shadow: 1px 1px 10px green;
color: white;
font-size: 8vw;
}
</style>
<p>King Khalid University </p>
OUTPUT:
14
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
Q13. Write a CSS program to display different text decorations.
<html>
<body>
<p style="text-decoration: underline;">Text is underline decorate</p>
<p style="text-decoration: overline;">Text is overline decorate</p>
<p style="text-decoration: blink;">Text is blink decorate</p>
<p style="text-decoration: line-through">Text is line delete decorate</p>
<p style="text-decoration: none;">Text is nothing any decorate value</p>
</body>
</html>
15
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
OUTPUT:
Q14. Write a CSS program to display different border style.
<style>
div {
border-color: gold;
border-width: thick;
height: 4.5vh;
margin: 4vh;
}
.a {
border-style: solid;
}
.b {
border-style: dotted;
}
.c {
border-style: dashed;
}
16
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
.d {
border-style: double;
}
</style>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
OUTPUT:
Q15. Write a CSS program to display different border color.
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
17
Dr. Vasanthi Muniasamy, Department of Computer Science, Al-Mahala Female Campus
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
</body>
</html>
OUTPUT:
18
