DAYANANDA SAGAR ACADEMY OF TECHNOLOGY AND MANAGEMENT

Udayapura,KanakapuraRoad, Opp. ArtofLiving,Bangalore–560082

(AffliatedtoVTU,Belagavi, ApprovedbyAICTE, NewDelhi)
Accredited by NBA and NAAC(A+)

DEPARTMENT OF COMPUTER SCIENCE &ENGINEERING 2024

Web Technology Lab MANUAL
(BCSL504)

Compiled by:

Prof.Swathi A
Asst Professor,Dept of CSE

Dr.Nandini C Dr.M Ravishankar

HOD,CSE, DSATM Principal, DSATM
 DAYANANDA SAGAR ACADEMY OF ApprovedbyAICTE
TECHNOLOGY&MANAGEMENT Accredited by NAAC with A+
Grade6ProgramsAccredited byNBA
(CSE,ISE,ECE,EEE,MECH, CIVIL)

INSTITUTION VISION AND MISSION

Vision of the Institution

To strive at creating the institution a center of highest caliber of learning, so as to create an

overallintellectual atmosphere with each deriving strength from the other to be the best of engineers,
scientistswithmanagement &design skills.

Mission of the Institution:

 Toserveits region,state,the nationandglobally bypreparing studentstomake

 meaningfulcontributionsinanincreasingcomplexglobalsocietychallenge.
 Toencourage,reflectiononandevaluationofemergingneedsandprioritieswithstateofartinfrastructureat
institution.
 Tosupport researchandservicesestablishing enhancementsin
technical,health,economic,humanandculturaldevelopment.
 Toestablishinterdisciplinarycenterofexcellence,supporting/promotingstudent’simplementation.
 Toincreasethenumberof Doctorateholderstopromoteresearchcultureoncampus.
 ToestablishIIPC,IPR,EDC,innovationcellswithfunctionalMOU’ssupportingstudent’squalitygrowth.
 DAYANANDA SAGAR ACADEMY OF ApprovedbyAICTE
Accredited by NAAC with A+
TECHNOLOGY & MANAGEMENT
Grade6ProgramsAccredited byNBA
(CSE,ISE,ECE,EEE,MECH,CIVIL)

QUALITY POLICY

Dayananda Sagar Academy of Technology and Management aims at achieving

academicexcellence through continuous improvement in all spheres of Technical and
Managementeducation. In pursuit of excellence cutting-edge and contemporary skills are
imparted to theutmostsatisfaction ofthe students andtheconcerned stakeholders

OBJECTIVES & GOALS

 Creating an academic environment to nurture and develop competent

entrepreneurs,leadersandprofessionalswhoaresociallysensitiveandenvironmentallyc
onscious.
 Integration of Outcome Based Education and cognitive teaching and
learningstrategiesto enhancelearning effectiveness.
 Developing necessary infrastructure to cater to the changing needs of Business
andSociety.
 Optimum utilization of the infrastructure and resources to achieve excellence in
allareasof relevance.
 Adopting learning beyond curriculum through outbound activities and
creativeassignments.
 Imparting contemporary and emerging techno-managerial skills to keep pace with
thechangingglobal trends.
 Facilitating greater Industry-Institute Interaction for skill development
andemployabilityenhancement.
 Establishingsystemsandprocessestofacilitateresearch,innovationand
entrepreneurship forholisticdevelopment ofstudents.
 ImplementationofQualityAssuranceSysteminallInstitutionalprocesses
 DAYANANDA SAGAR ACADEMY OF ApprovedbyAICTE
TECHNOLOGY&MANAGEMENT Accredited by NAAC with A+
Grade6ProgramsAccredited byNBA
(CSE,ISE,ECE,EEE,MECH,CIVIL)

DepartmentofComputerScienceand Engineering
VisionandMissionof theDepartment

Department Vision
Epitomize CSE graduate to carve a niche globally in the field of computer science to excel in the world
ofinformationtechnologyandautomationbyimpartingknowledgetosustainskillsforthechangingtrendsinthesoc
iety and industry.
DepartmentMission
M1:Toeducatestudentstobecomeexcellentengineersinaconfidentandcreativeenvironmentthroughworld-
classpedagogy.
M2:Enhancingtheknowledgeinthechangingtechnologytrendsbygivinghands-
onexperiencethroughcontinuouseducation andbymaking them to organize& participatein variousevents.
M3:Impartskillsinthe fieldofIT anditsrelatedareaswithafocusondevelopingthe requiredcompetencies and
virtuesto meet theindustry expectations.
M4:Ensurequalityresearchandinnovations tofulfillindustry,government&social needs.
M5:Impartentrepreneurshipandconsultancyskillstostudentstodevelopself-sustaininglifeskillsinmulti-
disciplinaryareas.

ProgrammeEducationalObjectives

PEO 1: Engage in professional practice to promote the development of innovative systems and
optimizedsolutionsforComputer Scienceand Engineering.
PEO2:Adapttodifferentrolesandresponsibilitiesininterdisciplinaryworkingenvironmentbyrespecting
professionalism and ethical practices within organization and society at national
andinternationallevel.
PEO 3: Graduates will engage in life-long learning and professional development to acclimate the
rapidlychangingworkenvironment and developentrepreneurship skills.
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals, and
anengineeringspecialization to thesolution ofcomplex engineeringproblems.
2. Problem analysis: Identify, formulate, research literature, andanalyze complex engineering
problemsreaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineeringsciences.
3. Design/development of solutions: Design solutions for complex engineering problems and design
systemcomponents or processes that meet the specified needs with appropriate consideration for the public
healthandsafety,and the cultural, societal,and environmental considerations.
4. Conductinvestigations ofcomplexproblems: Useresearch-basedknowledgeandresearchmethodsincluding
design of experiments, analysis and interpretation of data, and synthesis of the information toprovidevalid
conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineeringand IT tools including prediction and modelling to complex engineering activities with an
understanding ofthelimitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal,health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professionalengineeringpractice.
7. Environment and sustainability: Understand the impact of the professional engineering solutions
insocietalandenvironmentalcontexts,anddemonstratetheknowledgeof,andneedforsustainabledevelopment.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
theengineeringpractice.
9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverseteams,and in multidisciplinarysettings.
10. Communication:Communicateeffectivelyoncomplexengineeringactivitieswiththeengineeringcommunity
and with society at large, such as, being able to comprehend and write effective reports anddesign
documentation, makeeffectivepresentations, and giveand receiveclearinstructions.
11. Project management and finance: Demonstrate knowledge and understanding of the engineering
andmanagement principles and apply these to one’s own work, as a member and leader in a team, to
manageprojectsand in multidisciplinaryenvironments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independentandlife-long learning in thebroadestcontextoftechnologicalchange.
PSO1:FoundationofMathematicalConcepts:Abilityto
usemathematicalmethodologiestocrackproblemusing suitablemathematical analysis,data
structure and suitablealgorithm.
PSO 2:Foundation of Computer System: Ability to interpret the fundamental concepts and
methodologyofcomputersystems.Studentscanunderstandthefunctionalityofhardwareandsof
twareaspectsofcomputer systems.
PSO 3: Foundations of Software Development: Ability to grasp the software development
lifecycle andmethodologies of software systems. Possess competent skills and knowledge
of software designprocess. Familiarity and practical proficiency with a broad area of
programming concepts andprovidenew ideas and innovations towards research.
PSO4:FoundationsofMulti-
DisciplinaryWork:Abilitytoacquireleadershipskillstoperformprofessional activities with
social responsibilities, through excellent flexibility to function in multi-disciplinarywork
environment with self-learningskills.
TABLE OF CONTENTS:

S.NO EXPERIMENTS
1 Develop the HTML page named as “Myfirstwebpage.html”. Add the following tags with
relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML
Tags”
b) Different heading tags (h1 to h6)
c) Paragraph d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag h
h) Different Logical Style (<b>,<u>,<sub>,<sup>etc.)
2 Develop the HTML page named as “Table.html” to display your class time table.
a) Provide the title as Time Table with table header and table footer, row-span and col-span etc.
b) Provide various colour options to the cells (Highlight the lab hours and elective hours with
different colours.)
c) Provide colour options for rows.
3 Develop an external style sheet named as “style.css” and provide different styles for
h2, h3, hr, p, div, span, time, img&a tags. Apply different CSS selectors for tags and
demonstrate the significance of each.
4 Develop HTML page named as “registration.html” having variety of HTML input
elements with background colors, table for alignment & provide font colors & size
using CSS styles
5 Develop HTML page named as “newpaper.html” having variety of HTML semantic
elements with background colors, text-colors & size for figure, table, aside, section,
article, header, footer… etc
6 Apply HTML, CSS and JavaScript to design a simple calculator to perform the
following operations: sum, product, difference, remainder, quotient, power, square-root
and square.
7 Develop JavaScript program (with HTML/CSS) for:
a) Converting JSON text to JavaScript Object
b) Convert JSON results into a date
c) Converting From JSON To CSV and CSV to JSON
d) Create hash from string using crypto.createHash() method
8 a. Develop a PHP program (with HTML/CSS) to keep track of the number of visitors visiting the
web page and to display this count of visitors, with relevant headings.
b. Develop a PHP program (with HTML/CSS) to sort the student records which are stored in the
database using selection sort.

9 Develop jQuery script (with HTML/CSS) for:

a. Appends the content at the end of the existing paragraph and list.
b. Change the state of the element with CSS style using animate() method
c. Change the color of any div that is animated.
10 Develop a JavaScript program with Ajax (with HTML/CSS) for:
a. Use ajax() method (without Jquery) to add the text content from the text file by sending ajax
request.
b. Use ajax() method (with Jquery) to add the text content from the text file by sending ajax
request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON values.
Programming Assignment (5 marks): Construct a Website (multiple Web pages) containing ‘Resume’ and Bio -data
by using relevant HTML elements and appropriate styling for presentation with CSS/jQuery/JavaScript. Host the
Website on a cloud platform.

Programming Assignment (5 marks): Build a Web application with HTML, CSS, JavaScript, jQuery and PHP for
online application/registration form. Form should accept the information and print/display on a browser with
formatting/styling upon submission (Button click) on success. Host the application on a cloud platform
.
Course outcomes (Course Skill Set): At the end of the course, the student will be able to:
● Design the experiment for the given problem using HTML, Javascript and CSS.
● Develop the solution for the given real-world problem using jQuery, Ajax and PHP.
● Analyze the results and produce substantial written documentation.

Assessment Details (both CIE and SEE)

The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is 50%.
The minimum passing mark for the CIE is 40% of the maximum marks (20 marks out of 50) and for the
SEE minimum passing mark is 35% of the maximum marks (18 out of 50 marks). A student shall be
deemed to have satisfied the academic requirements and earned the credits allotted to each subject/ course
if the student secures a minimum of 40% (40 marks out of 100) in the sum total of the CIE (Continuous
Internal Evaluation) and SEE (Semester End Examination) taken together

Continuous Internal Evaluation (CIE): CIE marks for the practical course are 50 Marks.
The split-up of CIE marks for record/ journal and test are in the ratio 60:40.
● Each experiment is to be evaluated for conduction with an observation sheet and record write-up.
Rubrics for the evaluation of the journal/write-up for hardware/software experiments are designed by the
faculty who is handling the laboratory session and are made known to students at the beginning of the
practical session.
● Record should contain all the specified experiments in the syllabus and each experiment write-up will be
evaluated for 10 marks.
● Total marks scored by the students are scaled down to 30 marks (60% of maximum marks)
● Weightage to be given for neatness and submission of record/write-up on time.
● Department shall conduct a test of 100 marks after the completion of all the experiments listed in the
syllabus.
● In a test, test write-up, conduction of experiment, acceptable result, and procedural knowledge will carry
a weightage of 60% and the rest 40% for viva-voce.
● The suitable rubrics can be designed to evaluate each student’s performance and learning ability.
● The marks scored shall be scaled down to 20 marks (40% of the maximum marks). The Sum of scaled-
down marks scored in the report write-up/journal and marks of a test is the total CIE marks scored by the
student.

Semester End Evaluation (SEE):

● SEE marks for the practical course are 50 Marks.
● SEE shall be conducted jointly by the two examiners of the same institute, examiners are
appointed by the Head of the Institute.
● The examination schedule and names of examiners are informed to the university before the
conduction of the examination. These practical examinations are to be conducted between the
schedule mentioned in the academic calendar of the University.
● All laboratory experiments are to be included for practical examination
. ● (Rubrics) Breakup of marks and the instructions printed on the cover page of the answer script
to be strictly adhered to by the examiners. OR based on the course requirement evaluation rubrics
shall be decided jointly by examiners.
● Students can pick one question (experiment) from the questions lot prepared by the examiners
jointly.
● Evaluation of test write-up/ conduction procedure and result/viva will be conducted jointly by
examiners.
● General rubrics suggested for SEE are mentioned here, writeup-20%, Conduction procedure and
result in -60%, Viva-voce 20% of maximum marks. SEE for practical shall be evaluated for 100
marks and scored marks shall be scaled down to 50 marks (however, based on course type, rubrics
shall be decided by the examiners) Change of experiment is allowed only once and 15% of Marks
allotted to the procedure part are to be made zero. The minimum duration of SEE is 02 hours

Suggested Learning Resources: Books:

Randy Connolly and Ricardo Hoar, Fundamentals of Web Development, 3rd edition, Pearson, 2021 2.
Robert W Sebesta, Programming the World Wide Web, 8th Edition, Pearson Education, 2020.

Web Links:
● https://www.w3schools.com/html/default.asp
● https://www.w3schools.com/css/default.asp
● https://www.w3schools.com/js/js_examples.asp
● https://www.geeksforgeeks.org/javascript-examples/
● https://www.w3schools.com/php/default.asp
● https://www.w3schools.com/jquery/default.asp
● https://www.w3schools.com/js/js_ajax_intro.asp
● https://www.geeksforgeeks.org/jquery-tutorial/
Solutions:
1
Develop the HTML page named as “Myfirstwebpage.html”. Add the
following tags with relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML
Tags”
b) Different heading tags (h1 to h6)
c) Paragraph d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag h
h) Different Logical Style (<b>,<u>,<sub>,<sup>etc.)

Myfirstwebpage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Moving text -->
<marquee direction="right">Basic HTML Tags</marquee>

<!-- Headings from h1 to h6 -->

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Paragraph -->

<p>This is a paragraph demonstrating the paragraph tag.</p>

<!-- Horizontal line -->

<hr>

<!-- Line Break -->

<p>This is some text.<br>This is on a new line.</p>

<!-- Block Quote -->

<blockquote>This is a block quote.</blockquote>

<!-- Pre tag -->

<pre>
Text is
pre-formatted
and retains
 spaces and line breaks.
</pre>

<!-- Logical Styles -->

