Posts

Program3

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styled HTML Page</title> <link rel="stylesheet" href="lab3.css"> </head> <body> <!-- h2 and h3 tags with custom styles --> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <!-- Horizontal rule --> <hr> <!-- Paragraph with default styles --> <p>This is a simple paragraph styled with a class selector.</p> <!-- div with id for specific styling --> <div id="main-content"> <p>Content inside a div styled with an ID selector. This paragraph belongs to the main content section.</p> <span class="highlight">This text is highlighted with a class selector.</span> </div> <!-- Time element with custom styling --...
Post a Comment
Read more

Program4

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Registration Form</title> <style> /* Basic styling for the page */ body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 20px; } h1 { text-align: center; color: #4CAF50; font-size: 36px; } /* Table for form layout */ table { width: 60%; margin: 0 auto; border-collapse: collapse; } td { padding: 10px; font-size: 16px; } /* Styling for input fields and labels */ input[type="text"], input[type="email"], input[type="password"], select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; } input[type="radio"], input[type="checkbox"] { margin-righ...
Post a Comment
Read more

Program5

 <!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; line-height: 1.6; margin: 0; padding: 0; } header, footer { background-color: #2C3E50; color: white; text-align: center; padding: 10px 0; } article, section { margin: 20px; padding: 10px; background-color: #ECF0F1; border-radius: 8px; } article { background-color: #BDC3C7; } h1, h2 { color: #34495E; } table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid #BDC3C7; } th, td { padding: 8px; text-align: left; } figure { background-color: #F4F6F7; padding: 10px; border-radius: 8px; } aside { background-color: #D5DBDB; padding: 15px; margin-top: 20px; } aside p { font-size: 14px; } </style> </head> <body> <header> <h1>Welcome to the Newspaper...
Post a Comment
Read more

Program6

 <!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, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .calculator { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } input, button { padding: 10px; margin: 5px; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; } button { background-color: #2ecc71; color: white; cursor: pointer; } button:hover { background-color: #27ae60; } input[type="number"] { width: 150px; text-align: center; } .results { margin-top: 10px; } </style> </head> <body> <div class="calculator"> <h2>Calculator</h2> <input type="number...
Post a Comment
Read more

Program7

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSON, CSV, Hash Operations</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background- color: #f4f4f4; } textarea { width: 100%; height: 100px; } button { padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } .output { margin-top: 20px; } </style> </head> <body> <h2>JSON and CSV Operations</h2> <!-- Convert JSON text to JavaScript Object --> <h3>1. JSON to JavaScript Object</h3> <textarea id="jsonInput" placeholder='{"name": "John", "age": 30}'></textarea><br> <button onclick="jsonToObject()">Convert JSON to Object</button> ...
Post a Comment
Read more

Program10

 <!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; margin: 20px; text-align: center; } .content { margin: 20px auto; padding: 20px; border: 1px solid #ddd; width: 300px; text-align: left; } button { padding: 10px 15px; margin: 10px 5px; cursor: pointer; background-color: #4caf50; color: white; border: none; border-radius: 5px; } button:hover { background-color: #388e3c; } h1 { margin-bottom: 30px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>AJAX and JSON Demonstration</h1> <!-- Content sections --> <div id="content-js" class="content">Content will load here (Vanilla JS).</div> <div id=...
Post a Comment
Read more

Program9

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Combined Example</title> <style> body { font-family: Arial, sans-serif; margin: 20px; text-align: center; } p, ul { margin: 20px 0; } #box { width: 100px; height: 100px; background-color: #2196f3; margin: 20px auto; } button { padding: 10px 15px; margin: 10px 5px; cursor: pointer; background-color: #4caf50; color: white; border: none; border-radius: 5px; } button:hover { background-color: #388e3c; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>jQuery Combined Example</h1> <!-- Content to append to --> <p id="paragraph">This is a paragraph.</p> <ul id="list"> <li>Item 1</li> <li>Item 2</li> </ul> <!...
Post a Comment
Read more