Scribd
Upload
19 views5 pages

Bca WT Assignment-2

Uploaded by

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

Bca WT Assignment-2

Uploaded by

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

YASHDEEP SINGH ARORA

BCA EA
1029802024
BCA ASSIGNMENT WT-2

1. Write the HTML code to generate a Web layout. Consider the following constraints while writing the HTML code:
Use CSS style in form tag to set
i) the background color of the form to pink and
ii) font text size to 30px.

<html>
<head>
<title>Doctor Appointment Form</title>
<style>
body{
background-color: pink;
}
h2 {
font-size: 30px;
color: black;
border-bottom: 2px solid red;
padding-bottom: 10px;
margin-top: 20px;
}
label {
font-size: 16px;
display: inline-block;
width: 150px;
margin-top: 10px;
}
input[type="text"],
input[type="date"],
input[type="time"],
input[type="tel"],
textarea {
width: 200px;
padding: 5px;
font-size: 16px;
}
.inline-input input {
width: 95px;
margin-right: 5px;
}
.gender-options {
margin-top: 10px;
}
.checkbox-group {
display: flex;
flex-direction: column;
margin-top: 10px;
}
.submit-btn {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<form>
<h2>Doctor Appointment Form</h2>

<label for="appointment-date">Appointment Date</label>


<input type="date" id="appointment-date" name="appointment-date" required><br>

<label for="appointment-time">Appointment Time</label>


<input type="time" id="appointment-time" name="appointment-time" required><br>
<label for="name">Name</label>
<div class="inline-input">
<input type="text" name="first-name" placeholder="First" required>
<input type="text" name="last-name" placeholder="Last" required>
</div><br>

<label>Gender</label>
<div class="gender-options">
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div><br>

<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="#####" required><br>

<label for="address">Address</label>
<div class="inline-input">
<input type="text" name="city" placeholder="City" required>
<input type="text" name="state" placeholder="State" required>
</div><br>

<label for="query">Your Query</label>


<textarea id="query" name="query" rows="3" placeholder="Enter your query here..."
required></textarea><br>

<label>Appointment Type</label>
<div class="checkbox-group">
<label><input type="checkbox" name="appointment-type" value="cervix"> Cervix
checkup</label>
<label><input type="checkbox" name="appointment-type" value="heart"> Heart
checkup</label>
<label><input type="checkbox" name="appointment-type" value="eye"> Eye check-
up</label>
<label><input type="checkbox" name="appointment-type" value="hearing"> Hearing
test</label>
</div><br>

<div class="submit-btn">
<input type="submit" value="Send">
</div>
</form>
</body>
</html>
2. Write the HTML code to generate the following webpage:

<html>
<head>
<title>Table</title>
<style>
body {
font-size: 15px;
}
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
text-align: center;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
.country {
width: 30%;
}
.year, .population {
width: 35%;
}
</style>
</head>
<body>
<table>
<tr>
<th class="country">Country</th>
<th colspan="2">Population (in crores)</th>
</tr>
<tr>
<td rowspan="3" class="country">INDIA</td>
<td class="year">1998</td>
<td class="population">85</td>
</tr>
<tr>
<td class="year">1999</td>
<td class="population">90</td>
</tr>
<tr>
<td class="year">2000</td>
<td class="population">90</td>
</tr>
<tr>
<td rowspan="3" class="country">USA</td>
<td class="year">1998</td>
<td class="population">85</td>
</tr>
<tr>
<td class="year">1999</td>
<td class="population">90</td>
</tr>
<tr>
<td class="year">2000</td>
<td class="population">90</td>
</tr>
<tr>
<td rowspan="3" class="country">UK</td>
<td class="year">1998</td>
<td class="population">85</td>
</tr>
<tr>
<td class="year">1999</td>
<td class="population">90</td>
</tr>
<tr>
<td class="year">2000</td>
<td class="population">90</td>
</tr>
</table>
</body>
</html>

You might also like