saksham1 (1)

Vaish College of Engineering, Rohtak
Bachelors of Technology
Practical File
of
Web Technology
Course Code: LC-CSE-216G
Submitted To : Submitted By:

Mr. Alok Gupta Saksham Khurana
(A.P ,CSE) 21/CSE/162
B.tech 4th Sem.
INDEX
S.No Name of Program Signature
1. To study the basic tags used in HTML Write an

HTML page to print "Hello World".
2. To identify different types of lists in HTML & Recall
the syntax for creating nested lists in HTML.
3. To study the difference between HTML and CSS.
Given a webpage, identify which parts are controlled
by HTML and which parts are controlled by CSS.
4. To describe the purpose of Cascading Style
Sheets (CSS) in web development. Explain the
concept of inserting CSS in web pages and how
it can be used to simplify web design.
5. Apply the concepts of HTML and CSS to design a
simple webpage that incorporates basic formatting,
images tables, and links.
6. Choose a website that you are interested in and open
its homepage. Analyze the webpage and identify its
different elements and attributes.
7. Evaluate the use of different web frameworks
such as React, Angular, or Vue.
8. Create a PHP program that accepts user input and

performs a specific task such as generating random
number, calculating the factorial of a number, or
printing the Fibonacci series.
9. Implement a PHP program to validate form input and
display an error message if necessary.
10. Design and develop a web solution that

incorporates a variety of technologies and
programming languages to address a
specific problem or need.
Practical No.1
Aim: To study the basic tags used in HTML Write an HTML page to print
"Hello World".
HTML (Hypertext Markup Language) uses tags to structure content on a web page. Here are
some basic tags that you can use in HTML:
1. `<!DOCTYPE html>`: This tag specifies the version of HTML being used, and should be
placed at the beginning of an HTML document.
2. `<html></html>`: This tag defines the root element of an HTML document, and contains all
other HTML elements.
3. `<head></head>`: This tag contains meta information about the HTML document, such as
the title, stylesheets, and scripts.
4. `<title></title>`: This tag specifies the title of the HTML document, which appears in the
browser's title bar.
5. `<body></body>`: This tag contains the content of the HTML document, such as text,
images, and other HTML elements.
6. `<h1></h1>` to `<h6></h6>`: These tags are used to define headings of different levels, with
`<h1>` being the largest and most important heading.
7. `<p></p>`: This tag is used to define a paragraph of text.
8. `<a></a>`: This tag is used to create a hyperlink to another web page or a specific location
within the same page.
9. `<img>`: This tag is used to insert an image into an HTML document.
10. `<ul></ul>` and `<li></li>`: These tags are used to create an unordered list of items.
11. `<ol></ol>` and `<li></li>`: These tags are used to create an ordered list of items.
These are just a few of the basic HTML tags. There are many more tags that can be used to
structure and style content on a web page.
Here's a simple HTML program that displays "Hello, world!" in the web page:
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
In this program, the `<html>` tag defines the root element of the HTML document, and contains
all other HTML elements. The `<head>` tag contains meta information about the HTML
document, such as the title, which appears in the browser's title bar. The `<body>` tag contains
the content of the HTML document, and the `<h1>` tag defines a heading that displays "Hello,
world!" in the web page.
Save this code as a `.html` file and open it in a web browser to see the "Hello, world!" message
displayed in the page.
Output
Practical No. 2
Aim: To identify different types of lists in HTML & Recall the syntax for
creating nested lists in HTML.
In HTML, there are three types of lists:
1. Unordered lists (`<ul>`): An unordered list is a list of items that do not have a specific order
or sequence. Each item is marked with a bullet point or a similar marker. The `<ul>` tag is used
to define an unordered list.
2. Ordered lists (`<ol>`): An ordered list is a list of items that have a specific order or sequence.
Each item is numbered sequentially, starting from 1 by default. The `<ol>` tag is used to define
an ordered list.
3. Definition lists (`<dl>`): A definition list is a list of items and their definitions. The `<dl>`
tag is used to define a definition list. Each item is defined using the `<dt>` tag, and the definition
is given using the `<dd>` tag.
These are the three types of lists that can be used in HTML.
To create nested lists in HTML, you can simply include a new list element inside an existing
list item. The syntax for creating nested lists in HTML is as follows:
<html>
<head>
<title> Nested List </title>
<head>
<body>
<ul>
<li>List item 1
<ul>
<li>Nested list item 1</li>
</ul>
</li>
<li>List item 2
<ul>
</ul>
</li>
</ul>
<body>
</html>
You can also create nested ordered lists or definition lists in a similar way by including an
`<ol>` or `<dl>` tag inside an existing list item.
Output
Practical No.3
Aim: To study the difference between HTML and CSS. Given a webpage,
identify which parts are controlled by HTML and which parts are controlled
by CSS.
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two separate but
interrelated technologies used for creating websites.
HTML is a markup language used to create the structure and content of web pages. It uses a
set of tags and attributes to define various elements of a web page such as headings, paragraphs,
images, links, forms, tables, and more. HTML provides the basic structure of a web page and
is responsible for defining the content and layout of the page.
CSS, on the other hand, is a style sheet language used to describe the presentation of a web
page. It is used to define the visual appearance of the HTML elements defined in the web page,
such as the font style, color, size, background color, layout, and more. CSS provides the visual
style and layout of a web page and is responsible for making the page look visually appealing.
In other words, HTML provides the content and structure of a web page, while CSS provides
the style and layout. HTML is used to define the structure of the content, and CSS is used to
define the presentation of the content. HTML defines the various elements of a web page, and
CSS defines how those elements should be displayed.
In summary, HTML and CSS are two separate but complementary technologies used for
creating websites. HTML defines the structure and content of a web page, while CSS defines
the style and layout of the page. Together, they allow web designers and developers to create
visually appealing and well-structured web pages.
Let's take the example of the Google homepage (https://www.google.com/) to identify the
parts of a webpage controlled by HTML and CSS.
HTML Controls:
- The search box: The search box is an HTML form element created using the `<form>` tag,
with an input field created using the `<input>` tag.
- The Google logo: The Google logo is an image element created using the `<img>` tag.
- The search button: The search button is a button element created using the `<button>` tag.
CSS Controls:
- The background color of the page: The background color of the Google homepage is
controlled by CSS using the `background-color` property.
- The font family and size used for text: The font family and size used for text on the Google
homepage is controlled by CSS using the `font-family` and `font-size` properties.
- The layout and positioning of elements on the page: The layout and positioning of elements
on the Google homepage is controlled by CSS using various layout and positioning properties
such as `display`, `position`, `margin`, and `padding`.
- The style and appearance of the search box and button: The style and appearance of the search
box and button are controlled by CSS using various styling properties such as `border`,
`background-color`, `color`, `padding`, and `box-shadow`.
In summary, the HTML controls the structure and content of the webpage, while the CSS
controls the presentation and style of the webpage. Together, they allow web designers and
developers to create visually appealing and well-structured web pages.
Output
Practical No. 4
Aim: To describe the purpose of Cascading Style Sheets (CSS) in web

