2023-24

Acropolis Institute of
Technology and
Research, Indore Department of CSE
Submitted To: Prof. Mayur Rathi
(Artificial Intelligence & Machine
Learning)

Internet and Web Technology (AL703D)

Submitted By: Vinit Bhaiji

Enrollment No.: 0827AL201067
Class/Year/Sem: ALF1/4th/ 7th

[LAB ASSIGNMENT IWT (AL-703D)]

T h e O b je c t i v e o f th is la b o r a to r y wo r k i s to e n l ig h t en t h e stu d en t w i t h k n o w l e d g e b a se i n
b a si c s inv o lved in pub l i sh in g con ten t on th e Wor ld Wid e We b . Th i s w il l al so expose
st u d e nts to th e b a sic tool s an d app l ic at ion s u sed in Web pub lish ing .
 ACROPOLIS INSTITUTE OF TECHNOLOGY & RESEARCH,
INDORE

Department of CSE (Artificial Intelligence & Machine Learning)

CERTIFICATE

This is to certify that the experimental work entered in this journal as per

the B. TECH. IV year syllabus prescribed by the RGPV was done by

Mr. Vinit Bhaiji B.TECH IV year VII semester in the Internet and Web

Technology Laboratory of this institute during the academic year 2023-

2024.

Signature of the Faculty

 About the Laboratory

This course is intended to teach the basics involved in publishing content on the World Wide Web.
This includes the ‘language of the Web’ – HTML, the fundamentals of how the Internet and the Web
function, a basic understanding of graphic production with a specific stress on creating graphics for
the Web, and a general grounding introduction to more advanced topics such as programming and
scripting. This will also expose students to the basic tools and applications used in Web publishing.

In this lab, students will be able to learn and practice design and implement static and dynamic
website. Students can expand their skill set by learning how to design and implement dynamic
websites with good aesthetic sense of designing and latest technical know-how's. The aim of this Lab
is to provide you the conceptual and technological developments in the field of Internet and web
designing with the emphasis on comprehensive knowledge of Internet and Web development
technologies like HTML, XML, CSS, PHP, XHTML, Java Script and Database. The World Wide
Web with its widespread usefulness has become an integral part of the Internet. Therefore, this course
also puts emphasis on basic concepts of web design.
❖ GENERAL INSTRUCTIONS FOR LABORATORY CLASSES

➢ DO’S

✓ Without Prior permission do not enter into the Laboratory.

✓ While entering into the LAB students should wear their ID cards.

✓ The Students should come with proper uniform.

✓ Students should sign in the LOGIN REGISTER before entering into the
laboratory.

✓ Students should come with observation and record note book to the laboratory.

✓ Students should maintain silence inside the laboratory.

✓ After completing the laboratory exercise, make sure to shutdown the system
properly.

➢ DONT’S

✓ Students bringing the bags inside the laboratory.

✓ Students using the computers in an improper way.

✓ Students scribbling on the desk and mishandling the chairs.

✓ Students using mobile phones inside the laboratory.

✓ Students making noise inside the laboratory.

 SYLLABUS
Course: AL703D (Internet and Web Technology)
Branch/Year/Sem: Artificial Intelligence & Machine Learning / IV / VII

Module1: Introduction: Concept of WWW, Internet and WWW, HTTP Protocol: Request and
Response, Web browser and Web servers, Features of Web 2.0 Web Design: Concepts of effective
web design, Web design issues including Browser, Bandwidth and Cache, Display resolution, Look
and Feel of the Website, Page Layout and linking, User centric design, Sitemap, Planning and
publishing website, Designing effective navigation.

Module2: HTML: Basics of HTML, formatting and fonts, commenting code, color, hyperlink, lists,
tables, images, forms, XHTML, Meta tags, Character entities, frames and frame sets, Browser
architecture and Web site structure. Overview and features of HTML5

Module3: Control Style sheets : Need for CSS, introduction to CSS, basic syntax and structure, using
CSS, background images, colors and properties, manipulating texts, using fonts, borders and boxes,
margins, padding lists, positioning using CSS, CSS2, Overview and features of CSS3JavaScript :
Client side scripting with JavaScript, variables, functions, conditions, loops and repetition, Pop up
boxes, Advance JavaScript: Java script and objects, JavaScript own objects, the DOM and web
browser environments, Manipulation using DOM, forms and validations, DHTML : Combining
HTML, CSS and JavaScript, Events and buttons.

