Web Technology (BCSEOSSS) Lab Manual

NOIDA INSTITUTE OF ENGINEERING &

TECHNOLOGY, GREATER NOIDA
(An Autonomous Institute)

Branch: Department of Information Technology

Semester: Vth (3rd Year)

LAB FILE
Web Technology Lab (BCSE0555)

(Academic Session: 2025-26)

NOIDA INSTITUTE OF ENGINEERING & TECHNOLOGY
19, KNOWLEDGE PARK-II, INSTITUTIONAL
AREA, GREATER NOIDA, (U. P.) - 201 306, INDIA

DEPARTMENT OF INFORMATION TECHNOLOGY

Session: 2025-26(Odd Semester)

Submitted By Submitted to

Information Technology, NIET Gr. Naida

 LIST OF PROGRAMS
Name : Agam Raj Subject Code:
Session
BCSE0555
Branch: IT- A
2025-
Roll no: 2301330130019 Semester : 5th 26

LIST OF PROGRAMS (BCSE0555)

sr. No. Name of Experiment Date of Experiment Grade Teacher's Remark I
Signature
1. Implementing HTML program that
represent in the document as a start
tag, which gives the name and
attributes
2. Implementing HTML program that
represents a document

3. Implementing HTML program to

display your simple CV

4. Creating html document that

represents document object model

5. To Create a table to show your class

time table.

6. Implementing HTML program that for

Heading

7. Implementing program that implement

paragraph and line-break

8. Use tables to provide layout to your

HTML page describing your college
infrastructure.
9. Use <span> and <div> tags to provide a
layout to the above page instead of a
table layout
10. Apply various colors to suitably
distinguish keywords, also apply font
styling like italics, underline and two
other fonts to words you find
appropriate, also use header tags.

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

11. Change the background color of the

page; At the bottom create a link to
take user to the top of the page.
12. Use frames such that page is divided
into 3 frames 20% on left to show
contents of pages, 60% in center to
show body of page, remaining on
right to show remarks.
13. Design a HTML registration form that
takes user name, user password and
mobile number with submit button
control
14. Design a HTMLS document that
implement of date, number, range,
email, search and data list.
15. Implementation in HTMLS that
include native audio and video
support without the need for Flash.

16. Creating HTML program to implement

three articles with independent, self
contained content
17. Creating a XML document that defines
the self-descriptive tags

19. Designing XML document that store

various book data such as: book
category, title, author, year and price

20. To Describe the various types of

XML key components

21. Design XML DTD to define the

structure and legal element and
attribute of XML document
22. To implement internal and external
DTD

23. Design a XML Schema that describes

the structure of an XML document

24. Design a XML document that

describe the well-formed XML
document

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

25. Design a XML document of CD Catalog

through each <CD> element, and
displays the values of the <ARTIST>
and the <TITLE> elements in an HTML
table
26. 28 Create a XSL document for
and taken xml document by you.

27. Create a XSLT document for and

taken xml document by you with all
steps
28. Create a simple form to submit user
input like his name, age, address and
favourite subject, movie and singer.
29. Add few form elements such as radio
buttons, check boxes and password
field. Add a submit button at last.
30. Add CSS property assign a style or
behavior to an HTML element such as:
color, border, margin and font-style.
31. Add To Style Text Elements with Font,
Size, and Color in CSS

32. Applying a block element in CSS

acquires up the full width available for
that content.
33. Resize an image to fit its content box,
and position the image Spx from the
left and 10% from the top inside the
content box.s
34. Applying CSS Table: Styling even and
odd cells

35. Applying list-style-type property in

CSS with example

36. Design a web page by

applying css id and
class selectors

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

37. Design a web page by applying css id

and class selectors

38. Demonstrating the CSS Box model

which consists of: borders, padding,
margins, and the actual content.
38. Design a web page by applying CSS
grouping and dimensions property.

39. Design a web page by applying CSS

Display and Positioning property.

40. Design a web page showing the use of

inline, internal and external CSS.

41. Design a web page by applying CSS

pseudo classes.

42. Design a web page by applying CSS

Navigation Bar.

43. Design a web page such as home

page, contact us, about us etc. by
using 3 ways of CSS layout

43. Design a basic structure of Bootstrap

Grid system.

44. Design All Bootstrap Components

with example.

45. Creating a Java Script code to

implement all data types.

46. Creating a java script code to

implement 'var' keyword

47. Implementing a Java Script program

to implement onSelect and onload
event
48. Implementing a program in Java
Script to create array by using array
literal, creating instance and array
constructor.
49. Implementation of while, do-while
and for loop

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

50. Creating a Java Script program to

implement Dialog, Confirm and
Message Popup Boxes.
51. Implementing a Java Script program
to implement onClick and onSubmit
event
52. Creating a java script code to
implement 'let' keyword
54. Creating a java script code to
implement 'const' keyword
55. Implementing a program in Java
Script to create object by using object
literal, creating instance and object
constructor.
56. Implementing a program in Java script
to implement augmented function.
57. Implementing a program to
implement calculator application as
real time.
58. Design a HTML form validation using
Java Script.
59. Write a program to implement Arrow
function with default argument in ES6
60. Implementing a program to
implement call back functions in ES6.
61. Implementing a program for de
structuring of an array in ES6
62. Implementing a code in Java Script to
implement Spread and rest operator
63. Javascript code that should compile
by Typescript compiler as'tsc'
64. Implementing a program in ES6 to
implement Template string concepts

65. Implementing a program in ES6 to

implement all string methods.

67. Write a Typescript program that

implement interface and constructor
68. Write a code in typescript that
implement decorator and spread
operator
69. Write a code in typescript that
implement Asynchronous
Programming concepts.

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

70. Write a program in Typescript that

implement promise constructor
71. Implementing promise and chain
concepts in Typescript
72. Write a code in typescript that
implement [Link]() static
method.
73. Create a constant by using define()
function with its proper syntax
74. Creating PHP scriptthat return any
data types whatever you use.
75. Crating a program that implement
control flow and decision making
statement.
76. Creating PHP to implements
parameterized function
77. Creating program in PHP to store
multiple string and concatenate these
string and print it.
77. Implements single dimension array in
PHP
78. Write a PHP code to open and close a
file in a proper manner
79. Write a PHP script to copying,
renaming and deleting a file.
80. Write a PHP script to create and
delete directory structure
81. Program to upload and download a
file in PHP
82. PHP program to create and destroy a
session.
83.. PHP program to set and delete a
cookie.
84. PHP program to manually register the
session variable

85. PHP program to manually destroy the

session variable

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

86. PHP program to store the session

data on one page and would be
available on second page.

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

1. Implementing HTML program that represent in the document as a start tag, which gives the
name and attributes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Question1</title>
</head>
<body>
<div>
<hl>Welcome to first HTML code.</hl>
<h2>This is used for subheading.</h2>
<h3>This is 3rd largest heading!</h3>
<h4>This is 4th largest heading!</h4>
<hS>This is 5th largest heading!</hS>
<h6>Smallest heading! !</h6>
</div>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

2. Implementing HTML program that represents a document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>HTML Document</title>
</head>
<body>

<header>
<hl>Welcome</hl>
</header>

<main>
<h2>About the Page</h2>
<p>This is a simple HTML document that includes basic elements like a header, main content area,
and footer. It demonstrates the fundamental structure of an HTML page.</p>
<p>You can add more content here, such as images, links, and lists.</p>
</main>

<footer>
<p>&copy; Website</p>
</footer>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

3. Implementing HTML program to display your simple CV.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Simple CV</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 lOpx rgba(0, 0, 0, 0.1);
}
hl, h2 {
color: #333;
}
hl {
text-align: center;
color: #444;
}
hr{
border: 0;
height: lpx;
background: #ccc;
margin: 20px 0;
}
.section-title {
margin-bottom: l0px;
font-weight: bold;
text-transform: uppercase;
color: #555;
}
</style>
</head>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

<body>
<div class="container">
<hl>Anushka Tiwari</hl>
<p><strong>Email:</strong> xyz@[Link] I <strong>Phone:</strong> 355 477
566</p>
<p><strong>Location:</strong>Address</p>
<hr> <div>
<h2 class="section-title">Education</h2>
<ul> <Ii>
<strong>Bachelor of Science in Computer Science</strong> <br>
University of Example, 2022 - 2026
</Ii> <Ii>
<strong>High School Diploma</strong> <br>
Example High School, 2020 - 2022
</Ii> </ul> </div> <hr> <div>
<h2 class="section-title">Work Experience</h2>
<ul>
<Ii>
<strong>Software Developer</strong> <br>
Tech Company, Anytown, 2026 <br>
<em>Responsibilities:</em> Developed web applications, managed databases,
and collaborated with teams to implement software solutions.
</Ii>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

4. Creating html document that represents document object model.

