ACTIVITY REPORT

ON

COLLABORATIVE LEARNING

By

Name of the student

SYEDA MAHZOZA RANEEM (3GN21IS047)
SYEDA ZOYA SADAF (3GN21IS048)
AMAAN SAQUIB (3GN21IS002)

Submitted to
Prof. Vimala kulkarni

VISVESVARAYA TECHNOLOGICAL UNIVERSITY,

BELGAVI GURU NANAK DEV ENGINEERING COLLEGE, BIDAR
DEPARTMENT OF INFORMATION SCIENCE &
ENGINEERING
2023-2024

1
ACTIVITY REPORT

ON

COLLABORATIVE LEARNING

By

Name of the student

SYEDA MAHZOZA RANEEM (3GN21IS047)
SYEDA ZOYA SADAF (3GN21IS048)
AMAAN SAQUIB (3GN21IS002)

Under the Guidance

of
Prof. Vimala
Kulkarni

GURU NANAK DEV ENGINEERING COLLEGE, BIDAR

DEPARTMENT OF INFROMATION SCIENCE &
ENGINEERING
2023-2024

2
GURU NANAK DEV ENGINEERING COLLEGE, BIDAR
2023-2024
Department of Information Science and Engineering

CERTIFICATE

This is to certify that the Activity report entitled “COLLABORATIVE

LEARNING” has been completed successfully by AMAAN SAQUIB
(3GN21IS002), SYEDA MAHZOZA RANEEM (3GN21IS047) and
SYEDA ZOYA SADAF (3GN21IS048) as part of VI Semester curriculum in
Information Science and Engineering of the Visvesvaraya Technological
University, Belgavi during the academic year 2023-2024.

Prof. Vimala Kulkarni Dr Masrath Begum

Guide Head of the Department

3
GURU NANAK DEV ENGINEERING COLLEGE, BIDAR
DEPARTMENT OF INFORMATION SCIENCE &
ENGINEERING

ACKNOWLEDGEMENT

We would like to express our deep sense of gratitude to Dr. Suresh R Reddy,
Principal of Guru Nanak Dev Engineering College, Bidar for his motivation and for
creating an inspiring atmosphere in the college by providing state of facilities for
preparation and supporting in the completion of this Project.

We sincere thanks to Dr. Masrath Begum, Head of Department, Dept of Information

Science and Engineering, Guru Nanak Dev Engineering College, Bidar for his
whole hearted support in completion of this Project.

We are highly indebted to our project guide Prof.Vimala Kulkarni, for guiding and
giving timely advices and suggestion in the successful completion of the project.
We thank all the staff members who have been helping us directly or indirectly for
completion of the project. Finally, we are thankful to our parents and our entire
friends who have directly or indirectly helped in the project.

SYEDA MAHZOZA RANEEM (3GN21IS047)

SYEDA ZOYA SADAF (3GN21IS048)

AMAAN SAQUIB (3GN21IS002)

4
Table of Contents
CHAPTER 1:
AJAX Solution, Javascript………………………………………………………………6

AJAX…………………………………………………………………………………….6

Javascript………………………………………………………………………………….9

CHAPTER 2:

XHTML Http Request and Response HTML………………………………………………11

Response……………………………………………………………………………………13

HTML………………………………………………………………………………………15

CHAPTER 3:
CSS, JSON…………………………………………………………………………………..18

CSS…………………………………………………………………………………………..18

JSON…………………………………………………………………………………………20

GROUP PHOTO…………………………………………………………………………….22

BIBILOGRAPHY………………………………………………………………………………23

5
CHAPTER 01
AJAX SOLUTION, JAVASCRIPT
AJAX and JavaScript: A Dynamic Duo for Your Project
Understanding AJAX
AJAX, which stands for Asynchronous JavaScript and XML, is a technique for
creating interactive web applications. It allows web pages to update parts of
themselves without reloading the entire page. This results in a smoother, more
responsive user experience.

Key benefits of AJAX:

 Improved user experience: Faster page updates, less loading time.
 Enhanced interactivity: Create dynamic applications that respond to user
actions.
 Reduced server load: Only necessary data is transferred, optimizing
performance.

How AJAX Works

AJAX involves the following steps:
1. Event Trigger: A user action, such as clicking a button or selecting an
option, triggers an AJAX request.
2. JavaScript Object: A JavaScript object (XMLHttpRequest or Fetch API) is
created to handle the request.
3. Request Sent: The request is sent to the server, specifying the URL, request
method (GET, POST, etc.), and any data to be sent.
4. Server Response: The server processes the request and sends a response
back to the client.
5. Data Handling: The JavaScript code receives the response, parses the data
(usually JSON or XML), and updates the webpage accordingly.

Using AJAX in Your JavaScript Project

Here's a basic example using the Fetch API:
JavaScript
fetch('data.json')
.then(response => response.json())
.then(data => {
// Process the data and update the webpage
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});

6
Common Use Cases for AJAX
 Real-time updates: Displaying live stock quotes, chat messages, or social
media feeds.
 Form validation: Checking form data without full page reloads.
 Data retrieval: Fetching data from a server without page refreshes.
 Content loading: Loading content dynamically based on user actions.

Considerations for Your Project

 Data format: Choose a suitable format for data exchange (JSON, XML, or
others).
 Error handling: Implement robust error handling to gracefully handle failed
requests.
 Cross-Origin Resource Sharing (CORS): If your AJAX requests are made
to a different domain, handle CORS accordingly.
 Security: Protect sensitive data by using HTTPS and validating user input.

Additional Tips
 Leverage libraries: Consider using libraries like jQuery or Axios to simplify
AJAX operations.
 Performance optimization: Minimize the amount of data transferred and
optimize response times.
 Testing: Thoroughly test your AJAX code to ensure it works as expected in
different browsers and devices.

Common AJAX Goals:

 Improved User Experience:
o Faster page load times
o Dynamic content updates without full page reloads
o Real-time interactions (e.g., chat, live updates)
 Enhanced Functionality:
o Asynchronous data retrieval and manipulation
o Form validation without page refreshes
o Interactive data visualizations
 Increased Efficiency:
o Reduced server load by transferring only necessary data
o Optimized performance through asynchronous operations

7
Dynamic image loading:
function loadImage(imageId) {
fetch(`images/${imageId}.jpg`) // Replace with your image path
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
const imageElement = document.getElementById('image-container');
imageElement.src = imageUrl;
})
.catch(error => {
console.error('Error loading image:', error);
});
}

8
JavaScript: The Backbone of Your Web Project

What is JavaScript?
JavaScript is a programming language that adds interactivity to web pages. It's the
third layer in the web development trifecta, alongside HTML (structure) and CSS
(style).

Key features and capabilities:

 Dynamic Content: Create interactive elements that change based on user
input or other events.
 User Interactions: Handle clicks, hovers, form submissions, and other user
actions.
 DOM Manipulation: Modify the structure and content of a web page.
 Asynchronous Operations: Perform tasks without blocking the main thread
(e.g., AJAX requests).
 Client-Side Validation: Check user input before sending data to the server.
 Animations and Effects: Create engaging user experiences with smooth
transitions and visual effects.

How JavaScript Fits into Your Project:

To effectively utilize JavaScript in your project, consider the following aspects:
 Core Functionality:
o Implement essential features and user interactions.
o Create dynamic content based on user preferences or data.
o Handle form submissions and data validation.
 User Experience:
o Enhance user engagement with interactive elements.
o Optimize page performance through asynchronous loading.
o Provide feedback to users through visual cues.
 Data Manipulation:
o Process and display data from various sources (e.g., APIs, databases).
o Create data visualizations (charts, graphs).
o Update content dynamically based on data changes.

Example Use Cases:

 E-commerce: Dynamic product filtering, shopping cart updates, payment
processing.
 Social Media: Real-time updates, user interactions, content
recommendations.
 Web Applications: Single-page applications, form validation, data
management.
 Games: Interactive gameplay, animations, user input handling.

9
Getting Started:
 Basic Syntax: Learn JavaScript fundamentals like variables, data types,
operators, control flow.
 DOM Manipulation: Understand how to interact with HTML elements using
JavaScript.
 Events: Handle user interactions and browser events.
 AJAX: Fetch data from servers without reloading the page.
 Libraries and Frameworks: Explore popular options like React, Angular, or
Vue for complex projects.

10
CHAPTER 02
XHTML Http Request and Response HTML
The Birth of XHTML
XHTML emerged as a response to the growing complexity and inconsistency of
HTML. With the web expanding rapidly, there was a need for a more structured and
standardized markup language. XHTML was envisioned as a bridge between
HTML and XML, aiming to combine the best of both worlds.

Key Characteristics of XHTML:

 Strict Syntax: All elements must be closed properly, attribute values must be
quoted, and elements must be nested correctly.
 Case Sensitivity: Tags and attributes are case-sensitive.
 XML Declaration: Every XHTML document must start with an XML
declaration.
 DOCTYPE Declaration: Specifies the document type.

The XML Influence on XHTML

By adhering to XML syntax rules, XHTML brought several advantages:
 Well-formedness: Stricter syntax rules ensured that documents were
structurally sound.
 Namespace Support: Allowed for the integration of custom elements and
attributes.
 Validation: XML validators could be used to check XHTML document
validity.
 Extensibility: The potential to create custom tags and attributes.

XHTML vs. HTML: Key Differences

Feature HTML XHTML

Case sensitivity Not case-sensitive Case-sensitive

Optional for some All elements must be

Element clsing
elements closed

Empty elements Can be written as <br> Must be written as <br />

Attribute values Can be unquoted Must be quoted

DOCTYPE
Optional Required
declaration

White space Ignored in most cases Significant

11
XHTML Modules
To address the complexity of creating full-featured XHTML documents, XHTML
was modularized. This meant that documents could be created by combining
different modules, allowing for customization and flexibility.

Challenges and Decline of XHTML

Despite its potential, XHTML faced several challenges:
 Browser Compatibility: Older browsers often struggled with XHTML,
leading to inconsistent rendering.
 Steeper Learning Curve: The stricter syntax required more attention to
detail from developers.
 Limited Benefits: While XHTML offered advantages, the benefits didn't
always outweigh the increased complexity.
The emergence of HTML5, which incorporated many of XHTML's strengths while
maintaining HTML's flexibility, eventually led to the decline of XHTML.

XHTML's Legacy
While XHTML may not be widely used today, its influence can still be seen in
modern web development practices. The emphasis on well-formed markup and
valid code is a direct result of XHTML's legacy. Additionally, some concepts from
XHTML, such as namespaces and modularization, have found applications in other
XML-based technologies.

Conclusion
XHTML was a significant step forward in web development, but it ultimately gave
way to the more versatile and developer-friendly HTML5. Understanding XHTML
can provide valuable insights into the evolution of web standards and the
importance of structured markup.

HTML document retrieved with XMLHttprequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://ab.reddit.com/', true);
xhr.responseType = 'document';
xhr.onload = function(e) {
var ext_doc = this.response;
var img_src = ext_doc.getElementsByTagName("img")[0];
var img_html = document.querySelector('#TestImage2');
img_html.src = img_src.src;
};
xhr.send();

12
RESPONSE

HTML Responses: The Building Blocks of the Web

What is an HTML Response?
An HTML response is the data sent from a web server to a web browser in response
to an HTTP request. This data is formatted in HyperText Markup Language
(HTML), which the browser interprets to render a webpage.

Components of an HTML Response

1. Status Code: A three-digit number indicating the outcome of the request
(e.g., 200 OK, 404 Not Found).
2. Headers: Metadata about the response, such as content type, encoding, and
server information.
3. Body: The actual HTML content that will be displayed in the browser.

How the Browser Handles HTML Responses

1. Parsing: The browser parses the HTML code, building a Document Object
Model (DOM) tree.
2. Rendering: The browser renders the DOM tree into a visual representation
on the screen.
3. Interaction: The browser handles user interactions with the rendered page,
making dynamic updates as needed.

Common HTML Response Status Codes

 200 OK: The request was successful.
 301 Moved Permanently: The requested resource has been permanently
moved to a new location.
 302 Found: The requested resource can be found at a different location
(temporary redirect).
 400 Bad Request: The server could not understand the request.
 404 Not Found: The requested resource could not be found.
 500 Internal Server Error: The server encountered an unexpected
condition.

Beyond Basic HTML Responses

