Web Technology Lab

By Sachin Adi

Program 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)Different Logical Style (<b>, <u>, <sub>, <sup>etc)


 <!DOCTYPE html> 
<head> 
  <title>
    My First Web Page
  </title> 
</head> 
<body>
<marquee> Welcome to SMVCE </marquee>
<h1>This is a H1 heading </h1> 
<h2>This is a H2 heading </h2> 
<h3>This is a H3 heading </h3> 
<h4>This is a H4 heading </h4> 
<h5>This is a H5 heading </h5> 
<h6>This is a H6 heading </h6>
<p>This is a paragraph demonstrating the use of the paragraph tag in HTML.</p> 
<hr>
<p>This is a line of text before the break.<br>This is a line of text after thebreak.</p>
<blockquote>
This is a blockquote. It is used to display a quotation or excerpt from another source.
</blockquote> 
<pre>
This is preformatted text.


          It preserves spaces and line breaks.
</pre> 
<p>This is <b>bold</b> text.</p>
<p>This is <i>italicized</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <sup>superscript</sup> text.</p>
<p>This is <sub>subscript</sub> text.</p> 
<p>This is <em>emphasized</em> text.</p> 
<p>This is <strong>strong</strong> text.</p> 
<p>This is <mark>highlighted</mark> text.</p> 
<p>This is <small>small</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <code>inline code</code> text.</p>
</body>
</html>

Output:

My First Web Page Welcome to SMVCE

This is a H1 heading

This is a H2 heading

This is a H3 heading

This is a H4 heading

This is a H5 heading

This is a H6 heading

This is a paragraph demonstrating the use of the paragraph tag in HTML.

This is a line of text before the break.
This is a line of text after thebreak.

This is a blockquote. It is used to display a quotation or excerpt from another source.

This is preformatted text.
It preserves spaces and line breaks.

This is bold text.

This is italicized text.

This is underlined text.

This is ^superscript text.

This is _subscript text.

This is emphasized text.

This is strong text.

This is highlighted text.

This is small text.

This is ~~deleted~~ text.

This is inserted text.

This is inline code text.

Program 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.