<p>This is <b>bold</b> text, <u>underlined</u> text, _subscript text, and ^superscript
text.</p>
</body>
</html>

Output

2 Develop the HTML page named as “Table.html” to display your class time
table.
a) Provide the title as Time Table with table header and table footer, row-
span and col-span etc.
 b) Provide various colour options to the cells (Highlight the lab hours and
elective hours with different colours.)
c) Provide colour options for rows.

Table.html

<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
</head>
<body>
<h1 style="text-align: center;">Time Table</h1>
<table border="1" align="center" width="80%">
<thead>
<tr>
<th>Day/Period</th>
<th>I<br>9:30-10:25</th>
<th>II<br>10:25-11:20</th>
<th><br>11:20-11:35</th>
<th>III<br>11:35-12:30</th>
<th>IV<br>12:30-1:20</th>
<th><br>1:25-2:15</th>
<th>V<br>2:25-3:10</th>
<th>VI<br>3:10-4:05</th>
<th>VII<br>4:05-5:00</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="10" style="text-align: center;">End of Timetable</td>
</tr>
</tfoot>
<tbody>
<tr style="background-color: #a6a8db;">

<th>Monday</th>
<td>CN</td>
<td>PE-AI</td>
<td rowspan="6" style="background-color: #ffcccb;"><b>TEA BREAK</b></td>
<td colspan="2" style="background-color: #add8e6;">Lab</td>
<td rowspan="6" style="background-color: #ffcccb;"><b>LUNCH</b></td>
<td>EVS</td>
<td>RM</td>
<td>TOC</td>
</tr>
<tr style="background-color: #FFFFFF;">

<th>Tuesday</th>
<td>CN</td>
<td>RM</td>
<td>SE&PM</td>
<td>SE&PM</td>
 <td>TOC</td>
<td>RM</td>
<td>NPTEL/MOOC</td>
</tr>
<tr style="background-color: #a6a8db;">
<th>Wednesday</th>
<td>SE&PM</td>
<td>TOC</td>
<td>SE&PM</td>
<td>PE-AI</td>
<td>CN</td>
<td colspan="2">NPTEL/MOOC</td>
</tr>
<tr style="background-color: #FFFFFF">
<th>Thursday</th>
<td>TOC</td>
<td>PE-AI</td>
<td colspan="2" style="background-color: #add8e6;">Lab</td>
<td colspan="3">NPTEL/MOOC</td>

</tr>
<tr style="background-color: #a6a8db;">
<th>Friday</th>
<td>PE-AI</td>
<td>CN</td>
<td colspan="2">Mini Project</td>
<td colspan="3">NPTEL/MOOC</td>
</tr>
<tr style="background-color: #FFFFFF">
<th>Saturday</th>
<td colspan="2">NPTEL/MOOC</td>
<td colspan="2">PrePlacement Activities</td>
<td colspan="3">Technical Workshop/Cultural Event/Skill Development</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:
3 Develop an external style sheet named as “style.css” and provide
different styles for h2, h3, hr, p, div, span, time, img&a tags. Apply
different CSS selectors for tags and demonstrate the significance of
each.
Three.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Elements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>

<hr class="hr-special">
<p class="hr-special">use of class selector</p>

<p id="unique-paragraph">This is a unique paragraph with an ID selector.</p>

<p>This is a normal paragraph.</p>

<div class="box">
<p>Inside a div with class "box".</p>
<span>Some text in a span inside div</span>
</div>

<div class="highlight">
<p>This is another div with a background color from class "highlight".</p>
</div>

<time datetime="2024-10-05">October 5, 2024</time>

<img src="image.jpg" title="flower" alt="Example Image">

 <img src="image.jpg" title="flow" alt="Example Image">

<a href="https://example.com">Go to Example.com</a>

</body>
</html>

style.css

/* Type Selector - targets all elements of the given type (e.g., h2, h3) */
h2 {
color: #4CAF50;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
border-bottom: 2px solid #ccc;
}

h3 {
color: #FF5722;
font-family: 'Verdana', sans-serif;
text-transform: capitalize;
}

/* Class Selector - targets all elements with a specific class */

.hr-special {
border: 1px dashed #FFC107;
margin: 10px 0px;
}

/* ID Selector - targets a single unique element with a specific ID */

#unique-paragraph {
font-size: 18px;
color: #9C27B0;
}

/* Universal Selector - applies to all elements within a div */

div * {
font-weight: bold;
}

/* Pseudo-class selector - applies styles to links on hover */