Module4: Introduction to XML, uses of XML, simple XML, XML key components, DTD and
Schemas, Using XML with application. Transforming XML using XSL and XSLT PHP: Introduction
and basic syntax of PHP, decision and looping with examples, PHP and HTML, Arrays, Functions,
Browser control and detection, string, Form processing, Files, Advance Features: Cookies and
Sessions, Object Oriented Programming with PHP.

Module5: Modules PHP and My SQL: Basic commands with PHP examples, Connection to server,
creating database, selecting a database, listing database, listing table names, creating a table, inserting
data, altering tables, queries, deleting database, deleting data and tables, PHP my admin and database
bugs.
HARDWARE AND SOFTWARE REQUIREMENTS:

S. Name of Item Specification

No.
1 Computer System Hard Disk min 5 GB
RAM: 4 GB / 8 GB
Processor: Intel i3 or above

S. Name of Item Specification

No.
1 Operating system Window XP or 2000
Editor Notepad++, VS Code, Edit++, or any

RATIONALE:
The purpose of this subject is to cover the concepts of Web Technologies in terms of Theory and
Implementation .The syllabus provides all the essential concepts of Web Technologies.

COURSE OBJECTIVES AND OUTCOMES

➢ Course Objectives
1. To comprehend the basics of the internet and web terminologies.
2. To introduce scripting language concepts for developing client-side applications.
3. To practice server-side programming features – PHP, JSP.
4. To build dynamic web pages with validation using Java Script objects and by applying
different event handling mechanisms.
5. To develop modern interactive web applications using PHP, XML and MySQL.

➢ Course Outcomes
At the end of the course student will be able to:
1. Understand Web design and concepts of Web design.
2. Analyze a web page and identify its elements and attributes.
3. Create web pages using XHTML and Cascading Style Sheets.
4. Build dynamic web pages using Java Script (Client side programming).
5. Create XML documents and Schemas.
 Index
Date of Page Date of Grade &
S.No Exp. Name of the Experiment No. Submission Sign of the
Faculty
1 18/07 Create a table in HTML to the following details 9 20/07

25/07 Create a job application form 12 27/07

2
• Create an area called section one and place text boxes
that receives details –
a) Name b) Age c) Gender d) High School
e) Qualifications
• Create an area called section two and place text boxes
that receives details -
a) Previous Employment b) References
c) Qualification
• At the end place a submit button
01/08 19 03/08
3 Create a web page multiple types of style sheet used in a
single page.
08/08 22 10/08
4 Write a Java Script program by using variables.

22/08 26 24/08
5 Write a java script program on Form Validations.

25/09 Create an XML document template to describe the result of 31 07/09

6 students in an examination. The description should include the
student’s roll number, name, three subject names and marks,
total marks, percentage and results.
12/09 Design a digital calculator using HTML and Java script. 34 14/09
7

15/09 Create a web page with the following constrains 39 21/09

8 I) an clickable image ii) a hyperlink to your collage web site

20/09 Prepare a "resume.html" that might include such information 43 28/09

9 as: a) distinguishing marks b) special interests c) work
history d) education and training e) job objective f) relevant
skills and experience
10/10 Create a an HTML document with JavaScript code that 48 12/10
10 a) Has three textboxes and a button
b) The details to be accepted using textboxes are principal,
rate of interest, and duration in years.
c) When user clicks the Ok button a message box appears
showing the simple interest of principal amount
 Program Outcome (PO)

The engineering graduate of this institute will demonstrate:

