Web Technology Lab
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;
color: #333;
margin: 0;
padding: 20px;
h1 {
text-align: center;
color: #4caf50;
font-size: 2em;
table {
margin: auto;
background-color: #ef9b9b;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(216, 183, 183, 0.1);
padding: 20px;
width: 90%;
max-width: 500px;
td {
padding: 10px;
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
input[type="submit"] {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
label {
font-size: 1em;
color: #555;
.terms {
font-size: 0.9em;
color: #777;
</style>
</head>
<body>
<h1>Registration Form</h1>
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" required /></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" required /></td>
</tr>
<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="tel" id="phone" name="phone" required /></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td>
<textarea id="address" name="address" rows="3" required></textarea>
</td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td>
<input type="password" id="password" name="password" required />
</td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required /></td>
</tr>
<tr>
<td>
<label for="terms">
<input type="checkbox" id="terms" name="terms" required />
I agree to the terms and conditions
</label>
</td>
<td></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" value="Register" />
</td>
</tr>
</table>
</body>
</html>
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>
<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;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
header {
background-color: #1a1a1a;
color: #fff;
padding: 20px;
text-align: center;
header h1 {
margin: 0;
font-size: 2.5em;
nav {
background-color: #333;
color: #fff;
padding: 10px;
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
nav ul li {
margin: 0 10px;
nav ul li a {
color: #fff;
text-decoration: none;
main {
display: flex;
margin-top: 20px;
section {
flex: 2;
margin-right: 20px;
article {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
article h2 {
color: #1a1a1a;
font-size: 1.8em;
aside {
flex: 1;
background-color: #e6e6e6;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
figure {
margin: 0;
align: center;
figure img {
max-width: 100%;
height: auto;
figcaption {
font-style: italic;
color: #666;
font-size: 0.9em;
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
th {
background-color: #f2f2f2;
footer {
background-color: #1a1a1a;
color: #fff;
text-align: center;
padding: 10px;
margin-top: 20px;
</style>
</head>
<body>
<header>
<h1>The Daily Chronicle</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Breaking News: Major Technological Breakthrough</h2>
<p>Scientists have announced a groundbreaking discovery in the field of 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
-q-quantum-computer-02.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>