a:hover {
color: #F44336;
}
/* Span styling - applying color */
span {
color: #009688;
font-weight: normal;

/* Time styling */
time {
font-style: italic;
color: #795548;
}

/* IMG selector */
img{
width: 100px;
height: auto;
border-radius: 10px;

}
[title="flower"] {
border: 5px solid purple;
width: 100px;
height: auto;
border-radius: 10px;

/* Using class selectors for div elements */

div.box {
border: 1px solid #333;
padding: 15px;
margin: 15px 0;
background-color: #f9f9f9;
}

div.highlight {
background-color: #FFEB3B;
}

div p {
color: forestgreen;
}

p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Output:

4
Develop HTML page named as “registration.html” having variety of
HTML input elements with background colors, table for alignment &
provide font colors & size using CSS styles

registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
}
 table {
margin: 0 auto;
padding: 20px;
width: 50%;
background-color: #fff;

}
th, td {
padding: 10px;
text-align: left;
}
th {
color: #333;
font-size: 18px;
}
td input[type="text"],
td input[type="email"],
td input[type="password"],
td input[type="date"],
td select {
width: 100%;
padding: 8px;
font-size: 16px;
background-color: #e6f7ff;
border: 1px solid #ccc;
border-radius: 4px;
}
td input[type="radio"],
td input[type="checkbox"] {
margin-right: 10px;
}
td input[type="submit"] {
width: 100%;
padding: 10px;
font-size: 18px;
background-color: #28a745;
color: #fff;
border-radius: 10px;
cursor: pointer;
}
td input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>

<h1>Registration Form</h1>
 <form action="#" method="post">
<table>
<tr>
<th>First Name:</th>
<td><input type="text" name="firstname" placeholder="Enter your
first name"></td>
</tr>
<tr>
<th>Last Name:</th>
<td><input type="text" name="lastname" placeholder="Enter your
last name"></td>
</tr>
<tr>
<th>Email:</th>
<td><input type="email" name="email" placeholder="Enter your
email"></td>
</tr>
<tr>
<th>Password:</th>
<td><input type="password" name="password" placeholder="Enter
your password"></td>
</tr>
<tr>
<th>Date of Birth:</th>
<td><input type="date" name="dob"></td>
</tr>
<tr>
<th>Gender:</th>
<td>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>
<tr>
<th>Hobbies:</th>
<td>
<input type="checkbox" name="hobby1" value="reading"> Reading
<input type="checkbox" name="hobby2" value="sports"> Sports
<input type="checkbox" name="hobby3" value="music"> Music
</td>
</tr>
<tr>
<th>Country:</th>
<td>
<select name="country">
<option value="">Select Country</option>
<option value="india">INDIA</option>
<option value="bhutan">BHUTAN</option>
 <option value="uk">UK</option>
</select>
</td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Register"></td>
</tr>
</table>
</form>

</body>
</html>

Output:

5 Develop HTML page named as “newpaper.html” having variety of

HTML semantic elements with background colors, text-colors & size
for figure, table, aside, section, article, header, footer… etc

Newspaper.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newspaper</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #007BFF; /* Blue background */
color: white; /* White text color */
text-align: center;
padding: 20px 0;
}

nav {
background-color: #333; /* Dark background */
padding: 10px;
}

nav a {
color: white; /* White text color */
padding: 10px 15px;
text-decoration: none; /* No underline */
}

nav a:hover {
background-color: #575757; /* Darker on hover */
}

section {
display: flex;
margin: 20px;
}

