NOIDA INSTITUTE OF ENGINEERING AND
TECHNOLOGY GREATER NOIDA-201306
(An Autonomous Institute)
School of Computer Sciences & Engineering in Emerging Technologies
Department of CS (SoCSET)
Session (2023 – 2024)
LAB FILE
ON
Web Technology
(ACSE-0555)
(5th Semester)
Submitted To: Submitted By:
Mr. Ajay Kumar Name: Akshit Pandey
Roll No: 2101330120007
Affiliated to Dr. A.P.J Abdul Kalam Technical University, Uttar Pradesh, Lucknow
NOIDA INSTITUTE OF ENGINEERING AND
TECHNOLOGY GREATER NOIDA-201306
(An Autonomous Institute)
School of Computer Sciences & Engineering in Emerging Technologies
Web Technology Lab (ACSE-0555)
INDEX
S.No. Name of Experiment Date Page No. Remarks
1. Implementing HTML program for Heading. 05/10/23 04
Implementing HTML program that represents the
2. 05/10/23 05
use of paragraph tag.
Implementing HTML program to display your
3. 06/10/23 06-08
simple Resume.
Creating html document that implements the use of
4. 10/10/23 09-12
text formatting tags.
To Create a table to show your class/training
5. 11/10/23 13-17
timetable.
Write HTML program to create a Registration
6. 12/10/23 18-20
Form.
7. Design a School Registration form using Table. 12/10/23 21-23
Implementation of color style in headings using
8. 13/10/23 24-25
CSS.
Demonstrating the CSS Box model with consists
9. of- borders, padding, margins, and the actual 13/10/23 26-27
content.
10. Demonstrate the use of Selectors in CSS. 13/10/23 28-29
Applying a block element in CSS acquires up the
11. 14/10/23 30
full width available for that content.
12. Demonstrate the use of Grid Layout in CSS. 14/10/23 31-34
Design an XML Schema that describes the
13. 16/10/23 35
structure of an XML document.
Design an XML document to record data of a
14. library. The XML document should have at least 5 16/10/23 36-38
records.
15. Design a HTML form validation using Java Script. 17/10/23 39-40
Implementing a Java Script program to implement
16. onClick 17/10/23 41-42
and onSubmit event.
Creating a Java Script program to implement
17. Dialog, Confirm and Message Popups Boxes. 17/10/23 43-44
Write a program in PHP to find the factorial of
18. given number. 31/10/23 45
Write a program in PHP to display the sum of two
19. numbers. 31/10/23 46
Write a program in PHP to perform file handling. 31/10/23 47
20.
Program 1
Implementing HTML program for Heading.
<!DOCTYPE html>
<html>
<head>
<title>HEADINGS</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output
Program 2
Implementing HTML program that represents the use of paragraph tag.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
<p>This is use of paragraph tag.</p>
</body>
</html>
Output
Program 3
Implementing HTML program to display your simple Resume.
<html>
<head>
<title>Resume</title>
<body leftmargin="150 px" bgcolor="pink" >
<h1 align="center"><u>Resume<b></b></u></h1>
<h2>Riya Pal</h2>
<p align="right"><b>Contact: +91 7836850054</b><br><u>Email id:
riya_pal71203@outlook.com</u><hr>
</p>
<h3><u>Career Objective:</u></h3>
<p>
To build technical skills and gain experience over it. To gather knowledge and
utilize it in a company.
</p>
<h3><u>Educational Qualification:</u></h3>
<p>
<UL>
<li>Graduation
<b>B.Tech (Computer Science)</b>
Noida Institute of Engineering and Technology(2021-2025)
</li>
<li>Senior Secondary (12th)
<b>PCM with Computer Science</b>
St. Joseph's School(2006-2021)
</li>
</UL>
</p>
<h3><u>Skills:</u></h3>
<p>
Languages Known:-
<UL TYPE="Disc">
<li>HTML</li>
<li>Java</li>
<li>Python</li>
</UL>
Speak about Terms:-
*Cloud Computing
*Artificial Intelligence
*Machine Learning
*Android Development
</p>
<h3><u>Interests:</u></h3>
<p>
<UL TYPE="Disc">
<li>Coding</li>
<li>Communication Skills</li>
<li>Creative Art</li>
</UL>
</p>
</body>
</head>
</html>
Output
Program 4.
Creating html document that implements the use of text formatting tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<caption style="color: red;"><h2>Text Formatting Tags</h2></caption>
<tr>
<th>HTML Tags</th>
<th>Output</th>
</tr>
<tr>
<td>normal text</td>
<td>hello world</td>
</tr>
<tr>
<td>Font & its attribute</td>
<td style="color: blue;"><h3>hello world</h3></td>
</tr>
<tr>
<td><B ></td>
<td><b>bold</b></td>
</tr>
<tr>
<td><I ></td>
<td><i>italic</i></td>
</tr>
<tr>
<td><U ></td>
<TD><U>Underline</U></TD>
</tr>
<tr>
<td><EM ></td>
<td> <em>Emphasis</em></td>
</tr>
<tr>
<td>< STRONG ></td>
<TD><strong>STRONG</strong></TD>
</tr>
<tr>
<td><TELETYPE ></td>
<td><tt>TELETYPE</tt></td>
</tr>
<tr>
<td><CITE ></td>
<td><cite>Citation</cite></td>
</tr>
<tr>
<td><STRIKE ></td>
<td><strike>Strike through text</strike></td>
</tr>
<TR>
<td><BIG ></td>
<td><big>text is in big font</big></td>
</TR>
<tr>
<td><SMALL ></td>
<td><small>text is in small font</small></td>
</tr>
<TR>
<td><SUB ></td>
<td>a <sub>b</sub></td>
</TR>
<tr>
<td><SUP ></td>
<td>a <sup>b</sup></td>
</tr>
</table>
</body>
</html>
Output
Program 5
To Create a table to show your class/training timetable.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Document</title>
</head>
<body>
<table border="1" align=" center">
<caption>Time Table</caption>
<tr>
<th bgcolor="Pink" colspan="6"><center>Noida Institute of Engineering &
Technology, Greater Noida</center></th>
<th bgcolor="Green" colspan="4"><center>BTech 3<super>rd</super>
Year CS</center></td>
</tr>
<tr>
<th bgcolor="Pink" colspan="6"><center>Department of AI</center></th>
<th bgcolor="Green" colspan="4"><center>SEM-V-A</center></th>
</tr>
<tr>
<th bgcolor="Pink" colspan="6"><center>Time Table ODD Semester 2023-
24</center></th>
<th bgcolor="Green" colspan="4"><center>ROOM NO. 016B</center></th>
</tr>
<tr>
<th bgcolor="Pink">Coordinator:</th>
<th bgcolor="Pink" colspan="5"><center>Noida Institute of Engineering &
Technology, Greater Noida</center></th>
<th bgcolor="Green" colspan="4"><center>BTech 3<super>rd</super>
Year CS</center></th>
</tr>
<tr>
<td>Day/Time</td>
<td><center>9:10-10:00</center></td>
<td><center>10:00-10:50</center></td>
<td><center>10:50-11:40</center></td>
<td><center>11:40-12:30</center></td>
<td><center>12:30-1:30</center></td>
<td><center>1:30-2:30</center></td>
<td><center>2:30-3:20</center></td>
<td><center>3:20-4:10</center></td>
<td><center>4:10-5:00</center></td>
</tr>
<tr>
<td rowspan="2" bgcolor="blue">MONDAY</td>
<td rowspan="10" colspan="4"><center><b>TRAINING</b></center></td>
<td rowspan="10"><center style="transform:
rotate(270deg);"><b>LUNCH</b></center></td>
<td>DAA(L)</td>
<td>CN(L)</td>
<td>COI(L)</td>
<td>MOOCs(L)</td>
</tr>
<tr>
<td>SCH</td>
<td>DRT</td>
<td>HRS</td>
<td>SBF(Lab 317)</td>
</tr>
<tr>
<td rowspan="2" bgcolor="blue">TUESDAY</td>
<td>DT(L)</td>
<td>MOOCs(L)</td>
<td colspan="2">DAA-(Lab 317)</td>
</tr>
<tr>
<td>YDS</td>
<td>SFS Lab-102</td>
<td colspan="2">SCH + MAS</td>
</tr>
<tr>
<td rowspan="2"
bgcolor="blue">WEDNESDAY</td> <td>CN(L)</td>
<td colspan="2">CN(LAB-003B)</td>
<td>DAA(L)</td>
</tr>
<tr>
<td>DRT</td>
<td colspan="2">PRP+DPN</td>
<td >SCH</td>
</tr>
<tr>
<td rowspan="2" bgcolor="blue">Thursday</td>
<td>DAA(L)</td>
<td>CN(L)</td>
<td>DAA(L)</td>
<td>DT(L)</td>
</tr>
<tr>
<td>SCH</td>
<td>DRT</td>
<td>SCH</td>
<td>YDS</td>
</tr>
<tr>
<td rowspan="3" bgcolor="blue">Friday</td>
<td >IA(Lab-102/016 B)</td>
<td >DT(L)</td>
<td colspan="2">CC Lab(Lab-102B)</td>
</tr>
<tr>
<td>YDS + RTM</td>
<td>YDS</td>
<td colspan="2">VKT+SVM</td>
</tr>
</table>
</body>
</html>
Output
Program 6
Write HTML program to create a Registration Form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script>
function myfun()
alert("Thank You");
</script>
</head>
<body bgcolor="Orange">
<table border="1" >
<img src="pro.png" alt="Logo" width="50"
height="60"> <h2>Registration Form</h2>
<form action="#" onsubmit=myfun()>
Title<select name="Title">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select><br>
<label for="f name">First Name</label><br />
<input type="text"><br>
<label for="l name">Last Name</label><br />
<input type="text"><br>
<label for="p name">Mobile No.</label><br />
<input type="Mobile No." name="Mob" Placeholder="+91"><br/>
DoB<input type="Date" id="Data" name="data"><br> Gender
<input type="radio" name="Male">Male<br>
<input type="radio" name="Female">Female<br>
State:<select name="State">
<option value="Gujarat">Gujarat</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Delhi">Delhi</option> </select><br>
Address<textarea name="Address" cols="1" rows="1"></textarea><br>
<input type="submit"name="submit"><br>
</form>
</table>
Output
Program 7
Design a School Registration form using Table.
<!DOCTYPE html>
<html>
<head>
<title>School Registration Form</title>
</head>
<body
background=https://t4.ftcdn.net/jpg/00/83/70/91/360_F_83709107_0EnUor7Bw67kgJP8XxB
GY9yUlTGeXq3N.jpg>
<h1>School Registration Form</h1>
<form>
<table>
<tr>
<td><label for="firstName">First Name:</label></td>
<td><input type="text" id="firstName" name="firstName" required></td>
</tr>
<tr>
<td><label for="lastName">Last Name:</label></td>
<td><input type="text" id="lastName" name="lastName" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td><label for="grade">Grade:</label></td>
<td>
<select id="grade" name="grade">
<option>Select</option>
<option value="1">Grade 1</option>
<option value="2">Grade 2</option>
<option value="3">Grade 3</option>
<option value="4">Grade 4</option>
<option value="5">Grade 5</option>
</select>
</td>
</tr>
<tr>
<td><label for="parentName">Parent/Guardian Name:</label></td> <td><input
type="text" id="parentName" name="parentName" required></td>
</tr>
<tr>
<td><label for="contactNumber">Contact Number:</label></td>
<td><input type="tel" id="contactNumber" name="contactNumber" pattern="[0-
9]{10}" required></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Output
Program 8
Implementation of color style in headings using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
text-align: center;
h2 {
color: rgb(187, 255, 0);
text-align: center;
h3 {
color: rgb(40, 177, 184);
text-align: center;
h4 {
color: rgb(131, 43, 122);
text-align: center;
h5 {
color: rgb(172, 176, 32);
text-align: center;
h6 {
color: rgb(189, 95, 151);
text-align: center;
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Riya Pal.</h2>
<h3>Daughter | Sister | Friend </h3>
<h4>Coder, Writer</h4>
<h5>Singer</h5>
<h6>Dancer</h6>
</body>
</html>
Output
Program 9
Demonstrating the CSS Box model with consists of- borders, padding,
margins, and the actual content.
<!DOCTYPE html>
<html>
<head>
<style>
.boxmodel {
background-color: rgb(128, 197, 59);
width: 300px;
height: 300px;
border: 1px dashed black;
padding: 25px;
margin: 30px;
.childContainer{ di
splay:flex;
justify-content: center;
align-items: center;
</style>
</head>
<body style="background-color:rgb(138, 69, 148)">
<div class="boxmodel">
<div class="childContainer" style="background-color:coral; height:100px; padding-
top:20px;">
Child Container
</div>
<p>Demonstrating the CSS Box model with consists of: borders, padding, margins,
and the actual content.
</p>
</div>
</body>
</html>
Output
Program 10
Demonstrate the use of Selectors in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 40px;
color: blueviolet;
.intro{ /* Selector - .class, here class=intro */
background-color: yellow;
font-size: 40px;
</style>
</head>
<body>
<p>
Introduction
</p>
<div class ="intro">
<p>My name is Shaurya.</p>
<p>Currently in B.Tech 4th year at NIT
Raipur.</p> </div>
</body>
</html>
Output
Program 11
Applying a block element in CSS acquires up the full width available for
that content.
<!DOCTYPE html>
<html>
<head>
<title>Block Element Example</title>
<style>
.block-element {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 10px;
/* The following properties ensure the element takes up the full width available */
display: block;
width: 100%;
box-sizing: border-box; }
</style>
</head>
<body>
<div class="block-element">
This is a block-level element. It takes up the full width available within its
containing block.
</div>
</body>
</html> Output
Program 12
Demonstrate the use of Grid Layout in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{ margin:
40px;
.wrapper
{ display:
grid; gap:
10px;
grid-template-columns: 150px 100px 150px 100px ;
grid-template-rows: repeat(3,minmax(100px,auto));
background-color: #fff;
color: #444;
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
.box .box {
background-color: #ccc;
color: #444;
.a {
grid-column: 1 / 3;
.b {
grid-column: 4 ;
.c {
grid-column: 1;
grid-row: 2 / 4;
.d{
grid-column: 2 / 5;
grid-row: 2 / 4;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">I</div>
<div class="box m">J</div>
</div>
</div>
</body>
</html>
Output
Program 13
Design a XML Schema that describes the structure of an XML document.
<?xml version="1.0" encoding="UTF-8"?>
<cllg>
<cllg_name>NIET</cllg_name>
<Name>Anirudh</Name>
<Brnch>CSE</Brnch>
<RollNo.>23</RollNo.>
<ContactNo.>98654</ContactNo.>
<Address>Delta-1, Gr. Noida</Address>
</cllg>
Output
Program 14
Design an XML document to record data of a library. The XML document
should have at least 5 records.
<?xml version="1.0" encoding="UTF-8"?>
<library>
<book>
<title>Pride and Prejudice</title>
<author>Jane Austen</author>
<publication_year>1813</publication_year>
<isbn>978-0141439518</isbn>
<genre>Fiction, Romance Novel</genre>
</book>
<book>
<title>The Alchemist</title>
<author> Paulo Coelho</author>
<publication_year>1988</publication_year>
<isbn>978-8172234980</isbn>
<genre>Novel</genre>
</book>
<book>
<title>Atomic Habits</title>
<author>James Clear</author>
<publication_year>2018</publication_year>
<isbn>978-0735211292</isbn>
<genre>Self-Help Book</genre>
</book>
<book>
<title>Half Girlfriend</title>
<author>Chetan Bhagat</author>
<publication_year>2014</publication_year>
<isbn>978-9351980353</isbn>
<genre>Fiction, Romance Novel</genre>
</book>
<book>
<title>War and Peace</title>
<author>Leo Tolstoy</author>
<publication_year>1869</publication_year>
<isbn>978-0198800545</isbn>
<genre>Classic</genre>
</book>
</library>
Output
Program 15
Design a HTML form validation using Java Script.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h1>Form Validation Example</h1>
<form id="registrationForm" onsubmit="return
validateForm()"> <label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
// Simple validation checks
if (name.trim() === "") {
alert("Name cannot be
empty"); return false;
}
if (!isValidEmail(email))
{ alert("Invalid email address");
return false;
}
if (password.length < 8)
{ alert("Password must be at least 8
characters"); return false;
}
// If all validations pass, the form is submitted
return true;
}
function isValidEmail(email) {
// A simple email validation using a regular expression
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(email);
}
</script>
</body>
</html>
Output
Program 16
Implementing a Java Script program to implement onClick and onSubmit
event.
<!DOCTYPE html>
<html>
<head>
<title>onClick and onSubmit Events
Example</title> </head>
<body>
<h1>onClick and onSubmit Events Example</h1>
<!-- Example with onClick Event -->
<h2>Click the button to change the text:</h2>
<p id="clickExample">Click me!</p>
<button onclick="changeText()">Click Me</button>
<!-- Example with onSubmit Event -->
<h2>Submit a Form:</h2>
<form id="myForm" onsubmit="submitForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"
required><br> <label for="email">Email:</label>
<input type="email" id="email" name="email"
required><br> <input type="submit" value="Submit">
</form>
<script>
// Function for onClick event
function changeText() {
var clickExample = document.getElementById("clickExample");
clickExample.innerHTML = "Button clicked!";
}
// Function for onSubmit event
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
alert("Form submitted with Name: " + name + " and Email: " + email);
}
</script>
</body>
</html>
Output
Program 17
Creating a Java Script program to implement Dialog, Confirm and
Message Popups Boxes.
<!DOCTYPE html>
<html>
<head>
<title>Popup Boxes Example</title>
</head>
<body>
<h1>JavaScript Popup Boxes Example</h1>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showConfirm()">Show Confirm</button>
<button onclick="showPrompt()">Show Prompt</button>
<script>
// Function to display an alert
box function showAlert() {
alert("This is an alert box!");
}
// Function to display a confirm box
function showConfirm() {
var result = confirm("Do you want to continue?");
if (result) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}
}
// Function to display a prompt
box function showPrompt() {
var name = prompt("Please enter your name:", "John
Doe"); if (name !== null) {
alert("Hello, " + name + "!");
}
}
</script>
</body>
</html>
Output
Program 18
Write a program in PHP to find the factorial of given number.
<?php
$num = 4;
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
echo "Factorial of $num is $factorial";
?>
Output
Program 19
Write a program in PHP to display the sum of two numbers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <title>Document</title>
</head>
<body>
<form method="post" action="">
Enter the first number: <input type="text" name="num1"><br>
Enter the second number: <input type="text" name="num2"><br>
<input type="submit" value="Add">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$num1 = $_POST["num1"];
$num2 = $_POST["num2"];
$sum = $num1 + $num2;
echo "The sum of $num1 and $num2 is: $sum";
}
?>
</body>
</html>
Output
Program 20
Write a program in PHP to perform file handling.
<!DOCTYPE html>
<html>
<body>
<?php
// reads the first line of the file and displays it.
$myfile = fopen("Demo.txt", "r") or die("Unable to open file!");
echo fgets($myfile);
fclose($myfile);
?>
</body>
</html>
Output
Demo.txt
