RGITX
Home
WEB LAB
ADA
⚠️ This action is not allowed during the exam.
WEB LAB
on March 05, 2025
PROGRAM 1
Introduction to Web
<!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> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <marquee>Basic HTML Tags</marquee> <h1>This is Heading 1</h1> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <h6>This is Heading 6</h6> <p>This is a paragraph. It demonstrates the use of the paragraph tag in HTML. Paragraphs are used to group related content together.</p> <hr> <p>This is another paragraph.<br>This text appears on a new line due to the line break tag.</p> <blockquote> This is a block quote. It's often used to highlight quoted text from another source. </blockquote> <pre> This is preformatted text. It preserves both spaces and line breaks, making it useful </pre> for displaying code or ASCII art. Here are examples of logical styles: <b>Bold Text</b><br> <i>Italic text</i><br> <u>Underlined text</u><br> <strong>Strong text</strong><br> <em>Emphasized text</em> Text with<sub>subscript</sub> and <sup>superscript</sup> </body> </html>
Copy
PROGRAM 2
Time Table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Time Table</title> <style> body {font-family: Arial, sans-serif; padding:20px;} table {width:100%; border-collapse:collapse; text-align:center;} th, td {border:1px solid #ddd; padding:8px;} th {background:#f2f2f2;} .lab {background:#ffcccb;} .elective {background:#90ee90;} .lunch {background:#ffd700;} tbody tr:nth-child(odd) {background:#f8f8f8;} tfoot {background:#e6e6e6; font-weight:bold;} </style> </head> <body> <table> <thead> <tr><th colspan="7">Class Time Table</th></tr> <tr> <th>Time</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th> <th>Thursday</th><th>Friday</th><th>Saturday</th> </tr> </thead> <tbody> <tr> <td>9:00 - 10:00</td><td>Math</td><td>English</td><td>Science</td> <td>History</td><td>Geography</td><td rowspan="6">No Classes</td> </tr> <tr> <td>10:00 - 11:00</td><td>Physics</td><td>Chemistry</td><td>Biology</td> <td class="elective">Computer Science</td><td class="elective">Art</td> </tr> <tr> <td>11:00 - 12:00</td> <td class="lab" colspan="2">Physics Lab</td> <td class="lab" colspan="2">Chemistry Lab</td> <td class="lab">Biology Lab</td> </tr> <tr> <td>12:00 - 13:00</td><td class="lunch" colspan="5">Lunch Break</td> </tr> <tr> <td>13:00 - 14:00</td><td>Literature</td><td>Math</td><td>English</td> <td>Physics</td><td>Chemistry</td> </tr> <tr> <td>14:00 - 15:00</td> <td class="elective">Music</td><td class="elective">Drama</td> <td class="lab" colspan="3">Computer Lab</td> </tr> </tbody> <tfoot> <tr><td colspan="7">* Lab hours in pink, elective hours in green</td></tr> </tfoot> </table> </body> </html>
Copy
PROGRAM 3
Different styles for tags
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Styled Page (No Div)</title> <link rel="stylesheet" href="style.css"> <style> h2 { color: #2c3e50; font-family: 'Arial', sans-serif; border-bottom: 2px solid #3498db; padding-bottom: 10px; } h3:hover { color: #e74c3c; cursor: pointer; transition: color 0.3s ease; } hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } p[lang] { font-style: italic; } .highlight { background-color: #f1c40f; padding: 5px; } #main-content { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #ecf0f1; } div p { line-height: 1.6; margin-bottom: 15px; } div > span { font-weight: bold; color: #16a085; } h2 + p { font-size: 1.1em; color: #7f8c8d; } time[datetime] { color: #8e44ad; font-weight: bold; } p::first-letter { font-size: 1.5em; font-weight: bold; color: #c0392b; } img, a { border: 1px solid #bdc3c7; padding: 5px; } a:link, a:visited { color: #3498db; text-decoration: none; } a:hover, a:active { color: #e74c3c; text-decoration: underline; } img[alt] { max-width: 100%; height: auto; } div.special p { text-indent: 20px; color: #27ae60; } </style> </head> <body> <main id="main-content"> <h2>Welcome to Our Styled Page</h2> <p>This is a paragraph right after an h2. It demonstrates the adjacent sibling selector.</p> <h3>Hover over me!</h3> <hr> <p lang="en">This paragraph has a lang attribute, demonstrating the attribute selector.</p> <p>Here's a <span class="highlight">highlighted</span> word using the class selector.</p> <section> <p>This paragraph is inside a section, showing the descendant selector.</p> <span>This span is a direct child of the section.</span> </section> <p>The current date and time: <time datetime="2023-08-31">August 31, 2023</time></p> <p>Notice how the first letter of each paragraph is styled differently.</p> <article class="special"> <p>This paragraph is inside an article with class="special".</p> </article> <img src="https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https:// images.ctfassets.net/wp1lcwdav1p1/6z473u5f7WaFUnr9GxDEk2/085274c4a84 1bd2dc900ebca36c43c9c/GettyImages1255905237.jpg?w=1500&h=680&q=60&fit=fill&f=f aces&fm=jpg&fl=progre ssive&auto=format%2Ccompress&dpr=1&w=1000" alt="A placeholder image"> <p>Check out this <a href="https://searchcreators.org/">link</a> to see different link states.</p> </main> </body> </html>
Copy
PROGRAM 4
registration form
Copy
PROGRAM 5
newspaper
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>The Daily Chronicle</title> <style> body { font-family: Georgia, serif; background: #f4f4f4; color: #333; max-width: 1200px; margin: auto; padding: 20px; } header, footer { background: #1a1a1a; color: #fff; text-align: center; padding: 20px; } header h1 { margin: 0; font-size: 2.5em; } nav { background: #333; padding: 10px; text-align: center; } nav a { color: #fff; text-decoration: none; margin: 0 15px; } main { display: flex; gap: 20px; margin-top: 20px; } section { flex: 2; } article { background: #fff; padding: 20px; margin-bottom: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } article h2 { font-size: 1.8em; color: #1a1a1a; } figure { text-align: center; margin: 20px 0; } figcaption { font-style: italic; color: #666; font-size: 0.9em; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } th, td { border: 1px solid #ddd; padding: 10px; } th { background: #f2f2f2; } aside { flex: 1; background: #e6e6e6; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } </style> </head> <body> <header> <h1>The Daily Chronicle</h1> </header> <nav> <a href="#">Home</a> <a href="#">Politics</a> <a href="#">Technology</a> <a href="#">Sports</a> <a href="#">Entertainment</a> </nav> <main> <section> <article> <h2>Breaking News: Major Technological Breakthrough</h2> <p>Scientists have announced a groundbreaking discovery in quantum computing, potentially revolutionizing the tech industry.</p> <figure> <img src="https://www.cnet.com/a/img/resize/c7cb26e927bebaa784fb55a01e71d7fecb15d2e3/hub/2019/06/26/3f76e99d-8055-46f3-8f27-558ee276b665/20180405-ibm-qquantum-computer02.jpg?auto=webp&fit=crop&height=675&width=1200" alt="Quantum Computer" /> <figcaption>A state-of-the-art quantum computer at the research facility</figcaption> </figure> </article> <article> <h2>Local Sports Team Wins Championship</h2> <p>In a thrilling match, our local team secured victory in the national championship, bringing pride to our city.</p> <table> <tr><th>Team</th><th>Score</th></tr> <tr><td>Local Heroes</td><td>3</td></tr> <tr><td>Visiting Challengers</td><td>2</td></tr> </table> </article> </section> <aside> <h3>Weather Update</h3> <p>Expect sunny skies with a high of 75°F (24°C) today.</p> <h3>Upcoming Events</h3> <ul> <li>City Festival - This Weekend</li> <li>Tech Conference - Next Month</li> <li>Charity Run - In Two Weeks</li> </ul> </aside> </main> <footer> <p>© 2023 The Daily Chronicle. All rights reserved.</p> </footer> </body> </html>
Copy
PROGRAM 6
Calculator
<!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> <style> body { font-family: Arial; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #f0f0f0; } .calculator { background: #fff; padding: 20px; width: 300px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #display { width: 100%; height: 40px; font-size: 18px; text-align: right; margin-bottom: 10px; padding: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } button { padding: 10px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; background: #e0e0e0; } button:hover { background: #d0d0d0; } .operator { background: #f0a030; color: #fff; } </style> </head> <body> <div class="calculator"> <input type="text" id="display" readonly> <div class="buttons"> <button onclick="add('7')">7</button> <button onclick="add('8')">8</button> <button onclick="add('9')">9</button> <button class="operator" onclick="add('+')">+</button> <button onclick="add('4')">4</button> <button onclick="add('5')">5</button> <button onclick="add('6')">6</button> <button class="operator" onclick="add('-')">−</button> <button onclick="add('1')">1</button> <button onclick="add('2')">2</button> <button onclick="add('3')">3</button> <button class="operator" onclick="add('*')">×</button> <button onclick="add('0')">0</button> <button onclick="add('.')">.</button> <button class="operator" onclick="calc()">=</button> <button class="operator" onclick="add('/')">÷</button> <button class="operator" onclick="add('%')">%</button> <button class="operator" onclick="add('**')">xʸ</button> <button class="operator" onclick="sqrt()">√</button> <button class="operator" onclick="square()">x²</button> <button onclick="clearAll()">C</button> </div> </div> <script> let exp = ''; const display = document.getElementById('display'); function add(value) { exp += value; display.value = exp; } function clearAll() { exp = ''; display.value = ''; } function calc() { display.value = exp = eval(exp); } function sqrt() { display.value = exp = Math.sqrt(eval(exp)); } function square() { display.value = exp = Math.pow(eval(exp), 2); } </script> </body> </html>
Copy
PROGRAM 7
Convert JSON
Copy
PROGRAM 8
PHP
Copy
PROGRAM 9
jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Demo</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body {font-family: Arial, sans-serif; background:#f4f4f4; padding:20px;} .container {max-width:600px; margin:auto; background:#fff; padding:20px; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,.1);} .box {width:100px; height:100px; background:#3498db; margin:15px 0;} button {padding:8px 12px; background:#2ecc71; color:#fff; border:0; border-radius:4px; cursor:pointer; margin:5px 0;} button:hover {background:#27ae60;} </style> </head> <body> <div class="container"> <h2>a. Append Content</h2> <p id="para">This is an existing paragraph. </p> <ul id="list"><li>Item 1</li><li>Item 2</li></ul> <button id="appendBtn">Append</button> <h2>b. Animate Element</h2> <div id="box1" class="box"></div> <button id="animateBtn">Animate</button> <h2>c. Animate + Color Change</h2> <div id="box2" class="box"></div> <button id="colorBtn">Animate & Color</button> </div> <script> $(function () { // a. Append content $("#appendBtn").click(() => { $("#para").append("Appended text."); $("#list").append("<li>Appended item</li>"); }); // b. Animate element $("#animateBtn").click(() => $("#box1").animate({ width: 200, height: 200, opacity: .5 }, 1000)); // c. Animate + color change $("#colorBtn").click(() => { $("#box2").animate({ width: 200, height: 200 }, { duration: 1000, step: (now, fx) => fx.prop === "width" && $(fx.elem).css("background", `rgb(${Math.round(now)},52,219)`) }); }); }); </script> </body> </html>
Copy
PROGRAM 10
Ajax Demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> body{font-family:Arial;padding:20px;background:#f4f4f4;} .box{max-width:600px;margin:auto;background:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px #aaa;} button{background:#4CAF50;color:#fff;border:0;padding:8px 12px;border-radius:4px;cursor:pointer;margin:5px;} pre{background:#eee;padding:10px;border-radius:4px;} </style> </head> <body> <div class="box"> <h1>Ajax Demo</h1> <button onclick="noJQ()">Without jQuery</button><pre id="a"></pre> <button onclick="withJQ()">With jQuery</button><pre id="b"></pre> <button onclick="getJQ()">getJSON()</button><pre id="c"></pre> <button onclick="parseJQ()">parseJSON()</button><pre id="d"></pre> </div> <script> const data = { text: "This is a sample text from a simulated server response.", json: { name: "John Doe", age: 30, city: "New York" } }; function noJQ() { setTimeout(() => document.getElementById("a").textContent = data.text, 500); } function withJQ() { $.ajax({ success: r => $("#b").text(data.text) }); } function getJQ() { $.getJSON("", () => $("#c").text(JSON.stringify(data.json, null, 2))); } function parseJQ() { let obj = $.parseJSON(JSON.stringify(data.json)); $("#d").text(JSON.stringify(obj, null, 2)); } </script> </body> </html>
Copy