article {
flex: 3; /* Take up 3 parts of the flex container */
background-color: #fff; /* White background */
padding: 20px;
margin-right: 20px; /* Right margin */

aside {
flex: 1; /* Take up 1 part of the flex container */
background-color: #e7e7e7; /* Light gray background */
padding: 20px;

}
 footer {
background-color: #333; /* Dark background */
color: white; /* White text color */
text-align: center;
padding: 10px 0;
width: 100%;
}

figure {
background-color: #e7f3fe; /* Light blue background */
padding: 10px;
margin: 0; /* No margin */

figcaption {
font-size: 0.9em; /* Smaller text */
color: #555; /* Gray text color */
}

table {
width: 100%; /* Full width */
margin-top: 20px; /* Top margin */
}

th,
td {
border: 1px solid #ddd; /* Light gray border */
padding: 8px; /* Cell padding */
}

th {
background-color: #f2f2f2; /* Light gray background */
color: #333; /* Dark text color */
}

h1,
h2,
h3 {
color: #333; /* Dark text color */
}
</style>
</head>

<body>
 <header>
<h1>Daily News</h1>
<nav>
<a href="#">Home</a>
<a href="#">World</a>
<a href="#">Local</a>
<a href="#">Sports</a>
<a href="#">Entertainment</a>
</nav>
</header>

<section>
<article>
<h2>Breaking News: India Launches Chandrayaan-3 Lunar Mission</h2>
<p>India has successfully launched the Chandrayaan-3 mission to the
moon, aiming to explore the lunar surface and conduct experiments to further
enhance scientific knowledge.</p>

<figure>
<img src="chandrayaan3.JPG" alt="Chandrayaan-3 Mission Image">
<figcaption>India's Chandrayaan-3 spacecraft preparing for
launch.</figcaption>
</figure>

<h3>Latest Updates</h3>
<table>
<tr>
<th>Event</th>
<th>Date</th>
<th>Location</th>
</tr>
<tr>
<td>Chandrayaan-3 Landing</td>
<td>October 6, 2024</td>
<td>Moon</td>
</tr>
<tr>
<td>National Sports Day Celebration</td>
<td>August 29, 2024</td>
<td>Various Locations</td>
</tr>
<tr>
<td>Diwali Festival</td>
<td>October 31, 2024</td>
<td>Nationwide</td>
</tr>
</table>
 </article>

<aside>

<h2>Popular Articles</h2>
<ul>
<li><a href="#">India's Economic Growth Projections for
2024</a></li>
<li><a href="#">Top 10 Tourist Destinations in India</a></li>
</ul>
</aside>
</section>

<footer>
<p>&copy; 2024 Daily News. All Rights Reserved.</p>
</footer>

</body>

</html>

Output:

6 Apply HTML, CSS and JavaScript to design a simple calculator to

perform the following operations: sum, product, difference,
remainder, quotient, power, square-root and square.

6.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="calculator">
<h1>Simple Calculator</h1>

<div class="input-section">
<input type="number" id="num1" placeholder="Enter number 1">
<input type="number" id="num2" placeholder="Enter number 2">
</div>

<div class="buttons-section">
<button onclick="calculate('sum')">Sum</button>
<button onclick="calculate('product')">Product</button>
<button onclick="calculate('difference')">Difference</button>
<button onclick="calculate('remainder')">Remainder</button>
<button onclick="calculate('quotient')">Quotient</button>
<button onclick="calculate('power')">Power</button>
<button onclick="calculate('squareRoot')">Square Root</button>
<button onclick="calculate('square')">Square</button>
</div>

<div class="result-section">
<h2>Result: <span id="result"></span></h2>
</div>

</div>

<script src="script.js"></script>
</body>
</html>

styles.css

body {
font-family: Arial, sans-serif;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
display: flex;
}
 .calculator {
padding: 20px;
text-align: center;
width: 300px;
}

input {
width: 90%;
padding: 8px;
margin: 5px 0;
}

button {
padding: 10px;
margin: 5px;
width: 100px;
background-color: darkturquoise;
}

.result-section {
margin-top: 20px;
font-size: 18px;
}

Script.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="calculator">
<h1>Simple Calculator</h1>

<div class="input-section">
<input type="number" id="num1" placeholder="Enter number 1">
<input type="number" id="num2" placeholder="Enter number 2">
</div>

<div class="buttons-section">
<button onclick="calculate('sum')">Sum</button>
<button onclick="calculate('product')">Product</button>
 <button onclick="calculate('difference')">Difference</button>
<button onclick="calculate('remainder')">Remainder</button>
<button onclick="calculate('quotient')">Quotient</button>
<button onclick="calculate('power')">Power</button>
<button onclick="calculate('squareRoot')">Square Root</button>
<button onclick="calculate('square')">Square</button>
</div>

<div class="result-section">
<h2>Result: <span id="result"></span></h2>
</div>

</div>

<script src="script.js"></script>
</body>
</html>

Output:

7 Develop JavaScript program (with HTML/CSS) for:

a) Converting JSON text to JavaScript Object
b) Convert JSON results into a date
c) Converting From JSON To CSV and CSV to JSON
d) Create hash from string using crypto.createHash() method
Seven.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Operations with JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
margin: 20px 0;
}
.btn {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-right: 10px;
}
.btn:hover {
background-color: #0056b3;
}
#output, #csvOutput, #hashOutput {
margin-top: 20px;
padding: 15px;
background-color: #f4f4f4;
border: 1px solid #ddd;
}
</style>
</head>
<body>

<h1>JSON Operations with JavaScript</h1>

<!-- Convert JSON Text to JavaScript Object -->

<div class="container">
<h2>Convert JSON to JavaScript Object</h2>
<button class="btn" id="jsonToObject">Convert JSON</button>
 <div id="output"></div>
</div>

<!-- Convert JSON Date to JavaScript Date -->

<div class="container">
<h2>Convert JSON Date to JavaScript Date</h2>
<button class="btn" id="jsonToDate">Convert JSON Date</button>
<div id="dateOutput"></div>
</div>

<!-- Convert JSON to CSV and CSV to JSON -->

<div class="container">
<h2>Convert JSON to CSV and CSV to JSON</h2>
<button class="btn" id="jsonToCSV">Convert JSON to CSV</button>
<button class="btn" id="csvToJSON">Convert CSV to JSON</button>
<div id="csvOutput"></div>
</div>

<!-- Node.js Hash Example (Illustrative) -->

<div class="container">
<h2>Create Hash from String using crypto.createHash()</h2>
<button class="btn" id="createHashBtn">Generate Hash
(Node.js)</button>
<div id="hashOutput">This will work on Node.js only.</div>
</div>

<!-- JavaScript Code -->

<script>
// a) Convert JSON text to JavaScript Object
document.getElementById('jsonToObject').addEventListener('click',
function() {
const jsonString = '{"name": "Alice", "age": 25, "city":
"London"}';
const jsonObject = JSON.parse(jsonString);
document.getElementById('output').innerHTML = 'Name: ' +
jsonObject.name + '<br>Age: ' + jsonObject.age + '<br>City: ' +
jsonObject.city;
});