a) Apply knowledge of mathematics, science, computing and engineering fundamentals to computer
science engineering problems.
b) Able to identify, formulate, and demonstrate with excellent programming, and problem solving skills.
c) Design solutions for engineering problems including design of experiment and processes to meet
desired needs within reasonable constraints of manufacturability, sustainability, ecological,
intellectual and health and safety considerations.
d) Propose and develop effective investigational solution of complex problems using research
methodology; including design of experiment, analysis and interpretation of data, and combination of
information to provide suitable conclusion. synthesis
e) Ability to create, select and use the modern techniques and various tools to solve engineering problems
and to evaluate solutions with an understanding of the limitations.
f) Ability to acquire knowledge of contemporary issues to assess societal, health and safety, legal and
cultural issues.
g) Ability to evaluate the impact of engineering solutions on individual as well as organization in a societal
and environmental context, and recognize sustainable development, and will be aware of emerging
technologies and current professional issues.
h) Capability to possess leadership and managerial skills, and understand and commit to professional
ethics and responsibilities.
i) Ability to demonstrate the team work and function effectively as an individual, with an ability to design,
develop, test and debug the project, and will be able to work with a multi-disciplinary team.
j) Ability to communicate effectively on engineering problems with the community, such as being able
to write effective reports and design documentation.
k) Flexibility to feel the recognition of the need for, and have the ability to engage in independent and life-
long learning by professional development and quality enhancement programs in context of
technological change.
l) A practice of engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and entrepreneurship.
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Create a table in HTML to the following details

2 Neatly Drawn and labeled experimental setup

NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• The <html> tags indicate the start and end of the HTML document.
• The <table> tag creates a table within the HTML document.
o The border="1" attribute sets a border around the table cells for visibility.
• The <thead> tag defines the table header.

Page 9
 o Inside the header, a <tr> tag represents a table row.
o <th> tags define table header cells containing column names: "Book Name" and
"Author".
• The <tbody> tag defines the table body, where the actual data rows are located.
o Each <tr> tag within <tbody> represents a table row.
o Within each row, <td> tags represent table data cells.
o The content inside <td> tags represents the book names and their respective
authors.
This HTML code generates a table with a header row (with column names "Book Name"
and "Author") and four rows of book information (with book names and their respective
authors). Each row in the table body (<tbody>) contains details about a specific book,
such as its name and the author.

3.2 Program
<html>
<table border="1">
<thead>
<tr>
<th>Book Name</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>Operating System</td>
<td>Godbole</td>
</tr>
<tr>
<td>Data Communications and Networks</td>
<td>Godbole</td>
</tr>
<tr>

Page 10
 <td>Computer Networks</td>
<td>Rajkumar</td>
</tr>
<tr>
<td>OOPs</td>
<td>R.Nageswar Rao</td>
</tr>
</tbody>
</table>
</html>
4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 11
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Create a job application form
• Create an area called section one and place text boxes that receives details –
b) Name b) Age c) Gender d) High School
e) Qualifications
• Create an area called section two and place text boxes that receives details -
a) Previous Employment b) References
c) Qualification
At the end place a submit button
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• HTML Structure:
o <!DOCTYPE html>: Defines the document type and version as HTML.

Page 12
 o <html>: The root element of the HTML document.
o <head>: Contains meta-information about the document, including the title and
styling information.
o <title>: Sets the title of the webpage.
o <style>: Contains CSS rules for styling the elements within the document.
o <body>: Contains the visible content of the document.
• CSS Styling:
o body: Sets the font family to Arial or sans-serif and adds a margin of 30px around
the body content.
o form: Limits the maximum width of the form to 600px and centers it horizontally
within its container.
o fieldset: Adds a border, padding, and margin to separate sections within the form.
o legend: Styles the legend (titles for fieldsets) to appear bold.
o label: Styles labels to display as block elements with a bottom margin for spacing.
o input[type="text"], input[type="number"], textarea: Styles text input and textarea
fields with consistent width, padding, borders, and border-radius for consistency
and appearance.
o input[type="submit"]: Styles the submit button with specific padding, background
color, text color, border, and border-radius. The hover effect changes the
background color when the button is hovered over.
• Form Elements:
o The form consists of two fieldsets, each with several input fields and textareas for
gathering job application information:
• Section One:
o Name (text input)
o Age (number input)
o Gender (text input)
o High School (text input)
o Qualifications (textarea)
o Section Two:
o Previous Employment (textarea)
o References (textarea)

Page 13
 o Qualification (text input)
The form uses various input types such as text, number, and textarea to collect different types
of information. Placeholder text is provided as a guide for users on what to enter in each
field. Additionally, required attributes are added to certain fields to ensure they must be filled
out before the form can be submitted.
Finally, there's a submit button at the end of the form (<input type="submit">) that users can
click to submit the form data.