development. Explain the concept of inserting CSS in web pages and how it
can be used to simplify web design.
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation and
layout of web pages. The purpose of CSS in web development is to separate the presentation
of a web page from its content, which is defined using HTML. This separation allows web
designers and developers to create more flexible, scalable, and maintainable web pages.
By using CSS, web developers can create a consistent visual style and layout for a website,
making it more visually appealing and user-friendly. CSS allows developers to control the size,
color, font, spacing, and other visual aspects of HTML elements, giving them greater control
over the appearance of the website.
In addition to improving the visual design of a website, CSS also helps to simplify the webpage.
By using external style sheets, developers can apply the same styles across multiple pages,
making it easier to maintain and update the website. CSS also allows developers to override
default browser styles, which can improve the consistency of the website across different
browsers and devices.
To insert CSS into an HTML document, developers can use one of three methods:
1. Inline CSS: This involves adding CSS directly to an HTML element using the `style`
attribute.
2. Internal CSS: This involves adding CSS within the `<head>` section of an HTML document
using the `<style>` tag.
3. External CSS: This involves creating a separate CSS file and linking it to the HTML
document using the `<link>` tag in the `<head>` section.
External CSS is the most commonly used method, as it allows for greater separation of content
and style, and enables developers to apply the same styles across multiple pages. By using
external CSS, developers can simplify the HTML code of the webpage, making it easier to read
and maintain, and improving the overall performance of the website.
INPUT
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>

