Explain Event handling in Node.js with suitable example
In Node.js, event handling is an essential aspect of asynchronous programming. It allows you
to respond to different events, such as incoming requests, file system operations, timers, and
more, without blocking the execution of the program. Node.js's event-driven architecture
relies heavily on the EventEmitter class, which is a core module in Node.js.
const EventEmitter = require('events');
// Step 2: Create an instance of EventEmitter
const myEmitter = new EventEmitter();
// Step 3: Define event listeners
myEmitter.on('myEvent', (data) => {
console.log('Event received with data:', data);
});
// Step 4: Emit events
myEmitter.emit('myEvent', { message: 'Hello, Node.js!' });
output : Event received with data: { message: 'Hello, Node.js!' }
Write a program for multiplication of 2 numbers using event handling in node. js. Call
multiplication function as an event call.
// index.js
const events = require('events');
const eventEmitter = new events.EventEmitter();
// Function to perform multiplication
function multiply(num1, num2) {
return num1 * num2;
}
// Event handler for the 'multiply' event
eventEmitter.on('multiply', (num1, num2) => {
const result = multiply(num1, num2);
1|AIT
console.log(`Multiplication result: ${result}`);
});
// Call the 'multiply' event with the numbers as arguments
eventEmitter.emit('multiply', 5, 7);
Write a program to show current date and time using user defined module in node. js.
// datetime.js
function getCurrentDateTime() {
const currentDate = new Date();
return currentDate.toString();
}
module.exports = getCurrentDateTime;
// app.js
const getCurrentDateTime = require('./datetime');
const currentDateTime = getCurrentDateTime();
console.log('Current Date and Time:', currentDateTime);
What is HTML5. Write Features and advantages
HTML5, short for HyperText Markup Language 5, is the latest version of the standard markup
language used for structuring and presenting content on the World Wide Web. It is a
significant improvement over its predecessor, HTML 4, and has become the foundation of
modern web development due to its enhanced capabilities and features. Below are some of
the key features and advantages of HTML5:
Features of HTML5:
1. **Semantic Elements:** HTML5 introduced new semantic elements like `<header>`,
`<footer>`, `<nav>`, `<article>`, `<section>`, and more, which provide better structure and
meaning to the content. This helps search engines and screen readers to understand the
webpage's content more accurately, improving accessibility and SEO.
2|AIT
2. **Multimedia Support:** HTML5 brought native support for embedding multimedia
elements, such as `<audio>` and `<video>`, directly into web pages without the need for
third-party plugins like Flash. This allows seamless integration of multimedia content, making
it easier for developers to implement and for users to enjoy.
3. **Canvas:** The `<canvas>` element enables dynamic rendering of graphics and
animations using JavaScript. It has become the foundation for many web-based games and
interactive visualizations.
4. **SVG (Scalable Vector Graphics):** HTML5 supports SVG, which allows developers to
create vector graphics and illustrations that scale smoothly without losing quality. This is
particularly useful for responsive web design.
5. **Offline Web Applications:** HTML5 introduced the Application Cache (AppCache)
feature, which enables web applications to work offline or in low-network conditions.
Developers can specify which resources should be cached, allowing users to access the
application even without an internet connection.
6. **Geolocation:** HTML5 provides built-in geolocation support, allowing websites to
access a user's geographical location through JavaScript. This enables location-aware web
applications and services.
7. **Form Enhancements:** HTML5 introduced new form input types, such as `<input
type="date">`, `<input type="email">`, `<input type="number">`, etc., along with form
validation capabilities using attributes like `required` and `pattern`. This makes form handling
more user-friendly and efficient.
8. **Web Workers:** Web Workers allow developers to run scripts in the background,
separate from the main browser thread. This enables concurrent processing, preventing the
user interface from becoming unresponsive during heavy tasks.
9. **Web Storage:** HTML5 introduced the `localStorage` and `sessionStorage` APIs, which
allow web applications to store data on the client-side. This helps in creating more efficient
and responsive web applications.
Advantages of HTML5:
1. **Cross-platform compatibility:** HTML5 is supported by all modern web browsers,
making it a highly cross-platform solution. Web pages and applications built using HTML5 can
run on various devices, including desktops, laptops, tablets, and smartphones.
2. **Better Mobile Support:** HTML5's responsive design features and multimedia
capabilities make it ideal for mobile devices, providing a more engaging and interactive user
experience on smartphones and tablets.
3|AIT
3. **Improved SEO:** The use of semantic elements in HTML5 helps search engines better
understand the structure and content of web pages, leading to improved search engine
rankings and visibility.
4. **Reduced Dependency on Plugins:** HTML5's native support for multimedia and other
interactive elements reduces the need for third-party plugins like Flash, resulting in faster
loading times and better security.
5. **Enhanced User Experience:** With features like geolocation, offline web applications,
and improved multimedia support, HTML5 enables developers to create more interactive,
feature-rich, and user-friendly web applications.
6. **Faster Development and Maintenance:** HTML5's improved syntax, along with its
additional form elements and attributes, simplifies web development and maintenance,
resulting in faster and more efficient coding.
7. **Backward Compatibility:** While HTML5 introduces new elements and features, it is
designed with backward compatibility in mind. Older web browsers may not support all
HTML5 features, but they will still be able to display the content gracefully.
Write a PHP script to design a form for exam registration. Insert 5 records in database and
display all the inserted records on new page
exam_registration_form.php (Form page):
<!DOCTYPE html>
<html>
<head>
<title>Exam Registration Form</title>
</head>
<body>
<h2>Exam Registration Form</h2>
<form action="insert_records.php" method="post">
<label for="name">Name:</label>
<input type="text" name="name" required><br>
<label for="email">Email:</label>
<input type="email" name="email" required><br>
4|AIT
<label for="subject">Subject:</label>
<input type="text" name="subject" required><br>
<label for="exam_date">Exam Date:</label>
<input type="date" name="exam_date" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
insert_records.php (To insert data into the database):
<?php
// Assuming you have already established the database connection here.
// Check if the form data is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$exam_date = $_POST["exam_date"];
// Perform the database insert query
$query = "INSERT INTO students (name, email, subject, exam_date)
VALUES ('$name', '$email', '$subject', '$exam_date')";
$result = mysqli_query($connection, $query);
// Redirect to the display page after insertion
header("Location: display_records.php");
exit;
}
?>
5|AIT
display_records.php (To display all the inserted records):
<?php
// Assuming you have already established the database connection here.
// Retrieve all records from the database
$query = "SELECT * FROM students";
$result = mysqli_query($connection, $query);
// Display the records in a table
echo "<h2>Registered Students</h2>";
echo "<table border='1'>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Subject</th>
<th>Exam Date</th>
</tr>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['subject'] . "</td>";
echo "<td>" . $row['exam_date'] . "</td>";
echo "</tr>";
}
echo "</table>";
// Close the database connection
mysqli_close($connection);
6|AIT
?>
Write PHP code to display students belongs to management department & age is in
between 21-30 years & store found records into another table (Assume suitable table
structure)
<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Step 1: Select students belonging to the management department and aged between 21
and 30 years
$sql = "SELECT * FROM students WHERE department = 'Management' AND age BETWEEN 21
AND 30";
$result = $conn->query($sql);
// Step 2: Insert found records into the 'selected_students' table
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$name = $row['name'];
$department = $row['department'];
$age = $row['age'];
// Insert the record into 'selected_students' table
7|AIT
$insert_sql = "INSERT INTO selected_students (name, department, age) VALUES
('$name', '$department', $age)";
if ($conn->query($insert_sql) !== TRUE) {
echo "Error inserting record: " . $conn->error;
}
}
} else {
echo "No records found.";
}
// Close the database connection
$conn->close();
?>
write a program to display string in uppercase and lowercase using angular js filter
Step 1: Set up the HTML file with AngularJS library and the app module.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Filter Example</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<p>Original String: {{ inputString }}</p>
<p>Uppercase: {{ inputString | uppercase }}</p>
<p>Lowercase: {{ inputString | lowercase }}</p>
</div>
<script src="app.js"></script>
8|AIT
</body>
</html>
Step 2: Create the app.js file and define the AngularJS module and controller.
// app.js
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.inputString = "Hello, AngularJS!";
});
Output :
Original String: Hello, AngularJS!
Uppercase: HELLO, ANGULARJS!
Lowercase: hello, angularjs!
explain ng-app, ng-model and ng-bind with suitable example
Sure! In AngularJS, `ng-app`, `ng-model`, and `ng-bind` are directives used to enhance the
behavior and functionality of HTML elements. They are part of the AngularJS framework and
allow you to create dynamic and interactive web applications.
1. `ng-app` Directive:
The `ng-app` directive is used to bootstrap an AngularJS application. It defines the root of the
AngularJS application and specifies which part of the HTML document will be under
AngularJS's control. You can apply this directive to the `<html>` or any other HTML element
that serves as the root of your application.
Example:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ng-app Example</title>
9|AIT
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<!-- AngularJS content goes here -->
</div>
</body>
</html>
2. `ng-model` Directive:
The `ng-model` directive is used to bind the value of an HTML element (input, select,
textarea) to a property in the AngularJS model. It creates a two-way data binding, which
means any changes in the input element will automatically update the model, and vice versa.
Example:
<div ng-controller="myController">
<input type="text" ng-model="name">
<p>Hello, {{ name }}</p>
</div>
3. `ng-bind` Directive:
The `ng-bind` directive is used to bind the content of an HTML element to an expression in
the AngularJS model. It is similar to using double curly braces `{{ }}`, but it ensures that the
binding is only done once and not displayed as "{{ expression }}" during the initial loading of
the page.
Example:
<div ng-controller="myController">
<p ng-bind="message"></p>
</div>
JavaScript (controller) code to accompany the examples:
10 | A I T
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.name = '';
$scope.message = 'Welcome to AngularJS!';
});
what is node js. explain working and features
Node.js is an open-source, server-side, and cross-platform JavaScript runtime environment
built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript code outside
of a web browser, making it possible to create powerful and scalable server-side applications.
Node.js uses an event-driven, non-blocking I/O model, which makes it efficient and suitable
for real-time applications and data-intensive tasks.
1. Working of Node.js:
Node.js applications are structured around asynchronous, event-driven programming. The
key components of its working are:
- Event Loop: Node.js utilizes an event loop that continuously listens for incoming events,
such as HTTP requests, file I/O operations, or timers. When an event occurs, it triggers a
callback function associated with that event, allowing the program to respond to events
without blocking the execution.
- Non-blocking I/O: Node.js uses non-blocking I/O operations, which means it can handle
multiple requests simultaneously without waiting for each operation to complete. This is
achieved through asynchronous I/O calls, enabling Node.js to handle many concurrent
connections efficiently.
- Single-threaded: Node.js runs in a single thread, but it uses asynchronous operations and
an event loop to manage multiple concurrent tasks efficiently. This design makes it suitable
for handling a large number of connections without the need for creating separate threads
for each request.
2. Key Features of Node.js:
- Fast and Efficient: Node.js is built on the V8 JavaScript engine, which is known for its speed
and performance. The non-blocking I/O and event-driven architecture contribute to its
efficiency, making it ideal for real-time applications.
11 | A I T
- Scalable: Node.js can handle a large number of concurrent connections efficiently, making
it highly scalable. It is well-suited for building scalable network applications and servers.
- NPM (Node Package Manager): Node.js comes with NPM, a powerful package manager
that provides access to a vast ecosystem of open-source modules and libraries. NPM
simplifies dependency management and allows developers to reuse code easily.
- Cross-platform: Node.js applications can be run on various platforms, including Windows,
macOS, and Linux, without modification. This cross-platform compatibility makes it flexible
and accessible.
- Server-side and Networking Capabilities: Node.js is widely used for creating server-side
applications and APIs. It excels at handling HTTP requests, making it a popular choice for web
servers and APIs. Additionally, Node.js can be used for networking tasks, such as chat
applications, real-time collaboration tools, and streaming applications.
- Large Community and Support: Node.js has a vibrant community of developers, which
means there are plenty of resources, tutorials, and libraries available. This community
support fosters continuous improvement and helps developers find solutions to various
challenges.
Node.js is a powerful and efficient runtime environment for executing JavaScript code
on the server-side. Its event-driven, non-blocking I/O model enables it to handle large
numbers of concurrent connections efficiently, making it suitable for building scalable and
real-time applications. With its rich ecosystem and community support, Node.js has become
a popular choice for web developers and is widely used to build a wide range of applications.
what is cookies and session in php
In PHP, cookies and sessions are mechanisms used to manage and maintain state information
between a web server and a client (typically a web browser). They are essential tools for
handling user-specific data and providing personalized experiences on websites.
1. Cookies:
Cookies are small pieces of data that are stored on the client's browser. They are sent by the
server to the client's browser during an HTTP request and are included in subsequent
requests to the same server. Cookies are used to store information that the server wants to
remember between different requests from the same client.
Key features of cookies:
- Persistence: Cookies can have an expiration date, and they can persist on the client's
browser even after the browser is closed and the user revisits the website.
12 | A I T
- Size Limit: Cookies have a limited size (usually a few kilobytes), so they are best suited for
storing small amounts of data.
- Client-Side Storage: Cookies are stored on the client's side, making them accessible to
JavaScript code running in the browser.
// Set a cookie named "username" with the value "JohnDoe" that expires in 1 day
setcookie('username', 'JohnDoe', time() + (86400), '/');
2. Sessions:
Sessions are another way to maintain state information between the server and the client,
but they work differently than cookies. Instead of storing data on the client's browser, session
data is stored on the server-side. A unique identifier (usually a session ID) is sent to the
client's browser as a cookie. The client then sends back this session ID with each request,
allowing the server to retrieve the corresponding session data.
Key features of sessions:
- Server-Side Storage: The session data is stored on the server, making it more secure and
capable of handling larger amounts of data.
- Expiration: Sessions typically have an expiration time, and the session data is removed from
the server after a period of inactivity.
- No Size Limit: Sessions do not have a size limit like cookies, so they can store larger amounts
of data.
// Start the session
session_start();
// Store data in the session
$_SESSION['username'] = 'JohnDoe';
what is pseudo classes in css. explain suitable example
In CSS, pseudo-classes are keywords that allow you to select and style elements based on
their current state or specific interactions. They start with a colon (:) and follow the selector.
Pseudo-classes are used to add special effects or styles to elements that cannot be achieved
with regular selectors alone.
13 | A I T
:hover Pseudo-class:
The :hover pseudo-class is used to select and style an element when the user hovers over it
with the mouse pointer. This is commonly used to provide visual feedback and create
interactive effects when the user interacts with elements on a webpage.
<!DOCTYPE html>
<html>
<head>
<title>:hover Pseudo-class Example</title>
<style>
/* Style the anchor (link) element normally */
a{
color: blue;
text-decoration: none;
}
/* Apply styles when the anchor is being hovered over */
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Move your mouse over the link below:</p>
<a href="#">Hover over me</a>
</body>
</html>
14 | A I T
what are objectives of css architecture
CSS architecture refers to the way CSS code is organized and structured in large-scale projects
to promote maintainability, scalability, and reusability. The main objectives of CSS
architecture are:
1. **Modularity:** CSS architecture aims to create independent and reusable modules,
where each module has a specific purpose and can be easily integrated into different parts
of the website without causing conflicts or unintended side effects.
2. **Scalability:** As web projects grow, the CSS codebase can become large and complex.
CSS architecture aims to manage this complexity by providing guidelines on how to organize
code, use naming conventions, and create hierarchies, allowing the project to scale smoothly
without losing maintainability.
3. **Maintainability:** A well-structured CSS architecture makes it easier for developers to
understand, modify, and maintain the codebase. It reduces the chances of introducing bugs
and ensures that changes can be made with confidence without breaking existing styles.
4. **Consistency:** CSS architecture enforces consistent naming conventions, coding styles,
and patterns across the entire project. This consistency makes it easier for developers to
collaborate, improves code readability, and helps maintain a cohesive design across different
parts of the website.
5. **Performance:** CSS architecture encourages optimized and efficient code, which can
lead to faster loading times and improved website performance.
6. **Team Collaboration:** In large teams, multiple developers may work on the same
project. CSS architecture provides a common set of guidelines and rules, allowing developers
to collaborate more effectively and reducing the likelihood of conflicts between code
contributions.
7. **Reusability:** CSS architecture promotes the creation of reusable components and
styles. This reusability not only saves development time but also ensures a consistent user
experience throughout the website.
8. **Responsive Design:** A well-thought-out CSS architecture can make it easier to
implement responsive design principles, allowing the website to adapt to various screen sizes
and devices seamlessly.
15 | A I T
explain routing in angular js with suitable example
As of my knowledge cutoff in September 2021, AngularJS is a popular front-end framework,
and it supports client-side routing using the `ngRoute` module. Routing in AngularJS allows
you to build single-page applications (SPAs) where the content changes dynamically
without requiring a full page reload. Instead of loading separate HTML pages for different
views, routing enables you to load and display different templates within the same page
based on the URL.
Step 1: Set up the HTML file with AngularJS library and the app module.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Routing Example</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
<div ng-view></div>
</div>
<script src="app.js"></script>
</body>
</html>
Step 2: Create the `app.js` file and define the AngularJS module and configure routing.
// app.js
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
16 | A I T
$routeProvider
.when('/', {
templateUrl: 'templates/home.html',
controller: 'homeController'
})
.when('/about', {
templateUrl: 'templates/about.html',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'templates/contact.html',
controller: 'contactController'
})
.otherwise({ redirectTo: '/' });
})
.controller('homeController', function($scope) {
$scope.message = 'Welcome to the Home page!';
})
.controller('aboutController', function($scope) {
$scope.message = 'This is the About page.';
})
.controller('contactController', function($scope) {
$scope.message = 'Contact us at contact@example.com';
});
write a program to show user full name using module in node js
Step 1: Create a new file named userInfo.js, which will act as our module.
// userInfo.js
17 | A I T
function getFullName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
module.exports = { getFullName };
Step 2: Create another file named main.js, which will use the userInfo module.
// main.js
const userInfo = require('./userInfo');
const firstName = 'John';
const lastName = 'Doe';
const fullName = userInfo.getFullName(firstName, lastName);
console.log('User\'s full name:', fullName);
explain audio, video, svg and canvas tag in HTML5 with suitable example
HTML5 introduced several new elements to enhance multimedia and graphics capabilities.
Here's an explanation of the `<audio>`, `<video>`, `<svg>`, and `<canvas>` tags in HTML5
along with suitable examples for each:
1. `<audio>` Tag:
The `<audio>` tag is used to embed audio content on a webpage. It allows you to play audio
files such as MP3, WAV, or OGG directly in the browser.
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h2>Sample Audio</h2>
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg">
18 | A I T
Your browser does not support the audio element.
</audio>
</body>
</html>
2. `<video>` Tag:
The `<video>` tag is similar to the `<audio>` tag, but it is used for embedding video content
on a webpage. It supports video formats such as MP4, WebM, and OGG.
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h2>Sample Video</h2>
<video controls width="640" height="360">
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>
3. `<svg>` Tag:
The `<svg>` tag is used to embed scalable vector graphics on a webpage. SVG is a format for
describing two-dimensional graphics and can be styled and manipulated using CSS and
JavaScript.
<!DOCTYPE html>
<html>
<head>
19 | A I T
<title>SVG Example</title>
</head>
<body>
<h2>SVG Example</h2>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</body>
</html>
4. `<canvas>` Tag:
The `<canvas>` tag is used to draw graphics and animations dynamically using JavaScript.
Unlike SVG, which uses a declarative approach, the `<canvas>` tag provides a procedural
drawing API.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<h2>Canvas Example</h2>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
black;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 80);
</script>
20 | A I T
</body>
</html>
what is define date and time function in php
In PHP, there are various built-in functions and classes to work with dates and times. These
functions allow you to manipulate dates, format them, perform calculations, and much more.
Here are some commonly used date and time functions in PHP:
date(): The date() function is used to format the current date and time according to a
specified format. It returns a formatted string representing the current date and time.
echo date('Y-m-d H:i:s'); // Output: 2023-07-26 10:30:15
time(): The time() function returns the current Unix timestamp, which is the number of
seconds since January 1, 1970 (Unix epoch).
echo time(); // Output: 1679871015 (the current Unix timestamp)
DateTime Class: PHP also provides the DateTime class, which is a more object-oriented way
to work with dates and times.
$dateTime = new DateTime('2023-07-26 10:30:00');
echo $dateTime->format('Y-m-d H:i:s'); // Output: 2023-07-26 10:30:00
$dateTime->modify('+1 day');
echo $dateTime->format('Y-m-d H:i:s'); // Output: 2023-07-27 10:30:00
differentiate GET and POST method. write php program to implement GET and POST
method
GET and POST are two commonly used HTTP methods in web development. They are used to
transfer data between the client (usually a web browser) and the server. Here are the key
differences between the GET and POST methods:
1. GET method:
- Data is sent as part of the URL query string.
- Limited data size: GET requests have restrictions on the amount of data that can be sent,
typically around 2048 characters. It is suitable for sending smaller amounts of data.
21 | A I T
- Visible in URL: The data sent using the GET method is visible in the URL, which means
sensitive data should not be sent via GET.
- Cached: GET requests can be cached by browsers, and the same URL can be bookmarked or
shared.
2. POST method:
- Data is sent in the request body.
- Larger data size: POST requests can handle larger data as the data is not limited by the URL
length.
- Not visible in URL: The data sent using the POST method is not visible in the URL, making it
more secure for sensitive information.
- Not cached: POST requests are not cached by browsers, and refreshing the page after a
POST request may prompt the user to resubmit the data.
1. GET Method Example:
<!DOCTYPE html>
<html>
<head>
<title>GET Method Example</title>
</head>
<body>
<h2>GET Method Example</h2>
<form action="get_example.php" method="GET">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="age"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
22 | A I T
//Create a PHP file named `get_example.php` to process the form data:
<?php
if (isset($_GET['name']) && isset($_GET['age'])) {
$name = $_GET['name'];
$age = $_GET['age'];
echo "Hello, $name! You are $age years old.";
} else {
echo "Please enter your name and age.";
}
?>
2. POST Method Example:
<!DOCTYPE html>
<html>
<head>
<title>POST Method Example</title>
</head>
<body>
<h2>POST Method Example</h2>
<form action="post_example.php" method="POST">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="age"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
23 | A I T
//Create a PHP file named `post_example.php` to process the form data:
<?php
if (isset($_POST['name']) && isset($_POST['age'])) {
$name = $_POST['name'];
$age = $_POST['age'];
echo "Hello, $name! You are $age years old.";
} else {
echo "Please enter your name and age.";
}
?>
what are semantic element and how its works in html5
Semantic elements in HTML5 are special tags that carry meaning and define the structure
and content of a web page in a more descriptive way. The use of semantic elements improves
the accessibility, search engine optimization (SEO), and maintainability of a web page. It helps
screen readers and search engines to understand the structure of the page better, which can
enhance the user experience and search rankings.
1. `<header>`:
The `<header>` element represents the introductory content of a section or page. It typically
contains the site's logo, navigation menu, or other introductory elements.
Example:
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
24 | A I T
</ul>
</nav>
</header>
2. `<nav>`:
The `<nav>` element represents a section of the page containing navigation links, menus, or
any group of links that help users navigate the website.
Example:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
3. `<main>`:
The `<main>` element represents the main content of a web page. It should typically not
include headers, footers, or navigation menus.
Example:
<main>
<h1>Welcome to my website!</h1>
<p>This is the main content of the page.</p>
</main>
4. `<article>`:
The `<article>` element represents a self-contained piece of content that could be distributed
and reused independently. It could be a blog post, news article, forum post, etc.
Example:
25 | A I T
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
5. `<section>`:
The `<section>` element represents a thematic grouping of content. It is used to divide the
content into distinct sections, such as chapters, subsections, or a collection of related
content.
Example:
<section>
<h2>Section Title</h2>
<p>This is the content of the section.</p>
</section>
what are selectors in css. explain with suitable example
In CSS, selectors are patterns that allow you to target and style HTML elements on a web
page. Selectors specify which elements the CSS rules should apply to. They are the key
components of CSS rules and play a crucial role in determining how the styles are applied to
the HTML elements. There are various types of selectors in CSS, each with its unique way of
selecting elements. Let's explain some common CSS selectors with suitable examples:
1.Element Selector:
The element selector targets HTML elements based on their tag names. It is the simplest type
of selector and applies styles to all instances of the selected element on the page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Element Selector Example</title>
<style>
26 | A I T
/* Target all <p> elements */
p{
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph with blue text color.</p>
<p>Another paragraph with blue text color.</p>
</body>
</html>
2. Class Selector:
The class selector targets HTML elements based on their class attribute. It allows you to apply
the same styles to multiple elements without having to repeat the styles for each element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
/* Target elements with class "highlight" */
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
27 | A I T
<p>This paragraph is not highlighted.</p>
<p class="highlight">This paragraph is highlighted with a yellow background.</p>
<div class="highlight">This div is also highlighted with a yellow background.</div>
</body>
</html>
3.ID Selector:
The ID selector targets a specific HTML element based on its unique id attribute. An ID must
be unique within the document, so the ID selector applies styles to only one element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
/* Target the element with ID "main-heading" */
#main-heading {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<h1 id="main-heading">This is the main heading</h1>
<p>This paragraph is not affected by the ID selector.</p>
</body>
</html>
28 | A I T