HTML responses are the foundation of web applications, but they are often
accompanied by other data formats like CSS (for styling) and JavaScript (for
interactivity). Additionally, modern web development leverages technologies like
AJAX to request and update portions of a page without full reloads.

13
Inspecting HTML Responses
You can inspect the HTML response of a webpage using the developer tools of your
web browser. This allows you to examine the HTML structure, headers, and status
code.

Handling HTML Responses in JavaScript

JavaScript can be used to fetch HTML content using the Fetch API or
XMLHttpRequest. The response body can then be parsed and manipulated to update
the DOM.

Example using Fetch API:

JavaScript
fetch('your_html_page.html')
.then(response => response.text())
.then(html => {
document.getElementById('container').innerHTML = html;
})
.catch(error => {
console.error('Error fetching HTML:', error);
});

Key points to remember:

 HTML responses are the foundation of web pages.
 Understanding response status codes is crucial for debugging and handling
errors.
 Modern web development often involves handling different response formats
(JSON, XML) in addition to HTML.
 JavaScript can be used to dynamically fetch and manipulate HTML content.

14
HTML

HTML: The Foundation of Web Development

Understanding HTML
HTML (HyperText Markup Language) is the standard markup language for
creating web pages and web applications. It defines the structure of a page,
including headings, paragraphs, links, images, and other elements. While it doesn't
handle the styling (CSS) or behavior (JavaScript) of a webpage, it provides the
essential blueprint.

Core Characteristics
 Markup Language: HTML is a markup language, meaning it uses tags to
define the structure and content of a webpage.
 Platform Independence: HTML documents can be viewed on various
platforms (Windows, macOS, Linux) and browsers without modification.
 Case Insensitive: HTML tags are generally case-insensitive, but it's
recommended to use lowercase for consistency.
 Simple Syntax: HTML is relatively easy to learn and understand, making it
accessible to beginners.
 Hypertext: HTML supports hyperlinks, allowing users to navigate between
different web pages.

Key Components of HTML

 Document Structure:
o <html>: Root element of an HTML document.
o <head>: Contains meta-information about the document (title,
stylesheets, scripts).
o <body>: Contains the visible content of the page.
 Basic Elements:
o <p>: Defines a paragraph.
o <h1> to <h6>: Defines headings.
o <a>: Defines a hyperlink.
o <img>: Embeds an image.
o <ul> and <ol>: Define unordered and ordered lists respectively.
o <li>: Defines a list item.
o <div> and <span>: Define divisions and inline elements for grouping
content.

HTML5: The Modern Standard

HTML5 is the latest version of HTML, offering several enhancements:
15
 Semantic Elements: Improved structure with elements like <header>, <nav>,
<article>, <section>, <aside>, <footer>.
 Multimedia: Direct embedding of audio and video.
 Form Improvements: Enhanced input types, validation, and features.
 Offline Application Support: Local storage for data persistence.
 Canvas and SVG: For creating graphics and animations.

Importance of HTML in Academic Projects

HTML is crucial for academic projects as it's the foundation for creating:
 Websites: For showcasing research, portfolios, or project outcomes.
 Web Applications: For interactive tools or data visualization.
 Mobile Applications (Hybrid): Using frameworks like Cordova or Ionic.
 Document Presentation: Creating interactive or dynamic documents.

Best Practices for Academic Projects

 Semantic HTML: Use appropriate elements for content to improve
accessibility and SEO.
 Clean and Organized Code: Write readable and maintainable HTML.
 Validation: Use HTML validators to check for errors.
 Accessibility: Ensure content is accessible to people with disabilities.
 Responsiveness: Design for different screen sizes.

Basic structure of HTML:

<!DOCTYPE html>
<html>
<head>
<title>My Academic Project</title>
</head>
<body>
<h1>Welcome to My Project</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<img src="image.jpg" alt="Image description">
</body>
</html>

16
HTML Form:
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>

HTML Table:
<!DOCTYPE html>
<html>
<head>
<title>Data Table</title>
</head>
<body>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>

17
CHAPTER 03
CSS, JSON

CSS: Styling Your Web Pages

CSS (Cascading Style Sheets) is a language used to style the presentation of
documents written in HTML. It controls the layout, colors, fonts, and other visual
aspects of a webpage.

Key Roles of CSS in Web Development

 Separation of Concerns: CSS separates the content (HTML) from the
presentation (CSS), making websites easier to maintain and update.
 Visual Design: CSS defines the look and feel of a webpage, including colors,
fonts, layout, and responsiveness.
 User Experience: CSS plays a crucial role in creating a positive user
experience by making websites visually appealing and easy to navigate.
 Accessibility: CSS can be used to enhance accessibility by ensuring that
content is readable and understandable for users with disabilities.
 Responsiveness: CSS enables websites to adapt to different screen sizes and
devices through media queries.

Core Components of CSS

 Selectors: Target specific HTML elements to which styles will be applied.
 Properties: Define the styles to be applied to the selected elements.
 Values: Specify the values for the properties.
 Rules: Combine selectors, properties, and values to create style rules.

Types of CSS
 Inline Styles: Styles applied directly to an HTML element using the style
attribute.
 Embedded Styles: Styles defined within the <head> section of an HTML
document using the <style> tag.
 External Styles: Styles defined in a separate CSS file linked to the HTML
document using the <link> tag.

Importance of CSS in Academic Projects

CSS is essential for academic projects to:
 Enhance Visual Appeal: Create professional-looking websites or web
applications.
 Improve User Experience: Make content easy to read and navigate.
 Demonstrate Design Skills: Showcase your ability to create visually
appealing and responsive designs.
 Optimize for Different Devices: Ensure your project works well on
desktops, tablets, and smartphones.

18
Best Practices for CSS
 Organization: Structure your CSS code for readability and maintainability.
 Specificity: Use specific selectors to avoid style conflicts.
 Cascading: Understand how CSS rules interact and override each other.
 Responsiveness: Design for different screen sizes using media queries.
 Accessibility: Consider color contrast, font size, and other accessibility
guidelines.
 Performance Optimization: Optimize CSS for faster loading times.
By mastering CSS, you can transform your HTML documents into visually
appealing and user-friendly web pages.

Basic example of CSS:

body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f0f0f0;
}

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

p{
line-height: 1.5;
}

.button {
background-color: blue;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}

19
JSON

JSON: A Versatile Data Interchange Format

Understanding JSON
JSON (JavaScript Object Notation) is a lightweight, text-based data-interchange
format derived from JavaScript. It's widely used for transmitting data between web
applications and servers.

Key Characteristics of JSON

 Readability: JSON is human-readable, making it easy to inspect and
understand.
 Simplicity: Its syntax is straightforward, using key-value pairs and arrays.
 Language Independence: JSON is language-agnostic, making it suitable for
various programming languages.
 Efficiency: It's compact and efficient to parse, making it ideal for data
transmission.
 Data Structures: JSON supports two primary data structures: objects and
arrays.

JSON Structure
 Objects: Unordered collections of key-value pairs.
JSON
{
"name": "John Doe",
"age": 30,
"city": "New York"
}
 Arrays: Ordered collections of values.
JSON
[
"apple",
"banana",
"orange"
]

JSON in Web Development

 Data Exchange: JSON is the preferred format for APIs (Application
Programming Interfaces) to transmit data between clients and servers.
 Data Storage: JSON can be used to store data locally in web applications
(e.g., localStorage, IndexedDB).
 Configuration Files: JSON is often used for configuration settings in web
applications.

20
Advantages of JSON
 Efficiency: Compact and fast to parse.
 Readability: Easy to understand and debug.
 Wide Adoption: Supported by most programming languages.
 Flexibility: Can represent various data structures.

Disadvantages of JSON
 Lack of Comments: JSON doesn't support comments, which can be a
limitation in certain scenarios.
 Security: While JSON itself is secure, the data it carries should be properly
sanitized and validated to prevent attacks.

21
GROUP PHOTO

22
BIBLIOGRAPHY

[1] G.K.Patnaik and M. M. Gore, “Design of Compiler for Mobile

Environment and it’s formalization using Evolving Algebra ”, proceedings of
3rd IEEE International Conference on Mobile Data Management, Singapore,
January 2002, PP 159-160.

[2] “Author Guidelines”, http://.computer.org/cspress/instruct.htm

23
24
25