Scribd
Upload
33 views24 pages

MONALISHA

The document provides code snippets to demonstrate the use of various web technologies like HTML, CSS, XML, JavaScript and PHP. The code snippets include programs on CV display, XML DTD, XML schema, inline, internal and external CSS, CSS box model, Bootstrap components, form validation, JavaScript events, PHP functions etc.

Uploaded by

monalisha aggarwal
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
33 views24 pages

MONALISHA

The document provides code snippets to demonstrate the use of various web technologies like HTML, CSS, XML, JavaScript and PHP. The code snippets include programs on CV display, XML DTD, XML schema, inline, internal and external CSS, CSS box model, Bootstrap components, form validation, JavaScript events, PHP functions etc.

Uploaded by

monalisha aggarwal
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/ 24

NOIDA INSTITUTE OF ENGINEERING AND TECHNOLOGY

GREATER NOIDA-201306
(An Autonomous Institute)

Information Technology
Session (2023–2024)
LAB FILE
OF
WEB TECHNOLOGY LAB
(ACSE0555)
(5thSemester)

Submitted to:
Submitted by :
Ms. Rohini Sharma (Asst. Professor) Monalisha Aggarwal
(2201330139013)
Ms. Neetu Rajput (Asst. Professor)

AffiliatedtoDr.A.P.J Abdul Kalam Technical University,Uttar pradesh,Lucknow


B. TECH THIRD YEAR
Course Code ACSE0555 LT P Credit
Course Title WEB TECHNOLOGY LAB 002 1
List of Experiments:
Sr. No. Name of CO
Experiment
1. Write HTML program to display your CV in navigator, your Institute website, CO2
Department Website and Tutorial website for specific subject.
2. Write a program in XML for creation of DTD, which specifies set of rules. CO2
Create a
style sheet in CSS/ XSL & display the document in internet explorer.
3. Write a program to show the use of XML Schema. CO2
4. Write a CSS program to show use of Inline, Internal and External CSS. CO3
5. Write a program for CSS Box Model. CO3
6. Write a program to show the use of Bootstrap components and Grid System CO3
7. Write HTML program to design Registration form and Validate it using CO1,C
JavaScript. O4
8. Write JavaScript program to show the use of Dialogue Boxes i.e. Alert, Confirm CO4
and Prompt Boxes.
9. Write a program to show various types of JavaScript Events. CO4
10. Write a program in PHP to find the factorial of given number. CO5
11. Write a program in PHP to perform file handling. CO5
12. Write a PHP program to show the use of Session & Cookies. CO5
Lab Course Outcome: After completion of this course students will be able to
CO 1 Implementing the concepts and creating pages of HTML K3
CO 2 Implementing the concepts and creating HTML and XML pages. K3, K6
Implementing the concepts of CSS and Bootstrap and Creation of various types
CO 3 of style sheets. K3, K6

CO 4 Implementing JavaScript and creating Client-Side Pages with functionalities. K3, K6

Implementing the concepts of PHP and creating Server-Side Pages.


CO 5 K3, K6
INDEX
Program 1.
Write HTML program to display your CV in navigator, your Institute website,
Department Website and Tutorial website for specific subject.

Code:
<!DOCTYPE html>
<html>
<head>
<title>My CV and Websites</title>
</head>
<body>
<h1>My CV and Websites</h1>

<h2>CV</h2>
<a href="name1.html" target="_blank">View My CV</a>

<h2>Institute Website</h2>
<a href="https://www.niet.co.in/syllabus.php" target="_blank">Visit Institute Website</a>

<h2>Department Website</h2>
<a href="https://www.niet.co.in/btech-information-technology.php" target="_blank">Visit
Department Website</a>

<h2>Tutorial Website for Specific Subject</h2>


<a href="https://www.niet.co.in/syllabus.php" target="_blank">Visit Tutorial Website</a>
</body>
</html>

CV Code:- !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 style="border:rgb(5, 5, 5); border-width:5px; border-style:solid;">
<center><h1 style="background-color: rgb(43, 205, 226);">RESUME</h1> </center><img
src="https://drive.google.com/file/d/1fQNif7NvF8k1exJkTtooIBlm-WqdxQIQ/view?usp=drive_link">
<h2>Monalisha Aggarwal</h2>
Email :[email protected]<br>
Contact No. :7887342656

<h3 style="background-color: darkgrey;">OBJECTIVE</h3>


To secure a challenging position in a reputable organization to expand my learnings, knowledge,
and skills.