3.2 Program
<!DOCTYPE html>
<html>
<head>
<title>Job Application Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
form {
max-width: 600px;
margin: auto;
}
fieldset {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 15px;
}
legend {
font-weight: bold;
}
label {
display: block;

Page 14
 margin-bottom: 8px;
}
input[type="text"],
input[type="number"],
textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<h1>Job Application Form</h1>

<form action="#" method="post">
<fieldset>
<legend>Section One</legend>

Page 15
 <label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>

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

<label for="gender">Gender:</label>
<input type="text" id="gender" name="gender" placeholder="Enter your gender"
required>

<label for="high_school">High School:</label>

<input type="text" id="high_school" name="high_school" placeholder="Enter your high
school" required>

<label for="qualifications">Qualifications:</label>
<textarea id="qualifications" name="qualifications" placeholder="Enter your
qualifications" required></textarea>
</fieldset>

<fieldset>
<legend>Section Two</legend>
<label for="prev_employment">Previous Employment:</label>
<textarea id="prev_employment" name="prev_employment" placeholder="Enter your
previous employment details"></textarea>

<label for="references">References:</label>
<textarea id="references" name="references" placeholder="Enter your
references"></textarea>

<label for="qualification">Qualification:</label>
<input type="text" id="qualification" name="qualification" placeholder="Enter your

Page 16
 qualification">
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>

4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 17
Page 18
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Create a web page multiple types of style sheet used in a single page.
2 Neatly Drawn and labeled experimental setup.
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
1. Inline Styles:
Inline styles involve applying CSS directly to individual HTML elements within their tags
using the style attribute.

2. Internal or Embedded Style Sheets:

Internal or embedded style sheets consist of CSS rules defined within the <style> tags in the
<head> section of an HTML document. They apply styles to elements across the entire
document.

Page 19
3. External Style Sheets:
External style sheets are separate CSS files linked to HTML documents using the <link>
tag. These files contain style rules that can be shared across multiple HTML pages.
3.2 Program
<!DOCTYPE html>
<html>
<head>
<title>Multiple Style Sheets Example</title>
<!-- External Style Sheet -->
<link rel="stylesheet" type="text/css" href="style.css">
<style>
/* Internal Style Sheet */
h1 {
color: blue;
text-align: center;
}
p{
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Styling with Multiple Style Sheets</h1>

<!-- Inline Style -->

<p style="color: green;">This paragraph uses inline styling.</p>
<p>Here is a paragraph using internal styling.</p>
<p class="external-style">This paragraph uses styles from an external style sheet.</p>
</body>
</html>

Page 20
External style sheet code-
/* styles.css */
.external-style {
font-weight: bold;
text-decoration: underline;
}

4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 21
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Write a Java Script program by using variables.
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
Certainly! A JavaScript program that utilizes variables allows the storage and manipulation of
data. Here's an overview:

JavaScript Variables:
Variables in JavaScript are used to store and manage data. They enable programmers to assign
values to identifiers and manipulate those values throughout the program.

Example JavaScript Program using Variables:

javascript

Page 22
Copy code
// Variable declarations and assignments
var name = "Ram"; // A variable 'name' storing a string value
var age = 21; // A variable 'age' storing a numerical value
var isStudent = true; // A variable 'isStudent' storing a boolean value (true/false)

// Displaying values using console.log

console.log("Name: " + name);
console.log("Age: " + age);
console.log("Is Student: " + isStudent);

// Performing operations with variables

var futureAge = age + 5; // Calculating age after 5 years
console.log("Age after 5 years: " + futureAge);

// Changing variable values

name = "Shyam"; // Changing the value of 'name'
console.log("Updated Name: " + name);

// Conditional operation based on 'isStudent' variable

if (isStudent) {
console.log(name + " is a student.");
} else {
console.log(name + " is not a student.");
}

Explanation:
Variable Declarations and Assignments:
var name = "Alice";, var age = 25;, var isStudent = true;: These lines declare variables (name,
age, isStudent) and assign them values of different types (string, number, boolean).

Page 23
Displaying Values:
console.log(): Outputs messages to the browser console, displaying the values stored in the
variables name, age, and isStudent.

Variable Operations:
var futureAge = age + 5;: Calculates futureAge by adding 5 to the age variable.
Outputs the calculated futureAge to the console.

Updating Variable Values:

name = "Shyam";: Changes the value of the name variable to "Shyam".

Conditional Operation:
Uses an if-else statement to check the value of isStudent.
Logs whether the person is a student or not based on the value of the isStudent variable.

3.2 Program
// Variable declarations and assignments
var name = "Ram"; // A variable 'name' storing a string value
var age = 21; // A variable 'age' storing a numerical value
var isStudent = true; // A variable 'isStudent' storing a boolean value (true/false)

// Displaying values using console.log

console.log("Name: " + name);
console.log("Age: " + age);
console.log("Is Student: " + isStudent);

// Performing operations with variables

var futureAge = age + 5; // Calculating age after 5 years
console.log("Age after 5 years: " + futureAge);

// Changing variable values

name = "Shyam"; // Changing the value of 'name'

Page 24
console.log("Updated Name: " + name);

// Conditional operation based on 'isStudent' variable

if (isStudent) {
console.log(name + " is a student.");
} else {
console.log(name + " is not a student.");
}
4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 25
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Write a java script program on Form Validations.
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• The JavaScript code defines a validateForm function to handle form submission.
• When the form is submitted, the function performs the following validations:
• Checks if the name field is empty.
• Validates the email field using a regular expression.
• Validates the password field to ensure it's at least 6 characters long.
• If any validation fails, it displays an alert with an appropriate message and prevents form
submission.
• If all validations pass, it displays an alert indicating successful form submission (in this
example), but in practice, you might want to perform other actions like sending data to a

Page 26
 server.
3.2 Program
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
<script>
// Function to validate form fields
function validateForm(event) {
event.preventDefault(); // Prevent form submission
var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var passwordField = document.getElementById("password");

// Validate name field

if (nameField.value.trim() === "") {
alert("Please enter your name.");
return false;
}

// Validate email field

var email = emailField.value.trim();
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === "" || !emailRegex.test(email)) {
alert("Please enter a valid email address.");
return false;
}

Page 27
 // Validate password field
if (passwordField.value.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
}

// If all validations pass, the form is valid

alert("Form submitted successfully!");
// You can add further actions here like sending form data to server, etc.
return true;
}

// Get the form element by its ID

var form = document.getElementById("myForm");

// Attach the validateForm function to the form's submit event

form.addEventListener("submit", validateForm);
</script>

4 Tabulation Sheet

INPUT OUTPUT
NA NA

Page 28
5 Results

Page 29
Page 30
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Create an XML document template to describe the result of students in an examination. The
description should include the student’s roll number, name, three subject names and marks,
total marks, percentage and results.
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
<examinationResults>: Root element containing the student's examination results.
<student>: Represents a single student's information.
<rollNumber>: Student's roll number.
<name>: Student's name.
<subjects>: Contains information about the three subjects.
<subject>: Represents each subject.
<name>: Name of the subject (e.g., Subject 1, Subject 2, Subject 3).

Page 31
<marks>: Marks obtained in the respective subject.
<totalMarks>: Total marks obtained by the student in all subjects combined.
<percentage>: Percentage calculated based on total marks and maximum achievable marks.
<result>: Result status (e.g., Pass, Fail, Grade, etc.).
3.2 Program
<examinationResults>
<student>
<rollNumber>...</rollNumber>
<name>...</name>
<subjects>
<subject>
<name>Subject 1</name>
<marks>...</marks>
</subject>
<subject>
<name>Subject 2</name>
<marks>...</marks>
</subject>
<subject>
<name>Subject 3</name>
<marks>...</marks>
</subject>
</subjects>
<totalMarks>...</totalMarks>
<percentage>...</percentage>
<result>...</result>
</student>

<!-- Additional students can be added here -->

</examinationResults>

Page 32
4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results
NA

Page 33
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Design a digital calculator using HTML and Java script.
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• HTML Structure:
o The HTML document includes the basic structure with a head and body.
o The title of the webpage is set to "Digital Calculator."
o The link tag in the head links to an external CSS file named "6.css."
• Calculator UI:
o The calculator UI is defined within a div with the class "calculator."
o Inside the calculator div, there's an input field with the id "display" which is
initially disabled. This input field serves as the display for the calculator.

Page 34
 o Below the display, there's a set of buttons organized within a div with the class
"buttons." Each button has an associated onclick event that triggers specific
JavaScript functions.
• CSS Styling (in "6.css"):
o The CSS styles define the appearance of the calculator, input field, and buttons.
o The calculator is styled with a specific width, margin, border, border radius, and
padding.
o The input field (type="text") has its styling defined, including width, margin,
padding, font size, and border properties.
o The buttons are organized in a grid layout with specific styling for padding, font
size, border, border radius, and background color. Hovering over the buttons
changes their background color.
• JavaScript Functions:
o appendToDisplay(value): Appends the specified value to the display when a digit
or operator button is clicked.
o clearDisplay(): Clears the content of the display when the "C" button is clicked.
o calculate(): Evaluates the mathematical expression in the display using the eval
function and updates the display with the result when the "=" button is clicked.
3.2 Program
<!DOCTYPE html>
<html>
<head>
<title>Digital Calculator</title>
<link rel="stylesheet" type="text/css" href="6.css">
</head>
<body>

<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>

Page 35
 <button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script>

function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
let expression = document.getElementById('display').value;
let result = eval(expression);
document.getElementById('display').value = result;
}
</script>

Page 36
</body>
</html>

Css code:
/* Your existing styles here */
.calculator {
width: 250px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
input[type="text"] {
width: calc(100% - 20px);
margin-bottom: 10px;
padding: 5px;
font-size: 18px;
border: none;
border-bottom: 2px solid #333;
background-color: #fff;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
button {
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;

Page 37
 background-color: #fff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ddd;
}

4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 38
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Create a web page with the following constrains
I) an clickable image ii) a hyperlink to your collage web site
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• <a> (Anchor Tag): Used to create hyperlinks. The href attribute specifies the destination
URL that the link points to.
• <img> (Image Tag): Displays an image on the web page. The src attribute defines the
image source (URL or file path), and the alt attribute provides alternative text for screen
readers and when the image fails to load.
• .container: Defines a container for the content, setting its width and centering it
horizontally on the page.

Page 39
 • .image-container: Creates a container for the image link, using display: inline-block to
align it horizontally. Also includes some margin for spacing.
• .image-container img: Styles the image within its container, setting its width, height, and
centering it using margin: 0 auto.
3.2 Program
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image and College Website Link</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}

.container {
width: 80%;
margin: 20px auto;
}

.image-container {
display: inline-block;
margin-bottom: 20px;
}
.image-container img {
width: 350px;
height: 150px;
display: block;
margin: 100px auto;
}

Page 40
 </style>
</head>
<body>

<div class="container">
<!-- Clickable Image -->
<div class="image-container">
<a href="https://aitr.ac.in/">
<img src="C:\Users\Hp\Desktop\iwt\acro.png" alt="Clickable Image">
</a>
</div>

<!-- Hyperlink to College Website -->

<p>Visit my college website: <a href="https://aitr.ac.in/">Your College Website</a></p>
</div>
</body>
</html>
4 Tabulation Sheet

INPUT OUTPUT
NA NA

Page 41
5 Results

Page 42
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Prepare a "resume.html" that might include such information as: a) distinguishing marks b)
special interests c) work history d) education and training e) job objective f) relevant skills
and experience
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• HTML Structure:
o <!DOCTYPE html>: Declares the document type and version as HTML5.
o <html lang="en">: Defines the root element of the HTML document and sets the
language to English.
o <head>: Contains metadata, including the document title and character encoding.
o <body>: Contains the visible content of the web page.

Page 43
 • Sections in the Resume:
o Name Heading (<h1>): Displays the name in a larger font size and centered
alignment.
o Distinguishing Marks, Special Interests, Work History, Education and Training,
Job Objective, Relevant Skills and Experience: These are represented as
individual sections (<div class="section">) using semantic HTML tags (<h2> for
headings, <ul> for unordered lists, <p> for paragraphs, and <li> for list items) to
organize and structure the content.
• CSS Styling:
o Body Styling: Sets the font family, line height, and overall margin for the entire
page.
o Headings (<h1>, <h2>): Adjusts the font size, color, and margin-bottom for better
visual hierarchy.
o Sections: Adds margin-bottom to create spacing between sections (<div
class="section">) for improved readability.
o Lists (<ul>, <li>) and Paragraphs (<p>): Styles the unordered lists to have bullets
and sets the margin for list items. Additionally, adjusts the margin-bottom for
paragraphs within sections.
3.2 Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resume - Loki Odinson</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 30px;
max-width: 800px;
margin: 0 auto;
color: #333;

