Scribd
Upload
44 views10 pages

Web Technology Lab

Uploaded by

Navin Mathad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views10 pages

Web Technology Lab

Uploaded by

Navin Mathad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

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>&copy; 2023 The Daily Chronicle. All rights reserved.</p>

</footer>

</body>

</html>

You might also like