Scribd
Upload
50 views

Web Tech

Uploaded by

mishravaibhav570
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views

Web Tech

Uploaded by

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

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>&lt;B &gt;</td>

<td><b>bold</b></td>

</tr>

<tr>
<td>&lt;I &gt;</td>

<td><i>italic</i></td>

</tr>

<tr>

<td>&lt;U &gt;</td>

<TD><U>Underline</U></TD>

</tr>

<tr>

<td>&lt;EM &gt;</td>

<td> <em>Emphasis</em></td>

</tr>

<tr>

<td>&lt; STRONG &gt;</td>

<TD><strong>STRONG</strong></TD>

</tr>

<tr>

<td>&lt;TELETYPE &gt;</td>

<td><tt>TELETYPE</tt></td>

</tr>

<tr>

<td>&lt;CITE &gt;</td>

<td><cite>Citation</cite></td>

</tr>

<tr>

<td>&lt;STRIKE &gt;</td>

<td><strike>Strike through text</strike></td>

</tr>
<TR>

<td>&lt;BIG &gt;</td>

<td><big>text is in big font</big></td>

</TR>

<tr>

<td>&lt;SMALL &gt;</td>

<td><small>text is in small font</small></td>

</tr>

<TR>

<td>&lt;SUB &gt;</td>

<td>a <sub>b</sub></td>

</TR>

<tr>

<td>&lt;SUP &gt;</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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy