WEB TECHNOLOGY LAB WEEK-1 1. Static Website Development A. Create a static website using HTML tables. B. Create a registration form using HTML forms. C. Apply various CSS attributes and styles. Problem Statement: Design Student Registration Form in HTML with cascading style sheets usin ding style sheets using Table Tags in HTML. A simple HTML code for student registration Form that contains all necessary fields in the student registration form. Take An Example, First-Name, Last-Name, Email- id, MobileNumber, Address, H Number, Address, Hobbies, Course, Gender, Date obbies, Course, Gender, Date-Of- Birth, Etc. -Of-Birth, Etc. Description: A static site consists of web pages that look the same every time visitors access them. It can be written in Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS),and html tags Experiment: 1. Static websit development 1. A) Create a static website using HTM Create a static website using HTML tables Program steps: Open notepad Create tags – table, tr, th, td Fill data Save as html file Table.html <!DOCTYPE html> <html lang="en"> <head> <metacharsetcharset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Static Website with HTML Table</title> <style> /* Optional: Add some basic styling for better presentation */body { font-family: Arial, sansserif;margin: 20px; } table { width: 100%; border-collapse: WEB TECHNOLOGY LAB WEEK-1 collapse;margin-top: 20px; } th, td { border: 1px solid #ddd;padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Sample Table</h1> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead > <tbody> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> <tr> <td>Row 3, Cell 1</td> <td>Row 3, Cell 2</td> <td>Row 3, Cell 3</td> </tr> </tbody> </table> </body> </html> WEB TECHNOLOGY LAB WEEK-1 OUTPUT: 1.B) Create a registration form using HTML forms Program steps: 1. Open notepad 2. Create tags – form and its attributes 3. Save as html file Form.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 /title> <style> body { font-family: Arial, sansserif;margin: 20px; } form { width: 300px; margin: 0 auto; } label { display: block; margin-bottom:8px; } input { width : 100% WEB TECHNOLOGY LAB WEEK-1 ; padding:8px; margin-bottom:16px; box-sizing:border-box; } button { backgroundcolor:#4CAF50; color:green; padding:10px15px; border:none; border-radius: 4px; cursor:pointer; } button:hover { background-color: #45a0 background-color: #45a049; } </style> </head> <body> <h1><center>Registration Form</center></h1> <form> <label for="fname">First Name:</label> <input type="text" id="fname" name="fname" required> <label for="lname">Last Name:</label> <input type="text" id="lname" name="lname" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <button type="submit">Register</button> </form> </body> </html> Output: WEB TECHNOLOGY LAB WEEK-1 C. Apply various CSS attributes and styles. CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.CSS provides various style properties such as background color, padding,margin, border-color, and many more, to style a webpage. Each property in CSS has a name-value pair, and each property is separated by a semicolon (;). i) Inline CSS: The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page. ii) External CSS: An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page Program steps: The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Program steps: Open notepad and write html code In the HTML page, locate where css is requried Put the css code the html content Add the rules of CSS in the new line. Close the style tag. Main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>HTML CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> WEB TECHNOLOGY LAB WEEK-1 <h1>Welcome to My Page</h1> </header> <main> <p class="intro-paragraph">This is a paragraph styled with an external CSS file.</p> <div class="styled-box"> <h2>A Styled Box</h2> <p>This box has a background color and padding.</p> </div> </main> <footer> <p>© 2025 Basic HTML CSS Example</p> </footer> </body> </html> styles.css body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: white; padding: 1rem 0; text-align: center; } h1 { margin: 0; } main { padding: 20px; WEB TECHNOLOGY LAB WEEK-1 max-width: 800px; margin: 20px auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .intro-paragraph { font-size: 1.1em; line-height: 1.6; color: #555; } .styled-box { background-color: #e0f7fa; border: 1px solid #00bcd4; padding: 15px; margin-top: 20px; border-radius: 5px; }