Page 44
 }
h1 {
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
h2 {
font-size: 22px;
margin-bottom: 12px;
color: #007bff;
}
.section {
margin-bottom: 25px;
}
.section p {
margin-bottom: 8px;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
</style>
</head>
<body>

<h1>Loki Odinson</h1>

<div class="section">
<h2>Distinguishing Marks</h2>
<ul>
<li>Tattoo on left arm</li>
<li>Mole on right cheek</li>

Page 45
 </ul>
</div>

<div class="section">
<h2>Special Interests</h2>
<p>Photography, Hiking, Playing Musical Instruments</p>
</div>

<div class="section">
<h2>Work History</h2>
<p>Marketing Assistant - ABC Company (2018-2020)</p>
<p>Sales Representative - XYZ Corporation (2016-2018)</p>
</div>

<div class="section">
<h2>Education and Training</h2>
<p>Bachelor of Business Administration - University of Example (2012-2016)</p>
<p>Digital Marketing Certification (2020)</p>
</div>

<div class="section">
<h2>Job Objective</h2>
<p>To secure a marketing role in a dynamic environment utilizing digital marketing skills
and sales expertise.</p>
</div>

<div class="section">
<h2>Relevant Skills and Experience</h2>
<ul>
<li>Marketing Strategy</li>
<li>Digital Marketing and Social Media</li>

Page 46
 <li>Sales and Customer Relationship Management</li>
<li>Effective Communication</li>
</ul>
</div>
</body>
</html>
4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 47
 Acropolis Institute of Technology and Research, Indore
Department of CSE (Artificial Intelligence & Machine Learning)
Lab: Internet and Web Group / Title:
Technology (AL703D)
EVALUATION RECORD Type/ Lab Session:
Name Vinit Bhaiji Enrollment No. 0827AL201067
Performing on First submission Second submission
Extra Regular

Grade and Remarks by the Tutor

1. Clarity about the objective of experiment
2. Clarity about the Outcome
3. Submitted the work in desired format
4. Shown capability to solve the problem
5. Contribution to the team work

Additional remarks

Grade: Cross the grade.

A B C D F

Tutor

1 Title
Create a an HTML document with JavaScript code that
a) Has three textboxes and a button
b) The details to be accepted using textboxes are principal, rate of interest, and duration in years.
c) When user clicks the Ok button a message box appears showing the simple interest of
principal amount
2 Neatly Drawn and labeled experimental setup
NA
3 Theoretical solution of the instant problem
3.1 Algorithm
• The HTML document contains three textboxes for the principal amount, rate of interest,
and duration (in years), along with a button.
• The JavaScript function calculateSimpleInterest() is triggered when the button is clicked.
• Inside the function:

Page 48
 o It retrieves the values entered by the user in the textboxes using
document.getElementById.
o Converts the values to numbers using parseFloat.
o Calculates the simple interest using the formula (principal * rate * time) / 100.
o Displays the calculated simple interest in an alert box using alert.
3.2 Program
<!DOCTYPE html>
<html>
<head>
<title>Simple Interest Calculator</title>
<script>
function calculateSimpleInterest() {
// Get values from input textboxes
var principal = parseFloat(document.getElementById('principal').value);
var rateOfInterest = parseFloat(document.getElementById('rateOfInterest').value);
var duration = parseFloat(document.getElementById('duration').value);

// Calculate simple interest

var simpleInterest = (principal * rateOfInterest * duration) / 100;

// Show the result in a message box

alert("Simple Interest: " + simpleInterest);
}
</script>
</head>
<body>

<h1>Simple Interest Calculator</h1>

<div>
<label for="principal">Principal:</label>
<input type="text" id="principal" placeholder="Enter Principal Amount"><br><br>

Page 49
 <label for="rateOfInterest">Rate of Interest:</label>
<input type="text" id="rateOfInterest" placeholder="Enter Rate of Interest"><br><br>

<label for="duration">Duration (in years):</label>

<input type="text" id="duration" placeholder="Enter Duration"><br><br>

<button onclick="calculateSimpleInterest()">Calculate Simple Interest</button>

</div>
</body>
</html>
4 Tabulation Sheet

INPUT OUTPUT
NA NA

5 Results

Page 50