// b) Convert JSON date string to JavaScript Date object

document.getElementById('jsonToDate').addEventListener('click',
function() {
const jsonDate = '{"date": "2023-09-20T15:30:00Z"}';
 const jsonObj = JSON.parse(jsonDate);
const dateObj = new Date(jsonObj.date);
document.getElementById('dateOutput').innerHTML = 'Date: ' +
dateObj.toString();
});

// c) Convert JSON to CSV and CSV to JSON

document.getElementById('jsonToCSV').addEventListener('click',
function() {
const jsonArray = [
{ name: "Alice", age: 25, city: "London" },
{ name: "Bob", age: 30, city: "Paris" }
];

const csv = convertJSONToCSV(jsonArray);

document.getElementById('csvOutput').innerHTML = '<pre>' + csv
+ '</pre>';
});

document.getElementById('csvToJSON').addEventListener('click',
function() {
const csvString = "name,age,city\nAlice,25,London\
nBob,30,Paris";
const json = convertCSVToJSON(csvString);
document.getElementById('csvOutput').innerHTML = '<pre>' +
JSON.stringify(json, null, 2) + '</pre>';
});

// Function to convert JSON to CSV

function convertJSONToCSV(jsonArray) {
const headers = Object.keys(jsonArray[0]).join(',');
const rows = jsonArray.map(obj =>
Object.values(obj).join(',')).join('\n');
return headers + '\n' + rows;
}

// Function to convert CSV to JSON

function convertCSVToJSON(csvString) {
const lines = csvString.split('\n');
const headers = lines[0].split(',');
const jsonArray = lines.slice(1).map(line => {
const values = line.split(',');
let obj = {};
 headers.forEach((header, index) => {
obj[header] = values[index];
});
return obj;
});
return jsonArray;
}

// d) Create Hash from String using crypto.createHash() (Node.js)

// This example will only run in a Node.js environment.
document.getElementById('createHashBtn').addEventListener('click',
function() {
alert("This feature is only available in Node.js environment.
Please run the script in a Node.js environment.");
});
</script>

</body>
</html>
seven.js
// To be run in a Node.js environment

const crypto = require('crypto');

// Create hash from a string

const hash = crypto.createHash('sha256').update('Hello
World').digest('hex');

console.log('Hash:', hash);

Output:
8 a. Develop a PHP program (with HTML/CSS) to keep track of the number of
visitors visiting the web page and to display this count of visitors, with relevant
headings.
b. Develop a PHP program (with HTML/CSS) to sort the student records
which are stored in the database using selection sort.
8a

In C:\xampp\htdocs folder create a folder s. Create eigtha.php file.

Start Apache server in Xampp

Open 8a.php in VS code

<?php
// File to store the visitor count
$count_file = 'count.txt';

// Check if the count file exists

if (!file_exists($count_file)) {
// Create the file and initialize the count to 0
file_put_contents($count_file, 0);
}

// Read the current count from the file

$count = (int)file_get_contents($count_file);

// Increment the count

$count++;

// Save the updated count back to the file

file_put_contents($count_file, $count);
?>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor Counter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
p {
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Visitor Counter</h1>
<p>Number of visitors: <strong><?php echo $count; ?></strong></p>
</div>
</body>
</html>

Output:
Type in browser
8b
In C:\xampp\htdocs folder create a folder s. Create eigthb.php file.
Start Apache server, MySQL IN in Xampp.

CREATE DATABASE school;

USE school;

CREATE TABLE students (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
grade INT
);

INSERT INTO students (name, grade) VALUES

('Alice', 85),
('Bob', 78),
('Charlie', 92),
('David', 65),
('Eve', 88);

eightb.html

<?php
// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "school";
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch student records from the database

$sql = "SELECT * FROM students";
$result = $conn->query($sql);

$students = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$students[] = $row;
}
} else {
echo "No records found.";
}

// Selection Sort Algorithm

function selectionSort(&$students) {
$n = count($students);
for ($i = 0; $i < $n - 1; $i++) {
$min_idx = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($students[$j]['grade'] < $students[$min_idx]['grade']) {
$min_idx = $j;
}
}
// Swap the found minimum element with the first element
$temp = $students[$min_idx];
$students[$min_idx] = $students[$i];
$students[$i] = $temp;
}
}

selectionSort($students);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorted Student Records</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
 padding: 20px;
}
table {
width: 50%;
margin: 20px auto;
border-collapse: collapse;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Sorted Student Records by Grade</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student): ?>
<tr>
<td><?= $student['id']; ?></td>
<td><?= $student['name']; ?></td>
<td><?= $student['grade']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>

<?php
$conn->close();
?>
// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "school";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch student records from the database

$sql = "SELECT * FROM students";
$result = $conn->query($sql);

$students = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$students[] = $row;
}
} else {
echo "No records found.";
}

// Selection Sort Algorithm

function selectionSort(&$students) {
$n = count($students);
for ($i = 0; $i < $n - 1; $i++) {
$min_idx = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($students[$j]['grade'] < $students[$min_idx]['grade']) {
$min_idx = $j;
}
}
// Swap the found minimum element with the first element
$temp = $students[$min_idx];
$students[$min_idx] = $students[$i];
$students[$i] = $temp;
}
}

