Scribd
Upload
7 views

First Web Development Assignment

Uploaded by

all in 1
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
7 views

First Web Development Assignment

Uploaded by

all in 1
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/ 17

First Web Development Assignment :-

[Q1] Create a table -in which there should be five student


data ?

Answer :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Student Data</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
table {
margin: auto;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #4b79a1;
color: #fff;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Student Data
Table</h1>
<table>
<thead>
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Age</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>107</td>
<td>Ayush Mishra</td>
<td>20</td>
<td>3rd Year</td>
<td>A+</td>
</tr>
<tr>
<td>108</td>
<td>Suraj Singh</td>
<td>21</td>
<td>3rd Year</td>
<td>A+</td>
</tr>
<tr>
<td>103</td>
<td>Rohan Verma</td>
<td>19</td>
<td>2nd Year</td>
<td>A</td>
</tr>
<tr>
<td>104</td>
<td>Anjali Mehta</td>
<td>22</td>
<td>4th Year</td>
<td>A+</td>
</tr>
<tr>
<td>105</td>
<td>Amit Dubey</td>
<td>20</td>
<td>3rd Year</td>
<td>B+</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:-

[Q2] Create an form -in which there should be drop-down


button , Check-box button , radio button and all button?
Answer :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Stylish Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ffecd2, #fcb69f);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.form-container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 300px;
text-align: center;
}

.form-container h2 {
margin-bottom: 20px;
color: #f76c6c;
}

label {
display: block;
margin-top: 10px;
color: #333;
}

input[type="text"],
input[type="email"],
select,
textarea {
width: 90%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

.radio-group,
.checkbox-group {
display: flex;
justify-content: space-around;
margin-top: 5px;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}

textarea {
resize: none;
height: 80px;
}

button {
background: #f76c6c;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 15px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}

button:hover {
background: #fc4a4a;
}

</style>
<body>
<div class="form-container">
<h2>Sample Form</h2>
<form>
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Enter your name">
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email">

<!-- Dropdown Menu -->


<label for="role">Role:</label>
<select id="role" name="role">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option
value="developer">Developer</option>
<option value="designer">Designer</option>
</select>

<!-- Radio Buttons -->


<label>Gender:</label>
<div class="radio-group">
<label><input type="radio" name="gender"
value="male"> Male</label>
<label><input type="radio" name="gender"
value="female"> Female</label>
<label><input type="radio" name="gender"
value="other"> Other</label>
</div>

<!-- Checkbox Buttons -->


<label>Skills:</label>
<div class="checkbox-group">
<label><input type="checkbox" name="skills"
value="html"> HTML</label>
<label><input type="checkbox" name="skills"
value="css"> CSS</label>
<label><input type="checkbox" name="skills"
value="javascript"> JavaScript</label>
<label><input type="checkbox" name="skills"
value="python"> Python</label>
</div>

<!-- Textarea -->


<label for="message">Message:</label>
<textarea id="message" name="message"
placeholder="Write something..."></textarea>

<!-- Buttons -->


<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div>
</body>

</html>

Output:-
[Q3] Create 5 most popular person list using html css?
Answer:- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title> Hit List</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: aqua;
}
.container {
background: #fff;
padding: 45px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #e0e0e0;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
width: 350px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Hit List</h2>
<ul>
<li>
<strong>Name:</strong> YO YO Honey Singh
<br>
<strong>Age:</strong> 41<br>
<strong>Major:</strong> Singer and music
producer
</li>
<li>
<strong>Name:</strong> salmon bhai<br>
<strong>Age:</strong> 58<br>
<strong>Major:</strong> Indian actor and film
producer
</li>
<li>
<strong>Name:</strong> Lawrence
Bishnoi<br>
<strong>Age:</strong> 31<br>
<strong>Major:</strong> Indian gangster
</li>
<li>
<strong>Name:</strong> Virat kohli<br>
<strong>Age:</strong> 36<br>
<strong>Major:</strong> Indian crickter
</li>
<li>
<strong>Name:</strong> Dhinchak Pooja<br>
<strong>Age:</strong> 30<br>
<strong>Major:</strong> Indian
Youtuber(Worst Singer )
</li>
</ul>
</div>
</body>
</html>
[Q4]

You might also like