<style>
.header {
background-color: lightblue;
padding: 10px;
text-align: center;
font-size: 24px;
.main-content {
margin-top: 20px;
padding: 20px;
background-color: lightgray;
text-align: center;
font-size: 18px;
</style>

<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>


<div style="background-color: lightgreen; padding: 10px; text-align: center; font-size:
20px;">
<h1>Inline CSS</h1>
<p>This is an example of inline CSS styling.</p>
</div>

<div class="header">
<h1>Internal CSS</h1>
<p>This is an example of internal CSS styling.</p>
</div>

<div class="main-content">
<h1>External CSS</h1>
<p>This is an example of external CSS styling.</p>
</div>
</body>
</html>
OUTPUT
Practical No.5
Aim: Apply the concepts of HTML and CSS to design a simple webpage that
incorporates basic formatting, images tables, and links.
Here is an example of a simple webpage that incorporates basic formatting, images, tables, and
links using HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>My Simple Webpage</title>
<style>
/* CSS Styles */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;}
h1 {
color: #0057e7;
text-align: center; }
img {
display: block;
margin: auto;
width: 50%;
height: auto; }
table {
border-collapse: collapse;
margin: auto; }
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;}
th {
background-color: #0057e7;
color: white; }
a{
color: #0057e7 }
</style>
</head>
<body>

<h1>Welcome to my webpage!</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Grosser_Panda.JPG"
alt="Placeholder Image">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
</tr>
<tr>

</tr>
<tr>
</tr>
</table>
<p>Go to <a href="https://www.google.com">Google</a> for more information.</p>
</body>
</html>
Output
Practical No. 6
Aim: Choose a website that you are interested in and open its homepage.
Analyze the webpage and identify its different elements and attributes.
Let's take the homepage of Wikipedia (https://www.wikipedia.org/) as an example:
1. Header: The header section of the webpage includes the Wikipedia logo and search bar.
2. Navigation bar: The navigation bar is located below the header section and includes links to
various Wikipedia pages, such as "Random article", "Help", and "Contact us".
3. Main content area: This area occupies most of the webpage and displays a selection of
featured articles and news items.
4. Sidebar: The sidebar is located on the right-hand side of the page and includes links to other
language versions of Wikipedia, tools for editing and contributing to Wikipedia, and recent
changes to articles.
5. Footer: The footer section of the webpage includes links to important pages such as "About
Wikipedia", "Community portal", "Donate", and "Privacy policy".
6. Links: Throughout the webpage, there are links to other Wikipedia articles, external
websites, and citations.
7. Images: The main content area and sidebar include images related to the articles and topics
being featured.
8. Text: The webpage includes text content, such as article titles, summaries, and descriptions.
9. HTML attributes: The webpage uses HTML attributes such as "class", "id", and "style" to
define the formatting and layout of the various elements on the page.
10. CSS attributes: The webpage also uses CSS attributes such as "color", "font-size", and
"padding" to control the styling and appearance of the elements on the page.
Overall, the Wikipedia homepage is well-designed and user-friendly, with a clear and consistent
layout and easy-to-navigate menu options.
OUTPUT
Practical No.7
Aim: Evaluate the use of different web frameworks such as React, Angular,
or Vue.
React
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for
building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a
community of individual developers and companies.
React can be used to develop single-page, mobile, or server-rendered applications with frameworks
like Next.js. Because React is only concerned with the user interface and rendering components to the
DOM, React applications often rely on libraries for routing and other client-side functionality
Notable features
Declarative
React adheres to the declarative programming paradigm. Developers design views for each state of an
application, and React updates and renders components when data changes. This is in contrast with
imperative programming.[10]
Components
React code is made of entities called components. These components are modular and reusable. React
applications typically consist of many layers of components. The components are be rendered to a root
element in the DOM using the React DOM library. When rendering a component, values are passed
between components through props (short for "properties"). Values internal to a component are called
its state.
The two primary ways of declaring components in React are through function components and class
components.
import React from "react";
/** A pure component that displays a message with the current count */
const CountDisplay = props => {
// The count value is passed to this component as props
const { count } = props;
return (<div>The current count is {count}.</div>);
/** A component that displays a message that updates each time the button is clicked */
const Counter = () => {
// The React useState Hook is used here to store and update the
// total number of times the button has been clicked.

const [count, setCount] = React.useState(0);
return (
<div className="counter">
<CountDisplay count={count} />
<button onClick={() => setCount(count + 1)}>Add one!</button>
</div>
); };
Function components
Function components are declared with a function (using JavaScript function syntax or an arrow
function expression) that accepts a single "props" argument and returns JSX. From React v16.8
onwards, function components can use state with the useState Hook.
Angular
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is easy to learn.AngularJS History
AngularJS version 1.0 was released in 2012.
Miško Hevery, a Google employee, started to work with AngularJS in 2009.
The idea turned out very well, and the project is now officially supported by Google.
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
.
Vue:
Vue is a progressive front-end framework that is easy to learn and use. It is ideal for building
small to medium-sized applications. Vue uses a component-based architecture similar to React,
making it easy to reuse and manage components. Vue has a small size, making it fast and
performant. Some of the strengths of Vue include its simplicity, flexibility, and great
documentation. However, Vue has a smaller community compared to React and Angular, which
can lead to fewer available resources and third-party libraries.
In summary, React, Angular, and Vue are all great front-end frameworks with their unique
strengths and weaknesses. The choice of framework depends on the project's requirements, the
development team's expertise, and the project's constraints such as size, performance, and
complexity. It is crucial to evaluate and choose the appropriate framework that best fits the
project's needs.
Practical No. 8
Aim: Create a PHP program that accepts user input and performs a specific
task such as generating random number, calculating the factorial of a
number, or printing the Fibonacci series.
Here's an example PHP program to calculating the factorial of a number:
<?php
$num = 4;
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
echo "Factorial of $num is $factorial";
?>
OUTPUT
Here's an example PHP program printing the Fibonacci series:
?php
$num = 0;
$n1 = 0;
$n2 = 1;
echo "<h3>Fibonacci series for first 12 numbers: </h3>";
echo "\n";
echo $n1.' '.$n2.' ';

while ($num < 10 )
{
$n3 = $n2 + $n1;
echo $n3.' ';
$n1 = $n2;
$n2 = $n3;
$num = $num + 1;
?>
OUTPUT
Here's an example PHP program that accepts user input and performs the task of
generating a random number:
<?php
// Input section
// $a = 10
$a = (int)readline('Enter an integer: ');
// $b = 9.78
$b = (float)readline('Enter a floating'
. ' point number: ');
// Entered integer is 10 and

// entered float is 9.78
echo "Entered integer is " . $a
. " and entered float is " . $b;
?>
OUTPUT
Enter an integer: 10
Enter a floating point number: 9.78
Entered integer is 10 and entered float is 9.78

Practical No.9
Aim: Implement a PHP program to validate form input and display an error
message if necessary.
Here's an example PHP program that validates form input and displays an error message if
necessary:
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0001;}

</style>
</head>
<body>
<?php // define variables to empty values
$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";

$name = $email = $mobileno = $gender = $website = $agree = "";
//Input fields validation
if ($_SERVER["REQUEST_METHOD"] == "POST") {
//String Validation
if (emptyempty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = input_data($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only alphabets and white space are allowed";
} }
//Email Validation
if (emptyempty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = input_data($_POST["email"]);
// check that the e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
} }
//Number Validation
if (emptyempty($_POST["mobileno"])) {
$mobilenoErr = "Mobile no is required";
} else {
$mobileno = input_data($_POST["mobileno"]);
// check if mobile no is well-formed

if (!preg_match ("/^[0-9]*$/", $mobileno) ) {
$mobilenoErr = "Only numeric value is allowed.";
}
//check mobile no length should not be less and greator than 10
if (strlen ($mobileno) != 10) {

$mobilenoErr = "Mobile no must contain 10 digits.";
} }
//URL Validation
if (emptyempty($_POST["website"])) {
$website = "";
} else {
$website = input_data($_POST["website"]);
// check if URL address syntax is valid
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=_|!:,.;]*[-a-z0-
9+&@#\/%=_|]/i",$website)) {
$websiteErr = "Invalid URL";
} }
//Empty Field Validation
if (emptyempty ($_POST["gender"])) {
$genderErr = "Gender is required";

} else {
$gender = input_data($_POST["gender"]);
}
//Checkbox Validation
if (!isset($_POST['agree'])){
$agreeErr = "Accept terms of services before submit.";
} else {
$agree = input_data($_POST["agree"]);
} }
function input_data($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>Registration Form</h2>
<span class = "error">* required field </span>
<br><br>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >

Name:
<input type="text" name="name">
<span class="error">* <?php echo $nameErr; ?> </span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr; ?> </span>
<br><br>
Mobile No:
<input type="text" name="mobileno">
<span class="error">* <?php echo $mobilenoErr; ?> </span>
<br><br>
Website:
<input type="text" name="website">

<span class="error"><?php echo $websiteErr; ?> </span>
<br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other
<span class="error">* <?php echo $genderErr; ?> </span>
<br><br>
Agree to Terms of Service:
<input type="checkbox" name="agree">

<span class="error">* <?php echo $agreeErr; ?> </span>
<br><br>
<input type="submit" name="submit" value="Submit">
<br><br>
</form>
<?php
if(isset($_POST['submit'])) {
if($nameErr == "" && $emailErr == "" && $mobilenoErr == "" && $genderErr == "" &&
$websiteErr == "" && $agreeErr == "") {
echo "<h3 color = #FF0001> <b>You have sucessfully registered.</b> </h3>";
echo "<h2>Your Input:</h2>";
echo "Name: " .$name;
echo "<br>";
echo "Email: " .$email;
echo "<br>";
echo "Mobile No: " .$mobileno;
echo "<br>";
echo "Website: " .$website;
echo "<br>";
echo "Gender: " .$gender;

} else {
echo "<h3> <b>You didn't filled up the form correctly.</b> </h3>";
} }
?>
OUTPUT
Practical No. 10
Aim: Design and develop a web solution that incorporates a variety of

technologies and programming languages to address a specific problem or
need.
Problem:
A team of developers needs a way to manage their tasks and projects more efficiently. They
have been using spreadsheets and email communication, but it has become cumbersome and
time-consuming to track progress, assign tasks, and communicate updates.
Solution:
A web application that allows the team to manage their tasks and projects in a central location,
with real-time updates, notifications, and collaboration features.
Technologies and Programming Languages:
- Front-end: HTML, CSS, JavaScript, React, Redux, Bootstrap
- Back-end: Node.js, Express.js, MongoDB, Mongoose
- API: RESTful API
- Authentication: JSON Web Tokens (JWT)
- Hosting: Amazon Web Services (AWS), Elastic Beanstalk
Design and Development:
1. Requirements Gathering: The team discusses their requirements and preferences for the
web application, including features such as task management, project management, real-time
updates, notifications, and collaboration features. They also discuss the user interface and user
experience they would prefer.
2. Design: The team creates wireframes and mockups of the web application using Figma or
Adobe XD to visualize the user interface and user experience. They also discuss the database
schema and API endpoints needed for the web application.
3. Front-end Development: The team uses HTML, CSS, JavaScript, React, Redux, and
Bootstrap to create the user interface and user experience. They also integrate the authentication
mechanism using JWT, allowing users to log in and access their tasks and projects.
4. Back-end Development: The team uses Node.js and Express.js to create a RESTful API
that communicates with the MongoDB database using Mongoose. They create API endpoints
for managing tasks and projects, as well as user authentication and authorization.
5. Deployment: The team deploys the web application to AWS Elastic Beanstalk, a scalable
hosting service that can handle the traffic and load of the application. They also configure the
necessary security settings and access controls to ensure the web application is secure and only
accessible to authorized users.
6. Testing and Debugging: The team tests the web application thoroughly, using automated
tests and manual testing to identify and fix any bugs or issues. They also ensure the web
application is responsive and accessible on different devices and browsers.
7. Maintenance and Updates: The team continues to maintain and update the web application,
adding new features and fixing any issues that arise. They also gather feedback from users and
make improvements to the user interface and user experience based on their feedback.
Overall, this web solution addresses the problem of managing a team's tasks and projects
efficiently by providing a central location for managing and tracking progress, as well as real-
time updates and collaboration features. It incorporates a variety of technologies and
programming languages to provide a robust and scalable solution that can handle the needs of
a growing team.
INPUT:
const toggleBtn = document.querySelector("#toggle-btn");
const navMenu = document.querySelector("#nav-menu");
const tabsContainer = document.querySelector(".process__tabs-container");
const tabs = document.querySelectorAll(".process__tab");
const tabsContent = document.querySelectorAll(".process__content");
const header = document.querySelector(".header");
const nav = document.querySelector(".nav");
function showMenu() {
navMenu.classList.toggle("h-0")
navMenu.classList.toggle("opacity-0")
// toggle btn for mobile menu
toggleBtn.addEventListener("click", showMenu)
// Navigation Links
navMenu.addEventListener("click", function(e) {
e.preventDefault();
if (e.target.classList.contains("nav-link")) {
const id = e.target.getAttribute("href");
document.querySelector(id).scrollIntoView({behavior: "smooth"});
// Hide menu after click
navMenu.classList.add("h-0");
navMenu.classList.add("opacity-0");
}});
// tabs functionality
tabsContainer.addEventListener("click", function(e) {
const clicked = e.target.closest(".process__tab");
if (!clicked) return;
tabs.forEach(t => t.classList.remove("active"));
tabsContent.forEach(c => c.classList.remove("process__content-active"));
clicked.classList.add("active");
document.querySelector(`.process_content--${clicked.dataset.tab}`).classList.add("process_content-
active");
})
const questions = document.querySelectorAll(".single-faq")
questions.forEach(question => {
const questionBtn = question.querySelector(".faq-btn")
const questionContent = question.querySelector(".faq-content")
questionBtn.addEventListener("click", () => {
questionContent.classList.toggle("hidden")
}) })
const navHeight = nav.getBoundingClientRect().height;
const stickyNav = function(entries) {
const [entry] = entries;
if (!entry.isIntersecting) nav.classList.add("sticky");
else nav.classList.remove("sticky");
const headerObserver = new IntersectionObserver(stickyNav, {
root: null,
threshold: 0,
rootMargin: `-${navHeight}px`,
})
headerObserver.observe(header);
// reveal sections
const sections = document.querySelectorAll(".section");
const revealSection = function(entries, observer) {
const [entry] = entries;
console.log(entry);
if (!entry.isIntersecting) return;
entry.target.classList.remove("section__hidden");
observer.unobserve(entry.target);
const sectionObserver = new IntersectionObserver(revealSection, {
root: null,
threshold: 0.15,
})
sections.forEach(section => {
sectionObserver.observe(section);
section.classList.add("section__hidden");
})
OUTPUT

saksham1 (1)

Uploaded by

Copyright:

Available Formats

saksham1 (1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

saksham1 (1)

Uploaded by

Copyright:

Available Formats

Vaish College of Engineering, Rohtak

Submitted To : Submitted By:

S.No Name of Program Signature

1. To study the basic tags used in HTML Write an

8. Create a PHP program that accepts user input and

10. Design and develop a web solution that

7. `<p></p>`: This tag is used to define a paragraph of text.

9. `<img>`: This tag is used to insert an image into an HTML document.

<title> Nested List </title>

<li>Nested list item 1</li>

<li>Nested list item 2</li>

<li>Nested list item 2</li>

Aim: To describe the purpose of Cascading Style Sheets (CSS) in web

<link rel="stylesheet" type="text/css" href="styles.css">

<p>This is an example of inline CSS styling.</p>

<p>This is an example of internal CSS styling.</p>

<p>This is an example of external CSS styling.</p>

<title>My Simple Webpage</title>

font-family: Arial, sans-serif;

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

<p>Go to <a href="https://www.google.com">Google</a> for more information.</p>

import React from "react";

const CountDisplay = props => {

// The count value is passed to this component as props

const { count } = props;

return (<div>The current count is {count}.</div>);

const Counter = () => {

// total number of times the button has been clicked.

<CountDisplay count={count} />

<button onClick={() => setCount(count + 1)}>Add one!</button>

AngularJS is perfect for Single Page Applications (SPAs).

AngularJS is easy to learn.AngularJS History

AngularJS version 1.0 was released in 2012.

Miško Hevery, a Google employee, started to work with AngularJS in 2009.

<p>Name : <input type="text" ng-model="name"></p>

Here's an example PHP program to calculating the factorial of a number:

echo $n1.' '.$n2.' ';

$a = (int)readline('Enter an integer: ');

// Entered integer is 10 and

Entered integer is 10 and entered float is 9.78

.error {color: #FF0001;}

$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";

// check if mobile no is well-formed

if (strlen ($mobileno) != 10) {

$genderErr = "Gender is required";

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >

<input type="text" name="website">