selectionSort($students);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorted Student Records</title>
<style>
 body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
table {
width: 50%;
margin: 20px auto;
border-collapse: collapse;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Sorted Student Records by Grade</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student): ?>
<tr>
<td><?= $student['id']; ?></td>
<td><?= $student['name']; ?></td>
<td><?= $student['grade']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
<?php
// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "school";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Fetch student records from the database

$sql = "SELECT * FROM students";
$result = $conn->query($sql);

$students = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$students[] = $row;
}
} else {
echo "No records found.";
}

// Selection Sort Algorithm

function selectionSort(&$students) {
$n = count($students);
for ($i = 0; $i < $n - 1; $i++) {
$min_idx = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($students[$j]['grade'] < $students[$min_idx]['grade']) {
$min_idx = $j;
}
}
// Swap the found minimum element with the first element
$temp = $students[$min_idx];
$students[$min_idx] = $students[$i];
$students[$i] = $temp;
}
}

selectionSort($students);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorted Student Records</title>
<style>
 body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
table {
width: 50%;
margin: 20px auto;
border-collapse: collapse;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Sorted Student Records by Grade</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student): ?>
<tr>
<td><?= $student['id']; ?></td>
<td><?= $student['name']; ?></td>
<td><?= $student['grade']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>

<?php
$conn->close();
?>

Output:

9 Develop jQuery script (with HTML/CSS) for:

a. Appends the content at the end of the existing paragraph and list.
b. Change the state of the element with CSS style using animate() method
c. Change the color of any div that is animated.

nine.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Script Example</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>

<div class="container">
<p id="paragraph">This is an example paragraph.</p>
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
 </ul>
<div id="animatedDiv" class="box">I am a div!</div>
<button id="appendButton">Append Content</button>
<button id="animateButton">Animate Div</button>
</div>

</body>
</html>

style.css

.container {
margin-top: 50px;
}

#paragraph, #list {
margin: 20px;
font-size: 18px;
}

.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
}

script.js

$(document).ready(function() {

// Append content to the paragraph and list

$('#appendButton').click(function() {
 $('#paragraph').append(' Appended text.');
$('#list').append('<li>New list item</li>');
});

// Animate div and change color after animation

$('#animateButton').click(function() {
$('#animatedDiv').animate({
width: '200px',
height: '200px',
opacity: 0.5
}, 1000, function() {
// Callback to change color after animation completes
$(this).css('background-color', 'coral');
});
});

});

Output:

10 Develop a JavaScript program with Ajax (with HTML/CSS) for:

a. Use ajax() method (without Jquery) to add the text content from the text file
by sending ajax request.
b. Use ajax() method (with Jquery) to add the text content from the text file by
sending ajax request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON values.
ten.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX and JSON Example</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
#content, #json-content {
margin: 15px 0;
padding: 10px;
border: 1px solid #ddd;
width: 300px;
background-color: #f9f9f9;
}
button {
padding: 8px 16px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>

<h1>AJAX & JSON Example</h1>

<div id="content">Text Content will load here...</div>

<button onclick="loadTextWithoutJQuery()">Load Text without
jQuery</button>
<button onclick="loadTextWithJQuery()">Load Text with jQuery</button>

<div id="json-content">JSON Content will load here...</div>

<button onclick="loadJSONWithGetJSON()">Load JSON with
getJSON()</button>
<button onclick="loadJSONWithParseJSON()">Load JSON with
parseJSON()</button>
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
script>
<script>
// (a) AJAX Request without jQuery
function loadTextWithoutJQuery() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "textfile.txt", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("content").innerText = xhr.responseText;
}
};
xhr.send();
}

// (b) AJAX Request with jQuery $.ajax()

function loadTextWithJQuery() {
$.ajax({
url: "textfile.txt",
method: "GET",
success: function (data) {
$("#content").text(data);
},
error: function (error) {
console.error("Error loading text file:", error);
}
});
}

// (c) jQuery $.getJSON() Method

function loadJSONWithGetJSON() {
$.getJSON("data.json", function (data) {
let jsonContent = `Name: ${data.name}, Age: ${data.age}, Country:
${data.country}`;
$("#json-content").text(jsonContent);
});
}

// (d) jQuery $.parseJSON() Method

function loadJSONWithParseJSON() {
$.ajax({
 url: "data.json",
method: "GET",
dataType: "text", // Receive the data as plain text
success: function (response) {
const data = $.parseJSON(response);
let jsonContent = `Name: ${data.name}, Age: ${data.age},
Country: ${data.country}`;
$("#json-content").text(jsonContent);
},
error: function (error) {
console.error("Error loading JSON file:", error);
}
});
}
</script>
</body>
</html>

textfile.txt
This is a sample text file content loaded via AJAX.

data.json

{
"name": "John Doe",
"age": 30,
"country": "USA"
}

Output: Right Click and Select Open with Live Server