Document
I+-- html
I +-- head I
I I +-- title I I
I +-- "Page Title" I +-- body I +-- hl I
I I +-- "This is a heading" I +-- p I
I I+-- "This is a paragraph." I+-- a(href: "[Link] I

5. To create a table to show your class time table.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Document</title>
<style>
.day
{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
.period
{
text-align:center;
font-family: Arial, Helvetica, sans-serif;
padding-left:lOOpx;
border-collapse: collapse;
}
.head
{
justify-content: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
}
.tab
{
text-align: center;
font-style: oblique;

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

</style>
</head>
<body>
<hl class="head">Time Table</hl>
<table border="2" class="tab">
<tr>
<th class="day">Day/Period</th>
<th>l<br>9:30-10:20</th>
<th>ll<br>10:20-11:10</th>
<th>lll<br>ll:10-12:00</th>
<th>l2:00-12:40</th>
<th>IV<br>12:40-01:30</th>
<th>V<br>0l:30-02:20</th>
<th>Vl<br>02:20-03:10</th>
<th>Vll<br>03:10-04:00</th>
</tr>
<tr>
<td class="day">Monday</td>
<td class="Period">Eng</td>
<td class="Period">Math</td>
<td class="Period">Chem</td>
<td class="Period" rowspan="6"></td>
<td class="Period"colspan="3">LAB</td>
<td class="Period">Phy</td>
</tr> <tr>
<td class="day">Tuesday</td>
<td class="Period" colspan="3">LAB</td>
<td class="Period">Eng</td>
<td class="Period">Chem</td>
<td class="Period">Math</td>
<td class="Period">Sports</td>
</tr> <tr>
<td class="day">Wednesday</td>
<td class="Period">Mat</td>
<td class="Period">Phy</td>
<td class="Period">Eng</td>
<td class="Period">Che</td>
<td class="Period" colspan="3">Library</td>
</tr> <tr>
<td class="day">Thursday</td>
<td class="Period">Phy</td>
<td class="Period">Eng</td>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

<td class="Period">Chem</td>
<td class="Period" colspan="3">LAB</td>
<td class="Period">Mat</td>
</tr> <tr>
<td class="day">Friday</td>
<td class="Period" colspan="3">LAB</td>
<td class="Period">Mat</td>
<td class="Period">Che</td>
<td class="Period">Eng</td>
<td class="Period">Phy</td>
</tr>
<tr>
<td class="day">Satday</td>
<td class="Period">Eng</td>
<td class="Period">Chem</td>
<td class="Period">mat</td>
<td class="Period" colspan="3">Seminar</td>
<td class="Period">Sports</td>
</tr>
</table>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

6. Implementing program that implement paragraph and line-break.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Question 6</title>
</head>
<body>
<hl>Paragraph and Line Break</hl>
<p>This is the first paragraph. It contains some text to demonstrate how paragraphs are used
in HTML.</p>
<p>This is the second paragraph. HTML paragraphs are block-level elements, which
means they start on a new line and have some space before and after them.</p>
<p>This is the third paragraph. You can also use line breaks to control where the text moves
to a new line.</p>
<p>This sentence ends here,<br>and this sentence starts on a new line because of the line
break.</p>
<p>Another example of a line break:<br>Here is the text on the new line.</p>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

7. Implementing HTML program that for Heading.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Question</title>
</head>
<body>
<div class="containerl">
<hl>Welcome to first HTML code.</hl>
<h2>This is used for subheading.</h2>
<h3>This is 3rd largest heading!</h3>
<h4>This is 4th largest heading!</h4>
<hS>This is 5th largest heading!</hS>
<h6>Smallest heading! !</h6>
</div>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

8. Use tables to provide layout to your HTML page describing your college infrastructure.

<!DOCTYPE html>
<html lang="en">
<head>
<title>College lnfrastructure</title>
</head>
<body>
<hl>College Infrastructure Overview</hl>
<table border="l" cellpadding="l0" cellspacing="0">
<tr>
<th>Section</th>
<th>Description</th>
</tr>
<tr>
<td>Library</td>
<td>The college library is equipped with thousands of books, journals, and e-resources. It
provides a quiet space for study and research.</td>
</tr>
<tr>
<td>Laboratories</td>
<td>State-of-the-art labs for Physics, Chemistry, Biology, and Computer Science provide
practical experience and hands-on learning.</td>
</tr>
<tr>
<td>Classrooms</td>
<td>AII classrooms are spacious, well-ventilated, and equipped with modern teaching
aids like projectors and smart boards.</td>
</tr>
<tr>
<td>Sports Facilities</td>
<td>Our campus includes a gymnasium, football field, basketball court, and indoor sports
facilities to encourage physical fitness and sportsmanship.</td>
</tr>
<tr>
<td>Hostel</td>
<td>The college hostel provides comfortable accommodation with all essential amenities,
ensuring a home-like environment for students.</td>
</tr>
<tr>
<td>Cafeteria</td>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

<td>The cafeteria offers a variety of healthy and tasty food options, catering to diverse
tastes and dietary requirements.</td>
</tr>
</table>

</body>
</html>

:. 1/1:1 College lntr,ssbucture X + ci'

0
0 127 0.0.1 5SOO/a1<i nmeel/quesa hlml 0.. A' 0

College Infrastructure Overview

C'Lli.!mt:lm! AU [Link]'D:S an! !1',111!'°'1!1. 'l.\ J.l!.\![Link]. 11!1.C! fqll[fped 'll.1[1.!1modt!l'II !i:![Link]:f llld1lll:t! pttiJertor.1 aJltl.!mot ltCrardl..

Sp«IJ FIJciliti Owtll,IJJpl9 iocJL1liel; ■ i)'[Link]:lu.m. (tl<llblU fie:ltl, bllf!_ tt:iitl.l,ca,111,. •ltd itldni.'!r:tparl!! l]i1iie, fool!fWl:l0\11:l,P.i!- pll)•s;ir:tl [itlld$ ptt odlip.

Ho!.ttl TtWi coUt-gt M!tel llt\Wldt-! comfill'Ulble IU' [Link] «lri ...,,[tb [Link] !:::Wfillil atu l!lkia ffl3Utln.(!! 1 llkif;,ci:\•lr<lmru!at for ,mdtttt:t.

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

9. Use <span> and <div> tags to provide a layout to above page instead of a table layout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>College lnfrastructure</title>
</head>
<body>
<hl>College Infrastructure Overview</hl>
<div style="margin-bottom: 20px;">
<div style="font-weight: bold;">Library</div>
<div>The college library is equipped with thousands of books, journals, and e-resources. It
provides a quiet space for study and research.</div>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

10. Apply various colours to suitably distinguish keywords, also apply font styling like
italics, underline and two other fonts to words you find appropriate, also use header
tags.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Quesl0</title>
</head>
<body>

<hl style="color: darkblue; font-family: 'Arial', sans-serif;">College Infrastructure

Overview</h1>
<div style="margin-bottom: 20px;">
<h2 style="color: green;">Library</h2>
<p>The college <span style="color: blue; font-style: italic;">library</span> is equipped with
<span style="text-decoration: underline; color: red;">thousands of books</span>,
journals, and e-resources. It provides a quiet space for study and research.</p>
</div>

</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

11. Create a webpage with HTML describing your department use paragraph and list tags.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.tag
{
position:relative;
border-image: round;
border-radius: 4cm;
margin-top: l0px;
margin-left: 400px;
margin-right: lO0px;
}
.head
{
text-align:center;
font-family:'Courier New', Courier, monospace;
color: rgb{32, 118, 65);
}
</style>
</head>
<body>
<nav>
<img src="[Link]" height="250" width="400" class="tag">
<h3 class="head">Friendship Zone</h3>
<hS>A place to find like minded people......</hS>
<p>
<quote>One of the most beautiul qualities of true friendship is to undertand and to be
understood.</quote>
</p>
<pre> A real friend is one who Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Delectus sed a laboriosam, ilia quas explicabo, aut autem vero sunt ea suscipit earum, sint porro
incidunt odio perferendis! Quo, nam deleniti.</pre>
<hr>
<ul>
<li><a href="[Link]">Click to Search Friends</a></li>
<li><p>Send for your suggestions. <a
href="[Link]">Support@[Link]</a></p></li>
</ul>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

</body>
</html>

Frie dlh!p ZM!

•Cld•loobl!K141
,S!n,lf )tllrlll!Jolioa!. -

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

12. Create links on the words e.g. -WIFI and -LAN to link them to Wikipedia pages.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Networking lnformation</title>
</head>
<body>

<hl>Networking lnformation</hl>

<p>Our college provides comprehensive networking infrastructure to support our academic

and administrative activities. Key components include:</p>
<ul>
<li><a href="[Link] target="_blank">WIFl</a> -Wireless
network access throughout the campus.</li>
<li><a href="[Link] target="_blank">LAN</a> - Local area
network connectivity within buildings.</li>
</ul>

</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

13. Insert an image and create a link such that clicking on images takes user to other page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Delicious Foods Around the World</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; }
article { margin: 20px; padding: 15px; background: #f9f9f9; border: lpx solid #ddd;}
hl { color: #333; }
img { max-width: 100%; height: auto; border: lpx solid #ddd; }
</style>
</head>
<body>
<article>
<hl>Delicious Food</hl>
<p><a href="[Link]," target="_blank">
<img src="[Link]" alt="Delicious Food">
</a></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quas quisquam cum
eveniet nostrum corporis aperiam dolor iure possimus unde.</p>
<h2>Traditional Foods</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hie temporibus ipsam sit.
Eligendi temporibus, sapiente quae cumque quia quam nostrum?</p>
<h2>Famous Food</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus autem itaque quos
perferendis qui unde cumque blanditiis magnam maiores voluptatibus?</p>
</article>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

14. Change the background color of the page; At the bottom create a link to take user to the top of
the page.

<!DOCTYPE html>
<html>
<head>
<title>quesl4</title>
<style>
body{
background-color: #f2f2f2;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
display: none;}
#backToTop a
{ background-color:
#333; color: white;
padding: lOpx 15px;
text-decoration: none;
border-radius: 5px;}
#backToTop a:hover
{ background-color:
#555;}
</style>
<script>
[Link] = function()
{ scrollFunction() };
function scrollFunction() {
if ([Link] > 20 11 [Link] > 20)
{ [Link]("backToTop").[Link] = "block";
} else {
[Link]("backToTop").[Link] = "none";}
}
function scrollToTop()
{ [Link] = 0;
[Link] = 0;}
</script>
</head>
<body>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

<hl>Background Color and Back to Top</hl>

<p>Click here!!!</p>
<div id="backToTop">
<a href="javascript:void(O};" onclick="scrollToTop(}">Back to Top</a>
</div>
</body>
</html>

[(fJ tr:] I [') College Infra X I [') Ques10 X I [') Document X I [') Networking X I
Ci CD [Link]:5500/assignment/[Link]

Background Color and Back to Top Example

This is a sample content on the page.

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

[Link] frames such that pages is divided into 3 frames 20% on left to show contents of pages,
60% in centre to show contents of pages.

<!DOCTYPE html>

<html>

<head>

<title>Frame Example</title>

</head>

<frameset cols="20%, 60%, *">

<frame name="contents" src="[Link]">

<frame name="body" src="[Link]">

<frame name="remarks" src="[Link]">

</frameset>

</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

16. Design a HTML registration form that takes user name, user password and mobile number with
submit button control.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Registration Form</title>
<style>
.tag
{
position:relative;
border-image: round;
border-radius: 4cm;
margin-top: lOpx;
margin-left: 400px;
margin-right: lO0px;
}
.head
{
text-align:center;
font-family:'Courier New', Courier, monospace;
color: rgb(32, 118, 65);
}
</style>
</head>
<body>
<img src="[Link]" height="250" width="400" class="tag">
<h3 class="head">Friendship Zone</h3>
<h4>Add your details tp register</h4>
<nav>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Age: <input type="number" name="name"><br><br>
Birth Day: <input type="datetime-local" name="dob"><br><br>
Gender: <input type="checkbox">M
<input type="checkbox">F
<br><br>
About: <textarea rows="3" cols="30" aria-valuemax="200"></textarea>
<br><br>
Phone: <input type="number" aria-valuemax="l0"><br><br>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

<br>
<hS>lnterested in:</hS>
<input type="checkbox">Friendship
<input type="checkbox">Dating
<br><br>
<b>Attachemnt:</b>
<input type="file" name="file">
<br><br>
<a href="[Link]"><input type="submit" value="Register"></a>
<a href="[Link]"><input type="subm it" value="Register to
admin"></a>
</nav>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

17. Design a HTMLS document that implement of date, number, range, email, search and data list.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.0">
<title>Quesl7</title>
</head>
<body>
<hl>Form :</hl>
<form>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br>
<label for="number">Number:</label>
<input type="number" id="number" name="number" min="l" max="l0"><br>
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="l00" value="S0"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="search">Search:</label>
<input type="search" id="search" name="search"><br>
<label for="datalist">Fruit:</label>
<input list="fruits" id="datalist" name="datalist">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist><br>
<button type="submit">Submit</button>
</form>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

18. Implementation in HTMLS that include native audio and video support without the need for Flash.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTMLS Audio and Video</title>
</head>
<body>
<hl>HTMLS Audio and Video display</hl>
<h2>Audio</h2>
<audio controls>
<source src="audiol.mp3" type="audio">
Your browser does not support the audio element.
</audio>
<h2>Video</h2>
<video controls width="600">
<source src="file1.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

19. Creating HTML program to implement three articles with independent, self-contained content.

<!DOCTYPE html>
<html>
<head>
<title>Three Articles</title>
<style>
body{
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.article {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color:
#ffffff; border-radius:
8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="article">
<h2>Article 1: Introduction to HTML</h2>
<p>HTML (HyperText Markup Language) is the standard markup language for creating web pages. It
structures content using elements such as headings, paragraphs, lists, and links.</p>
</div>

<div class="article">
<h2>Article 2: CSS Basics</h2>
<p>CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages. It
allows you to apply styles like colors, fonts, spacing, and positioning to HTML elements.</p>
</div>

<div class="article">
<h2>Article 3: JavaScript Fundamentals</h2>
<p>JavaScript is a versatile programming language that adds interactivity and dynamic behavior to
web pages. It can be used to create animations, validate forms, and manipulate the DOM.</p>
</div>
</body>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

</html>

Article 1: Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It
structures content using elements such as headings, paragraphs, lists, and links.

Article 2: CSS Basics

CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages. It allows you to apply
styles like colors, fonts, spacing, and positioning to HTML elements.

Article 3: JavaScript Fundamentals

JavaScript is a versatile programming language that adds interactivity and dynamic behavior to web pages. It
can be used to create animations, validate forms, and manipulate the DOM.

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

20. Creating a XML document that defines the self-descriptive tags.

11
<?xml version="l.0" encoding="UTF-8 ?>
<CV>
<Info>
<Name>John Doe</Name>
<Email>john@[Link]</Email>
<Phone>123-456-7890</Phone>
</Info>
<Education>
<School>
<Degree>Bachelor</Degree>
<Major>Computer Science</Major>
<Year>2022</Year>
</School>
<School>
<Degree>Master</Degree>
<Major>Software Engineering</Major>
<Year>2024</Year>
</School>
</Education>
<Skills>
<Skill>Java</Skill>
<Skill>Python</Skill>
<Skill>HTML</Skill>
<Skill>CSS</Skill>
</Skills>
</CV>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

21. Designing XML document that store various book data such as: book category, title, author, year
and price.

<?xml version="l.O" encoding="UTF-8"?>

<Companies>
<Company>
<Name>Tata Consultancy Services</Name>
<Location>Mumbai</Location>
<lndustry>IT Services</lndustry>
</Company>
<Company>
<Name>lnfosys</Name>
<Location>Bengaluru</Location>
<lndustry>IT Services</lndustry>
</Company>
<Company>
<Name>Reliance lndustries</Name>
<Location>Mumbai</Location>
<lndustry>Conglomerate</lndustry>
</Company>
<Company>
<Name>Wipro</Name>
<Location>Bengaluru</Location>
<lndustry>IT Services</lndustry>
</Company>
</Companies>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

22. To Describe the various types of XML key components.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
font-family: Arial, sans-
serif; line-height: 1.6;
padding: 20px;
}
h2 {color: #333;}
ul { list-style-type: square;}
</style>
</head>
<body>
<hl>XML</hl>
<ul>
<li><strong>Elements:</strong> The building blocks of an XML document, defined by start
and end tags. Example: <code>&lt;name&gt;John&lt;/name&gt;</code>.</li>
<li><strong>Attributes:</strong> Provide additional information about elements and are
included within the start tag. Example: <code>&lt;person age="30"&gt;</code>.</li>
<li><strong>Prolog:</strong> The first line in an XML document that includes the XML
declaration. Example: <code>&lt;?xml version="l.0" encoding="UTF-8"?&gt;</code>.</li>
<li><strong>Comments:</strong> Notes or explanations within an XML document that are
not processed. Example: <code>&lt; !-- This is a comment --&gt;</code>.</li>
<li><strong>CDATA Sections:</strong> Used to include content that should not be parsed
by the XML parser. Example: <code>&lt;![CDATA[Some content here]]&gt;</code>.</li>
</ul>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

23. Design XML DTD to define the structure and legal element and attribute of XML document

<!DOCTYPE library [
<!-- Define the book element-->
<!ELEMENT book (title, author, year, genre?, price?)>
<!-- Define the title, author, year, genre, and price elements-->
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT genre (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!-- Define the isbn attribute for the book element-->
<!ATTLIST book isbn CDATA #REQUIRED>
<!-- Define the language attribute for the book element-->
<!ATTLIST book language (English I Spanish I French I German) "English">
<!-- Define the publisher attribute for the book element-->
<!ATTLIST book publisher CDATA #IMPLIED>]>

24. To implement internal and external DTD.

Internal DTD :-
<?xml version="l.0" encoding="UTF-8"?>
<!DOCTYPE companies [
<!ELEMENT companies (company+)>
<!ELEMENT company (name, industry, headquarters)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT industry (#PCDATA)>
<!ELEMENT headquarters (#PCDATA)>
]>
<companies>
<company>
<name>Tata Consultancy Services</name>
<industry>IT Services</industry>
<headquarters>Mumbai</headquarters>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

</company>
<company>
<name>Reliance lndustries</name>
<industry>Conglomerate</industry>
<headquarters>Gujarat</headquarters>
</company>
<company>
<name>lnfosys</name>
<industry>IT Services</industry>
<headquarters>Bangalore</headquarters>
</company>
</companies>

External DTD :
(DTD File)
<!ELEMENT companies (company+)>
<!ELEMENT company (name, industry, headquarters)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT industry (#PCDATA)>
<!ELEMENT headquarters (#PCDATA)>
(XML File)
<?xml version="l.0" encoding="UTF-8"?>
<!DOCTYPE companies SYSTEM "[Link]">
<companies>
<company>
<name>Tata Consultancy Services</name>
<industry>IT Services</industry>
<headquarters>Mumbai</headquarters>
</company>
<company>
<name>Reliance lndustries</name>
<industry>Conglomerate</industry>
<headquarters>Gujarat</headquarters>
</company>
<company>
<name>lnfosys</name>
<industry>IT Services</industry>
<headquarters>Bangalore</headquarters>
</company>
</companies>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

25. Design a XML Schema that describes the structure of an XML document.
([Link])
<?xml version="l.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="[Link]
<!-- Define the root element-->
<xs:element name="states">
<xs:complexType>
<xs:sequence>
<xs:element name="state" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="capital" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
(XML File)
<?xml version="l.0" encoding="UTF-8"?>
<states xmlns:xsi="[Link] LSchema-insta nee"
xsi:noNamespaceSchemalocation="[Link]">
<state>
<name>Maharashtra</name>
<capital>Mumbai</capital>
</state>
<state>
<name>Karnataka</name>
<capital>Bangalore</capital>
</state>
<state>
<name>Tamil Nadu</name>
<capital>Chennai</capital>
</state>

</states>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

26. Design a XML document that describe the well-formed XML document.

<?xml version="l.0" encoding="UTF-8"?>

<company>
<employee id="101">
<name>John Doe</name>
<position>Software Engineer</position>
<department>Engineering</department>
<salary>80000</salary>
</employee>
<employee id="102">
<name>Jane Smith</name>
<position>Marketing Manager</position>
<department>Marketing</department>
<salary>75000</salary>
</employee>
</company>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

27. Design a XML document of CD Catalog through each <CD> element, and displays
the values of the <ARTIST> and the <TITLE> elements in an HTML table.

?xml version="l.0" encoding="UTF-8"?>

<CD_catalog>
<CD>
<ARTIST>Michael Jackson</ ARTIST>
<TITLE>Thriller</TITLE>
</CD>
<CD>
<ARTIST>The Beatles</ARTIST>
<TITLE>Abbey Road</TITLE>
</CD>
<CD>
<ARTIST>Queen</ARTIST>
<TITLE>A Night at the Opera</TITLE>
</CD>
</CD_catalog>

28. Create a XSL document for and taken xml document by you.
?xml version="1.0" encoding="UTF-8"?>
<CD_catalog>
<CD>
<ARTIST>Michael Jackson</ARTIST>
<TITLE>Thriller</TITLE>
</CD>
<CD>
<ARTIST>The Beatles</ARTIST>
<TITLE>Abbey Road</TITLE>
</CD>
<CD>
<ARTIST>Queen</ARTIST>
<TITLE>A Night at the Opera</TITLE>
</CD>
</CD_catalog>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

29. Create a XSLT document for and taken xml document by you with all steps.
<!DOCTYPE html>
<html>
<head>
<title>CD Catalog</title>
</head>
<body>
<hl>CD Catalog</hl>
<table border=" l ">
<!-- Use JavaScript to load the XML and XSLT files and apply the transformation-->
<script>
// Load the XML document
var xml = new XMLHttpRequest();
[Link]("GET", "cd_catalog.xml", false);
[Link]();
var xmlDoc = [Link];
// Load the XSLT document
var xslt = new XMLHttpRequest();
[Link]("GET", "cd_catalog.xsl", false);
[Link]();
var xsltDoc = [Link];
// Transform the XML with the XSLT
var xsltProcessor = new XSLTProcessor();
[Link](xsltDoc);
var resultDocument = [Link](xmlDoc, document);
II Append the transformed content to the body
[Link](resultDocument);
</script>
</table></body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

30. Create a simple form to submit user input like his name, age, address and
favourite subject, movie and singer.
<!DOCTYPE html>
<html>
<head>
<title>User Input Form</title>
</head>
<body>
<hl>User Input Form</hl>
<form action="process_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br>

<label for="address">Address:</label>
<input type="text" id="address" name="address" required><br>

<label for="subject">Favorite Subject:</label>

<input type="text" id="subject" name="subject" required><br>

<label for="movie">Favorite Movie:</label>

<input type="text" id="movie" name="movie" required><br>

<label for="singer">Favorite Singer:</label>

<input type="text" id="singer" name="singer" required><br>
<input type="submit" value="Submit">
</form>
</body>

</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

31. Add few form elements such as radio buttons, check boxes and password field. Add
a submit button at last.
<!DOCTYPE html>
<html>
<head>
<title>Form with Elements</title>
</head><body>
<hl>Form with Elements</hl>
<form>
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
<label>
<input type="radio" name="gender" value="other"> Other
</label> <br>
<label>
<input type="checkbox" name="interests" value="sports"> Sports
</label>
<label>
<input type="checkbox" name="interests" value="music"> Music
</label>
<label>
<input type="checkbox" name="interests" value="movies"> Movies
</label> <br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

32. Add CSS property assign a style or behaviour to an HTML element such as: color,
border, margin and font-style.

<!DOCTYPE html>
<html>
<head>
<title>CSS Properties Example</title>
</head>
<body>
<hl style="color: blue; border: 2px solid red; margin:
20px; font-style: italic;">CSS Properties Example</hl>
<p style="color: green; border: lpx solid black; margin: lOpx;
font-style: normal;">This is a paragraph with custom styles.</p>
</body>
</html>

33. Add To Style Text Elements with Font, Size, and Color in CSS.
<!DOCTYPE html>
<html>
<head>
<title>Text Styling Example</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<hl class="title">Welcome to our website</hl>
<p class="paragraph">This is a sample paragraph with styled text.</p>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

34. 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>
/* Styling for the block-level element */

.block-element {
background-color: #fDfDfD;
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;
/* Includes padding and border in the total width*/
}
</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>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

35. Resize an image to fit its content box, and position the image Spx from the left and
10% from the top inside the content boxes.
<!DOCTYPE html>
<html>
<head>
<title>Image Resize and Position</title>
<style>
/* Container for the image */

.image-container {
width: 300px;
/* Set the desired width of the content box*/
height: 200px;
/* Set the desired height of the content box */
position: relative;
/* Enable positioning for the contained image */
border: 1px solid #ccc;
/* Optional: Add a border for visual reference*/
}
/* Styling for the contained image*/

.image-container img
{ max-width:
100%;
/* Resize the image to fit its content box */
height: auto;
/* Maintain the aspect ratio */
position: absolute;
/* Position the image within the container */
top: 10%;
/* 10% from the top */
left: 5px;
/* 5px from the left */
}
</style>
</head>
<body>
<div class="image-container">
<img src="[Link]" alt="Resized and Positioned Image">
</div>
</body>
</html>
Information Technology, NIET Gr. Naida
 Web Technology (BCSEOSSS) Lab Manual

36. Applying CSS Table: Styling even and odd cells.

!DOCTYPE html><html><head>
<title>CSS Table: Styling Even and Odd Cells</title>
<style>
/* Style the even rows (tr) */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Style the odd rows (tr) */
tr:nth-child(odd) {
background-color: #ffffff;
}
/* Style even cells (td) within even
rows*/ tr:nth-child(even) td:nth-
child(even) { color: red;
font-weight: bold;
}
/* Style odd cells (td) within odd rows*/
tr:nth-child(odd) td:nth-child(odd) {
color: blue;
font-style: italic;
}
</style></head><body> <table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell l </td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
</tr>
</table></body></html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

37. Applying list-style-type property in CSS with example.

<!DOCTYPE html><html><head>
<title>List Style Example</title>
<style>
/* Set the list style type for unordered list*/
ul {
list-style-type: square;
/* Using square markers */
}
/* Set the list style type for ordered list */
ol {
list-style-type: upper-roman;
/* Using uppercase Roman numerals */
}
</style>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Item 1</Ii>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>0rdered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body></html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

38. Design a web page by applying css id and class selectors.

<!DOCTYPE html>
<html>
<head>
<title>CSS ID and Class Selectors Example</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<header>
<hl id="site-title">My Website</hl>
<nav class="main-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main class="content">
<section>
<h2>Featured Content</h2>
<p>This is the featured content of the website.</p>
</section
<section>
<h2>Latest News</h2>
<p>Check out the latest news and updates.<Ip>
</section>
</main
<footer class="site-footer">
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Now, let's create the [Link] file to apply styles using both CSS ID and class selectors:
/* Apply styles to the site title using the ID
selector*/ #site-title {
font-size: 36px;
color: #333;
}
/* Apply styles to the main navigation menu using the class selector*/

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

.main-menu {
background-color: #fOfOfO;
padding: 1Opx;
}
.main-menu ul {
list-style-type: none;
margin: O;
padding: O;
}
.main-menu li
{ display: inline;
margin-right: l 5px;
}
.main-menu a {
text-decoration: none;
color: #333;
}
/* Apply styles to the main content area using the class selector*/
.content {
padding: 20px;
}
/* Apply styles to the footer using the class selector*/
.site-footer {
text-align: center;
padding: 1Opx;
background-color: #333;
color: #fff;
}

[Link]
box {
width: 200px;
height: l 50px;
background-color: #fOfOfO;
border: 2px solid #333;
padding: 20px;
margin: 50px;
}

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

0 0 Flle I C:/lkers/Ani 20Bajpai/OneDrive/1lesktop/Workshop%/Opmgram/[Link] 0

.::; Goocjle [:l Onln'[Link].g_ I Batct,a-Pliysi:sW_ r'.t Com.:tituenllaridD.. Critu!ValueCakuL ?rofile-!oglnlTiibL .Lates!IPOlnformilD- Fi™nci.J!Accounti,_ \._ [Link]?racleshState.. I) lndividui!IProducL

My Website
• llllW<
• [Link]!!;
• Service;;
-

Featured Content
Thisis the foarured content of the website.

Latest News
Check out the latest news and updates.

C 2023 ).1y [Link] rights reser\'ed.

Now, lel's crea1e the [Link] to apply styles. using both CSS ID and class selecmrs: f4 Apply styles ro the [Link] lirleusing the ID selector */#siie-title j font-size: 36px:color: F.333: }/*Apply styles to the main navigation menu
using the class selector•; .main.-menu ( backgro1md-<'olor: #filfOftl; padding: !Opx; ] .[Link] ul l [Link]-type: none; margin: 0: padding: O;}.main-menu li { display: inline: margin-right: 15px;} .main-menu a r rexr-
Jecorarion:
none: color: #333:} Applystyles to the main conlenl area using the class selector•j .content { padding: 20px: I ;-..Apply styie.s to the footer using the class selector*/ .site-foofer I text-align.: center: padding: lOpx: [Link]-i'.:olor:
#333:color:#fff:)

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

39. Demonstrating the CSS Box model which consists of: borders, padding, margins, and
the actual content.
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model Example</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div class="box">
This is the content of the box.
</div>
</body>
</html>
[Link]
box {
width: 200px;
height: l 50px;
background-color: #filfDfD;
border: 2px solid #333;
padding: 20px;
margin: 50px;
}

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

40. Design a web page by applying CSS grouping and dimensions property.
<!DOCTYPE html><html><head>
<title>CSS Grouping and Dimensions Example</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<header>
<hl>My Website</hl>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Featured Content</h2>
<p>This is the featured content of the website.</p>
</section>
<section>
<h2>Latest News</h2>
<p>Check out the latest news and updates.<Ip>
</section>
</main>
<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
[Link]
box {
width: 200px;
height: l 50px;
background-color: #fOfOfO;
border: 2px solid #333;
padding: 20px;
margin: 50px;
}

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

41. Design a web page by applying CSS Display and Positioning property.
!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="[Link]">
<title>Simple Layout</title>
</head>
<body>
<header>
<hl>Header</hl>
</header>
<div class="sidebar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<main>
<h2>Main Content</h2>
<p>This is the main content area.</p>
</main>
</body>
</html>

Output
Main Content
This is the main content area

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

42. Design a web page showing the use of inline, internal and external CSS.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=l.O">
<link rel="stylesheet" href="[Link]">
<title>CSS Examples</title>
</head>
<body>
<hl>This is a Heading</hl>
<p style="color: red;">This is a paragraph with inline CSS.</p>
<p>This is a paragraph with internal CSS.</p>
<p class="external-css">This is a paragraph with external CSS.</p>
</body>
</html>

Output
This is a Heading
This is a paragraph with inline
This is a paragraph with internal CSS
This is a paragraph with external CSS

43. Design a web page by applying CSS pseudo classes.

<!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="[Link]">
<title>CSS Pseudo-Classes Example</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

[Link]
/* Basic styles for the navigation menu*/
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul Ii a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 18px;
}
nav ul li a:hover {
color: #0074D9;}

Output
Home About Service Contact

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

44. Design a web page by applying CSS Navigation Bar.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<title>CSS Navigation Bar Example</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>

[Link]
* Basic styles for the navigation bar*/
.navbar {
background-color: #333;
overflow: hidden;
}

.navbar ul {
list-style-type: none;
margin: O;
padding: O;
}
.navbar li {
float: left;
margin-right: 20px;
}

.navbar li a {
display: block;

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: background-color 0.3s ease;
}

/* Hover effect *I
.navbar li a:hover {
background-color: #0074D9;
}

Output
Home About Service Portfolio Contact

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

45. Design a web page such as home page, contact us, about us etc. by using 3 ways of
CSS layout.
!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="[Link]">
<title>Layout Examples</title>
</head>
<body>
<header>
<hl>My Website</hl>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>

<div class="content">
<section class="home">
<h2>Home Page</h2
<p>Welcome to our website! This is the home page content.</p>
</section>

<section class="about">
<h2>About Us</h2>
<p>cp>
</section>

<section class="contact">
<h2>Contact Us</h2>
<p>Feel free to reach out to us at contact@[Link]</p>
</section>
</div>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

[Link]
/* Floats Layout */
.content {
overflow: hidden;
}
section {
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 20px;
}

/* Additional styles for navigation*/

nav ul {
list-style-type: none;
margin: O;
padding: O;
}

nav ul li {
display: inline;
margin-right: 20px;
}

Output:
Home Page
Welcome to our website! This is the home page content
Feel free to reach out to us at contact@[Link]

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

46. Design a basic structure of Bootstrap Grid system.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Example</title>
<!-- Link to Bootstrap CSS -->
<link rel="stylesheet" href="https:/ /[Link]/bootstrap/4.5.2/css/[Link]">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Column content here-->
<p>This is column l</p>
</div>
<div class="col-md-4">
<!-- Column content here-->
<p>This is column 2</p>
</div>
<div class="col-md-4">
<!-- Column content here-->
<p>This is column 3</p>
</div>
</div>
</div>

<!-- Link to Bootstrap JS (optional)-->

<script src="[Link] s"></script>
<script src="[Link] [Link]/ajax/libs/[Link]/1.16.0/umd/[Link]"></script>
<script src="[Link]
</body>
</html>

Output
This is column 1
This is column 2
This is column 3

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

47. Design All Bootstrap Components with example.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]
</head>
<body>
<div class="container">
<hl class="display-4">Bootstrap Typography</hl>
<p class="lead">This is an example of Bootstrap typography.</p>
<p class="text-muted">This is a muted text.</p>
<p class="text-danger">This is a danger text.</p>
</div>
<script src="[Link] s"></script>
<script src="[Link]
<script src="[Link]
</body>
</html>

Output
Bootstrap Typography
This is an example of Bootstrap typography
This is a muted text
This is a danger text

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

48. Creating a Java Script code to implement all data types.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Operators</title>
</head>
<body>
<h l> JavaScript Operators</hl>

<script>
// Arithmetic Operators
let numl = 10;
let num2 = 5;
[Link]("Arithmetic Operators:<br>");
[Link]('numl + num2 = ${numl + num2}<br>');
[Link]('numl - num2 = ${numl - num2}<br>');
[Link]('numl * num2 = ${numl * num2}<br>');
[Link]('numl I num2 = ${numl / num2}<br>');
[Link]('numl % num2 = ${numl % num2}<br>');
[Link]('++numl = ${++numl}<br>');
[Link](' num2-- = ${num2--}<br><br>' );

// Assignment Operators
let x = 5;
let y= 3;
[Link]("Assignment Operators:<br>");
[Link]('x = ${x}<br>');
x+=y;
[Link]('x +=y: ${x}<br>');
x-= y;
[Link]('x -= y: ${x}<br> ');
X *=y;

[Link]('x *=y: ${x}<br>');

x/=y;
[Link]('x /= y: ${x}<br> '); x
%=y;
[Link]('x %= y: ${x}<br><br>');

// Comparison Operators

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

let a= 10;
let b = 5;
[Link]("Comparison Operators:<br>");
[Link]('a == b: ${a== b}<br>');
[Link]('a !=b: ${a !=b}<br>');
[Link]('a> b: ${a> b}<br>');
[Link]('a< b: ${a< b}<br>');
[Link]('a >= b: ${a>= b}<br> ');
[Link]('a <= b: ${a<= b}<br><br>');

// Logical
Operators let
isTrue = true; let
isFalse = false;
[Link]("Logical Operators:<br>");
[Link]('isTrue && isFalse: ${isTrue && isFalse}<br>');
[Link]('isTrue II isFalse: ${isTrue II isFalse}<br>');
[Link](' !isTrue: ${!isTrue}<br><br>' );

// Bitwise Operators
let bitwiseNuml = 5; // Binary:
0101 let bitwiseNum2 = 3; //
Binary: 0011
[Link]("Bitwise Operators:<br>");
[Link]('bitwiseNuml & bitwiseNum2: ${bitwiseNuml & bitwiseNum2}<br>'); II
AND
[Link]('bitwiseNuml I bitwiseNum2: ${bitwiseNuml I bitwiseNum2}<br>'); //
OR
[Link]('bitwiseNuml /\ bitwiseNum2: ${bitwiseNuml /\ bitwiseNum2}<br>'); II
XOR
[Link](' ~bitwiseNum1: ${~bitwiseNum1}<br>' ); // NOT
[Link]('bitwiseNuml << 1: ${bitwiseNuml << 1}<br>'); II Left Shift
[Link]('bitwiseNuml >> 1: ${bitwiseNuml >> 1}<br>'); II Right Shift
</script>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

JavaScript Operators
Arithmetic Operators:
numl + num2 = 15
nmnl - nmn2 = 5
numl * nmu2 = 50
munl / mun2 = 2
muul % muu2 = 0
++numl = 11
mun2-- = 5
Assigmnent Operators:
x=5
x+=y: 8
x-=y: 5
X *= y: 15
x I= y: 5
X %=y: 2

[Link] Operators:
a =b: false
a!= b: t:tue
a>b: t:tue
a< b: false-
a >= b: t:t1.1e
a<= b: false

Logical Operators:
isTrue && isFalse: false
isTrue II isFalse: t:[Link]
! isTn1e: false

Bitwise. Opemtors:
bitwiseNuml & bitwiseNum2: I
bitwiseNuml I bit"vise um2: 7
bitwiseNurn.1 "bitv,-:ise um2: 6
bittviseNuml: -6
bitv,:iseNuml << 1: 10
bitwiseNuml >> 1: 2

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

49. Creating a java script code to implement 'var' keyword.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 'var' Keyword</title>
</head>
<body>
<hl>JavaScript 'var' Keyword</hl>

<script>
// Using 'var' to declare and initialize variables
var firstName = "John";
var lastName = "Doe";

// Displaying the values of the 'var' variables

[Link]("Using 'var' to declare and initialize variables:<br>");
[Link]("First Name: " + firstName + "<br>");
[Link]("Last Name: "+ lastName + "<br>");

II Reassigning a 'var' variable

var age= 30;
[Link]("<br>Reassigning a 'var' variable:<br>");
[Link]("Age: "+age+ "<br>");
age= 35; // Reassigning the 'age' variable
[Link]("Updated Age:"+ age+ "<br>");
// Hoisting with 'var'
[Link]("<br>Hoisting with 'var':<br>");
[Link]("Before declaration:"+ city+ "<br>"); // Outputs: undefined
var city = "New York"; // Variable declaration is hoisted to the top
[Link]("After declaration: "+city+ "<br>");
// 'var' variables have function scope
function greet() {
if (true) {
var message= "Hello, World!";
}
[Link]("<br>'var' variables have function scope:<br>");
[Link]("Inside function:"+ message+ "<br>");
}
greet(); II Calling the function
II 'message' is still accessible here due to function scope
[Link]("Outside function: "+message+ "<br>"); // Outputs: "Outside function: Hello,
World!"

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

</script>
</body>
</html>

... ,..,_;,...... y1c::: L_J ............. 1'11111 .. ...._,II...JI t'. C::lllH y ...

JavaScript 'var' :[Link]

Using "var' to declare· and initialize variables:
First Nalllce: John
Last Name: Doe

Reassigning a 'var' variable.:

Age: 30
Updated Age: 35

Hoisting with 'var':

Before declaration: undefined
After declaration: New [Link]

'var' varia hies have fi..mctionscope.:

I..nside function.: Hello, "World!

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

SO. Implementing a Java Script program to implement onSelect and onload event.

<!DOCTYPE html><html><head>
<title>onSelect and onLoad Events</title>
</head>
<body>
<hl>onSelect and onLoad Events Example</hl>
<p>Select a color:</p>
<select id="colorSelect">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<p id="selectedColor"></p>
<script>
// Function to handle the onSelect event
function onSelectChange() {
var select= [Link]("colorSelect");
var selectedColor = [Link][[Link]].value;
var selectedColorText = [Link][[Link]].text;
[Link]("selectedColor").innerHTML = "You selected: " + selectedColorText
+" (" + selectedColor + ")";
}
II Function to handle the onLoad event
function onLoad() {
[Link]("selectedColor").innerHTML = "Please select a color.";
}
// Attach the onSelect event handler to the select
element var select=
[Link]("colorSelect");
[Link]("change", onSelectChange);
// Attach the onLoad event handler to the window's load event
[Link]("load", onLoad);
</script>
</body>
</html>

Information Technology, NIET Gr. Noida

 Web Technology (BCSEOSSS) Lab Manual

51. Implementing a program in Java Script to create array by using array literal,
creating instance and array constructor.

</head><body>
<hl>Creating Arrays in JavaScript</hl>
<h2>Using Array Literal:</h2>
<script>
//Using Array Literal
var fruitsLiteral = ["Apple", "Banana", "Cherry"];
[Link]("Array created using Array Literal: " +
fruitsLiteral);
</script>
<h2>Using Array Instance:</h2>
<script>
//Using Array Instance
var fruitslnstance = new Array("Orange", "Grapes", "Strawberry");
[Link]("Array created using Array Instance:"+ fruitslnstance);
</script>
<h2>Using Array Constructor:</h2>
<script>
//Using Array Constructor
var fruitsConstructor = new Array();
fruitsConstructor[0] = "Peach";
fruitsConstructor[1] = "Mango";
fruitsConstructor[2] = "Watermelon";
[Link]("Array created using Array Constructor: "+ fruitsConstructor);
</script></body></htrnl>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

52. Implementation of while, do-while and for loop.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loops</title>
</head>
<body>
<hl>JavaScript Loops</hl>

<h2>While Loop:</h2>
<script>
// Using a While
Loop var i = 1;
while (i <= 5) {
[Link]( Iteration + i + <br> );
11 11 11 11

i++;
}
</script>
<h2>Do-While Loop:</h2>
<script>
// Using a Do-While
Loop var j = 1;
do {
[Link]( Iteration + j + <br> );
11 11 11 11

j++;
} while (j <= 5);
</script>

<h2>For Loop:</h2>
<script>
// Using a For Loop
for (var k = 1; k <= 5; k++) {
[Link]( Iteration + k + <br> );
11 11 11 11

}
</script>
</body>
</html>

[Link]
.box {

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

width: 200px;
height: l 50px;
background-color: #fDfDfD;
border: 2px solid #333;
padding: 20px;
margin: 50px;

G Googme Online Counselling ...

Do-While Loop:
J avaScrip1: Loops
lterntion 1
"While Loop:
Ite:mtion,2
Iteration 1 Ite:ration 3
Iteration2
Iteration 3
[Link] 4
Iteration4 Iteration 5
Iteration 5

For Loop:
Ite:mtionl
Ite:ration 2
[Link] 3
Iteration 4
Iteration 5

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

53. Creating a Java Script program to implement Dialog, Confirm and Message Popup Boxes.

<!DOCTYPE html><html><head>
<title>Popup Boxes Example</title>
</head><body>
<hl>JavaScript Popup Boxes Example</hl>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showConfirm()">Show Confirm</button>
<button onclick="showPrompt()">Show Prompt</button>
<script>
II 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>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

54. Implementing a Java Script program to implement onClick and onSubmit event.

<!DOCTYPE html>
<html>
<head>
<title>onClick and onSubmit Events Example</title>
</head>
<body>
<hl>onClickand onSubmit Events Example</hl>

<!-- 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 =
[Link]("clickExample");
[Link] = "Button clicked!";
}

// Function for onSubmit event

function submitForm() {
var name= [Link]("name").value;
var email= [Link]("email").value;

alert("Form submitted with Name: "+name+" and Email: "+ email);

}
</script>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

G Google D Online Counselling... 8 Batches - Physics W... D Constituents and D... D

onClick and onSubmit Events Example

Click the button to change the text:
Click me!

I Click Me I

Submit a Form:

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

55. Creating a java script code to implement 'let' keyword.

Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 'let' Keyword Example</title>
</head>
<body>
<h1>JavaScript 'let' Keyword Example</h1>

<script>
// Using 'let' to declare
variables let message= "Hello,
World!"; let age= 25;

// Reassigning values to the variabJes

message = "Hi there!";
age= 30;

// Displaying the variables' values

[Link]("<p>Message: "+message+ "</p>");
[Link]("<p>Age: "+age+ "</p>");

// Using 'let' within a block

if (true) {
let blockScopedVar = "I'm in a block";
[Link]("<p>Inside Block: "+ blockScopedVar +
"</p>");
}

II Attempting to access the block-scoped variable outside the block

// This will result in an error because 'blockScopedVar' is not defined here
// [Link]("<p>Outside Block:"+ blockScopedVar + "</p>"); // Uncommenting this line
will generate an error
</script>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

56. Creating a java script code to implement 'const' keyword.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript 'const' Keyword Example</title>
</head>
<body>
<hl>JavaScript 'const' Keyword Example</hl>

<script>
// Using 'const' to declare constants
const pi= 3.14159;
const dayslnAWeek = 7;

II Attempting to reassign a constant (this will result in an error)

II pi= 3.14; II Uncommenting this line will generate an error

// Displaying the constants' values

[Link]("<p>Value of Pi:"+ pi+ "</p>");
[Link]("<p>Days in a Week:"+ dayslnAWeek + "</p>");

// Using 'const' within a

block if (true) {
const blockScopedConst = "I'm in a block";
[Link]("<p>lnside Block:"+ blockScopedConst + "</p>");
}

II Attempting to access the block-scoped constant outside the block (this will result in an
error)
II [Link]("<p>Outside Block:"+ blockScopedConst + "</p>"); // Uncommenting
this line will generate an error
</script>
</body>
</html>

Output

Value of Pi 3.14

Days in a Week: 7

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

57. Implementing a program in Java Script to create object by using object literal,
creating instance and object constructor.

<!DOCTYPE html><html><head>
<title>JavaScript Object Creation</title>
</head>
<body>
<hl>JavaScript Object Creation</hl>
<h2>Object Literal:</h2>
<script>
// Using Object Literal
var personLiteral =
{ firstName: "John",
lastName: "Doe",
age: 30
};
[Link]("Name: "+ [Link] +" "+ [Link] + "<br>");
[Link]("Age: "+ [Link] + "<br>");
</script>
<h2>Object Instance:</h2>
<script>
// Using Object Instantiation
var personlnstance = new Object();
[Link] = "Jane";
[Link] =
"Smith"; [Link] = 25;
[Link]("Name: "+ [Link] +" "+ [Link] + "<br>");
[Link]("Age: "+ [Link] + "<br>");
</script>
<h2>Object Constructor:</h2>
<script>
// Using Object Constructor
function Person(firstName, lastName, age)
{ [Link] = firstName;
[Link] = lastName;
[Link] = age;
}
var personConstructor = new Person("Bob", "Johnson", 35);
[Link]("Name: "+ [Link] +" "+ [Link] +
"<br>");
[Link]("Age: "+ [Link] + "<br>");
<Iseript></body></html>

Name:Robin
Age:25

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

58. Implementing a program in Java script to implement augmented function.

<head>
<title>Augmented Function Example</title>
</head>
<body>
<h1>Augmented Function Example</h1>
<p>Original Function:</p>
<pre id="originalFunctionOutput"></pre>
<p>Augmented Function:</p>
<pre id="augmentedFunctionOutput"></pre>

<script>
// Original function
function originalFunction(a, b)
{ return a+ b;
}

// Augmenting the original function

function augmentedFunction(a, b)
{
// Call the original function
var result= originalFunction(a, b);
II Add some additional functionality
result= "The result is: "+ result;
return result;
}

// Calling the original function

var originalResult = origina1Function(5, 3);
[Link]("originalFunctionOutput").textContent = originalResult;

// Calling the augmented function

var augmentedResult = augmentedFunction(5, 3);
[Link]("augmentedFunctionOutput").textContent = augmentedResult;
</script>
</body>
</html>

Augmented Function Example

augmentedFunction(S, 3)
The result is:8

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

59. Implementing a program to implement calculator application as real time.

<!DOCTYPE html>
<html>
<head>
<title>Real-Time Calculator</title>
<style>
.calculator
{ width:
300px; margin:
0 auto;
}
input[type="text"] {
width: 100%;
padding: l0px;
font-size: 24px;
text-align: right;
}
.btn {
width: 25%;
padding: l0px;
font-size: 18px;
cursor: pointer;
}
#result {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Real-Time Calculator</h 1>
<div class="calculator">
<input type="text" id="result" readonly>
<br>
<button class="btn" onclick="appendToResult('l ')">1</button>
<button class="btn" onclick="appendToResult('2')">2</button>
<button class="btn" onclick="appendToResult('3')">3</button>
<button class="btn" onclick="appendToResult('+')">+</button>
<br>
<button class="btn" onclick="appendToResult('4')">4</button>
<button class="btn" onclick="appendToResult('5')">5</button>
<button class="btn" onclick="appendToResult('6')">6</button>
<button class="btn" onclick="appendToResult('-')">-</button>
<br>
<button class="btn" onclick="appendToResult('7')">7</button>
<button class="btn" onclick="appendToResult('8')">8</button>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

<button class="btn" onclick="appendToResult('9')">9</button>

<button class="btn" onclick="appendToResult('*')">*</button>
<br>
<button class="btn" onclick="appendToResult('O')">O</button>
<button class="btn" onclick="clearResult()">C</button>
<button class="btn" onclick="calculateResult()">=</button>
<button class="btn" onclick="appendToResult('/')">/</button>
</div>
<script>
function appendToResult(value) {
[Link]('result').value+= value;
}
function clearResult() {
[Link]('result').value= ";
}
function calculateResult()
{ try {
var expression= [Link]('result').value;
var result = eval(expression);
[Link]('result').value = result;
} catch (error) {
[Link]('result').value =
'Error';
}
}
</script></body></html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

60. Design a HTML form validation using Java Script.

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<hl>Form Validation Example</hl>

<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= [Link]("name").value;
var email= [Link]("email").value;
var password= [Link]("password").value;

// Simple validation checks

if ([Link]() === "") {
alert("Name cannot be empty");
return false;
}

if (!isValidEmail(email)) {
alert("Invalid email address");
return false;
}

if ([Link]< 8) {
alert("Password must be at least 8 characters");
return false;
}

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

// If all validations pass, the form is submitted

return true;
}

function isValidEmail( email) {

// A simple email validation using a regular expression
var emailPattern = F'[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return [Link](email);
}
</script>
</body>
</html>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

61. Write a program to implement Arrow function with default argument in ES6.

<!DOCTYPE html>
<html>
<head>
<title>Arrow Function with Default Arguments</title>
</head>
<body>
<hl>Arrow Function with Default Arguments</hl>
<script>
// Arrow function with default arguments
const greet= (name = "Guest", time= "morning") =>
{ [Link]('Good ${time}, ${name}!');
};
greet();
greet("Alice", "evening");

Output:

Arrow Function with Default Arguments

62. Implementing a program to implement call back functions in ES6.

const fetchEmployeeData = (callback) => {
[Link]("Fetching employee data...");
setTimeout(() => {
canst employee= { name: "Ravi Kumar", role: "Software Developer", salary: 80000 };
[Link]("Employee data fetched successfully.");
callback(employee);
}, 2000);
};
canst processEmployeeData =(employee)=>
{ [Link]('Processing data for: $
{[Link]}'); [Link]('Role: $
{[Link]}'); [Link]('Salary: ,$
{[Link]}');
};
fetchEmployeeData(processEmployeeData);
Output:
name: Ravi Kumar
role: Software Developer
salary: 80000
Information Technology, NIET Gr. Naida
 Web Technology (BCSEOSSS) Lab Manual

63. Implementing a program for de-structuring of an array in ESG.

canst employeeDetails = ["Rajesh Kumar", "Software Engineer", "Mumbai", "India"];
canst [name, role, city, country] = employeeDetails;
[Link]('Employee Name: ${name}'); // Output: Employee Name: Rajesh
Kumar [Link]('Role: ${role}'); // Output: Role: Software Engineer
[Link]('City: ${city}'); // Output: City: Mumbai
[Link]('Country: ${country}'); // Output: Country: India

canst [firstName, position, region, nationality= "Not specified"]= employeeDetails;

[Link]('Name: ${firstName}');
[Link]('Position: ${position}');
[Link]('Region: ${region}');
[Link]('Nationality: ${nationality}');

Output:
Employee Name: Rajesh Kumar
Role: Software Engineer
City: Mumbai
Country: India

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

64. Implementing a code in Java Script to implement Spread and rest operator.
canst employees= ["Alice", "Bob", "Charlie"];
canst newEmployees = ["David", ...employees,
"Eva"]; [Link]("New Employees List:",
newEmployees); canst capyOfEmployees =
[...employees];

[Link]("Copy of Employees List:", copyOfEmployees);

canst employeeDetails = {
name: "Rajesh Kumar",
role: "Software Engineer",
};
canst updatedEmployeeDetails = {
...employeeDetails,
location: "Mumbai",
country: "India"
};
[Link]("Updated Employee Details:", updatedEmployeeDetails);
location: 'Mumbai', country: 'India' }
canst calculateTotalSalary = (baseSalary, ...bonuses)=>
{ let totalSalary = baseSalary;
for (canst bonus of bonuses)
{ totalSalary += bonus;
}
return totalSalary;
};
canst baseSalary = 50000;
canst totalSalary = calculateTotalSalary(baseSalary, 5000, 3000, 2000);

[Link]("Total Salary including bonuses:", totalSalary);

canst logEmployeeNames =( ...names)=>
{ [Link]("Employee Names:", names);
};
logEmployeeNames("Alice", "Bob", "Charlie", "David");

Output:
["Alice", "Bob", "Charlie", "David"]

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

65. Javascript code that should compile by Typescript compiler as'tsc'.

interface Employee
{ name: string;
role: string;
salary: number;
}

function addEmployees{existingEmployees: string[], ...newEmployees: string[]): string[]

{ return [...existingEmployees, ...newEmployees];
}

function calculateTotalSalary{baseSalary: number, ...bonuses: number[]): number

{ return [Link]{{total, bonus)=> total+ bonus, baseSalary);
}
const employeeDetails: Employee=
{ name: "Rajesh Kumar",
role: "Software Engineer",
salary: 80000,
};

const employeeNames: string[] = ["Alice", "Bob", "Charlie"];

const updatedEmployeeNames = addEmployees{employeeNames, "David", "Eva");

[Link]{"Updated Employee Names:", updatedEmployeeNames);
const baseSalary = 50000;
const totalSalary = calculateTotalSalary{baseSalary, 5000, 3000, 2000);

[Link]("Total Salary including bonuses:", totalSalary);

const { name, role, salary}: Employee= employeeDetails;
[Link]('Employee Name: ${name}, Role: ${role}, Salary: ${salary}');

Output:
Rajesh Kumar", "Software Engineer", 80000

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

66. Implementing a program in ES6 to implement Template string concepts.

canst employeeName = "Rajesh Kumar";
canst employeeRole = "Software Engineer";
canst employeeSalary = 80000;
canst employeelocation = "Mumbai, India";

canst employeeDetails = 'Employee Name: ${employeeName}

Role: ${employeeRole}
Location: ${employeelocation}
Salary: ,${[Link]()}';
[Link](employeeDetails);

canst performanceRating = 4.5;

canst performanceBonus = 5000;
canst salaryStatement = 'Based on your performance rating of ${performanceRating}, you will
receive a bonus of ,${performanceBonus}, making your total compensation
,${(employeeSalary+ performanceBonus).tolocaleString()}.';
[Link](salaryStatement);

canst generateGreeting = (name) => 'Hello, ${name}! Welcome to the team at

${employeelocation}.';
[Link](generateGreeting(employeeName));

Output:
Rajesh Kumar", "Software Engineer", 80000

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

67. Implementing a program in ESG to implement all string methods.

const text=" Hello, World! ";
[Link]('Length of the string: ${[Link]}');
[Link]('Character at index 7: ${[Link](7)}');
[Link]('lndex of first occurrence of 'o': ${[Link]('o')}');
[Link]('lndex of last occurrence of 'o': ${[Link]('o')}');
[Link]('Slice from index 7 to 12: '${[Link](7, 12)}'');
[Link]('Substring from index 7 to 12: '${[Link](7, 12)}'');
[Link]('Substr from index 7 for 5 characters: '${[Link](7, 5)}'');
[Link]('Replace 'World' with 'Universe': '${[Link]('World', 'Universe')}'');
[Link]('Uppercase: '${[Link]()}'');
[Link]('Lowercase: '${[Link]()}'');
[Link]('Trimmed text: '${[Link]()}'');
[Link]('Does the string include 'Welcome'? ${[Link]('Welcome')}');
[Link]('Does the string start with 'Hello'? ${[Link]('Hello')}');
[Link]('Does the string end with 'methods.'? ${[Link]().endsWith('methods.')}');
[Link]('Split by space:', [Link]().split(' '));
[Link]('Repeat text 2 times: '${[Link](2)}'');
canst additionalText =" Let's learn more!";
[Link]('Concatenated string: '${[Link](additionaIText)}'');
canst padExample = "5";
[Link]('Padded at start: '${[Link](4, '0')}'');
[Link]('Padded at end: '${[Link](4, '0')}'');

Output:
Length of the string 13
Character at index 7 w
Index of first occurrence of 'o' :4

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

68. Javascript code to implement object and class concepts in Typescript.

interface IEmployee
{ name: string;
role: string;
salary: number;
}

class Employee implements IEmployee {

name: string;
role: string;
salary: number;

constructor(name: string, role: string, salary: number)

{ [Link]= name;
[Link]= role;
[Link]= salary;
}

displayDetails(): string {
return 'Employee Name: ${[Link]}\nRole: ${[Link]}\nSalary:
,${[Link]()}';
}

giveRaise(amount: number): void

{ [Link]+= amount;
}
}

const employeel = new Employee("Rajesh Kumar", "Software Engineer", 80000);

[Link]([Link]());
[Link](S000);
[Link]([Link]());

class Manager extends Employee {

department: string;

constructor(name: string, role: string, salary: number, department: string)

{ super(name, role, salary);
[Link]= department;
}

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

displayDetails(): string {
return '${[Link](}}\nDepartment: ${[Link]}';
}
}
const managerl = new Manager("Sita Devi", "Engineering Manager", 120000, "Engineering");
[Link]([Link]());

Output:
Rajesh Kumar", "Software Engineer", 80000
Sita Devi", "Engineering Manager", 120000, "Engineering

69. Write a Typescript program that implement interface and constructor.

interface !Person {
name: string;
age: number;
greet(): string;
}
class Person implements !Person {
name: string;
age: number;
constructor(name: string, age: number)
{ [Link] = name;
[Link] = age;
}
greet(): string {
return 'Hello, my name is ${[Link]} and I am ${[Link]} years old.';
}
}

const personl = new Person("Alice", 30);

[Link]([Link]() );

Output:
Hello, my name is Shivam and I am 30 years old

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

70. Write a code in typescript that implement decorator and spread operator.
function LoglnstanceCreation(target: Function}
{ const originalConstructor = target;

const newConstructor: any= function(...args: any[]} {

[Link]('Creating instance of ${[Link]} with arguments: ${[Link](', '}}'};
return new originalConstructor(...args};
};
[Link] = [Link];
return newConstructor;
}

@LoglnstanceCreation
class Person {
name: string;
age: number;
constructor(name: string, age: number}
{ [Link] = name;
[Link] = age;
}
greet(}: string {
return 'Hello, my name is ${[Link]} and I am ${[Link]} years old.';
}
}
const personl = new Person("Alice", 30};
const person2 = new Person("Bob", 25};
const mergedPerson = {
...person1,
...person 2,
greet(}: string {
return 'Merged Person: ${[Link]} and ${[Link]} years old.';
}
};
[Link](person [Link](} };
[Link]([Link](} };
[Link]([Link](}};

Output:
decorator Alice, bob

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

71. Write a code in typescript that implement Asynchronous Programming concepts.

function fetchDataCallback(callback: (data: string)=> void): void
{ setTimeout(() => {
callback("Data fetched with callback");
}, 1000);
}

function fetchDataPromise(): Promise<string>

{ return new Promise((resolve, reject)=>
{ setTimeout(() => {
resolve("Data fetched with promise");
}, 1000);
});
}
async function fetchDataAsync(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched with async/await");
}, 1000);
});
}
fetchDataCallback((data) => {
[Link](data);
});
fetchDataPromise().then((data) => {
[Link](data);
}).catch((error) => {
[Link](error);
});
async function main()
{ try {
canst data= await fetchDataAsync();
[Link](data);
} catch (error) {
[Link](error);
}
}
main();

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

72. Write a program in Typescript that implement promise constructor.

function fetchData(): Promise<string>
{ return new Promise((resolve, reject)=>
{ setTimeout(() => {
const success= true;
if (success) {
resolve("Data fetched successfully");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData().then(data => {
[Link](data);
}).catch(error => {
[Link](error);
});

Output:
Data fetched successfully

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

73. Implementing promise and chain concepts in Typescript.

function fetchData(): Promise<string>
{ return new Promise((resolve, reject)=>
{ setTimeout(() => {
const success= true;// Simulate a successful operation
if (success) {
resolve("Data fetched successfully");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

function processData(data: string): Promise<string>

{ return new Promise((resolve) => {
setTimeout(() =>
{ resolve('Processed: $
{data}');
}, 1000);
});
}

function saveData(data: string): Promise<string>

{ return new Promise((resolve) => {
setTimeout(() =>
{ resolve('Saved: ${data}');
}, 1000);
});
}

fetchData()
.then(data => processData(data))
.then(processedData => saveData(processedData))
.then(savedData => [Link](savedData))
.catch(error => [Link](error));

Output:
Data fetched successfully

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

74. Write a code in typescript that implement [Link]() static method.

function slowOperation(): Promise<string>
{ return new Promise((resolve) =>
{ setTimeout(() => {
resolve("Slow operation completed");
}, 3000);
});
}

function fastOperation(): Promise<string>

{ return new Promise((resolve) =>
{ setTimeout(() => {
resolve("Fast operation completed");
}, 1000);
});
}
function errorOperation(): Promise<string>
{ return new Promise((_, reject)=>
{ setTimeout(() => {
reject("Error occurred");
}, 2000);
});
}
[Link]([slowOperation(), fastOperation(), errorOperation()])
.then(result => [Link](result))
.catch(error => [Link](error));

Output:
Slow operation completed
Fast operation completed

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

75. Create a constant by using define() function with its proper syntax.
// Define a module using AMD
define(['require', 'exports'], function (require: any, exports: any) {
'use strict';

// Define a constant within the module

const MY_CONSTANT= 42;

// Export the constant

exports.MY_CONSTANT= MY_CONSTANT;
});
//Typescript file
const MY_CONSTANT= 42;
[Link](MY_CONSTANT);

Output: 42
76. Creating PHP script that return any data types whatever you use.
<?php
function getData($type)
{ if ($type=== 'integer')
{
return 42; // Integer
} elseif ($type === 'string')
{ return "Hello, world!";//
String
} elseif ($type=== 'array') {
return ["apple", "banana", "cherry"];// Array
} elseif ($type=== 'object') {
return (object) ['name'=> 'John', 'age'=> 30]; // Object
} elseif ($type=== 'boolean') {
return true;// Boolean
} else {
return null;// Default case for unknown types
}
}
$type= 'object';// Change this value to test different data types
$result= getData($type);
echo "<pre>";
var_dump($result);
echo "</pre>";
?>
Output:

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual
["apple", "banana", "cherry"]: Arary

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

77. Crating a program that implement control flow and decision making statement.
<?php
function controIFlowExample($value) {
if ($value > 10) {
echo "The value is greater than 10.<br>";
} elseif ($value=== 10) {
echo "The value is exactly 10.<br>";
} else {
echo "The value is less than 10.<br>";
}
switch ($value)
{ case 1:
echo "The value is one.<br>";
break;
case 2:
echo "The value is
two.<br>"; break;
case 3:
echo "The value is three.<br>";
break;
default:
echo "The value is neither one, two, nor three.<br>";
break;
}
echo "Looping through numbers:<br>";
for ($i = 1; $i <= 5; $i++) {
echo "Number: $i<br>";
}
echo "Looping with while:<br>";
$i = 6;
while ($i <= 10) {
echo "Number: $i<br>";
$i++;
}
echo "Looping with do-while:<br>";
$i =
11; do
{
echo "Number: $i<br>";
$i++;
} while ($i <= 15);
}

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

$value= 10;
controlFlowExample($value);
?>

Output:
The value is greater than 10

78. Creating PHP to implements parameterized function.

<?php
function greetUser($name, $age) {
return "Hello, $name! You are $age years old.";
}
function calculateRectangleArea($width, $height= 10)
{ return $width * $height;
}
function sumNumbers( ...$numbers)
{ return array_sum($numbers);
}
echo greetUser("Alice", 30). "<br>";
echo greetUser("Bob", 25) . "<br>";
echo "Rectangle area (width 5, height 10): " . calculateRectangleArea(5) . "<br>";
echo "Rectangle area (width 5, height 20):". calculateRectangleArea(5, 20). "<br>";
echo "Sum of numbers (1, 2, 3, 4, 5):". sumNumbers(l, 2, 3, 4, 5). "<br>";
echo "Sum of numbers (10, 20):" . sumNumbers(l0, 20). "<br>";
?>

Output:
Rectangle area (width 5, height 10):50
Rectangle area (width 5, height 20):100
Sum of numbers (1, 2, 3, 4, 5):15
Sum of numbers (10, 20):30

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

79. Creating program in PHP to store multiple string and concatenate these string and print it.
<?php
$strings= ["Hello" "world" I "this"I "is"I "PHP"]·I
J

$concatenatedString =implode("", $strings);

echo $concatenatedString;
?>

Output:
Hello world this is PHP

80. Implements single dimension array in PHP.

<?php
$fruits= ["apple", "banana", "cherry"];
foreach ($fruits as $fruit) {
echo $fruit . "<br>";
}
?>

Output:
["apple", "banana", "cherry"]

81. Write a PHP code to open and close a file in a proper manner.
<?php
$filename= "[Link]";

// Open the file for writing

$file= fopen($filename, "w");

if ($file) {
fwrite($file, "Hello, world!");
fclose($file);
} else {
echo "Unable to open the file.";
}
?>

Output:
Hello, world
Unable to open the file

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

82. Write a PHP script to copying, renaming and deleting a file.

<?php
$sourceFile = "[Link]";
$copyFile = "[Link]";
$renameFile = "[Link]";

II Copy the file

if (copy($sourceFile, $copyFile)) {
echo "File copied successfully.<br>";
} else {
echo "Failed to copy file.<br>";
}

II Rename the file

if (rename($copyFile, $renameFile)) {
echo "File renamed successfully.<br>";
} else {
echo "Failed to rename file.<br>";
}

II Delete the file

if (unlink($renameFile)) {
echo "File deleted successfully.<br>";
} else {
echo "Failed to delete file.<br>";
}
?>

Output:
File copied successfully
File deleted successfully

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

83. Write a PHP script to create and delete directory structure.

<?php
$directory= "exampleDir";
$subdirectory= "$directory/subDir";

// Create directory
if (mkdir($directory, 0755, true)) {
echo "Directory '$directory' created successfully.<br>";
// Create subdirectory
if (mkdir($subdirectory, 0755, true)) {
echo "Subdirectory '$subdirectory' created successfully.<br>";
} else {
echo "Failed to create subdirectory '$subdirectory'.<br>";
}
} else {
echo "Failed to create directory '$directory'.<br>";
}

// Delete directory and subdirectory

if (rmdir($subdirectory)) {
echo "Subdirectory '$subdirectory' deleted successfully.<br>";
} else {
echo "Failed to delete subdirectory '$subdirectory'.<br>";
}

if (rmdir($directory)) {
echo "Directory '$directory' deleted successfully.<br>";
} else {
echo "Failed to delete directory '$directory'.<br>";
}
?>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

84. Program to upload and download a file in PHP.

<?php
if (isset($_POST["filename"])) {
$filename= $_POST["filename"];
$filepath ="uploads/". $filename;

if (file_exists($filepath)) {
header("Content-Description: File Transfer");
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"". basename($filepath). "\"");
header("Expires: O");
header("Cache-Control: must-revalidate");
header("Pragma: public");
header("Content-Length:". filesize($filepath));
flush();
readfile($filepath);
exit;
} else {
echo "The file does not exist.";
}
}
?>

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

85. PHP program to create and destroy a session.

IIPhP file
<?php
session_start(); I I Start the session

I I Set session variables

$_SESSION["username"] = "JohnDoe";
$_SESSION["email"] = "[Link]@[Link]";

echo "Session created. <br>";

echo "Username: ". $_SESSION["username"]. "<br>";
echo "Email:". $_SESSION["email"] . "<br>";
?>

IIPhP file
<?php
session_start(); I I Start the session

I I Clear session data

$_SESSION= array();

I I Destroy the session cookie

if (ini_get("session.use_cookies")) {
$params = session_get_cookie_params();
setcookie(session_name(), ", time() - 42000,
$params["path"], $params["domain"], $params["secure"], $params["httponly"]
);
}

I I Destroy the session

session_destroy();
echo "Session destroyed.";
?>

Output:
JohnDoe
[Link]@[Link]
Session created

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

86. PHP program to set and delete a cookie.

//set_cookie.php
<?php
setcookie("user", "JohnDoe", time()+ 3600);
echo "Cookie 'user' set.";
?>
//delete_cookie.php

<?php
setcookie("user", "", time() - 3600);
echo "Cookie 'user' deleted.";
?>

Output:
Cookie 'user' set
Cookie 'user' deleted

87. PHP program to manually register the session variable.

<?php
session_start();
$_SESSION["username"] = "JohnDoe";
$_SESSION["email"] = "[Link]@[Link]";
echo "Session variables are set.";
?>

Output:
JohnDoe
[Link]@[Link]
Session variables are set

88. PHP program to manually destroy the session variable

<?php
session_start();
unset($_SESSION["username"]);
unset($_SESSION["email"]);
echo "Session variables are destroyed.";
?>

Output:
Session variables are destroyed

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

89. PHP program to store the session data on one page and would be available on
second page.
//store_session.php
<?php
session_start();
$_SESSION["message"] = "Hello from the first page.";
header("Location: display_session.php");
exit();
?>

//display_session.php
<?php
session_start();
if (isset($_SESSION["message"]))
{ echo $_SESSION[" message"];
} else {
echo "No session data found.";
}
?>

Output:

Hello from the first page

No session data found

Information Technology, NIET Gr. Naida

 Web Technology (BCSEOSSS) Lab Manual

Information Technology, NIET Gr. Naida