<h3 style="background-color: darkgrey;">EDUCATION</h3>


<ul>
<li> Pursuing B.Tech from Niet.</li>
<li> Complete Dilpona in CS Branch from MSBTE.</li>
<li> 10th Pass from CBSE Board.</li>
</ul>
<h3 style="background-color: darkgrey;">TECHNICAL SKILLS</h3>
<ul>
<li>Java</li>
<li>SQL</li>
<li>Android Development</li>
</ul>

<h3 style="background-color: darkgrey;">WORK EXPERIENCE</h3>


<ul>
<li>Fresher</li>
</ul>
<h3 style="background-color: darkgrey;">STRENGTHS</h3>
<UL>
<LI> Self-motivated</LI>
<li>Leadership</li>
<li>Strong work ethics</li>
<li>Creative</li>
</UL>
<h3 style="background-color: darkgrey;">DECLARATION</h3>
I hereby declare that all the information furnished above is true to the best of my belief.

<h3 style="background-color: darkgrey;">PLACE</h3>


Delhi

</body>
</html>
Program 2.
Write a program in XML for creation of DTD, which specifies set of rules.
Create a style sheet in CSS/ XSL & display the document in internet explorer.

Code:
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
body {
font-family: Arial, sans-serif; background-color: #f2f2f2;
}

h1 {
color: #333;
text-align: center;
}

p{
color: #666;
line-height: 1.5;
}

.note {
border: 1px solid #ccc; padding: 10px;
margin-bottom: 20px;
}

.note h2 { color: #333;


font-size: 18px;
margin-bottom: 10px;
}

.note p {
margin-bottom: 5px;
}

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<xsl:apply-templates/>

</body>
</html>
</xsl:template>

<xsl:template match="note">
<div class="note">
<h2><xsl:value-of select="heading"/></h2>
<p><strong>To:</strong> <xsl:value-of select="to"/></p>
<p><strong>From:</strong> <xsl:value-of select="from"/></p>
<p><xsl:value-of select="body"/></p>
</div>
</xsl:template>
</xsl:stylesheet>

Output:
Program 3.
Write a program to show the use of XML Schema.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Book Details</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>Book Details</h1>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
</tr>
<xsl:for-each select="books/book">
<tr>
<td><xsl:value-of select="title"/>Harry Potter and the Philosopher's Stone</td>
<td><xsl:value-of select="author"/>J.K. Rowling</td>
<td><xsl:value-of select="year"/>1997</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>}

<?xml version="1.0" encoding="UTF-8"?>


<books>
<book>
<title>Harry Potter and the Philosopher's Stone</title>
<author>J.K. Rowling</author>
<year>1997</year>
</book>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
</book>
</books>
table {
border-collapse: collapse; width: 100%;
}
th, td {
border: 1px solid black; padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
Output:
Program 4.
Write a CSS program to show use of Inline, Internal and External CSS.

Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Program</title>
<style>
/* Inline CSS */ h1 {
color: red;
font-size: 24px;
}
</style>
<style>
/* Internal CSS */ p {
color: blue; font-size: 18px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 style="color: green; font-size: 30px;">This is an example of inline CSS</h1>
<p>This is an example of internal CSS.</p>
<p>This is an example of external CSS.</p>
</body>
</html>

Output:
Program 5.
Write a program for CSS Box Model.
Code:

<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
.box {
width: 200px; height: 200px;
border: 1px solid black; padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
This is a box element.

</div>
</body>
</html>

Output:
Program 6 .
Write a program to show the use of Bootstrap components and Grid System .

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap Components and Grid System</title>
</head>
<body>
<div class="container">
<h1>Bootstrap Components and Grid System</h1>

<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a sample card with some text content.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is another sample card with some text content.</p>
<a href="#" class="btn btn-primary">Read More</a>

</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Output:
Program 7.
Write HTML program to design Registration form and validate it using
JavaScript.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
.container {
width: 400px; margin: 0 auto; padding: 20px;
border: 1px solid #ccc; border-radius: 5px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label { display: block; font-weight: bold;
margin-bottom: 5px;
}
.form-group input { width: 100%; padding: 10px;
border: 1px solid #ccc; border-radius: 5px;
}
.error-message { color: red;

font-size: 12px;
}
</style>
<script>
function validateForm() {
var name = document.forms["registrationForm"]["name"].value; var email =
document.forms["registrationForm"]["email"].value;
var password = document.forms["registrationForm"]["password"].value;
var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

if (name == "") {
alert("Name must be filled out"); return false;
}

if (email == "") {
alert("Email must be filled out"); return false;
}

if (password == "") {
alert("Password must be filled out"); return false;
}

if (confirmPassword == "") {
alert("Confirm Password must be filled out"); return false;
}

if (password != confirmPassword) { alert("Passwords do not match"); return false;


}
}
</script>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form name="registrationForm" onsubmit="return validateForm()">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
</div>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>

Output:
Program 8.
Write JavaScript program to show the use of Dialogue Boxes i.e. Alert,
Confirm and Prompt Boxes.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Dialogue Boxes</title>
<style> body {
font-family: Arial, sans-serif; text-align: center;
}
</style>
</head>
<body>
<h1>Dialogue Boxes</h1>

<script>

// Alert Box
alert("This is an alert box!");

// Confirm Box
var result = confirm("Are you sure you want to proceed?"); if (result) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}

// Prompt Box
var name = prompt("Please enter your name:"); if (name) {
alert("Hello, " + name + "!");
} else {
alert("You did not enter a name!");
}
</script>
</body>
</html>
Output:
Program 9.
Write a program to show various types of JavaScript Events.

Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Events</title>
<style>
.event {
padding: 10px;
margin-bottom: 10px; background-color: #f2f2f2; border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>JavaScript Events</h1>

<div class="event" onclick="alert('Click event')">Click Event</div>

<div class="event" onmouseover="this.style.backgroundColor='yellow'"


onmouseout="this.style.backgroundColor='#f2f2f2'">Mouseover Event</div>

<div class="event" onkeydown="console.log('Keydown event')" onkeyup="console.log('Keyup


event')">Keyboard Event</div>

<div class="event" onsubmit="alert('Submit event')">Submit Event</div>

<script>
function changeColor() {
document.getElementById("colorDiv").style.backgroundColor = "red";
}
</script>

<div class="event" onclick="changeColor()">Custom Event</div>

<div id="colorDiv" class="event">Color Div</div>


</body>
</html>

Output:
Program 10.
Write a program in PHP to find the factorial of given number.

Code:
<?php
function factorial($number) { if ($number <= 1) {
return 1;

} else {
return $number * factorial($number - 1);
}
}

$number = 5; // Change this number to calculate factorial for a different number

$factorial = factorial($number);
?>

<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #f2f2f2;
}

.container {
max-width: 500px; margin: 0 auto; padding: 20px;
background-color: #fff; border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center; margin-bottom: 20px;
}
p{
text-align: center; font-size: 18px;
margin-bottom: 10px;
}

.result {
text-align: center; font-size: 24px; font-weight: bold; color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Factorial Calculator</h1>
<p>Calculating factorial of <?php echo $number; ?>:</p>
<p class="result"><?php echo $factorial; ?></p>
</div>
</body>
</html>

Output:
Program 11.
Write a program in PHP to perform file handling.

Code:
<?php

// Open the file in read mode


$file = fopen("example.txt", "r");

// Read the contents of the file


$contents = fread($file, filesize("example.txt"));

// Close the file fclose($file);

?>

<html>
<head>
<style>
body {
font-family: Arial, sans-serif; background-color: #f2f2f2;
}

.container {
max-width: 800px; margin: 0 auto; padding: 20px;
background-color: #fff; border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
}

p{
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<div class='container'>
<h1>File Contents</h1>
<p><?php echo $contents;?></p>
</div>
</body>
</html>

Output:
Program 12.
Write a PHP program to show the use of Session & Cookies.

Code:
<?php
// Start the session session_start();

// Set a session variable


$_SESSION['username'] = 'JohnDoe';

// Set a cookie
setcookie('language', 'English', time() + (86400 * 30), '/');

// Display the session and cookie values


echo "Session Username: " . $_SESSION['username'] . "<br>"; echo "Cookie Language: " .
$_COOKIE['language'];
?>

<!DOCTYPE html>
<html>
<head>
<title>Session & Cookies Example</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #f2f2f2;
}

.container {
max-width: 500px; margin: 0 auto;
padding: 20px;
background-color: #fff; border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center; color: #333;
}

p{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Session & Cookies Example</h1>
<p>Session Username: <?php echo $_SESSION['username']; ?></p>
<p>Cookie Language: <?php echo $_COOKIE['language']; ?></p>
</div>
</body>
</html>

Output:

You might also like