<!DOCTYPE html>
<html> <head>
<title>Time Table </title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
th,td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f4f4f4;
color: #333;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: #e6f7ff;
}
.lab-hour {
background-color: #ffcccc;
}
.elective-hour {
background-color: #ccffcc;
}
.highlight {
font-weight: bold;
color: #d63384;
}
tfoot {
background-color: #e0e0e0;
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Time Table</h1>
<table>
<thead>
<tr>
<th>Day/Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>Lunch Break</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
</tr>
</thead>
<tr>
<td>Monday</td>
<td>Math</td>
<td class="lab-hour" colspan="2">Physics Lab</td>
<td>English</td>
<td rowspan="5" class="highlight">Break</td>
<td class="elective-hour">Elective</td>
<td>History</td>
</tr>
<tr>
<td>Tuesday</td>
<td class="elective-hour">Elective</td>
<td>Biology</td>
<td>Math</td>
<td>Geography</td>
<td class="lab-hour" colspan="2">Chemistry Lab</td>

</tr>
<tr>
<td>Wednesday</td>
<td>History</td>
<td class="lab-hour" colspan="2">Computer Lab</td>

<td>Math</td>
<td>Physics</td>
<td class="elective-hour">Elective</td>
</tr>
<tr>
<td>Thursday</td>
<td>PE</td>
<td>History</td>
<td>Geography</td>
<td class="elective-hour">Elective</td>
<td>Biology</td>
<td>Math</td>
</tr>
<tr>
<td>Friday</td>
<td class="lab-hour" colspan="2">Biology Lab</td>
<td>English</td>
<td>Physics</td>
<td class="elective-hour">Elective</td>
<td>Chemistry</td>
</tr>
<tfoot>
<tr>
<td colspan="8">End of Timetable</td>
</tr>
</tfoot>
</table>
</body>
</html>

Output:

Time Table

Day/Time	9:00 - 10:00	10:00 - 11:00	11:00 - 12:00	12:00 - 1:00	Lunch Break	2:00 - 3:00	3:00 - 4:00
Monday	Math	Physics Lab		English	Break	Elective	History
Tuesday	Elective	Biology	Math	Geography		Chemistry Lab
Wednesday	History	Computer Lab		Math		Physics	Elective
Thursday	PE	History	Geography	Elective		Biology	Math
Friday	Biology Lab		English	Physics		Elective	Chemistry
End of Timetable

Program 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.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<hr>
<div>This is a div container.
<p>This is a paragraph inside a div.
<span>This is a span inside a paragraph.</span>
</p>
</div>
<time datetime="2025-08-25">25th August 2025</time>
<img src="image.jpg" alt="Sample Image">
<a href="https://www.example.com">This is a link</a>
</body>
</html>

style.css


            
/* Style for H2 heading */
h2 {
color: steelblue;
font-family: Arial, sans-serif; font-size: 24px;
text-transform: uppercase; text-align: center;
}
/* Style for H3 heading */
h3 {
color: lightgreen;
font-family: 'Georgia', serif; font-size: 20px;
font-style: italic;
}
/* Style for Horizontal Rule (HR) */
hr {
border: 1px solid cyan; margin: 20px 100px;
}
/* Style for Paragraph (P) */
p {
font-family: Calibri;
color:violet ;
font-size: 22px;
}
/* Style for Div Container */
div {
background-color: lightpink;
padding: 20px;
margin: 20px 10px;
border-radius: 3px;
}
/* Style for Span */
span {
color: tomato;
font-weight: bold;
}
/* Style for Time */
time {
color: blue;
font-size: 16px;
font-weight: bold;
}
/* Style for Image (img) */
img {
max-width: 300px; height: auto; display: block; margin-left: 100px;
border: solid;
border-radius: 10px;
}
/* Style for Links (a) */
a {
color: orange;
text-decoration:italic;
}
a:hover {
color: red;
text-decoration: underline;
}

Output:

Program 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

              
<!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: #f0f0f0;
margin: 0;
padding: 20px;
}
h1{
color: #333;
text-align: center;
}
table {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
td {
padding: 10px;
}
label {
color: #555;
font-weight: bold;
}

input[type="text"], input[type="email"], input[type="password"], select, textarea
{
width: 100%;
padding: 8px;
border: 1px solid #ddd; 
border-radius: 4px; 
box-sizing: border-box;
font-size: 16px;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 5px;
}
input[type="submit"] 
{
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
}
input[type="reset"] {
background-color: tomato;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
}
input[type="submit"]:hover 
{ 
  background-color: #45a049;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">
<table>
<tr>
<td><label for="fullname">Full Name:</label></td> 
<td><input type="text" name="fullname" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" required></td>
</tr>
<tr>
<td><label for="password">Password: </label></td>
<td><input type="password" name="password" required></td>
</tr>
<tr>
<td><label for="confirm_password">Confirm Password: </label></td> 
<td><input type="password" name="confirm_password" required></td>
</tr>
<tr>
<td><label>Gender:</label></td>
<td>
<input type="radio" name="gender" value="male" required> <label for="male">Male</label>
<input type="radio" name="gender" value="female" required> <label for="female">Female</label>
<input type="radio" name="gender" value="other" required> <label for="other">Other</label>
</td>
</tr>
<tr>
<td><label for="birthdate">Date of Birth: </label></td> 
<td><input type="date" name="birthdate" required></td>
</tr>
<tr>
<td><label for="country">Country: </label></td>
<td>
<select name="country" required>
<option value="">Select a country</option> 
<option value="usa">India</option> 
<option value="uk">United Kingdom</option> 
<option value="canada">Canada</option> 
<option value="australia">Australia</option>
 <option value="other">Other</option> 
</select>
</td>
</tr>
<tr>
<td><label for="interests">Interests:</label></td> <td>
<input type="checkbox" id="sports" name="interests []" value="sports"> <label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests []" value="music"> <label for="music">Music</label>
<input type="checkbox" id="reading" name="interests []" value="reading"> <label for="reading">Reading</label>
<input type="checkbox" id="travel" name="interests[]" value="travel"> <label for="travel">Travel</label>
</td>
</tr>
<tr>
<td><label for="bio">Bio:</label></td>
<td><textarea name="bio" rows="4"></textarea></td>
</tr>
<tr>
<td style="text-align: center;">
<input type="submit" value="Register">
</td>
<td style="text-align: center;"> <input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

Output:

Registration Form

Program 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

<!DOCTYPE html>
<head>
<title>Newspaper page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: 'Arial', sans-serif;
color: #000000;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
margin-bottom: 30px;
border-radius: 10px;
align-items: center;
background-color: #7b38f7;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header a {
font-size: 25px;
font-weight: 600;
color: #fff;
text-decoration: none;
}
nav {
display: flex;
gap: 20px;
color: #fff;
text-align: center;
}
nav a {
font-size: 18px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.content {
display: flex;
justify-content: space-between;
flex: 1;
margin: auto;
padding: 20px 0;
gap: 20px;
position: relative;
}
.main-content {
cursor: pointer;
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
gap: 20px;
background-color: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
aside {
border: 1px solid #ccc;
padding: 20px;
width: 350px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
top: 20px;
color: #333;
right: 0;
margin-left: 20px;
}
.related-news h3 {
text-align: center;
border-radius: 7px;
padding: 8px;
background: #000;
color: #ffffff;
font-size: 1.4em;
margin-bottom: 15px;
}
.related-news ul {
list-style: outside;
padding: 7px;
margin: 0;
}
.related-news li {
margin-bottom: 12px;
}
.related-news a {
text-decoration: none;
color: #7b38f7;
font-weight: bold;
transition: color 0.3s ease;
}
.related-news a:hover {
text-decoration: underline;
}
footer {
border-radius: 10px;
background-color: #7b38f7;
color: #fff;
padding: 20px;
font-weight: 500;
text-align: center;
margin-top: auto;
font-size: 18px;
}
article {
transition: all 0.3s ease;
background-color: #fff;
padding: 15px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
border-radius: 7px;
color: #000000;
}
figure {
background-color: #fafafa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
margin: 0;
}
figcaption {
font-size: 0.9em;
color: #666;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
section {
padding: 20px;
width: 100%;
background-color: #fff;
border-radius: 8px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
section h2 {
color: #fff;
background: #000;
font-size: 24px;
border-radius: 10px;
text-align: center;
padding: 10px;
margin-bottom: 30px;
}
table {
width: 100%;
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
color: #555;
}
thead {
background-color: #007BFF;
color: #fff;
}
th,
td {
padding: 12px;
text-align: left;
}
th {
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #eaeaea;
}
@media (max-width: 600px) {
th,
td {
padding: 8px;
font-size: 14px;
}
}
caption {
background-color: #d9d9d9;
padding: 10px;
font-weight: bold;
border-bottom: 2px solid #ddd;
border-radius: 8px 8px 0 0;
font-size: 1.1em;
color: #333;
}
section {
margin-top: 40px;
margin-bottom: 50px;
}
article h2 {
color: #7b38f7;
font-size: 1.3em;
margin-bottom: 12px;
}
article p {
text-align: left;
line-height: 1.2;
margin-top: 10px;
}
article:hover {
background-color: #e7ddfb;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
padding: 10px;
}
aside {
width: 100%;
margin-top: 20px;
position: static;
margin-left: 0;
}
.main-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<a href="#">Newspaper</a>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Services</a>
<a href="#">Marketing</a>
<a href="#">Updates</a>
</nav>
</header>
<div class="content">
<main class="main-content">
<article>
<h2>Article Title 1</h2>
<figure>
<img src="image1.jpg" alt="Placeholder Image">
<figcaption>Image Caption</figcaption> </figure> <p>This is the content of the first article.
</p> </article> <article>
<h2>Article Title 2</h2>
<figure>
<img src="image2.jpg" alt="Placeholder Image">
<figcaption>Image Caption</figcaption> </figure> <p>This is the content of the second article.
</p>
</article>
<article>
<h2>Article Title 3</h2>
<figure>
<img src="image3.jpg" alt="Placeholder Image">
<figcaption>Image Caption</figcaption> </figure> <p>This is the content of the third article.
</p> </article> <article>
<h2>Article Title 4</h2>
<figure>
<img src="image4.jpg" alt="Placeholder Image">
<figcaption>Image Caption</figcaption> </figure> <p>This is the content of the fourth article.
</p> </article> <article>
<h2>Article Title 5</h2>
<figure>
<img src="image5.jpg" alt="Placeholder Image">
<figcaption>Image Caption</figcaption> </figure> <p>This is the content of the fifth article.
</p> </article> <article>
<h2>Article Title 6</h2>
<figure>
<img src="image6.jpg" alt="Placeholder Image">
<figcaption>Image Caption</figcaption> </figure> <p>This is the content of the sixth article.
</p> </article> </main> <aside class="related-news">
<h3>Related News</h3>
<ul>
<li><a href="#">Related News 1</a></li>
<li><a href="#">Related News 2</a></li>
<li><a href="#">Related News 3</a></li>
</ul>
</aside>
</div>
<section>
<h2>Recent Posts</h2>
<div>
<table>
<caption>List of Posts</caption>
<thead>
<tr>
<th>Post Title</th>
<th>Date</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>Post 1</td>
<td>2025-08-30</td>
<td>Author 1</td>
</tr>
<tr>
<td>Post 2</td>
<td>2025-08-29</td>
<td>Author 2</td>
</tr>
<tr>
<td>Post 3</td>
<td>2025-08-28</td>
<td>Author 3</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer>
<p>© 2024 Newspaper. All rights reserved.</p> </footer> </body> </html>

Output:

Newspaper Page | vtucode

Newspaper

Article Title 1

This is the content of the first article.

Article Title 2

This is the content of the second article.

Article Title 3

This is the content of the third article.

Article Title 4

This is the content of the fourth article.

Article Title 5

This is the content of the fifth article.

Article Title 6

This is the content of the sixth article.

Recent Posts

List of Posts
Post Title	Date	Author
Post 1	2025-08-30	Author 1
Post 2	2025-08-29	Author 2
Post 3	2025-08-28	Author 3

Program 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.

              
<!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" type="text/css" href="style.css">
</head>
<body>
  <div class="calculator">
    <h2>Simple Calculator</h2>
    <input type="number" id="num1" placeholder="Enter number 1">
    <input type="number" id="num2" placeholder="Enter number 2">

    <div class="buttons">
      <button onclick="calculate('sum')">Sum (+)</button>
      <button onclick="calculate('diff')">Difference (-)</button>
      <button onclick="calculate('prod')">Product (×)</button>
      <button onclick="calculate('quot')">Quotient (÷)</button>
      <button onclick="calculate('rem')">Remainder (%)</button>
      <button onclick="calculate('pow')">Power (xʸ)</button>
      <button onclick="calculate('sq')">Square (x²)</button>
      <button onclick="calculate('sqrt')">Square Root (√)</button>
      <button onclick="clearResult()">Clear</button>
    </div>

    <div class="result" id="result">Result: </div>
  </div>

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

style.css

  
body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f4f4f9;
    }

    .calculator {
      background: #fff;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
      width: 350px;
      text-align: center;
    }

    h2 {
      margin-bottom: 15px;
      color: #333;
    }

    input[type="number"] {
      width: 140px;
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 16px;
    }

    .buttons {
      margin-top: 15px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    button {
      padding: 12px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background: orchid;
      color: white;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    
    button:hover {
      background: purple;
    }

    .result {
      margin-top: 20px;
      font-size: 18px;
      color: #222;
      font-weight: bold;
      background: #f1f1f1;
      padding: 10px;
      border-radius: 8px;
    }

script.js

  
    function calculate(operation) 
    {
      let num1 = parseFloat(document.getElementById("num1").value);
      let num2 = parseFloat(document.getElementById("num2").value);
      let result = "";

      switch(operation) 
      {
        case "sum":
          result = num1 + num2;
          break;
        case "diff":
          result = num1 - num2;
          break;
        case "prod":
          result = num1 * num2;
          break;
        case "quot":
          result = num2 !== 0 ? num1 / num2 : "Error (÷0)";
          break;
        case "rem":
          result = num2 !== 0 ? num1 % num2 : "Error (÷0)";
          break;
        case "pow":
          result = Math.pow(num1, num2);
          break;
        case "sq":
          result = num1 * num1;
          break;
        case "sqrt":
          result = num1 >= 0 ? Math.sqrt(num1) : "Invalid (√)";
          break;
      }

      document.getElementById("result").innerText = "Result: " + result;
    }

    function clearResult() 
    {
      document.getElementById("num1").value = "";
      document.getElementById("num2").value = "";
      document.getElementById("result").innerText = "Result: ";
    }

Output:

Simple Calculator

Result:

Program 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.php

<?php print
"<h3> REFRESH PAGE </h3>";
$name="counter.txt";
$file = fopen($name,"r");
$hits= fscanf($file,"%d");
fclose($file);
$hits[0]++;
$file = fopen($name,"w");
fprintf($file,"%d",$hits[0]);
fclose($file);
print "Total number of views: ".$hits[0];
?>

8b.php

<?php
// Database connection
$servername = "localhost";
$username = "root"; // Your database username
$password = ""; // Your database password
$dbname = "student_db"; // Your database name

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

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

// Fetch student records
$sql = "SELECT usn, name, grade FROM students";
$result = $conn->query($sql);

$students = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $students[] = $row;
    }
}

// Selection Sort function
function selectionSort(&$arr, $key) {
    $n = count($arr);
    for ($i = 0; $i < $n - 1; $i++) {
        $minIndex = $i;
        for ($j = $i + 1; $j < $n; $j++) {
            if ($arr[$j][$key] < $arr[$minIndex][$key]) {
                $minIndex = $j;
            }
        }
        // Swap elements
        $temp = $arr[$minIndex];
        $arr[$minIndex] = $arr[$i];
        $arr[$i] = $temp;
    }
}

// Sort by 'grade' (or 'name' if desired)
selectionSort($students, 'grade');

$conn->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Records</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 80%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Student Records (Sorted 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><?php echo $student['usn']; ?></td>
                    <td><?php echo $student['name']; ?></td>
                    <td><?php echo $student['grade']; ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</body>
</html>

Program 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.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Animation Example</title>

<!-- jQuery CDN -->
<script src="jquery.js"></script>

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        text-align: center;
        padding: 30px;
    }
    p, ul {
        width: 50%;
        margin: 10px auto;
        text-align: left;
    }
    #animateDiv {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        margin: 30px auto;
        border-radius: 10px;
        position: relative;
    }
    button {
        padding: 10px 20px;
        margin: 10px;
        border: none;
        background-color: #007bff;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>

<h2>jQuery Animation and Append Example</h2>

<p id="myPara">This is an existing paragraph.</p>

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<div id="animateDiv"></div>

<button id="appendBtn">Append Content</button>
<button id="animateBtn">Animate Box</button>

<script>
$(document).ready(function() {

    // (a) Append content to paragraph and list
    $("#appendBtn").click(function() {
        $("#myPara").append(" <b>— More text added!</b>");
        $("#myList").append("<li>Newly added item</li>");
    });

    // (b) Animate element & (c) Change color of animated div
    $("#animateBtn").click(function() {
        $("#animateDiv").animate({
            left: '150px',
            height: '150px',
            width: '150px',
            borderRadius: '50px'
        }, 1000, function() {
            // (c) Change color after animation completes
            $(this).css("background-color", "tomato");
        });
    });

});
</script>

</body>
</html>

Output:

jQuery Animation Example

jQuery Animation and Append Example

This is an existing paragraph.

Item 1
Item 2

Program 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

To execute this program, we need to have 5 files:

1.data.json 2.data.txt 3.data1.txt 4.jquery.js(pre-defined file) 5.style.css 6.index.html 7.script.js

Note: All files must be in xampp/htdocs/{your_folder_name}/ folder and apache services must be running in xampp control panel.

1.data.json
{ "name": "Arathi",
"age": 20,
"city": "Raichur"
}

2.data.txt
This text content was loaded from data.txt using an AJAX request!

3.data1.txt
This content loaded from data1.txt Loading Text without jquery Ajax

4.JQuery.js
It’s a predefined file . No need of writing the code. Just copy and paste the file.

5.style.css

  body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  padding: 20px;
  text-align: center;
       }

.container {
  margin-bottom: 20px;
           }

button {
  margin: 5px;
  padding: 10px 20px;
  background: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
        }

button:hover {
  background: #0056b3;
             }

#output {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 60%;
  margin: 0 auto;
  text-align: left;
        }

6.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX Demonstration</title>
  <link rel="stylesheet" href="style.css">
  <!-- Include jQuery -->
  <script src="jquery.js"></script>
</head>
<body>

  <h1>AJAX Examples</h1>

  <div class="container">
    <button id="loadText">Load Text (without jQuery Ajax)</button>
    <button id="loadTextJquery">Load Text (jQuery Ajax)</button>
    <button id="loadJSON">Load JSON (getJSON)</button>
    <button id="parseJSON">Parse JSON (parseJSON)</button>
  </div>
  <div id="output"></div>
  <script src="script.js"></script>
</body>
</html>

7.script.js

  // a. Loading the text without AJAX
document.getElementById('loadText').addEventListener('click', function() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data1.txt', true);

  xhr.onload = function() {
    if (this.status === 200) {
      document.getElementById('output').innerText = this.responseText;
    } else {
      document.getElementById('output').innerText = "Error loading file.";
    }
  };

  xhr.send();
});

// b. Loading the text with jQuery and AJAX method
$('#loadTextJquery').on('click', function() {
  $.ajax({
    url: 'data.txt',
    method: 'GET',
    success: function(data) {
      $('#output').text(data);
    },
    error: function() {
      $('#output').text('Error loading file.');
    }
  });
});

// c. jQuery getJSON() method
$('#loadJSON').on('click', function() {
  $.getJSON('data.json', function(data) {
    $('#output').html(
      `<p><strong>Name:</strong> ${data.name}</p>
       <p><strong>Age:</strong> ${data.age}</p>
       <p><strong>City:</strong> ${data.city}</p>`
    );
  });
});

// d. parseJSON() method
$('#parseJSON').on('click', function() {
  const jsonString = '{"product": "Laptop", "price": 50000, "brand": "Dell"}';
  const parsedData = $.parseJSON(jsonString);

  $('#output').html(
    `<p><strong>Product:</strong> ${parsedData.product}</p>
     <p><strong>Price:</strong> Rs ${parsedData.price}</p>
     <p><strong>Brand:</strong> ${parsedData.brand}</p>`
  );
});

Output:

Full Name:
Email:
Password:
Confirm Password:
Gender:	Male Female Other
Date of Birth:
Country:
Interests:	Sports Music Reading Travel
Bio: